:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #efeff1;
  background: #0e0e10;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; margin: 0; background: #0e0e10; }

body { min-height: 100vh; }

button,
input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
  align-items: center;
  height: 3.25rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid #26262c;
  background: #18181b;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  width: fit-content;
  color: #f7f7f8;
  font-size: 0.98rem;
  font-weight: 780;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand > span:last-child > span { color: #bf94ff; }

.brand-mark {
  display: grid;
  width: 1.78rem;
  height: 1.78rem;
  place-items: center;
  border-radius: 0.32rem;
  color: #fff;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: #9147ff;
}

.topbar-center {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #a7a7b0;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.live-pulse,
.record-dot,
.room-live,
.presence-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 99px;
  background: #e91916;
}

.topbar .live-pulse { width: 0.32rem; height: 0.32rem; }

.topbar-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.68rem;
  color: #a7a7b0;
  font-size: 0.72rem;
  font-weight: 650;
}

.topbar-room { display: inline-flex; align-items: center; gap: 0.28rem; }
.lock-glyph { color: #bf94ff; }

.topbar-action {
  min-height: 1.78rem;
  padding: 0 0.5rem;
  border: 1px solid #4a3a68;
  border-radius: 0.22rem;
  color: #eadfff;
  font-size: 0.61rem;
  font-weight: 780;
  background: #292033;
  cursor: pointer;
}

.topbar-action:hover { border-color: #bf94ff; background: #352447; }

.avatar {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 99px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  background: #6241a4;
}

.app-layout {
  display: grid;
  grid-template-columns: 12.3rem minmax(0, 1fr) 19.8rem;
  min-height: calc(100vh - 3.25rem);
}

.left-rail,
.chat-rail { background: #18181b; }

.left-rail {
  position: sticky;
  top: 3.25rem;
  display: flex;
  align-self: start;
  flex-direction: column;
  height: calc(100vh - 3.25rem);
  overflow: auto;
  border-right: 1px solid #26262c;
}

.rail-section { padding: 0.85rem 0.58rem; border-bottom: 1px solid #29292f; }

.rail-heading {
  margin: 0 0 0.55rem 0.18rem;
  color: #a7a7b0;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.role-picker { display: grid; gap: 0.1rem; }

.role {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  width: 100%;
  min-height: 2.22rem;
  padding: 0.42rem 0.5rem;
  border: 0;
  border-radius: 0.24rem;
  color: #c9c9d0;
  font-size: 0.76rem;
  font-weight: 680;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.role:hover { color: #fff; background: #27272d; }
.role.is-active { color: #fff; background: #32204e; }
.role:disabled { opacity: 0.4; cursor: not-allowed; }
.role:disabled:hover { color: #c9c9d0; background: transparent; }
.role-icon { color: #bf94ff; font-size: 0.72rem; }

.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.room-count { padding: 0.1rem 0.34rem; border-radius: 99px; color: #bebec7; font-size: 0.61rem; background: #303038; }

.room-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.1rem 0;
  padding: 0.38rem 0.35rem;
  border-radius: 0.24rem;
}

.room-link.is-current { background: #28282e; }
.room-link--muted { opacity: 0.58; }
.room-avatar { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border-radius: 99px; color: #d7d7de; font-size: 0.82rem; background: #34343c; }
.room-avatar--live { color: #fff; background: #7142ba; }
.room-copy { display: grid; min-width: 0; gap: 0.03rem; }
.room-copy strong { overflow: hidden; color: #e9e9ec; font-size: 0.72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.room-copy small { overflow: hidden; color: #a7a7b0; font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.room-live { width: 0.31rem; height: 0.31rem; margin-left: auto; }
.rail-footer { margin: auto 0 0; padding: 0.9rem 0.75rem; color: #73737d; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.08em; }

.watch-page {
  min-width: 0;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(0.8rem, 1.65vw, 1.4rem);
  background: #0e0e10;
}

.stream-card {
  overflow: hidden;
  border: 1px solid #28282e;
  border-radius: 0.26rem;
  background: #000;
  box-shadow: 0 0.65rem 2rem rgba(0, 0, 0, 0.23);
}

.media-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 19rem;
  overflow: hidden;
  background: #08080a;
}

#remote-video-backdrop {
  position: absolute;
  z-index: 1;
  inset: -8%;
  display: block;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  filter: blur(1.7rem) brightness(0.42) saturate(0.78);
  opacity: 0.82;
  transform: scale(1.06);
  pointer-events: none;
}

#remote-video,
#frame-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Preserve the glasses' portrait POV. Filling a 16:9 player warps every frame. */
  object-fit: contain;
  object-position: center;
  background: transparent;
}

#frame-placeholder {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  gap: 0.52rem;
  place-items: center;
  margin: 0;
  color: #b7b7c0;
  font-size: 0.8rem;
  font-weight: 650;
}

.placeholder-mark {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 99px;
  color: #d2b6ff;
  font-size: 1.2rem;
  background: #31204a;
}

.stream-topline {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.1rem;
  padding: 0.58rem 0.72rem 1.1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
}

.stream-source { display: inline-flex; align-items: center; gap: 0.44rem; }
.live-label { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.34rem; border-radius: 0.16rem; color: #fff; font-size: 0.6rem; font-weight: 850; letter-spacing: 0.055em; background: #e91916; }
.live-label.is-ended { color: #f3d7d4; background: #63312e; }
.live-label.is-ended .live-pulse { background: #f4a9a1; }
.live-label .live-pulse { width: 0.27rem; height: 0.27rem; background: #fff; }
.source-name,
.stream-quality { color: #e8e8ec; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; }
.stream-quality { color: #c8c8d0; }

.stage-corner {
  position: absolute;
  z-index: 6;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.14rem;
  color: #efeff1;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.065em;
  background: rgba(0, 0, 0, 0.42);
}

.stage-corner--top-right { top: 0.7rem; right: 0.7rem; }

.stage-console {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.2rem 0.75rem 0.72rem;
  color: #efeff1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.75) 57%, transparent 100%);
}

.stage-console-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  color: #b7b7c0;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.085em;
}

.console-state { color: #bdebdc; font-weight: 750; letter-spacing: 0.01em; }
.console-state::before { content: ""; display: inline-block; width: 0.32rem; height: 0.32rem; margin-right: 0.28rem; border-radius: 99px; background: #23b489; }

.control-fields {
  display: grid;
  grid-template-columns: minmax(7.3rem, 0.54fr) minmax(12rem, 1fr) auto;
  gap: 0.42rem;
  align-items: end;
}

.control-fields label { display: grid; gap: 0.22rem; color: #c7c7ce; font-size: 0.59rem; font-weight: 760; }

input {
  width: 100%;
  min-width: 0;
  height: 2.2rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.16rem;
  outline: none;
  color: #f4f4f6;
  font-size: 0.74rem;
  background: rgba(20, 20, 23, 0.88);
}

input:focus { border-color: #bf94ff; box-shadow: 0 0 0 1px #bf94ff; }

.join {
  height: 2.2rem;
  padding: 0 0.76rem;
  border: 0;
  border-radius: 0.16rem;
  color: #fff;
  font-size: 0.71rem;
  font-weight: 800;
  white-space: nowrap;
  background: #9147ff;
  cursor: pointer;
}

.join:hover:not(:disabled) { background: #a970ff; }
.join:disabled { opacity: 0.6; cursor: progress; }
.join.is-host-start { min-width: 11.3rem; background: linear-gradient(135deg, #9147ff, #6f2cc8); box-shadow: 0 0 0 1px rgba(213, 180, 255, 0.42), 0 0.45rem 1.2rem rgba(145, 71, 255, 0.22); }
.join.is-host-start:hover:not(:disabled) { background: linear-gradient(135deg, #aa70ff, #833ee5); }

.status { min-height: 0.9rem; margin: 0.35rem 0 0; color: #d7d7dd; font-size: 0.65rem; font-weight: 620; }
.status::before { content: "•"; margin-right: 0.25rem; color: #23b489; }
.status.is-error { color: #ffb0ad; }.status.is-error::before { color: #f2504c; }

body.is-host-dashboard .left-rail > .rail-section:first-child { display: none; }
body.is-host-dashboard .control-fields {
  display: flex;
  align-items: center;
}
body.is-host-dashboard .control-fields label { display: none; }
body.is-host-dashboard .join.is-host-start {
  min-width: min(18rem, 100%);
  height: 2.7rem;
  font-size: 0.84rem;
}
.stage-vignette { position: absolute; z-index: 4; inset: 0; pointer-events: none; box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.3); }
.local-video-stash { display: none; }

.archive-shelf {
  margin-top: clamp(1.15rem, 2vw, 1.65rem);
  padding-top: 1rem;
  border-top: 1px solid #28282e;
}

.archive-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.72rem;
}

.archive-kicker {
  margin: 0 0 0.23rem;
  color: #a7a7b0;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.archive-heading h2 {
  margin: 0;
  color: #f0f0f2;
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -0.025em;
}

.archive-count {
  flex: 0 0 auto;
  padding: 0.23rem 0.42rem;
  border-radius: 99px;
  color: #aeadb8;
  font-size: 0.61rem;
  font-weight: 760;
  background: #24242a;
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.8rem, 1fr));
  gap: 0.66rem;
}

.archive-empty {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.62rem;
  min-height: 5.9rem;
  padding: 0.78rem;
  border: 1px dashed #35353d;
  border-radius: 0.3rem;
  color: #b9b9c1;
  background: #151519;
}

.archive-empty-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.28rem;
  color: #d2b6ff;
  font-size: 1.05rem;
  background: #2c2141;
}

.archive-empty strong { display: block; color: #ebebee; font-size: 0.75rem; }
.archive-empty p { margin: 0.16rem 0 0; color: #898993; font-size: 0.67rem; }

.archive-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #303038;
  border-radius: 0.3rem;
  background: #19191d;
  box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.16);
}

.archive-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(164, 105, 255, 0.38), transparent 34%),
    linear-gradient(140deg, #2b2041, #15151a 58%, #0d0d10);
}

.archive-thumb::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.76));
  pointer-events: none;
}

.archive-thumb img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-thumb-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d5baff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.archive-thumb-state,
.archive-thumb-duration {
  position: absolute;
  z-index: 3;
  bottom: 0.42rem;
  padding: 0.18rem 0.3rem;
  border-radius: 0.14rem;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  background: rgba(13, 13, 16, 0.78);
}

.archive-thumb-state { left: 0.42rem; color: #f5beb8; }
.archive-thumb-duration { right: 0.42rem; }

.archive-meta { padding: 0.52rem 0.55rem 0.58rem; }
.archive-meta strong { display: block; overflow: hidden; color: #efeff1; font-size: 0.72rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.archive-meta span { display: block; overflow: hidden; margin-top: 0.18rem; color: #9d9da6; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }

.media-stage.is-ended #frame-placeholder { color: #d7c3ff; }
.media-stage.is-ended .placeholder-mark { color: #f2d8d5; background: #4c2b2a; }

.chat-rail {
  position: sticky;
  top: 3.25rem;
  display: flex;
  align-self: start;
  flex-direction: column;
  height: calc(100vh - 3.25rem);
  min-width: 0;
  border-left: 1px solid #26262c;
}

.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0.85rem; border-bottom: 1px solid #29292f; }
.eyebrow { margin: 0; color: #a7a7b0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; }
.chat-header h2 { margin: 0.2rem 0 0; color: #efeff1; font-size: 0.92rem; letter-spacing: -0.025em; }
.chat-lock { display: grid; width: 1.72rem; height: 1.72rem; place-items: center; border-radius: 0.2rem; color: #d4b9ff; background: #2d2044; }
.chat-presence { display: flex; align-items: center; gap: 0.4rem; margin: 0.62rem 0.7rem 0; padding: 0.45rem 0.5rem; border-radius: 0.18rem; color: #bcbcc5; font-size: 0.68rem; background: #242429; }
.presence-dot { width: 0.32rem; height: 0.32rem; background: #23b489; }
.live-alert { margin: 0.48rem 0.7rem 0; padding: 0.48rem 0.55rem; border-left: 2px solid #e91916; color: #ffd7d4; font-size: 0.67rem; font-weight: 700; background: #352024; }
.chat-feed { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; padding: 0.78rem 0.7rem; }
.chat-system-message { padding: 0.58rem; border-left: 2px solid #9147ff; color: #d6d6dd; background: #23212a; }
.system-badge { color: #c9a8ff; font-size: 0.56rem; font-weight: 850; letter-spacing: 0.08em; }
.chat-system-message p { margin: 0.22rem 0; color: #efeff1; font-size: 0.71rem; font-weight: 680; }.chat-system-message small { color: #aaaab4; font-size: 0.63rem; line-height: 1.35; }
.chat-divider { display: flex; align-items: center; gap: 0.4rem; margin: 0.95rem 0; color: #71717c; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; }.chat-divider::before,.chat-divider::after { content: ""; height: 1px; flex: 1; background: #34343a; }
.chat-empty { display: grid; gap: 0.32rem; place-items: center; margin: auto 0; padding: 1rem; color: #b7b7c0; text-align: center; }.chat-empty-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 99px; color: #cba8ff; background: #2d2044; }.chat-empty p { margin: 0; font-size: 0.71rem; font-weight: 680; }.chat-empty small { color: #83838d; font-size: 0.62rem; line-height: 1.35; }
.chat-compose { display: flex; gap: 0.38rem; padding: 0.65rem 0.7rem 0; border-top: 1px solid #29292f; }.chat-compose input { height: 2.18rem; color: #85858e; font-size: 0.67rem; background: #242429; }.chat-compose input:disabled { opacity: 1; }.chat-compose button { width: 2.18rem; height: 2.18rem; border: 0; border-radius: 0.16rem; color: #83838d; background: #34343b; }.chat-disclaimer { margin: 0; padding: 0.42rem 0.7rem 0.7rem; color: #686872; font-size: 0.57rem; text-align: center; }

.access-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(145, 71, 255, 0.18), transparent 38%),
    rgba(7, 7, 9, 0.93);
  backdrop-filter: blur(0.7rem);
}

.access-panel {
  width: min(100%, 24rem);
  padding: 1.5rem;
  border: 1px solid #44315e;
  border-radius: 0.5rem;
  color: #e9e4ef;
  background: linear-gradient(145deg, #211a2b, #151519 72%);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.48);
}

.access-mark { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 0.42rem; color: #fff; font-size: 0.73rem; font-weight: 900; background: #9147ff; }
.access-kicker { margin: 1rem 0 0.28rem; color: #c7a7ff; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.1em; }
.access-panel h1 { margin: 0; color: #fff; font-size: 1.35rem; letter-spacing: -0.04em; }
.access-panel > p:not(.access-kicker):not(.access-status):not(.access-host-note) { margin: 0.55rem 0 1.15rem; color: #bcb5c5; font-size: 0.78rem; line-height: 1.45; }
.access-field { display: grid; gap: 0.35rem; color: #d5cedd; font-size: 0.69rem; font-weight: 750; }
.access-field input { height: 2.55rem; border-color: #5e477c; background: #111115; }
.access-submit { width: 100%; height: 2.55rem; margin-top: 0.72rem; border: 0; border-radius: 0.22rem; color: #fff; font-size: 0.75rem; font-weight: 820; background: #9147ff; cursor: pointer; }
.access-submit:hover:not(:disabled) { background: #a970ff; }
.access-submit:disabled { opacity: 0.62; cursor: progress; }
.access-status { min-height: 1rem; margin: 0.68rem 0 0; color: #aaa3b5; font-size: 0.68rem; line-height: 1.35; }
.access-status.is-error { color: #ffb0ad; }
.access-host-note { margin: 0.8rem 0 0; padding-top: 0.76rem; border-top: 1px solid rgba(201, 168, 255, 0.18); color: #92889e; font-size: 0.64rem; line-height: 1.45; }

@media (max-width: 1180px) {
  .app-layout { grid-template-columns: 11rem minmax(0, 1fr); }
  .chat-rail { display: none; }
}

@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto; height: 3rem; }.topbar-center,.topbar-room { display: none; }
  .topbar-meta { gap: 0.32rem; }.topbar-action { padding: 0 0.35rem; font-size: 0.56rem; }
  .app-layout { display: block; min-height: calc(100vh - 3rem); }.left-rail { position: static; display: block; width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid #26262c; }.left-rail .rail-rooms,.rail-footer { display: none; }.rail-section { padding: 0.45rem 0.55rem; border: 0; }.rail-heading { display: none; }.role-picker { display: flex; gap: 0.15rem; }.role { justify-content: center; min-height: 2rem; font-size: 0.67rem; }.role-icon { display: none; }
  .watch-page { padding: 0.6rem; }.media-stage { min-height: 17rem; }
}

@media (max-width: 600px) {
  .media-stage { aspect-ratio: 9 / 13; min-height: 29rem; }
  .stream-topline { min-height: 2.8rem; }.source-name { display: none; }.stage-corner--top-right { top: 0.52rem; right: 0.52rem; }
  .stage-console { padding: 1.8rem 0.58rem 0.58rem; }.control-fields { grid-template-columns: 1fr; gap: 0.32rem; }.control-fields label { grid-template-columns: 5.2rem 1fr; align-items: center; }.control-fields label span { color: #bbb; }.join { width: 100%; }.status { margin-top: 0.28rem; }
}