@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --font: "Noto Sans Georgian", "Segoe UI", sans-serif;
  --bg: #f7f8fc;
  --surface: rgba(255, 255, 255, .88);
  --surface-solid: #fff;
  --surface-soft: #f1f3f8;
  --surface-hover: #eceff6;
  --border: rgba(21, 29, 54, .10);
  --border-strong: rgba(21, 29, 54, .17);
  --text: #171a24;
  --muted: #70778b;
  --subtle: #9ba1b2;
  --accent: #6959ff;
  --accent-strong: #5140ec;
  --accent-soft: #eeeaff;
  --blue: #1685ff;
  --green: #17a66b;
  --amber: #dd8b22;
  --red: #e5505f;
  --icon-on-strong: #fff;
  --shadow: 0 22px 70px rgba(44, 48, 74, .10);
  --shadow-soft: 0 10px 32px rgba(44, 48, 74, .08);
  --sidebar-width: 268px;
  --topbar-height: 76px;
}

/* Public chat-first entry screen */
.auth-chat-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 29rem),
    var(--bg);
}
.auth-chat-page::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 5%, transparent) .65px, transparent .65px);
  background-size: 9px 9px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  opacity: .42;
}
.auth-chat-page .auth-ambient-blue { top: 7%; left: 18%; opacity: .14; }
.auth-chat-page .auth-ambient-pink { right: 13%; bottom: 5%; opacity: .12; }
.auth-chat-topbar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 24px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}
.auth-chat-topbar .auth-brand { color: var(--text); }
.auth-chat-actions { display: flex; align-items: center; gap: 10px; }
.auth-theme-button { position: static; flex: 0 0 auto; }
.auth-register-button {
  min-height: 43px;
  padding: 0 21px;
  border: 1px solid var(--text);
  border-radius: 999px;
  color: var(--surface-solid);
  background: var(--text);
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.auth-register-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.auth-chat-main {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  padding: 108px 24px 42px;
  place-items: center;
}
.auth-chat-hero {
  display: grid;
  width: min(100%, 930px);
  justify-items: center;
  text-align: center;
}
.auth-landing-orb {
  --orb-size: clamp(244px, 30vw, 318px);
  margin-bottom: 22px;
  animation: none;
}
.auth-landing-orb .orb-core { animation-duration: 4.1s, 2.8s; }

/* Lumen AI wordmark: extracted from the approved logo artwork so the exact lettering is preserved. */
.lumen-wordmark {
  display: block;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lumen-wordmark-landing {
  width: clamp(228px, 18vw, 236px);
  max-width: calc(100vw - 40px);
  margin: -22px auto 27px;
}
.lumen-wordmark-auth {
  width: 100px;
  max-width: 40%;
  margin: -7px auto 9px;
}
@keyframes authOrbPulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  42% { transform: scale(1.035) rotate(.7deg); filter: saturate(1.18); }
  53% { transform: scale(.984) rotate(-.5deg); }
  64% { transform: scale(1.026) rotate(.35deg); }
}
.auth-chat-composer {
  display: grid;
  width: min(100%, 820px);
  min-height: 76px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 9px;
  padding: 12px 13px 12px 14px;
  border: 0;
  border-radius: 27px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow: 0 20px 60px rgba(43, 47, 73, .13), 0 2px 9px rgba(43, 47, 73, .06);
  backdrop-filter: blur(18px);
  transition: box-shadow .18s ease, transform .18s ease;
}
.auth-chat-composer:focus-within {
  box-shadow: 0 22px 64px rgba(43, 47, 73, .15);
  transform: translateY(-1px);
}
.auth-chat-composer textarea {
  width: 100%;
  max-height: 170px;
  min-height: 48px;
  resize: none;
  overflow-y: auto;
  padding: 13px 5px 8px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.auth-chat-composer textarea::placeholder { color: var(--subtle); }
.auth-chat-composer textarea:focus,
.auth-chat-composer textarea:focus-visible { outline: none; box-shadow: none; }
.auth-composer-icon,
.auth-composer-send {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  place-items: center;
  cursor: pointer;
  transition: transform .17s ease, background .17s ease;
}
.auth-composer-icon { color: var(--text); background: transparent; font-size: 23px; }
.auth-composer-icon:hover { background: var(--surface-soft); transform: scale(1.04); }
.auth-composer-mic { font-size: 20px; }
.auth-composer-send { color: var(--surface-solid); background: var(--text); font-size: 21px; font-weight: 800; }
.auth-composer-send:hover { transform: scale(1.04); }

.auth-access-dialog {
  width: min(calc(100% - 28px), 440px);
  max-height: min(760px, calc(100vh - 32px));
  padding: 34px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .28);
}
.auth-access-dialog::backdrop,
.auth-chat-page .auth-demo-dialog::backdrop {
  background: rgba(5, 7, 13, .52);
  backdrop-filter: blur(8px);
}
.auth-access-dialog .auth-panel-heading { margin-bottom: 24px; }
.auth-access-dialog .auth-panel-heading h2 { margin: 7px 0 8px; font-size: 28px; letter-spacing: -.035em; }
.auth-access-dialog .auth-panel-heading p { min-height: 21px; }
.auth-access-dialog .auth-mobile-logo { display: grid; margin: 0 auto 8px; }
.auth-access-dialog .auth-continue-button { color: var(--surface-solid); border-color: var(--text); background: var(--text); }
.auth-access-dialog .auth-try-button { width: 100%; min-height: 45px; margin-top: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); text-decoration: none; }


/* Email/password auth — login + first registration */
.auth-access-dialog .auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: -5px 0 22px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.auth-access-dialog .auth-mode-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font: 700 12px/1.2 var(--font);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.auth-access-dialog .auth-mode-tabs button:hover { color: var(--text); }
.auth-access-dialog .auth-mode-tabs button.is-active {
  color: var(--surface-solid);
  background: var(--text);
  box-shadow: 0 5px 16px rgba(0,0,0,.11);
}
.auth-access-dialog .auth-email-form > div:not([hidden]) {
  display: grid;
  gap: 11px;
}
.auth-access-dialog .auth-field-label {
  display: block;
  margin: 1px 2px -5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
.auth-access-dialog .auth-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-access-dialog .auth-name-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.auth-access-dialog .auth-name-grid .auth-field-label { margin: 0 2px; }
.auth-access-dialog .auth-name-grid input,
.auth-access-dialog .auth-code-input {
  width: 100%;
  min-width: 0;
  min-height: 51px;
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  outline: none;
  color: var(--text);
  background: var(--surface-solid);
  font: 500 14px/1 var(--font);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.auth-access-dialog .auth-name-grid input::placeholder,
.auth-access-dialog .auth-code-input::placeholder { color: var(--subtle); }
.auth-access-dialog .auth-name-grid input:focus,
.auth-access-dialog .auth-code-input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}
.auth-access-dialog .auth-code-input {
  min-height: 58px;
  padding-left: calc(15px + .25em);
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .25em;
}
.auth-access-dialog .auth-link-button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  color: var(--accent-strong);
  background: transparent;
  font: 700 11px/1.35 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-access-dialog .auth-message {
  margin-top: 12px;
}
.auth-access-dialog .auth-registration-note {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
  text-align: center;
}
html[data-theme="dark"] .auth-access-dialog .auth-mode-tabs button.is-active {
  color: #11141d;
}
@media (max-width: 520px) {
  .auth-access-dialog .auth-mode-tabs { margin-bottom: 17px; }
  .auth-access-dialog .auth-mode-tabs button { min-height: 38px; padding-inline: 6px; font-size: 11px; }
  .auth-access-dialog .auth-name-grid { grid-template-columns: 1fr; gap: 11px; }
}
.auth-chat-page .auth-demo-dialog { color: var(--text); border-color: var(--border); background: var(--surface-solid); }

html[data-theme="dark"] .auth-register-button,
html[data-theme="dark"] .auth-composer-send,
html[data-theme="dark"] .auth-access-dialog .auth-continue-button {
  color: #11141d;
}

@media (max-width: 620px) {
  .auth-chat-topbar { min-height: 66px; padding: 11px 14px; }
  .auth-chat-topbar .auth-brand { font-size: 18px; }
  .auth-register-button { min-height: 40px; padding: 0 15px; font-size: 12px; }
  .auth-chat-actions { gap: 7px; }
  .auth-chat-main { padding: 90px 13px 28px; }
  .auth-landing-orb { --orb-size: 190px; margin-bottom: 15px; }
  .lumen-wordmark-landing { width: 210px; max-width: calc(100vw - 34px); margin-top: -15px; margin-bottom: 22px; }
  .lumen-wordmark-auth { width: 96px; }
  .auth-chat-composer { min-height: 68px; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 5px; padding: 9px 10px; border-radius: 23px; }
  .auth-composer-icon, .auth-composer-send { width: 42px; height: 42px; }
  .auth-chat-composer textarea { min-height: 45px; padding-top: 11px; font-size: 14px; }
  .auth-access-dialog { padding: 29px 21px 24px; border-radius: 22px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080b13;
  --surface: rgba(18, 22, 34, .88);
  --surface-solid: #121622;
  --surface-soft: #191e2d;
  --surface-hover: #22283a;
  --border: rgba(218, 225, 255, .10);
  --border-strong: rgba(218, 225, 255, .19);
  --text: #f3f5fb;
  --muted: #9ca5ba;
  --subtle: #737c90;
  --accent: #8a7cff;
  --accent-strong: #a296ff;
  --accent-soft: rgba(105, 89, 255, .17);
  --blue: #53a8ff;
  --green: #37c98b;
  --amber: #f0a848;
  --red: #ff7180;
  --icon-on-strong: #080b13;
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --shadow-soft: 0 12px 38px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--bg); }
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.positive { color: var(--green) !important; }
.warning { color: var(--amber) !important; }
.positive-text { color: var(--green); }

.placeholder-logo {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: rgba(255, 255, 255, .96);
  border: 2px dashed currentColor;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, currentColor 5px 6px, transparent 6px 11px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
  opacity: .92;
}
.brand-lockup {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  min-height: 40px;
}

.brand-lockup.compact { font-size: 18px; }
/* Exact Lumen AI lettering from the approved logo artwork. The mini orb canvas
   renders at 140% of its 36px box (~50px), so 62px keeps the same visual
   wordmark-to-symbol proportion as the master logo. */
.brand-lockup-wordmark {
  display: block;
  width: 62px;
  height: auto;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Keep the Lumen AI wordmark readable in both themes.
   The source PNG is the approved dark wordmark, so only dark mode needs inversion. */
html[data-theme="dark"] .lumen-wordmark,
html[data-theme="dark"] .brand-lockup-wordmark {
  filter: brightness(0) invert(1);
}
html[data-theme="light"] .lumen-wordmark,
html[data-theme="light"] .brand-lockup-wordmark {
  filter: none;
}
.brand-mark { width: 40px; height: 40px; }

.ambient {
  position: absolute;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .24;
  pointer-events: none;
}
.ambient-blue { top: -18%; left: 7%; background: #90c6ff; }
.ambient-pink { right: -16%; bottom: -17%; background: #e8a8dc; }
html[data-theme="dark"] .ambient { opacity: .17; }
html[data-theme="dark"] .ambient-blue { background: #174ca9; }
html[data-theme="dark"] .ambient-pink { background: #622d7b; }

.assistant-orb {
  --orb-size: 156px;
  position: relative;
  display: grid;
  width: var(--orb-size);
  height: var(--orb-size);
  place-items: center;
  isolation: isolate;
  filter: drop-shadow(0 20px 38px rgba(38, 92, 255, .22));
}
.assistant-orb-large { --orb-size: 220px; }
.assistant-orb-small { --orb-size: 90px; }
.orb-core {
  position: relative;
  z-index: 3;
  width: 54%;
  height: 54%;
  border: 1.5px solid rgba(255, 255, 255, .94);
  border-radius: 44% 56% 52% 48% / 52% 44% 56% 48%;
  background:
    radial-gradient(circle at 31% 28%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,.45) 17%, transparent 30%),
    radial-gradient(circle at 69% 34%, #75e8ff 0 10%, transparent 31%),
    radial-gradient(circle at 52% 73%, #f570e8 0 8%, transparent 30%),
    linear-gradient(145deg, #0458ff 8%, #08bbff 49%, #3224dc 86%);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.66),
    0 0 10px rgba(126, 235, 255, .9),
    0 0 34px rgba(55, 117, 255, .58),
    0 0 70px rgba(73, 56, 230, .2);
  animation: orbMorph 5.4s ease-in-out infinite, orbFloat 4.2s ease-in-out infinite;
}
.orb-core::after {
  content: "";
  position: absolute;
  inset: -36%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 116, 255, .32), rgba(82, 55, 225, .12) 44%, transparent 70%);
  filter: blur(10px);
}
.orb-ring {
  --ring-angle: 0deg;
  --ring-color: rgba(60, 159, 255, .52);
  --ring-speed: 9s;
  --listen-speed: 3.4s;
  --hear-speed: 1.1s;
  --speak-speed: 1.6s;
  --ring-delay: 0s;
  --ring-shape-a: 45% 55% 48% 52% / 53% 44% 56% 47%;
  --ring-shape-b: 53% 47% 57% 43% / 44% 59% 41% 56%;
  --ring-shape-c: 48% 52% 43% 57% / 58% 46% 54% 42%;
  position: absolute;
  z-index: 1;
  border: 1.15px solid var(--ring-color);
  border-radius: var(--ring-shape-a);
  opacity: .64;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ring-color) 52%, transparent));
  animation: orbContourIdle var(--ring-speed) ease-in-out var(--ring-delay) infinite alternate;
}
.ring-one {
  inset: 20%; --ring-angle: -7deg; --ring-color: rgba(183, 239, 255, .84);
  --ring-speed: 6.8s; --listen-speed: 2.7s; --hear-speed: .82s; --speak-speed: 1.2s;
}
.ring-two {
  inset: 15%; --ring-angle: 9deg; --ring-color: rgba(42, 145, 255, .72);
  --ring-speed: 8.2s; --listen-speed: 3.1s; --hear-speed: .96s; --speak-speed: 1.4s; --ring-delay: -.8s;
  --ring-shape-a: 51% 49% 42% 58% / 44% 55% 45% 56%;
  --ring-shape-b: 43% 57% 53% 47% / 59% 41% 56% 44%;
}
.ring-three {
  inset: 10%; --ring-angle: -12deg; --ring-color: rgba(92, 107, 255, .62);
  --ring-speed: 9.6s; --listen-speed: 3.7s; --hear-speed: 1.08s; --speak-speed: 1.55s; --ring-delay: -1.6s;
}
.ring-four {
  inset: 5%; --ring-angle: 15deg; --ring-color: rgba(159, 89, 255, .58);
  --ring-speed: 10.8s; --listen-speed: 4s; --hear-speed: 1.18s; --speak-speed: 1.7s; --ring-delay: -2.3s;
  --ring-shape-a: 56% 44% 48% 52% / 46% 58% 42% 54%;
  --ring-shape-b: 47% 53% 59% 41% / 55% 43% 57% 45%;
}
.ring-five {
  inset: 0%; --ring-angle: -18deg; --ring-color: rgba(239, 94, 189, .52);
  --ring-speed: 12.2s; --listen-speed: 4.5s; --hear-speed: 1.28s; --speak-speed: 1.85s; --ring-delay: -3.1s;
}
.ring-six {
  inset: -5%; --ring-angle: 21deg; --ring-color: rgba(58, 190, 255, .45);
  --ring-speed: 13.6s; --listen-speed: 4.9s; --hear-speed: 1.4s; --speak-speed: 2s; --ring-delay: -4s;
  --ring-shape-a: 43% 57% 54% 46% / 59% 45% 55% 41%;
  --ring-shape-b: 58% 42% 47% 53% / 43% 57% 46% 54%;
}
.ring-seven {
  inset: -10%; --ring-angle: -24deg; --ring-color: rgba(58, 211, 197, .38);
  --ring-speed: 15s; --listen-speed: 5.3s; --hear-speed: 1.5s; --speak-speed: 2.15s; --ring-delay: -4.8s;
}
.assistant-orb.is-listening .orb-core {
  animation: orbMorphListening 2.15s ease-in-out infinite, orbListeningDrift 1.5s ease-in-out infinite;
}
.assistant-orb.is-listening .orb-ring {
  border-width: 1.55px;
  opacity: .78;
  animation: orbContourListening var(--listen-speed) ease-in-out var(--ring-delay) infinite alternate;
}
.assistant-orb.is-hearing .orb-core {
  animation: orbMorphHearing .72s ease-in-out infinite alternate, orbHearingJitter .46s ease-in-out infinite alternate;
}
.assistant-orb.is-hearing .orb-ring {
  border-width: 1.9px;
  opacity: .94;
  animation: orbContourHearing var(--hear-speed) ease-in-out var(--ring-delay) infinite alternate;
}
.assistant-orb.is-speaking .orb-core {
  animation: orbMorphHearing 1.05s ease-in-out infinite alternate, orbListeningDrift .74s ease-in-out infinite;
}
.assistant-orb.is-speaking .orb-ring {
  border-width: 1.8px;
  opacity: .88;
  animation: orbContourHearing var(--speak-speed) ease-in-out var(--ring-delay) infinite alternate;
}
@keyframes orbMorph {
  0%, 100% { border-radius: 38% 62% 57% 43% / 61% 36% 64% 39%; transform: scale(.98) rotate(-2deg); }
  32% { border-radius: 65% 35% 39% 61% / 35% 66% 34% 65%; transform: scale(1.08) rotate(4deg); }
  67% { border-radius: 41% 59% 68% 32% / 66% 31% 69% 34%; transform: scale(.94) rotate(-4deg); }
}
@keyframes orbFloat {
  0%, 100% { translate: 0 1px; }
  35% { translate: -3px -7px; }
  70% { translate: 4px -3px; }
}
@keyframes orbMorphListening {
  0%, 100% { border-radius: 41% 59% 55% 45% / 58% 42% 61% 39%; transform: scale(.94) rotate(-3deg); }
  45% { border-radius: 61% 39% 43% 57% / 38% 63% 37% 62%; transform: scale(1.1) rotate(4deg); }
  72% { border-radius: 48% 52% 65% 35% / 62% 35% 65% 38%; transform: scale(1.02) rotate(-1deg); }
}
@keyframes orbMorphHearing {
  0% { border-radius: 37% 63% 59% 41% / 64% 34% 66% 36%; transform: scale(.9) rotate(-7deg); }
  48% { border-radius: 66% 34% 38% 62% / 32% 68% 37% 63%; transform: scale(1.14) rotate(8deg); }
  100% { border-radius: 46% 54% 69% 31% / 67% 31% 69% 33%; transform: scale(1.02) rotate(-3deg); }
}
@keyframes orbListeningDrift {
  0%, 100% { translate: -2px 2px; }
  33% { translate: 5px -8px; }
  66% { translate: -6px -3px; }
}
@keyframes orbHearingJitter {
  0% { translate: -5px 3px; }
  50% { translate: 6px -6px; }
  100% { translate: -3px -8px; }
}
@keyframes orbContourIdle {
  0% { border-radius: var(--ring-shape-a); transform: rotate(var(--ring-angle)) scale(.96, 1.03); }
  46% { border-radius: var(--ring-shape-b); transform: rotate(calc(var(--ring-angle) + 13deg)) scale(1.045, .95); }
  100% { border-radius: var(--ring-shape-c); transform: rotate(calc(var(--ring-angle) - 9deg)) scale(.98, 1.055); }
}
@keyframes orbContourListening {
  0% { border-radius: var(--ring-shape-a); transform: rotate(calc(var(--ring-angle) - 8deg)) scale(.91, 1.08); }
  52% { border-radius: var(--ring-shape-b); transform: rotate(calc(var(--ring-angle) + 18deg)) scale(1.1, .9); }
  100% { border-radius: var(--ring-shape-c); transform: rotate(calc(var(--ring-angle) - 14deg)) scale(.96, 1.12); }
}
@keyframes orbContourHearing {
  0% { border-radius: 37% 63% 58% 42% / 66% 35% 65% 34%; transform: rotate(calc(var(--ring-angle) - 14deg)) scale(.84, 1.16); }
  47% { border-radius: 68% 32% 40% 60% / 31% 69% 36% 64%; transform: rotate(calc(var(--ring-angle) + 24deg)) scale(1.17, .84); }
  100% { border-radius: 44% 56% 71% 29% / 65% 28% 72% 35%; transform: rotate(calc(var(--ring-angle) - 19deg)) scale(.91, 1.2); }
}

/* Organic SVG orb used on the public landing and lecturer home screens. */
.assistant-orb.has-orb-visual {
  overflow: visible;
  filter: none;
}
.elysi-siri-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.assistant-orb.has-orb-visual .orb-visual {
  display: none;
}
.orb-visual {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  overflow: visible;
}
.orb-svg-ring {
  fill: none;
  stroke: var(--ring-color, rgba(67, 157, 255, .62));
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
  opacity: .7;
  transform-box: view-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ring-color) 62%, transparent));
  animation: orbSvgContourIdle var(--ring-speed, 9s) ease-in-out var(--ring-delay, 0s) infinite alternate;
}
.orb-svg-ring.ring-one { --ring-color: rgba(191, 240, 255, .98); stroke-width: 1.85; }
.orb-svg-ring.ring-two { --ring-color: rgba(47, 139, 255, .9); }
.orb-svg-ring.ring-three { --ring-color: rgba(75, 93, 255, .82); }
.orb-svg-ring.ring-four { --ring-color: rgba(154, 82, 255, .78); }
.orb-svg-ring.ring-five { --ring-color: rgba(242, 91, 187, .72); }
.orb-svg-ring.ring-six { --ring-color: rgba(47, 185, 255, .68); }
.orb-svg-ring.ring-seven { --ring-color: rgba(48, 205, 194, .62); }
.orb-svg-rings {
  transform: scale(1.26);
  transform-origin: 50% 50%;
}
.orb-svg-core {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: none;
}
.orb-core-shape { animation: orbSvgShapeIdle 4.6s ease-in-out infinite alternate; }
.orb-core-aura { opacity: .94; transform-origin: 50% 50%; transform: scale(1.24); }
.orb-core-edge {
  fill: none;
  stroke: rgba(255, 255, 255, .98);
  stroke-width: 2.65;
  vector-effect: non-scaling-stroke;
}
.orb-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbLightDrift 3.2s ease-in-out infinite alternate;
}
.orb-light-white { opacity: .98; }
.orb-light-cyan { opacity: .92; animation-delay: -.7s; animation-duration: 3.8s; }
.orb-light-pink { opacity: .88; animation-delay: -1.4s; animation-duration: 2.9s; }
.orb-light-blue { opacity: .8; animation-delay: -2s; animation-duration: 3.5s; }
.assistant-orb.is-listening .orb-core-shape { animation: orbSvgShapeListening 1.55s ease-in-out infinite alternate; }
.assistant-orb.is-listening .orb-svg-ring {
  stroke-width: 1.75;
  opacity: .86;
  animation: orbSvgContourListening var(--listen-speed, 3s) ease-in-out var(--ring-delay, 0s) infinite alternate;
}
.assistant-orb.is-listening .orb-light { animation-duration: 1.25s; }
.assistant-orb.is-hearing .orb-core-shape { animation: orbSvgShapeHearing .48s ease-in-out infinite alternate; }
.assistant-orb.is-hearing .orb-svg-ring {
  stroke-width: 2.05;
  opacity: 1;
  animation: orbSvgContourHearing var(--hear-speed, .9s) ease-in-out var(--ring-delay, 0s) infinite alternate;
}
.assistant-orb.is-hearing .orb-light { animation-duration: .46s; }
.assistant-orb.is-speaking .orb-core-shape { animation: orbSvgShapeHearing .78s ease-in-out infinite alternate; }
.assistant-orb.is-speaking .orb-svg-ring {
  stroke-width: 1.9;
  opacity: .94;
  animation: orbSvgContourHearing var(--speak-speed, 1.5s) ease-in-out var(--ring-delay, 0s) infinite alternate;
}
html[data-theme="light"] .orb-svg-ring { opacity: .54; }
html[data-theme="light"] .orb-svg-ring.ring-one,
html[data-theme="light"] .orb-svg-ring.ring-two { opacity: .76; }
@keyframes orbSvgShapeIdle {
  0%, 100% { d: path("M179 102C211 98 229 113 231 139C233 158 251 166 250 190C249 222 226 245 193 250C157 256 123 240 109 211C94 180 101 145 121 120C136 102 155 101 179 102Z"); }
  42% { d: path("M181 99C214 104 233 121 228 148C225 166 249 175 247 198C244 229 217 249 184 250C149 251 120 231 110 202C99 169 111 136 132 114C145 99 162 96 181 99Z"); }
  76% { d: path("M176 105C203 94 226 105 235 132C241 151 253 171 244 194C233 222 213 244 181 252C145 255 115 234 107 204C99 173 99 143 118 123C132 108 153 113 176 105Z"); }
}
@keyframes orbSvgShapeListening {
  0%, 100% { d: path("M176 105C203 94 226 105 235 132C241 151 253 171 244 194C233 222 213 244 181 252C145 255 115 234 107 204C99 173 99 143 118 123C132 108 153 113 176 105Z"); }
  50% { d: path("M184 96C217 105 237 125 228 154C223 173 250 179 245 204C239 233 210 251 176 248C143 246 116 223 111 194C105 162 118 130 141 110C153 98 169 92 184 96Z"); }
}
@keyframes orbSvgShapeHearing {
  0% { d: path("M171 109C197 91 225 101 238 129C247 149 255 174 242 198C226 226 205 249 171 252C137 250 111 226 107 196C103 165 99 141 119 119C134 104 152 119 171 109Z"); }
  50% { d: path("M188 94C221 107 241 130 226 159C217 178 249 185 242 209C232 237 200 252 168 245C136 238 114 215 112 187C110 155 126 124 150 107C163 97 177 90 188 94Z"); }
  100% { d: path("M177 103C205 95 232 110 234 141C235 160 254 174 243 197C230 225 218 248 184 253C150 257 119 235 108 207C96 176 105 145 124 122C137 106 158 110 177 103Z"); }
}
@keyframes orbSvgContourIdle {
  0% { transform: rotate(var(--ring-angle, 0deg)) scale(.97, 1.025); }
  42% { transform: rotate(calc(var(--ring-angle, 0deg) + 5deg)) scale(1.025, .97); }
  100% { transform: rotate(calc(var(--ring-angle, 0deg) - 4deg)) scale(.985, 1.035); }
}
@keyframes orbSvgContourListening {
  0% { transform: rotate(calc(var(--ring-angle, 0deg) - 8deg)) scale(.92, 1.08); }
  50% { transform: rotate(calc(var(--ring-angle, 0deg) + 10deg)) scale(1.09, .91); }
  100% { transform: rotate(calc(var(--ring-angle, 0deg) - 6deg)) scale(.95, 1.11); }
}
@keyframes orbSvgContourHearing {
  0% { transform: rotate(calc(var(--ring-angle, 0deg) - 14deg)) scale(.86, 1.15); }
  50% { transform: rotate(calc(var(--ring-angle, 0deg) + 17deg)) scale(1.16, .85); }
  100% { transform: rotate(calc(var(--ring-angle, 0deg) - 11deg)) scale(.9, 1.18); }
}
@keyframes orbLightDrift {
  0% { transform: translate(-5px, 4px) scale(.93); }
  50% { transform: translate(6px, -7px) scale(1.12); }
  100% { transform: translate(-2px, -4px) scale(1.02); }
}

.theme-button, .icon-button, .composer-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  place-items: center;
  background: var(--surface);
  cursor: pointer;
  transition: .2s ease;
}
.theme-button {
  grid-auto-flow: column;
  width: 62px;
  grid-template-columns: 1fr 1fr;
  border-radius: 999px;
  font-size: 16px;
}
.theme-button span {
  display: grid;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  place-items: center;
}
html:not([data-theme="dark"]) .theme-sun,
html[data-theme="dark"] .theme-moon { color: var(--surface-solid); background: var(--text); }
html[data-theme="dark"] .theme-button .theme-sun,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .composer-icon { color: var(--text); }
.theme-button:hover, .icon-button:hover, .composer-icon:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--accent); box-shadow: 0 8px 25px rgba(105, 89, 255, .21); }
.button.primary:hover { background: var(--accent-strong); }
.button.secondary { border-color: var(--border); background: var(--surface-solid); }
.button.secondary:hover, .button.ghost:hover { background: var(--surface-hover); }
.button.ghost { border-color: var(--border); background: transparent; }
.button.compact { min-height: 40px; padding: 0 13px; border-radius: 10px; font-size: 12px; }
.button.full { width: 100%; }
.text-button { min-height: 40px; padding: 6px 0; border: 0; color: var(--accent); background: none; font-weight: 700; cursor: pointer; }

/* Authentication */
.auth-page { overflow-x: hidden; }
.auth-unified-page {
  min-height: 100vh;
  color: var(--text);
  background: var(--surface-solid);
}
.auth-topbar {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 31px;
}
.auth-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; letter-spacing: -.02em; }
.auth-brand-mark,
.auth-footer-mark {
  position: relative;
  display: inline-grid;
  width: 31px;
  height: 31px;
  overflow: hidden;
  border-radius: 50%;
  place-items: center;
  background: linear-gradient(145deg, #8673ff, #d09bff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-brand-mark::before,
.auth-brand-mark::after,
.auth-brand-mark i,
.auth-footer-mark::before,
.auth-footer-mark::after,
.auth-footer-mark i {
  position: absolute;
  width: 42px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  content: "";
  transform: rotate(37deg);
}
.auth-brand-mark::after,
.auth-footer-mark::after { transform: rotate(-37deg); }
.auth-brand-mark i,
.auth-footer-mark i { transform: rotate(90deg); }
.auth-theme { position: static; }
.auth-unified-main {
  display: grid;
  min-height: 100vh;
  padding: 108px 24px 135px;
  place-items: center;
}
.auth-unified-card { width: min(100%, 400px); text-align: center; }
.auth-mobile-logo { display: none; margin-bottom: 22px; place-items: center; }
.auth-unified-card h1 { margin: 0 0 15px; font-size: clamp(27px, 3vw, 32px); line-height: 1.2; letter-spacing: -.035em; }
.auth-intro { margin: 0 0 30px; color: var(--muted); font-size: 14px; }
.auth-continue-button {
  display: flex;
  width: 100%;
  min-height: 53px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-solid);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.auth-continue-button:focus-visible,
.auth-input-wrap input:focus-visible,
.auth-try-button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.auth-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--subtle); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-email-form { display: grid; gap: 0; }
.auth-input-wrap { position: relative; }
.auth-password-wrap { margin-top: 10px; }
.auth-password-wrap[hidden], .auth-password-hint[hidden] { display: none; }
.auth-input-wrap input {
  width: 100%;
  min-height: 56px;
  padding: 0 48px 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 15px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-input-wrap input::placeholder { color: var(--subtle); }
.auth-input-wrap input:focus { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.auth-input-wrap input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.auth-input-wrap input[data-valid="true"] { border-color: #31a56f; }
.auth-input-state { position: absolute; top: 50%; right: 18px; display: none; color: #31a56f; font-size: 15px; font-weight: 900; transform: translateY(-50%); }
.auth-input-wrap input[data-valid="true"] + .auth-input-state { display: block; }
.auth-domain-hint { margin: 9px 2px 0; color: var(--subtle); text-align: left; font-size: 11px; }
.auth-domain-hint strong { color: var(--muted); }
.auth-message { min-height: 22px; margin: 7px 2px 0; color: var(--danger); text-align: left; font-size: 12px; line-height: 1.45; }
.auth-message.is-info { color: var(--muted); }
.auth-continue-button { margin-top: 2px; border-color: var(--text); color: var(--surface-solid); background: var(--text); }
.auth-continue-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.auth-continue-button:disabled { cursor: wait; opacity: .6; transform: none; }
.auth-try-button { margin-top: 20px; padding: 7px 12px; border: 0; color: var(--text); background: transparent; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-registration-note { margin: 25px auto 0; max-width: 345px; color: var(--subtle); font-size: 10px; line-height: 1.55; }
.auth-footer {
  position: fixed;
  left: 50%;
  bottom: 23px;
  display: grid;
  width: min(100% - 36px, 520px);
  gap: 10px;
  justify-items: center;
  color: var(--subtle);
  text-align: center;
  transform: translateX(-50%);
}
.auth-footer-mark { width: 26px; height: 26px; filter: grayscale(1); opacity: .76; }
.auth-footer p { margin: 0; font-size: 10px; line-height: 1.5; }
.auth-demo-dialog {
  width: min(calc(100% - 32px), 470px);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow-card);
}
.auth-demo-dialog::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
.auth-demo-dialog h2 { margin: 7px 0 9px; font-size: 23px; letter-spacing: -.025em; }
.auth-demo-dialog > p { margin: 0 0 21px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-dialog-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-soft); font-size: 22px; cursor: pointer; }
.demo-grid { display: grid; gap: 9px; }
.demo-account {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
  transition: .2s ease;
}
.demo-account:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); transform: translateX(2px); }
.demo-account span:nth-child(2) { display: grid; gap: 2px; }
.demo-account strong { font-size: 13px; }
.demo-account small { color: var(--muted); font-size: 11px; }
.avatar { display: inline-grid; width: 38px; height: 38px; border-radius: 12px; place-items: center; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.avatar-violet { background: linear-gradient(135deg, #8e7aff, #5440d9); }
.avatar-blue { background: linear-gradient(135deg, #42a5ff, #1466d6); }
.avatar-green { background: linear-gradient(135deg, #42d597, #11885a); }
.avatar-amber { background: linear-gradient(135deg, #ffbd59, #d37619); }

/* Comfortable two-panel authentication */
.auth-showcase-page {
  --text: #171717;
  --muted: #676767;
  --subtle: #858585;
  --border: #dedede;
  --border-strong: #c9c9c9;
  --surface: #fff;
  --surface-solid: #fff;
  --surface-soft: #f4f4f4;
  --surface-hover: #ededed;
  min-height: 100vh;
  overflow: hidden auto;
  color: #171717;
  color-scheme: light;
  background: #ececec;
}
.auth-background-preview {
  position: fixed;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 24px;
  padding: 100px 28px 50px;
  color: #242424;
  background: linear-gradient(180deg, #f7f7f7, #e7e7e7);
  filter: blur(4px);
  opacity: .72;
  pointer-events: none;
  transform: scale(1.018);
}
.auth-preview-brand { position: absolute; top: 30px; left: 36px; font-size: 18px; font-weight: 800; }
.auth-preview-copy { display: grid; gap: 10px; text-align: center; }
.auth-preview-copy strong { font-size: clamp(26px, 4vw, 48px); }
.auth-preview-copy span { color: #777; }
.auth-preview-composer { display: flex; width: min(760px, 78vw); min-height: 105px; align-items: end; justify-content: space-between; padding: 23px; border: 1px solid #ccc; border-radius: 30px; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.08); }
.auth-preview-composer i { display: grid; width: 42px; height: 42px; border-radius: 50%; place-items: center; color: #fff; background: #222; font-style: normal; font-size: 22px; }
.auth-showcase-topbar {
  position: fixed;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 28px;
}
.auth-showcase-topbar .auth-brand { color: #171717; }
.auth-top-login { min-width: 104px; min-height: 42px; padding: 0 22px; border: 0; border-radius: 99px; color: #fff; background: #222; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.auth-showcase-main { position: relative; z-index: 3; display: grid; min-height: 100vh; padding: 92px 22px 28px; place-items: center; background: rgba(231,231,231,.48); backdrop-filter: blur(6px); }
.auth-access-shell {
  display: grid;
  width: min(1290px, calc(100vw - 44px));
  height: min(760px, calc(100vh - 120px));
  min-height: 570px;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.16), 0 2px 12px rgba(0,0,0,.08);
}
.auth-promo-panel {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 58px;
  padding: 54px;
  overflow: hidden;
  border-right: 1px solid #ededed;
  background-color: #fff;
  background-image: radial-gradient(#e6e6e6 1px, transparent 1px);
  background-size: 8px 8px;
}
.auth-promo-panel::before { position: absolute; width: 460px; height: 460px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(118,93,255,.095), transparent 66%); }
.auth-built-badge { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid #dfdfdf; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(0,0,0,.045); font-size: 13px; }
.auth-built-badge b { color: #6b54f5; font-size: 18px; }
.auth-promo-copy { position: relative; max-width: 620px; text-align: center; }
.auth-promo-kicker { color: #735ff6; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-promo-copy h2 { margin: 14px 0 11px; font-size: clamp(34px, 4vw, 55px); line-height: 1.08; letter-spacing: -.045em; }
.auth-promo-copy p { max-width: 600px; margin: 0; color: #757575; font-size: 14px; line-height: 1.65; }
.auth-capability-strip { position: relative; display: flex; align-items: center; gap: 0; padding: 10px 13px; border: 1px solid #dfdfdf; border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(0,0,0,.055); }
.auth-capability-strip span { display: grid; width: 42px; height: 42px; margin-left: -4px; border: 1px solid #e0e0e0; border-radius: 50%; place-items: center; color: #5f4ce6; background: #fff; font-size: 10px; font-weight: 900; }
.auth-capability-strip span:first-child { margin-left: 0; color: #fff; border-color: #201f25; background: #201f25; }
.auth-capability-strip b { margin-left: 9px; padding: 10px 12px; border-radius: 15px; color: #555; background: #f5f5f5; font-size: 11px; }
.auth-access-panel { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(38px, 5vw, 72px); overflow-y: auto; background: #fff; }
.auth-panel-heading { margin-bottom: 25px; text-align: center; }
.auth-panel-heading h1 { margin: 0 0 9px; color: #111; font-size: clamp(28px, 3vw, 38px); line-height: 1.16; letter-spacing: -.04em; }
.auth-panel-heading p { margin: 0; color: #666; font-size: 13px; line-height: 1.5; }
.auth-showcase-page .auth-continue-button { min-height: 54px; border-radius: 14px; font-size: 13px; }
.auth-showcase-page .auth-divider { margin: 18px 0; color: #888; font-size: 10px; text-transform: none; }
.auth-showcase-page .auth-input-wrap input { color: #171717; border-color: #ccc; background: #fff; }
.auth-showcase-page .auth-input-wrap input:focus { border-color: #222; box-shadow: 0 0 0 1px #222; }
.auth-showcase-page .auth-domain-hint { color: #777; }
.auth-showcase-page .auth-message { min-height: 19px; margin-top: 5px; }
.auth-showcase-page .auth-continue-button { margin-top: 0; color: #222; border-color: #d4d4d4; background: #ededed; }
.auth-showcase-page .auth-continue-button:hover { color: #fff; border-color: #222; background: #222; }
.auth-showcase-page .auth-try-button { width: 100%; min-height: 48px; margin-top: 13px; border: 1px solid #dedede; border-radius: 14px; color: #333; background: #f6f6f6; text-decoration: none; }
.auth-privacy-note { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 22px; color: #555; }
.auth-privacy-note > span { margin-top: 2px; color: #222; font-size: 12px; }
.auth-privacy-note p { display: grid; gap: 3px; margin: 0; font-size: 10px; line-height: 1.5; }
.auth-privacy-note small { max-width: 340px; color: #777; font-size: 10px; }
.auth-showcase-page .auth-registration-note { margin: 13px auto 0; color: #888; text-align: center; font-size: 10px; }
.auth-showcase-page .auth-registration-note strong { color: #555; }
.auth-showcase-page .auth-demo-dialog { color: #171717; border-color: #ddd; background: #fff; }

@media (max-width: 900px) {
  .auth-access-shell { width: min(560px, calc(100vw - 32px)); height: auto; min-height: 0; grid-template-columns: 1fr; }
  .auth-promo-panel { display: none; }
  .auth-access-panel { max-height: calc(100vh - 112px); padding: 38px clamp(24px, 7vw, 48px); }
  .auth-access-panel .auth-mobile-logo { display: grid; margin-bottom: 16px; }
}

@media (max-width: 560px) {
  .auth-showcase-topbar { height: 66px; padding: 12px 16px; }
  .auth-top-login { min-width: 82px; min-height: 38px; padding: 0 16px; font-size: 12px; }
  .auth-showcase-main { align-items: start; padding: 78px 10px 16px; }
  .auth-access-shell { width: 100%; border-radius: 22px; }
  .auth-access-panel { max-height: calc(100vh - 94px); padding: 28px 20px 24px; }
  .auth-panel-heading { margin-bottom: 20px; }
  .auth-panel-heading h1 { font-size: 27px; }
  .auth-privacy-note { margin-top: 17px; }
}

/* Application shell */
.app-page { overflow: hidden; }
.app-shell { display: grid; height: 100vh; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  position: relative;
  z-index: 40;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 20px 14px 14px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
}
.sidebar-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.sidebar-close { display: none; }
.new-lecture-button {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 11px;
  margin: 8px 4px 16px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  font-weight: 700;
  cursor: pointer;
}
.new-lecture-button span { color: var(--accent); font-size: 20px; }
.nav-list { display: grid; gap: 3px; }
.nav-item {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.nav-item > span:first-child { width: 24px; color: var(--subtle); text-align: center; font-size: 17px; font-weight: 700; }
html[data-theme="dark"] .nav-item:not(.is-active) > span:first-child { color: var(--muted); }
.nav-item:hover { color: var(--text); background: var(--surface-soft); }
.nav-item.is-active { color: var(--text); background: var(--accent-soft); font-weight: 700; }
.nav-item.is-active > span:first-child { color: var(--accent); }
.nav-item em { padding: 2px 7px; border-radius: 99px; color: var(--muted); background: var(--surface-soft); font-size: 10px; font-style: normal; }
.nav-count { display: grid; min-width: 23px; height: 20px; padding: 0 5px; border-radius: 99px; place-items: center; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent); }
.sidebar-section-label { margin: 24px 13px 9px; color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.history-list { display: grid; gap: 2px; }
.history-list button { overflow: hidden; padding: 8px 13px; border: 0; border-radius: 9px; color: var(--muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; background: transparent; cursor: pointer; font-size: 11px; }
.history-list button:hover { color: var(--text); background: var(--surface-soft); }
.sidebar-bottom { display: grid; gap: 8px; margin-top: auto; }
.user-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 12px 8px 0; border-top: 1px solid var(--border); }
.user-card-copy { display: grid; min-width: 0; gap: 2px; }
.user-card-copy strong, .user-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-copy strong { font-size: 11px; }
.user-card-copy small { color: var(--muted); font-size: 10px; }
.user-card .icon-button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 11px; }
.user-account-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; display: grid; width: 178px; padding: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 18px 45px rgba(15, 23, 42, .18); }
/* Applied by JS only to the analytics "•••" row menu, only when there isn't
   room above the trigger — the account menu itself (sidebar + lecturer) is
   never given this class, so its own always-opens-upward behaviour, which
   works fine there, is untouched. */
.user-account-menu.opens-below { top: calc(100% + 8px); bottom: auto; }
.user-account-menu[hidden] { display: none; }
.user-account-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--text); background: transparent; font: inherit; font-size: 10px; font-weight: 700; text-align: left; cursor: pointer; }
.user-account-menu button:hover { background: var(--surface-soft); }
.user-account-menu button.danger { color: color-mix(in srgb, var(--danger) 84%, var(--text)); }
.user-account-menu button.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.user-account-menu button:disabled { cursor: wait; opacity: .55; }
.sidebar-scrim { display: none; }

.main-surface { position: relative; min-width: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  height: var(--topbar-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
}
.topbar-left, .topbar-actions, .heading-actions { display: flex; align-items: center; gap: 11px; }
.topbar-left h1 { margin: 1px 0 0; font-size: 17px; }
.topbar-kicker { color: var(--muted); font-size: 10px; }
.mobile-menu { display: none; margin-right: 2px; }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid var(--bg); border-radius: 50%; background: var(--red); }
.mic-status { display: flex; width: min(360px, 38vw); height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 700; }
.mic-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-pulse { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); }
.mic-status[data-state="on"] .mic-pulse { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); animation: micPulse 1.8s ease-out infinite; }
.mic-status[data-state="listening"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.mic-status[data-state="listening"] .mic-pulse { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); animation: micPulse 1s ease-out infinite; }
.mic-status[data-state="permission-denied"],
.mic-status[data-state="microphone-missing"],
.mic-status[data-state="microphone-busy"],
.mic-status[data-state="network-error"],
.mic-status[data-state="recognition-error"],
.mic-status[data-state="transcription-error"],
.mic-status[data-state="transcription-unavailable"],
.mic-status[data-state="unsupported"],
.mic-status[data-state="insecure-context"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, var(--border)); }
.mic-status[data-state="permission-denied"] .mic-pulse,
.mic-status[data-state="microphone-missing"] .mic-pulse,
.mic-status[data-state="microphone-busy"] .mic-pulse,
.mic-status[data-state="network-error"] .mic-pulse,
.mic-status[data-state="recognition-error"] .mic-pulse,
.mic-status[data-state="transcription-error"] .mic-pulse,
.mic-status[data-state="transcription-unavailable"] .mic-pulse,
.mic-status[data-state="unsupported"] .mic-pulse,
.mic-status[data-state="insecure-context"] .mic-pulse { background: var(--red); }
@keyframes micPulse { 50% { box-shadow: 0 0 0 7px transparent; } }

.view-section { display: none; height: calc(100vh - var(--topbar-height)); overflow: auto; }
.view-section.is-active { display: block; }
.chat-view.is-active { display: flex; flex-direction: column; overflow: hidden; }
.chat-scroll { position: relative; flex: 1; overflow: auto; scrollbar-width: thin; }
.chat-hero {
  position: relative;
  display: flex;
  min-height: calc(100vh - var(--topbar-height) - 144px);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 48px 24px 38px;
  text-align: center;
}
.chat-hero .ambient { width: 45vw; height: 45vw; opacity: .14; }
.chat-hero .assistant-orb { --orb-size: 218px; margin-bottom: 18px; }
.greeting-time { position: relative; z-index: 2; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }
.chat-hero h2 { position: relative; z-index: 2; margin-bottom: 8px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; }
.chat-hero > p { position: relative; z-index: 2; margin-bottom: 32px; color: var(--muted); font-size: 12px; }
.quick-actions { position: relative; z-index: 2; display: grid; width: min(560px, 100%); grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-actions button {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 7px 24px rgba(44, 48, 74, .035);
  cursor: pointer;
  transition: .2s ease;
}
.quick-actions button:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--surface-solid); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.quick-actions button > span:last-child { display: grid; min-width: 0; gap: 2px; }
.quick-actions strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quick-actions small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quick-icon { display: grid; width: 34px; height: 34px; border-radius: 10px; place-items: center; font-size: 13px; font-weight: 800; }
.quick-icon.violet { color: var(--accent); background: var(--accent-soft); }
.quick-icon.blue { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.quick-icon.green { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }

.chat-hero.is-compact { min-height: 0; padding: 28px 24px 8px; }
.chat-hero.is-compact .assistant-orb { --orb-size: 82px; margin-bottom: 4px; }
.chat-hero.is-compact .greeting-time, .chat-hero.is-compact h2, .chat-hero.is-compact > p, .chat-hero.is-compact .quick-actions { display: none; }
.message-list { width: min(820px, calc(100% - 34px)); margin: 0 auto; padding: 20px 0 32px; }
.chat-message { display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 11px; margin: 0 0 22px; }
.chat-message.user { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.message-avatar { display: grid; width: 33px; height: 33px; border-radius: 11px; place-items: center; color: #fff; background: linear-gradient(145deg, #1c72ff, #7355f4); font-size: 10px; font-weight: 800; }
.message-content { min-width: 0; }
.message-content > p { margin: 0; line-height: 1.75; white-space: pre-wrap; font-size: 12px; }
.chat-message.user .message-content { max-width: 78%; padding: 12px 15px; border-radius: 17px 17px 4px 17px; background: var(--surface-soft); }
.message-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--subtle); font-size: 10px; }
/* Per-message TTS replay glyph: same control for a manual tap and for the
   auto-play triggered by a new live reply (see wireTtsReplayButton in
   student-app.js) — both drive these same three states, never faked. */
.tts-replay-button { border: 0; background: transparent; padding: 0; margin: 0; color: var(--subtle); font-size: 10px; line-height: 1; cursor: pointer; opacity: .7; transition: opacity .2s ease; }
.tts-replay-button:hover { opacity: 1; }
.tts-replay-button.is-loading { animation: ttsReplayPulse 1s ease-in-out infinite; }
@keyframes ttsReplayPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.tts-replay-button.is-playing { color: var(--accent); opacity: 1; }
/* Quiet, not broken-looking: dim rather than red/error-coloured, and the
   text reply next to it stays fully normal either way. */
.tts-replay-button.is-failed { opacity: .3; }
.action-result-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}
.action-result-card .card-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0; font-size: 10px; }
.action-result-card .card-line span { color: var(--muted); }
.assistant-typing { display: flex; gap: 4px; padding: 6px 0; }
.assistant-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: typing 1s ease-in-out infinite; }
.assistant-typing i:nth-child(2) { animation-delay: .15s; }
.assistant-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { translate: 0 -4px; opacity: .4; } }

.composer-wrap { position: relative; z-index: 14; padding: 7px 22px 14px; background: linear-gradient(transparent, var(--bg) 22%); }
.composer { display: grid; width: min(860px, 100%); min-height: 58px; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: end; gap: 7px; margin: 0 auto; padding: 8px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface-solid); box-shadow: 0 14px 50px rgba(44, 48, 74, .12); }
.composer textarea { min-height: 40px; max-height: 140px; resize: none; padding: 10px 5px 7px; border: 0; outline: 0; color: var(--text); background: transparent; line-height: 1.5; font-size: 12px; }
.composer textarea::placeholder { color: var(--subtle); }
.composer-icon { width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; font-size: 20px; }
.mic-button { font-size: 17px; }
.mic-button.is-active { color: var(--icon-on-strong); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.mic-button.is-error { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.send-button { display: grid; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; place-items: center; color: var(--icon-on-strong); background: var(--text); cursor: pointer; font-size: 19px; }
.voice-interim { width: min(860px, 100%); min-height: 17px; margin: 0 auto 3px; color: var(--accent); font-size: 10px; }
.composer-hint { margin: 7px 0 0; color: var(--subtle); text-align: center; font-size: 10px; }
/* Shared lecturer/student composer: plus on the left, editable text in the
   middle, then dictation, send and a separate full voice-mode control. */
.lumen-composer,
.tutor-composer {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  border-radius: 999px;
  padding: 6px 6px 6px 10px;
}
.lumen-composer .composer-icon,
.lumen-composer .send-button { border-radius: 50%; }
.tutor-composer .composer-attach-toggle {
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 600;
}
.tutor-composer .composer-attach-toggle:hover { background: var(--surface-hover); }
/* Pending attachments before send — thumbnail/icon chips with a remove
   control, matching the same rounded-pill visual language as the composer
   itself. Empty (no children) collapses to zero height via :empty so it
   never leaves a gap when nothing is attached. */
.tutor-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(860px, 100%);
  margin: 0 auto 6px;
}
.tutor-attachment-chips:empty { display: none; }
.tutor-attachment-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-solid);
  font-size: 10px;
  color: var(--muted);
  max-width: 220px;
}
.tutor-attachment-chip img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.tutor-attachment-chip .tutor-attachment-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}
.tutor-attachment-chip span.tutor-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutor-attachment-chip button {
  display: grid;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: var(--subtle);
  background: var(--surface-hover);
  cursor: pointer;
  font-size: 10px;
  flex: 0 0 auto;
}
.tutor-attachment-chip button:hover { color: var(--red); }
/* Sent-message attachment chips reuse the same visual language but sit
   inside the message bubble/content instead of above the composer. */
.message-attachment-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachment-chips .tutor-attachment-chip button { display: none; }
/* JS-driven auto-grow keeps the textarea's own scrollbar from ever showing
   until genuinely at the CSS max-height ceiling (scoped to the student tutor
   composer only — the shared .composer rule is also used by the lecturer's
   assistant chat, which has its own, untouched behaviour). */
.tutor-composer textarea { padding: 9px 4px; overflow-y: hidden; }
.tutor-composer .composer-voice-toggle {
  border: 0;
  background: transparent;
  border-radius: 50%;
}
.tutor-composer .composer-voice-toggle:hover { background: var(--surface-hover); }
.tutor-composer .send-button { border-radius: 50%; }

/* Block C: AI ტრენერი — conversation archive panel + background logo */
.tutor-layout { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); }
body.tutor-archive-open .tutor-view .tutor-layout { grid-template-columns: 260px minmax(0, 1fr); }
.tutor-archive {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
}
body.tutor-archive-open .tutor-view .tutor-archive { display: flex; }
.tutor-archive-head { padding: 14px 12px 10px; }
.tutor-new-chat-button { width: 100%; justify-content: center; }
.tutor-archive-list { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: max-content; gap: 2px; padding: 0 8px 14px; overflow-y: auto; }
.tutor-archive-item {
  overflow: hidden;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.tutor-archive-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutor-archive-item:hover { color: var(--text); background: var(--surface-soft); }
.tutor-archive-item.is-active { color: var(--text); background: var(--accent-soft); font-weight: 700; }
.tutor-archive-empty { padding: 10px 13px; color: var(--subtle); font-size: 10px; }
.tutor-archive-scrim { display: none; }
.tutor-main { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.tutor-archive-toggle { font-size: 15px; }
.tutor-tts-toggle { font-size: 15px; }
.tutor-tts-toggle.is-active { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
/* Idle motion is orb-canvas.js's continuous wobble, boosted for this
   instance only via data-orb-intensity on the canvas element (see
   student.html) — the shared renderer defaults to today's unmodified
   amplitude everywhere that attribute isn't set, including every lecturer
   orb. Opacity raised from .07 (barely visible) to .18 so the logo reads as
   a deliberate background element. top/left/right + explicit height (not
   the shorthand `inset: 0`) so voice mode below can transition `height`
   smoothly — animating to/from an implicit "auto" height (which is what
   `inset: 0` + no explicit height computes to) doesn't animate at all in
   CSS, it snaps. */
.tutor-orb-backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: .18;
  transition: height .35s ease, opacity .3s ease;
}
.assistant-orb-backdrop { --orb-size: min(56vw, 560px); }
.tutor-main .chat-scroll, .tutor-main .composer-wrap { position: relative; z-index: 1; }
/* Voice mode — Option C (agreed over chat/dashboard proposals): chat stays
   fully visible and fully interactive at all times, never dimmed — a
   student reading a formula or technical term while it's being read aloud
   must be able to keep reading it. The single persistent backdrop orb
   (above) shrinks from full-bleed background to a compact band pinned to
   the top of .tutor-main; .tutor-voice-band is an empty in-flow sibling
   that reserves the same height so .chat-scroll resizes in sync with it
   rather than the orb overlapping content. Both read the same
   --voice-band-height custom property so they can never drift out of sync.
   Entering/exiting must not move .chat-scroll's scroll position — nothing
   here ever sets its scrollTop; only its rendered height changes, smoothly,
   over .35s, so the same messages stay anchored where they were. */
.tutor-view[data-mode="voice"] { --voice-band-height: min(30vh, 240px); }
.tutor-view[data-mode="voice"] .tutor-orb-backdrop {
  height: var(--voice-band-height);
  opacity: 1;
  z-index: 2;
}
.tutor-view[data-mode="voice"] .assistant-orb-backdrop { --orb-size: min(22vh, 180px); }
.tutor-voice-band {
  flex: 0 0 auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.tutor-view[data-mode="voice"] .tutor-voice-band {
  max-height: var(--voice-band-height);
  opacity: 1;
  padding-bottom: 14px;
}
/* V3 removed the caption/exit UI that used to live in .tutor-voice-band —
   the transcript now lands directly in #tutorInput as it's recognized, and
   the mic button itself is the only voice control (tap to listen, tap
   again to stop). .tutor-voice-band stays in the DOM purely as the height-
   reserving spacer for the orb band above (see student.html), still sized
   via --voice-band-height below. */
/* Recording state must read differently from idle at a glance, on the
   button itself, not only via the orb — red is the universal "mic is live"
   convention. border-radius repeated here (not just on the plain-state rule
   above) so the pulsing ring stays circular regardless of cascade order. */
.composer-voice-toggle.is-listening {
  color: var(--icon-on-strong);
  background: var(--red);
  border-color: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent);
  animation: tutorVoiceListeningPulse 1.1s ease-in-out infinite;
}
@keyframes tutorVoiceListeningPulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--red) 8%, transparent); }
}
.composer-voice-toggle[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* More generous message spacing — the Block C refinement that was planned
   but not built. Scoped to .tutor-view descendants only: .chat-message /
   .message-content / .message-list are shared with the lecturer's own
   assistant chat, so their base rules stay untouched; these are overrides
   by specificity, not changes to the shared rule itself. */
.tutor-view .message-list { padding-top: 30px; }
.tutor-view .chat-message { margin-bottom: 30px; gap: 14px; }
.tutor-view .message-content > p { line-height: 1.85; }
/* Swaps the "ლ" letter avatar for the same logo/orb visual used elsewhere —
   .message-avatar itself is shared with the lecturer's assistant chat
   (lecturer-app.js still renders a bare "ლ"/"ე" letter there), so this
   modifier only overrides background/positioning, applied additively via a
   second class, never touching the base rule. */
.message-avatar-orb { position: relative; overflow: hidden; background: transparent; }

@media (max-width: 820px) {
  /* 100vh on mobile browsers doesn't track the true visible viewport (it
     assumes toolbars/address bar are collapsed even when they aren't), so
     .view-section's height can render taller than what's actually visible.
     Every other view tolerates this via its own overflow:auto; .chat-view
     can't, since it deliberately uses overflow:hidden at the section level
     so the composer stays pinned via flex — this is what made the composer
     and part of the message list unreachable. 100dvh tracks the real
     viewport; scoped to .tutor-view only, so .chat-view/.view-section/
     .main-surface (all shared with the lecturer's own chat view, which
     likely has this same latent bug) are untouched. */
  .tutor-view { height: calc(100dvh - var(--topbar-height)); }
  /* .tutor-archive is position:fixed below, which already removes it from
     .tutor-layout's grid flow — display:grid (unchanged from desktop) lets
     .tutor-main stretch to fill the available height automatically. The
     previous display:block override here left .tutor-main with no defined
     height at all, an independent way this could fail to scroll. */
  .tutor-view .tutor-archive {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: flex;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    box-shadow: var(--shadow);
    transition: transform .25s ease;
  }
  body.tutor-archive-open .tutor-view .tutor-archive { transform: translateX(0); }
  .tutor-archive-scrim {
    position: fixed;
    z-index: 44;
    inset: 0;
    display: none;
    background: rgba(5, 7, 14, .48);
    backdrop-filter: blur(4px);
  }
  body.tutor-archive-open .tutor-archive-scrim { display: block; }
  .assistant-orb-backdrop { --orb-size: min(80vw, 420px); }
}

/* Content views */
.content-page { width: min(1260px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 64px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.section-heading-actions { display: flex; align-items: center; gap: 9px; }
.section-heading.small { align-items: center; margin-bottom: 18px; }
/* Student-only page-rhythm tightening — .content-page/.section-heading are
   shared with the lecturer, so these are scoped overrides via body.student-
   page, not changes to the shared base rules the lecturer's own pages use. */
body.student-page .content-page { padding: 26px 0 46px; }
body.student-page .section-heading { margin-bottom: 18px; }
.section-heading h2 { margin-bottom: 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.lecture-stats, .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.lecture-stats article, .stat-grid article, .student-stat-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-solid);
  box-shadow: 0 7px 28px rgba(44, 48, 74, .035);
}
.lecture-stats span, .stat-grid span, .student-stat-card > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 600; }
.lecture-stats strong, .stat-grid strong, .student-stat-card > strong { display: block; margin-bottom: 6px; font-size: 24px; letter-spacing: -.04em; }
.lecture-stats small, .stat-grid small, .student-stat-card > small { color: var(--muted); font-size: 10px; }
.mini-progress { height: 4px; overflow: hidden; margin-top: 12px; border-radius: 99px; background: var(--surface-soft); }
.mini-progress i { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width .4s ease; }
.presentation-shell { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #0b0d14; box-shadow: var(--shadow); }
.presentation-toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px 9px 18px; color: #e9ecf7; background: #171b27; font-size: 10px; }
.presentation-toolbar > div { display: flex; align-items: center; gap: 9px; }
.presentation-toolbar .icon-button { width: 40px; height: 40px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }
.presentation-toolbar .button.secondary { color: #fff; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.presentation-shell iframe { display: block; width: 100%; height: min(66vh, 720px); border: 0; background: #111; }

.view-section[data-view-section="live"] { overflow: hidden; }
.content-page.live-layout {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  grid-template-rows: minmax(0, 1fr);
}
.live-presentation-shell {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  grid-template-rows: auto minmax(0, 1fr);
  box-shadow: none;
}
.presentation-toolbar.live-control-bar {
  min-width: 0;
  min-height: 62px;
  align-items: center;
  flex-direction: row;
  padding: 9px 14px;
}
.live-deck-identity { min-width: 0; }
.live-deck-identity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.live-deck-identity small {
  color: rgba(233, 236, 247, .62);
  font-size: 10px;
}
.live-deck-identity strong {
  overflow: hidden;
  max-width: min(34vw, 430px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presentation-toolbar .live-control-actions {
  min-width: 0;
  justify-content: flex-end;
}
.presentation-counter {
  min-width: 54px;
  color: rgba(233, 236, 247, .82);
  text-align: center;
  white-space: nowrap;
}
.qr-attendance-button {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
}
html[data-theme="light"] .presentation-toolbar.live-control-bar {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
  box-shadow: 0 8px 24px rgba(54, 59, 86, .06);
}
html[data-theme="light"] .presentation-toolbar.live-control-bar .live-deck-identity small,
html[data-theme="light"] .presentation-toolbar.live-control-bar .presentation-counter {
  color: var(--muted);
}
html[data-theme="light"] .presentation-toolbar.live-control-bar .icon-button,
html[data-theme="light"] .presentation-toolbar.live-control-bar .button.secondary,
html[data-theme="light"] .presentation-toolbar.live-control-bar .qr-attendance-button {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-soft);
}
html[data-theme="light"] .presentation-toolbar.live-control-bar .icon-button:hover,
html[data-theme="light"] .presentation-toolbar.live-control-bar .button.secondary:hover,
html[data-theme="light"] .presentation-toolbar.live-control-bar .qr-attendance-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.live-presentation-shell iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.upload-drop {
  display: grid;
  min-height: 220px;
  margin-bottom: 20px;
  padding: 28px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 20px;
  place-items: center;
  align-content: center;
  text-align: center;
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  transition: .2s ease;
}
.upload-drop.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
.upload-drop h3 { margin: 10px 0 5px; font-size: 16px; }
.upload-drop p { margin-bottom: 16px; color: var(--muted); font-size: 10px; }
.upload-icon { display: grid; width: 50px; height: 50px; border-radius: 16px; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 22px; }
.table-card, .chart-card, .chapter-editor, .settings-card {
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-solid);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.card-head h3 { margin: 0; font-size: 13px; }
.card-head .eyebrow { margin-bottom: 3px; }
.data-table { width: 100%; }
.data-row { display: grid; align-items: center; gap: 12px; min-height: 60px; padding: 9px 7px; border-top: 1px solid var(--border); font-size: 10px; }
.data-row:first-child { border-top: 0; }
.presentation-table .data-row { grid-template-columns: minmax(180px, 2fr) 100px 86px 82px minmax(238px, auto); }
.presentation-table .data-row.is-selected {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
}
.presentation-table .data-row[data-presentation-id] {
  cursor: pointer;
  border-radius: 11px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.presentation-table .data-row[data-presentation-id]:hover {
  background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.presentation-table .data-row[data-presentation-id]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 74%, transparent);
  outline-offset: 2px;
}
.presentation-select-target { min-width: 0; }
.presentation-upload-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface-solid));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 7%, transparent);
}
.presentation-upload-status[hidden] { display: none; }
.presentation-upload-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: presentation-upload-spin .8s linear infinite;
}
.presentation-upload-copy { display: grid; min-width: 0; gap: 4px; }
.presentation-upload-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.presentation-upload-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.presentation-upload-track { height: 5px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.presentation-upload-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width .22s ease; }
.presentation-upload-percent { min-width: 38px; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.presentation-upload-status[data-state="done"] .presentation-upload-spinner { animation: none; border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent); }
.presentation-upload-status[data-state="error"] { border-color: color-mix(in srgb, #dc2626 28%, var(--border)); }
.presentation-upload-status[data-state="error"] .presentation-upload-spinner { animation: none; border-color: #dc2626; }
@keyframes presentation-upload-spin { to { transform: rotate(360deg); } }
.presentation-table .file-cell.text-button {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}
.presentation-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.icon-button.danger {
  color: #dc2626;
  border-color: color-mix(in srgb, #ef4444 28%, var(--border));
  background: color-mix(in srgb, #ef4444 8%, var(--surface-solid));
}
.icon-button.danger:hover {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
}
.file-cell { display: flex; min-width: 0; align-items: center; gap: 11px; }
.file-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.file-cell span { display: grid; min-width: 0; gap: 2px; }
.file-cell strong, .file-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-cell small, .data-row > span { color: var(--muted); font-size: 10px; }
.badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); font-size: 10px; font-weight: 700; }
.badge.draft { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.chapter-editor { margin-top: 20px; }
.card-note { max-width: 560px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.chapter-column-head { display: grid; grid-template-columns: minmax(140px, 1fr) 208px minmax(118px, .55fr) 34px; gap: 10px; padding: 7px 11px 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .025em; }
.chapter-column-head span:nth-child(2), .chapter-column-head span:nth-child(3) { text-align: center; }
.chapter-row { display: grid; grid-template-columns: minmax(140px, 1fr) 86px 16px 86px minmax(118px, .55fr) auto; align-items: center; gap: 10px; margin: 8px 0; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.chapter-row input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-soft); font-size: 11px; }
.chapter-row span { color: var(--muted); text-align: center; font-size: 10px; }
.chapter-quiz-count { display: block; }
.chapter-quiz-count span { display: none; }
.chapter-quiz-count input { text-align: center; font-weight: 900; }

.question-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: -4px 0 13px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); }
.question-toolbar label { display: grid; width: min(420px, 100%); gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.question-toolbar select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-soft); }
.question-toolbar p { margin: 0 0 10px; color: var(--muted); text-align: right; font-size: 10px; }
.question-chapter-controls { display: grid; gap: 9px; margin: 0 0 13px; }
.question-chapter-control {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
}
.question-chapter-identity { display: grid; align-self: center; gap: 4px; }
.question-chapter-identity strong { font-size: 10px; }
.question-chapter-identity small { color: var(--muted); font-size: 10px; }
.question-chapter-control label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.question-chapter-control input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-soft); font: inherit; font-weight: 800; }
.question-chapter-control button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.question-generate-max { white-space: nowrap; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
/* .filter-row only ever had margin-bottom, so the analytics instance sat
   flush against .analytics-grid above it while keeping 17px below — uneven.
   Scoped by ID (unique to student.html) rather than touching the shared
   .filter-row rule, which the lecturer's own #questionFilters also uses. */
#analyticsFilterRow { margin-top: 17px; }
.filter-chip { display: inline-flex; height: 36px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--surface-solid); cursor: pointer; font-size: 10px; }
.filter-chip b { display: grid; min-width: 18px; height: 18px; border-radius: 99px; place-items: center; background: var(--surface-soft); font-size: 10px; }
.filter-chip.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); font-weight: 700; }
.question-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.question-card { padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); }
.question-card-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.question-card-actions { display: inline-flex; align-items: center; gap: 7px; }
.question-edit-button { min-width: 31px; height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 10px; font-weight: 700; }
.question-edit-button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.question-delete-button { min-width: 31px; height: 28px; padding: 0 9px; border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border)); border-radius: 8px; color: color-mix(in srgb, #ef4444 78%, var(--text)); background: color-mix(in srgb, #ef4444 7%, var(--surface-soft)); cursor: pointer; font-size: 10px; font-weight: 700; }
.question-delete-button:hover { color: #ef4444; border-color: color-mix(in srgb, #ef4444 58%, var(--border)); background: color-mix(in srgb, #ef4444 12%, var(--surface-soft)); }
.question-delete-button:disabled { cursor: wait; opacity: .58; }
.question-number { color: var(--accent); font-size: 10px; font-weight: 800; }
.question-card h3 { min-height: 38px; margin-bottom: 12px; font-size: 11px; line-height: 1.65; }
.answer-options { display: grid; gap: 6px; }
.answer-options span { display: flex; min-height: 30px; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.answer-options span.correct { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.answer-options i { display: grid; width: 17px; height: 17px; border: 1px solid var(--border); border-radius: 50%; place-items: center; font-style: normal; font-size: 10px; }
.question-empty { grid-column: 1 / -1; display: grid; min-height: 220px; padding: 30px; border: 1px dashed var(--border); border-radius: 16px; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; background: var(--surface-solid); }
.question-empty strong { color: var(--text); font-size: 12px; }
.question-empty span { max-width: 440px; line-height: 1.65; font-size: 10px; }

.compact-grid { grid-template-columns: repeat(3, 1fr); }
.student-summary-grid {
  width: min(330px, 100%);
  grid-template-columns: minmax(0, 1fr);
}
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.search-box { display: flex; width: min(340px, 100%); height: 40px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface-soft); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.students-table .data-row { grid-template-columns: minmax(180px, 1.7fr) 1.5fr 100px 34px; }
.student-class-card { margin-bottom: 13px; }
.student-class-head { align-items: flex-end; margin-bottom: 0; }
.student-class-head .card-note { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.student-class-picker { display: grid; min-width: min(360px, 100%); gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.student-class-picker select { min-width: 260px; height: 44px; }
.score-pill { font-weight: 800; }
.score-pill.good { color: var(--green); }
.score-pill.medium { color: var(--amber); }

.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
/* Student-only density fix for the two top analytics cards (topic bars +
   attendance) — tighter padding/heading margin so equal-height cards (the
   grid's default align-items:stretch, unchanged) don't read as mostly empty
   when one has sparser content than the other. Scoped via body.student-page,
   not the shared .analytics-grid/.chart-card rules the lecturer also uses. */
body.student-page .analytics-grid .chart-card { padding: 16px 17px; }
body.student-page .analytics-grid .card-head { margin-bottom: 10px; }
.trend-card { margin-bottom: 13px; overflow: hidden; }
.trend-card-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.trend-card-head h3 { margin-top: 2px; font-size: 14px; }
.trend-card-head p { margin-top: 5px; color: var(--muted); font-size: 10px; }
.trend-period-control { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.trend-period-control button, .trend-metric-tabs button { flex: 0 0 auto; min-height: 31px; padding: 0 11px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.trend-period-control button:hover, .trend-metric-tabs button:hover { color: var(--text); }
.trend-period-control button.is-active, .trend-metric-tabs button.is-active { color: #fff; background: var(--accent); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 24%, transparent); }
.trend-custom-period { display: flex; align-items: end; justify-content: flex-end; gap: 9px; margin-top: 11px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.trend-custom-period[hidden] { display: none; }
.trend-custom-period label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.trend-custom-period input { min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); color-scheme: light dark; background: var(--surface-solid); }
.trend-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 11px; padding-top: 12px; border-top: 1px solid var(--border); }
.trend-metric-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surface-soft); }
.trend-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.trend-tools .icon-button { width: 31px; height: 31px; }
.trend-tools output { min-width: 40px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 800; }
.trend-compare { display: inline-flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.trend-compare input { width: 15px; height: 15px; accent-color: var(--accent); }
.trend-zoom-range { width: 92px; accent-color: var(--accent); }
.trend-viewport { position: relative; overflow-x: auto; overflow-y: hidden; min-height: 330px; border: 1px solid var(--border); border-radius: 14px; outline: none; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 55%); cursor: grab; scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border)) var(--surface-soft); scrollbar-width: thin; }
.trend-viewport:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.trend-viewport.is-dragging { cursor: grabbing; user-select: none; }
.trend-canvas { min-width: 100%; height: 330px; transition: width .2s ease; }
.trend-svg { display: block; height: 330px; overflow: visible; }
.trend-grid-line { stroke: var(--border); stroke-width: 1; }
.trend-axis-label { fill: var(--subtle); font-family: inherit; font-size: 10px; font-weight: 700; }
.trend-area { fill: url(#trendAreaGradient); opacity: .58; }
.trend-line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--accent) 30%, transparent)); }
.trend-compare-line { fill: none; stroke: var(--muted); stroke-dasharray: 7 6; stroke-linecap: round; stroke-width: 2; opacity: .75; }
.trend-point circle { fill: var(--surface-solid); stroke: var(--accent); stroke-width: 3; transition: r .15s ease, fill .15s ease; }
.trend-point:hover circle, .trend-point:focus circle { r: 7; fill: var(--accent); outline: none; }
.trend-point text { pointer-events: none; fill: var(--text); font-family: inherit; font-size: 10px; font-weight: 900; opacity: 0; transform: translateY(-3px); transition: opacity .15s ease; }
.trend-point:hover text, .trend-point:focus text { opacity: 1; }
.trend-empty { display: grid; min-height: 330px; place-items: center; color: var(--muted); font-size: 10px; }
.trend-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.trend-footer span:last-child { text-align: right; }
.chart-card.wide { grid-row: span 2; }
.legend-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.legend-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.line-chart { position: relative; height: 310px; margin-top: 18px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0 61px, var(--border) 62px); }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-labels { position: absolute; right: 0; bottom: -24px; left: 0; display: flex; justify-content: space-between; color: var(--subtle); font-size: 10px; }
.topic-bars { display: grid; gap: 14px; }
.topic-bar-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; }
.topic-bar-head span { color: var(--muted); }
.topic-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.topic-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.support-list { display: grid; gap: 4px; }
.assessment-view-tabs { display: inline-flex; gap: 5px; margin: 0 0 16px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.assessment-view-tabs button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.assessment-view-tabs button:hover { color: var(--text); }
.assessment-view-tabs button.is-active { color: var(--text); background: var(--surface); box-shadow: 0 5px 16px rgba(37, 42, 68, .08); }
.assessment-view-tabs button span { color: var(--accent); font-size: 12px; }
.assessment-page [data-assessment-section][hidden] { display: none !important; }
.assessment-scheme-card { margin-bottom: 13px; overflow: hidden; }
.assessment-scheme-head { align-items: flex-end; gap: 22px; }
.assessment-scheme-head > div:first-child { max-width: 650px; }
.assessment-scheme-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.assessment-column-picker select { min-width: 158px; min-height: 38px; padding: 0 34px 0 11px; color: var(--text); border: 1px solid var(--border); border-radius: 11px; background-color: var(--surface); font: inherit; font-size: 10px; font-weight: 750; }
.assessment-scheme-columns { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.assessment-scheme-column { position: relative; display: grid; width: 216px; min-height: 138px; flex: 0 0 216px; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg, var(--surface), var(--surface-soft)); cursor: grab; scroll-snap-align: start; transition: border-color .16s ease, opacity .16s ease, transform .16s ease; }
.assessment-scheme-column:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); transform: translateY(-2px); }
.assessment-scheme-column.is-dragging { opacity: .42; transform: scale(.97); }
.assessment-scheme-column.is-drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assessment-scheme-column-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px; }
.assessment-drag-handle { display: grid; width: 24px; height: 28px; place-items: center; color: var(--muted); font-size: 16px; cursor: grab; }
.assessment-scheme-column-title { min-width: 0; }
.assessment-scheme-column-title strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.assessment-scheme-column-title small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.assessment-scheme-column-badge { width: fit-content; padding: 4px 7px; border-radius: 99px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.assessment-scheme-column-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.assessment-scheme-column-meta span { display: grid; gap: 3px; padding: 8px; border-radius: 10px; background: var(--surface); }
.assessment-scheme-column-meta small { color: var(--muted); font-size: 10px; }
.assessment-scheme-column-meta strong { font-size: 10px; }
.assessment-scheme-column-actions { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.assessment-scheme-column-actions button { display: grid; min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid var(--border); border-radius: 8px; place-items: center; color: var(--muted); background: var(--surface); cursor: pointer; font: inherit; font-size: 10px; }
.assessment-scheme-column-actions button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.assessment-scheme-column-actions button:disabled { opacity: .3; pointer-events: none; }
.assessment-scheme-column-actions button.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); }
.assessment-roster-card { margin-bottom: 13px; overflow: hidden; }
.assessment-roster-head { align-items: end; gap: 24px; }
.assessment-roster-head p { max-width: 560px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.assessment-roster-scroll { max-height: min(66vh, 720px); overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent; }
.assessment-student-roster { min-width: 100%; }
.assessment-grade-matrix { width: max-content; min-width: calc(390px + (var(--assessment-column-count, 1) * 154px)); border-spacing: 0; border-collapse: separate; table-layout: fixed; color: var(--text); }
.assessment-grade-matrix th, .assessment-grade-matrix td { height: 72px; padding: 9px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.assessment-grade-matrix tr:last-child > * { border-bottom: 0; }
.assessment-grade-matrix tr > *:last-child { border-right: 0; }
.assessment-grade-matrix thead th { position: sticky; z-index: 4; top: 0; height: 84px; color: var(--text); background: color-mix(in srgb, var(--surface-solid) 95%, var(--accent-soft)); box-shadow: 0 1px 0 var(--border); }
.assessment-grade-matrix thead th:not(.assessment-matrix-student-column):not(.assessment-matrix-total-column) { width: 154px; min-width: 154px; }
.assessment-grade-matrix tbody tr { transition: background .15s ease; }
.assessment-grade-matrix tbody tr:hover > * { background-color: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)); }
.assessment-matrix-student-column { position: sticky; z-index: 3; left: 0; width: 255px; min-width: 255px; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.assessment-grade-matrix thead .assessment-matrix-student-column { z-index: 7; }
.assessment-grade-matrix thead .assessment-matrix-student-column > span, .assessment-matrix-total-column > span { display: block; font-size: 10px; font-weight: 900; }
.assessment-grade-matrix th small, .assessment-matrix-total-column small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.assessment-grade-matrix th em { display: block; width: fit-content; margin-top: 7px; padding: 3px 6px; border-radius: 99px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-style: normal; font-weight: 850; }
.assessment-matrix-column-title { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 6px; }
.assessment-matrix-column-title strong { display: block; overflow: hidden; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.assessment-matrix-column-title button { display: grid; width: 23px; height: 23px; flex: 0 0 auto; padding: 0; border: 1px solid var(--border); border-radius: 7px; place-items: center; color: var(--muted); background: var(--surface); cursor: pointer; font: inherit; font-size: 10px; }
.assessment-matrix-column-title button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.assessment-matrix-cell { width: 154px; min-width: 154px; background: var(--surface); }
.assessment-matrix-grade-form { display: grid; grid-template-columns: 1fr 27px; align-items: center; gap: 5px; }
.assessment-cell-source { grid-column: 1 / -1; width: fit-content; min-height: 17px; padding: 3px 6px; border-radius: 99px; color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 850; line-height: 1; }
.assessment-matrix-grade-form.is-automatic .assessment-cell-source { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.assessment-matrix-grade-form.is-manual .assessment-cell-source { color: var(--accent); background: var(--accent-soft); }
.assessment-matrix-grade-form.is-pending .assessment-cell-source { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.assessment-cell-input { display: grid; grid-template-columns: minmax(42px, 1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); transition: border-color .15s ease, box-shadow .15s ease; }
.assessment-cell-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assessment-cell-input input { width: 100%; min-width: 0; height: 31px; padding: 4px 5px 4px 8px; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 11px; font-weight: 900; }
.assessment-cell-input input::placeholder { color: var(--subtle); }
.assessment-cell-input > span { padding-right: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.assessment-matrix-grade-form > button { display: grid; width: 27px; height: 31px; padding: 0; border: 1px solid var(--border); border-radius: 9px; place-items: center; color: var(--accent); background: var(--surface); cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.assessment-matrix-grade-form > button:hover { border-color: var(--accent); background: var(--accent-soft); }
.assessment-matrix-grade-form > button:disabled { opacity: .45; cursor: wait; }
.assessment-matrix-total-column { position: sticky; z-index: 3; right: 0; width: 135px; min-width: 135px; background: color-mix(in srgb, var(--surface-solid) 96%, var(--accent-soft)); box-shadow: -1px 0 0 var(--border); }
.assessment-grade-matrix thead .assessment-matrix-total-column { z-index: 7; }
.assessment-matrix-total-column > strong { display: block; font-size: 13px; font-weight: 950; }
.assessment-matrix-total-column .badge { width: fit-content; margin-top: 6px; font-size: 10px; }
.assessment-layout { display: contents; }
.assessment-distribution-card, .assessment-ledger-card { margin-top: 13px; }
.assessment-tools { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 150px; gap: 9px; }
.assessment-tools select { width: 100%; min-height: 38px; padding: 0 11px; color: var(--text); border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.assessment-table { min-width: 700px; }
.assessment-ledger-card { overflow-x: auto; }
.assessment-row { display: grid; grid-template-columns: minmax(175px, 1.5fr) minmax(150px, 1.2fr) 105px 100px 88px; align-items: center; gap: 12px; min-height: 64px; padding: 10px 7px; border-top: 1px solid var(--border); font-size: 10px; }
.assessment-row:first-child { border-top: 0; }
.assessment-header { min-height: 34px; padding-top: 7px; padding-bottom: 7px; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.assessment-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.assessment-score { font-size: 15px; font-weight: 900; }
.assessment-score.good { color: var(--green); }
.assessment-score.medium { color: var(--amber); }
.assessment-score.low { color: var(--danger); }
.grade-distribution { display: grid; gap: 12px; }
.grade-band-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 10px; }
.grade-band-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.grade-band-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
.student-grade-history { display: grid; }
.support-person { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.support-person:first-child { border-top: 0; }
.support-person span:nth-child(2) { display: grid; gap: 2px; font-size: 10px; }
.support-person small { color: var(--muted); font-size: 10px; }
.support-person strong { color: var(--amber); font-size: 10px; }

.empty-state { display: flex; min-height: calc(100vh - var(--topbar-height)); max-width: 580px; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.empty-icon { display: grid; width: 70px; height: 70px; margin-bottom: 18px; border-radius: 22px; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 25px; }
.empty-state p { margin-bottom: 24px; color: var(--muted); line-height: 1.8; font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.settings-card h3 { margin-bottom: 18px; font-size: 14px; }
.settings-card > label:not(.toggle-row), .form-modal label { display: grid; gap: 7px; margin-top: 15px; color: var(--muted); font-size: 10px; font-weight: 600; }
.settings-card select, .form-modal input, .form-modal select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-soft);
}
.settings-card input[type="number"] {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-soft);
}
.assistant-voice-setting small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }
.assistant-voice-test { margin-top: 12px; }
.toggle-row { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--border); cursor: pointer; }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row strong { font-size: 10px; }
.toggle-row small { color: var(--muted); font-size: 10px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 99px; background: var(--surface-hover); transition: .2s ease; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: .2s ease; }
.toggle-row input:checked + i { background: var(--accent); }
.toggle-row input:checked + i::after { transform: translateX(16px); }

/* Dialogs and feedback */
dialog.modal {
  width: min(470px, calc(100% - 28px));
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 23px;
  color: var(--text);
  text-align: center;
  background: var(--surface-solid);
  box-shadow: 0 30px 100px rgba(0,0,0,.28);
}
dialog.modal::backdrop { background: rgba(7, 9, 17, .58); backdrop-filter: blur(7px); }
.modal-close { position: absolute; top: 13px; right: 13px; display: grid; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; place-items: center; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 18px; }
.modal h2 { margin-bottom: 8px; font-size: 22px; }
.modal > p { color: var(--muted); line-height: 1.7; font-size: 10px; }
.qr-modal { max-height: calc(100dvh - 24px); overflow: auto; }
.material-modal { max-height: calc(100dvh - 24px); overflow: auto; }
.material-slide { padding: 10px 0; border-top: 1px solid var(--border); }
.material-slide:first-child { padding-top: 0; border-top: 0; }
.material-slide .eyebrow { margin-bottom: 4px; }
.material-slide p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
.qr-live-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 10px; border-radius: 999px; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); font-size: 10px; font-weight: 800; }
.qr-live-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); animation: qrLivePulse 1.4s ease-out infinite; }
.qr-live-status.is-retrying { color: var(--amber); }
.qr-frame { position: relative; display: grid; width: min(260px, 100%); height: auto; aspect-ratio: 1; margin: 12px auto; overflow: hidden; padding: clamp(9px, 3vw, 15px); border: 1px solid var(--border); border-radius: 20px; place-items: center; background: #fff; box-shadow: 0 16px 44px rgba(67, 75, 255, .12); }
.qr-frame::after { position: absolute; z-index: 2; top: 8%; left: 6%; width: 88%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(97, 87, 255, .9), transparent); box-shadow: 0 0 13px rgba(97, 87, 255, .65); content: ""; pointer-events: none; animation: qrScanLine 2.4s ease-in-out infinite alternate; }
.qr-frame::before { position: absolute; z-index: 3; inset: 6px; border: 2px solid transparent; border-top-color: rgba(97, 87, 255, .45); border-bottom-color: rgba(97, 87, 255, .2); border-radius: 15px; content: ""; pointer-events: none; animation: qrFrameGlow 2.2s ease-in-out infinite; }
.qr-frame img, .qr-frame canvas, .qr-frame svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-frame.is-refreshing img, .qr-frame.is-refreshing canvas, .qr-frame.is-refreshing svg { animation: qrCodeSwap .42s ease-out; }
.qr-frame.is-stale img, .qr-frame.is-stale canvas, .qr-frame.is-stale svg { opacity: .28; filter: grayscale(1); }
.qr-timer { width: min(260px, 100%); height: 4px; overflow: hidden; margin: 0 auto 9px; border-radius: 99px; background: var(--surface-soft); }
.qr-timer i { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; }
.qr-modal > strong { display: block; font-size: 10px; }
.qr-modal > small { display: block; max-width: 100%; overflow: hidden; margin-top: 6px; color: var(--subtle); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.qr-modal > .qr-fingerprint { visibility: visible; color: var(--muted); letter-spacing: .08em; }
@keyframes qrLivePulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes qrScanLine { from { transform: translateY(0); } to { transform: translateY(205px); } }
@keyframes qrFrameGlow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes qrCodeSwap { 0% { opacity: .35; transform: scale(.965); } 100% { opacity: 1; transform: scale(1); } }
.form-modal { text-align: left !important; }
.form-modal h2 { margin-bottom: 20px; }
.form-modal form { display: grid; gap: 12px; }
.form-modal .toggle-row { margin-top: 2px; }
.form-modal textarea {
  width: 100%;
  min-height: 78px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  resize: vertical;
  background: var(--surface-soft);
  font: inherit;
  line-height: 1.55;
}
.question-modal { width: min(620px, calc(100% - 28px)) !important; }
.generator-modal, .quiz-send-modal { width: min(720px, calc(100% - 28px)) !important; }
.modal-copy { margin: 7px 30px 16px 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.assessment-compose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.time-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.time-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.time-presets button { min-width: 48px; min-height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.time-presets button:hover, .time-presets button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.generator-settings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.generator-chapter-list, .quiz-chapter-list { display: grid; gap: 8px; max-height: min(390px, 46vh); margin: 14px 0; overflow-y: auto; }
.generator-chapter-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(205px, 245px); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.generator-chapter-row > input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.generator-chapter-row span { display: grid; gap: 3px; }
.generator-chapter-row strong { font-size: 10px; }
.generator-chapter-row small { color: var(--muted); font-size: 10px; }
.generator-count-control { display: grid; grid-template-columns: 88px minmax(105px, 1fr); align-items: end; gap: 7px; }
.generator-chapter-row label { display: grid !important; grid-template-columns: 1fr; align-items: center; gap: 4px !important; margin: 0 !important; font-size: 10px !important; }
.generator-chapter-row input[type="number"] { min-height: 34px !important; text-align: center; font-weight: 900; }
.generator-count-control .button { min-height: 34px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.generator-total, .quiz-send-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 12px; color: var(--muted); background: var(--accent-soft); font-size: 10px; }
.generator-total strong, .quiz-send-summary strong { color: var(--accent); font-size: 13px; }
.quiz-send-summary { align-items: start; flex-direction: column; }
.quiz-send-summary div { display: flex; width: 100%; justify-content: space-between; gap: 12px; }
.quiz-individual-times { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.quiz-individual-times[hidden] { display: none; }
.quiz-times-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quiz-times-head > span { display: grid; gap: 3px; }
.quiz-times-head strong { font-size: 10px; }
.quiz-times-head small { color: var(--muted); font-size: 10px; }
.quiz-question-time-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: min(280px, 34vh); overflow-y: auto; }
.quiz-question-time-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.quiz-question-time-row > span { display: grid; gap: 2px; min-width: 0; }
.quiz-question-time-row strong { font-size: 10px; }
.quiz-question-time-row small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.quiz-question-time-row label { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 5px !important; margin: 0 !important; color: var(--muted); font-size: 10px !important; }
.quiz-question-time-row input { min-height: 34px !important; padding: 0 7px !important; text-align: center; font-weight: 900; }
.question-options-editor { display: grid; gap: 7px; margin: 1px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.question-options-editor legend { padding: 0 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.question-options-editor label { display: grid !important; grid-template-columns: 25px 1fr; align-items: center; gap: 8px !important; margin: 0 !important; }
.question-options-editor label > span { display: grid; width: 25px; height: 25px; border-radius: 50%; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.question-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.question-form-grid label { margin-top: 0 !important; }
.form-help { margin: 0; color: var(--muted); line-height: 1.5; font-size: 10px; }
.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; width: min(360px, calc(100% - 36px)); gap: 8px; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); box-shadow: var(--shadow); animation: toastIn .25s ease; font-size: 10px; }
.toast-icon { display: grid; width: 25px; height: 25px; border-radius: 8px; place-items: center; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.toast button { border: 0; color: var(--muted); background: transparent; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* Student */
.student-page { min-height: 100vh; }
.student-header { position: sticky; top: 0; z-index: 20; display: flex; height: 72px; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); }
.student-header-actions { display: flex; align-items: center; gap: 10px; }
.student-logout-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; color: color-mix(in srgb, var(--danger) 82%, var(--text)); background: var(--surface); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.student-logout-button:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.student-logout-button:disabled { cursor: wait; opacity: .55; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--surface); font-size: 10px; }
.connection-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent); }
.student-main { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 48px; }
.student-welcome { display: grid; grid-template-columns: 1fr 330px; align-items: end; gap: 30px; margin-bottom: 32px; }
.student-welcome h1 { margin-bottom: 7px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.student-welcome p { margin: 0; color: var(--muted); font-size: 11px; }
.lecture-live-card { padding: 17px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-solid); box-shadow: var(--shadow-soft); }
.lecture-live-card > strong, .lecture-live-card > small { display: block; }
.lecture-live-card > strong { margin: 12px 0 3px; font-size: 11px; }
.lecture-live-card > small { color: var(--muted); font-size: 10px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 99px; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); font-size: 10px; font-weight: 800; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.student-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 18px; }
.student-feed { min-width: 0; }
.student-aside { display: grid; align-content: start; gap: 10px; }
.student-quiz-area { min-height: 430px; }
.waiting-card { display: flex; min-height: 400px; align-items: center; flex-direction: column; justify-content: center; padding: 30px; border: 1px dashed var(--border-strong); border-radius: 20px; text-align: center; background: var(--surface-solid); }
.waiting-card h3 { margin: 16px 0 6px; font-size: 16px; }
.waiting-card p { max-width: 380px; margin: 0; color: var(--muted); line-height: 1.8; font-size: 10px; }
.radial-progress { position: absolute; top: 17px; right: 17px; display: grid; width: 54px; height: 54px; border-radius: 50%; place-items: center; background: conic-gradient(var(--accent) 0 84%, var(--surface-soft) 84% 100%); }
.radial-progress::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-solid); }
.radial-progress span { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: 10px; font-weight: 800; }
.score-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); font-size: 10px; }
.score-row span { margin: 0; color: var(--muted); }
.score-row span small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.score-row-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.quiz-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-solid); box-shadow: var(--shadow-soft); }
.quiz-card-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--border); }
.quiz-card-header h3 { margin: 0; font-size: 13px; }
.quiz-timer { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 10px; font-weight: 800; }
.quiz-progress { height: 4px; background: var(--surface-soft); }
.quiz-progress i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.quiz-body { padding: 24px; }
.quiz-step { color: var(--muted); font-size: 10px; }
.quiz-question { margin: 10px 0 18px; font-size: 16px; line-height: 1.65; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 13px; text-align: left; background: var(--surface); cursor: pointer; }
.quiz-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.quiz-option.is-selected { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.quiz-option span:first-child { display: grid; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 8px; place-items: center; font-size: 10px; font-weight: 800; }
.quiz-option span:last-child { font-size: 10px; }
.quiz-footer { display: flex; align-items: center; justify-content: flex-end; padding: 14px 19px; border-top: 1px solid var(--border); }
.result-icon { display: grid; width: 70px; height: 70px; margin: 0 auto 17px; border-radius: 50%; place-items: center; color: var(--icon-on-strong); background: var(--green); font-size: 27px; }

@media print {
  .sidebar, .topbar, .heading-actions, .composer-wrap { display: none !important; }
  .app-shell { display: block; height: auto; }
  .main-surface, .view-section { height: auto; overflow: visible; }
  .view-section { display: none !important; }
  .view-section[data-view-section="analytics"],
  .view-section[data-view-section="exams"] { display: block !important; }
  .view-section[data-view-section="exams"] { break-before: page; page-break-before: always; }
  .content-page { width: 100%; padding: 0; }
  body { background: #fff; color: #111; }
}

@media (max-width: 1050px) {
  :root { --sidebar-width: 236px; }
  .lecture-stats, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
  .assessment-layout { grid-template-columns: 1fr; }
  .chart-card.wide { grid-row: auto; }
  .question-list { grid-template-columns: 1fr; }
  .students-table .data-row { grid-template-columns: minmax(160px, 1.7fr) 1.2fr 90px 34px; }
}

@media (max-width: 820px) {
  .auth-topbar { min-height: 68px; padding: 16px 18px; }
  .auth-unified-main { padding: 92px 20px 128px; }
  .auth-unified-card { width: min(100%, 390px); }
  .auth-footer { bottom: 17px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(290px, 88vw); transform: translateX(-105%); box-shadow: var(--shadow); transition: transform .25s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .sidebar-scrim { position: fixed; z-index: 35; inset: 0; background: rgba(5, 7, 14, .48); backdrop-filter: blur(4px); }
  body.sidebar-open .sidebar-scrim { display: block; }
  .mobile-menu { display: grid; }
  .topbar { padding: 0 16px; }
  .mic-status { display: none; }
  .quick-actions { grid-template-columns: 1fr; max-width: 430px; }
  .quick-actions small { display: block; }
  .chat-hero { min-height: calc(100vh - var(--topbar-height) - 135px); padding-top: 28px; }
  .chat-hero .assistant-orb { --orb-size: 125px; }
  .composer-wrap { padding-right: 12px; padding-left: 12px; }
  .content-page { width: min(100% - 28px, 680px); padding-top: 25px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; }
  .student-class-head { align-items: stretch; flex-direction: column; }
  .student-class-picker, .student-class-picker select { width: 100%; min-width: 0; }
  .assessment-view-tabs { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); }
  .assessment-view-tabs button { justify-content: center; padding-inline: 7px; }
  .assessment-roster-head { align-items: flex-start; }
  .assessment-roster-head p { max-width: none; }
  .assessment-roster-scroll { max-height: 62vh; }
  .assessment-matrix-student-column { width: 205px; min-width: 205px; }
  .assessment-grade-matrix { min-width: calc(340px + (var(--assessment-column-count, 1) * 145px)); }
  .assessment-grade-matrix thead th:not(.assessment-matrix-student-column):not(.assessment-matrix-total-column), .assessment-matrix-cell { width: 145px; min-width: 145px; }
  .presentation-toolbar { align-items: flex-start; flex-direction: column; }
  .presentation-toolbar > div:last-child { width: 100%; justify-content: flex-end; }
  .presentation-shell iframe { height: 57vh; }
  .presentation-table .data-row { grid-template-columns: minmax(150px, 1fr) auto; }
  .presentation-table .data-row > *:nth-child(2),
  .presentation-table .data-row > *:nth-child(3),
  .presentation-table .data-row > *:nth-child(4) { display: none; }
  .chapter-column-head { display: none; }
  .chapter-row { grid-template-columns: 1fr 72px 12px 72px; }
  .chapter-row .chapter-quiz-count { display: grid; grid-template-columns: 1fr 72px; align-items: center; grid-column: 1 / -1; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
  .chapter-row .chapter-quiz-count span { display: block; text-align: left; }
  .chapter-row > *:last-child { grid-column: 1 / -1; }
  .question-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .question-toolbar label { width: 100%; }
  .question-toolbar p { margin: 0; text-align: left; }
  .question-chapter-control { grid-template-columns: minmax(0, 1fr) minmax(160px, 210px); }
  .question-chapter-control .button { width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .assessment-tools { grid-template-columns: 1fr 1fr; }
  .assessment-tools .search-box { grid-column: 1 / -1; }
  .assessment-compose-grid { grid-template-columns: 1fr; }
  .quiz-question-time-list { grid-template-columns: 1fr; }
  .student-welcome { grid-template-columns: 1fr; }
  .student-grid { grid-template-columns: 1fr; }
  .student-aside { grid-template-columns: repeat(3, 1fr); }
  .radial-progress { display: none; }
}

@media (max-width: 560px) {
  :root { --topbar-height: 67px; }
  .section-heading-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .quiz-times-head { align-items: stretch; flex-direction: column; }
  .auth-brand { font-size: 18px; }
  .auth-brand-mark { width: 28px; height: 28px; }
  .auth-unified-main { align-items: start; padding-top: 120px; }
  .auth-unified-card h1 { font-size: 27px; }
  .auth-intro { margin-bottom: 25px; }
  .auth-continue-button { min-height: 51px; border-radius: 13px; }
  .auth-demo-dialog { padding: 26px 18px 20px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .theme-button {
    display: inline-grid;
    width: 50px;
    height: 36px;
    flex: 0 0 50px;
  }
  .topbar-actions .theme-button span {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
  .notification-button { width: 36px; height: 36px; }
  .chat-hero { justify-content: flex-start; padding-top: 9vh; }
  .chat-hero h2 { font-size: 24px; }
  .chat-hero > p { padding: 0 18px; line-height: 1.65; }
  .quick-actions { display: flex; width: calc(100% + 24px); max-width: none; overflow-x: auto; padding: 0 12px 8px; scroll-snap-type: x mandatory; }
  .quick-actions button { min-width: 245px; scroll-snap-align: center; }
  .composer { border-radius: 18px; }
  .composer-hint { display: none; }
  .voice-interim { min-height: 12px; }
  .content-page { width: calc(100% - 22px); padding-bottom: 40px; }
  .section-heading h2 { font-size: 26px; }
  .lecture-stats, .stat-grid, .compact-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lecture-stats article, .stat-grid article { padding: 14px; }
  .lecture-stats strong, .stat-grid strong { font-size: 20px; }
  .presentation-shell iframe { height: 54vh; }
  .presentation-toolbar .button { font-size: 0; }
  .presentation-toolbar .button::after { content: "AI"; font-size: 10px; }
  .presentation-toolbar #sendQuizButton,
  .presentation-toolbar #sendHomeQuizButton {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 10px;
  }
  .presentation-toolbar #sendQuizButton::after,
  .presentation-toolbar #sendHomeQuizButton::after { content: none; }
  .chapter-row { grid-template-columns: 1fr 58px 8px 58px; padding: 8px; gap: 6px; }
  .question-card { padding: 14px; }
  .question-form-grid { grid-template-columns: 1fr; }
  .table-card { padding: 12px; }
  .students-table .data-row { grid-template-columns: minmax(145px, 1fr) 40px; }
  .students-table .data-row > *:not(:first-child):not(:nth-child(4)) { display: none; }
  .analytics-grid { gap: 9px; }
  .trend-card-head, .trend-toolbar { align-items: stretch; flex-direction: column; }
  .trend-period-control { justify-content: flex-start; }
  .trend-custom-period { align-items: stretch; flex-direction: column; }
  .trend-tools { justify-content: flex-start; flex-wrap: wrap; }
  .trend-metric-tabs { overflow-x: auto; }
  .trend-footer { flex-direction: column; }
  .trend-footer span:last-child { text-align: left; }
  .line-chart { height: 230px; }
  .generator-settings { grid-template-columns: 1fr; }
  .generator-chapter-row { grid-template-columns: 24px minmax(0, 1fr); }
  .generator-count-control { grid-column: 1 / -1; grid-template-columns: 90px minmax(0, 1fr); }
  .question-chapter-control { grid-template-columns: 1fr; align-items: stretch; }
  dialog.modal { padding: 24px 18px; }
  .student-header { padding: 0 14px; }
  .connection-pill { display: none; }
  .student-main { width: calc(100% - 24px); padding-top: 28px; }
  .student-aside { grid-template-columns: 1fr; }
  .student-welcome { margin-bottom: 24px; }
  .quiz-body { padding: 18px 14px; }
  .quiz-question { font-size: 14px; }
}

@media (max-width: 820px) {
  .content-page.live-layout {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .presentation-toolbar.live-control-bar {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 9px 10px;
  }
  .presentation-toolbar .live-control-actions {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 1px;
    scrollbar-width: thin;
  }
  .presentation-toolbar.live-control-bar .button {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 10px;
    white-space: nowrap;
  }
  .presentation-toolbar.live-control-bar .button::after { content: none; }
  .live-deck-identity strong { max-width: calc(100vw - 84px); }
  .live-presentation-shell iframe { height: 100%; }
  .student-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .presentation-upload-status { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .presentation-upload-percent { grid-column: 2; text-align: left; }
  .live-control-bar .icon-button { width: 40px; height: 40px; flex: 0 0 40px; }
  .live-control-bar .presentation-counter { min-width: 48px; }
  .presentation-table .data-row { grid-template-columns: minmax(0, 1fr); }
  .presentation-table .presentation-actions {
    grid-column: 1;
    justify-content: flex-start;
  }
  .presentation-table .presentation-actions .button { flex: 1 1 auto; }
  .qr-modal { padding: 22px 16px; }
}

/* Lumeni product refinements */
.mic-icon { position: relative; display: inline-block; width: 13px; height: 18px; border: 2px solid currentColor; border-radius: 8px; }
.mic-icon::before { position: absolute; top: 8px; left: 50%; width: 20px; height: 11px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 11px 11px; content: ""; transform: translateX(-50%); }
.mic-icon::after { position: absolute; top: 18px; left: 50%; width: 10px; height: 2px; border-radius: 999px; background: currentColor; box-shadow: 0 -3px 0 -.5px currentColor; content: ""; transform: translateX(-50%); }
.auth-composer-mic .mic-icon { transform: scale(.82); }
.mic-button .mic-icon { transform: scale(.68); }

.brand-orb-mini { position: relative; display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; overflow: visible; place-items: center; }
.brand-orb-mini .elysi-siri-canvas { position: absolute; inset: -20%; width: 140%; height: 140%; }
.auth-mobile-logo.brand-orb-mini { width: 62px; height: 62px; margin-bottom: 14px; }

.chapter-sort-note { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft)); }
.chapter-sort-note > span:first-child { color: var(--accent); font-size: 19px; font-weight: 900; }
.chapter-sort-note > span:last-child { display: grid; gap: 2px; }
.chapter-sort-note strong { color: var(--text); font-size: 10px; }
.chapter-sort-note small { font-size: 10px; }
.chapter-row.is-sorting { animation: chapterSortSettle .34s cubic-bezier(.2,.8,.2,1); }
@keyframes chapterSortSettle { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.question-image-field input[type="file"] { padding: 8px; }
.question-image-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.question-image-preview[hidden] { display: none; }
.question-image-preview img { display: block; width: min(100%, 360px); max-height: 220px; border-radius: 10px; object-fit: contain; background: var(--surface-solid); }
.question-card-image { display: block; width: min(100%, 520px); max-height: 300px; margin: 12px 0; border: 1px solid var(--border); border-radius: 14px; object-fit: contain; background: var(--surface-soft); }
.quiz-question-image { display: block; width: min(100%, 640px); max-height: 360px; margin: 0 auto 18px; border-radius: 16px; object-fit: contain; background: var(--surface-soft); }

.student-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.badge.online { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.badge.offline { color: var(--muted); background: var(--surface-soft); }
.badge.online::before, .badge.offline::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; content: ""; }
.badge.online::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }

.lecture-register-card { margin-top: 13px; overflow-x: auto; }
.lecture-register { min-width: 820px; }
.lecture-register-row { display: grid; grid-template-columns: 88px 120px minmax(180px, .9fr) minmax(300px, 1.6fr); align-items: start; gap: 14px; padding: 13px 8px; border-top: 1px solid var(--border); font-size: 10px; }
.lecture-register-row:first-child { border-top: 0; }
.lecture-register-row.lecture-register-head { min-height: 34px; color: var(--muted); font-size: 10px; font-weight: 800; }
.lecture-register-row strong { display: block; }
.lecture-register-row small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.lecture-attendee-list { display: flex; flex-wrap: wrap; gap: 5px; }
.lecture-attendee-list span { padding: 4px 7px; border-radius: 999px; color: var(--text); background: var(--surface-soft); font-size: 10px; }
.lecture-test-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-weight: 800; }

.assessment-tools { grid-template-columns: minmax(180px, 1fr) 145px 140px 145px; }
.assessment-mode { display: inline-flex; margin-top: 5px; padding: 3px 6px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; }

/* Assessment history: keep long Georgian labels readable instead of squeezing them into 100px pills. */
.assessment-ledger-card .assessment-table { min-width: 900px; }
.assessment-ledger-card .assessment-row {
  grid-template-columns: minmax(210px,1.45fr) minmax(165px,1.05fr) minmax(145px,.9fr) minmax(135px,.82fr) 72px;
  gap: 16px; min-height: 72px; padding: 12px 10px; align-items: center;
}
.assessment-ledger-card .assessment-header { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
.assessment-ledger-card .assessment-student-cell,
.assessment-ledger-card .assessment-lecture-cell,
.assessment-ledger-card .assessment-phase-cell,
.assessment-ledger-card .assessment-status-cell { min-width: 0; }
.assessment-ledger-card .assessment-student-cell .file-cell,
.assessment-ledger-card .assessment-lecture-cell,
.assessment-ledger-card .assessment-phase-cell,
.assessment-ledger-card .assessment-status-cell { line-height: 1.35; }
.assessment-ledger-card .assessment-lecture-cell strong,
.assessment-ledger-card .assessment-phase-cell > strong { display: block; font-size: 11px; font-weight: 850; color: var(--text); }
.assessment-ledger-card .assessment-phase-cell .assessment-mode {
  display: inline-flex; max-width: 100%; margin-top: 5px; padding: 3px 7px;
  white-space: normal; line-height: 1.3; overflow-wrap: anywhere;
}
.assessment-ledger-card .assessment-status-cell { display: grid; justify-items: start; gap: 5px; }
.assessment-ledger-card .assessment-status-cell .badge {
  display: inline-flex; width: auto; max-width: 100%; margin: 0; padding: 5px 9px;
  white-space: nowrap; line-height: 1.2;
}
.assessment-ledger-card .assessment-status-cell small { margin: 0; }
.assessment-ledger-card .assessment-score { justify-self: end; white-space: nowrap; font-size: 16px; }
@media (max-width: 980px) {
  .assessment-ledger-card .assessment-table { min-width: 840px; }
  .assessment-ledger-card .assessment-row { grid-template-columns: 190px 155px 135px 125px 68px; gap: 12px; }
}
.assessment-mode.lecture { color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, transparent); }
.activity-grade-modal { width: min(calc(100% - 24px), 520px); }

.student-voice-card p { margin: 8px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.student-voice-button { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--blue)); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.student-voice-button .mic-icon { transform: scale(.7); }
.student-voice-button.is-listening { animation: studentVoicePulse 1.2s ease-in-out infinite; }
@keyframes studentVoicePulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 13%, transparent); transform: scale(1.01); } }
.student-voice-transcript, .student-voice-reply { margin-top: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 10px; line-height: 1.5; }
.student-voice-reply:empty { display: none; }

.qr-window-page { display: grid; min-height: 100vh; margin: 0; padding: 28px; overflow: auto; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36rem), var(--bg); }
.qr-window-shell { display: grid; min-height: 100vh; padding: 28px; place-items: center; }
.qr-window-card { width: min(100%, 520px); padding: 28px; border: 1px solid var(--border); border-radius: 28px; text-align: center; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.qr-window-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--text); font-size: 17px; font-weight: 900; }
.qr-window-card h1 { margin: 8px 0; font-size: 28px; }
.qr-window-head { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.qr-window-head small { color: var(--muted); font-weight: 800; }
.qr-window-head h1 { margin: 2px 0 0; font-size: 24px; }
.qr-window-code { display: grid; width: min(340px, 80vw); min-height: 340px; margin: 18px auto; padding: 16px; border-radius: 24px; place-items: center; color: var(--muted); background: #fff; box-shadow: 0 22px 70px rgba(67,75,255,.14); transition: opacity .26s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.qr-window-code svg { display: block; width: 100%; height: auto; }
.qr-window-code.is-switching { opacity: .28; transform: scale(.985); }
.qr-window-code.is-settling { animation: qrWindowSettle .52s cubic-bezier(.2,.8,.2,1); }
@keyframes qrWindowSettle { from { opacity: .42; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.qr-window-card .qr-timer { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.qr-window-card .qr-timer i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: transform .25s linear; }
.qr-window-card > strong, .qr-window-card > small { display: block; margin-top: 10px; }
.qr-window-card > small, .qr-join-url, .qr-window-card footer span { color: var(--muted); }
.qr-join-url { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.qr-window-card footer { display: grid; gap: 4px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.qr-window-card > p { margin: 0 0 12px; color: var(--muted); }
.qr-window-card .qr-frame::after, .qr-window-card .qr-frame::before { display: none; }
.qr-window-card .qr-frame { width: min(340px, 86vw); margin-block: 18px; box-shadow: 0 22px 70px rgba(67,75,255,.14); }
.qr-window-card .qr-frame > * { transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1); }
.qr-window-card .qr-frame.is-refreshing > * { opacity: .15; transform: scale(.985); }
.qr-window-attendance { margin-top: 14px; color: var(--text); font-size: 12px; font-weight: 800; }

@media (max-width: 900px) {
  .assessment-tools { grid-template-columns: 1fr 1fr; }
  .assessment-tools .search-box { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .student-summary-grid { grid-template-columns: 1fr; }
  .question-image-preview { grid-template-columns: 1fr; }
  .question-image-preview .button { width: 100%; }
  .qr-window-shell { padding: 12px; }
  .qr-window-card { padding: 22px 15px; border-radius: 22px; }
}

/* Mobile interface ergonomics: phone-sized layouts should stay inside the
   viewport, remain readable without zooming, and respect device safe areas. */
@media (max-width: 620px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-page { overscroll-behavior: none; }
  .app-shell,
  .main-surface {
    height: 100dvh;
    min-height: 100svh;
    max-width: 100%;
  }
  .view-section {
    width: 100%;
    height: calc(100dvh - var(--topbar-height));
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }

  .sidebar {
    top: 0;
    bottom: auto;
    width: min(310px, 86vw);
    height: 100dvh;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-right: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    overflow-y: auto;
  }
  .sidebar-head { min-height: 52px; }
  .sidebar-close,
  .mobile-menu,
  .notification-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .nav-item { min-height: 46px; font-size: 14px; }
  .nav-count { min-width: 26px; height: 22px; font-size: 10px; }
  .sidebar-section-label { font-size: 10px; }
  .history-list button { min-height: 42px; font-size: 12px; }
  .user-card { padding-top: 12px; }
  .user-card-copy strong { font-size: 12px; }
  .user-card-copy small { font-size: 10px; }
  .user-card .icon-button { width: 42px; height: 42px; }

  .topbar {
    min-width: 0;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .topbar-left,
  .topbar-left > div,
  .topbar-actions { min-width: 0; }
  .topbar-left { gap: 9px; }
  .topbar-left h1 {
    overflow: hidden;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-kicker { font-size: 10px; }

  .chat-hero {
    min-height: calc(100dvh - var(--topbar-height) - 138px);
    padding: 5vh 12px 24px;
  }
  .chat-hero .assistant-orb { --orb-size: 118px; margin-bottom: 12px; }
  .chat-hero h2 { max-width: 340px; font-size: clamp(23px, 7vw, 28px); line-height: 1.25; }
  .chat-hero > p { margin-bottom: 22px; padding: 0 8px; font-size: 12px; line-height: 1.6; }
  .greeting-time { font-size: 11px; }
  .quick-actions {
    display: grid;
    width: 100%;
    max-width: 430px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .quick-actions button {
    min-width: 0;
    min-height: 72px;
    padding: 11px;
    scroll-snap-align: none;
  }
  .quick-actions strong { font-size: 12px; white-space: normal; }
  .quick-actions small { font-size: 10px; line-height: 1.4; white-space: normal; }

  .message-list { width: calc(100% - 22px); padding-bottom: 22px; }
  .message-content > p { font-size: 14px; line-height: 1.65; }
  .chat-message.user .message-content { max-width: 88%; }
  .message-meta { font-size: 10px; }
  .composer-wrap {
    padding-top: 7px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .composer { min-width: 0; gap: 5px; padding: 7px; }
  .composer textarea,
  .auth-chat-composer textarea,
  .app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .app-page select,
  dialog.modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  dialog.modal select,
  dialog.modal textarea {
    font-size: 16px;
  }
  .composer-icon,
  .send-button { width: 44px; height: 44px; }
  .voice-interim { min-height: 15px; font-size: 11px; }

  .content-page {
    width: calc(100% - 24px);
    max-width: 100%;
    padding: 22px 0 max(44px, env(safe-area-inset-bottom));
  }
  .content-page,
  .section-heading,
  .heading-actions,
  .table-card,
  .chart-card,
  .chapter-editor,
  .settings-card,
  .question-card,
  .student-stat-card { min-width: 0; }
  .section-heading { gap: 14px; margin-bottom: 19px; }
  .section-heading h2 { font-size: clamp(24px, 7.5vw, 30px); line-height: 1.2; }
  .section-heading p { font-size: 12px; line-height: 1.6; }
  .eyebrow { font-size: 10px; }

  .heading-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .heading-actions > .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 7px 10px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }
  .heading-actions > .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .section-heading-actions { gap: 8px; }
  .button { min-height: 46px; padding-inline: 13px; font-size: 13px; }
  .button.compact { min-height: 42px; font-size: 12px; }

  .table-card,
  .chart-card,
  .chapter-editor,
  .settings-card { padding: 15px; border-radius: 16px; }
  .card-head { align-items: flex-start; }
  .card-head h3 { font-size: 15px; line-height: 1.35; }
  .card-note { font-size: 11px; line-height: 1.55; }
  .data-row { gap: 9px; min-height: 64px; font-size: 12px; }
  .file-cell small,
  .data-row > span { font-size: 10px; }
  .badge { font-size: 10px; }
  .lecture-stats span,
  .stat-grid span,
  .student-stat-card > span { font-size: 11px; }
  .lecture-stats small,
  .stat-grid small,
  .student-stat-card > small { font-size: 10px; line-height: 1.5; }

  .question-toolbar { padding: 12px; }
  .question-toolbar label,
  .question-toolbar p,
  .question-chapter-control label { font-size: 11px; }
  .question-chapter-identity strong { font-size: 13px; }
  .question-chapter-identity small { font-size: 10px; }
  .question-chapter-control { padding: 12px; }
  .question-card { padding: 15px; }
  .question-card h3 { min-height: 0; font-size: 14px; line-height: 1.55; }
  .question-number { font-size: 11px; }
  .answer-options span { min-height: 40px; font-size: 12px; line-height: 1.45; }
  .question-edit-button,
  .question-delete-button { min-height: 36px; font-size: 11px; }
  .filter-chip { height: 42px; font-size: 12px; }
  .filter-chip b { font-size: 10px; }
  .search-box { height: 46px; }
  .search-box input { font-size: 16px; }
  .student-class-picker,
  .student-class-head .card-note { font-size: 11px; }
  .students-table .file-cell strong { overflow-wrap: anywhere; white-space: normal; }

  .assessment-view-tabs { gap: 3px; }
  .assessment-view-tabs button { min-width: 0; min-height: 42px; padding-inline: 5px; font-size: 11px; line-height: 1.25; }
  .assessment-roster-scroll,
  .assessment-scheme-columns,
  .trend-metric-tabs,
  .presentation-toolbar .live-control-actions { -webkit-overflow-scrolling: touch; }

  .generator-chapter-row strong,
  .quiz-times-head strong { font-size: 12px; }
  .generator-chapter-row small,
  .quiz-times-head small,
  .quiz-question-time-row small { font-size: 10px; }
  .generator-chapter-row label,
  .quiz-question-time-row label { font-size: 11px !important; }
  .generator-count-control .button { font-size: 11px; }
  .generator-total,
  .quiz-send-summary { font-size: 11px; }

  .toggle-row strong { font-size: 12px; }
  .toggle-row small,
  .assistant-voice-setting small { font-size: 10px; line-height: 1.5; }
  .toggle-row i { width: 44px; height: 26px; }
  .toggle-row i::after { width: 20px; height: 20px; }
  .toggle-row input:checked + i::after { transform: translateX(18px); }

  dialog.modal {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
    padding: 24px 16px max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 20px;
  }
  .modal-close { width: 44px; height: 44px; }
  .modal h2 { padding-inline: 24px; font-size: 21px; line-height: 1.3; }
  .modal > p,
  .modal-copy { font-size: 12px; }
  .settings-card > label:not(.toggle-row),
  .form-modal label { font-size: 12px; }

  .student-main { width: calc(100% - 24px); padding: 22px 0 max(40px, env(safe-area-inset-bottom)); }
  .student-grid { gap: 12px; }
  .student-quiz-area { min-height: 0; }
  .waiting-card { min-height: min(430px, calc(100dvh - 150px)); padding: 24px 18px; }
  .waiting-card h3 { font-size: 18px; }
  .waiting-card p { font-size: 12px; line-height: 1.7; }
  .student-aside { gap: 12px; }
  .score-row { min-height: 44px; align-items: center; font-size: 12px; }
  .score-row span small { font-size: 10px; }
  .student-voice-card p { font-size: 12px; }
  .student-voice-button { min-height: 50px; font-size: 13px; }
  .student-voice-transcript,
  .student-voice-reply { font-size: 12px; }
  .quiz-card-header h3 { font-size: 15px; }
  .quiz-step { font-size: 11px; }
  .quiz-question { font-size: 16px; }
  .quiz-option { min-height: 54px; }
  .quiz-option span:last-child { font-size: 13px; line-height: 1.45; }

  .toast-region {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right)));
  }
  .toast { min-height: 52px; font-size: 12px; }

  .auth-chat-page,
  .auth-chat-main { min-height: 100dvh; }
  .auth-chat-topbar {
    padding-top: max(11px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .auth-chat-main { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .auth-chat-composer { width: 100%; }
  .auth-access-dialog { max-height: calc(100dvh - 16px); }

  .qr-window-page,
  .qr-window-shell { min-height: 100dvh; }
  .qr-window-card h1,
  .qr-window-head h1 { font-size: 22px; line-height: 1.3; }
  .qr-window-code { width: min(300px, 78vw); min-height: 0; aspect-ratio: 1; }
  .qr-join-url { font-size: 10px; }
}

/* Phone layout for the live lecture workspace. The outer controls stay fully
   visible without horizontal scrolling, while the reader keeps the remaining
   viewport height for the actual slide. */
@media (max-width: 620px) {
  .app-page[data-active-view="live"] { --topbar-height: 60px; }
  .app-page[data-active-view="live"] .topbar {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }
  .app-page[data-active-view="live"] .topbar-kicker { display: none; }
  .app-page[data-active-view="live"] .topbar-left h1 { font-size: 17px; }

  .view-section[data-view-section="live"] { overscroll-behavior: none; }
  .view-section[data-view-section="live"] .content-page.live-layout {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .presentation-toolbar.live-control-bar {
    gap: 7px;
    padding: 7px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }
  .live-deck-identity {
    width: 100%;
    min-height: 31px;
    gap: 8px;
  }
  .live-deck-identity .status-dot { flex: 0 0 7px; }
  .live-deck-identity small { font-size: 10px; line-height: 1.1; }
  .live-deck-identity strong {
    max-width: calc(100vw - 50px);
    font-size: 12px;
    line-height: 1.25;
  }
  .presentation-toolbar .live-control-actions {
    display: grid;
    width: 100%;
    overflow: visible;
    grid-template-columns: 44px minmax(48px, auto) 44px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "previous counter next qr quiz"
      "handover handover handover toggle toggle";
    gap: 6px;
    padding: 0;
  }
  .live-control-actions > * { min-width: 0; }
  #presentationPrev { grid-area: previous; }
  #presentationCounter { grid-area: counter; }
  #presentationNext { grid-area: next; }
  #showQrButton { grid-area: qr; }
  #sendQuizButton { grid-area: quiz; }
  #handoverButton { grid-area: handover; }
  #toggleLectureButton { grid-area: toggle; }
  .live-control-bar .icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
  .live-control-bar .presentation-counter {
    display: grid;
    min-width: 48px;
    min-height: 44px;
    padding: 0 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    place-items: center;
    background: rgba(255,255,255,.05);
    font-size: 10px;
  }
  html[data-theme="light"] .live-control-bar .presentation-counter {
    border-color: var(--border);
    background: var(--surface-soft);
  }
  .presentation-toolbar.live-control-bar .button {
    width: 100%;
    min-height: 44px;
    padding: 6px 7px;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }
  .live-presentation-shell iframe { min-height: 220px; }
}

@media (max-width: 380px) {
  .presentation-toolbar .live-control-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "previous counter next"
      "qr quiz quiz"
      "handover handover handover"
      "toggle toggle toggle";
  }
  .live-control-bar .icon-button { width: 100%; }
}

@media (max-width: 360px) {
  .topbar-left h1 { font-size: 16px; }
  .quick-actions,
  .heading-actions { grid-template-columns: 1fr; }
  .heading-actions > .button { grid-column: 1; }
  .lecture-stats,
  .stat-grid,
  .compact-grid { grid-template-columns: 1fr; }
  .composer { gap: 2px; padding-inline: 5px; }
  .composer-icon,
  .send-button { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Responsive hardening — 2026-08-12.
   Layout-only safeguards for current phones/tablets, including iPhone safe
   areas and short landscape viewports. Application behavior is unchanged. */
img,
video { max-width: 100%; }

@media (max-width: 820px) {
  .app-shell,
  .main-surface {
    height: 100dvh;
    min-height: 100svh;
  }
  .view-section { height: calc(100dvh - var(--topbar-height)); }
  .sidebar {
    height: 100dvh;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .topbar {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  dialog.modal,
  .auth-access-dialog { max-height: calc(100dvh - 16px); }
}

/* iOS zooms form controls whose text is below 16px. Keep form entry stable
   on touch devices, including landscape phones wider than the phone breakpoint. */
@media (hover: none) and (pointer: coarse) and (max-width: 950px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }
  button,
  [role="button"],
  a { touch-action: manipulation; }
}

/* Modern iPhones can be 844–932 CSS px wide in landscape. Width-only phone
   breakpoints would otherwise leave the desktop sidebar and cramped content. */
@media (max-height: 560px) and (max-width: 950px) {
  :root { --topbar-height: 60px; }
  .app-page { overflow: hidden; }
  .app-shell { display: block; height: 100dvh; min-height: 100svh; }
  .main-surface { height: 100dvh; min-height: 100svh; }
  .view-section {
    width: 100%;
    height: calc(100dvh - var(--topbar-height));
    overflow-x: hidden;
  }
  .sidebar {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: auto;
    left: 0;
    width: min(290px, 72vw);
    height: 100dvh;
    overflow-y: auto;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    transform: translateX(-105%);
    box-shadow: var(--shadow);
    transition: transform .25s ease;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close,
  .mobile-menu { display: grid; }
  .sidebar-scrim {
    position: fixed;
    z-index: 35;
    inset: 0;
    background: rgba(5, 7, 14, .48);
    backdrop-filter: blur(4px);
  }
  body.sidebar-open .sidebar-scrim { display: block; }
  .topbar {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .topbar-kicker { display: none; }
  .topbar-left h1 { font-size: 17px; }
  .content-page,
  .student-main { padding-top: 16px; }
  .composer-wrap {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .auth-chat-page { overflow-x: hidden; overflow-y: auto; }
  .auth-chat-main {
    min-height: max(100dvh, 410px);
    padding: 68px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
  }
  .auth-chat-topbar {
    min-height: 58px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .auth-landing-orb { margin-bottom: 5px; }
  .lumen-wordmark-landing { width: 205px; margin-bottom: 10px; }
  .auth-chat-composer { min-height: 60px; padding-block: 8px; }
  .auth-chat-composer textarea { min-height: 42px; padding-top: 9px; }
  .auth-access-dialog {
    max-height: calc(100dvh - 12px);
    padding: 18px 20px max(16px, env(safe-area-inset-bottom));
  }
  .auth-access-dialog .auth-panel-heading { margin-bottom: 15px; }
  .auth-access-dialog .auth-panel-heading h2 { font-size: 23px; }
}

@media (max-width: 380px) {
  .auth-chat-main { padding-right: 10px; padding-left: 10px; }
  .lumen-wordmark-landing { width: 196px; max-width: calc(100vw - 30px); }
  .lumen-wordmark-auth { width: 92px; }
  .auth-chat-composer { gap: 3px; padding-inline: 7px; }
  .auth-composer-icon,
  .auth-composer-send { width: 40px; height: 40px; }
}

/* Voice diagnostics — compact, responsive and read-only. */
.voice-diagnostics {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.voice-diagnostics > div {
  display: grid;
  grid-template-columns: minmax(86px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  font-size: 10px;
  line-height: 1.4;
}
.voice-diagnostics span { color: var(--muted); }
.voice-diagnostics strong { min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--text); }
.voice-diagnostics-error strong { color: var(--muted); font-weight: 600; }
@media (max-width: 560px) {
  .voice-diagnostics > div { grid-template-columns: 1fr; gap: 2px; font-size: 10px; }
}


/* Unified Lumen composer + full voice conversation mode (lecturer + student). */
.composer-dictation-toggle.is-listening,
.composer-dictation-toggle.is-active {
  color: var(--icon-on-strong);
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 18%, transparent);
}
.composer-dictation-toggle.is-listening .mic-icon,
.composer-dictation-toggle.is-active .mic-icon,
.composer-dictation-toggle.is-finalizing .mic-icon {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 3px;
  background: currentColor;
  transform: none;
}
.composer-dictation-toggle.is-listening .mic-icon::before,
.composer-dictation-toggle.is-listening .mic-icon::after,
.composer-dictation-toggle.is-active .mic-icon::before,
.composer-dictation-toggle.is-active .mic-icon::after,
.composer-dictation-toggle.is-finalizing .mic-icon::before,
.composer-dictation-toggle.is-finalizing .mic-icon::after { display: none; }
.composer-dictation-toggle.is-finalizing {
  color: var(--icon-on-strong);
  background: var(--text);
  box-shadow: none;
  cursor: wait;
}
.live-voice-button {
  display: grid;
  place-items: center;
  color: var(--icon-on-strong);
  background: var(--text);
}
.live-voice-button:hover { color: var(--icon-on-strong); background: color-mix(in srgb, var(--text) 88%, var(--bg)); }
.voice-wave-icon { display: flex; align-items: center; justify-content: center; gap: 2px; width: 19px; height: 19px; }
.voice-wave-icon i { display: block; width: 2px; border-radius: 999px; background: currentColor; }
.voice-wave-icon i:nth-child(1) { height: 7px; }
.voice-wave-icon i:nth-child(2) { height: 14px; }
.voice-wave-icon i:nth-child(3) { height: 10px; }
.voice-wave-icon i:nth-child(4) { height: 5px; }
.live-voice-button:hover .voice-wave-icon i { animation: lumenVoiceBars .8s ease-in-out infinite alternate; }
.live-voice-button:hover .voice-wave-icon i:nth-child(2) { animation-delay: .12s; }
.live-voice-button:hover .voice-wave-icon i:nth-child(3) { animation-delay: .24s; }
.live-voice-button:hover .voice-wave-icon i:nth-child(4) { animation-delay: .36s; }
@keyframes lumenVoiceBars { to { transform: scaleY(.48); } }

.lumen-voice-overlay[hidden] { display: none !important; }
.lumen-voice-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
html[data-theme="dark"] .lumen-voice-overlay { background: #05070c; }
body.lumen-live-voice-open { overflow: hidden; }
.lumen-voice-stage { display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.lumen-voice-orb { --orb-size: clamp(180px, 34vw, 360px); margin: 0; }
.lumen-voice-orb.is-listening { filter: saturate(1.08); }
.lumen-voice-orb.is-muted { opacity: .6; filter: grayscale(.15); }
.lumen-voice-controls {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
}
.lumen-voice-control {
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  place-items: center;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  cursor: pointer;
}
.lumen-voice-control:hover { background: var(--surface-hover); }
.lumen-voice-control[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
.lumen-voice-exit { color: #fff; background: var(--red); border-color: var(--red); font-size: 30px; font-weight: 300; line-height: 1; }
.lumen-voice-exit:hover { background: color-mix(in srgb, var(--red) 86%, #000); }
@media (max-width: 820px) {
  .lumen-composer, .tutor-composer { grid-template-columns: auto minmax(0,1fr) auto auto auto; }
  .lumen-voice-orb { --orb-size: clamp(170px, 62vw, 300px); }
  .lumen-voice-controls { right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .lumen-voice-control { width: 52px; height: 52px; }
}
@media (max-width: 390px) {
  .lumen-composer, .tutor-composer { gap: 3px; padding-left: 6px; }
  .lumen-composer .composer-icon, .lumen-composer .send-button,
  .tutor-composer .composer-icon, .tutor-composer .send-button { width: 40px; height: 40px; }
}

/* v19 — ChatGPT-style dictation confirmation + hands-free live voice. */
.lumen-composer.is-dictating,
.tutor-composer.is-dictating {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.dictation-action[hidden] { display: none !important; }
.dictation-action {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
}
.dictation-cancel {
  color: var(--text);
  background: var(--surface-hover);
}
.dictation-cancel:hover { background: color-mix(in srgb, var(--surface-hover) 72%, var(--text) 8%); }
.dictation-accept {
  color: var(--icon-on-strong);
  background: var(--text);
  border-color: var(--text);
}
.dictation-accept:hover { background: color-mix(in srgb, var(--text) 88%, var(--bg)); }
.dictation-action:disabled { opacity: .55; cursor: wait; }
.dictation-accept.is-finalizing { animation: dictationAcceptPulse .85s ease-in-out infinite alternate; }
@keyframes dictationAcceptPulse { to { transform: scale(.92); opacity: .68; } }

/* In live conversation the microphone is already ON. The slash is therefore
   the action affordance: tap it to mute. Once muted, the slash disappears and
   the same button becomes the unmute control. */
.lumen-voice-mic { position: relative; }
.lumen-voice-mic.is-live-active::after {
  position: absolute;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: rotate(-45deg);
  pointer-events: none;
}

@media (max-width: 390px) {
  .lumen-composer.is-dictating,
  .tutor-composer.is-dictating { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .dictation-action { width: 40px; height: 40px; }
}

/* v21 — Student background brand mark removed; voice uses the canonical landing orb. */
.tutor-orb-backdrop { display: none !important; }
.waiting-card-text-only { min-height: 300px; }
.lumen-voice-orb {
  --orb-size: 220px;
  margin: 0;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.lumen-voice-orb.is-listening { transform: scale(1.025); filter: saturate(1.08); }
.lumen-voice-orb.is-hearing { transform: scale(1.055); filter: saturate(1.14); }
.lumen-voice-orb.is-speaking { transform: scale(1.04); filter: saturate(1.12) brightness(1.02); }
@media (max-width: 820px) { .lumen-voice-orb { --orb-size: 190px; } }

/* v22 Gemini 3.1 Live pilot: native audio-to-audio state feedback. */
.lumen-voice-orb.is-listening { filter: saturate(1.08) brightness(1.02); }
.lumen-voice-orb.is-speaking { transform: scale(1.045); transition: transform 160ms ease; }
.lumen-voice-orb.is-muted { opacity: .72; filter: grayscale(.15); }

/* v24 — lecturer knowledge base. */
.knowledge-heading { align-items: flex-start; gap: 22px; }
.knowledge-heading p { max-width: 760px; margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.knowledge-upload-status {
  display: flex; align-items: center; gap: 13px; margin: 18px 0;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-solid); box-shadow: var(--shadow-soft);
}
.knowledge-upload-status[hidden] { display: none !important; }
.knowledge-upload-status div { display: grid; gap: 2px; }
.knowledge-upload-status small { color: var(--muted); }
.knowledge-summary-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0;
}
.knowledge-summary-strip article {
  display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface-solid);
}
.knowledge-summary-strip span { color: var(--muted); font-size: 12px; }
.knowledge-summary-strip strong { font-size: 19px; }
.knowledge-list { display: grid; gap: 10px; }
.knowledge-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px;
  padding: 14px 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.knowledge-item:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.knowledge-source-icon {
  display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px;
  color: var(--accent-strong); background: var(--accent-soft); font-weight: 800;
}
.knowledge-source-icon.video, .knowledge-source-icon.youtube { color: #d54b5b; background: color-mix(in srgb, #ff6275 12%, var(--surface-soft)); }
.knowledge-item-copy { min-width: 0; display: grid; gap: 4px; }
.knowledge-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-item-copy small { color: var(--muted); line-height: 1.45; }
.knowledge-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.knowledge-status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 11%, transparent);
}
.knowledge-status.limited { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.knowledge-delete { color: var(--red); }
.knowledge-empty {
  display: grid; min-height: 260px; margin-top: 10px; padding: 34px; place-items: center; align-content: center;
  text-align: center; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--muted);
}
.knowledge-empty[hidden] { display: none !important; }
.knowledge-empty h3 { margin: 10px 0 4px; color: var(--text); }
.knowledge-empty p { max-width: 540px; margin: 0; }
.knowledge-empty-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: var(--accent); background: var(--accent-soft); font-size: 24px; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 820px) {
  .knowledge-heading { display: grid; }
  .knowledge-heading .heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .knowledge-summary-strip { grid-template-columns: 1fr; }
  .knowledge-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
}
@media (max-width: 520px) {
  .knowledge-heading .heading-actions { grid-template-columns: 1fr; }
  .knowledge-item { grid-template-columns: 40px minmax(0,1fr); }
  .knowledge-item > .icon-button { grid-column: 2; justify-self: end; }
}

/* v26 — compact icon-only chat-history controls.
   Desktop lecturer history mirrors the student tutor layout: opening history
   reserves a left column and pushes the chat to the right instead of covering it. */
.chat-history-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.chat-history-toggle[hidden] { display: none !important; }
.student-page .topbar-actions .chat-history-toggle { min-width: 36px; }

.chat-view { position: relative; }
body:not(.student-page) .chat-view.is-active {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  transition: grid-template-columns .22s ease;
}
body:not(.student-page).lecturer-history-open .chat-view.is-active {
  grid-template-columns: 264px minmax(0, 1fr);
}
.lecturer-chat-history {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 97%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
body.lecturer-history-open .lecturer-chat-history {
  opacity: 1;
  pointer-events: auto;
}
body:not(.student-page) .chat-view > .chat-scroll {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}
body:not(.student-page) .chat-view > .composer-wrap {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.lecturer-chat-history-head { padding: 14px 12px 10px; }
.lecturer-new-chat-button { width: 100%; justify-content: center; }
.lecturer-chat-history-list { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: max-content; gap: 2px; padding: 0 8px 14px; overflow-y: auto; }
.lecturer-chat-history-scrim { display: none; }

/* Knowledge base: the topbar already says ცოდნის ბაზა, so the content begins
   with a compact context line instead of a second large duplicate title. */
.knowledge-heading {
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.knowledge-heading-copy { min-width: 0; }
.knowledge-heading-copy .eyebrow { font-size: 10px; }
.knowledge-heading p {
  max-width: 680px;
  margin: 5px 0 0;
  line-height: 1.5;
  font-size: 10px;
}
.knowledge-heading .heading-actions { gap: 8px; }
.knowledge-heading .heading-actions .button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
 
}
.knowledge-upload-status {
  min-height: 50px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
}
.knowledge-upload-status .presentation-upload-spinner { width: 25px; height: 25px; }
.knowledge-summary-strip {
  gap: 8px;
  margin-bottom: 12px;
}
.knowledge-summary-strip article {
  min-height: 62px;
  padding: 10px 13px;
  border-radius: 12px;
}
.knowledge-summary-strip span { font-size: 10px; }
.knowledge-summary-strip strong { margin-top: 3px; font-size: 16px; }
.knowledge-list { gap: 7px; }
.knowledge-item {
  min-height: 62px;
  padding: 9px 11px;
  border-radius: 12px;
  gap: 10px;
}
.knowledge-source-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.knowledge-item-copy { gap: 2px; }
.knowledge-item-copy strong { font-size: 10px; }
.knowledge-item-copy small { font-size: 10px; line-height: 1.35; }
.knowledge-item-meta { gap: 5px; }
.knowledge-status { padding: 3px 7px; font-size: 10px; }
.knowledge-empty { min-height: 190px; padding: 22px; }
.knowledge-empty-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
.knowledge-empty h3 { margin-top: 8px; font-size: 14px; }
.knowledge-empty p { font-size: 10px; }

@media (max-width: 980px) {
  .knowledge-heading { align-items: stretch; display: grid; }
  .knowledge-heading .heading-actions { width: auto; display: flex; flex-wrap: wrap; }
}

@media (max-width: 820px) {
  body:not(.student-page) .chat-view.is-active {
    display: flex;
    flex-direction: column;
  }
  .lecturer-chat-history {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    width: min(300px, 88vw);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-105%);
    box-shadow: var(--shadow);
    transition: transform .22s ease;
  }
  body.lecturer-history-open .lecturer-chat-history { transform: translateX(0); }
  .lecturer-chat-history-scrim {
    position: fixed;
    z-index: 54;
    inset: 0;
    background: rgba(5, 7, 14, .48);
    backdrop-filter: blur(4px);
  }
  body.lecturer-history-open .lecturer-chat-history-scrim { display: block; }
}

@media (max-width: 560px) {
  .knowledge-heading .heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .knowledge-heading .heading-actions .button { width: 100%; padding-inline: 8px; }
  .knowledge-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .knowledge-summary-strip article { min-height: 56px; padding: 8px; }
  .knowledge-summary-strip span { font-size: 10px; }
  .knowledge-summary-strip strong { font-size: 13px; }
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 48px;
  --radius-control: 12px; --radius-card: 18px; --radius-modal: 22px;
  --card-padding: 20px; --toolbar-gap: 10px; --sidebar-size: 264px; --icon-size: 20px;
}
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-4);padding:var(--space-6)}
.course-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border:1px solid var(--border,#dde2ed);border-radius:var(--radius-card);background:var(--surface,#fff)}
.course-card.is-active{border-color:#5169ff;box-shadow:0 0 0 3px rgba(81,105,255,.12)}
.course-card h3{margin:4px 0 8px}.course-card p{margin:0;color:var(--text-muted,#667085)}
.course-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:auto 0 0}.course-card dl div{padding:10px;border-radius:10px;background:var(--surface-subtle,#f5f7fb)}.course-card dt{font-size:11px;color:var(--text-muted,#667085)}.course-card dd{margin:4px 0 0;font-weight:700}
.course-class-list{display:flex;flex-wrap:wrap;gap:6px}.course-class-list span{padding:5px 9px;border-radius:999px;background:var(--surface-subtle,#f5f7fb);font-size:12px}.course-class-list small{color:var(--text-muted,#667085)}
@media(max-width:430px){.course-grid{padding:12px}.course-card{padding:16px}.course-card dl{grid-template-columns:1fr}.section-heading{align-items:flex-start}}
.lumen-voice-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2)}
.lumen-thinking-label{min-height:22px;margin:0;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em;text-align:center;animation:lumen-label-in .24s ease-out both}
.lumen-thinking-label[hidden]{display:none!important}
.assistant-orb.is-thinking canvas{animation:lumen-thinking 2.8s cubic-bezier(.45,0,.3,1) infinite;filter:saturate(.88) brightness(1.04)}
.assistant-orb.is-thinking::after{content:"";position:absolute;inset:23%;border-radius:48% 52% 50% 50%;box-shadow:0 0 30px rgba(78,105,255,.22);animation:lumen-thought-aura 3.2s ease-in-out infinite;pointer-events:none}
.assistant-orb.is-speaking{transform:scale(1.008);filter:saturate(1.07) brightness(1.01);transition:transform .7s ease,filter .7s ease}
.assistant-orb.is-interrupted{transform:scale(.985);transition:transform .15s ease}
.assistant-orb.is-error canvas{filter:saturate(.38) hue-rotate(145deg);animation:none}
@keyframes lumen-thinking{0%,100%{transform:scale(.965,.99);opacity:.9}50%{transform:scale(.985,1.025);opacity:1}}
@keyframes lumen-thought-aura{0%,100%{transform:scale(.92);opacity:.22}50%{transform:scale(1.07);opacity:.52}}
@keyframes lumen-label-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.assistant-orb.is-thinking canvas,.assistant-orb.is-thinking::after{animation:none}}

/* Shared Lecturer/Student component normalization. */
.app-page .button{min-height:var(--control-h);padding-inline:16px;border-radius:var(--radius-control);gap:var(--space-2);font-size:13px;line-height:1.2;font-weight:700}
.app-page .button.compact{min-height:var(--control-h-sm);padding-inline:12px;border-radius:10px;font-size:12px}
.app-page .button:disabled,.app-page .icon-button:disabled{transform:none!important;opacity:.52;cursor:not-allowed;box-shadow:none}
.app-page .icon-button,.app-page .theme-button{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-control)}
.app-page .toolbar,.app-page .heading-actions,.app-page .topbar-actions{align-items:center;gap:var(--toolbar-gap)}
.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.app-page select{min-height:var(--control-h);border-radius:var(--radius-control);font-size:13px}
.app-page textarea{border-radius:var(--radius-control);font-size:13px}
.app-page .form-modal label,.app-page .settings-card>label:not(.toggle-row){gap:var(--space-2);font-size:12px;line-height:1.35}
.app-page dialog.modal{border-radius:var(--radius-modal)}
.app-page .nav-item{min-height:44px;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;padding-inline:12px;border-radius:var(--radius-control);font-size:13px;line-height:1.2}
.app-page .nav-item>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-page .nav-item>span:first-child{width:var(--icon-size);font-size:var(--icon-size)}
.app-page .lecture-stats article,.app-page .stat-grid article,.app-page .student-stat-card,.app-page .knowledge-summary-strip article,.app-page .course-card{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface-solid);box-shadow:none}
.app-page .lecture-stats article,.app-page .stat-grid article,.app-page .student-stat-card{padding:var(--card-padding)}
.app-page .lecture-stats span,.app-page .stat-grid span,.app-page .student-stat-card>span,.app-page .knowledge-summary-strip span{font-size:11px;line-height:1.35}
.app-page .lecture-stats small,.app-page .stat-grid small,.app-page .student-stat-card>small{font-size:10px;line-height:1.45}
.course-grid{padding:var(--space-5) 0}.course-card{padding:var(--card-padding);background:var(--surface-solid)}
.course-card>div:first-child>small{display:inline-flex;padding:4px 8px;border-radius:999px;color:var(--accent);background:var(--accent-soft);font-size:10px;font-weight:800}
.course-card h3{font-size:17px;line-height:1.35}.course-card p{font-size:12px;line-height:1.6}.course-card dt{font-size:10px}.course-card dd{font-size:17px}
html[data-theme="dark"] .course-card,html[data-theme="dark"] .app-page .knowledge-summary-strip article{background:var(--surface-solid);border-color:var(--border)}
@media(max-width:620px){.app-page .button{min-height:42px;padding-inline:13px}.app-page .nav-item{min-height:46px;font-size:14px}.course-grid{padding:var(--space-3) 0}.course-card dl{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 2026-08-13 — align Courses page vertical rhythm with Students page.
   The shared content-page now supplies the outer margins; avoid an extra
   top pad before the first course card. */
.view-section[data-view-section="courses"] .course-grid {
  padding-top: 0;
}

/* Safe deletion controls (2026-08-13) */
.course-card-actions, .student-class-actions { display:flex; align-items:center; gap:10px; }
.course-card-actions .button { flex:1 1 auto; }
.student-class-actions .student-class-picker { margin:0; }
.students-table .data-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }

/* 2026-08-13 — safe reassignment controls for courses/classes/students/materials. */
.app-page .button.danger-outline {
  color: #dc2626;
  border: 1px solid color-mix(in srgb, #ef4444 34%, var(--border));
  background: color-mix(in srgb, #ef4444 6%, var(--surface-solid));
}
.app-page .button.danger-outline:hover {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
}
.student-class-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 12px;
}
.student-class-actions .student-class-picker { min-width: 240px; }
.student-class-actions .student-class-picker select { min-width: 220px; }
.student-class-actions .course-picker { min-width: 220px; }
.student-management-row {
  grid-template-columns: minmax(260px, 1fr) minmax(330px, auto) auto !important;
  gap: 14px !important;
}
.student-move-control,
.material-course-transfer,
.material-assignment-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.student-move-control select,
.material-course-transfer select,
.material-assignment-control select,
.course-class-transfer select {
  min-width: 180px;
  max-width: 280px;
  height: 36px;
  min-height: 36px !important;
  padding: 0 34px 0 10px;
  border-radius: 10px !important;
  font-size: 11px !important;
}
.material-assignment-control > label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.knowledge-item {
  grid-template-columns: 44px minmax(0, 1fr) minmax(360px, auto);
}
.presentation-table .data-row {
  grid-template-columns: minmax(200px, 1.6fr) 90px 70px 80px minmax(470px, auto);
}
.presentation-table .data-row.is-other-course {
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}
.presentation-actions { flex-wrap: wrap; }
.material-course-transfer { padding-right: 2px; }
.course-class-list {
  display: grid;
  gap: 8px;
}
.course-class-transfer {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(150px, 220px) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}
.course-class-transfer > span {
  display: grid;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.course-class-transfer > span strong { font-size: 11px; }
.course-class-transfer > span small { font-size: 10px; color: var(--muted); }
.course-card-unassigned {
  border-style: dashed;
}
.course-card-unassigned > div:first-child > small {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

@media (max-width: 1180px) {
  .presentation-table .data-row { grid-template-columns: minmax(180px, 1fr) minmax(360px, auto); }
  .presentation-table .data-row > *:nth-child(2),
  .presentation-table .data-row > *:nth-child(3),
  .presentation-table .data-row > *:nth-child(4) { display: none; }
  .student-management-row { grid-template-columns: minmax(200px, 1fr) minmax(300px, auto) auto !important; }
}
@media (max-width: 760px) {
  .student-class-actions { width: 100%; justify-content: stretch; }
  .student-class-actions .student-class-picker,
  .student-class-actions .student-class-picker select,
  .student-class-actions .course-picker { width: 100%; min-width: 0; }
  .student-class-actions .button { width: 100%; }
  .student-management-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  .student-move-control { grid-column: 1 / -1; justify-content: stretch; }
  .student-move-control select { flex: 1 1 auto; max-width: none; }
  .knowledge-item { grid-template-columns: 40px minmax(0, 1fr); }
  .material-assignment-control { grid-column: 1 / -1; justify-content: stretch; flex-wrap: wrap; }
  .material-assignment-control > label { flex: 1 1 200px; }
  .material-assignment-control select { width: 100%; max-width: none; }
  .course-class-transfer { grid-template-columns: 1fr; }
  .course-class-transfer select { width: 100%; max-width: none; }
  .presentation-table .data-row { grid-template-columns: minmax(0, 1fr); }
  .presentation-table .presentation-actions { justify-content: stretch; }
  .material-course-transfer { width: 100%; }
  .material-course-transfer select { flex: 1 1 auto; max-width: none; }
}
@media (max-width: 760px) {
  .students-table .data-row.student-management-row > .student-move-control,
  .students-table .data-row.student-management-row > .presentation-actions { display: flex; }
  .students-table .data-row.student-management-row > .presentation-actions { grid-column: 2; grid-row: 1; }
}


/* Lecturer current lecture: Lumen Presenter Bridge controls.
   Bridge/voice status are overlays, so they never create extra grid rows
   and never push the presentation iframe below the viewport. */
.view-section[data-view-section="live"] .live-presentation-shell {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
}

.view-section[data-view-section="live"] .presenter-powerpoint-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-section[data-view-section="live"] .live-control-owner {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(233,236,247,.82);
  background: rgba(255,255,255,.055);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.view-section[data-view-section="live"] .live-control-owner i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8b91a7;
}
.view-section[data-view-section="live"] .live-control-owner.is-active i,
.view-section[data-view-section="live"] .live-control-owner.is-live i {
  background: var(--green);
}
html[data-theme="light"] .view-section[data-view-section="live"] .live-control-owner {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-soft);
}

.view-section[data-view-section="live"] .lecture-voice-monitor,
.view-section[data-view-section="live"] .presenter-bridge-status {
  position: absolute;
  z-index: 18;
  top: 74px;
  display: flex;
  min-width: 0;
  max-width: min(46%, 560px);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  color: rgba(244,246,252,.92);
  background: rgba(17,20,29,.82);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.view-section[data-view-section="live"] .lecture-voice-monitor { left: 14px; }
.view-section[data-view-section="live"] .presenter-bridge-status { right: 14px; }

.view-section[data-view-section="live"] .lecture-voice-monitor-dot,
.view-section[data-view-section="live"] .presenter-bridge-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8b91a7;
  box-shadow: 0 0 0 3px rgba(139,145,167,.14);
}
.view-section[data-view-section="live"] .lecture-voice-monitor.is-listening .lecture-voice-monitor-dot,
.view-section[data-view-section="live"] .lecture-voice-monitor.is-active .lecture-voice-monitor-dot,
.view-section[data-view-section="live"] .presenter-bridge-status.is-ready .presenter-bridge-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.view-section[data-view-section="live"] .presenter-bridge-status.is-warning .presenter-bridge-dot,
.view-section[data-view-section="live"] .presenter-bridge-status.is-checking .presenter-bridge-dot {
  background: #d6a43a;
}
.view-section[data-view-section="live"] .presenter-bridge-status.is-error .presenter-bridge-dot {
  background: #e45b67;
}

.view-section[data-view-section="live"] .lecture-voice-monitor strong,
.view-section[data-view-section="live"] .presenter-bridge-copy strong {
  font-size: 10px;
  line-height: 1.25;
}
.view-section[data-view-section="live"] .lecture-voice-monitor-transcript,
.view-section[data-view-section="live"] .lecture-voice-monitor small,
.view-section[data-view-section="live"] .presenter-bridge-copy small {
  color: rgba(233,236,247,.68);
  font-size: 10px;
  line-height: 1.3;
}
.view-section[data-view-section="live"] .presenter-bridge-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.view-section[data-view-section="live"] .presenter-bridge-status .button {
  flex: 0 0 auto;
  margin-left: auto;
}

html[data-theme="light"] .view-section[data-view-section="live"] .lecture-voice-monitor,
html[data-theme="light"] .view-section[data-view-section="live"] .presenter-bridge-status {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow: 0 8px 26px rgba(54,59,86,.10);
}
html[data-theme="light"] .view-section[data-view-section="live"] .lecture-voice-monitor-transcript,
html[data-theme="light"] .view-section[data-view-section="live"] .lecture-voice-monitor small,
html[data-theme="light"] .view-section[data-view-section="live"] .presenter-bridge-copy small {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .view-section[data-view-section="live"] .live-control-owner { display: none; }
  .view-section[data-view-section="live"] .lecture-voice-monitor { max-width: 42%; }
  .view-section[data-view-section="live"] .presenter-bridge-status { max-width: 54%; }
}
@media (max-width: 860px) {
  .view-section[data-view-section="live"] .lecture-voice-monitor { display: none; }
  .view-section[data-view-section="live"] .presenter-bridge-status {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

/* Universal AI training slide index --------------------------------------- */
.chapter-editor-actions,
.training-index-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.training-index-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.training-index-head {
  gap: 18px;
}

.training-index-progress {
  margin: 16px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft, rgba(127, 127, 127, 0.06));
}

.training-index-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.training-index-progress small {
  color: var(--muted);
}

.training-slide-list {
  display: grid;
  gap: 12px;
  max-height: min(70vh, 860px);
  overflow: auto;
  padding-right: 3px;
}

.training-slide-row {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(300px, 1fr) minmax(190px, 230px);
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.training-slide-preview {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0a0a0a;
}

.training-slide-preview img,
.training-slide-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 112px;
  border: 0;
  object-fit: contain;
  background: #0a0a0a;
}

.training-slide-preview iframe {
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

.training-slide-preview > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.training-slide-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-content: start;
}

.training-slide-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.training-slide-fields label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.training-slide-fields input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.training-slide-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.training-slide-fields p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.training-enabled-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

.training-enabled-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.training-enabled-toggle span {
  display: grid;
  gap: 3px;
}

.training-enabled-toggle strong {
  font-size: 11px;
}

.training-enabled-toggle small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 1050px) {
  .training-slide-row {
    grid-template-columns: 190px 1fr;
  }
  .training-enabled-toggle {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .training-index-panel {
    padding: 14px;
  }
  .training-slide-row {
    grid-template-columns: 1fr;
  }
  .training-slide-fields {
    grid-template-columns: 1fr;
  }
  .training-slide-fields .training-slide-meta,
  .training-slide-fields p,
  .training-enabled-toggle {
    grid-column: 1;
  }
}

/* AI Lumen 2026-08-17: compact Bridge placement + lecturer-owned training screenshots. */
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  width: auto;
  min-width: 150px;
  max-width: 225px;
  min-height: 38px;
  margin: 0;
  padding: 6px 9px;
  align-items: center;
  gap: 7px;
  border-radius: 11px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255,255,255,.055);
}
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-copy {
  min-width: 0;
  gap: 1px;
}
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-copy strong {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-copy small {
  display: none;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status.is-warning .presenter-bridge-copy small,
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status.is-error .presenter-bridge-copy small,
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status.is-checking .presenter-bridge-copy small {
  display: block;
}
.view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status .button {
  min-height: 30px;
  margin-left: auto;
  padding: 4px 7px;
  font-size: 10px;
}
html[data-theme="light"] .view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status {
  border-color: var(--border);
  background: var(--surface-soft);
  box-shadow: none;
}

.training-slide-control {
  display: grid;
  gap: 8px;
  align-content: center;
  align-self: center;
}
.training-slide-control .training-enabled-toggle {
  width: 100%;
  align-self: auto;
}
.training-preview-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.training-preview-tools .button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.15;
}
.training-preview-upload {
  flex: 1 1 auto;
}
.training-preview-reset {
  flex: 0 0 auto;
}
.training-preview-source {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  border-radius: 8px;
  color: #fff;
  background: rgba(83, 67, 222, .88);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.training-preview-source[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status {
    max-width: 190px;
  }
}
@media (max-width: 1050px) {
  .training-slide-control { grid-column: 1 / -1; }
  .training-preview-tools { justify-content: flex-start; }
  .training-preview-upload { flex: 0 1 auto; }
}
@media (max-width: 860px) {
  .view-section[data-view-section="live"] .live-control-actions .presenter-bridge-status {
    position: static;
    left: auto;
    right: auto;
    max-width: 220px;
  }
}
@media (max-width: 620px) {
  .presentation-toolbar .live-control-actions {
    grid-template-areas:
      "previous counter next qr quiz"
      "handover handover powerpoint powerpoint toggle"
      "bridge bridge bridge bridge bridge";
  }
  #powerPointModeButton { grid-area: powerpoint; }
  #presenterBridgeStatus {
    grid-area: bridge;
    width: 100%;
    max-width: none;
  }
  #presenterBridgeStatus .presenter-bridge-copy small { display: block; }
}
@media (max-width: 380px) {
  .presentation-toolbar .live-control-actions {
    grid-template-areas:
      "previous counter next"
      "qr quiz quiz"
      "handover handover handover"
      "powerpoint powerpoint toggle"
      "bridge bridge bridge";
  }
}

/* 2026-08-17 — Current lecture status row, integrated layout (v2).
   Voice/STT status and Bridge status are part of the control shell instead of
   floating above the slide. The persistent voice row intentionally gives up a
   small amount of reader height so the recognised text is always visible. */
.view-section[data-view-section="live"] .live-presentation-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.view-section[data-view-section="live"] .presenter-bridge-status {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  display: inline-flex;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 255px;
  min-height: 38px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 11px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.view-section[data-view-section="live"] .presenter-bridge-copy {
  overflow: hidden;
  min-width: 0;
}
.view-section[data-view-section="live"] .presenter-bridge-copy strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-section[data-view-section="live"] .presenter-bridge-copy small {
  display: none;
}
.view-section[data-view-section="live"] .presenter-bridge-status .button {
  min-height: 28px;
  margin-left: 4px;
  padding-inline: 8px;
  font-size: 10px;
}

.view-section[data-view-section="live"] .lecture-voice-monitor {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  display: grid !important;
  width: 100%;
  max-width: none !important;
  min-height: 52px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  color: rgba(244,246,252,.92);
  background: #131722;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.view-section[data-view-section="live"] .lecture-voice-monitor strong {
  white-space: nowrap;
}
.view-section[data-view-section="live"] .lecture-voice-monitor-transcript {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: rgba(233,236,247,.78);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-section[data-view-section="live"] .lecture-voice-monitor small {
  white-space: nowrap;
}
html[data-theme="light"] .view-section[data-view-section="live"] .lecture-voice-monitor {
  color: var(--text);
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--surface-solid) 96%, var(--surface-soft));
}
html[data-theme="light"] .view-section[data-view-section="live"] .lecture-voice-monitor-transcript {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .view-section[data-view-section="live"] .presenter-bridge-status { max-width: 205px; }
  .view-section[data-view-section="live"] .lecture-voice-monitor {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .view-section[data-view-section="live"] .lecture-voice-monitor small { display: none; }
}
@media (max-width: 860px) {
  .view-section[data-view-section="live"] .lecture-voice-monitor {
    display: grid !important;
    min-height: 46px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding: 7px 10px;
  }
  .view-section[data-view-section="live"] .lecture-voice-monitor strong { display: none; }
  .view-section[data-view-section="live"] .lecture-voice-monitor-transcript { font-size: 10px; }
  .view-section[data-view-section="live"] .presenter-bridge-status {
    position: static !important;
    left: auto;
    right: auto;
    max-width: 190px;
  }
}
@media (max-width: 620px) {
  .view-section[data-view-section="live"] .presenter-bridge-status { display: none; }
  .view-section[data-view-section="live"] .lecture-voice-monitor { min-height: 42px; }
}
/* Keep up to two lines of the live transcript visible without letting the status
   row grow over the slide. */
.view-section[data-view-section="live"] .lecture-voice-monitor { min-height: 58px; }
.view-section[data-view-section="live"] .lecture-voice-monitor-transcript {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (max-width: 860px) {
  .view-section[data-view-section="live"] .lecture-voice-monitor { min-height: 48px; }
  .view-section[data-view-section="live"] .lecture-voice-monitor-transcript {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

/* AI Lumen 5 academic workflow */
.home-quiz-count-control{display:inline-flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:12px;color:var(--muted)}
.home-quiz-count-control input{width:58px;min-height:34px;padding:5px 7px;border:0;background:transparent;color:var(--text);font-weight:700;text-align:center}
.analytics-ranking-card{min-width:0}.analytics-ranking-list{display:grid;gap:8px}.analytics-rank-row{grid-template-columns:28px 38px minmax(0,1fr) auto}.analytics-rank-number{font-weight:800;color:var(--muted);text-align:center}.analytics-rank-row>strong{white-space:nowrap;color:var(--accent)}
@media(max-width:760px){.home-quiz-count-control{width:100%;justify-content:space-between}.analytics-rank-row{grid-template-columns:24px 34px minmax(0,1fr)}.analytics-rank-row>strong{grid-column:3}}


/* AI Lumen 5 academic journal v2: presentation-driven lecture blocks. */
.assessment-grade-matrix-v2 { min-width: max-content; }
.assessment-grade-matrix-v2 thead th { top: 0; }
.assessment-grade-matrix-v2 .assessment-group-header-row th { height: 58px; text-align: center; }
.assessment-grade-matrix-v2 .assessment-subheader-row th { top: 58px; z-index: 5; height: 48px; text-align: center; }
.assessment-grade-matrix-v2 .assessment-matrix-student-column,
.assessment-grade-matrix-v2 .assessment-matrix-total-column { vertical-align: middle; }
.assessment-grade-matrix-v2 thead .assessment-matrix-student-column,
.assessment-grade-matrix-v2 thead .assessment-matrix-total-column { top: 0; height: 106px; }
.assessment-lecture-group,
.assessment-exam-group { min-width: 236px; background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-solid)) !important; border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)) !important; }
.assessment-exam-group { min-width: 330px; }
.assessment-lecture-group strong,
.assessment-exam-group strong { display: block; font-size: 10px; font-weight: 950; letter-spacing: .01em; }
.assessment-lecture-group small,
.assessment-exam-group small { display: block; max-width: 220px; margin: 4px auto 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.assessment-grade-matrix-v2 .assessment-subcolumn { width: 118px !important; min-width: 118px !important; background: var(--surface-solid); }
.assessment-grade-matrix-v2 .assessment-exam-subcolumn { width: 110px !important; min-width: 110px !important; }
.assessment-grade-matrix-v2 .assessment-subcolumn strong { display: block; font-size: 10px; font-weight: 950; }
.assessment-grade-matrix-v2 .assessment-subcolumn small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.assessment-grade-matrix-v2 .assessment-matrix-cell { width: 118px; min-width: 118px; height: 70px; padding: 7px; }
.assessment-auto-result { position: relative; display: grid; min-height: 52px; place-content: center; text-align: center; }
.assessment-auto-result > strong { display: block; font-size: 13px; font-weight: 950; }
.assessment-auto-result > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.assessment-auto-result-cell.is-automatic .assessment-auto-result > strong { color: var(--green); }
.assessment-auto-result-cell.is-manual .assessment-auto-result > strong { color: var(--accent); }
.assessment-auto-result-cell.is-pending .assessment-auto-result > strong { color: var(--amber); }
.assessment-score-edit { position: absolute; top: 0; right: 0; display: grid; width: 21px; height: 21px; padding: 0; place-items: center; border: 0; border-radius: 7px; color: var(--subtle); background: transparent; cursor: pointer; font: inherit; font-size: 10px; opacity: .55; }
.assessment-score-edit:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }
.assessment-grade-matrix-v2 .assessment-matrix-grade-form { display: grid; grid-template-columns: 1fr; gap: 4px; }
.assessment-grade-matrix-v2 .assessment-cell-input { width: 100%; }
.assessment-autosave-note { display: block; color: var(--muted); font-size: 10px; text-align: center; }
.assessment-override-save { width: 100%; min-height: 25px; padding: 4px 7px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.assessment-grade-matrix-v2 .assessment-matrix-total-column { width: 170px; min-width: 170px; }
.assessment-grade-matrix-v2 .assessment-matrix-total-column small { white-space: normal; line-height: 1.4; }
@media (max-width: 900px) {
  .assessment-grade-matrix-v2 .assessment-matrix-student-column { width: 190px; min-width: 190px; }
  .assessment-grade-matrix-v2 .assessment-subcolumn,
  .assessment-grade-matrix-v2 .assessment-matrix-cell { width: 108px !important; min-width: 108px !important; }
  .assessment-grade-matrix-v2 .assessment-matrix-total-column { width: 150px; min-width: 150px; }
}

/* === Lumen AI v3: lecturer exam center === */
.exam-center-page { display: grid; gap: 18px; }
.exam-center-heading { align-items: end; gap: 18px; }
.exam-center-class {
  display: grid;
  min-width: min(280px, 100%);
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
}
.exam-center-class span { color: var(--muted); font-size: 12px; }
.exam-center-class strong { color: var(--text); font-size: 14px; }
.exam-policy-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.exam-policy-strip > span {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
}
.exam-policy-strip small { color: var(--muted); font-size: 11px; }
.exam-policy-strip strong { color: var(--text); font-size: 14px; }
.exam-center-grid { display: grid; gap: 16px; }
.exam-center-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}
.exam-center-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
}
.exam-center-card-head h3 { margin: 3px 0 5px; color: var(--text); font-size: 20px; }
.exam-center-card-head p { margin: 0; color: var(--muted); font-size: 13px; }
.exam-center-card .badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.exam-center-card .badge.ready { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface-solid)); }
.exam-center-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--border);
}
.exam-center-stats > span { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface-solid); }
.exam-center-stats small { color: var(--muted); font-size: 11px; }
.exam-center-stats strong { color: var(--text); font-size: 15px; }
.exam-center-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 20px 18px; }
.exam-empty-note,
.exam-lock-note {
  margin: 0 20px 20px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 13px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  line-height: 1.55;
}
.exam-lock-note { color: var(--amber); }
.exam-question-list { border-top: 1px solid var(--border); }
.exam-question-list > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.exam-question-list > summary::-webkit-details-marker { display: none; }
.exam-question-list > summary span {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
}
.exam-question-list-body { display: grid; gap: 12px; padding: 0 20px 20px; }
.exam-question-editor {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}
.exam-question-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}
.exam-question-fields { display: grid; gap: 10px; min-width: 0; }
.exam-question-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.exam-question-fields textarea,
.exam-question-fields input,
.exam-question-fields select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--surface-solid);
  font: inherit;
  font-size: 13px;
}
.exam-question-fields textarea { resize: vertical; line-height: 1.5; }
.exam-question-fields textarea[data-exam-field="prompt"] {
  min-height: 68px;
  max-height: 220px;
  overflow-y: hidden;
}
.exam-question-meta-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(130px, .7fr); gap: 10px; }
.exam-editor-visual {
  margin: 0;
  display: grid;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
}
.exam-editor-visual img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: var(--surface-soft);
}
.exam-editor-visual figcaption {
  padding: 0 10px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.exam-option-editor { display: grid; gap: 7px; }
.exam-option-row {
  grid-template-columns: 18px 20px minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px !important;
  padding: 0 !important;
}
.exam-option-row > input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.exam-option-row > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.exam-qr-modal { text-align: center; }

@media (max-width: 900px) {
  .exam-policy-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-center-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-question-meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .exam-center-card-head { flex-direction: column; }
  .exam-policy-strip { grid-template-columns: 1fr; }
  .exam-center-stats { grid-template-columns: 1fr 1fr; }
  .exam-question-editor { grid-template-columns: 1fr; }
}

/* === Lumen AI v3: student timed exam === */
.student-exam-page { display: grid; gap: 18px; }
.student-exam-area { width: min(100%, 980px); margin: 0 auto; }
.student-exam-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}
.student-exam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 15px;
}
.student-exam-head h2 { margin: 3px 0 0; color: var(--text); font-size: 21px; }
.student-exam-clock {
  display: grid;
  min-width: 124px;
  gap: 2px;
  text-align: right;
}
.student-exam-clock small { color: var(--muted); font-size: 11px; }
.student-exam-clock strong { color: var(--text); font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.student-exam-time-track,
.student-exam-progress {
  position: relative;
  height: 5px;
  overflow: hidden;
  background: var(--surface-soft);
}
.student-exam-time-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--accent);
  transition: transform .45s linear;
}
.student-exam-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px 8px;
  color: var(--muted);
  font-size: 12px;
}
.student-exam-progress { height: 4px; margin: 0 22px; border-radius: 99px; }
.student-exam-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.student-exam-question { display: grid; gap: 18px; padding: 28px 22px 24px; }
.student-exam-question h3 { margin: 0; color: var(--text); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; }
.student-exam-image { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.student-exam-image img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.student-exam-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.student-exam-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-solid);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.student-exam-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.student-exam-option > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.student-exam-option > strong { font-size: 14px; line-height: 1.4; }
.student-exam-option.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.student-exam-option.is-selected > span { background: var(--accent); color: var(--icon-on-strong); }
.student-exam-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border);
}
.student-exam-footer > span { max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.student-exam-result { display: grid; justify-items: center; gap: 9px; padding: 42px 24px; text-align: center; }
.student-exam-result-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, var(--surface-solid)); color: var(--green); font-size: 26px; font-weight: 900; }
.student-exam-result h2 { margin: 4px 0 0; color: var(--text); }
.student-exam-score { color: var(--accent); font-size: 42px; line-height: 1; }
.student-exam-result p { margin: 4px 0 0; color: var(--muted); }

@media (max-width: 700px) {
  .student-exam-head { align-items: flex-start; }
  .student-exam-options { grid-template-columns: 1fr; }
  .student-exam-footer { align-items: stretch; flex-direction: column; }
  .student-exam-footer .button { width: 100%; }
}

/* === AI Lumen 6: manual exams === */
.exam-question-editor.is-empty {
  border-style: dashed;
}
.exam-question-editor.is-filled {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}
.exam-inline-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.exam-image-hint,
.exam-correct-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.exam-option-row input[data-exam-option] {
  min-width: 0;
}
.exam-question-fields textarea[data-exam-field="prompt"] {
  min-height: 68px;
}
.exam-question-list[open] > summary {
  border-bottom: 1px solid var(--border);
}
.exam-question-list-body {
  padding-top: 18px;
}

@media (max-width: 700px) {
  .exam-center-page { gap: 12px; }
  .exam-center-heading { align-items: stretch; }
  .exam-center-class { width: 100%; }
  .exam-center-card { border-radius: 17px; }
  .exam-center-card-head { padding: 17px 14px 13px; }
  .exam-center-card-head h3 { font-size: 19px; }
  .exam-center-card-head p { font-size: 12px; line-height: 1.45; }
  .exam-center-stats { grid-template-columns: 1fr 1fr; }
  .exam-center-stats > span { padding: 10px 12px; }
  .exam-center-actions { padding: 12px 14px 14px; }
  .exam-center-actions .button { flex: 1 1 150px; }
  .exam-question-list > summary { padding: 14px; }
  .exam-question-list-body { gap: 10px; padding: 14px; }
  .exam-question-editor { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .exam-question-number { width: 34px; height: 34px; }
  .exam-option-row { grid-template-columns: 20px 28px minmax(0, 1fr); padding: 8px 9px; }
  .exam-inline-upload-row .button { flex: 1 1 140px; }
  .exam-image-hint { width: 100%; }
  .exam-editor-visual img { max-height: 46vh; }

  .student-exam-page { gap: 12px; }
  .student-exam-area { width: 100%; }
  .student-exam-card { border-radius: 17px; }
  .student-exam-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 12px;
  }
  .student-exam-clock {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    text-align: left;
  }
  .student-exam-clock strong { font-size: 22px; }
  .student-exam-progress-head { padding: 13px 14px 7px; }
  .student-exam-progress { margin: 0 14px; }
  .student-exam-question { gap: 14px; padding: 20px 14px 18px; }
  .student-exam-question h3 { font-size: 16px; line-height: 1.5; }
  .student-exam-image { border-radius: 13px; }
  .student-exam-image img { max-height: 48vh; }
  .student-exam-options { grid-template-columns: 1fr; gap: 8px; }
  .student-exam-option { min-height: 58px; padding: 9px 10px; border-radius: 13px; }
  .student-exam-option > strong { font-size: 14px; }
  .student-exam-footer { align-items: stretch; flex-direction: column; padding: 14px; }
  .student-exam-footer .button { width: 100%; }
}

@media (max-width: 430px) {
  .exam-policy-strip { grid-template-columns: 1fr; }
  .exam-center-stats { grid-template-columns: 1fr 1fr; }
  .exam-question-editor { grid-template-columns: 1fr; }
  .exam-question-number { margin-bottom: 2px; }
  .exam-option-row { grid-template-columns: 20px 24px minmax(0, 1fr); }
  .student-exam-question { padding-inline: 12px; }
  .student-exam-option { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .student-exam-option > span { width: 32px; height: 32px; }
}

/* AI Lumen Course Intelligence v1 */
.course-intelligence-card { margin-top: 18px; }
.course-intelligence-card .card-head { align-items: flex-start; gap: 18px; }
.course-intelligence-version { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.course-intelligence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.course-intelligence-pane { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.course-intelligence-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.course-intelligence-pane-head strong { font-size: .95rem; }
.course-intelligence-pane-head small { color: var(--muted); font-size: .72rem; text-align: right; }
.intelligence-list .support-person { align-items: flex-start; }
.intelligence-list .support-person > span:nth-child(2) { min-width: 0; flex: 1; }
.intelligence-list .support-person small { display: block; margin-top: 3px; line-height: 1.35; }
.intelligence-list .support-person strong { white-space: nowrap; font-size: .78rem; }
.intelligence-status { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; }
.intelligence-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.intelligence-status.critical { color: #b42318; }
.intelligence-status.watch { color: #b54708; }
.intelligence-status.strong { color: #067647; }
.intelligence-status.developing { color: var(--muted); }
@media (max-width: 980px) { .course-intelligence-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .course-intelligence-pane { padding: 12px; }
  .course-intelligence-pane-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .course-intelligence-pane-head small { text-align: left; }
}


.course-memory-pane { grid-column: 1 / -1; }
.course-memory-summary { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:0 0 12px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.course-memory-summary strong { font-size:.86rem; }
.course-memory-summary span { color:var(--muted); font-size:.74rem; text-align:right; }
@media (max-width: 640px) {
  .course-memory-summary { align-items:flex-start; flex-direction:column; gap:3px; }
  .course-memory-summary span { text-align:left; }
}

/* AI Lumen 7 — Knowledge Base lecture scope */
.knowledge-scope-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, .8fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: end;
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.knowledge-scope-toolbar label { display: grid; gap: 6px; min-width: 0; }
.knowledge-scope-toolbar label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.knowledge-scope-toolbar select {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
}
.knowledge-scope-toolbar > small {
  color: var(--muted);
  line-height: 1.45;
  padding-bottom: 4px;
}
.material-assignment-control { flex-wrap: wrap; }
.material-assignment-control [data-knowledge-presentation-select],
.material-assignment-control [data-knowledge-type-select] { min-width: 190px; max-width: 260px; }
@media (max-width: 980px) {
  .knowledge-scope-toolbar { grid-template-columns: 1fr 1fr; }
  .knowledge-scope-toolbar > small { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .knowledge-scope-toolbar { grid-template-columns: 1fr; }
  .knowledge-scope-toolbar > small { grid-column: auto; }
}

/* Chat history delete controls: isolated to archive/history panels. */
.chat-history-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.chat-history-actions .tutor-new-chat-button,
.chat-history-actions .lecturer-new-chat-button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.chat-history-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface-solid);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
}
.chat-history-clear-button:hover { color: var(--danger, #b42318); background: var(--surface-soft); }
.tutor-archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 3px;
  align-items: center;
  min-width: 0;
}
.tutor-archive-row .tutor-archive-item { width: 100%; min-width: 0; }
.chat-history-delete-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--subtle);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.chat-history-delete-button:hover { color: var(--danger, #b42318); background: var(--surface-soft); }
@media (max-width: 520px) {
  .chat-history-clear-button { padding: 0 8px; font-size: 10px; }
}

.chat-history-actions .tutor-new-chat-button span,
.chat-history-actions .lecturer-new-chat-button span { font-size: 14px; line-height: 1; }

/* 2026-08-25 — Knowledge Base rows matched visually to Lectures (UI only). */
.knowledge-list {
  display: grid;
  gap: 0;
}
.knowledge-list .knowledge-item {
  display: grid;
  min-height: 60px;
  height: auto;
  grid-template-columns: 36px minmax(260px, 2fr) minmax(560px, auto);
  align-items: center;
  gap: 12px;
  padding: 9px 7px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.knowledge-list .knowledge-item:first-child {
  border-top: 0;
}
.knowledge-list .knowledge-item:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}
.knowledge-list .knowledge-source-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 10px;
}
.knowledge-list .knowledge-item-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1.2;
}
.knowledge-list .knowledge-item-copy strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-list .knowledge-item-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-list .knowledge-item-meta {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  font-size: 10px;
}
.knowledge-list .knowledge-item-meta > span,
.knowledge-list .knowledge-item-meta > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-list .knowledge-status {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}
.knowledge-list .material-assignment-control {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.knowledge-list .material-assignment-control > label {
  flex: 1 1 0;
  min-width: 120px;
  margin: 0;
}
/* Match the Lectures row: controls stay on one horizontal line, without tiny column captions. */
.knowledge-list .material-assignment-control > label > span {
  display: none;
}
.knowledge-list .material-assignment-control select,
.knowledge-list .material-assignment-control [data-knowledge-presentation-select],
.knowledge-list .material-assignment-control [data-knowledge-type-select] {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 36px;
  min-height: 36px !important;
  padding: 0 30px 0 10px;
  border-radius: 9px !important;
  font-size: 10px !important;
}
.knowledge-list .material-assignment-control .button.compact,
.knowledge-list .material-assignment-control .knowledge-delete {
  flex: 0 0 auto;
  align-self: center;
  height: 36px;
  min-height: 36px;
  margin: 0;
}
.knowledge-list .material-assignment-control .button.compact {
  padding: 0 12px;
  border-radius: 9px;
  font-size: 10px;
}
.knowledge-list .material-assignment-control .knowledge-delete {
  width: 36px;
  min-width: 36px;
  border-radius: 9px;
}

@media (max-width: 1100px) {
  .knowledge-list {
    gap: 6px;
  }
  .knowledge-list .knowledge-item {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-solid);
  }
  .knowledge-list .material-assignment-control {
    grid-column: 1 / -1;
    padding-left: 48px;
  }
}
@media (max-width: 680px) {
  .knowledge-list .material-assignment-control {
    padding-left: 0;
    flex-wrap: wrap;
  }
  .knowledge-list .material-assignment-control > label {
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
  }
}



/* 2026-08-25 — Lecturer grades: class summary + roster search/sort (UI only). */
.assessment-summary-grid article {
  min-height: 104px;
}
.assessment-summary-grid article > span {
  font-weight: 700;
}
.assessment-summary-grid article > strong {
  margin-top: 8px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
}
.assessment-summary-grid article > small {
  margin-top: 8px;
  line-height: 1.35;
}
.assessment-roster-head {
  align-items: center;
  gap: 18px;
}
.assessment-roster-controls {
  display: flex;
  min-width: min(100%, 470px);
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.assessment-roster-controls .search-box {
  min-width: 220px;
  flex: 1 1 260px;
}
.assessment-roster-controls .search-box input,
.assessment-roster-controls select {
  min-height: 38px;
}
.assessment-roster-sort {
  flex: 0 0 205px;
}
.assessment-roster-sort select {
  width: 100%;
  padding: 0 30px 0 11px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.assessment-roster-explainer {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .assessment-roster-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .assessment-roster-controls {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}
@media (max-width: 620px) {
  .assessment-roster-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .assessment-roster-controls .search-box,
  .assessment-roster-sort {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}


/* 2026-08-25 — Lecturer Analytics: academic lectures, class-scoped metrics. */
.lecture-register-card {
  overflow-x: auto;
}
.lecture-register {
  min-width: 1080px;
}
.lecture-register-row {
  grid-template-columns: 44px minmax(190px, 1.35fr) repeat(4, minmax(150px, 1fr));
  align-items: center;
  gap: 12px;
}
.lecture-register-row.lecture-register-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--surface-solid);
}
.lecture-register-class-row > span {
  min-width: 0;
}
.lecture-register-class-row strong {
  font-size: 11px;
}
.lecture-register-class-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lecture-register-lecture strong {
  font-size: 12px;
}
.course-intelligence-card .course-intelligence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.course-intelligence-card .course-memory-pane {
  grid-column: auto;
}
@media (max-width: 980px) {
  .course-intelligence-card .course-intelligence-grid {
    grid-template-columns: 1fr;
  }
}


/* Student training entry points — 2026-08-26 v2 */
.student-training-result-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.student-training-result-row,
.score-row.training-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.student-training-result-row:first-child { border-top: 0; }
.student-training-result-lecture,
.score-row.training-score-row > span:first-child {
  min-width: 0;
  margin: 0;
  color: var(--text);
}
.student-training-result-lecture strong,
.score-row.training-score-row > span:first-child {
  overflow: hidden;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.score-row.training-score-row > span:first-child small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
}
.student-training-result-actions,
.training-score-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.student-training-result-actions b,
.training-score-actions > strong {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.training-action-button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.training-action-button:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-1px);
}
.analytics-training-button {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  min-height: 29px;
  height: auto;
  align-self: flex-start;
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.lecture-result-metric { overflow: hidden; }
.lecture-result-metric > span:last-child {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}

/* Student Tutor empty-chat actions intentionally reuse the lecturer quick-action design. */
.tutor-starter-panel {
  display: grid;
  width: min(620px, calc(100% - 40px));
  min-height: min(56vh, 500px);
  align-content: center;
  justify-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 28px 0;
}
.tutor-starter-question {
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 750;
}
.tutor-quick-actions {
  width: min(560px, 100%);
}
.tutor-quick-actions button {
  font-family: var(--font);
}
.tutor-quick-actions strong {
  font-size: 11px;
}
.tutor-quick-actions small {
  font-size: 9px;
}
.tutor-training-chooser {
  display: grid;
  gap: 12px;
  margin: 12px 0 18px 62px;
  max-width: 680px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-solid);
}
.tutor-lecture-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tutor-lecture-choice,
.tutor-inline-action {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-solid);
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
}
.tutor-lecture-choice { padding: 9px 12px; font-size: 11px; }
.tutor-inline-actions { display: flex; gap: 8px; margin-top: 10px; }
.tutor-inline-action { padding: 8px 12px; color: var(--accent); font-size: 11px; }
.tutor-inline-action.secondary { color: var(--muted); }
.tutor-lecture-choice:hover,
.tutor-inline-action:hover { background: var(--surface-hover); }

@media (max-width: 700px) {
  .student-training-result-row,
  .score-row.training-score-row { gap: 6px; }
  .student-training-result-actions,
  .training-score-actions { gap: 5px; }
  .training-action-button { min-height: 27px; height: 27px; padding-inline: 7px; font-size: 9px !important; }
  .analytics-training-button { height: auto; min-height: 29px; }
  .tutor-starter-panel { width: calc(100% - 24px); min-height: 48vh; }
  .tutor-quick-actions { display: grid; grid-template-columns: 1fr; max-width: 430px; }
  .tutor-quick-actions button { width: 100%; min-width: 0; }
  .tutor-training-chooser { margin-left: 0; }
}

/* 2026-08-26 v7 — keep analytics training CTAs strictly inside their metric cell. */
body.student-page .lecture-result-metric .analytics-training-button {
  max-width: calc(100% - 2px);
}

/* 2026-08-29 — AI Lumen 10 Fix24
   Keep the Lecturer/Student theme switch identical to the correctly centered
   auth-page control.  A later shared .app-page normalization had collapsed the
   62px two-position pill into a square control, making both icons overflow and
   look off-center. */
.app-page .theme-button {
  display: inline-grid;
  width: 62px;
  height: 40px;
  min-width: 62px;
  flex: 0 0 62px;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  place-items: center;
  border-radius: 999px;
  line-height: 1;
}
.app-page .theme-button span {
  display: grid;
  width: 25px;
  height: 25px;
  margin: 0;
  place-items: center;
  border-radius: 50%;
  line-height: 1;
}


/* Fix25: read-only class switcher on lecturer assessments page. */
.assessment-heading-actions {
  flex-wrap: wrap;
}
.assessment-class-view-control {
  min-width: 230px;
  display: grid;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.assessment-class-view-control > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
.assessment-class-view-control select {
  width: 100%;
  min-height: 34px;
  border: 0;
  padding: 0 28px 0 0;
  background-color: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
}
.assessment-class-view-note {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.assessment-class-view-note[hidden] { display: none !important; }
@media (max-width: 760px) {
  .assessment-heading-actions .assessment-class-view-control {
    width: 100%;
    min-width: 0;
  }
}


/* Fix26: compact, responsive class viewer controls on Lecturer > Assessments.
   Visual-only override; no behavior or data logic changes. */
.assessment-page > .section-heading {
  align-items: center;
  gap: 16px;
}
.assessment-page > .section-heading > :first-child {
  min-width: 0;
  flex: 1 1 360px;
}
.assessment-heading-actions {
  display: flex;
  width: auto;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.assessment-heading-actions .assessment-class-view-control {
  width: 196px;
  min-width: 196px;
  max-width: 196px;
  gap: 2px;
  padding: 5px 9px;
  border-radius: 12px;
}
.assessment-class-view-control > span {
  margin: 0;
  font-size: 9px;
  line-height: 1.1;
}
.assessment-class-view-control select {
  min-height: 28px;
  padding-right: 22px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}
.assessment-heading-actions > .button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.assessment-heading-actions .assessment-class-view-note {
  min-height: 30px;
  padding: 0 8px;
  font-size: 10px;
}

/* If the available content width becomes narrow, move the complete control
   group below the description instead of wrapping only the Refresh button. */
@media (max-width: 1120px) {
  .assessment-page > .section-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .assessment-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .assessment-heading-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .assessment-heading-actions .assessment-class-view-control {
    width: 100%;
    min-width: 0;
    max-width: none;
    grid-column: 1 / -1;
  }
  .assessment-heading-actions .assessment-class-view-note {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .assessment-heading-actions > .button {
    width: 100%;
    min-width: 0;
    padding-inline: 9px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .assessment-heading-actions {
    grid-template-columns: 1fr;
  }
  .assessment-heading-actions .assessment-class-view-control,
  .assessment-heading-actions .assessment-class-view-note {
    grid-column: 1;
  }
}


/* Fix29: keep Lecturer > Assessments class selector on the same visual row
   as the action buttons. Visual-only; no assessment behavior changes. */
.assessment-heading-actions .assessment-class-view-control {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 38px;
  height: 38px;
  gap: 8px;
  padding: 0 10px;
}
.assessment-heading-actions .assessment-class-view-control > span {
  flex: 0 0 auto;
  margin: 0;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.assessment-heading-actions .assessment-class-view-control select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
}
@media (max-width: 760px) {
  .assessment-heading-actions .assessment-class-view-control {
    height: 40px;
    min-height: 40px;
  }
  .assessment-heading-actions .assessment-class-view-control select {
    height: 38px;
    min-height: 38px;
    line-height: 38px;
  }
}


/* 2026-09-16 — Student iPhone materials + Tutor composer containment.
   UI-only: no API, grading, QR, tutor or TTS behaviour is changed. */
body.student-page #additionalMaterialsList .student-material-item {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
body.student-page #additionalMaterialsList .student-material-icon {
  display: grid;
  place-items: center;
}
body.student-page #additionalMaterialsList .student-material-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.student-page #additionalMaterialsList .student-material-open {
  justify-self: end;
  align-self: center;
  width: auto;
  min-width: 64px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 10px;
}

/* The per-message replay control remains wired in JavaScript so automatic
   tutor speech and the underlying feature are untouched; only the manual
   speaker glyph is temporarily removed from the student UI. */
body.student-page .tutor-view .tts-replay-button { display: none !important; }

@media (max-width: 820px) {
  body.student-page .tutor-layout,
  body.student-page .tutor-main,
  body.student-page .tutor-main .chat-scroll,
  body.student-page .tutor-main .composer-wrap,
  body.student-page .tutor-composer {
    min-width: 0;
    max-width: 100%;
  }
  body.student-page .tutor-main,
  body.student-page .tutor-main .chat-scroll,
  body.student-page .tutor-main .composer-wrap { overflow-x: hidden; }

  /* Live voice launcher is temporarily hidden. Remove its now-empty fifth
     explicit grid track as well, otherwise iOS keeps that width reserved. */
  body.student-page .tutor-composer:not(.is-dictating) {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
  }
  body.student-page .tutor-composer.is-dictating {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
  }
  body.student-page .tutor-composer textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* iOS keyboard: VisualViewport is the real visible height above the
     software keyboard. This keeps the topbar and composer in one viewport
     instead of letting Safari pan/expand the whole page around the textarea. */
  body.student-page.tutor-input-focused .main-surface {
    height: var(--student-tutor-visual-height, 100dvh);
    min-height: 0;
  }
  body.student-page.tutor-input-focused .tutor-view {
    height: calc(var(--student-tutor-visual-height, 100dvh) - var(--topbar-height));
    min-height: 0;
  }
}

@media (max-width: 680px) {
  body.student-page #additionalMaterialsList .student-material-item {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
  }
  body.student-page #additionalMaterialsList .student-material-open {
    grid-column: 3;
    grid-row: 1;
    min-width: 60px;
    min-height: 32px;
    padding-inline: 10px;
  }
}


/* 2026-09-16 v2 — iOS Safari visual-viewport hard lock for Student Tutor.
   Safari can keep the layout viewport wider than the actually visible area
   after the software keyboard opens.  Size the composer from JS-provided
   VisualViewport width, not 100vw/100%, and keep all controls shrink-safe. */
@media (max-width: 820px) {
  body.student-page #tutorInput {
    font-size: 16px !important;
    min-width: 0 !important;
    max-width: none;
  }

  body.student-page.tutor-input-focused .tutor-main .composer-wrap {
    width: var(--student-tutor-visual-width, 100%);
    max-width: var(--student-tutor-visual-width, 100%);
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
    overflow: hidden;
    box-sizing: border-box;
  }

  body.student-page.tutor-input-focused .tutor-composer {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    align-items: flex-end;
    gap: 4px;
    overflow: hidden;
  }

  body.student-page.tutor-input-focused .tutor-composer > #tutorAttachButton,
  body.student-page.tutor-input-focused .tutor-composer > #tutorVoiceToggle,
  body.student-page.tutor-input-focused .tutor-composer > #tutorSendButton,
  body.student-page.tutor-input-focused .tutor-composer > .dictation-action:not([hidden]) {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  body.student-page.tutor-input-focused .tutor-composer > #tutorInput {
    flex: 1 1 0;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.student-page.tutor-input-focused #tutorSendButton:not([hidden]) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}