:root {
  --live-bg: #eef1f5;
  --live-paper: #ffffff;
  --live-ink: #17202b;
  --live-muted: #5f6b78;
  --live-rule: #d9dfe6;
  --live-rule-dark: #9ba7b3;
  --live-violet: #6546b8;
  --live-violet-deep: #452b78;
  --live-magenta: #ad356f;
  --live-soft: #f4f1fa;
  --live-good: #1f7652;
  --live-warn: #9a5a10;
  --live-bad: #a33142;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  color: var(--live-ink);
  background: var(--live-bg);
  font-family: "Newsreader", Georgia, serif;
}

.live-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--live-rule);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 12px rgba(28, 35, 45, .06);
  backdrop-filter: blur(12px);
}

.live-brand-group { min-width: 0; display: flex; align-items: center; gap: 12px; }
.live-brand {
  color: var(--live-ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-context { padding-left: 12px; border-left: 1px solid var(--live-rule-dark); color: var(--live-muted); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.live-nav { display: flex; align-items: center; gap: 8px; }
.live-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: var(--live-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.live-nav a:hover, .live-nav a:focus-visible { color: var(--live-violet-deep); border-color: var(--live-violet); outline: 0; }

.live-app {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 64px) max(18px, env(safe-area-inset-right)) max(72px, calc(48px + env(safe-area-inset-bottom))) max(18px, env(safe-area-inset-left));
}

.live-kicker {
  margin: 0 0 7px;
  color: var(--live-magenta);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.live-title { max-width: 920px; margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(2.15rem, 4vw, 3.65rem); line-height: 1; font-weight: 650; letter-spacing: -.025em; }
.live-lede { max-width: 720px; margin: 13px 0 0; color: var(--live-muted); font-size: 1.05rem; line-height: 1.55; }
body[data-live-surface="room"] .live-app { width: min(1440px, 100%); padding-top: clamp(18px, 2.5vw, 30px); }
body[data-live-surface="room"] .live-title { font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1; }
body[data-live-surface="room"] .live-lede { margin-top: 9px; }
body[data-live-surface="room"] .live-status { margin-top: 14px; margin-bottom: 16px; }

.live-status {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  margin: 26px 0 22px;
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--live-rule);
  border-left: 3px solid var(--live-rule-dark);
  background: var(--live-paper);
  color: var(--live-muted);
}
.live-status::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #88818e; }
.live-status[data-tone="good"]::before { background: var(--live-good); }
.live-status[data-tone="warn"]::before { background: var(--live-warn); }
.live-status[data-tone="bad"]::before { background: var(--live-bad); }

.live-panel {
  border: 1px solid var(--live-rule);
  border-radius: 12px;
  background: var(--live-paper);
  box-shadow: 0 10px 28px rgba(28, 35, 45, .07);
  overflow: hidden;
}

.auth-panel, .guest-panel, .state-panel { max-width: 560px; padding: clamp(22px, 4vw, 36px); }
.auth-panel h2, .guest-panel h2, .state-panel h2, .room-side h2, .host-room h2 { margin: 0 0 9px; font-family: "Newsreader", Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.auth-panel p, .guest-panel p, .state-panel p { color: var(--live-muted); line-height: 1.5; }
.portal-link { display: inline-block; margin-top: 18px; color: var(--live-violet-deep); text-underline-offset: 3px; }
.auth-form { display: grid; gap: 13px; margin-top: 20px; }
label { font-weight: 600; }
input, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--live-rule-dark);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--live-ink);
  background: #fff;
  font: inherit;
}
textarea { min-height: 78px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--live-violet); outline-offset: 2px; }

button, .live-button {
  min-height: 44px;
  border: 1px solid var(--live-violet-deep);
  border-radius: 7px;
  padding: 9px 15px;
  color: #fff;
  background: var(--live-violet-deep);
  font: 600 .86rem/1.2 "Newsreader", Georgia, serif;
  letter-spacing: .035em;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .live-button:hover { background: var(--live-violet); }
button:focus-visible, .live-button:focus-visible { outline: 3px solid #d9c7f3; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.button-quiet { color: var(--live-violet-deep); background: var(--live-paper); }
.button-danger { border-color: var(--live-bad); background: var(--live-bad); }
.form-error { min-height: 1.3em; margin: 0; color: var(--live-bad) !important; }
.hidden { display: none !important; }

.room-shell { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; }
.stage-panel { min-width: 0; overflow: hidden; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--live-rule); background: #f7f8fb; }
.stage-head h2 { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.08rem; font-weight: 750; }
.room-shell[data-role="tutor"] .stage-head { color: #fff; border-color: #3b304d; background: #2c2438; }
.room-shell[data-role="student"] .stage-panel { border-color: #cbd4df; }
.annotation-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--live-rule-dark); background: #fffefa; }
.annotation-toolset, .annotation-history { display: flex; flex-wrap: wrap; gap: 5px; }
.annotation-history { margin-left: auto; }
.annotation-toolbar button { min-height: 36px; padding: 6px 10px; font-size: .78rem; }
.annotation-tool[aria-pressed="true"] { color: #fff; border-color: var(--live-violet-deep); background: var(--live-violet-deep); }
.annotation-setting { display: flex; align-items: center; gap: 6px; color: var(--live-muted); font-size: .76rem; font-weight: 600; }
.annotation-setting input[type="color"] { width: 34px; min-height: 34px; height: 34px; padding: 3px; border: 1px solid var(--live-rule-dark); background: #fff; }
.annotation-setting select { min-height: 34px; padding: 5px 24px 5px 8px; border: 1px solid var(--live-rule-dark); color: var(--live-ink); background: #fff; font: inherit; }
.media-stage { position: relative; min-height: min(58vh, 620px); overflow: hidden; background: #17151c; }
.media-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; background: #000; }
.annotation-layer { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.annotation-layer[data-tool]:not([data-tool=""]) { pointer-events: auto; cursor: crosshair; }
.annotation-layer[data-tool="eraser"] { cursor: cell; }
.annotation-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.annotation-layer .eraser-cursor { fill: rgba(104,64,170,.12); stroke: var(--live-violet-deep); stroke-opacity: .6; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.media-empty { position: absolute; top: 50%; left: 50%; width: min(100%, 460px); margin: 0; padding: 34px; transform: translate(-50%, -50%); text-align: center; color: #d9d4df; line-height: 1.5; }
.media-tile { position: absolute; inset: 0; overflow: hidden; background: #242029; }
.media-tile video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-tile-pip { z-index: 6; inset: auto 18px 18px auto; width: clamp(130px, 24%, 220px); aspect-ratio: 16 / 9; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.media-tile-pip video { object-fit: cover; }
.presentation-fullscreen { position: absolute; z-index: 12; top: 12px; right: 12px; min-height: 40px; padding: 8px 11px; border-color: rgba(255,255,255,.65); color: #fff; background: rgba(17,13,22,.82); }
.media-label { position: absolute; left: 9px; bottom: 9px; padding: 5px 8px; color: #fff; background: rgba(0,0,0,.65); font-size: .8rem; }
.room-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-top: 1px solid var(--live-rule-dark); background: #faf8f4; }
.room-controls button[aria-pressed="true"] { background: var(--live-magenta); border-color: var(--live-magenta); }

.room-side { display: grid; align-content: start; gap: 0; }
.room-shell[data-role="tutor"] .room-side { border-top: 3px solid var(--live-violet-deep); }
.room-shell[data-role="student"] .room-side { border-top: 3px solid #247968; }
.side-section { padding: 19px; }
.side-section + .side-section { border-top: 1px solid var(--live-rule); }
.chat-log { height: 210px; overflow: auto; display: grid; align-content: start; gap: 8px; margin: 12px 0; }
.chat-message { margin: 0; padding: 9px 10px; border-left: 2px solid #c9b9dc; background: var(--live-soft); line-height: 1.35; overflow-wrap: anywhere; }
.chat-message strong { color: var(--live-violet-deep); }
.inline-form { display: flex; gap: 7px; }
.inline-form input { min-width: 0; }
.inline-form button { flex: 0 0 auto; }
.hand-list, .participant-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.hand-list li, .participant-list li { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid #ddd4e7; background: var(--live-soft); }
.hand-list li > span:first-child, .participant-list li > span:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.hand-list button, .participant-list button { min-height: 36px; padding: 6px 9px; font-size: .82rem; }
.active-speaker { display: grid; gap: 5px; margin: 10px 0; padding: 12px; border-left: 3px solid var(--live-magenta); background: #fff4f8; }
.active-speaker span { color: var(--live-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.active-speaker button { margin-top: 5px; }
#call-next { width: 100%; margin: 8px 0; }
.participant-role { color: var(--live-muted); font-size: .76rem; }
.poll-box { display: grid; gap: 9px; background: #faf9fd; }
.poll-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.poll-choices button { padding-inline: 8px; }
.poll-choices button[aria-pressed="true"] { border-color: var(--live-magenta); background: var(--live-magenta); }
.poll-results { color: var(--live-muted); line-height: 1.45; }
.poll-results ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.poll-results li { padding: 7px; border: 1px solid var(--live-rule); text-align: center; }

.host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 20px; margin-top: 26px; }
.host-room { min-height: 360px; display: flex; flex-direction: column; padding: clamp(22px, 4vw, 34px); border-top: 4px solid var(--live-violet-deep); }
.host-room[data-room-id="mo-browser-test"] { border-top-color: var(--live-magenta); background: #fffafd; }
.host-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--live-muted); line-height: 1.35; }
.host-meta span:last-child { padding: 3px 8px; border: 1px solid #d8cce4; color: var(--live-violet-deep); background: var(--live-soft); font-size: .82rem; }
.host-meta span[data-room-phase][data-phase="live"] { color: var(--live-good); border-color: #b8d8cb; background: #edf8f3; }
.host-meta span[data-room-phase][data-phase="ended"] { color: var(--live-muted); border-color: var(--live-rule); background: #f2f4f6; }
.host-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.host-roster { margin-top: auto; border-top: 1px solid var(--live-rule); padding-top: 20px; }
.host-roster h3 { font-family: "Newsreader", Georgia, serif; font-size: 1rem; }
.roster-count { font-size: 2rem; color: var(--live-violet-deep); }
.portal-empty { padding: 30px; }

@media (max-width: 860px) {
  .room-shell { grid-template-columns: 1fr; }
  .room-side { grid-template-columns: 1fr 1fr; }
  .media-stage { min-height: 42vh; }
}

@media (max-width: 600px) {
  .live-header { min-height: 60px; gap: 8px; padding-block: 8px; }
  .live-brand-group { gap: 8px; }
  .live-context { padding-left: 8px; font-size: .66rem; letter-spacing: .06em; }
  .live-nav { gap: 0; }
  .live-nav a { min-height: 40px; padding-inline: 9px; }
  .live-nav a:first-child { display: none; }
  .live-app { padding-top: 22px; }
  .live-title { font-size: 2.15rem; }
  body[data-live-surface="room"] .live-title { font-size: 1.72rem; }
  .room-side { grid-template-columns: 1fr; }
  .media-stage { min-height: 34vh; }
  .media-tile-pip { right: 10px; bottom: 10px; width: min(34%, 150px); }
  .room-controls button { flex: 1 1 42%; }
  .inline-form { align-items: stretch; }
  .host-actions > * { flex: 1 1 44%; text-align: center; }
  .annotation-toolbar { gap: 6px; padding: 8px 10px; }
  .annotation-toolbar button { min-height: 44px; padding: 8px 12px; }
  .annotation-setting { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }