:root {
  --bg: #020817;
  --bg-2: #031126;
  --panel: #071f44;
  --panel-2: #082a5b;
  --panel-3: #06366e;
  --line: #0f52d9;
  --line-2: #1976ff;
  --accent: #00d9ff;
  --comfort-low: #b58cff;
  --comfort-low-2: #86a8ff;
  --comfort-mid: #7aa7b8;
  --comfort-listen: #18c4ff;
  --comfort-close: #00d6c8;
  --comfort-high: #7ce7b2;
  --comfort-gradient: linear-gradient(90deg, var(--comfort-low) 0%, var(--comfort-low-2) 19%, var(--comfort-mid) 43%, var(--comfort-listen) 63%, var(--comfort-close) 80%, var(--comfort-high) 100%);
  --text: #eef8ff;
  --muted: #b8d7ff;
  --dim: #6f93c8;
  --shadow: rgba(0, 217, 255, 0.24);
  --layout-grid-row: clamp(64px, calc((100vh - 190px) / 12), 88px);
  --layout-grid-gap: 10px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, rgba(0, 217, 255, 0.12), transparent 32rem), var(--bg);
  color: var(--text);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.visually-hidden {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off-screen until a keyboard user tabs to it, then it becomes the
   first visible, high-contrast control. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: 8px;
  background: #020817;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: top 0.16s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
}

.page {
  position: relative;
  isolation: isolate;
  width: min(1360px, calc(100% - 20px));
  margin: 0 auto;
  padding: 12px 0 24px;
}

/* Liquid-glass atmosphere: soft linework only, never literal mood-board art. */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(2, 8, 23, 0.98) 0%, rgba(5, 28, 61, 0.84) 48%, rgba(2, 8, 23, 0.97) 100%),
    repeating-linear-gradient(112deg, transparent 0 68px, rgba(0, 217, 255, 0.08) 70px 72px, transparent 84px 126px),
    repeating-linear-gradient(172deg, transparent 0 92px, rgba(239, 251, 255, 0.05) 94px 95px, transparent 110px 150px),
    linear-gradient(180deg, rgba(239, 251, 255, 0.03), transparent 38%, rgba(0, 217, 255, 0.05));
  opacity: 0.28;
  filter: saturate(1.08) contrast(1.02);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 100%);
}

.page > * {
  position: relative;
  z-index: 1;
}

.bootstrap-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: 28px;
}

.bootstrap-recovery {
  width: min(620px, 100%);
  display: grid;
  gap: 12px;
  border-color: rgba(0, 217, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.11), transparent 42%),
    linear-gradient(180deg, rgba(8, 35, 76, 0.94), rgba(2, 10, 26, 0.96));
  box-shadow:
    0 0 42px rgba(0, 217, 255, 0.2),
    inset 0 0 26px rgba(0, 217, 255, 0.08);
}

.bootstrap-recovery h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
}

.bootstrap-recovery p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.bootstrap-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bootstrap-recovery-actions > * {
  flex: 1 1 180px;
  text-align: center;
}

.topbar {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  padding: 8px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 217, 255, 0.2), transparent 56%),
    linear-gradient(145deg, rgba(10, 52, 92, 0.96), rgba(2, 10, 26, 0.98));
  color: var(--accent);
  font-weight: 900;
  box-shadow:
    0 0 22px var(--shadow),
    inset 0 0 16px rgba(0, 217, 255, 0.13);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.brand-mark::before {
  inset: 4px;
  z-index: -1;
  border: 1px solid rgba(158, 232, 255, 0.24);
  border-radius: 10px;
}

.brand-mark::after {
  inset: -32%;
  z-index: -2;
  background:
    radial-gradient(circle at center, rgba(0, 217, 255, 0.44), rgba(25, 118, 255, 0.18) 38%, transparent 68%),
    conic-gradient(from 45deg, transparent, rgba(0, 217, 255, 0.24), transparent, rgba(96, 165, 250, 0.18), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: brandCorePulse 6s ease-in-out infinite;
}

.brand-logo {
  width: 92%;
  height: 92%;
  display: block;
  border-radius: 11px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(0, 217, 255, 0.28))
    drop-shadow(0 0 18px rgba(25, 118, 255, 0.18));
}

@keyframes brandCorePulse {
  0%,
  100% {
    transform: rotate(0deg) scale(0.98);
    opacity: 0.54;
  }

  50% {
    transform: rotate(4deg) scale(1.04);
    opacity: 0.84;
  }
}

.brand h1 {
  margin: 0;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.12;
}

.brand p,
.subtle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.status-chip {
  --mode-border: rgba(0, 217, 255, 0.78);
  --mode-glow: rgba(0, 217, 255, 0.28);
  --mode-glow-strong: rgba(0, 217, 255, 0.52);
  --mode-fill: rgba(6, 54, 110, 0.9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  min-height: 36px;
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 7px 11px;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 217, 255, 0.25), transparent 38%),
    linear-gradient(145deg, var(--mode-fill), rgba(3, 17, 38, 0.98));
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.16), inset 0 0 16px rgba(0, 217, 255, 0.08);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.status-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.22), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 217, 255, 0.08) 18px 19px, transparent 19px 34px);
  opacity: 0.55;
}

.status-chip-frame {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 5px;
  pointer-events: none;
}

.status-chip-frame::before,
.status-chip-frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 7px;
  border-color: var(--mode-border);
  border-style: solid;
  opacity: 0.9;
}

.status-chip-frame::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.status-chip-frame::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.status-chip-beacon {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(145, 245, 255, 0.75);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--mode-glow-strong), 0 0 18px var(--mode-glow);
}

.status-chip-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.status-chip-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.status-chip-main {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-mode-live .status-chip-beacon,
.status-mode-lab .status-chip-beacon,
.status-mode-session_today .status-chip-beacon {
  animation: statusBeaconPulse 1.8s ease-in-out infinite;
}

.status-mode-break,
.status-mode-away,
.status-mode-session_over,
.status-mode-no_scheduled_session {
  --mode-border: rgba(184, 215, 255, 0.62);
  --mode-glow: rgba(184, 215, 255, 0.16);
  --mode-glow-strong: rgba(184, 215, 255, 0.32);
  --mode-fill: rgba(7, 31, 68, 0.92);
}

.status-mode-break .status-chip-beacon,
.status-mode-away .status-chip-beacon,
.status-mode-session_over .status-chip-beacon,
.status-mode-no_scheduled_session .status-chip-beacon {
  background: var(--muted);
}

@keyframes statusBeaconPulse {
  0%,
  100% {
    transform: scale(0.78);
    opacity: 0.72;
    box-shadow: 0 0 8px var(--mode-glow), 0 0 14px rgba(0, 217, 255, 0.14);
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
    box-shadow: 0 0 14px var(--mode-glow-strong), 0 0 28px var(--mode-glow);
  }
}

.student-page .topbar-actions {
  flex: 1 1 720px;
  align-self: center;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(0, 1fr) minmax(108px, auto);
  align-items: stretch;
  gap: 6px;
}

.student-page .topbar {
  gap: 10px;
  margin-bottom: 8px;
  padding: 4px 0;
}

.student-page .brand {
  gap: 10px;
}

.student-page .brand-mark {
  width: 44px;
  height: 44px;
}

.student-page .brand h1 {
  font-size: clamp(22px, 2.1vw, 26px);
}

.student-page .brand p {
  margin-top: 2px;
  font-size: 12px;
}

.student-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-bottom: 78px;
  --student-pointer-x: -200px;
  --student-pointer-y: -200px;
}

.student-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 23, 0.92), rgba(7, 31, 68, 0.48), rgba(2, 8, 23, 0.93)),
    linear-gradient(118deg, transparent 0 32%, rgba(0, 217, 255, 0.11) 32.2% 32.7%, transparent 33% 100%),
    linear-gradient(242deg, transparent 0 62%, rgba(25, 118, 255, 0.1) 62.2% 62.8%, transparent 63% 100%),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 217, 255, 0.08) 23px 24px, transparent 24px 78px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(25, 118, 255, 0.07) 27px 28px, transparent 28px 86px),
    linear-gradient(135deg, transparent 0 46%, rgba(0, 217, 255, 0.08) 46% 47%, transparent 47% 100%);
  background-size:
    cover,
    cover,
    cover,
    96px 96px,
    110px 110px,
    280px 280px;
  background-position:
    center,
    center,
    center,
    0 0,
    38px 24px,
    0 0;
  opacity: 0.48;
  filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.13));
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 62%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 0 62%, transparent 100%);
}

.student-page::after {
  content: "";
  position: fixed;
  left: var(--student-pointer-x);
  top: var(--student-pointer-y);
  z-index: 0;
  width: clamp(150px, 16vw, 260px);
  height: clamp(48px, 5.2vw, 86px);
  pointer-events: none;
  border-radius: 999px / 54%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(123, 239, 255, 0.34) 0 2px, rgba(0, 217, 255, 0.15) 3px 5px, transparent 7px 13px),
    radial-gradient(ellipse at center, rgba(0, 217, 255, 0.3) 0%, rgba(25, 118, 255, 0.16) 42%, rgba(0, 217, 255, 0) 72%);
  filter: blur(6px);
  opacity: 0.86;
  mix-blend-mode: screen;
  transform: translate(-50%, -34%);
}

.tech-rain-layer {
  position: fixed;
  inset: -18vh 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.94;
  filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.28));
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 12%, black 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, black 12%, black 86%, transparent 100%);
}

.student-page > .tech-rain-layer {
  z-index: 0;
}

.overlay-ambient-terms,
.overlay-stage .overlay-ambient-term-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.72;
}

.overlay-ambient-terms {
  overflow: hidden;
  pointer-events: none;
}

.overlay-stage .overlay-ambient-term-layer {
  filter: drop-shadow(0 0 14px rgba(0, 217, 255, 0.22));
}

.overlay-stage .overlay-ambient-term-layer .tech-rain-token {
  max-width: 160px;
  color: rgba(211, 246, 255, 0.62);
  text-shadow:
    0 0 8px rgba(0, 217, 255, 0.28),
    0 0 20px rgba(25, 118, 255, 0.18);
}

.overlay-stage .overlay-ambient-term-layer .tech-rain-token b {
  font-size: clamp(12px, calc(var(--size) * 0.96), 17px);
  letter-spacing: 0.04em;
}

.overlay-stage .overlay-ambient-term-layer .tech-rain-token small {
  display: none;
}

.overlay-learndj-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 64%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 0 64%, transparent 100%);
}

.overlay-learndj-rain-source {
  position: absolute;
  right: clamp(34px, 4vw, 82px);
  bottom: clamp(32px, 4vh, 74px);
  border: 1px solid rgba(125, 247, 255, 0.34);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.44);
  color: rgba(211, 246, 255, 0.72);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.learndj-rain-token {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  max-width: min(24vw, 360px);
  display: grid;
  gap: 4px;
  border: 1px solid rgba(125, 247, 255, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.16), rgba(7, 31, 68, 0.34)),
    rgba(2, 13, 31, 0.32);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow:
    inset 0 0 16px rgba(0, 217, 255, 0.08),
    0 0 22px rgba(0, 217, 255, 0.14);
  opacity: var(--token-opacity);
  padding: 9px 11px;
  transform: translate3d(var(--drift), -4vh, 0);
  animation: learndjContextRain var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

.learndj-rain-token b,
.learndj-rain-token em,
.learndj-rain-token small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learndj-rain-token b {
  color: rgba(239, 251, 255, 0.94);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.learndj-rain-token em {
  color: rgba(211, 246, 255, 0.76);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}

.learndj-rain-token small {
  color: rgba(125, 247, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

@keyframes learndjContextRain {
  0% {
    opacity: 0.38;
    transform: translate3d(var(--drift), -4vh, 0);
  }

  12%,
  82% {
    opacity: var(--token-opacity);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(calc(var(--drift) * -0.45), 14vh, 0);
  }
}

.tech-rain-layer.is-paused .tech-rain-token {
  animation-play-state: paused;
}

.tech-rain-token {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  max-width: 250px;
  display: grid;
  gap: 2px;
  opacity: var(--token-opacity);
  transform: translate3d(var(--drift), -22vh, 0);
  animation: techTermRain var(--duration) linear infinite;
  animation-delay: var(--delay);
  color: rgba(206, 232, 255, 0.82);
  text-shadow:
    0 0 6px rgba(0, 217, 255, 0.44),
    0 0 18px rgba(0, 119, 255, 0.3);
  white-space: normal;
}

.tech-rain-token b {
  color: rgba(159, 249, 255, 0.98);
  font-size: calc(var(--size) * 1.05);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tech-rain-token small {
  color: rgba(209, 229, 255, 0.76);
  font-size: calc(var(--size) * 0.72);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-transform: uppercase;
}

@keyframes techTermRain {
  from {
    transform: translate3d(var(--drift), -22vh, 0);
  }

  to {
    transform: translate3d(calc(var(--drift) * -0.35), 118vh, 0);
  }
}

.student-page > *:not(.tech-rain-layer) {
  position: relative;
  z-index: 1;
}

.student-page > .topbar {
  z-index: 95;
}

.student-anchor-panel {
  scroll-margin-top: 12px;
}

.student-jump-menu {
  position: relative;
  inset: auto;
  z-index: 2;
  align-self: stretch;
  display: grid;
  gap: 6px;
  width: min(310px, calc(100vw - 20px));
  max-height: min(680px, calc(100vh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

.student-menu-dock {
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
}

.student-page .topbar-actions > .status-chip {
  grid-column: 3;
  grid-row: 1;
}

.student-jump-menu.is-collapsed {
  width: auto;
}

.student-menu-toggle {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.98), rgba(4, 18, 41, 0.98));
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.14), 0 0 18px rgba(0, 217, 255, 0.18);
  color: var(--text);
  padding: 6px 9px;
  text-align: left;
}

.student-menu-toggle strong {
  font-size: 12px;
  text-transform: uppercase;
}

.hamburger-icon {
  width: 30px;
  height: 30px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(0, 217, 255, 0.46);
  border-radius: 7px;
  padding: 6px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.24), rgba(3, 16, 36, 0.82) 62%);
}

.hamburger-icon i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.55);
}

.student-jump-menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.92);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.18);
  padding: 6px;
}

.student-jump-menu-links[hidden] {
  display: none !important;
}

.student-jump-menu.is-open .student-jump-menu-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
}

.student-jump-menu.is-open .student-menu-toggle {
  display: none;
}

.student-jump-menu.is-open .student-jump-menu-links > a {
  min-height: 36px;
  gap: 2px;
  padding: 4px 4px;
  font-size: 9px;
}

.student-jump-menu.is-open .student-jump-menu-links > a > span {
  width: 22px;
  height: 22px;
  font-size: 8px;
}

.student-jump-menu-links > a {
  min-height: 42px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 1px solid rgba(0, 217, 255, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.94), rgba(4, 18, 41, 0.96));
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.1), 0 0 14px rgba(0, 217, 255, 0.12);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 6px;
  text-decoration: none;
  text-align: center;
}

.student-menu-close {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1 / -1;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 217, 255, 0.78);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 20%, rgba(123, 239, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(8, 54, 103, 0.98), rgba(4, 18, 41, 0.98));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.12), 0 0 18px rgba(0, 217, 255, 0.18);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  padding: 7px 8px;
  text-align: left;
  text-transform: uppercase;
}

.student-menu-close:hover,
.student-menu-close:focus-visible {
  border-color: #7befff;
  box-shadow: inset 0 0 22px rgba(123, 239, 255, 0.2), 0 0 22px rgba(0, 217, 255, 0.28);
  outline: none;
}

.student-menu-close > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(123, 239, 255, 0.56);
  border-radius: 7px;
  background: rgba(0, 217, 255, 0.12);
  color: var(--accent);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.18);
  font-size: 12px;
}

.student-menu-close > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-jump-menu-links > a:hover,
.student-jump-menu-links > a:focus-visible {
  border-color: var(--accent);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.16), 0 0 18px rgba(0, 217, 255, 0.22);
  outline: none;
}

.student-jump-menu-links > a > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.46);
  border-radius: 7px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.24), rgba(3, 16, 36, 0.82) 62%);
  color: var(--accent);
  box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.16);
  font-size: 9px;
}

.student-jump-menu-links > a > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-rain-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid rgba(0, 217, 255, 0.18);
  padding-top: 6px;
}

.student-jump-menu.is-open .student-rain-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-top: 4px;
}

.student-accessibility-summary {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 0, rgba(123, 239, 255, 0.14), transparent 42%),
    rgba(2, 13, 31, 0.58);
  padding: 7px 8px;
}

.student-accessibility-summary .label {
  margin-bottom: 3px;
}

.student-accessibility-summary strong,
.student-accessibility-summary small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-accessibility-summary strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.08;
}

.student-accessibility-summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.student-jump-menu.is-open .student-accessibility-summary {
  padding: 5px 6px;
}

.student-jump-menu.is-open .student-accessibility-summary .label {
  display: none;
}

.student-jump-menu.is-open .student-accessibility-summary strong {
  font-size: 12px;
}

.student-jump-menu.is-open .student-accessibility-summary small {
  font-size: 9px;
}

.student-menu-panels {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.student-menu-panel {
  margin: 0;
  border-color: rgba(0, 217, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(6, 38, 82, 0.78), rgba(3, 16, 36, 0.94));
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
}

.student-menu-panel .collapsible-summary {
  min-height: 38px;
  padding: 6px 32px 6px 8px;
}

.student-menu-panel .collapsible-body {
  max-height: min(42vh, 320px);
  overflow: auto;
  padding: 6px;
}

.student-accessibility-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.42);
  padding: 6px;
}

.student-jump-menu.is-open .student-accessibility-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
}

.student-access-preferences {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: 8px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 0, rgba(96, 165, 250, 0.16), transparent 44%),
    linear-gradient(145deg, rgba(6, 38, 82, 0.68), rgba(2, 13, 31, 0.92));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
  padding: 9px;
}

.student-access-preference-copy {
  min-width: 0;
}

.student-access-preference-copy h3 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.08;
}

.student-access-preference-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.student-access-preset-grid,
.student-access-fields {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.student-access-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-access-preset {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 7px 8px;
  text-align: left;
}

.student-access-preset strong,
.student-access-preset span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-access-preset strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1;
}

.student-access-preset span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.12;
}

.student-access-preset.is-active {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 18% 0, rgba(123, 239, 255, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(0, 94, 176, 0.72), rgba(3, 16, 36, 0.96));
  box-shadow: inset 0 0 16px rgba(123, 239, 255, 0.14), 0 0 16px rgba(0, 217, 255, 0.12);
}

.entry-access-preferences {
  margin-top: 2px;
}

.student-rain-focus-mini {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}

.student-accessibility-controls .student-rain-focus-mini {
  grid-column: auto;
}

.student-rain-focus-mini span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.student-jump-menu.is-open .student-rain-focus-mini {
  gap: 2px;
}

.student-jump-menu.is-open .student-rain-focus-mini span {
  font-size: 8px;
  letter-spacing: 0.04em;
}

.student-rain-toggle {
  min-height: 44px;
  border: 1px solid rgba(0, 217, 255, 0.44);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.9), rgba(4, 18, 41, 0.96));
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.09);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.student-jump-menu.is-open .student-rain-toggle {
  min-height: 34px;
  padding: 4px 5px;
  font-size: 9px;
}

.student-rain-toggle small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.student-jump-menu.is-open .student-rain-toggle small {
  margin-top: 1px;
  font-size: 8px;
  line-height: 1.05;
}

.student-scene-default-button {
  grid-column: 1 / -1;
}

.student-jump-menu.is-open .student-scene-default-button {
  grid-column: span 2;
}

.student-low-stimulus-button {
  grid-column: 1 / -1;
  min-height: 42px;
  border-color: rgba(123, 239, 255, 0.82);
  background:
    radial-gradient(circle at 18% 0, rgba(123, 239, 255, 0.2), transparent 44%),
    linear-gradient(145deg, rgba(0, 94, 176, 0.94), rgba(3, 16, 36, 0.96));
  box-shadow:
    inset 0 0 16px rgba(123, 239, 255, 0.16),
    0 0 18px rgba(0, 217, 255, 0.16);
}

.student-jump-menu.is-open .student-low-stimulus-button {
  grid-column: auto;
  min-height: 34px;
}

.student-rain-toggle:hover,
.student-rain-toggle:focus-visible,
.student-rain-toggle.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.16), 0 0 14px rgba(0, 217, 255, 0.18);
  outline: none;
}

.student-rain-panel {
  align-content: start;
}

.rain-control-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
  align-items: stretch;
}

.rain-focus-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
}

.rain-focus-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.92), rgba(2, 13, 31, 0.98));
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 7px;
}

.student-jump-menu.is-open .rain-focus-select {
  min-height: 30px;
  border-radius: 7px;
  font-size: 10px;
  padding: 3px 5px;
}

.rain-pack-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.58);
  padding: 7px 8px;
}

.rain-pack-meta strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
}

.rain-pack-meta span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.rain-pack-list,
.rain-pack-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rain-pack-chip,
.rain-pack-samples span {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.58);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.rain-pack-samples span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  color: var(--text);
  text-transform: none;
}

.rain-pack-samples b {
  color: var(--accent);
}

.student-header-status {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.student-page .topbar-actions > .student-header-status {
  grid-column: 2;
  grid-row: 1;
}

.student-status-identity,
.student-points-menu,
.student-topic-strip {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(0, 136, 255, 0.38);
  border-radius: 7px;
  padding: 4px 6px;
  background: rgba(3, 16, 36, 0.7);
}

.student-status-identity {
  flex: 0 1 285px;
  max-width: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(18px, 1fr);
  align-items: center;
  gap: 2px 9px;
}

.student-topic-strip {
  flex: 1 1 330px;
  max-width: 460px;
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  align-items: stretch;
  gap: 5px;
}

.student-topic-pill {
  min-width: 0;
  min-height: 34px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(0, 217, 255, 0.18);
  border-radius: 6px;
  padding: 2px 5px;
  background: rgba(2, 13, 31, 0.56);
}

.student-hand-alert {
  position: fixed;
  left: max(160px, calc((100vw - 1360px) / 2 + 170px));
  top: 94px;
  z-index: 125;
  width: min(250px, calc(100vw - 180px));
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(0, 217, 255, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.22), rgba(25, 118, 255, 0.12) 48%, rgba(3, 16, 36, 0.86)),
    linear-gradient(180deg, rgba(7, 55, 112, 0.92), rgba(2, 13, 31, 0.96));
  box-shadow: 0 0 24px rgba(0, 217, 255, 0.38), inset 0 0 22px rgba(0, 217, 255, 0.12);
  opacity: 0;
  padding: 4px 7px;
  pointer-events: none;
  transform: translate3d(-8px, -6px, 0) scale(0.96);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}

.student-page > .student-hand-alert {
  position: fixed;
  z-index: 125;
}

.student-hand-alert.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: handAlertBreath 1.8s ease-in-out infinite;
}

@keyframes handAlertBreath {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.28), inset 0 0 18px rgba(0, 217, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 34px rgba(0, 217, 255, 0.46), inset 0 0 24px rgba(0, 217, 255, 0.16);
  }
}

.student-hand-alert-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.68);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.32), rgba(3, 16, 36, 0.82) 64%);
  color: var(--accent);
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.22), 0 0 16px rgba(0, 217, 255, 0.24);
}

.student-hand-alert-icon svg {
  width: 22px;
  height: 22px;
}

.student-hand-alert-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-hand-alert-icon .hand-alert-glow {
  stroke: #91f5ff;
  stroke-width: 2.5;
}

.student-hand-alert strong,
.student-hand-alert b {
  display: block;
  line-height: 1.05;
}

.student-hand-alert strong {
  color: var(--text);
  font-size: 13px;
}

.student-hand-alert b {
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-page.student-hand-raised {
  filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.22));
}

.student-page,
.student-page .topbar,
.student-page .panel,
.hand-toggle {
  transition:
    border-color 220ms ease,
    box-shadow 240ms ease,
    filter 240ms ease,
    background 220ms ease;
}

.student-page.student-hand-raised .topbar,
.student-page.student-hand-raised .panel {
  box-shadow: 0 0 26px rgba(0, 217, 255, 0.2), inset 0 0 18px rgba(0, 217, 255, 0.08);
}

.student-page.student-hand-raised .input-hub-panel {
  border-color: rgba(0, 217, 255, 0.95);
  box-shadow: 0 0 34px rgba(0, 217, 255, 0.34), inset 0 0 24px rgba(0, 217, 255, 0.12);
}

.student-page .panel {
  background:
    linear-gradient(180deg, rgba(7, 31, 68, 0.72), rgba(3, 17, 38, 0.82)),
    rgba(3, 17, 38, 0.55);
  border-color: rgba(0, 217, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 24px rgba(0, 217, 255, 0.1);
  backdrop-filter: blur(15px) saturate(1.18);
  -webkit-backdrop-filter: blur(15px) saturate(1.18);
}

.student-page .collapsible-surface,
.student-page .input-hub-panel {
  resize: vertical;
}

.student-calm-mode::after,
.student-calm-mode .tech-rain-layer {
  display: none;
}

.student-calm-mode .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  background: rgba(3, 17, 38, 0.94);
}

.student-calm-mode .input-hub-signal-button::before,
.student-calm-mode .input-hub-signal-button::after,
.student-calm-mode .rewind-preset-button::before,
.student-calm-mode .rewind-preset-button::after,
.student-calm-mode .rewind-send-button::before,
.student-calm-mode .rewind-send-button::after,
.student-calm-mode #submitQuestion::before,
.student-calm-mode #submitQuestion::after,
.student-calm-mode #raiseHand::before,
.student-calm-mode #raiseHand::after {
  display: none;
}

.student-font-90 {
  font-size: 90%;
}

.student-font-112 {
  font-size: 112%;
}

.student-font-125 {
  font-size: 125%;
}

.student-font-140 {
  font-size: 140%;
}

.student-font-125 [class~="student-display-name"],
.student-font-140 [class~="student-display-name"] {
  font-size: clamp(16px, 1.25em, 22px);
}

.student-font-125 .input-hub-panel,
.student-font-140 .input-hub-panel {
  --input-hub-button-min: 150px;
}

.student-font-140 .student-topic-pill strong,
.student-font-140 .surface-count,
.student-font-140 .student-rain-toggle {
  font-size: 1em;
}

.student-buttons-compact {
  --student-vcr-column-min: 82px;
  --student-vcr-min-height: clamp(58px, 3.8cqw, 74px);
  --student-action-min-height: clamp(66px, 4.8cqw, 88px);
  --student-reaction-column-min: 108px;
  --student-reaction-column-max: 150px;
  --student-reaction-min-height: clamp(72px, 4.8cqw, 92px);
  --student-reaction-icon-size: clamp(42px, 3.5cqw, 54px);
  --student-reaction-cooked-icon-size: clamp(44px, 3.6cqw, 56px);
  --student-label-font-size: clamp(13px, 0.92cqw, 17px);
}

.student-buttons-comfortable {
  --student-vcr-column-min: 96px;
  --student-vcr-min-height: clamp(68px, 4.2cqw, 86px);
  --student-action-min-height: clamp(76px, 5.6cqw, 100px);
  --student-reaction-column-min: 132px;
  --student-reaction-column-max: 180px;
  --student-reaction-min-height: clamp(82px, 5.4cqw, 108px);
  --student-reaction-icon-size: clamp(50px, 4.2cqw, 66px);
  --student-reaction-cooked-icon-size: clamp(52px, 4.3cqw, 68px);
  --student-label-font-size: clamp(15px, 1.05cqw, 20px);
}

.student-buttons-large {
  --student-vcr-column-min: 118px;
  --student-vcr-min-height: clamp(82px, 5.4cqw, 112px);
  --student-action-min-height: clamp(96px, 6.6cqw, 132px);
  --student-reaction-column-min: 156px;
  --student-reaction-column-max: 220px;
  --student-reaction-min-height: clamp(112px, 7.4cqw, 150px);
  --student-reaction-icon-size: clamp(66px, 5.5cqw, 88px);
  --student-reaction-cooked-icon-size: clamp(68px, 5.8cqw, 92px);
  --student-label-font-size: clamp(17px, 1.2cqw, 23px);
}

.student-buttons-jumbo {
  --student-vcr-column-min: 136px;
  --student-vcr-min-height: clamp(98px, 7cqw, 142px);
  --student-action-min-height: clamp(124px, 8.8cqw, 176px);
  --student-reaction-column-min: 182px;
  --student-reaction-column-max: 260px;
  --student-reaction-min-height: clamp(144px, 10cqw, 210px);
  --student-reaction-icon-size: clamp(82px, 7cqw, 116px);
  --student-reaction-cooked-icon-size: clamp(86px, 7.4cqw, 124px);
  --student-label-font-size: clamp(19px, 1.45cqw, 28px);
}

.student-theme-simple::before,
.student-theme-simple::after,
.student-theme-simple .tech-rain-layer {
  display: none;
}

.student-theme-simple .panel,
.student-theme-simple .status-chip,
.student-theme-simple .student-header-status > *,
.student-theme-simple .student-menu-toggle,
.student-theme-simple .student-jump-menu-links,
.student-theme-simple .action-button,
.student-theme-simple .ghost-button {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.student-theme-simple .panel {
  background: rgba(4, 20, 46, 0.96);
  border-color: rgba(0, 217, 255, 0.52);
}

.student-theme-high_contrast {
  --bg: #000713;
  --bg-2: #000b1f;
  --panel: #00162f;
  --panel-2: #002b5c;
  --panel-3: #004f9f;
  --text: #ffffff;
  --muted: #e4f4ff;
  --dim: #bfdcff;
  --accent: #19efff;
  color: #ffffff;
}

.student-theme-high_contrast::before {
  opacity: 0.24;
}

.student-theme-high_contrast .tech-rain-layer {
  display: none;
}

.student-theme-high_contrast .panel,
.student-theme-high_contrast .student-header-status > *,
.student-theme-high_contrast .status-chip,
.student-theme-high_contrast .student-jump-menu-links,
.student-theme-high_contrast .student-menu-toggle {
  background: rgba(0, 8, 20, 0.96);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 18px rgba(25, 239, 255, 0.28);
}

.student-theme-high_contrast .action-button,
.student-theme-high_contrast .ghost-button,
.student-theme-high_contrast input,
.student-theme-high_contrast select,
.student-theme-high_contrast textarea {
  border-color: var(--accent);
  color: #ffffff;
}

.student-status-identity .label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.student-topic-pill strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-handle-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(78px, 0.62fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.student-handle-mode,
.student-handle-input,
.student-handle-save,
.student-profile-menu summary,
.student-profile-tool {
  min-width: 0;
  min-height: 25px;
  border: 1px solid rgba(0, 217, 255, 0.54);
  border-radius: 7px;
  background: rgba(2, 13, 31, 0.94);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
}

.student-handle-mode,
.student-handle-input {
  padding: 3px 6px;
}

.student-handle-save,
.student-profile-menu summary,
.student-profile-tool {
  padding: 3px 8px;
  color: var(--accent);
  cursor: pointer;
}

.student-handle-save:hover,
.student-profile-menu summary:hover,
.student-profile-tool:hover {
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.22);
}

.student-display-name {
  grid-column: 1;
  grid-row: 2;
  max-width: 100%;
  min-width: 0;
  color: var(--accent);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 900;
  line-height: 1.02;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.28);
}

.student-profile-menu {
  position: relative;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.student-profile-menu summary {
  min-width: 48px;
  height: 100%;
  display: grid;
  place-items: center;
  list-style: none;
  text-transform: uppercase;
}

.student-profile-menu summary::-webkit-details-marker {
  display: none;
}

.student-profile-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 180;
  width: min(390px, calc(100vw - 22px));
  display: grid;
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.58);
  border-radius: 8px;
  padding: 8px;
  background: rgba(2, 13, 31, 0.98);
  box-shadow: 0 0 26px rgba(0, 217, 255, 0.22);
}

.student-handle-tools {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 7px;
  padding: 7px;
  background: rgba(7, 35, 78, 0.48);
}

.student-availability-tools {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 7px;
  padding: 7px;
  background: rgba(7, 35, 78, 0.48);
}

.availability-button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.availability-button.is-active,
.availability-button:focus-visible {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(0, 112, 180, 0.62), rgba(2, 13, 31, 0.96));
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.18), 0 0 12px rgba(0, 217, 255, 0.16);
  outline: none;
}

.student-profile-input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 7px;
  background: rgba(2, 13, 31, 0.88);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 6px 7px;
}

.student-profile-input::placeholder {
  color: rgba(190, 215, 242, 0.62);
}

.student-profile-tool {
  display: grid;
  place-items: center;
  text-align: center;
}

.student-profile-import input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.student-points-menu {
  position: relative;
  flex: 0 0 92px;
  min-width: 92px;
  align-content: center;
  padding: 0;
}

.student-points-menu summary {
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  border-radius: 7px;
  padding: 4px 7px;
  cursor: pointer;
  list-style: none;
}

.student-points-menu summary::-webkit-details-marker {
  display: none;
}

.student-points-menu summary span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.student-points-menu summary strong {
  font-size: 13px;
  line-height: 1.1;
}

.student-points-menu[open] summary {
  background: rgba(0, 217, 255, 0.08);
}

.student-points-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 70;
  width: min(420px, calc(100vw - 24px));
  border: 1px solid rgba(0, 217, 255, 0.58);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.97);
  box-shadow: 0 0 26px rgba(0, 217, 255, 0.22);
  padding: 8px;
}

.student-topic-pill span {
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.student-presence-pill {
  border-color: rgba(0, 217, 255, 0.34);
  background:
    radial-gradient(circle at 12% 22%, rgba(0, 217, 255, 0.18), transparent 30%),
    rgba(2, 13, 31, 0.68);
}

.student-presence-pill.availability-away,
.student-presence-pill.availability-back_soon {
  border-color: rgba(0, 217, 255, 0.76);
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.1);
}

.student-ping-pill {
  border-color: rgba(0, 217, 255, 0.28);
  background:
    radial-gradient(circle at 18% 24%, rgba(0, 217, 255, 0.2), transparent 31%),
    rgba(2, 13, 31, 0.72);
}

.student-ping-pill span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.student-ping-pill i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.72);
}

.student-ping-pill.ping-good {
  border-color: rgba(39, 235, 183, 0.55);
}

.student-ping-pill.ping-good i {
  background: #27ebb7;
}

.student-ping-pill.ping-slow,
.student-ping-pill.ping-poor {
  border-color: rgba(0, 136, 255, 0.78);
}

.student-ping-pill.ping-slow i,
.student-ping-pill.ping-poor i {
  animation: pingPulse 1.4s ease-in-out infinite;
}

.student-ping-pill.ping-offline {
  border-color: rgba(255, 73, 134, 0.72);
  box-shadow: inset 0 0 18px rgba(255, 73, 134, 0.12);
}

.student-ping-pill.ping-offline i {
  background: #ff4986;
  box-shadow: 0 0 10px rgba(255, 73, 134, 0.7);
}

@keyframes pingPulse {
  0%, 100% { transform: scale(0.82); opacity: 0.64; }
  50% { transform: scale(1.24); opacity: 1; }
}

.student-page .status-chip {
  min-width: 88px;
  min-height: 38px;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 7px;
  border-width: 1px;
  border-radius: 9px;
  padding: 6px 8px;
  background:
    radial-gradient(circle at 19% 28%, rgba(0, 217, 255, 0.34), transparent 32%),
    linear-gradient(120deg, rgba(0, 217, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(7, 59, 118, 0.98), rgba(3, 17, 38, 0.98));
  box-shadow:
    0 0 28px var(--mode-glow),
    0 0 10px rgba(25, 118, 255, 0.2),
    inset 0 0 20px rgba(0, 217, 255, 0.1);
  color: var(--text);
  line-height: 1;
  text-align: center;
}

.student-page .status-chip::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(0, 217, 255, 0.22) 45%, transparent 92%),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 217, 255, 0.08) 14px 15px, transparent 15px 30px),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(25, 118, 255, 0.07) 15px 16px, transparent 16px 31px);
  opacity: 0.8;
}

.student-page .status-chip-beacon {
  width: 9px;
  height: 9px;
  border-width: 1px;
}

.student-page .status-chip-kicker {
  font-size: 7px;
  letter-spacing: 0.1em;
}

.student-page .status-chip-main {
  font-size: 14px;
  letter-spacing: 0;
}

.student-page .status-chip-frame {
  inset: 6px;
  border-color: rgba(0, 217, 255, 0.34);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.1);
}

.student-page .status-mode-live,
.student-page .status-mode-lab,
.student-page .status-mode-session_today {
  --mode-border: rgba(0, 217, 255, 0.95);
  --mode-glow: rgba(0, 217, 255, 0.34);
  --mode-glow-strong: rgba(0, 217, 255, 0.62);
}

.student-page .status-mode-break,
.student-page .status-mode-away,
.student-page .status-mode-session_over,
.student-page .status-mode-no_scheduled_session {
  --mode-border: rgba(184, 215, 255, 0.64);
  --mode-glow: rgba(184, 215, 255, 0.18);
  --mode-glow-strong: rgba(184, 215, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(184, 215, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(7, 31, 68, 0.98), rgba(3, 17, 38, 0.98));
}

.hand-toggle.is-raised {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(0, 112, 180, 0.76), rgba(6, 36, 84, 0.96));
  color: var(--text);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.2), 0 0 18px rgba(0, 217, 255, 0.24);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-live-slot {
  flex: 1 1 min(760px, 52vw);
  min-width: 280px;
  max-width: min(900px, 58vw);
}

.host-priority-ticker {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.18), rgba(25, 118, 255, 0.1)),
    rgba(2, 13, 31, 0.88);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.1),
    0 0 18px rgba(0, 217, 255, 0.12);
  padding: 6px 9px;
}

.host-priority-ticker-kicker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.host-priority-now {
  max-width: 230px;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-priority-mask {
  min-width: 0;
  overflow: hidden;
}

.host-priority-track {
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
  animation: hostPriorityScroll 30s linear infinite;
  animation-play-state: paused;
}

.host-priority-track-group {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}

.host-priority-track-group[aria-hidden="true"] {
  display: none;
}

.host-priority-ticker-item {
  min-width: 0;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.host-priority-ticker-item b {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.host-priority-ticker-item strong {
  min-width: 0;
  flex: 0 1 auto;
  max-width: min(360px, 28vw);
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-priority-ticker-item em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.host-priority-ticker-hands strong,
.host-priority-ticker-private strong,
.host-priority-ticker-recovery strong,
.host-priority-ticker-room strong {
  max-width: none;
  flex: 0 0 auto;
}

.host-priority-ticker-top-question {
  flex: 1 1 260px;
}

.host-priority-ticker-top-question strong {
  flex: 1 1 auto;
}

@keyframes hostPriorityScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.topbar-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #041225;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 11px;
  text-decoration: none;
  text-transform: uppercase;
}

.topbar-link:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--shadow);
}

.notice-banner {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(6, 54, 110, 0.9);
  color: var(--text);
  box-shadow: 0 0 22px var(--shadow);
  padding: 11px 13px;
  font-weight: 900;
  pointer-events: none;
}

.student-page .notice-banner {
  top: auto;
  right: 10px;
  bottom: 10px;
  width: min(320px, calc(100vw - 20px));
}

.host-page .notice-banner {
  top: auto;
  right: 14px;
  bottom: 14px;
  z-index: 140;
  width: min(420px, calc(100vw - 28px));
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--layout-grid-gap);
}

.surface-grid {
  grid-auto-rows: var(--layout-grid-row);
  align-items: stretch;
}

.student-layout.surface-grid,
.layout-grid-student {
  --layout-grid-row: clamp(64px, calc((100vh - 170px) / 13), 88px);
}

.admin-layout.surface-grid,
.layout-grid-admin {
  --layout-grid-row: clamp(58px, calc((100vh - 180px) / 10), 74px);
}

.host-layout.surface-grid,
.layout-grid-host {
  --layout-grid-row: clamp(40px, calc((100vh - 240px) / 18), 58px);
}

.host-page {
  width: min(1680px, calc(100% - 28px));
  padding-bottom: 0;
}

.host-layout-tab-main {
  --host-main-chrome: 520px;
  --host-main-grid-gaps: 100px;
  --layout-grid-row: clamp(42px, calc((100dvh - var(--host-main-chrome) - var(--host-main-grid-gaps)) / 7), 56px);
}

.host-layout.host-layout-tab-main {
  --host-main-chrome: 520px;
  --host-main-grid-gaps: 100px;
  --layout-grid-row: clamp(42px, calc((100dvh - var(--host-main-chrome) - var(--host-main-grid-gaps)) / 7), 56px);
}

.host-layout-tab-overlay,
.host-layout-tab-resources {
  --layout-grid-row: clamp(42px, calc((100vh - 230px) / 9), 58px);
}

.host-layout-tab-history {
  --layout-grid-row: clamp(42px, calc((100vh - 230px) / 8), 60px);
}

.student-dense,
.host-dense {
  align-items: stretch;
}

.host-layout {
  grid-auto-flow: dense;
}

.student-mobile-stack {
  display: grid;
  gap: 8px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 36, 80, 0.82), rgba(3, 17, 38, 0.9)),
    rgba(2, 13, 31, 0.72);
  backdrop-filter: blur(14px) saturate(1.18);
  box-shadow:
    0 0 0 1px rgba(239, 251, 255, 0.03) inset,
    0 0 20px rgba(0, 217, 255, 0.08);
  padding: 12px;
  min-width: 0;
}

.panel.accent {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(6, 54, 110, 0.96), rgba(7, 31, 68, 0.98));
  box-shadow: 0 0 26px var(--shadow);
}

.panel h2,
.panel h3 {
  margin: 0 0 12px;
  line-height: 1.1;
}

.panel h2 {
  font-size: 19px;
}

.panel h3 {
  font-size: 15px;
  color: var(--text);
}

.label {
  display: block;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.student-layout .input-hub-panel {
  grid-column: span 12;
}

.student-layout .question-panel {
  grid-column: span 4;
}

.student-layout .status-panel {
  grid-column: span 3;
}

.student-layout .reaction-panel {
  grid-column: span 4;
}

.student-layout .command-panel,
.student-layout .resources-panel,
.student-layout .instructor-panel,
.student-layout .identity-panel,
.student-layout .leaderboard-panel {
  grid-column: span 4;
}

.student-layout .secondary-details {
  grid-column: span 4;
}

.collapsible-surface {
  align-self: start;
}

.collapsible-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.42);
  cursor: pointer;
  list-style: none;
  padding: 8px 9px;
}

.student-layout .widget-block .collapsible-summary {
  padding-right: 46px;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-summary .label {
  margin-bottom: 3px;
  font-size: 9px;
}

.collapsible-summary strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.1;
}

.surface-count {
  height: 24px;
  min-width: 36px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
  text-align: center;
  white-space: nowrap;
}

.surface-count.is-zero {
  border-color: rgba(148, 181, 214, 0.25);
  color: var(--muted);
}

.collapse-mark {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.82);
  color: var(--accent);
  font-size: 0;
  font-weight: 900;
  box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.08), 0 0 10px rgba(0, 217, 255, 0.1);
}

.collapse-mark::before {
  content: "";
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 7px rgba(0, 217, 255, 0.7);
}

.collapse-mark::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 7px rgba(0, 217, 255, 0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}

.collapsible-surface[open] .collapse-mark::after {
  opacity: 0;
  transform: scaleY(0.18);
}

.collapsible-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.static-student-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
}

.static-lobby-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.static-command-lobby {
  position: relative;
  grid-column: 1 / -1;
  min-height: clamp(300px, 42vh, 420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.34fr);
  gap: 18px;
  align-content: center;
  overflow: hidden;
}

.static-command-lobby::before,
.static-command-lobby::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.static-command-lobby::before {
  inset: 18px;
  border: 1px solid rgba(0, 217, 255, 0.18);
  clip-path: polygon(0 0, 16% 0, 16% 2px, 2px 2px, 2px 16%, 0 16%, 0 0, 84% 0, 84% 2px, calc(100% - 2px) 2px, calc(100% - 2px) 16%, 100% 16%, 100% 0, 100% 84%, calc(100% - 2px) 84%, calc(100% - 2px) calc(100% - 2px), 84% calc(100% - 2px), 84% 100%, 100% 100%, 16% 100%, 16% calc(100% - 2px), 2px calc(100% - 2px), 2px 84%, 0 84%);
}

.static-command-lobby::after {
  right: -8%;
  top: -18%;
  width: min(460px, 42vw);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 50%;
  box-shadow: inset 0 0 44px rgba(0, 217, 255, 0.08), 0 0 54px rgba(0, 217, 255, 0.12);
}

.static-lobby-copy,
.static-schedule,
.static-lobby-footer {
  position: relative;
  z-index: 1;
}

.away-card h2 {
  font-size: clamp(34px, 7vw, 72px);
  line-height: 0.96;
}

.static-note {
  max-width: 760px;
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.25;
}

.static-schedule {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.static-lobby-orbit {
  position: relative;
  z-index: 1;
  width: min(220px, 34vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 217, 255, 0.18), transparent 52%),
    repeating-conic-gradient(from 90deg, rgba(0, 217, 255, 0.14) 0 8deg, transparent 8deg 24deg);
  box-shadow: inset 0 0 38px rgba(0, 217, 255, 0.12), 0 0 38px rgba(0, 217, 255, 0.16);
}

.static-lobby-orbit span {
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 14px;
  background: rgba(2, 13, 31, 0.82);
  color: var(--accent);
  font-size: clamp(28px, 5vw, 58px);
  font-weight: 900;
  text-shadow: 0 0 22px rgba(0, 217, 255, 0.7);
}

.static-lobby-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 217, 255, 0.2);
  padding-top: 12px;
}

.static-lobby-footer span,
.static-lobby-footer b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.static-lobby-footer b {
  color: var(--accent);
}

.static-links {
  margin-top: 0;
}

.static-contact {
  display: grid;
  gap: 7px;
  align-content: start;
}

.static-contact p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.static-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.student-entry-page {
  min-height: 100vh;
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 18px;
}

.entry-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entry-date-chip {
  border: 1px solid rgba(0, 217, 255, 0.64);
  border-radius: 999px;
  background: rgba(3, 16, 36, 0.78);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 11px;
  text-transform: uppercase;
}

.student-entry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.entry-greeting-copy h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 4vw, 42px);
  line-height: 1.02;
}

.entry-greeting-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.entry-qr-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.64);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1);
  padding: 10px;
}

.entry-qr-card img {
  width: min(180px, 42vw);
  aspect-ratio: 1;
  border-radius: 7px;
}

.entry-qr-card strong {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.entry-code-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.35fr) auto;
  align-items: end;
  gap: 8px;
}

.entry-code-form .field {
  margin: 0;
}

.entry-code-form input {
  min-height: 44px;
  font-size: 18px;
  font-weight: 900;
}

.entry-gate-error {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: var(--comfort-low-2);
  font-weight: 900;
}

.student-entry-profile-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.58);
  padding: 10px;
}

.student-entry-profile-panel h3 {
  margin: 2px 0 4px;
  font-size: 18px;
}

.student-entry-profile-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.entry-profile-grid,
.entry-profile-fields {
  display: grid;
  gap: 8px;
}

.entry-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entry-profile-fields {
  grid-column: 2;
  grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
}

.entry-profile-action {
  min-height: 44px;
  text-align: center;
}

.entry-profile-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.entry-profile-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.host-layout .wide {
  grid-column: span 7;
}

.host-layout .side {
  grid-column: span 5;
}

.host-layout .half {
  grid-column: span 4;
}

.host-layout .leaderboard-panel {
  grid-column: span 4;
}

.host-dense .side {
  max-height: none;
  overflow: visible;
}

.attention-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  border-color: rgba(0, 217, 255, 0.64);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), rgba(11, 36, 74, 0.72) 42%, rgba(1, 9, 20, 0.9)),
    radial-gradient(circle at 16% 12%, rgba(239, 251, 255, 0.14), transparent 28%);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.2) inset,
    0 0 28px rgba(0, 217, 255, 0.14);
}

.attention-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(0, 217, 255, 0.22) 22% 22.5%, transparent 22.5% 100%),
    linear-gradient(180deg, transparent 0 55%, rgba(96, 165, 250, 0.16) 55% 55.5%, transparent 55.5% 100%);
}

.attention-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.attention-head h2 {
  margin: 0;
  font-size: clamp(20px, 1.45vw, 26px);
  line-height: 1.05;
}

.attention-head > strong {
  color: var(--accent);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.12;
  text-shadow: 0 0 16px rgba(0, 217, 255, 0.38);
}

.attention-counts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.attention-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 217, 255, 0.45);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(3, 16, 34, 0.7);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.attention-pill b {
  color: var(--accent);
  font-size: 15px;
}

.host-signal-board {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(125, 247, 255, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(2, 13, 31, 0.88), rgba(8, 42, 91, 0.62)),
    rgba(1, 10, 24, 0.86);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
  padding: 9px;
}

.host-signal-board-compact {
  min-height: 28px;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 5px 8px;
}

.host-signal-board-compact span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.host-signal-board-compact strong {
  color: var(--text);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1;
  white-space: nowrap;
}

.host-signal-board-compact small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-signal-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.host-signal-board-head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.host-signal-board-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}

.host-signal-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.host-reaction-surge {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(125, 247, 255, 0.56);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(7, 17, 31, 0.78)),
    rgba(3, 16, 36, 0.88);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.12),
    0 0 22px rgba(0, 217, 255, 0.14);
  padding: 9px;
}

.host-reaction-surge-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.host-reaction-surge-head span {
  min-width: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.host-reaction-surge-head strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
}

.host-reaction-surge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.host-reaction-surge-card {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(239, 251, 255, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.22), rgba(2, 13, 31, 0.9)),
    rgba(2, 13, 31, 0.9);
  padding: 10px;
}

.host-reaction-surge-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}

.host-reaction-surge-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.46));
}

.host-reaction-surge-card strong,
.host-reaction-surge-card small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-reaction-surge-card strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.host-reaction-surge-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.host-signal-card {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(104px, auto);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 96, 176, 0.2), rgba(1, 10, 24, 0.82)),
    rgba(2, 13, 31, 0.88);
  padding: 10px;
}

.host-signal-card.severity-critical,
.host-signal-card.severity-high {
  border-color: rgba(239, 251, 255, 0.74);
  box-shadow:
    0 0 24px rgba(0, 217, 255, 0.18),
    inset 0 0 18px rgba(0, 217, 255, 0.12);
}

.host-signal-card.severity-critical {
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.25), rgba(3, 16, 34, 0.88)),
    rgba(2, 13, 31, 0.94);
}

.host-signal-idle {
  grid-template-columns: 48px minmax(0, 1fr);
  border-style: dashed;
  opacity: 0.86;
}

.host-signal-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.host-signal-icon .action-icon,
.host-signal-icon .comfort-icon {
  width: 44px;
  height: 44px;
}

.host-signal-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.host-signal-copy span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.host-signal-copy strong {
  overflow-wrap: normal;
  color: var(--text);
  font-size: clamp(20px, 1.9vw, 32px);
  line-height: 0.98;
}

.host-signal-copy small {
  overflow-wrap: normal;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}

.host-signal-dismiss {
  min-height: 54px;
  min-width: 104px;
  align-self: stretch;
  justify-self: end;
  padding: 8px 12px;
  font-size: 12px;
}

.attention-pill-critical,
.attention-pill-hands {
  border-color: rgba(239, 251, 255, 0.76);
  background: rgba(0, 217, 255, 0.16);
  color: var(--text);
}

.attention-teaching-move {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 0.56fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(7, 17, 31, 0.82)),
    rgba(5, 22, 48, 0.82);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.16);
}

.attention-teaching-move::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.32;
  background: linear-gradient(90deg, transparent, rgba(239, 251, 255, 0.22), transparent);
}

.attention-teaching-copy,
.attention-teaching-steps {
  position: relative;
  min-width: 0;
}

.attention-teaching-copy span {
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.attention-teaching-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1.05;
}

.attention-teaching-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.attention-teaching-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.attention-list {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.attention-card {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(1, 12, 27, 0.78);
}

.attention-card.severity-critical {
  border-color: rgba(239, 251, 255, 0.86);
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.24), rgba(3, 16, 34, 0.84)),
    rgba(1, 12, 27, 0.88);
  box-shadow: 0 0 22px rgba(0, 217, 255, 0.3);
}

.attention-card.severity-high {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(4, 28, 64, 0.82);
}

.attention-severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.82);
}

.attention-card-copy {
  min-width: 0;
}

.attention-card-copy strong,
.attention-card-copy p {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-card-copy strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.attention-card-copy p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}

.attention-card em,
.attention-more {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
}

.attention-empty {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px dashed rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(1, 12, 27, 0.5);
}

.attention-empty strong {
  color: var(--text);
}

.attention-more {
  padding: 4px 7px;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 999px;
  justify-self: start;
  background: rgba(3, 16, 34, 0.76);
}

.attention-panel.widget-h-4 {
  gap: 5px;
}

.attention-panel.widget-h-4 .attention-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.attention-panel.widget-h-4 .attention-head h2 {
  font-size: 18px;
}

.attention-panel.widget-h-4 .attention-head > strong {
  align-self: end;
  font-size: 13px;
  line-height: 1;
  text-align: right;
}

.attention-panel.widget-h-4 .attention-counts {
  gap: 3px;
}

.attention-panel.widget-h-4 .attention-pill {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 10px;
}

.attention-panel.widget-h-4 .attention-pill b {
  font-size: 13px;
}

.attention-panel.widget-h-4 .attention-list {
  gap: 4px;
}

.attention-panel.widget-h-4 .attention-card {
  min-height: 31px;
  padding: 5px 7px;
}

.attention-panel.widget-h-4 .attention-card-copy p,
.attention-panel.widget-h-4 .attention-card em {
  display: none;
}

.attention-panel.widget-h-4 .attention-more {
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1;
}

.attention-panel.widget-short .attention-card-copy p,
.attention-panel.widget-short .attention-card em {
  display: none;
}

.attention-panel.widget-short .attention-teaching-move {
  grid-template-columns: minmax(0, 1fr);
  padding: 6px 7px;
}

.attention-panel.widget-short .attention-teaching-copy p,
.attention-panel.widget-short .attention-teaching-steps {
  display: none;
}

.attention-panel.widget-short .attention-card {
  min-height: 28px;
  padding-block: 4px;
}

.host-page .topbar {
  margin-bottom: 8px;
}

.host-page .panel {
  padding: 8px;
}

.host-page .panel h2,
.host-page .panel h3 {
  margin-bottom: 6px;
}

.host-page .panel h2 {
  font-size: 16px;
}

.host-page .attention-head h2 {
  font-size: clamp(20px, 1.45vw, 26px);
}

.host-page .attention-head > strong {
  font-size: clamp(15px, 1.05vw, 18px);
}

.host-page .label {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.11em;
}

.host-publish-panel,
.host-resource-panel,
.host-command-panel,
.host-recovery-panel,
.host-condition-panel,
.host-reaction-details {
  align-self: start;
}

.host-queue-panel .list {
  gap: 5px;
}

.host-queue-panel {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
}

.host-layout-tab-overlay > .host-overlay-control-panel,
.host-layout-tab-resources > .host-resource-panel,
.host-layout-tab-history > .signal-panel,
.host-layout-tab-history > .host-chat-intake-panel,
.host-layout-tab-history > .leaderboard-panel,
.host-layout-tab-history > .archive-panel,
.host-layout-tab-history > .host-reaction-details {
  overflow: auto;
}

.host-recovery-panel {
  display: grid;
  gap: 7px;
  align-content: start;
  border-color: rgba(125, 247, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.18), rgba(25, 118, 255, 0.1)),
    rgba(2, 13, 31, 0.9);
}

.host-recovery-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.host-recovery-head h2 {
  margin-bottom: 0;
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 1.05;
}

.host-recovery-head > strong {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 6px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.host-recovery-head-compact {
  align-items: center;
}

.host-recovery-head-compact h2 {
  font-size: clamp(17px, 1.1vw, 20px);
}

.host-recovery-head-compact > strong {
  padding: 5px 7px;
  font-size: 10px;
}

.host-recovery-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.host-recovery-action-grid .action-button,
.host-recovery-action-grid .ghost-button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 10px;
  line-height: 1.08;
}

.host-recovery-action-grid a {
  text-decoration: none;
}

.host-recovery-action-grid-compact {
  gap: 5px;
}

.host-recovery-action-grid-compact .action-button,
.host-recovery-action-grid-compact .ghost-button {
  min-height: 32px;
  padding: 6px 7px;
  font-size: 11px;
}

.host-recovery-link-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.host-recovery-link-row a {
  flex: 1 1 64px;
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.host-recovery-guardrail {
  display: grid;
  gap: 3px;
  border: 1px dashed rgba(125, 247, 255, 0.46);
  border-radius: 8px;
  background: rgba(1, 12, 27, 0.56);
  padding: 7px 8px;
}

.host-recovery-guardrail strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.12;
}

.host-recovery-guardrail span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.host-recovery-guardrail-compact {
  padding: 6px 7px;
}

.host-recovery-guardrail-compact strong {
  font-size: 11px;
}

.host-recovery-guardrail-compact span {
  font-size: 10px;
  line-height: 1.1;
}

.host-condition-panel {
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: hidden;
  border-color: rgba(125, 247, 255, 0.64);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), rgba(25, 118, 255, 0.08)),
    rgba(2, 13, 31, 0.9);
}

.host-condition-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.host-condition-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
}

.host-condition-head > strong {
  min-width: 0;
  max-width: 54%;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-condition-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) minmax(120px, 0.7fr) minmax(190px, 1fr) minmax(150px, 0.8fr);
  gap: 7px;
}

.host-condition-tile {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.12), rgba(2, 8, 23, 0.74)),
    rgba(3, 16, 36, 0.72);
  padding: 8px 9px;
}

.host-condition-tile span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.host-condition-tile strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-condition-tile small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-condition-tile em {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.host-condition-chip-row {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
}

.host-condition-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.08);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 5px;
  white-space: nowrap;
}

.host-condition-chip b {
  max-width: 58px;
  overflow: hidden;
  color: var(--text);
  font-weight: 950;
  text-overflow: ellipsis;
}

.host-condition-pressure.is-active {
  border-color: rgba(125, 247, 255, 0.78);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.11);
}

.host-condition-pressure.is-active strong {
  color: var(--accent);
}

.host-condition-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
}

.host-condition-actions .ghost-button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
}

.host-page.host-hands-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 2px solid rgba(0, 217, 255, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 34px rgba(0, 217, 255, 0.18);
  animation: hostHandFramePulse 1.35s ease-in-out infinite;
}

.host-hand-alert {
  position: sticky;
  top: 8px;
  z-index: 96;
  display: grid;
  grid-template-columns: 40px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: min(760px, calc(100vw - 32px));
  margin: -2px auto 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(0, 217, 255, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.24), rgba(0, 80, 170, 0.18)),
    rgba(2, 13, 31, 0.94);
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 28px rgba(0, 217, 255, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.34);
  text-transform: uppercase;
  animation: hostHandAlertPulse 1.1s ease-in-out infinite;
}

.host-hand-alert-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 10px;
  background: rgba(0, 217, 255, 0.14);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.3);
}

.host-hand-alert-icon svg {
  width: 28px;
  height: 28px;
}

.host-hand-alert-icon path,
.overlay-hand-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.host-hand-alert-icon .hand-alert-glow,
.overlay-hand-icon .hand-alert-glow {
  stroke: #91f5ff;
  stroke-width: 2.5;
}

.host-hand-alert strong {
  color: var(--accent);
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1;
  letter-spacing: 0;
}

.host-hand-alert span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes hostHandAlertPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 24px rgba(0, 217, 255, 0.34),
      0 10px 24px rgba(0, 0, 0, 0.34);
  }
  50% {
    transform: translateY(1px) scale(1.012);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.24) inset,
      0 0 42px rgba(0, 217, 255, 0.62),
      0 10px 24px rgba(0, 0, 0, 0.34);
  }
}

@keyframes hostHandFramePulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

.queue-focus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 112, 180, 0.18), rgba(2, 13, 31, 0.9)),
    rgba(3, 16, 36, 0.78);
}

.queue-focus-head-compact {
  gap: 3px;
  padding: 9px 10px;
}

.queue-focus-head-compact .queue-focus-title {
  gap: 3px;
}

.queue-focus-head-compact .queue-focus-title span {
  display: none;
}

.queue-focus-head-compact .queue-focus-title strong {
  font-size: clamp(20px, 1.35vw, 24px);
  line-height: 1.02;
}

.queue-focus-head-compact .queue-presence-line {
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-focus-head-alert {
  border-color: rgba(0, 217, 255, 0.88);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.22);
}

.queue-focus-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.queue-focus-title span {
  min-width: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.queue-focus-title strong {
  min-width: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}

.queue-presence-line {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.host-queue-list {
  min-height: 0;
}

.queue-list-compact {
  gap: 4px;
}

.queue-list-compact .queue-hand-row-active {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  min-height: 44px;
  padding: 7px 9px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 16px rgba(0, 217, 255, 0.32);
}

.queue-list-compact .queue-hand-pulse {
  width: 32px;
  height: 32px;
}

.queue-list-compact .queue-hand-pulse svg {
  width: 30px;
  height: 30px;
}

.queue-list-compact .queue-hand-row-active strong {
  overflow: hidden;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-list-compact .compact-more {
  min-height: 25px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1;
}

.queue-list-compact .queue-question-row {
  gap: 5px;
  padding: 8px 9px;
}

.queue-list-compact .queue-row-minimal {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
}

.queue-list-compact .queue-question-row > strong {
  max-height: 2.35em;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.15;
}

.queue-list-compact .queue-row-minimal > strong {
  grid-column: 1;
}

.queue-list-compact .question-meta {
  gap: 5px;
}

.queue-list-compact .queue-row-minimal .question-meta {
  grid-column: 2;
  justify-content: end;
}

.queue-list-compact .queue-score-chip {
  min-width: 46px;
  min-height: 24px;
  padding: 2px 6px;
  font-size: 9px;
}

.queue-list-compact .queue-row-minimal .queue-score-chip {
  display: none;
}

.queue-list-compact .score-chip span {
  font-size: 13px;
}

.queue-list-compact .host-question-actions-minimal {
  gap: 5px;
}

.queue-list-compact .host-question-actions-minimal .ghost-button {
  min-width: 56px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11px;
}

.host-queue-panel .question-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
}

.host-queue-panel .question-row > strong {
  min-width: 0;
  max-height: 2.35em;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
}

.host-queue-panel.widget-tall .question-row > strong {
  max-height: none;
}

.host-queue-panel .question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
}

.host-queue-panel .question-author {
  display: none;
}

.host-queue-panel.widget-tall .question-author {
  display: inline-flex;
  max-width: 96px;
  min-height: 24px;
  padding: 4px 6px;
  font-size: 10px;
}

.host-queue-panel .score-chip {
  min-width: 58px;
  min-height: 28px;
  border-radius: 7px;
  font-size: 9px;
  padding: 3px 7px;
}

.host-queue-panel .queue-score-chip {
  width: auto;
  min-width: 58px;
  max-width: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  gap: 3px;
}

.host-queue-panel .score-chip span {
  font-size: 13px;
}

.host-queue-panel .answer-button {
  width: auto;
  min-width: 44px;
  min-height: 24px;
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.host-question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.host-question-actions-compact {
  justify-content: flex-end;
  gap: 6px;
}

.host-question-actions .ghost-button {
  width: auto;
  min-width: 54px;
  min-height: 31px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.host-queue-panel .compact-answer-button {
  min-width: 52px;
  max-width: none;
  padding-inline: 9px;
}

.host-queue-panel .answering-button {
  min-width: 82px;
  max-width: none;
  padding-inline: 9px;
}

.queue-section-label {
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 999px;
  background: rgba(4, 18, 37, 0.78);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
  justify-self: start;
  margin-top: 1px;
  color: var(--muted);
}

.queue-section-label-alert {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.64);
}

.queue-section-label-private,
.queue-summary-private {
  border-color: rgba(96, 165, 250, 0.78);
  color: #effbff;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(3, 16, 34, 0.88)),
    rgba(3, 16, 34, 0.86);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.18);
}

.queue-hand-row {
  min-height: 42px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.18;
}

.queue-hand-row-active {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border-color: rgba(0, 217, 255, 0.98);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(0, 65, 155, 0.18)),
    rgba(2, 13, 31, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 18px rgba(0, 217, 255, 0.36);
  color: var(--text);
}

.private-note-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content max-content max-content;
  align-items: center;
  gap: 6px;
  border-color: rgba(96, 165, 250, 0.66);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.18), transparent 50%),
    rgba(2, 13, 31, 0.9);
  box-shadow: inset 0 0 16px rgba(96, 165, 250, 0.08);
}

.help-request-row {
  grid-template-columns: 42px minmax(0, 1fr) max-content max-content max-content max-content;
  border-color: rgba(0, 217, 255, 0.92);
  background:
    radial-gradient(circle at 0% 50%, rgba(0, 217, 255, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(0, 84, 180, 0.26), transparent 58%),
    rgba(2, 13, 31, 0.94);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.12),
    0 0 18px rgba(0, 217, 255, 0.16);
}

.help-request-row .private-note-icon {
  border-color: rgba(0, 217, 255, 0.92);
  background: rgba(0, 217, 255, 0.16);
  color: var(--text);
}

.help-request-row .help-request-contact-actions {
  flex-wrap: nowrap;
}

.private-note-icon {
  width: 38px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.62);
  border-radius: 7px;
  color: var(--accent);
  font-weight: 950;
  font-size: 8px;
  line-height: 1;
  background: rgba(0, 217, 255, 0.1);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
}

.private-note-row strong {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-note-row span:not(.private-note-icon) {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.private-note-ack-button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1;
}

.private-note-promote-button {
  min-height: 24px;
  padding: 3px 7px;
  border-color: rgba(0, 217, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.28), rgba(37, 99, 235, 0.18)),
    rgba(3, 16, 36, 0.92);
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.18);
}

@container (max-width: 440px) {
  .private-note-row {
    grid-template-columns: 42px minmax(0, 1fr) max-content;
  }

  .help-request-row .help-request-contact-actions {
    grid-column: 2 / -1;
  }

  .private-note-row span:not(.private-note-icon) {
    grid-column: 2 / -1;
  }
}

.queue-hand-row-active strong,
.queue-hand-row-active span:not(.queue-hand-pulse) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-hand-row-active strong {
  color: var(--text);
  font-size: 15px;
}

.queue-hand-row-active span:not(.queue-hand-pulse) {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.queue-hand-pulse {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.85);
  border-radius: 9px;
  background: rgba(0, 217, 255, 0.14);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.36);
  animation: queueHandPulse 1s ease-in-out infinite;
}

.queue-hand-pulse svg {
  width: 23px;
  height: 23px;
}

@keyframes queueHandPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.queue-away-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 2px 6px;
  padding: 5px 6px;
  border-color: rgba(0, 217, 255, 0.34);
  background: rgba(2, 13, 31, 0.68);
  font-size: 11px;
  line-height: 1.15;
}

.queue-away-row strong,
.queue-away-row span,
.queue-away-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-away-row span {
  color: var(--accent);
  font-weight: 900;
  text-align: right;
}

.queue-away-row em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
}

.admin-layout {
  align-items: start;
  gap: 8px;
  grid-auto-flow: dense;
}

.admin-page {
  width: min(980px, calc(100% - 20px));
}

.admin-page .brand-mark {
  width: 44px;
  height: 44px;
}

.admin-page .brand h1 {
  font-size: 28px;
}

.admin-page .topbar {
  gap: 10px;
}

.admin-page .topbar-actions {
  gap: 6px;
}

.admin-page .topbar-link {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.admin-layout .panel {
  padding: 10px;
}

.admin-layout .panel h2 {
  margin-bottom: 8px;
  font-size: 17px;
}

.admin-layout .label {
  margin-bottom: 5px;
  font-size: 10px;
}

.admin-layout .list {
  gap: 6px;
}

.admin-layout .list-item {
  padding: 7px;
  font-size: 13px;
  line-height: 1.18;
}

.admin-ops-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.admin-after-wizard[hidden] {
  display: none;
}

.admin-page.class-wizard-focus .class-wizard-launch {
  display: none;
}

.admin-page.class-wizard-focus .class-step-wizard.is-open {
  max-width: 1120px;
  margin: 0 auto 10px;
}

.admin-layout-help,
.host-layout-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.68);
  padding: 6px 8px;
}

.admin-layout-help div,
.host-layout-help div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-layout-help strong,
.host-layout-help strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}

.admin-layout-help span,
.host-layout-help span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-layout-help .ghost-button,
.host-layout-help .ghost-button {
  min-height: 36px;
  white-space: nowrap;
}

.host-layout-help-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 6px;
}

.host-overlay-setup-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  border: 1px solid rgba(125, 247, 255, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), rgba(7, 31, 68, 0.64)),
    rgba(2, 13, 31, 0.7);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
  padding: 7px 9px;
}

.host-overlay-setup-callout > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.host-overlay-setup-callout strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.1;
}

.host-overlay-setup-callout small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.host-overlay-setup-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.host-overlay-setup-actions .ghost-button {
  min-height: 36px;
  white-space: nowrap;
}

.host-tab-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 7px;
}

.host-tab-button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 83, 156, 0.16), rgba(2, 13, 31, 0.82)),
    rgba(2, 13, 31, 0.72);
  color: var(--muted);
  padding: 7px 9px;
  text-decoration: none;
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.05);
}

.host-tab-button strong,
.host-tab-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-tab-button strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
  text-transform: uppercase;
}

.host-tab-button span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.host-tab-button.is-active {
  border-color: rgba(0, 217, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.26), rgba(25, 118, 255, 0.16)),
    rgba(2, 13, 31, 0.86);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.14),
    0 0 18px rgba(0, 217, 255, 0.14);
}

.host-tab-button.is-active span {
  color: rgba(239, 251, 255, 0.82);
}

.host-command-strip {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 6px;
  border: 1px solid rgba(125, 247, 255, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(7, 31, 68, 0.74)),
    rgba(2, 13, 31, 0.72);
  backdrop-filter: blur(16px) saturate(1.18);
  box-shadow:
    inset 0 0 20px rgba(0, 217, 255, 0.1),
    0 0 24px rgba(0, 217, 255, 0.12);
  padding: 7px;
}

.host-command-strip-state {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.52);
  padding: 8px 10px;
}

.host-command-strip-state span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.host-command-strip-state strong,
.host-command-strip-state small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-command-strip-state strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.host-command-strip-state small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
}

.host-output-readiness-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.host-output-readiness-chip {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.12), rgba(2, 8, 23, 0.78)),
    rgba(3, 16, 36, 0.7);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.08;
  padding: 6px 7px;
}

.host-output-readiness-chip.is-live,
.host-output-readiness-chip.is-staged {
  border-color: rgba(125, 247, 255, 0.68);
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.1);
}

.host-output-readiness-chip b,
.host-output-readiness-chip strong,
.host-output-readiness-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-output-readiness-chip b {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.host-output-readiness-chip strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
}

.host-output-readiness-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.host-command-strip-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.host-command-strip-actions .host-cockpit-button {
  min-height: 42px;
}

.host-live-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  margin: 0 0 6px;
  border: 1px solid rgba(0, 217, 255, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.16), rgba(4, 18, 41, 0.84)),
    rgba(2, 13, 31, 0.82);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.1),
    0 0 22px rgba(0, 217, 255, 0.12);
  padding: 6px;
}

.host-live-cockpit-head {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(125, 247, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.62);
  padding: 8px;
}

.host-live-cockpit-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.host-live-cockpit-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: normal;
}

.host-priority-grid {
  display: grid;
  grid-template-columns: minmax(168px, 0.85fr) minmax(300px, 1.35fr) minmax(190px, 0.9fr) minmax(220px, 1fr);
  gap: 6px;
  min-width: 0;
}

.host-priority-cell {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.12), rgba(2, 13, 31, 0.9)),
    rgba(4, 18, 41, 0.82);
  padding: 7px;
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.07);
}

.host-priority-cell.is-hot {
  border-color: rgba(125, 247, 255, 0.74);
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.18), rgba(25, 118, 255, 0.12)),
    rgba(4, 18, 41, 0.9);
}

.host-priority-cell > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.host-priority-cell > strong {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.host-priority-cell > small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.host-priority-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
}

.host-priority-hands .host-priority-actions {
  grid-template-columns: minmax(0, 1fr);
}

.host-priority-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-self: end;
}

.host-priority-metrics span {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  padding: 6px 4px;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.host-recovery-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.host-cockpit-button {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.18), rgba(2, 13, 31, 0.9)),
    rgba(4, 18, 41, 0.86);
  color: var(--text);
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 950;
  line-height: 1.08;
  padding: 6px 7px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
  cursor: pointer;
}

.host-cockpit-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.12),
    0 0 18px rgba(0, 217, 255, 0.16);
}

.host-cockpit-button.is-primary {
  border-color: rgba(125, 247, 255, 0.82);
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.24), rgba(25, 118, 255, 0.16)),
    rgba(4, 18, 41, 0.9);
}

.host-cockpit-button:disabled {
  opacity: 0.48;
  cursor: default;
}

.host-cockpit-button:disabled:hover {
  transform: none;
  border-color: rgba(0, 217, 255, 0.5);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
}

.host-cockpit-button .action-icon {
  width: 40px;
  height: 40px;
}

.host-cockpit-button .action-icon svg {
  width: 31px;
  height: 31px;
}

.host-cockpit-button span:last-child {
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.08;
}

@media (max-width: 980px) {
  .host-live-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-live-slot {
    flex-basis: 100%;
    max-width: none;
    order: 3;
  }

  .host-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .host-command-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .host-command-strip-actions {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  .host-priority-recovery {
    grid-column: 1 / -1;
  }
}

@media (max-height: 860px) {
  .host-page {
    padding-bottom: 8px;
    width: min(1680px, calc(100% - 20px));
  }

  .host-page .topbar {
    gap: 8px;
    margin-bottom: 4px;
    padding: 2px 0;
  }

  .host-page .brand {
    gap: 8px;
  }

  .host-page .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .host-page .brand h1 {
    font-size: 24px;
    line-height: 1.04;
  }

  .host-page .brand p {
    margin-top: 0;
    font-size: 11px;
  }

  .host-page .topbar-actions {
    gap: 6px;
  }

  .host-page .topbar-link {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .host-page .status-chip {
    min-height: 30px;
    grid-template-columns: 8px minmax(0, 1fr);
    column-gap: 6px;
    padding: 5px 8px;
  }

  .host-page .status-chip-kicker {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .host-page .status-chip-main {
    font-size: 10px;
  }

  .host-page .topbar-live-slot {
    flex-basis: min(520px, 42vw);
    min-width: 260px;
    max-width: min(620px, 46vw);
  }

  .host-page .host-priority-ticker {
    min-height: 32px;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 6px;
    padding: 4px 7px;
  }

  .host-page .host-priority-ticker-kicker,
  .host-page .host-priority-ticker-item b {
    font-size: 10px;
  }

  .host-page .host-priority-now,
  .host-page .host-priority-ticker-item strong {
    font-size: 12px;
  }

  .host-page .host-priority-ticker-item em {
    display: none;
  }

  .host-page .host-layout-help {
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 6px;
  }

  .host-page .host-layout-help span {
    display: none;
  }

  .host-page .host-layout-help strong {
    font-size: 11px;
  }

  .host-page .host-layout-help .ghost-button {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .host-page .host-tab-rail {
    gap: 5px;
    margin-bottom: 4px;
  }

  .host-page .host-tab-button {
    min-height: 32px;
    gap: 0;
    padding: 4px 7px;
  }

  .host-page .host-tab-button strong {
    font-size: 11px;
  }

  .host-page .host-tab-button span {
    display: none;
  }

  .host-page .host-live-cockpit {
    gap: 4px;
    margin-bottom: 4px;
    padding: 4px;
  }

  .host-page .host-command-strip {
    gap: 4px;
    margin-bottom: 4px;
    padding: 5px;
  }

  .host-page .host-command-strip-state {
    padding: 5px 7px;
  }

  .host-page .host-command-strip-state span {
    font-size: 10px;
  }

  .host-page .host-command-strip-state strong {
    font-size: 12px;
  }

  .host-page .host-command-strip-state small {
    font-size: 10px;
  }

  .host-page .host-command-strip-actions {
    gap: 4px;
    grid-template-columns: repeat(6, minmax(88px, 1fr));
  }

  .host-page .host-priority-grid {
    gap: 4px;
  }

  .host-page .host-priority-cell {
    min-height: 78px;
    gap: 3px;
    padding: 5px;
  }

  .host-page .host-priority-cell > span {
    font-size: 10px;
  }

  .host-page .host-priority-cell > strong {
    font-size: 13px;
    -webkit-line-clamp: 1;
  }

  .host-page .host-priority-cell > small {
    display: none;
  }

  .host-page .host-priority-actions {
    gap: 3px;
  }

  .host-page .host-priority-metrics span {
    padding: 5px 3px;
    font-size: 10px;
  }

  .host-page .host-cockpit-button {
    min-height: 30px;
    padding: 5px 6px;
    font-size: 10px;
  }

  .host-page .panel {
    padding: 6px;
  }

  .host-page .panel h2 {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .host-page .label {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .host-layout-tab-main {
    --layout-grid-gap: 6px;
    --host-main-chrome: 328px;
    --host-main-grid-gaps: 60px;
    --layout-grid-row: clamp(34px, calc((100dvh - var(--host-main-chrome) - var(--host-main-grid-gaps)) / 7), 48px);
  }

  .host-page .host-condition-panel {
    gap: 5px;
  }

  .host-page .host-condition-head h2 {
    font-size: 15px;
  }

  .host-page .host-condition-head > strong {
    font-size: 13px;
  }

  .host-page .host-condition-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }

  .host-page .host-condition-tile {
    gap: 2px;
    padding: 6px 7px;
  }

  .host-page .host-condition-tile span {
    font-size: 10px;
  }

  .host-page .host-condition-tile strong {
    font-size: 13px;
  }

  .host-page .host-condition-tile small {
    font-size: 10px;
  }

  .host-page .host-condition-actions {
    grid-template-columns: repeat(4, minmax(96px, 1fr));
    gap: 4px;
  }

  .host-page .host-condition-actions .ghost-button {
    min-height: 28px;
    padding: 5px 6px;
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  .topbar-live-slot {
    min-width: 0;
  }

  .host-priority-ticker {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .host-priority-now {
    max-width: none;
  }

  .host-priority-track {
    animation-duration: 36s;
  }

  .host-priority-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .host-command-strip-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.class-wizard-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 217, 255, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 128, 208, 0.2), rgba(2, 13, 31, 0.9)),
    rgba(4, 18, 37, 0.92);
  box-shadow: inset 0 0 20px rgba(0, 217, 255, 0.08), 0 0 20px rgba(0, 217, 255, 0.08);
  padding: 9px;
}

.class-wizard-launch.needs-setup {
  border-color: rgba(0, 217, 255, 0.92);
  box-shadow: inset 0 0 24px rgba(0, 217, 255, 0.16), 0 0 24px rgba(0, 217, 255, 0.18);
}

.class-wizard-launch > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.class-wizard-launch strong,
.class-wizard-launch em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.class-wizard-launch strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.08;
}

.class-wizard-launch em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.class-wizard-launch .action-button {
  min-height: 42px;
  white-space: nowrap;
}

.deployment-wizard {
  display: block;
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 112, 180, 0.18), rgba(2, 13, 31, 0.88)),
    rgba(4, 18, 37, 0.88);
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.08), 0 0 22px rgba(0, 217, 255, 0.08);
  padding: 8px;
}

.deployment-wizard.needs-setup {
  border-color: rgba(0, 217, 255, 0.92);
  box-shadow: inset 0 0 24px rgba(0, 217, 255, 0.15), 0 0 26px rgba(0, 217, 255, 0.2);
}

.deployment-wizard.wizard-attention,
.class-step-wizard.wizard-attention {
  border-color: rgba(73, 255, 174, 0.86);
  box-shadow: inset 0 0 24px rgba(73, 255, 174, 0.14), 0 0 28px rgba(73, 255, 174, 0.18);
}

.class-step-wizard {
  display: grid;
  gap: 7px;
}

.class-step-wizard[hidden] {
  display: none;
}

.class-step-wizard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.class-step-wizard-header > div,
.class-step-wizard-status {
  min-width: 0;
}

.class-step-wizard-header strong,
.class-step-wizard-header em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.class-step-wizard-header strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.class-step-wizard-header em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.class-step-wizard-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.class-step-wizard-status span,
.class-step-wizard-status b {
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.class-wizard-inline-notice {
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background: rgba(0, 122, 255, 0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  padding: 8px 10px;
}

.class-wizard-runway {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.class-wizard-runway-step {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 4px 8px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7, 31, 68, 0.74), rgba(2, 13, 31, 0.9)),
    rgba(2, 13, 31, 0.72);
  padding: 9px;
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.07);
}

.class-wizard-runway-step.is-current,
.class-wizard-runway-step.is-critical {
  border-color: rgba(73, 255, 174, 0.62);
  box-shadow: inset 0 0 20px rgba(73, 255, 174, 0.08), 0 0 16px rgba(0, 217, 255, 0.1);
}

.class-wizard-runway-step > span {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.class-wizard-runway-step strong,
.class-wizard-runway-step small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.class-wizard-runway-step strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.08;
}

.class-wizard-runway-step small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.deployment-wizard > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  cursor: pointer;
  list-style: none;
}

.deployment-wizard > summary::-webkit-details-marker {
  display: none;
}

.deployment-wizard > summary strong {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deployment-wizard > summary em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deployment-wizard > summary b {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.1);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.deployment-wizard-body {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.class-wizard-step {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.class-wizard-step:not(.is-active) {
  display: none;
}

.class-wizard-step-copy {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.7);
  display: grid;
  gap: 4px;
  padding: 9px;
}

.class-wizard-step-copy span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.class-wizard-step-copy strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.08;
}

.class-wizard-step-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.class-wizard-launch-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.class-wizard-launch-actions .action-button,
.class-wizard-launch-actions .ghost-button {
  min-height: 42px;
}

.class-wizard-launch-checklist {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.class-wizard-launch-card {
  min-width: 0;
  min-height: 164px;
  display: grid;
  grid-template-rows: auto auto minmax(34px, 1fr) auto;
  gap: 6px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7, 31, 68, 0.76), rgba(2, 13, 31, 0.9)),
    rgba(2, 13, 31, 0.72);
  padding: 9px;
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.07);
}

.class-wizard-launch-card.is-primary {
  border-color: rgba(73, 255, 174, 0.6);
  box-shadow: inset 0 0 20px rgba(73, 255, 174, 0.08), 0 0 16px rgba(0, 217, 255, 0.1);
}

.class-wizard-launch-card > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.class-wizard-launch-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.08;
}

.class-wizard-launch-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.class-wizard-launch-card .action-button,
.class-wizard-launch-card .ghost-button {
  width: 100%;
  min-height: 40px;
}

.class-wizard-launch-card .quiet-link {
  min-height: 32px;
  margin-top: -2px;
  opacity: 0.72;
}

.class-wizard-receipt {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.62);
  padding: 7px;
}

.class-wizard-receipt strong,
.class-wizard-receipt span,
.class-wizard-receipt b,
.class-wizard-receipt small {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.class-wizard-receipt strong {
  color: var(--text);
  font-size: 12px;
}

.class-wizard-receipt span,
.class-wizard-receipt small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.class-wizard-receipt b {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 950;
}

.class-wizard-receipt .ghost-button {
  min-height: 32px;
  margin-top: 2px;
}

.class-wizard-receipt.is-ready {
  border-color: rgba(73, 255, 174, 0.46);
  box-shadow: inset 0 0 16px rgba(73, 255, 174, 0.06);
}

.class-wizard-receipt.is-warn {
  border-color: rgba(255, 209, 102, 0.52);
}

.class-wizard-footer {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.9);
  padding: 7px;
  box-shadow: 0 -10px 18px rgba(0, 0, 0, 0.18);
}

.class-wizard-footer .ghost-button,
.class-wizard-footer .action-button {
  min-height: 40px;
}

.class-launch-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.class-launch-step {
  min-height: 58px;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.55), rgba(2, 13, 31, 0.84));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.06);
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
}

.class-launch-step span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.class-launch-step strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.12;
}

.class-launch-step small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
}

.class-launch-step:not(.is-active) small {
  display: none;
}

.class-launch-step.is-active {
  border-color: rgba(0, 217, 255, 0.78);
  background:
    linear-gradient(145deg, rgba(0, 122, 210, 0.24), rgba(2, 13, 31, 0.9));
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.12), 0 0 18px rgba(0, 217, 255, 0.13);
}

.class-launch-step.is-complete {
  border-color: rgba(73, 255, 174, 0.58);
  box-shadow: inset 0 0 18px rgba(73, 255, 174, 0.08);
}

.deployment-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 8px;
  align-items: start;
}

.deployment-setup-primary,
.deployment-setup-machine {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.deployment-callout,
.deployment-current-strip > div {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.7);
  padding: 7px;
}

.deployment-callout strong,
.deployment-callout span,
.deployment-current-strip span,
.deployment-current-strip strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deployment-callout strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}

.deployment-callout span,
.deployment-current-strip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.product-choice-grid,
.class-profile-grid,
.class-profile-primary-grid,
.class-profile-optional-grid,
.studio-device-grid {
  display: grid;
  gap: 7px;
}

.product-choice-grid {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
}

.product-card,
.product-freeze-note {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.72);
  display: grid;
  gap: 4px;
  padding: 8px;
}

.product-card {
  cursor: pointer;
}

.product-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-card span,
.product-card small,
.product-card strong,
.product-freeze-note span,
.product-freeze-note small,
.product-freeze-note strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-card span,
.product-freeze-note span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.product-card strong,
.product-freeze-note strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
}

.product-card small,
.product-freeze-note small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.product-card.is-selected {
  border-color: rgba(73, 255, 174, 0.62);
  box-shadow: inset 0 0 18px rgba(73, 255, 174, 0.08);
}

.product-card.is-frozen {
  opacity: 0.58;
  filter: grayscale(0.55);
  cursor: not-allowed;
}

.product-freeze-note {
  border-style: dashed;
  opacity: 0.82;
}

.class-profile-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.class-profile-primary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}

.class-profile-intro,
.deploy-entry-gate-toggle,
.class-profile-note,
.class-profile-optional {
  grid-column: 1 / -1;
}

.class-profile-primary-grid .field,
.class-profile-optional-grid .field {
  grid-column: span 2;
}

.class-profile-primary-grid .class-profile-note {
  grid-column: span 3;
}

.class-profile-optional {
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.46);
  padding: 7px;
}

.class-profile-optional > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.class-profile-optional > summary::-webkit-details-marker {
  display: none;
}

.class-profile-optional summary span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.class-profile-optional summary strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
}

.class-profile-optional-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 7px;
}

.deployment-current-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.deployment-setup-machine .deployment-current-strip {
  grid-template-columns: minmax(0, 1fr);
}

.deployment-current-strip strong {
  color: var(--accent);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.deployment-field-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.deployment-field-grid .field {
  grid-column: span 2;
}

.deployment-field-grid .field:nth-child(2),
.deployment-field-grid .field:nth-child(3) {
  grid-column: span 1;
}

.deployment-field-grid .action-button {
  grid-column: span 2;
  min-height: 34px;
}

.deployment-setup-machine .deployment-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deployment-setup-machine .deployment-field-grid .field,
.deployment-setup-machine .deployment-field-grid .action-button,
.deployment-setup-machine .deployment-mode-note {
  grid-column: 1 / -1;
}

.deployment-setup-machine .deployment-field-grid .field:nth-child(2),
.deployment-setup-machine .deployment-field-grid .field:nth-child(3) {
  grid-column: span 1;
}

.deployment-tailscale-panel {
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.66);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
}

.deployment-tailscale-panel.is-ready {
  border-color: rgba(73, 255, 174, 0.5);
  box-shadow: inset 0 0 18px rgba(73, 255, 174, 0.08);
}

.deployment-tailscale-panel.is-warn {
  border-color: rgba(255, 204, 102, 0.64);
  box-shadow: inset 0 0 18px rgba(255, 204, 102, 0.08);
}

.deployment-tailscale-panel strong,
.deployment-tailscale-panel small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.deployment-tailscale-panel strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}

.deployment-tailscale-panel small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.deployment-tailscale-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.deployment-tailscale-pills span {
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.12);
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.deployment-wizard .studio-hardware-panel {
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.66);
  padding: 7px;
}

.deployment-wizard .studio-device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deployment-mode-note {
  grid-column: span 2;
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.local-readiness-wizard {
  grid-column: 1 / -1;
}

.class-launch-run-state {
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.68);
  display: grid;
  gap: 3px;
  padding: 8px 10px;
}

.class-launch-run-state strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}

.class-launch-run-state span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.local-readiness-wizard > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.local-readiness-wizard > summary::-webkit-details-marker {
  display: none;
}

.local-readiness-summary span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.local-readiness-summary strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.local-readiness-body {
  display: grid;
  gap: 7px;
}

.local-readiness-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.local-readiness-actions .ghost-button {
  min-height: 34px;
  padding: 7px 8px;
}

.local-readiness-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.local-readiness-note strong {
  color: var(--accent);
}

@media (max-width: 960px) {
  .deployment-setup-grid,
  .class-launch-steps,
  .class-wizard-launch-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-wizard-runway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-layout-help,
  .host-layout-help {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .class-wizard-launch {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-wizard-launch .action-button {
    width: 100%;
  }

  .class-step-wizard-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-step-wizard-status,
  .class-wizard-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .class-wizard-footer {
    position: static;
    z-index: auto;
    box-shadow: none;
  }

  .deployment-wizard {
    gap: 7px;
  }

  .deployment-wizard > summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .deployment-wizard > summary strong {
    white-space: normal;
  }

  .deployment-wizard > summary b {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .deployment-current-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-choice-grid,
  .class-launch-steps,
  .class-wizard-runway,
  .class-profile-grid,
  .class-profile-primary-grid,
  .class-profile-optional-grid,
  .deployment-tailscale-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .deployment-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-readiness-wizard > summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .local-readiness-summary strong {
    text-align: left;
    white-space: normal;
  }

  .local-readiness-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deployment-field-grid .field,
  .deployment-field-grid .field:nth-child(2),
  .deployment-field-grid .field:nth-child(3),
  .class-profile-primary-grid .field,
  .class-profile-primary-grid .class-profile-note,
  .class-profile-optional-grid .field,
  .deployment-field-grid .action-button,
  .deployment-mode-note {
    grid-column: 1 / -1;
  }

  .class-profile-optional > summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-profile-optional summary strong {
    text-align: left;
  }

  .deployment-tailscale-pills {
    justify-content: flex-start;
  }
}

.admin-ops-strip > div,
.admin-live-switch,
.security-callout {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.82);
  padding: 7px 8px;
}

.admin-ops-strip strong,
.admin-live-switch strong,
.security-callout strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-live-switch {
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), rgba(25, 118, 255, 0.18)),
    rgba(4, 18, 37, 0.88);
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.1), 0 0 18px rgba(0, 217, 255, 0.08);
}

.disabled-link,
.admin-host-disabled {
  opacity: 0.46;
  filter: grayscale(0.85);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.admin-live-switch small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
}

.security-callout span,
.security-callout div {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.tailscale-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tailscale-control-grid .admin-actions {
  grid-column: 1 / -1;
  margin-top: 0;
}

.tailscale-control-grid .warning-item {
  border-color: rgba(0, 217, 255, 0.9);
  background: rgba(0, 217, 255, 0.1);
}

.entry-gate-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.entry-gate-toggle,
.entry-share-greeting,
.entry-code-preview > div {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.68);
  padding: 8px;
}

.entry-gate-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.entry-gate-toggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.entry-gate-toggle strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}

.entry-gate-toggle small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.entry-code-preview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.entry-code-preview strong,
.entry-share-greeting strong,
.entry-share-greeting b,
.entry-share-greeting small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.entry-code-preview strong,
.entry-share-greeting b {
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
}

.entry-greeting-field {
  grid-column: 1 / -1;
}

.entry-share-greeting {
  display: grid;
  gap: 4px;
}

.entry-share-greeting small {
  color: var(--muted);
  font-weight: 800;
}

.admin-layout .admin-status {
  grid-column: span 4;
}

.admin-layout .admin-launch {
  grid-column: span 8;
}

.admin-layout .admin-access {
  grid-column: span 6;
}

.admin-layout .admin-session {
  grid-column: span 6;
}

.admin-layout .admin-activity {
  grid-column: span 4;
}

.admin-layout .admin-timeline {
  grid-column: span 8;
}

.admin-layout .admin-archive {
  grid-column: span 4;
}

.admin-layout .admin-questions {
  grid-column: span 8;
}

.admin-layout .admin-files {
  grid-column: span 5;
}

.admin-layout .admin-shortcuts {
  grid-column: span 6;
}

.admin-layout .admin-integrations {
  grid-column: span 6;
}

.admin-layout .admin-studio-hardware {
  grid-column: span 6;
}

.admin-integration-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-integration-stack {
  display: grid;
  gap: 10px;
}

.admin-integration-stack .admin-integration-deck + .admin-integration-deck {
  border-top: 1px solid rgba(0, 217, 255, 0.16);
  padding-top: 10px;
}

.twilio-status-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.12), rgba(25, 118, 255, 0.12)),
    rgba(2, 13, 31, 0.78);
  padding: 8px;
}

.twilio-status-card strong,
.twilio-status-card small,
.twilio-status-card b {
  display: block;
  min-width: 0;
}

.twilio-status-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.twilio-status-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
}

.twilio-status-card b {
  border: 1px solid rgba(0, 217, 255, 0.54);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.1);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.twilio-status-ready .twilio-status-card {
  border-color: rgba(73, 255, 174, 0.62);
  box-shadow: inset 0 0 18px rgba(73, 255, 174, 0.08);
}

.learndj-status-online .twilio-status-card {
  border-color: rgba(73, 255, 174, 0.68);
  box-shadow: inset 0 0 20px rgba(0, 217, 255, 0.14), 0 0 22px rgba(73, 255, 174, 0.08);
}

.learndj-status-offline .twilio-status-card,
.learndj-status-missing .twilio-status-card {
  border-color: rgba(0, 217, 255, 0.64);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1);
}

.learndj-frozen-card .twilio-status-card,
.learndj-status-frozen .twilio-status-card {
  border-color: rgba(111, 147, 200, 0.58);
  box-shadow: none;
  opacity: 0.78;
}

.twilio-status-needs_config .twilio-status-card,
.twilio-status-failed .twilio-status-card {
  border-color: rgba(0, 217, 255, 0.88);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.12), 0 0 18px rgba(0, 217, 255, 0.1);
}

.twilio-health-grid,
.twilio-env-grid,
.twilio-config-form,
.twilio-test-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.learndj-action-row,
.learndj-link-row,
.learndj-feature-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.learndj-action-row > *,
.learndj-link-row > * {
  flex: 1 1 130px;
}

.learndj-context-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.learndj-feature-row span {
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.08);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.studio-hardware-panel {
  display: grid;
  gap: 8px;
}

.studio-hardware-note,
.studio-device-card {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.72);
  padding: 8px;
}

.studio-hardware-note strong,
.studio-hardware-note span,
.studio-device-card span,
.studio-device-card strong,
.studio-device-card small,
.studio-device-card em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.studio-hardware-note strong,
.studio-device-card strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}

.studio-hardware-note span,
.studio-device-card small,
.studio-device-card em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.studio-device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-device-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.studio-device-card span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-device-card b {
  border: 1px solid rgba(73, 255, 174, 0.58);
  border-radius: 999px;
  color: rgba(73, 255, 174, 0.96);
  font-size: 10px;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.studio-device-card em {
  grid-column: 1 / -1;
}

.studio-device-card.is-installed {
  border-color: rgba(73, 255, 174, 0.56);
  box-shadow: inset 0 0 16px rgba(73, 255, 174, 0.07);
}

.studio-device-card.is-missing {
  border-color: rgba(0, 217, 255, 0.72);
}

.studio-hardware-actions {
  display: flex;
  gap: 7px;
}

.twilio-health-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.twilio-health-grid > div,
.twilio-env-pill,
.twilio-last-test {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.68);
  padding: 7px;
}

.twilio-health-grid span,
.twilio-env-pill span {
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.twilio-health-grid strong,
.twilio-env-pill strong {
  display: block;
  min-width: 0;
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.twilio-last-test {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}

.twilio-last-test strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.twilio-last-test-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.twilio-last-test span,
.twilio-delivery-detail,
.twilio-delivery-hint {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.twilio-delivery-detail {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.twilio-delivery-hint {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.twilio-last-test.undelivered,
.twilio-last-test.failed,
.twilio-last-test.lookup_failed {
  border-color: rgba(0, 217, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(2, 13, 31, 0.82)),
    rgba(0, 90, 160, 0.2);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.18), 0 0 18px rgba(0, 217, 255, 0.12);
}

.twilio-last-test.delivered {
  border-color: rgba(73, 255, 174, 0.54);
  box-shadow: inset 0 0 14px rgba(73, 255, 174, 0.12);
}

.twilio-env-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.twilio-env-pill small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.12;
}

.twilio-env-pill.configured {
  border-color: rgba(73, 255, 174, 0.38);
}

.twilio-env-pill.missing {
  border-color: rgba(0, 217, 255, 0.62);
  background: rgba(0, 95, 160, 0.16);
}

.twilio-setup-details {
  grid-column: 1 / -1;
}

.twilio-config-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.42);
  padding: 7px;
}

.twilio-enable-toggle,
.twilio-config-path {
  grid-column: 1 / -1;
}

.twilio-enable-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.twilio-enable-toggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.twilio-enable-toggle small,
.twilio-config-path {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.16;
}

.twilio-config-path {
  overflow-wrap: anywhere;
}

.twilio-setup-code {
  max-height: 130px;
  overflow: auto;
  margin: 6px 0;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(1, 8, 20, 0.8);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  padding: 8px;
  white-space: pre-wrap;
}

.twilio-test-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

.twilio-test-row .field {
  margin: 0;
}

@media (max-width: 720px) {
  .twilio-health-grid,
  .twilio-env-grid,
  .twilio-config-form,
  .twilio-test-row,
  .studio-device-grid,
  .studio-device-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-device-card b,
  .studio-device-card .ghost-button {
    justify-self: start;
  }
}

.slider-wrap {
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
}

.comfort-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: clamp(14px, 0.95cqw, 18px);
  line-height: 1.15;
  text-align: center;
}

.comfort-level {
  min-width: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 3px;
  color: var(--comfort-color, var(--accent));
  opacity: 0.74;
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

.comfort-level.is-active {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--comfort-color) 38%, transparent));
}

.comfort-level b {
  max-width: 100%;
  color: var(--text);
  font-size: clamp(15px, 1cqw, 20px);
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.42);
}

.comfort-level-0 {
  --comfort-color: var(--comfort-low);
}

.comfort-level-1 {
  --comfort-color: var(--comfort-low-2);
}

.comfort-level-2 {
  --comfort-color: var(--comfort-mid);
}

.comfort-level-3 {
  --comfort-color: var(--comfort-listen);
}

.comfort-level-4 {
  --comfort-color: var(--comfort-close);
}

.comfort-level-5 {
  --comfort-color: var(--comfort-high);
}

.comfort-icon {
  width: clamp(44px, 3cqw, 52px);
  height: clamp(44px, 3cqw, 52px);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--comfort-color) 68%, transparent);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--comfort-color) 22%, transparent), rgba(3, 16, 36, 0.86) 62%);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--comfort-color) 18%, transparent), 0 0 10px color-mix(in srgb, var(--comfort-color) 22%, transparent);
}

.comfort-level.is-active .comfort-icon {
  border-color: color-mix(in srgb, var(--comfort-color) 92%, #eef8ff);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--comfort-color) 30%, transparent), rgba(3, 16, 36, 0.88) 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--comfort-color) 18%, transparent), rgba(0, 217, 255, 0.08));
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--comfort-color) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--comfort-color) 32%, transparent);
}

.comfort-symbol {
  border-radius: 10px;
}

.comfort-photo-icon {
  width: clamp(42px, 3.4cqw, 58px);
  height: clamp(62px, 5cqw, 84px);
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--comfort-color) 18%, transparent), rgba(3, 16, 36, 0.9) 64%);
}

.comfort-photo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.comfort-icon svg {
  width: clamp(28px, 2.1cqw, 34px);
  height: clamp(28px, 2.1cqw, 34px);
  overflow: visible;
}

.comfort-icon path,
.comfort-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comfort-icon .comfort-icon-fill {
  fill: color-mix(in srgb, var(--comfort-color) 14%, transparent);
}

.comfort-icon .comfort-icon-glow {
  stroke: color-mix(in srgb, var(--comfort-color) 68%, #dffbff);
  stroke-width: 2.3;
}

.comfort-range {
  width: 100%;
  height: clamp(22px, 2cqw, 34px);
  appearance: none;
  background: transparent;
  accent-color: var(--student-comfort-ring, var(--comfort-mid));
  cursor: pointer;
}

.comfort-range::-webkit-slider-runnable-track {
  height: clamp(10px, 0.9cqw, 15px);
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 999px;
  background: var(--comfort-gradient);
  box-shadow: inset 0 0 8px rgba(2, 8, 23, 0.85), 0 0 14px rgba(0, 217, 255, 0.18);
}

.comfort-range::-webkit-slider-thumb {
  width: clamp(24px, 2.1cqw, 34px);
  height: clamp(24px, 2.1cqw, 34px);
  margin-top: calc((clamp(10px, 0.9cqw, 15px) - clamp(24px, 2.1cqw, 34px)) / 2 - 1px);
  appearance: none;
  border: 2px solid var(--student-comfort-ring, var(--accent));
  border-radius: 50%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--student-comfort-ring, var(--accent)) 86%, #eef8ff) 0 4px, rgba(3, 17, 38, 0.98) 5px 100%);
  box-shadow:
    0 0 0 3px rgba(0, 217, 255, 0.16),
    0 0 14px rgba(0, 217, 255, 0.5),
    inset 0 0 8px rgba(0, 217, 255, 0.24);
  cursor: grab;
}

.comfort-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  box-shadow:
    0 0 0 4px rgba(0, 217, 255, 0.22),
    0 0 18px rgba(0, 217, 255, 0.62),
    inset 0 0 10px rgba(0, 217, 255, 0.32);
}

.comfort-range::-moz-range-track {
  height: clamp(10px, 0.9cqw, 15px);
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 999px;
  background: var(--comfort-gradient);
  box-shadow: inset 0 0 8px rgba(2, 8, 23, 0.85), 0 0 14px rgba(0, 217, 255, 0.18);
}

.comfort-range::-moz-range-thumb {
  width: clamp(24px, 2.1cqw, 34px);
  height: clamp(24px, 2.1cqw, 34px);
  border: 2px solid var(--student-comfort-ring, var(--accent));
  border-radius: 50%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--student-comfort-ring, var(--accent)) 86%, #eef8ff) 0 4px, rgba(3, 17, 38, 0.98) 5px 100%);
  box-shadow:
    0 0 0 3px rgba(0, 217, 255, 0.16),
    0 0 14px rgba(0, 217, 255, 0.5),
    inset 0 0 8px rgba(0, 217, 255, 0.24);
  cursor: grab;
}

.comfort-range:active::-moz-range-thumb {
  cursor: grabbing;
  box-shadow:
    0 0 0 4px rgba(0, 217, 255, 0.22),
    0 0 18px rgba(0, 217, 255, 0.62),
    inset 0 0 10px rgba(0, 217, 255, 0.32);
}

.comfort-readout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}

.big-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
}

.input-hub-panel {
  display: grid;
  gap: 9px;
  container-type: inline-size;
}

.student-page {
  --student-comfort-tint: rgba(0, 217, 255, 0.08);
  --student-comfort-ring: var(--comfort-mid);
  --student-comfort-panel: rgba(7, 31, 68, 0.86);
}

.student-page[data-comfort-tone="lost"] {
  --student-comfort-tint: rgba(181, 140, 255, 0.14);
  --student-comfort-ring: var(--comfort-low);
  --student-comfort-panel: rgba(26, 20, 68, 0.9);
}

.student-page[data-comfort-tone="confused"] {
  --student-comfort-tint: rgba(134, 168, 255, 0.13);
  --student-comfort-ring: var(--comfort-low-2);
  --student-comfort-panel: rgba(15, 30, 78, 0.9);
}

.student-page[data-comfort-tone="listening"] {
  --student-comfort-tint: rgba(122, 167, 184, 0.08);
  --student-comfort-ring: var(--comfort-mid);
  --student-comfort-panel: rgba(7, 31, 68, 0.86);
}

.student-page[data-comfort-tone="following"] {
  --student-comfort-tint: rgba(24, 196, 255, 0.12);
  --student-comfort-ring: var(--comfort-listen);
  --student-comfort-panel: rgba(4, 36, 76, 0.9);
}

.student-page[data-comfort-tone="close"] {
  --student-comfort-tint: rgba(0, 214, 200, 0.13);
  --student-comfort-ring: var(--comfort-close);
  --student-comfort-panel: rgba(4, 48, 70, 0.9);
}

.student-page[data-comfort-tone="got-it"] {
  --student-comfort-tint: rgba(124, 231, 178, 0.12);
  --student-comfort-ring: var(--comfort-high);
  --student-comfort-panel: rgba(5, 54, 62, 0.9);
}

.student-page .input-hub-panel[data-comfort-tone] {
  border-color: color-mix(in srgb, var(--student-comfort-ring) 54%, var(--line));
  background:
    linear-gradient(135deg, var(--student-comfort-tint), transparent 44%),
    var(--student-comfort-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 20px color-mix(in srgb, var(--student-comfort-ring) 16%, transparent);
}

.input-hub-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.input-hub-head h2 {
  margin-bottom: 0;
}

.input-hub-head .label {
  font-size: clamp(13px, 0.9cqw, 16px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

.comfort-pill {
  max-width: 210px;
  border: 1px solid rgba(0, 217, 255, 0.62);
  border-radius: 8px;
  background: rgba(3, 16, 36, 0.82);
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  padding: 7px 9px;
  text-align: right;
}

.input-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.input-hub-comfort {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.input-hub-slider {
  padding: clamp(8px, 0.9cqw, 14px);
}

.input-hub-slider .comfort-labels {
  margin-bottom: clamp(6px, 0.65cqw, 12px);
  font-size: clamp(14px, 0.95cqw, 18px);
}

.input-hub-slider .comfort-readout {
  margin-top: 4px;
}

.input-hub-slider .big-value {
  font-size: 18px;
}

.input-hub-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--input-hub-button-min, 148px)), minmax(0, 1fr)));
  gap: 6px;
  align-items: stretch;
}

.input-hub-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--input-hub-button-min, 148px)), minmax(0, 1fr)));
  gap: 6px;
  align-items: stretch;
}

.input-hub-control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "vcr"
    "rewind";
  gap: 6px;
  align-items: stretch;
}

.input-hub-vcr-group {
  --input-hub-button-min: var(--student-vcr-column-min, 96px);
  grid-area: vcr;
  width: 100%;
  max-width: 420px;
  grid-template-columns: repeat(3, minmax(var(--input-hub-button-min), 1fr));
  justify-content: stretch;
  align-self: end;
}

.input-hub-vcr-group .action-button {
  min-height: var(--student-vcr-min-height, clamp(68px, 4.2cqw, 86px));
  padding: clamp(7px, 0.72cqw, 10px);
  font-size: clamp(13px, 0.85cqw, 16px);
  line-height: 1.05;
}

.input-hub-vcr-group .vcr-button {
  border-color: rgba(0, 217, 255, 0.74);
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.13), 0 0 12px rgba(0, 217, 255, 0.08);
}

.input-hub-button-grid .action-button {
  min-height: var(--student-action-min-height, clamp(76px, 5.6cqw, 100px));
  padding: clamp(9px, 0.95cqw, 15px);
  font-size: clamp(13px, 0.9cqw, 17px);
  line-height: 1.05;
}

.input-hub-rewind {
  grid-area: rewind;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  margin-bottom: 0;
}

.input-hub-rewind .label {
  grid-column: 1 / -1;
  align-self: end;
  min-height: 0;
  margin: 0;
  text-align: left;
  font-size: clamp(15px, 1cqw, 18px);
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.55);
}

.input-hub-rewind input {
  grid-column: 1 / span 2;
  min-width: 0;
  width: 100%;
  min-height: 56px;
  border-color: rgba(0, 217, 255, 0.58);
  background: linear-gradient(145deg, rgba(3, 16, 36, 0.96), rgba(8, 42, 91, 0.74));
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.1);
}

.input-hub-rewind .rewind-send-button {
  grid-column: 3;
  min-height: 56px;
  border-color: rgba(0, 217, 255, 0.95);
  background:
    linear-gradient(145deg, rgba(0, 120, 220, 0.92), rgba(0, 217, 255, 0.28)),
    radial-gradient(circle at 35% 15%, rgba(123, 239, 255, 0.35), transparent 42%);
  color: #ffffff;
  box-shadow: inset 0 0 20px rgba(123, 239, 255, 0.18), 0 0 20px rgba(0, 217, 255, 0.22);
  font-size: clamp(15px, 1cqw, 18px);
  letter-spacing: 0;
  text-transform: none;
}

.input-hub-rewind .rewind-send-button:hover {
  border-color: #7befff;
  box-shadow: inset 0 0 24px rgba(123, 239, 255, 0.24), 0 0 26px rgba(0, 217, 255, 0.36);
}

.input-hub-reaction-strip {
  --input-hub-button-min: var(--student-reaction-column-min, 132px);
  grid-template-columns: repeat(auto-fit, minmax(var(--student-reaction-column-min, 132px), var(--student-reaction-column-max, 180px)));
  justify-content: start;
}

.student-scene-default .input-hub-reaction-strip {
  --student-reaction-column-min: 118px;
  --student-reaction-column-max: 168px;
}

.student-scene-default .input-hub-vcr-group {
  --student-vcr-column-min: 90px;
}

.student-scene-default .input-hub-button-grid .compact-reaction-button {
  min-height: clamp(68px, 4.5cqw, 92px);
  padding: clamp(6px, 0.65cqw, 9px);
}

.student-scene-default .input-hub-button-grid .compact-reaction-button .reaction-icon {
  width: clamp(42px, 3.4cqw, 56px);
  height: clamp(42px, 3.4cqw, 56px);
}

.input-hub-action-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.student-simple-layout {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.student-simple-console {
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(8, 16, 28, 0.96), rgba(2, 7, 16, 0.98)),
    rgba(0, 0, 0, 0.94);
  border-color: rgba(232, 249, 255, 0.78);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.3),
    0 0 26px rgba(0, 217, 255, 0.16);
}

.student-simple-head h2 {
  font-size: clamp(21px, 2cqw, 30px);
}

.student-simple-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.simple-comfort-grid,
.simple-primary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.simple-comfort-button {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  padding: 12px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.18);
}

.simple-comfort-button strong {
  font-size: clamp(18px, 1.7cqw, 25px);
  font-weight: 950;
  line-height: 1;
}

.simple-comfort-button span {
  color: rgba(232, 249, 255, 0.86);
  font-size: clamp(13px, 1.05cqw, 17px);
  font-weight: 800;
  line-height: 1.1;
}

.simple-comfort-button.is-active {
  border-color: rgba(0, 217, 255, 0.95);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.18), transparent 58%),
    rgba(4, 19, 39, 0.9);
  box-shadow:
    inset 0 0 24px rgba(0, 217, 255, 0.18),
    0 0 18px rgba(0, 217, 255, 0.28);
}

.simple-primary-grid {
  --input-hub-button-min: 0;
}

.simple-primary-grid .input-hub-signal-button {
  min-height: 98px;
  padding: 12px;
}

.simple-primary-grid .input-hub-signal-button .button-label {
  min-height: 36px;
  font-size: clamp(16px, 1.35cqw, 22px);
}

.simple-primary-grid .action-icon,
.simple-primary-grid .reaction-icon {
  width: clamp(50px, 4.6cqw, 70px);
  height: clamp(50px, 4.6cqw, 70px);
}

.simple-primary-grid .action-icon svg {
  width: clamp(40px, 3.8cqw, 58px);
  height: clamp(40px, 3.8cqw, 58px);
}

.simple-rewind {
  grid-area: auto;
  grid-template-columns: repeat(2, minmax(126px, 0.75fr)) minmax(220px, 2fr) minmax(128px, 0.7fr);
}

.simple-rewind .label {
  grid-column: 1 / -1;
}

.simple-rewind input {
  grid-column: 3;
}

.simple-rewind .rewind-send-button {
  grid-column: 4;
}

.simple-action-stack {
  gap: 10px;
}

.simple-question-card {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.58);
}

.input-hub-question-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.1), transparent 42%),
    rgba(2, 13, 31, 0.72);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.06);
  padding: 8px;
}

.input-hub-question-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.input-hub-question-head strong {
  min-width: 0;
  font-size: clamp(15px, 1cqw, 20px);
  line-height: 1;
}

.input-hub-question-helper {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: clamp(12px, 0.82cqw, 14px);
  line-height: 1.25;
}

.input-hub-question-field,
.input-hub-handle-toggle,
.input-hub-question-actions {
  grid-column: 1 / -1;
}

.input-hub-question-field {
  margin: 0;
}

.input-hub-question-field textarea {
  min-height: 58px;
  resize: vertical;
}

.input-hub-handle-toggle {
  margin: 0;
}

.student-safety-rail {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: -2px 0 0;
}

.student-safety-rail span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.74);
  color: rgba(238, 248, 255, 0.9);
  font-size: clamp(11px, 0.74cqw, 13px);
  font-weight: 850;
  line-height: 1.05;
  padding: 4px 8px;
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.06);
}

.input-hub-private-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(96, 165, 250, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(2, 13, 31, 0.58)),
    rgba(2, 13, 31, 0.72);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.08),
    0 0 18px rgba(0, 217, 255, 0.08);
}

.student-help-request {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(0, 84, 180, 0.3), rgba(2, 13, 31, 0.72)),
    rgba(2, 13, 31, 0.78);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.12),
    0 0 22px rgba(0, 217, 255, 0.14);
}

.student-help-request-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
}

.student-help-request-head strong {
  min-width: 0;
  color: var(--text);
  font-size: clamp(14px, 0.96cqw, 18px);
  line-height: 1.05;
}

.student-help-request p {
  margin: 0;
  color: rgba(216, 236, 255, 0.9);
  font-size: clamp(11px, 0.76cqw, 13px);
  font-weight: 700;
  line-height: 1.32;
}

.student-help-request-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(150px, 0.5fr) minmax(150px, 210px);
  gap: 8px;
  align-items: stretch;
}

.help-request-message-field {
  grid-column: 1 / 3;
}

.help-request-message-field textarea {
  min-height: 52px;
  resize: vertical;
}

.help-request-submit {
  min-height: 52px;
}

.help-request-actions,
.help-request-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.help-request-link,
.help-request-contact-link {
  width: auto;
  min-height: 30px;
  border-color: rgba(0, 217, 255, 0.82);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.2), transparent 62%),
    rgba(5, 29, 65, 0.9);
  color: var(--text);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
}

.help-request-rail {
  margin: 0;
}

.input-hub-private-note-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
}

.input-hub-private-note-head strong {
  min-width: 0;
  color: var(--text);
  font-size: clamp(13px, 0.88cqw, 17px);
  line-height: 1.05;
}

.input-hub-private-note p {
  margin: 0;
  color: rgba(216, 236, 255, 0.88);
  font-size: clamp(11px, 0.75cqw, 13px);
  font-weight: 650;
  line-height: 1.3;
}

.private-note-category-field {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(180px, 1fr);
  align-items: center;
  gap: 8px;
}

.private-note-category-field span {
  margin: 0;
  color: rgba(216, 236, 255, 0.86);
  font-size: clamp(10px, 0.7cqw, 12px);
  font-weight: 850;
}

.private-note-category-field select {
  min-height: 34px;
}

.input-hub-private-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 190px);
  gap: 8px;
  align-items: stretch;
}

.input-hub-private-note-row textarea {
  min-height: 52px;
  resize: vertical;
}

.private-note-submit {
  min-height: 52px;
  border-color: rgba(96, 165, 250, 0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.28), transparent 58%),
    rgba(5, 29, 65, 0.88);
  color: var(--text);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.1);
}

.private-note-rail {
  margin: 0;
}

.student-learning-synthesis {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.16), transparent 44%),
    linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(2, 13, 31, 0.66));
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.08),
    0 0 16px rgba(0, 217, 255, 0.08);
}

.student-support-details {
  grid-column: 1 / -1;
}

.student-support-details.student-learning-synthesis,
.student-support-details.student-help-request,
.student-support-details.input-hub-private-note {
  gap: 0;
  padding: 0;
}

.student-support-details.student-learning-synthesis[open],
.student-support-details.student-help-request[open],
.student-support-details.input-hub-private-note[open] {
  gap: 8px;
  padding: 8px;
}

.student-support-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}

.student-support-summary::-webkit-details-marker {
  display: none;
}

.student-support-summary > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.student-support-summary strong {
  min-width: 0;
  font-size: clamp(13px, 0.86cqw, 16px);
  line-height: 1.05;
}

.student-support-summary em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.1);
  color: rgba(238, 248, 255, 0.92);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.student-support-details[open] .student-support-summary {
  border-bottom: 1px solid rgba(0, 217, 255, 0.22);
  padding: 2px 0 8px;
}

.student-support-details[open] .student-support-summary em {
  color: var(--accent);
}

.student-support-details[open] .student-support-summary em::before {
  content: "Close";
}

.student-support-details[open] .student-support-summary em {
  font-size: 0;
}

.student-support-details[open] .student-support-summary em::before {
  font-size: 11px;
}

.student-support-body {
  display: grid;
  gap: 8px;
}

.student-learning-synthesis-head,
.learning-synthesis-result-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
}

.student-learning-synthesis-head strong,
.learning-synthesis-result-head strong {
  color: var(--text);
  font-size: clamp(13px, 0.9cqw, 17px);
  line-height: 1.05;
}

.student-learning-synthesis p,
.learning-synthesis-result p,
.learning-synthesis-result small {
  margin: 0;
  color: rgba(216, 236, 255, 0.88);
  font-size: clamp(11px, 0.76cqw, 13px);
  font-weight: 650;
  line-height: 1.3;
}

.learning-synthesis-controls {
  display: grid;
  grid-template-columns: minmax(120px, 0.48fr) repeat(2, minmax(150px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.learning-synthesis-window {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin: 0;
}

.learning-synthesis-window span {
  margin: 0;
  color: rgba(216, 236, 255, 0.84);
  font-size: clamp(10px, 0.72cqw, 12px);
  font-weight: 850;
}

.learning-synthesis-button {
  min-height: 42px;
  border-color: rgba(0, 217, 255, 0.68);
  background:
    radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 50%), rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(0, 132, 255, 0.28), rgba(2, 13, 31, 0.86));
  color: var(--text);
  font-size: clamp(13px, 0.9cqw, 16px);
  font-weight: 900;
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
}

.learning-away-snapshot {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 26px minmax(120px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 7px;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.08), transparent 34%, rgba(96, 165, 250, 0.08)),
    rgba(2, 13, 31, 0.56);
}

.learning-away-snapshot.is-empty {
  grid-template-columns: minmax(150px, 0.72fr) 1fr;
}

.learning-away-thumbnail {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.46);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(4, 35, 78, 0.9), rgba(2, 13, 31, 0.9)),
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.22), transparent 18%);
  box-shadow:
    inset 0 0 16px rgba(0, 217, 255, 0.12),
    0 0 12px rgba(0, 217, 255, 0.08);
}

.learning-away-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(96, 165, 250, 0.12) 9px 10px),
    linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.12) 46%, transparent 52%);
}

.learning-away-thumbnail span,
.learning-away-thumbnail strong,
.learning-away-thumbnail em {
  position: relative;
  z-index: 1;
}

.learning-away-thumbnail span {
  color: var(--cyan);
  font-size: clamp(10px, 0.74cqw, 12px);
  font-weight: 950;
  text-transform: uppercase;
}

.learning-away-thumbnail strong {
  color: var(--text);
  font-size: clamp(14px, 1cqw, 18px);
  line-height: 1.05;
}

.learning-away-thumbnail em,
.learning-away-snapshot > p {
  margin: 0;
  color: rgba(216, 236, 255, 0.88);
  font-size: clamp(11px, 0.74cqw, 13px);
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.learning-away-thumbnail.is-waiting {
  border-style: dashed;
  opacity: 0.78;
}

.learning-away-compare {
  position: relative;
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.2), rgba(0, 217, 255, 0.95), rgba(96, 165, 250, 0.2));
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.48);
}

.learning-away-compare::before,
.learning-away-compare::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.7);
  transform: translateY(-50%);
}

.learning-away-compare::before {
  left: -1px;
}

.learning-away-compare::after {
  right: -1px;
}

.learning-away-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}

.learning-away-button {
  min-height: 38px;
  border-color: rgba(96, 165, 250, 0.58);
  background: rgba(2, 13, 31, 0.74);
  color: rgba(245, 249, 252, 0.94);
  font-size: clamp(12px, 0.82cqw, 15px);
  font-weight: 900;
}

.learning-away-button.primary-away {
  border-color: rgba(0, 217, 255, 0.78);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.22), transparent 58%),
    linear-gradient(135deg, rgba(0, 132, 255, 0.34), rgba(2, 13, 31, 0.86));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1), 0 0 12px rgba(0, 217, 255, 0.1);
}

.learning-synthesis-result {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 7px;
  background: rgba(2, 13, 31, 0.74);
}

.learning-synthesis-result-head span {
  color: var(--cyan);
  font-size: clamp(10px, 0.72cqw, 12px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.learning-synthesis-source-note {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 6px;
  color: rgba(216, 236, 255, 0.78);
  font-size: clamp(10px, 0.7cqw, 12px);
  font-weight: 720;
  line-height: 1.25;
}

.learning-synthesis-source-note span:first-child {
  color: var(--cyan);
  font-weight: 900;
}

.learning-synthesis-result ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(245, 249, 252, 0.94);
  font-size: clamp(12px, 0.82cqw, 15px);
  font-weight: 760;
  line-height: 1.28;
}

.learning-synthesis-result li + li {
  margin-top: 4px;
}

@container (max-width: 560px) {
  .student-help-request-grid {
    grid-template-columns: 1fr;
  }

  .help-request-message-field {
    grid-column: 1 / -1;
  }

  .private-note-category-field {
    grid-template-columns: 1fr;
  }

  .learning-synthesis-controls {
    grid-template-columns: 1fr;
  }

  .learning-away-snapshot,
  .learning-away-snapshot.is-empty,
  .learning-away-actions {
    grid-template-columns: 1fr;
  }

  .learning-away-compare {
    width: 2px;
    height: 20px;
    justify-self: center;
  }
}

.input-hub-question-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 220px));
  gap: 8px;
  justify-content: start;
}

.input-hub-question-actions .action-button,
.input-hub-question-actions .ghost-button {
  min-height: 42px;
  padding: 8px 12px;
}

.input-hub-question-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.input-hub-question-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.input-hub-question-list-head .label {
  margin: 0;
}

.input-hub-question-list .question-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.input-hub-question-list .list-item {
  min-height: 0;
  padding: 8px 10px;
}

.input-hub-question-list .question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.input-hub-question-list .question-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.input-hub-question-list .question-meta {
  justify-content: end;
}

.input-hub-question-list .upvote-button,
.input-hub-question-list .question-actions .ghost-button {
  min-height: 44px;
  padding: 8px 10px;
}

.input-hub-poll-list {
  display: grid;
  gap: 8px;
}

.input-hub-vcr-group,
.input-hub-reaction-strip {
  justify-content: start;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.compact-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-button,
.ghost-button,
.danger-button {
  min-height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 800;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
}

.action-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--shadow);
}

.student-page .input-hub-signal-button,
.student-page .rewind-preset-button,
.student-page .rewind-send-button,
.student-page #submitQuestion,
.student-page #raiseHand {
  --tap-x: 50%;
  --tap-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.student-page .input-hub-signal-button > *,
.student-page .rewind-preset-button > *,
.student-page .rewind-send-button > *,
.student-page #submitQuestion > *,
.student-page #raiseHand > * {
  position: relative;
  z-index: 1;
}

.student-page .input-hub-signal-button::before,
.student-page .rewind-preset-button::before,
.student-page .rewind-send-button::before,
.student-page #submitQuestion::before,
.student-page #raiseHand::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 0;
  width: 76%;
  height: 28%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(123, 239, 255, 0.5), rgba(0, 217, 255, 0.2) 42%, transparent 74%),
    repeating-radial-gradient(ellipse at center, rgba(0, 217, 255, 0.2) 0 2px, transparent 3px 8px);
  filter: blur(8px);
  opacity: 0.28;
  transform: translateX(-50%) scaleX(0.82);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
}

.student-page .input-hub-signal-button::after,
.student-page .rewind-preset-button::after,
.student-page .rewind-send-button::after,
.student-page #submitQuestion::after,
.student-page #raiseHand::after {
  content: "";
  position: absolute;
  left: var(--tap-x);
  top: var(--tap-y);
  z-index: 0;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(123, 239, 255, 0.9);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(123, 239, 255, 0.85), rgba(0, 217, 255, 0.28) 42%, transparent 68%);
  box-shadow: 0 0 22px rgba(0, 217, 255, 0.44);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.student-page .input-hub-signal-button:hover::before,
.student-page .rewind-preset-button:hover::before,
.student-page .rewind-send-button:hover::before,
.student-page #submitQuestion:hover::before,
.student-page #raiseHand:hover::before {
  opacity: 0.52;
  filter: blur(10px);
  transform: translateX(-50%) scaleX(1);
}

.student-page .input-hub-signal-button:active,
.student-page .rewind-preset-button:active,
.student-page .rewind-send-button:active,
.student-page #submitQuestion:active,
.student-page #raiseHand:active {
  filter: saturate(1.18) brightness(1.06);
}

.student-page .input-hub-signal-button.is-reacting,
.student-page .rewind-preset-button.is-reacting,
.student-page .rewind-send-button.is-reacting,
.student-page #submitQuestion.is-reacting,
.student-page #raiseHand.is-reacting {
  box-shadow:
    inset 0 -16px 30px rgba(123, 239, 255, 0.12),
    0 10px 26px rgba(0, 217, 255, 0.16);
}

.student-page .input-hub-signal-button.is-reacting::before,
.student-page .rewind-preset-button.is-reacting::before,
.student-page .rewind-send-button.is-reacting::before,
.student-page #submitQuestion.is-reacting::before,
.student-page #raiseHand.is-reacting::before {
  animation: electricButtonRadiation 360ms ease-out both;
}

.student-page .input-hub-signal-button.is-reacting::after,
.student-page .rewind-preset-button.is-reacting::after,
.student-page .rewind-send-button.is-reacting::after,
.student-page #submitQuestion.is-reacting::after,
.student-page #raiseHand.is-reacting::after {
  animation: electricTapRipple 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.student-tap-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 140;
  width: clamp(118px, 10vw, 170px);
  height: clamp(36px, 3.4vw, 54px);
  pointer-events: none;
  border-radius: 999px / 52%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(123, 239, 255, 0.48) 0 2px, rgba(0, 217, 255, 0.2) 3px 5px, transparent 7px 12px),
    radial-gradient(ellipse at center, rgba(123, 239, 255, 0.5) 0%, rgba(0, 217, 255, 0.24) 42%, transparent 76%);
  box-shadow: 0 0 22px rgba(0, 217, 255, 0.28), inset 0 0 18px rgba(123, 239, 255, 0.16);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -32%) scale(0.76);
  animation: studentTapGlow 420ms ease-out both;
}

.action-button.primary {
  border-color: var(--accent);
  background: var(--panel-3);
}

.branded-action,
.branded-reaction {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) auto;
  place-items: center;
  align-content: center;
  justify-content: center;
  gap: 8px;
  border-color: rgba(0, 217, 255, 0.62);
  background: linear-gradient(145deg, rgba(8, 42, 91, 0.94), rgba(4, 18, 41, 0.96));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1), 0 0 0 rgba(0, 217, 255, 0);
  text-align: center;
}

.branded-action:hover,
.branded-reaction:hover {
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.16), 0 0 18px rgba(0, 217, 255, 0.2);
}

.branded-action .button-label,
.branded-reaction .button-label {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 7px;
  background: rgba(2, 13, 31, 0.72);
  color: #ffffff;
  font-size: var(--student-label-font-size, clamp(15px, 1.05cqw, 20px));
  font-weight: 950;
  line-height: 1.05;
  padding: 5px 8px;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.48);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.08);
  overflow-wrap: anywhere;
}

.action-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.26), rgba(3, 16, 36, 0.82) 58%);
  color: var(--accent);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.18), 0 0 12px rgba(0, 217, 255, 0.14);
}

.action-icon svg {
  width: 36px;
  height: 36px;
  display: block;
  overflow: visible;
}

.action-icon path,
.action-icon circle,
.action-icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-icon .action-icon-fill {
  fill: rgba(0, 217, 255, 0.12);
}

.action-icon .action-icon-glow {
  stroke: #7befff;
  stroke-width: 2.4;
  opacity: 0.95;
}

.ghost-button {
  background: var(--bg-2);
}

.danger-button {
  border-color: var(--accent);
  background: #041225;
}

.reaction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.input-hub-reactions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 5px;
}

.reaction-button {
  min-height: 96px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
}

.reaction-button.branded-reaction {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) auto;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border-color: rgba(0, 217, 255, 0.62);
  background: linear-gradient(145deg, rgba(8, 42, 91, 0.94), rgba(4, 18, 41, 0.96));
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1), 0 0 0 rgba(0, 217, 255, 0);
  text-align: center;
}

.reaction-button.branded-reaction:hover {
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.16), 0 0 18px rgba(0, 217, 255, 0.2);
}

.compact-reaction-button {
  min-height: 58px;
  padding: 5px 3px;
  font-size: 9px;
}

.reaction-button span {
  line-height: 1.1;
}

.reaction-icon {
  width: 54px;
  height: 54px;
  display: block;
  margin: 0 auto 5px;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
}

.compact-reaction-button .reaction-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
}

.input-hub-button-grid .compact-reaction-button {
  min-height: var(--student-reaction-min-height, clamp(82px, 5.4cqw, 108px));
  padding: clamp(7px, 0.75cqw, 11px);
  font-size: clamp(13px, 0.92cqw, 18px);
  justify-items: center;
}

.input-hub-button-grid .compact-reaction-button .reaction-icon {
  width: var(--student-reaction-icon-size, clamp(50px, 4.2cqw, 66px));
  height: var(--student-reaction-icon-size, clamp(50px, 4.2cqw, 66px));
  margin: 0;
  border-color: rgba(0, 217, 255, 0.48);
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.2), rgba(3, 16, 36, 0.82) 62%);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.16), 0 0 12px rgba(0, 217, 255, 0.14);
}

.input-hub-reaction-strip .action-icon {
  width: clamp(50px, 4.2cqw, 66px);
  height: clamp(50px, 4.2cqw, 66px);
}

.input-hub-reaction-strip .action-icon svg {
  width: clamp(40px, 3.2cqw, 52px);
  height: clamp(40px, 3.2cqw, 52px);
}

.input-hub-button-grid .cooked-request-button .reaction-icon {
  width: var(--student-reaction-cooked-icon-size, clamp(52px, 4.3cqw, 68px));
  height: var(--student-reaction-cooked-icon-size, clamp(52px, 4.3cqw, 68px));
  margin: 0;
  border-color: rgba(0, 217, 255, 0.48);
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.2), rgba(3, 16, 36, 0.82) 62%);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.16), 0 0 12px rgba(0, 217, 255, 0.14);
}

.input-hub-reaction-strip .compact-reaction-button,
.input-hub-reaction-strip .cooked-request-button {
  min-height: var(--student-reaction-min-height, clamp(82px, 5.4cqw, 108px));
}

.input-hub-signal-button .button-label {
  min-height: 28px;
  padding: 4px 6px;
}

.input-hub-reaction-strip .cooked-request-button .button-label {
  font-size: var(--student-label-font-size, clamp(13px, 0.92cqw, 17px));
}

.input-hub-panel.widget-h-3,
.input-hub-panel.widget-h-4,
.input-hub-panel.widget-h-5 {
  gap: 5px;
}

.input-hub-panel.widget-h-3 .input-hub-grid,
.input-hub-panel.widget-h-3 .input-hub-comfort,
.input-hub-panel.widget-h-4 .input-hub-grid,
.input-hub-panel.widget-h-4 .input-hub-comfort,
.input-hub-panel.widget-h-5 .input-hub-grid,
.input-hub-panel.widget-h-5 .input-hub-comfort {
  gap: 5px;
}

.input-hub-panel.widget-h-3 .input-hub-slider,
.input-hub-panel.widget-h-4 .input-hub-slider,
.input-hub-panel.widget-h-5 .input-hub-slider {
  padding: 5px 6px;
}

.input-hub-panel.widget-h-3 .comfort-icon,
.input-hub-panel.widget-h-4 .comfort-icon {
  width: 44px;
  height: 44px;
}

.input-hub-panel.widget-h-3 .comfort-photo-icon,
.input-hub-panel.widget-h-4 .comfort-photo-icon {
  width: 36px;
  height: 54px;
}

.input-hub-panel.widget-h-3 .comfort-labels,
.input-hub-panel.widget-h-4 .comfort-labels {
  margin-bottom: 3px;
}

.input-hub-panel.widget-h-3 .comfort-level b,
.input-hub-panel.widget-h-4 .comfort-level b {
  font-size: clamp(13px, 0.9cqw, 16px);
}

.input-hub-panel.widget-h-3 .input-hub-button-grid .action-button,
.input-hub-panel.widget-h-3 .input-hub-button-grid .compact-reaction-button,
.input-hub-panel.widget-h-3 .input-hub-vcr-group .action-button {
  min-height: 56px;
  padding: 5px 6px;
}

.input-hub-panel.widget-h-4 .input-hub-button-grid .action-button,
.input-hub-panel.widget-h-4 .input-hub-button-grid .compact-reaction-button,
.input-hub-panel.widget-h-4 .input-hub-vcr-group .action-button {
  min-height: 70px;
  padding: 7px 8px;
}

.input-hub-panel.widget-h-5 .input-hub-button-grid .action-button,
.input-hub-panel.widget-h-5 .input-hub-button-grid .compact-reaction-button,
.input-hub-panel.widget-h-5 .input-hub-vcr-group .action-button {
  min-height: 92px;
  padding: 9px 10px;
}

.student-button-labels-hidden .input-hub-signal-button .button-label {
  display: none;
}

.student-button-labels-hidden .input-hub-signal-button {
  grid-template-rows: minmax(0, auto);
}

.input-hub-panel.widget-h-3 .action-icon,
.input-hub-panel.widget-h-3 .input-hub-button-grid .compact-reaction-button .reaction-icon,
.input-hub-panel.widget-h-3 .input-hub-button-grid .cooked-request-button .reaction-icon {
  width: 28px;
  height: 28px;
}

.input-hub-panel.widget-h-3 .action-icon svg {
  width: 23px;
  height: 23px;
}

.input-hub-panel.widget-h-3 .input-hub-rewind,
.input-hub-panel.widget-h-4 .input-hub-rewind,
.input-hub-panel.widget-h-5 .input-hub-rewind {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}

.input-hub-panel.widget-h-4 .input-hub-rewind .label,
.input-hub-panel.widget-h-5 .input-hub-rewind .label {
  margin: 0;
}

.input-hub-panel.widget-h-3 .input-hub-rewind input,
.input-hub-panel.widget-h-4 .input-hub-rewind input,
.input-hub-panel.widget-h-5 .input-hub-rewind input {
  min-height: 56px;
  padding: 7px 9px;
}

.input-hub-rewind .rewind-preset-button,
.input-hub-rewind .rewind-send-button {
  min-height: 56px;
  padding: 8px 10px;
  white-space: nowrap;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 9px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #041225;
  color: var(--text);
  padding: 10px 11px;
  resize: vertical;
}

.file-input {
  min-height: 46px;
}

.file-input::file-selector-button {
  min-height: 38px;
  margin-right: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-3);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  padding: 7px 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.row > * {
  min-width: 0;
}

.row > button,
.row > select {
  flex: 1 1 160px;
}

.question-submit-row {
  justify-content: flex-start;
}

.question-submit-row > button {
  flex: 0 1 auto;
  width: auto;
  min-width: clamp(124px, 17vw, 172px);
  min-height: 34px;
  padding: 6px 10px;
}

.list {
  display: grid;
  gap: 7px;
}

.list-item {
  border: 1px solid rgba(25, 118, 255, 0.75);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.75);
  padding: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.leaderboard-panel {
  display: grid;
  gap: 8px;
}

.leaderboard-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.leaderboard-head h2 {
  margin-bottom: 0;
}

.leaderboard-head > strong {
  display: inline-grid;
  min-width: 34px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.18), rgba(6, 54, 110, 0.72));
  color: var(--accent);
  font-size: 15px;
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.22);
}

.leaderboard-list {
  display: grid;
  gap: 6px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid rgba(25, 118, 255, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.11), transparent 44%),
    rgba(3, 16, 36, 0.72);
  padding: 5px 7px;
}

.leaderboard-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row b {
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
}

.leader-rank {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.7);
  border-radius: 7px;
  background: rgba(0, 217, 255, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.leaderboard-note,
.leaderboard-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.leaderboard-empty {
  border: 1px dashed rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  padding: 8px;
}

.compact-status .list {
  gap: 6px;
}

.compact-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.secondary-details summary {
  display: grid;
  gap: 5px;
  cursor: pointer;
  list-style: none;
}

.secondary-details summary::-webkit-details-marker {
  display: none;
}

.secondary-details summary span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.secondary-details summary strong {
  font-size: 18px;
}

.secondary-details[open] summary {
  margin-bottom: 10px;
}

.admin-layout .secondary-details summary {
  gap: 2px;
}

.admin-layout .secondary-details summary span {
  font-size: 9px;
}

.admin-layout .secondary-details summary strong {
  font-size: 13px;
  line-height: 1.1;
}

.admin-layout .secondary-details[open] summary {
  margin-bottom: 7px;
}

.question-helper {
  margin: -5px 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.question-visibility-toggle {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: -4px 0 8px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(3, 16, 36, 0.58);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 9px;
}

.question-visibility-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.question-visibility-toggle strong {
  min-width: 0;
  max-width: 150px;
  color: var(--accent);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-page > .quick-poll-popover {
  position: fixed;
  z-index: 82;
}

.quick-poll-popover {
  top: clamp(92px, 11vh, 126px);
  left: 50%;
  width: min(660px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  pointer-events: none;
  transform: translateX(-50%);
}

.quick-poll-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(7, 31, 68, 0.98), rgba(2, 8, 23, 0.98));
  box-shadow:
    0 0 0 1px rgba(25, 118, 255, 0.32),
    0 18px 42px rgba(0, 9, 24, 0.58),
    0 0 28px rgba(0, 217, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  padding: 10px;
}

.quick-poll-card-popover {
  pointer-events: auto;
  animation: quick-poll-arrive 220ms ease-out both;
}

.quick-poll-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.quick-poll-copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.quick-poll-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-poll-vote-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(74px, 1fr));
  gap: 7px;
}

.quick-poll-vote {
  min-height: 44px;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0, rgba(0, 217, 255, 0.24), transparent 64%),
    linear-gradient(180deg, rgba(6, 54, 110, 0.95), rgba(3, 17, 38, 0.95));
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(0, 217, 255, 0.18);
}

.quick-poll-vote:hover,
.quick-poll-vote:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(0, 217, 255, 0.2),
    0 0 24px rgba(0, 217, 255, 0.34);
}

.quick-poll-no {
  border-color: rgba(255, 65, 111, 0.58);
}

.quick-poll-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.quick-poll-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-poll-counts span:first-child {
  color: var(--comfort-high);
}

.quick-poll-counts span:last-child {
  color: var(--comfort-low-2);
}

.quick-poll-bars {
  position: relative;
  height: 8px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.36);
  border-radius: 999px;
  background: rgba(2, 8, 23, 0.82);
}

.quick-poll-bars i {
  display: block;
  min-width: 2px;
}

.quick-poll-bar-yes {
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.76), var(--comfort-high));
}

.quick-poll-bar-no {
  background: linear-gradient(90deg, var(--comfort-low), rgba(25, 118, 255, 0.74));
}

.quick-poll-results small {
  color: var(--dim);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-poll-compact-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.quick-poll-card-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.1), transparent 48%),
    rgba(3, 16, 36, 0.84);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.14),
    inset 0 0 20px rgba(0, 217, 255, 0.06);
}

.quick-poll-card-compact .quick-poll-copy strong {
  font-size: 14px;
}

.quick-poll-card-compact .quick-poll-vote-row {
  grid-template-columns: repeat(2, minmax(58px, 1fr));
}

.quick-poll-card-compact .quick-poll-vote {
  min-height: 44px;
  font-size: 13px;
}

.quick-poll-card-hub {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), transparent 48%),
    rgba(3, 16, 36, 0.82);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.18),
    inset 0 0 22px rgba(0, 217, 255, 0.08);
}

.quick-poll-card-hub .quick-poll-copy strong {
  font-size: clamp(15px, 1cqw, 19px);
}

.quick-poll-card-hub .quick-poll-vote {
  min-height: 44px;
}

.quick-poll-host-panel {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.1), transparent 42%),
    rgba(3, 16, 36, 0.7);
  padding: 8px;
}

.quick-poll-host-head {
  display: grid;
  gap: 2px;
}

.quick-poll-host-head strong {
  font-size: 13px;
}

.quick-poll-host-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.quick-poll-host-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.quick-poll-host-form input {
  min-height: 34px;
}

.quick-poll-host-form .action-button {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.quick-poll-host-list {
  display: grid;
  gap: 6px;
}

.quick-poll-host-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.58);
  padding: 6px 7px;
}

.quick-poll-host-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-poll-host-row span,
.quick-poll-host-row em {
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.quick-poll-host-row em {
  grid-column: 1 / -1;
  color: var(--muted);
}

@keyframes quick-poll-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.student-page .question-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.student-page .question-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.question-traction {
  border-color: rgba(0, 217, 255, 0.96);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), transparent 42%),
    rgba(4, 18, 37, 0.82);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.18),
    0 0 22px rgba(0, 217, 255, 0.34),
    inset 0 0 18px rgba(0, 217, 255, 0.1);
  animation: question-traction-glow 2.8s ease-in-out infinite;
}

.question-traction > strong {
  color: #f7fdff;
}

.question-traction .question-author {
  border-color: rgba(0, 217, 255, 0.62);
  color: var(--accent);
}

.question-traction .score-chip {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 217, 255, 0.3), rgba(6, 54, 110, 0.94) 62%);
  box-shadow: 0 0 24px rgba(0, 217, 255, 0.4);
}

.question-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.student-page .question-meta {
  justify-content: flex-start;
}

.question-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.question-actions .ghost-button {
  min-height: 36px;
  padding: 8px 10px;
}

.question-followup-chip,
.question-sufficient-chip,
.question-still-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 999px;
  background: rgba(2, 8, 23, 0.62);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.question-followup-chip {
  border-color: rgba(0, 217, 255, 0.52);
  color: var(--accent);
}

.question-sufficient-chip {
  border-color: rgba(36, 214, 139, 0.5);
  color: #7dffce;
}

.question-still-chip {
  border-color: rgba(255, 95, 140, 0.54);
  color: #ff9fbd;
}

.answer-sufficient-button {
  border-color: rgba(36, 214, 139, 0.5);
}

.answer-still-button,
.question-followup-button {
  border-color: rgba(0, 217, 255, 0.5);
}

.question-followup-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 2px;
}

.question-followup-preview span {
  min-width: 0;
  display: block;
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 217, 255, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  padding: 6px 8px;
  overflow-wrap: anywhere;
}

.question-followup-preview b {
  color: var(--accent);
  margin-right: 6px;
}

.poll-privacy-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.question-author {
  max-width: 150px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.58);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-chip {
  min-width: 64px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(6, 54, 110, 0.92);
  color: var(--text);
  box-shadow: 0 0 18px var(--shadow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.score-chip span {
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

.host-question-row {
  border-color: var(--accent);
  background: rgba(6, 54, 110, 0.76);
}

.host-question-row .score-chip {
  min-width: 76px;
  min-height: 50px;
}

.admin-question-row {
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.18), 0 0 18px rgba(0, 217, 255, 0.12);
}

.queue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.queue-heading h3 {
  margin: 0;
}

.queue-count {
  min-width: 36px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #041225;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 14px var(--shadow);
}

.question-answered {
  border-style: dashed;
  background: rgba(4, 18, 37, 0.54);
  opacity: 0.56;
  animation: question-ghost 900ms ease-out both;
}

.question-answering {
  border-color: rgba(125, 247, 255, 0.82);
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.14), rgba(4, 18, 37, 0.72) 44%, rgba(46, 139, 87, 0.10)),
    rgba(4, 18, 37, 0.82);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.22), inset 0 0 18px rgba(96, 165, 250, 0.12);
}

.question-withdrawn {
  border-style: dashed;
  background: rgba(4, 18, 37, 0.66);
  opacity: 0.68;
  animation: question-ghost 900ms ease-out both;
}

.question-answered strong,
.question-withdrawn strong {
  color: var(--muted);
}

.answered-chip,
.answering-chip,
.edited-chip,
.withdrawn-chip {
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.55);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.82);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.answering-chip {
  border-color: rgba(125, 247, 255, 0.86);
  background: rgba(3, 43, 78, 0.86);
  color: #d9fbff;
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.24);
}

.answering-button-active {
  border-color: rgba(125, 247, 255, 0.82);
  color: #d9fbff;
  background: rgba(0, 132, 180, 0.22);
}

.question-answer-feedback-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.edited-chip {
  border-color: rgba(125, 247, 255, 0.65);
  color: #7df7ff;
}

.withdrawn-chip {
  border-color: rgba(111, 147, 200, 0.75);
  color: var(--muted);
}

@keyframes question-ghost {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.56;
    transform: translateY(1px);
  }
}

@keyframes question-traction-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 217, 255, 0.18),
      0 0 18px rgba(0, 217, 255, 0.26),
      inset 0 0 16px rgba(0, 217, 255, 0.08);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(0, 217, 255, 0.28),
      0 0 30px rgba(0, 217, 255, 0.46),
      inset 0 0 22px rgba(0, 217, 255, 0.14);
  }
}

.points-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.spend-tile {
  min-height: 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  overflow: hidden;
}

.spend-tile:disabled,
.spend-tile[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.56;
}

.spend-tile span {
  position: relative;
  z-index: 1;
}

.spend-cost {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.spend-tile-preview {
  position: relative;
  width: 68px;
  height: 34px;
  display: block;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.18), transparent 1px) 0 0 / 12px 100%,
    rgba(2, 8, 23, 0.86);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.16), 0 0 14px rgba(0, 217, 255, 0.18);
  overflow: hidden;
}

.spend-tile-preview b {
  position: absolute;
  display: block;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.7);
}

.preview-packet-storm b {
  width: 16px;
  height: 3px;
}

.preview-packet-storm b:nth-child(1) { left: 6px; top: 8px; }
.preview-packet-storm b:nth-child(2) { left: 20px; top: 16px; }
.preview-packet-storm b:nth-child(3) { left: 36px; top: 11px; }
.preview-packet-storm b:nth-child(4) { left: 48px; top: 22px; }

.preview-shield-wall b {
  width: 16px;
  height: 22px;
  top: 6px;
  clip-path: polygon(50% 0, 90% 18%, 78% 82%, 50% 100%, 22% 82%, 10% 18%);
}

.preview-shield-wall b:nth-child(1) { left: 8px; }
.preview-shield-wall b:nth-child(2) { left: 26px; }
.preview-shield-wall b:nth-child(3) { left: 44px; }

.preview-electric-laurel b {
  width: 24px;
  height: 24px;
  top: 5px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
}

.preview-electric-laurel b:nth-child(1) { left: 12px; border-right-color: transparent; }
.preview-electric-laurel b:nth-child(2) { right: 12px; border-left-color: transparent; }

.preview-brain-melt-ripple b {
  inset: 6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
}

.preview-brain-melt-ripple b:nth-child(2) { inset: 11px; }
.preview-brain-melt-ripple b:nth-child(3) { inset: 15px; background: var(--accent); }

.preview-blue-screen-blink b {
  left: 8px;
  right: 8px;
  height: 2px;
}

.preview-blue-screen-blink b:nth-child(1) { top: 11px; }
.preview-blue-screen-blink b:nth-child(2) { top: 21px; opacity: 0.58; }

.preview-phish-alert b,
.preview-visual-effect b {
  width: 38px;
  height: 18px;
  left: 15px;
  top: 8px;
  border: 2px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: transparent;
}

.list-item strong {
  display: block;
}

.list-item a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.resource-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.resource-filter-button {
  min-height: 30px;
  border: 1px solid rgba(25, 118, 255, 0.68);
  border-radius: 8px;
  background: rgba(2, 13, 29, 0.82);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
}

.resource-filter-button b {
  color: var(--accent);
  margin-left: 4px;
}

.resource-filter-button.active {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(0, 112, 180, 0.64), rgba(6, 36, 84, 0.94));
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.14), 0 0 14px rgba(0, 217, 255, 0.12);
}

.resource-list {
  display: grid;
  gap: 6px;
}

.resource-link,
.resource-link-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.resource-link-button {
  --resource-accent: var(--accent);
  min-height: 48px;
  border-color: color-mix(in srgb, var(--resource-accent) 68%, #0b1630);
  background:
    linear-gradient(145deg, rgba(7, 35, 78, 0.92), rgba(2, 12, 28, 0.98)),
    radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--resource-accent) 24%, transparent), transparent 36%);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--resource-accent) 12%, transparent);
}

.resource-link-button.has-thumbnail {
  grid-template-columns: 36px 64px minmax(0, 1fr);
}

.resource-link-button:hover {
  border-color: var(--resource-accent);
  transform: translateY(-1px);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--resource-accent) 16%, transparent), 0 0 14px color-mix(in srgb, var(--resource-accent) 18%, transparent);
}

.resource-link-button.is-disabled {
  opacity: 0.74;
  cursor: not-allowed;
}

.resource-kind-link { --resource-accent: #66b7ff; }
.resource-kind-download { --resource-accent: #00d9ff; }
.resource-kind-slides { --resource-accent: #5dd8ff; }
.resource-kind-lab { --resource-accent: #39e6c2; }
.resource-kind-zoom { --resource-accent: #74c7ff; }
.resource-kind-video { --resource-accent: #22e3ff; }
.resource-kind-document { --resource-accent: #9bd4ff; }

.resource-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--resource-accent, var(--accent)) 70%, #07152c);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--resource-accent, var(--accent)) 22%, transparent), rgba(3, 16, 36, 0.86) 64%);
  color: var(--resource-accent, var(--accent));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--resource-accent, var(--accent)) 16%, transparent), 0 0 12px color-mix(in srgb, var(--resource-accent, var(--accent)) 13%, transparent);
}

.resource-icon svg {
  width: 25px;
  height: 25px;
  display: block;
}

.resource-icon path,
.resource-icon rect,
.resource-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resource-thumbnail {
  width: 64px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--resource-accent, var(--accent)) 72%, #07152c);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(2, 10, 24, 0.78);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--resource-accent, var(--accent)) 16%, transparent);
}

.resource-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.resource-link-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.resource-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.resource-title-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-action-text {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--resource-accent, var(--accent)) 58%, #07152c);
  border-radius: 999px;
  background: color-mix(in srgb, var(--resource-accent, var(--accent)) 16%, rgba(1, 12, 28, 0.82));
  color: color-mix(in srgb, var(--resource-accent, var(--accent)) 84%, #ffffff);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-description {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.resource-meta b {
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--resource-accent, var(--accent)) 52%, #07152c);
  border-radius: 999px;
  color: color-mix(in srgb, var(--resource-accent, var(--accent)) 82%, #ffffff);
  background: rgba(1, 12, 28, 0.72);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.resource-empty {
  color: var(--muted);
}

.instructor-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 82px;
  align-items: start;
  gap: 10px 12px;
}

.instructor-headshot {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.68);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(8, 62, 112, 0.96), rgba(2, 11, 30, 0.98)),
    radial-gradient(circle at 30% 20%, rgba(0, 217, 255, 0.38), transparent 54%);
  box-shadow:
    inset 0 0 16px rgba(0, 217, 255, 0.18),
    0 0 18px rgba(0, 217, 255, 0.14);
  object-fit: cover;
  overflow: hidden;
}

.instructor-headshot-image {
  object-fit: cover;
  object-position: 50% 28%;
  background: rgba(1, 11, 28, 0.98);
  box-shadow:
    inset 0 0 0 2px rgba(1, 11, 28, 0.84),
    0 0 0 1px rgba(0, 217, 255, 0.38),
    0 0 22px rgba(0, 217, 255, 0.2);
}

.instructor-headshot-fallback {
  position: relative;
  color: var(--accent);
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: 0.04em;
}

.instructor-headshot-fallback::before,
.instructor-headshot-fallback::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 8px;
}

.instructor-headshot-fallback::after {
  inset: 13px;
  border-color: rgba(25, 118, 255, 0.28);
}

.instructor-info {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-self: center;
  text-align: center;
}

.instructor-info > strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.05;
}

.instructor-info > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.instructor-contact-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

.instructor-contact-link {
  min-height: 34px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 8px;
  background: rgba(2, 13, 31, 0.58);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
  text-decoration: none;
}

.instructor-contact-link span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.contact-link-icon svg {
  width: 18px;
  height: 18px;
}

.contact-link-icon path,
.contact-link-icon rect,
.contact-link-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.instructor-qr-tile {
  display: block;
  justify-self: end;
  width: 82px;
  min-width: 0;
  border: 1px solid transparent;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.instructor-qr-tile img {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background: #ffffff;
  display: block;
  box-shadow:
    0 0 0 3px rgba(2, 13, 31, 0.78),
    0 0 18px rgba(0, 217, 255, 0.18);
}

.instructor-panel.widget-w-3 .instructor-card {
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: start;
  gap: 7px 8px;
}

.instructor-panel.widget-w-3 .instructor-headshot {
  width: 64px;
  height: 64px;
}

.instructor-panel.widget-w-3 .instructor-qr-tile {
  grid-column: 3;
  justify-self: end;
  width: 64px;
}

.instructor-panel.widget-w-3 .instructor-qr-tile img {
  width: 64px;
  height: 64px;
}

.instructor-panel.widget-w-3 .instructor-info > strong {
  font-size: 14px;
}

.instructor-panel.widget-w-3 .instructor-info > span {
  font-size: 10px;
}

.instructor-panel.widget-w-3 .instructor-contact-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.instructor-panel.widget-w-3 .instructor-contact-link {
  min-height: 28px;
  padding: 4px;
  font-size: 10px;
}

.student-jump-menu.is-open .student-menu-panels {
  gap: 5px;
}

.student-jump-menu.is-open .student-menu-panel {
  overflow: hidden;
}

.student-jump-menu.is-open .student-menu-panel .collapsible-summary {
  min-height: 30px;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 5px;
  padding: 4px 6px;
}

.student-jump-menu.is-open .student-menu-panel .collapsible-summary .label,
.student-jump-menu.is-open .student-menu-panel .resource-description,
.student-jump-menu.is-open .student-menu-panel .leaderboard-note {
  display: none;
}

.student-jump-menu.is-open .student-menu-panel .collapsible-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-jump-menu.is-open .student-menu-panel .surface-count {
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  font-size: 9px;
}

.student-jump-menu.is-open .student-menu-panel .collapse-mark {
  width: 18px;
  height: 18px;
}

.student-jump-menu.is-open .student-menu-panel .collapsible-body {
  max-height: min(28vh, 220px);
  overflow-x: hidden;
  overflow-y: auto;
  gap: 5px;
  margin-top: 5px;
  padding: 5px;
}

.student-jump-menu.is-open .student-menu-panel .resource-filter-strip {
  gap: 4px;
  margin-bottom: 5px;
}

.student-jump-menu.is-open .student-menu-panel .resource-filter-button {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 9px;
}

.student-jump-menu.is-open .student-menu-panel .resource-list,
.student-jump-menu.is-open .student-menu-panel .leaderboard-list {
  gap: 4px;
}

.student-jump-menu.is-open .student-menu-panel .resource-link,
.student-jump-menu.is-open .student-menu-panel .resource-link-button {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px;
}

.student-jump-menu.is-open .student-menu-panel .resource-link-button {
  min-height: 40px;
  padding: 5px 6px;
}

.student-jump-menu.is-open .student-menu-panel .resource-link-button.has-thumbnail {
  grid-template-columns: 26px 42px minmax(0, 1fr);
}

.student-jump-menu.is-open .student-menu-panel .resource-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.student-jump-menu.is-open .student-menu-panel .resource-icon svg {
  width: 18px;
  height: 18px;
}

.student-jump-menu.is-open .student-menu-panel .resource-thumbnail {
  width: 42px;
  height: 28px;
  border-radius: 7px;
}

.student-jump-menu.is-open .student-menu-panel .resource-title-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.student-jump-menu.is-open .student-menu-panel .resource-title-row strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.08;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.student-jump-menu.is-open .student-menu-panel .resource-action-text {
  display: none;
}

.student-jump-menu.is-open .student-menu-panel .resource-meta b {
  padding: 1px 4px;
  font-size: 8px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-card {
  grid-template-columns: 48px minmax(0, 1fr) 58px;
  gap: 6px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-headshot {
  width: 48px;
  height: 48px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-info > strong {
  font-size: 13px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-info span {
  font-size: 9px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-qr-tile {
  grid-column: 3;
  justify-self: end;
  width: 58px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-qr-tile img {
  width: 58px;
  height: 58px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-contact-actions {
  gap: 4px;
}

.student-jump-menu.is-open .student-menu-panel .instructor-contact-link {
  min-height: 26px;
  padding: 3px 5px;
  font-size: 9px;
}

.student-jump-menu.is-open .student-menu-panel .leaderboard-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 28px;
  padding: 4px 6px;
}

.student-jump-menu.is-open .student-menu-panel .leaderboard-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instructor-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.admin-student-message-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.admin-student-message-grid .message-note-field {
  grid-column: 1 / -1;
}

.embed-frame {
  width: 100%;
  min-height: 220px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
}

.route-row strong {
  grid-column: 1 / -1;
}

.route-row .copy-button {
  min-width: 86px;
}

.route-row.route-compact {
  padding: 7px;
}

.route-row.route-compact strong {
  grid-column: auto;
}

.route-row.route-compact a {
  grid-column: 1 / -1;
  font-size: 12px;
}

.copied-row {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 18px rgba(0, 217, 255, 0.12);
}

.copy-confirm {
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-status-line,
.admin-count-strip,
.admin-shortcut-grid {
  display: grid;
  gap: 6px;
}

.admin-status-line {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-status-pill,
.admin-count-pill,
.admin-shortcut-pill {
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(25, 118, 255, 0.72);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.72);
  padding: 7px;
  cursor: pointer;
  text-align: left;
}

.admin-shortcut-pill:hover,
.admin-shortcut-pill:focus-visible {
  border-color: rgba(0, 217, 255, 0.92);
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.22);
}

.admin-status-pill span,
.admin-count-pill span,
.admin-shortcut-pill span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.admin-status-pill strong,
.admin-count-pill strong,
.admin-shortcut-pill strong {
  display: block;
  min-width: 0;
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-db-detail {
  margin-top: 6px;
}

.admin-count-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-count-pill span {
  font-size: 8px;
  letter-spacing: 0;
  white-space: nowrap;
}

.admin-count-pill strong {
  color: var(--accent);
  font-size: 21px;
}

.admin-shortcut-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.admin-shortcut-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-shortcut-pill strong {
  font-size: 10px;
  line-height: 1.05;
}

.admin-shortcut-pill small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.share-kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.48fr) minmax(138px, 0.36fr);
  gap: 8px;
  align-items: stretch;
}

.share-primary,
.share-qr-actions,
.local-links {
  min-width: 0;
  border: 1px solid rgba(25, 118, 255, 0.75);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.75);
  padding: 7px;
}

.share-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  align-self: start;
}

.share-url {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.share-qr-actions {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  align-self: start;
}

.share-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.share-action-grid .ghost-button {
  min-height: 36px;
  padding: 5px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
}

.local-links {
  grid-column: auto;
  padding: 7px;
  align-self: start;
}

.compact-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.admin-access-compact {
  display: grid;
  gap: 6px;
}

.admin-access-status,
.admin-access-actions,
.admin-generate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-access-status {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-access-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-mismatch,
.share-access-warning {
  border-color: rgba(0, 217, 255, 0.74);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.14), rgba(8, 42, 91, 0.42)),
    rgba(4, 18, 37, 0.92);
}

.access-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.access-shortcut-card {
  appearance: none;
  width: 100%;
  text-align: left;
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 54, 110, 0.52), rgba(2, 13, 31, 0.78));
  padding: 7px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.access-shortcut-card:hover,
.access-shortcut-card:focus-visible {
  border-color: rgba(0, 217, 255, 0.88);
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.22);
  transform: translateY(-1px);
}

/* Keyboard focus indicator for the student interactive controls. Several
   :focus-visible rules above share their styling with :hover / .is-active and
   only set `outline: none` plus a faint ~0.16-opacity glow, which fails contrast
   and is indistinguishable from hover. This block (placed after those rules so
   it wins on source order) gives focus a solid, high-contrast outline that hover
   and active never get — reusing the good pattern from the layout widgets. */
.student-page .action-button:focus-visible,
.student-page .ghost-button:focus-visible,
.student-page .reaction-button:focus-visible,
.student-page .command-button:focus-visible,
.student-page .input-hub-signal-button:focus-visible,
.student-page .simple-comfort-button:focus-visible,
.student-page .hand-toggle:focus-visible,
.student-page .spend-button:focus-visible,
.student-page .quick-poll-vote:focus-visible,
.student-page .availability-button:focus-visible,
.student-page .student-rain-toggle:focus-visible,
.student-page .student-access-preset:focus-visible,
.student-page .comfort-range:focus-visible,
.student-jump-menu-links > a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.access-shortcut-card:disabled {
  cursor: default;
  opacity: 0.68;
  transform: none;
}

.access-shortcut-card strong,
.access-shortcut-card span,
.access-shortcut-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-shortcut-card strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.access-shortcut-card span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.access-shortcut-card small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.18;
}

.admin-session-compact {
  display: grid;
  gap: 6px;
}

.admin-session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.compact-field {
  gap: 4px;
  margin-bottom: 0;
}

.compact-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.compact-field input,
.compact-field textarea,
.compact-field select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
}

.compact-field textarea {
  min-height: 32px;
}

.admin-session-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.24fr);
  gap: 6px;
  align-items: end;
}

.admin-session-note-row > button {
  min-height: 34px;
}

.admin-session-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.admin-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(138px, 0.35fr);
  gap: 8px;
  align-items: end;
}

.admin-file-row > button {
  min-height: 34px;
}

.host-status-compact,
.host-resource-compact {
  display: grid;
  gap: 8px;
}

.host-status-grid,
.host-resource-grid,
.host-embed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.host-publish-panel .host-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.host-publish-panel .compact-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-resource-guide,
.overlay-output-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.host-resource-guide span,
.overlay-output-guide span {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.09), rgba(25, 118, 255, 0.05)),
    rgba(2, 13, 31, 0.62);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
  padding: 6px 7px;
}

.host-resource-guide strong,
.overlay-output-guide strong {
  display: block;
  color: var(--text);
  font-size: 10px;
  line-height: 1.15;
}

.host-resource-editing {
  align-items: center;
  background: rgba(29, 104, 218, 0.12);
  border: 1px solid rgba(29, 104, 218, 0.28);
  border-radius: 7px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 6px 8px;
}

.host-resource-editing strong {
  color: var(--text);
  font-size: 11px;
}

.host-resource-editing span {
  font-size: 11px;
  font-weight: 750;
}

.host-status-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.24fr);
  gap: 8px;
  align-items: end;
}

.host-status-note-row > button,
.host-resource-grid > button,
.host-embed-grid > button {
  min-height: 38px;
}

.host-file-dropzone {
  position: relative;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px dashed rgba(0, 217, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(5, 31, 68, 0.82), rgba(2, 10, 23, 0.94));
  padding: 8px;
  box-shadow: inset 0 0 20px rgba(0, 217, 255, 0.08);
}

.host-file-dropzone.is-over {
  border-style: solid;
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(0, 91, 160, 0.72), rgba(3, 17, 38, 0.96));
  box-shadow: inset 0 0 24px rgba(0, 217, 255, 0.16), 0 0 18px rgba(0, 217, 255, 0.14);
}

.host-upload-status {
  min-height: 30px;
  border: 1px solid rgba(25, 118, 255, 0.46);
  border-radius: 8px;
  background: rgba(2, 13, 29, 0.68);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 9px;
}

.host-upload-status[data-upload-status="uploading"],
.host-upload-status[data-upload-status="published"] {
  border-color: rgba(0, 217, 255, 0.72);
  color: var(--text);
}

.host-upload-status[data-upload-status="failed"] {
  border-color: rgba(255, 115, 115, 0.76);
  color: #ffd6d6;
}

.host-upload-status[data-upload-status="partial"] {
  border-color: rgba(255, 204, 102, 0.76);
  color: #ffedc2;
}

.host-file-dropzone strong,
.host-file-dropzone b {
  display: block;
}

.host-file-dropzone b {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.host-drop-icon .resource-icon {
  --resource-accent: var(--accent);
}

.host-resource-list {
  display: grid;
  gap: 6px;
}

.host-resource-list.empty {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.host-resource-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--resource-accent, var(--accent)) 42%, #12213a);
  border-radius: 8px;
  background: rgba(2, 10, 23, 0.72);
  padding: 6px;
}

.host-resource-row .resource-icon {
  width: 34px;
  height: 34px;
}

.host-resource-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.host-resource-row-copy strong,
.host-resource-row-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-resource-row-copy strong {
  color: var(--text);
  font-size: 12px;
}

.host-resource-row-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.host-resource-overlay-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 5px;
}

.host-resource-overlay-controls a {
  text-decoration: none;
}

.host-resource-overlay-controls .ghost-button,
.host-resource-overlay-controls .action-button,
.host-resource-overlay-controls .danger-button {
  min-height: 34px;
  min-width: 52px;
  padding: 6px 8px;
  font-size: 11px;
}

.host-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.host-embed-details {
  border: 1px solid rgba(25, 118, 255, 0.68);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.76);
  padding: 8px;
}

.host-embed-grid {
  margin-top: 8px;
}

.embed-content-field {
  grid-column: span 2;
}

.command-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 124px));
  gap: 6px;
  justify-content: start;
}

.command-chip {
  min-height: 34px;
  max-width: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid rgba(25, 118, 255, 0.62);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.78);
  padding: 6px 7px;
}

.command-chip strong {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.command-chip b {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.command-chip.empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.point-spend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.point-spend-strip span,
.point-spend-strip.empty {
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 999px;
  background: rgba(4, 18, 37, 0.64);
  padding: 5px 8px;
}

.point-spend-strip strong {
  margin-right: 6px;
  color: var(--text);
}

.point-spend-strip .active-cue-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.point-spend-strip .active-cue-chip strong {
  margin-right: 0;
}

.point-spend-strip .active-cue-chip small {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-intake-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.12), rgba(37, 67, 113, 0.12)),
    rgba(2, 13, 31, 0.66);
  padding: 8px;
}

.host-chat-intake-panel .chat-intake-panel {
  margin-top: 0;
  height: 100%;
  overflow: hidden;
}

.chat-intake-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-intake-head span,
.chat-intake-head strong {
  color: var(--accent);
}

.chat-intake-head em {
  justify-self: end;
  overflow: hidden;
  color: rgba(232, 246, 255, 0.74);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-intake-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.chat-intake-row,
.chat-intake-empty,
.chat-intake-more {
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 8px;
  background: rgba(1, 10, 26, 0.72);
  padding: 7px;
}

.chat-intake-pending {
  border-color: rgba(0, 217, 255, 0.62);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
}

.chat-intake-auto_routed,
.chat-intake-routed {
  border-color: rgba(59, 255, 184, 0.34);
}

.chat-intake-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.chat-intake-meta b,
.chat-intake-meta strong {
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 999px;
  color: var(--accent);
  padding: 2px 5px;
}

.chat-intake-row p,
.chat-intake-row small {
  display: block;
  overflow: hidden;
  margin: 5px 0 0;
  text-overflow: ellipsis;
}

.chat-intake-row p {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.chat-intake-row small {
  color: rgba(158, 211, 255, 0.78);
  font-size: 10px;
  white-space: nowrap;
}

.chat-intake-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.chat-intake-actions .ghost-button {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 10px;
}

.chat-intake-actions .ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.chat-intake-empty,
.chat-intake-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.overlay-cue-panel,
.overlay-control-deck {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid rgba(0, 217, 255, 0.26);
  border-radius: 8px;
  background: rgba(3, 16, 36, 0.48);
  padding: 8px;
}

.showtime-readiness {
  display: grid;
  gap: 5px;
  margin: 0 0 6px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.13), rgba(25, 118, 255, 0.08)),
    rgba(2, 13, 31, 0.74);
  box-shadow:
    inset 0 0 18px rgba(0, 217, 255, 0.08),
    0 0 18px rgba(0, 217, 255, 0.08);
  padding: 6px;
}

.comfort-reset-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 8px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(7, 17, 31, 0.42)),
    rgba(2, 13, 31, 0.66);
  padding: 7px;
}

.comfort-reset-panel span,
.comfort-reset-panel em {
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comfort-reset-panel strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.05;
}

.comfort-reset-panel em {
  margin-top: 4px;
  color: var(--muted);
  text-transform: none;
}

.comfort-reset-button {
  min-height: 40px;
  max-width: 190px;
  justify-self: end;
  padding: 8px 12px;
}

.showtime-readiness.is-ready {
  border-color: rgba(125, 247, 255, 0.7);
  box-shadow:
    inset 0 0 20px rgba(0, 217, 255, 0.13),
    0 0 22px rgba(0, 217, 255, 0.16);
}

.showtime-readiness-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
}

.showtime-readiness-head span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.showtime-readiness-head strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.showtime-readiness-head em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
}

.showtime-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 4px;
}

.showtime-readiness-pill {
  min-width: 0;
  display: grid;
  gap: 2px;
  min-height: 42px;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.16), rgba(2, 8, 23, 0.8)),
    rgba(3, 16, 36, 0.68);
  padding: 5px 6px;
}

.showtime-readiness-pill.is-live,
.showtime-readiness-pill.is-ready {
  border-color: rgba(0, 217, 255, 0.62);
}

.showtime-readiness-pill.is-warn {
  border-color: rgba(125, 247, 255, 0.38);
  opacity: 0.86;
}

.showtime-readiness-pill.is-offline {
  border-color: rgba(125, 247, 255, 0.2);
  opacity: 0.68;
}

.showtime-readiness-pill span,
.showtime-readiness-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showtime-readiness-pill span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showtime-readiness-pill strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showtime-readiness-pill small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
}

.surface-preset-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.surface-preset-button {
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 217, 255, 0.55);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(7, 31, 68, 0.88), rgba(2, 8, 23, 0.7)),
    radial-gradient(circle at 20% 0%, rgba(0, 217, 255, 0.18), transparent 42%);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
  text-align: left;
  cursor: pointer;
}

.surface-preset-button strong,
.surface-preset-button span {
  display: block;
}

.surface-preset-button strong {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.surface-preset-button span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.editor-surface-note {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 8px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(7, 31, 68, 0.68), rgba(2, 8, 23, 0.58)),
    radial-gradient(circle at 0% 50%, rgba(0, 217, 255, 0.13), transparent 44%);
  font-size: 12px;
  line-height: 1.35;
}

.overlay-cue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.overlay-cue-head strong {
  color: var(--text);
  font-size: 13px;
}

.overlay-cue-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.overlay-command-center {
  display: grid;
  gap: 7px;
}

.overlay-essential-cues,
.overlay-ambient-cues {
  display: grid;
  grid-template-columns: minmax(138px, 0.2fr) minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(25, 118, 255, 0.05)),
    rgba(2, 13, 31, 0.6);
  padding: 7px;
}

.overlay-essential-cues-head {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.overlay-essential-cues-head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.overlay-essential-cues-head strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.12;
}

.overlay-essential-cue-grid,
.overlay-ambient-cue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 6px;
  min-width: 0;
}

.overlay-ambient-cue-grid {
  grid-template-columns: minmax(160px, 0.32fr);
}

.overlay-essential-cue-grid .ghost-button,
.overlay-ambient-cue-grid .ghost-button {
  min-height: 38px;
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.05;
}

.overlay-advanced-details {
  margin: 0;
}

.overlay-advanced-details[open] {
  display: grid;
  gap: 7px;
}

.overlay-cue-controls {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) 76px 82px;
  gap: 6px;
  align-items: end;
}

.overlay-cue-controls label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.overlay-cue-controls label span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-cue-controls select,
.overlay-cue-controls input {
  min-height: 28px;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
}

.overlay-switcher {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.12), rgba(25, 118, 255, 0.08)),
    rgba(2, 13, 31, 0.72);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.08);
  padding: 10px;
}

.overlay-switcher-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.overlay-switcher-head strong {
  color: var(--text);
  font-size: 14px;
}

.overlay-switcher-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.overlay-switcher-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.overlay-switcher-pane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 68px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.7);
  padding: 7px 8px;
}

.host-layout-tab-overlay .overlay-switcher-pane {
  min-height: 78px;
}

.overlay-switcher-pane > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-switcher-pane strong,
.overlay-switcher-pane small {
  min-width: 0;
  overflow-wrap: normal;
}

.overlay-switcher-pane strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.overlay-switcher-pane small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.18;
}

.overlay-program-pane > span {
  color: rgba(239, 251, 255, 0.95);
}

.overlay-preview-pane > span {
  color: rgba(158, 211, 255, 0.82);
}

.overlay-switcher-actions .action-button {
  min-height: 44px;
  font-size: 13px;
}

.overlay-priority-deck {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 5px;
  align-items: stretch;
}

.overlay-priority-primary,
.overlay-priority-suppressed {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 96, 176, 0.12), rgba(2, 8, 23, 0.74)),
    rgba(2, 13, 31, 0.64);
  padding: 5px;
}

.overlay-priority-primary {
  display: grid;
  gap: 2px;
}

.overlay-priority-primary > span,
.overlay-priority-suppressed > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.overlay-priority-suppressed p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
}

.overlay-priority-primary strong,
.overlay-priority-primary small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-priority-primary strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.05;
}

.overlay-priority-primary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.overlay-priority-suppressed {
  display: grid;
  gap: 4px;
}

.overlay-priority-suppressed > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px;
}

.overlay-priority-chip,
.overlay-priority-empty {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(0, 217, 255, 0.35);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.74);
  color: var(--text);
  padding: 4px 5px;
  text-align: left;
}

.overlay-priority-chip {
  cursor: pointer;
}

.overlay-priority-chip:hover,
.overlay-priority-chip:focus-visible {
  border-color: rgba(125, 247, 255, 0.78);
  box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.12), 0 0 12px rgba(0, 217, 255, 0.12);
}

.overlay-priority-chip span,
.overlay-priority-chip strong,
.overlay-priority-chip small,
.overlay-priority-chip em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-priority-chip span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-priority-chip strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 10px;
  line-height: 1.05;
}

.overlay-priority-chip small,
.overlay-priority-empty {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}

.overlay-priority-chip em {
  margin-top: 1px;
  color: rgba(245, 249, 252, 0.58);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
}

.overlay-priority-next {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 9px;
  justify-self: stretch;
}

.overlay-program-pane.is-live {
  border-color: rgba(125, 247, 255, 0.74);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.12), 0 0 16px rgba(0, 217, 255, 0.16);
}

.overlay-preview-pane.is-live {
  border-color: rgba(0, 217, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(25, 118, 255, 0.12)),
    rgba(2, 8, 23, 0.78);
  box-shadow: inset 0 0 20px rgba(0, 217, 255, 0.16), 0 0 20px rgba(0, 217, 255, 0.2);
}

.overlay-switcher-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.overlay-switcher-actions button {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1;
}

.host-layout-tab-overlay .overlay-switcher-actions button {
  min-height: 42px;
  font-size: 11px;
}

.overlay-cue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 132px));
  gap: 6px;
  justify-content: start;
}

.overlay-cue-grid .ghost-button {
  min-height: 30px;
  max-width: 132px;
  padding: 6px 8px;
  font-size: 11px;
}

.overlay-cue-grid .visual-cue-button-disabled {
  border-style: dashed;
  cursor: help;
  opacity: 0.58;
  filter: saturate(0.72);
}

.overlay-cue-grid .clear-cue-button {
  border-color: rgba(125, 247, 255, 0.5);
  opacity: 0.82;
}

.cue-strip {
  margin-top: 0;
}

.room-switcher {
  border: 1px solid rgba(25, 118, 255, 0.75);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.75);
  padding: 8px;
}

.admin-room-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.22fr);
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.admin-room-row > button {
  min-height: 38px;
}

.access-shortcuts {
  border: 1px solid rgba(25, 118, 255, 0.75);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.75);
  padding: 8px;
}

.access-diagnostics {
  border: 1px solid rgba(25, 118, 255, 0.75);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.75);
  padding: 8px;
}

.access-diagnostics .tailscale-control-grid {
  margin-top: 8px;
  gap: 7px;
}

.compact-db {
  font-size: 12px;
  line-height: 1.2;
}

.join-qr-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.join-qr-card img {
  width: 108px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #020817;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

.join-qr-card strong {
  display: block;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
}

.join-qr-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.share-qr-card {
  display: block;
  text-align: center;
}

.share-qr-card img {
  width: 52px;
  margin: 0 auto;
}

.share-qr-card strong {
  font-size: 10px;
}

.share-qr-card span {
  margin-top: 2px;
  overflow-wrap: normal;
  word-break: normal;
}

.meter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 138px));
  gap: 8px;
  justify-content: start;
}

.admin-meter-grid {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
}

.meter-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(92px, 116px));
  gap: 6px;
}

.meter {
  min-height: 96px;
  max-width: 138px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  padding: 10px;
}

.meter-grid-compact .meter {
  min-height: 66px;
  max-width: 116px;
  padding: 7px;
}

.meter-grid-compact .big-value {
  font-size: 20px;
}

.meter-grid-compact .meter-bar {
  height: 7px;
  margin-top: 5px;
}

.meter-strip {
  display: grid;
  gap: 7px;
}

.host-meters-panel.widget-h-2 {
  gap: 5px;
}

.host-meters-panel.widget-h-2 h2 {
  display: none;
}

.host-meters-panel.widget-h-2 .label {
  margin-bottom: 0;
}

.meter-strip-compact {
  gap: 5px;
}

.meter-strip > strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.meter-strip > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.meter-pill {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.14), rgba(1, 12, 27, 0.86)),
    rgba(3, 16, 34, 0.8);
  padding: 5px 7px;
}

.meter-pill b,
.meter-pill em {
  min-width: 0;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter-pill b {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.meter-pill em {
  color: var(--accent);
  font-size: 17px;
  font-style: normal;
  font-weight: 950;
}

.meter-bar {
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: #041225;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.35);
}

.feedback-layer,
.rain-field {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.spend-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 54;
  pointer-events: none;
  overflow: hidden;
}

.rain-drop {
  position: fixed;
  top: -44px;
  left: var(--x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 72px;
  max-width: 176px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(7, 31, 68, 0.9);
  color: var(--text);
  box-shadow: 0 0 24px var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  animation: gentle-rain 3.1s ease-out var(--delay) forwards;
  will-change: transform, opacity;
}

.rain-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.42));
}

.rain-emoji,
.rain-vote,
.rain-question {
  background: rgba(6, 54, 110, 0.94);
  border-color: var(--line-2);
}

.rain-comfort {
  border-color: var(--accent);
}

.host-page .feedback-layer {
  z-index: 9;
}

.host-feedback-rail {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 9;
  width: min(920px, calc(100vw - 48px));
  max-height: 72px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.host-feedback-chip {
  min-width: 118px;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(0, 217, 255, 0.68);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 126, 210, 0.2), rgba(3, 17, 38, 0.9)),
    rgba(2, 12, 28, 0.86);
  color: var(--text);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.18), inset 0 0 12px rgba(0, 217, 255, 0.1);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: host-feedback-chip 3.1s ease-out var(--delay) forwards;
  will-change: transform, opacity;
}

.host-feedback-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-feedback-chip .rain-icon {
  width: 24px;
  height: 24px;
}

@keyframes host-feedback-chip {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  14%,
  72% {
    opacity: 0.88;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

.spend-fx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: spend-shell var(--fx-duration, 10s) ease-out var(--fx-age, 0s) both;
}

.spend-placement-lower-third {
  align-items: end;
  justify-items: center;
  padding: 0 5vw 8vh;
}

.spend-placement-upper-safe,
.spend-placement-upper-right {
  align-items: start;
  justify-items: end;
  padding: 8vh 5vw 0;
}

.spend-placement-center-card {
  align-items: center;
  justify-items: center;
  padding: 8vh 8vw;
}

.spend-placement-full-frame {
  place-items: center;
}

.spend-fx-core {
  position: relative;
  width: min(82vw, 980px);
  height: min(48vh, 470px);
  display: grid;
  place-items: center;
  opacity: var(--fx-opacity, 1);
}

.spend-fx-core strong {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 217, 255, 0.6);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.9);
  color: var(--accent);
  box-shadow: 0 0 34px rgba(0, 217, 255, 0.34), inset 0 0 18px rgba(0, 217, 255, 0.12);
  font-size: clamp(14px, 2.2vw, 27px);
  font-weight: 900;
  line-height: 1;
  padding: 12px 16px;
  text-shadow: 0 0 16px rgba(0, 217, 255, 0.68);
  text-transform: uppercase;
}

.packet-field,
.phish-field,
.blink-field,
.laurel-field,
.ripple-field,
.shield-field,
.break-stinger-field,
.rewind-ripple-field,
.freeze-frame-field,
.question-spotlight-field {
  position: absolute;
  inset: 0;
}

.visual-cue-fx .spend-fx-core {
  filter: saturate(calc(0.9 + var(--fx-intensity, 1) * 0.35));
}

.visual-cue-fx.spend-fx {
  animation-name: visual-cue-shell;
}

.break-stinger-field {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 217, 255, 0.2), transparent 34%),
    linear-gradient(90deg, transparent 0 8%, rgba(0, 217, 255, 0.1) 9% 12%, transparent 13% 88%, rgba(0, 217, 255, 0.1) 89% 92%, transparent 93%);
}

.break-stinger-field i {
  width: min(50vw, 520px);
  aspect-ratio: 1;
  border: 2px solid rgba(0, 217, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 54px rgba(0, 217, 255, 0.45), inset 0 0 34px rgba(0, 217, 255, 0.2);
  animation: stinger-orbit 3.4s ease-out var(--fx-age, 0s) both;
}

.break-stinger-field b {
  position: absolute;
  width: min(86vw, 980px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.72);
  animation: stinger-scan 2.2s ease-out var(--fx-age, 0s) both;
}

.break-stinger-field b:nth-child(3) {
  animation-delay: calc(220ms + var(--fx-age, 0s));
  transform: translateY(-12vh);
}

.break-stinger-field b:nth-child(4) {
  animation-delay: calc(440ms + var(--fx-age, 0s));
  transform: translateY(12vh);
}

.rewind-ripple-field {
  display: grid;
  place-items: center;
}

.rewind-ripple-field i {
  position: absolute;
  width: min(24vw, 250px);
  aspect-ratio: 1;
  border: 2px solid rgba(0, 217, 255, 0.68);
  border-radius: 50%;
  animation: rewind-ripple 4s ease-out var(--fx-age, 0s) both;
}

.rewind-ripple-field i:nth-child(2) {
  animation-delay: calc(240ms + var(--fx-age, 0s));
}

.rewind-ripple-field i:nth-child(3) {
  animation-delay: calc(480ms + var(--fx-age, 0s));
}

.rewind-ripple-field b {
  width: min(28vw, 270px);
  aspect-ratio: 1;
  border-left: 18px solid var(--accent);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  filter: drop-shadow(0 0 22px rgba(0, 217, 255, 0.85));
  transform: rotate(180deg);
}

.freeze-frame-field {
  background:
    repeating-linear-gradient(0deg, rgba(0, 217, 255, 0.13) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(25, 118, 255, 0.12) 0 1px, transparent 1px 22px);
  animation: freeze-flash 1.8s ease-out var(--fx-age, 0s) both;
}

.freeze-frame-field i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 52px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.8);
}

.question-spotlight-field {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(0, 217, 255, 0.32), transparent 36%),
    linear-gradient(180deg, transparent, rgba(0, 217, 255, 0.12));
}

.question-spotlight-field i {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: min(72vw, 760px);
  height: 110px;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 217, 255, 0.76);
  border-radius: 8px;
  box-shadow: 0 0 48px rgba(0, 217, 255, 0.4), inset 0 0 22px rgba(0, 217, 255, 0.16);
}

.question-spotlight-field b {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: min(60vw, 620px);
  height: 1px;
  transform: translateX(-50%);
  background: var(--accent);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.9);
}

.packet-field i {
  position: absolute;
  left: -12vw;
  top: var(--y);
  width: var(--w);
  height: 7px;
  border: 1px solid rgba(125, 247, 255, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), #7df7ff);
  box-shadow: 0 0 24px rgba(0, 217, 255, 0.82);
  animation: packet-flight 1.8s linear calc(var(--d, 0ms) + var(--fx-age, 0s)) both;
}

.phish-field {
  display: grid;
  place-items: center;
}

.phish-field i {
  width: min(42vw, 380px);
  aspect-ratio: 1;
  border: 5px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 48px rgba(0, 217, 255, 0.52);
}

.phish-field b {
  position: absolute;
  width: 22vw;
  max-width: 260px;
  height: 3px;
  background: rgba(125, 247, 255, 0.84);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.54);
}

.phish-field b:nth-child(2) { transform: translate(-36%, -90px) rotate(14deg); }
.phish-field b:nth-child(3) { transform: translate(32%, -10px) rotate(-10deg); }
.phish-field b:nth-child(4) { transform: translate(-5%, 82px) rotate(5deg); }

.blink-field {
  background:
    linear-gradient(rgba(0, 217, 255, 0.13) 1px, transparent 1px) 0 0 / 100% 18px,
    radial-gradient(circle at 50% 50%, rgba(0, 217, 255, 0.34), transparent 34%);
  border: 1px solid rgba(0, 217, 255, 0.48);
  box-shadow: inset 0 0 70px rgba(0, 217, 255, 0.2), 0 0 38px rgba(0, 217, 255, 0.2);
  animation: blink-flash 620ms steps(2, end) var(--fx-age, 0s) 7 both;
}

.blink-field i {
  position: absolute;
  left: 8%;
  width: 84%;
  height: 2px;
  top: var(--y);
  background: rgba(125, 247, 255, 0.68);
  box-shadow: 0 0 13px rgba(0, 217, 255, 0.62);
}

.laurel-field i {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 34%;
  border: 4px solid var(--accent);
  filter: drop-shadow(0 0 26px rgba(0, 217, 255, 0.78));
}

.laurel-field i:nth-child(1) {
  left: 18%;
  border-right: 0;
  border-radius: 100% 0 0 100%;
}

.laurel-field i:nth-child(2) {
  right: 18%;
  border-left: 0;
  border-radius: 0 100% 100% 0;
}

.laurel-field b {
  position: absolute;
  left: var(--leaf-left);
  top: var(--leaf-top);
  width: 34px;
  height: 14px;
  border-radius: 100% 0 100% 0;
  background: #7df7ff;
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.54);
  transform: rotate(var(--leaf-rotate));
}

.ripple-field {
  display: grid;
  place-items: center;
}

.spend-reaction-icon {
  width: min(28vw, 220px);
  aspect-ratio: 1;
  border: 2px solid rgba(0, 217, 255, 0.45);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 42px rgba(0, 217, 255, 0.36);
  z-index: 2;
}

.ripple-field i {
  position: absolute;
  width: min(22vw, 220px);
  aspect-ratio: 1;
  border: 2px solid rgba(125, 247, 255, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(0, 217, 255, 0.38);
  animation: ripple-ring 1.8s ease-out var(--fx-age, 0s) 4 both;
}

.ripple-field i:nth-of-type(2) { animation-delay: calc(var(--fx-age, 0s) + 280ms); }
.ripple-field i:nth-of-type(3) { animation-delay: calc(var(--fx-age, 0s) + 560ms); }

.shield-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2vw, 20px);
}

.shield-field i {
  width: min(11vw, 110px);
  height: min(23vh, 220px);
  clip-path: polygon(50% 0, 90% 18%, 78% 82%, 50% 100%, 22% 82%, 10% 18%);
  background: linear-gradient(180deg, rgba(125, 247, 255, 0.98), rgba(0, 217, 255, 0.76), rgba(15, 82, 217, 0.76));
  border: 1px solid rgba(125, 247, 255, 0.8);
  box-shadow: 0 0 38px rgba(0, 217, 255, 0.62), inset 0 0 22px rgba(238, 248, 255, 0.18);
  animation: shield-rise 1.2s ease-out calc(var(--d, 0ms) + var(--fx-age, 0s)) both;
}

@keyframes spend-shell {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  7%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes visual-cue-shell {
  0% {
    opacity: 0.82;
    transform: scale(0.985);
  }
  5%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.018);
  }
}

@keyframes packet-flight {
  from {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  to {
    transform: translateX(120vw) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes blink-flash {
  0%,
  100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.78;
  }
}

@keyframes ripple-ring {
  from {
    transform: scale(0.78);
    opacity: 0.86;
  }
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

@keyframes shield-rise {
  from {
    transform: translateY(26vh) scaleY(0.72);
    opacity: 0;
  }
  to {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

@keyframes stinger-orbit {
  from {
    transform: scale(0.72) rotate(0deg);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  to {
    transform: scale(1.18) rotate(180deg);
    opacity: 0.22;
  }
}

@keyframes stinger-scan {
  from {
    opacity: 0;
    transform: translateY(-28vh) scaleX(0.25);
  }
  22% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(28vh) scaleX(1);
  }
}

@keyframes rewind-ripple {
  from {
    transform: scale(0.22) rotate(-20deg);
    opacity: 0.9;
  }
  to {
    transform: scale(4.6) rotate(-120deg);
    opacity: 0;
  }
}

@keyframes freeze-flash {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  58% {
    opacity: 0.82;
  }
}

@keyframes gentle-rain {
  0% {
    transform: translate(-50%, -24px) scale(0.96);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  74% {
    opacity: 0.92;
  }
  100% {
    transform: translate(calc(-50% + 16px), 34vh) scale(1);
    opacity: 0;
  }
}

.meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--line), var(--accent));
}

.signal-timeline {
  display: grid;
  gap: 8px;
}

.signal-timeline-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.signal-panel {
  margin-bottom: 10px;
}

.signal-row {
  display: grid;
  grid-template-columns: minmax(104px, 0.82fr) minmax(210px, 1.18fr);
  gap: 6px 8px;
  align-items: center;
  border: 1px solid rgba(25, 118, 255, 0.58);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.68);
  padding: 7px;
}

.signal-timeline-compact .signal-row {
  grid-template-columns: minmax(88px, 112px) minmax(190px, 260px);
  gap: 3px 6px;
  justify-self: start;
  max-width: 420px;
  width: 100%;
  padding: 5px;
}

.signal-hot {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 18px rgba(0, 217, 255, 0.12);
}

.signal-head {
  min-width: 0;
}

.signal-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.15;
}

.signal-timeline-compact .signal-head strong {
  font-size: 12px;
}

.signal-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.signal-timeline-compact .signal-head span {
  margin-top: 1px;
  font-size: 9px;
}

.signal-statline {
  display: grid;
  grid-template-columns: repeat(4, minmax(46px, 60px));
  gap: 3px;
  justify-content: end;
}

.signal-timeline-compact .signal-statline {
  grid-template-columns: repeat(4, minmax(42px, 54px));
  gap: 3px;
}

.signal-statline span {
  min-height: 26px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(15, 82, 217, 0.72);
  border-radius: 6px;
  background: rgba(4, 18, 37, 0.84);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.08;
  padding: 3px 4px;
  text-transform: uppercase;
}

.signal-timeline-compact .signal-statline span {
  min-height: 20px;
  padding: 2px 3px;
  font-size: 8px;
}

.signal-statline b {
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}

.signal-timeline-compact .signal-statline b {
  font-size: 13px;
}

.signal-micro-stat em {
  color: var(--muted);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.signal-timeline-compact .signal-gauges {
  display: none;
}

.signal-gauge {
  height: 8px;
  border: 1px solid rgba(0, 217, 255, 0.32);
  border-radius: 999px;
  background: #041225;
  overflow: hidden;
}

.signal-gauge i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--line), var(--accent));
}

.signal-gauge.diversity i {
  background: linear-gradient(90deg, #0f52d9, #7df7ff);
}

.signal-gauge.repeats i {
  background: linear-gradient(90deg, #375985, #b8d7ff);
}

.signal-strip {
  position: relative;
  height: 22px;
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(25, 118, 255, 0.18), transparent 1px) 0 0 / 25% 100%,
    rgba(4, 18, 37, 0.64);
}

.signal-timeline-compact .signal-strip {
  grid-column: 1 / -1;
  height: 14px;
}

.signal-dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--shadow);
  transform: translate(-50%, -50%);
}

.signal-timeline-compact .signal-dot {
  width: 8px;
  height: 8px;
}

.signal-dot.repeat {
  width: 9px;
  height: 9px;
  border-color: var(--muted);
  background: var(--line-2);
  opacity: 0.72;
}

.archive-log {
  display: grid;
  gap: 7px;
  max-height: none;
  overflow: visible;
}

.archive-log.empty {
  max-height: none;
}

.archive-empty,
.archive-row {
  border: 1px solid rgba(25, 118, 255, 0.62);
  border-radius: 8px;
  background: rgba(4, 18, 37, 0.76);
  padding: 8px;
}

.archive-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.archive-row strong,
.archive-row span {
  display: block;
}

.archive-row strong {
  font-size: 13px;
  line-height: 1.16;
}

.archive-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.archive-row b {
  min-width: 70px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  padding: 6px 8px;
  text-align: center;
  text-transform: uppercase;
}

.archive-superseded {
  border-color: rgba(125, 247, 255, 0.66);
  box-shadow: inset 3px 0 0 rgba(125, 247, 255, 0.76);
}

.archive-expired {
  opacity: 0.82;
}

.overlay-body {
  background: transparent;
  overflow: hidden;
}

.overlay-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--text);
  background: transparent;
}

.overlay-mission-control {
  --overlay-glass: rgba(4, 21, 48, 0.68);
  --overlay-glass-strong: rgba(2, 10, 26, 0.88);
  --overlay-line: rgba(0, 217, 255, 0.48);
  --overlay-soft: rgba(96, 165, 250, 0.28);
  isolation: isolate;
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.26);
}

.overlay-frame {
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(0, 217, 255, 0.36);
  box-shadow: inset 0 0 52px rgba(0, 217, 255, 0.14);
  pointer-events: none;
}

.overlay-mission-control .overlay-frame {
  inset: 26px;
  border-width: 1px;
  border-image: linear-gradient(90deg, rgba(0, 217, 255, 0.16), rgba(125, 247, 255, 0.88), rgba(96, 165, 250, 0.22)) 1;
  box-shadow: inset 0 0 76px rgba(0, 217, 255, 0.13), 0 0 46px rgba(0, 217, 255, 0.12);
}

.overlay-display-setup {
  position: absolute;
  left: clamp(18px, 2.2vw, 34px);
  top: clamp(18px, 2.2vw, 34px);
  z-index: 60;
  width: min(720px, calc(100% - 36px));
  display: grid;
  gap: 12px;
  border: 1px solid rgba(125, 247, 255, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(7, 31, 68, 0.82)),
    rgba(2, 8, 23, 0.88);
  box-shadow:
    inset 0 0 26px rgba(0, 217, 255, 0.09),
    0 18px 48px rgba(0, 0, 0, 0.36);
  padding: clamp(14px, 1.6vw, 20px);
}

.overlay-display-setup-copy {
  display: grid;
  gap: 5px;
}

.overlay-display-setup-copy strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1.02;
}

.overlay-display-setup-copy small {
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.overlay-display-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overlay-display-mode {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 8px;
  background: rgba(3, 16, 36, 0.72);
  padding: 10px;
}

.overlay-display-mode.is-recommended {
  border-color: rgba(125, 247, 255, 0.7);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.1);
}

.overlay-display-mode span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 950;
}

.overlay-display-mode strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.1;
}

.overlay-display-mode small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.28;
}

.overlay-display-setup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.overlay-display-setup-actions .ghost-button {
  min-height: 40px;
}

.overlay-widget {
  position: absolute;
  min-width: 80px;
  min-height: 42px;
  pointer-events: none;
}

.overlay-mission-control .overlay-widget {
  z-index: 2;
}

.overlay-mission-control .overlay-widget-ambient-terms {
  z-index: 1;
}

.overlay-mission-control .overlay-widget-learndj-rain {
  z-index: 1;
}

.overlay-mission-control .overlay-widget-stinger-safe-zone {
  z-index: 30;
}

.overlay-idle-layer,
.overlay-reaction-field,
.overlay-stinger-layer {
  position: absolute;
  inset: 0;
}

.overlay-idle-layer {
  overflow: hidden;
  opacity: 0.84;
  mix-blend-mode: screen;
}

.overlay-idle-layer::before,
.overlay-idle-layer::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(0, 217, 255, 0.12);
  clip-path: polygon(0 0, 18% 0, 18% 3px, 3px 3px, 3px 18%, 0 18%, 0 0, 82% 0, 82% 3px, calc(100% - 3px) 3px, calc(100% - 3px) 18%, 100% 18%, 100% 0, 100% 82%, calc(100% - 3px) 82%, calc(100% - 3px) calc(100% - 3px), 82% calc(100% - 3px), 82% 100%, 100% 100%, 18% 100%, 18% calc(100% - 3px), 3px calc(100% - 3px), 3px 82%, 0 82%);
}

.overlay-idle-layer::after {
  inset: 13% 18%;
  opacity: 0.45;
  transform: skewX(-8deg);
}

.overlay-standby-lockup {
  position: absolute;
  left: clamp(58px, 6vw, 118px);
  top: clamp(170px, 22vh, 260px);
  width: min(48vw, 760px);
  display: grid;
  gap: 12px;
  border-left: 3px solid rgba(0, 217, 255, 0.78);
  background:
    linear-gradient(90deg, rgba(0, 217, 255, 0.12), transparent 78%),
    rgba(2, 8, 23, 0.22);
  box-shadow: -28px 0 48px rgba(0, 217, 255, 0.08);
  padding: clamp(18px, 2vw, 32px);
}

.overlay-standby-lockup span {
  color: var(--accent);
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.overlay-standby-lockup strong {
  max-width: 760px;
  color: var(--text);
  font-size: clamp(48px, 6vw, 118px);
  font-weight: 900;
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0, 217, 255, 0.34);
}

.overlay-standby-lockup em {
  max-width: 680px;
  color: rgba(245, 249, 252, 0.84);
  font-size: clamp(18px, 1.5vw, 30px);
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.overlay-standby-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.overlay-standby-metrics b {
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.68);
  color: var(--accent);
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 900;
  padding: 8px 12px;
  text-transform: uppercase;
}

.overlay-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 42px rgba(0, 217, 255, 0.08), inset 0 0 28px rgba(0, 217, 255, 0.06);
  animation: overlayOrbitSpin 34s linear infinite;
}

.overlay-orbit-one {
  width: min(86vw, 1240px);
  height: min(58vh, 620px);
}

.overlay-orbit-two {
  width: min(54vw, 780px);
  height: min(76vh, 760px);
  transform: translate(-50%, -50%) rotate(18deg);
  animation-duration: 47s;
  animation-direction: reverse;
}

.overlay-scanline {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(125, 247, 255, 0.85), transparent);
  box-shadow: 0 0 28px rgba(0, 217, 255, 0.58);
  animation: overlayScan 7s ease-in-out infinite;
}

.overlay-greek-circuit {
  position: absolute;
  width: min(24vw, 340px);
  height: min(24vw, 340px);
  border: 1px solid rgba(0, 217, 255, 0.16);
  opacity: 0.6;
  background:
    linear-gradient(90deg, transparent 47%, rgba(0, 217, 255, 0.25) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(0, 217, 255, 0.25) 48% 52%, transparent 53%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 217, 255, 0.12) 25px 27px);
  filter: drop-shadow(0 0 22px rgba(0, 217, 255, 0.16));
}

.overlay-greek-circuit-a {
  left: 5%;
  bottom: 9%;
  transform: rotate(45deg);
}

.overlay-greek-circuit-b {
  right: 6%;
  top: 12%;
  transform: rotate(45deg) scale(0.82);
}

.overlay-corner {
  position: absolute;
  width: 118px;
  height: 54px;
  border-color: rgba(125, 247, 255, 0.72);
  filter: drop-shadow(0 0 16px rgba(0, 217, 255, 0.55));
}

.overlay-corner-tl { left: 26px; top: 26px; border-top: 2px solid; border-left: 2px solid; }
.overlay-corner-tr { right: 26px; top: 26px; border-top: 2px solid; border-right: 2px solid; }
.overlay-corner-bl { left: 26px; bottom: 26px; border-bottom: 2px solid; border-left: 2px solid; }
.overlay-corner-br { right: 26px; bottom: 26px; border-bottom: 2px solid; border-right: 2px solid; }

.overlay-widget .overlay-orb,
.overlay-widget .overlay-badges,
.overlay-widget .overlay-pulse {
  position: static;
}

.overlay-widget .overlay-badges {
  display: flex;
  flex-wrap: wrap;
}

.overlay-widget .overlay-pulse {
  width: 100%;
}

.overlay-telemetry-ribbon,
.overlay-lower-third,
.overlay-hand-raise-alert,
.overlay-qr-lobby,
.overlay-question-spotlight,
.overlay-resource-card,
.overlay-poll-card,
.overlay-quiz-card {
  border: 1px solid var(--overlay-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 31, 68, 0.9), rgba(2, 8, 23, 0.74)),
    radial-gradient(circle at 22% 0%, rgba(0, 217, 255, 0.18), transparent 38%);
  box-shadow: 0 0 42px rgba(0, 217, 255, 0.22), inset 0 0 22px rgba(0, 217, 255, 0.08);
  backdrop-filter: blur(8px);
}

.overlay-telemetry-ribbon {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
  gap: 14px;
  align-items: center;
  padding: clamp(12px, 1.5vw, 20px);
}

.overlay-ribbon-title {
  display: grid;
  gap: 4px;
}

.overlay-ribbon-title span,
.overlay-lower-third span,
.overlay-question-spotlight span,
.overlay-resource-card span,
.overlay-poll-card span,
.overlay-quiz-card span,
.overlay-qr-copy span {
  color: var(--accent);
  font-size: clamp(10px, 0.8vw, 14px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.overlay-ribbon-title strong {
  color: var(--text);
  font-size: clamp(18px, 2vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}

.overlay-ribbon-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.overlay-ribbon-metrics span {
  min-width: 0;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 7px;
  background: rgba(2, 8, 23, 0.62);
  padding: 8px 9px;
}

.overlay-ribbon-metrics em {
  display: block;
  color: var(--muted);
  font-size: clamp(8px, 0.62vw, 11px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-ribbon-metrics b {
  display: block;
  color: var(--accent);
  font-size: clamp(17px, 1.8vw, 32px);
  line-height: 1;
}

.overlay-lower-third,
.overlay-question-spotlight,
.overlay-resource-card,
.overlay-poll-card,
.overlay-quiz-card {
  display: grid;
  align-content: center;
  gap: 7px;
  height: 100%;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(14px, 2vw, 26px);
}

.overlay-lower-third strong,
.overlay-question-spotlight strong,
.overlay-resource-card strong,
.overlay-poll-card strong,
.overlay-quiz-card strong {
  color: var(--text);
  font-size: clamp(22px, 3vw, 56px);
  line-height: 0.96;
}

.overlay-widget-poll-card .overlay-poll-card strong,
.overlay-widget-quiz-card .overlay-quiz-card strong {
  font-size: clamp(22px, 2.35vw, 46px);
}

.overlay-widget-question-spotlight .overlay-question-spotlight strong {
  font-size: clamp(24px, 2.6vw, 50px);
}

.overlay-widget-resource-card .overlay-resource-card strong {
  font-size: clamp(22px, 2.35vw, 46px);
}

.overlay-lower-third em,
.overlay-question-spotlight em,
.overlay-resource-card em,
.overlay-poll-card em,
.overlay-quiz-card em,
.overlay-qr-copy em,
.overlay-hand-raise-alert em {
  color: rgba(245, 249, 252, 0.82);
  font-size: clamp(12px, 1vw, 18px);
  font-style: normal;
  font-weight: 800;
}

.overlay-resource-card small {
  color: color-mix(in srgb, var(--resource-accent, var(--accent)) 82%, #ffffff);
  font-size: clamp(10px, 0.72vw, 14px);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-hand-raise-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-content: center;
  align-items: center;
  min-height: 100%;
  padding: clamp(14px, 1.8vw, 24px);
  border-color: rgba(125, 247, 255, 0.92);
  box-shadow: 0 0 68px rgba(0, 217, 255, 0.44), inset 0 0 28px rgba(0, 217, 255, 0.14);
  animation: overlayAssertivePulse 1.6s ease-in-out infinite;
}

.overlay-hand-icon {
  grid-row: span 2;
  width: clamp(50px, 5vw, 92px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.56);
  border-radius: 8px;
  background: rgba(0, 217, 255, 0.1);
  color: var(--accent);
  filter: drop-shadow(0 0 16px rgba(0, 217, 255, 0.38));
}

.overlay-hand-icon svg {
  width: 70%;
  height: 70%;
}

.overlay-hand-raise-alert strong {
  color: var(--text);
  font-size: clamp(22px, 2.6vw, 48px);
  line-height: 0.98;
  text-transform: uppercase;
}

.overlay-qr-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 38%);
  gap: 14px;
  align-items: center;
  min-height: 100%;
  padding: clamp(14px, 1.7vw, 22px);
}

.overlay-qr-copy {
  display: grid;
  gap: 7px;
}

.overlay-qr-copy strong {
  color: var(--text);
  font-size: clamp(20px, 2.3vw, 42px);
  line-height: 1;
}

.overlay-qr-lobby img {
  width: min(100%, 230px);
  aspect-ratio: 1;
  justify-self: end;
  border: 1px solid rgba(0, 217, 255, 0.55);
  border-radius: 8px;
  background: rgba(245, 249, 252, 0.94);
  box-shadow: 0 0 34px rgba(0, 217, 255, 0.28);
}

.overlay-poll-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.overlay-poll-bars i,
.overlay-poll-bars b {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(46, 139, 87, 0.9));
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.3);
}

.overlay-poll-bars b {
  background: linear-gradient(90deg, rgba(125, 247, 255, 0.22), rgba(96, 165, 250, 0.72));
}

.overlay-orb {
  position: absolute;
  top: 28px;
  right: 32px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: rgba(3, 17, 38, 0.74);
  color: var(--accent);
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 0 34px var(--shadow);
}

.overlay-badges {
  position: absolute;
  left: 32px;
  top: 28px;
  display: flex;
  gap: 10px;
}

.overlay-badge {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(6, 54, 110, 0.82);
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.point-spend-widget {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.overlay-pulse {
  position: absolute;
  left: 10vw;
  right: 10vw;
  bottom: 34px;
  height: 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(4, 18, 37, 0.82);
  overflow: hidden;
}

.overlay-pulse div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--line), var(--accent));
}

.overlay-join-qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 320px);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.86);
  box-shadow: 0 0 34px rgba(0, 217, 255, 0.2);
  padding: 12px;
}

.overlay-join-qr img {
  width: min(100%, 230px);
  aspect-ratio: 1;
  border-radius: 8px;
  background: #020817;
}

.overlay-join-qr strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.overlay-mission-control .burst-layer {
  position: absolute;
  inset: 0;
}

.overlay-mission-control .burst {
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.3), transparent 58%),
    rgba(2, 8, 23, 0.86);
  box-shadow: 0 0 38px rgba(0, 217, 255, 0.38), inset 0 0 18px rgba(0, 217, 255, 0.14);
}

.overlay-mission-control .burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  border: 1px solid rgba(0, 217, 255, 0.28);
  transform: translate(-50%, -50%);
  animation: overlayReactionRadiation 1.4s ease-out infinite;
}

.burst-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.burst {
  position: absolute;
  left: var(--x);
  bottom: 16vh;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: rgba(7, 31, 68, 0.88);
  color: var(--accent);
  font-weight: 900;
  animation: rise 2.4s ease-out var(--burst-age, 0s) forwards;
}

.burst-icon {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 5px;
  border-radius: 8px;
  object-fit: cover;
}

@keyframes rise {
  from {
    transform: translateY(0) scale(0.94);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  to {
    transform: translateY(-36vh) scale(1.06);
    opacity: 0;
  }
}

@keyframes overlayOrbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes overlayScan {
  0% {
    transform: translateY(-10vh) scaleX(0.76);
    opacity: 0;
  }
  18%,
  72% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(58vh) scaleX(1);
    opacity: 0;
  }
}

@keyframes overlayAssertivePulse {
  0%,
  100% {
    box-shadow: 0 0 38px rgba(0, 217, 255, 0.28), inset 0 0 20px rgba(0, 217, 255, 0.08);
  }
  50% {
    box-shadow: 0 0 74px rgba(0, 217, 255, 0.58), inset 0 0 34px rgba(0, 217, 255, 0.18);
  }
}

@keyframes overlayReactionRadiation {
  from {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.58);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@keyframes electricButtonRadiation {
  0% {
    opacity: 0.2;
    transform: translateX(-50%) scaleX(0.84);
    filter: blur(7px);
  }
  38% {
    opacity: 0.62;
    transform: translateX(-50%) scaleX(1.05);
    filter: blur(10px);
  }
  100% {
    opacity: 0.24;
    transform: translateX(-50%) scaleX(0.96);
    filter: blur(8px);
  }
}

@keyframes electricTapRipple {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.12);
  }
  60% {
    opacity: 0.24;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(9);
  }
}

@keyframes studentTapGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -32%) scale(0.68);
  }
  24% {
    opacity: 0.92;
    transform: translate(-50%, -32%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -32%) scale(1.18);
  }
}

.editor-shell {
  display: grid;
  grid-template-columns: 230px 1fr 240px;
  gap: 14px;
}

.palette,
.inspector {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.palette-item {
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #041225;
  color: var(--text);
  text-align: left;
  padding: 9px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.palette-item:active,
.layout-widget:active {
  cursor: grabbing;
}

.drag-handle {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  font-weight: 900;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--layout-grid-row);
  gap: var(--layout-grid-gap);
  min-height: 560px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(0, 217, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, 0.11) 1px, transparent 1px);
  background-size: calc(100% / 12) calc(var(--layout-grid-row) + var(--layout-grid-gap));
  padding: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.layout-grid-overlay {
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background-size: calc(100% / 12) calc(100% / 12);
}

.layout-grid.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 28px rgba(0, 217, 255, 0.18), 0 0 24px var(--shadow);
}

.layout-widget {
  position: relative;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(6, 54, 110, 0.92);
  padding: 10px 10px 44px;
  font-weight: 800;
  cursor: grab;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.layout-widget.is-moving {
  opacity: 0.42;
  outline: 2px solid var(--accent);
}

.widget-preview {
  position: absolute;
  inset: 58px 10px 48px;
  display: grid;
  gap: 6px;
  align-content: center;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(96, 165, 250, 0.06)),
    rgba(2, 8, 23, 0.28);
  box-shadow: inset 0 0 22px rgba(0, 217, 255, 0.08);
  padding: 8px;
}

.widget-preview > span,
.widget-preview > strong,
.widget-preview > em,
.widget-preview > b,
.widget-preview > i,
.widget-preview > button {
  min-width: 0;
  border-radius: 5px;
  background: rgba(0, 217, 255, 0.18);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.1);
}

.widget-preview > span,
.widget-preview > strong,
.widget-preview > em {
  height: 10px;
}

.widget-preview > strong {
  width: 74%;
  background: rgba(245, 249, 252, 0.28);
}

.widget-preview > em {
  width: 48%;
}

.widget-preview > b,
.widget-preview > button {
  height: 22px;
}

.widget-preview > i {
  height: 32px;
}

.widget-preview-input_hub {
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: clamp(5px, 1.1%, 9px);
}

.preview-comfort-strip,
.preview-vcr-strip,
.preview-rewind-strip,
.preview-reaction-strip {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.preview-comfort-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.preview-comfort-strip span,
.preview-rewind-strip strong {
  color: var(--text);
  font-size: clamp(8px, 0.76vw, 12px);
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.38);
  white-space: nowrap;
}

.widget-preview-input_hub .preview-slider {
  grid-column: 1 / -1;
  height: clamp(9px, 1.6vw, 18px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 2%, #00d9ff 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(191, 65, 119, 0.8), rgba(0, 217, 255, 0.86), rgba(46, 139, 87, 0.9));
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.32);
}

.preview-vcr-strip,
.preview-reaction-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview-reaction-strip {
  align-content: start;
  grid-auto-rows: minmax(58px, auto);
}

.preview-rewind-strip {
  grid-template-columns: 1.2fr 1fr 1fr 0.7fr;
  align-items: stretch;
}

.preview-vcr-strip button,
.preview-rewind-strip span,
.preview-rewind-strip em,
.preview-reaction-strip b {
  min-width: 0;
  min-height: clamp(20px, 3.4vw, 42px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(0, 108, 189, 0.24), rgba(2, 13, 31, 0.88)),
    rgba(2, 13, 31, 0.72);
  box-shadow: inset 0 0 14px rgba(0, 217, 255, 0.08), 0 0 12px rgba(0, 217, 255, 0.12);
  color: var(--text);
  font-size: clamp(8px, 0.78vw, 12px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  padding: 3px 5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-rewind-strip strong {
  display: grid;
  place-items: center start;
  color: var(--accent);
}

.preview-reaction-strip b {
  position: relative;
}

.preview-reaction-strip .preview-reaction-tile {
  grid-template-rows: auto auto;
  gap: 4px;
  align-content: center;
  justify-items: center;
  min-height: clamp(58px, 5.2vw, 82px);
  padding: 6px;
}

.preview-reaction-strip b::before {
  content: "";
  width: clamp(15px, 2.4vw, 28px);
  height: clamp(15px, 2.4vw, 28px);
  margin-bottom: 2px;
  border: 1px solid rgba(0, 217, 255, 0.6);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 217, 255, 0.78), transparent 42%),
    linear-gradient(145deg, rgba(8, 42, 91, 0.95), rgba(2, 13, 31, 0.98));
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.24);
}

.preview-reaction-strip .preview-reaction-tile::before {
  content: none;
}

.preview-reaction-icon {
  width: clamp(26px, 3vw, 44px);
  height: clamp(26px, 3vw, 44px);
  display: block;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.24), rgba(3, 16, 36, 0.86) 62%);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.16), 0 0 14px rgba(0, 217, 255, 0.2);
  object-fit: cover;
}

.preview-action-icon {
  width: clamp(26px, 3vw, 44px);
  height: clamp(26px, 3vw, 44px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 217, 255, 0.48);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 20%, rgba(0, 217, 255, 0.24), rgba(3, 16, 36, 0.86) 62%);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.16), 0 0 14px rgba(0, 217, 255, 0.2);
}

.preview-action-icon .action-icon {
  width: 82%;
  height: 82%;
}

.preview-reaction-strip .preview-reaction-tile span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(8px, 0.72vw, 11px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.34);
}

.widget-preview-timeline,
.widget-preview-queue,
.widget-preview-attention,
.widget-preview-resources,
.widget-preview-archive {
  align-content: start;
}

.widget-preview-attention strong {
  color: var(--accent);
  font-size: 10px;
}

.widget-preview-attention span {
  min-height: 9px;
  border-color: rgba(0, 217, 255, 0.42);
}

.widget-preview-commands,
.widget-preview-reactions,
.widget-preview-meters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.widget-preview-idle-frame {
  border-color: rgba(0, 217, 255, 0.55);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 217, 255, 0.12), transparent 42%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0, 217, 255, 0.08) 15px 16px);
}

.widget-preview-idle-frame i {
  justify-self: center;
  width: min(80%, 160px);
  height: 56%;
  border: 1px solid rgba(0, 217, 255, 0.5);
  border-radius: 50%;
  background: transparent;
}

.widget-preview-telemetry-ribbon {
  grid-template-columns: 1.2fr repeat(3, 0.7fr);
}

.widget-preview-reaction-field {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.widget-preview-reaction-field b {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  justify-self: center;
}

.widget-preview-lower-third,
.widget-preview-question-spotlight,
.widget-preview-resource-card,
.widget-preview-poll-card,
.widget-preview-quiz-card,
.widget-preview-hand-raise-alert,
.widget-preview-qr-lobby {
  align-content: center;
}

.widget-preview-stinger-safe-zone i {
  justify-self: center;
  width: 70%;
  height: 58%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.32), transparent 62%);
}

.editor-overlay-preview {
  align-content: stretch;
  overflow: hidden;
  padding: 6px;
}

.editor-overlay-preview .overlay-idle-layer,
.editor-overlay-preview .overlay-reaction-field,
.editor-overlay-preview .overlay-stinger-layer,
.editor-overlay-preview .overlay-telemetry-ribbon,
.editor-overlay-preview .overlay-lower-third,
.editor-overlay-preview .overlay-resource-card,
.editor-overlay-preview .overlay-question-spotlight,
.editor-overlay-preview .overlay-poll-card,
.editor-overlay-preview .overlay-quiz-card,
.editor-overlay-preview .overlay-qr-lobby,
.editor-overlay-preview .overlay-join-qr,
.editor-overlay-preview .overlay-hand-raise-alert {
  box-sizing: border-box;
  max-width: none;
  min-height: 0;
  position: relative;
  transform: none;
  width: 100%;
}

.editor-overlay-preview .overlay-idle-layer,
.editor-overlay-preview .overlay-reaction-field,
.editor-overlay-preview .overlay-stinger-layer {
  inset: auto;
}

.editor-overlay-preview .overlay-idle-layer {
  min-height: 100%;
}

.editor-overlay-preview .overlay-standby-lockup {
  left: 8px;
  padding: 6px;
  top: 8px;
  width: calc(100% - 16px);
}

.editor-overlay-preview .overlay-standby-lockup span,
.editor-overlay-preview .overlay-telemetry-ribbon span,
.editor-overlay-preview .overlay-lower-third span,
.editor-overlay-preview .overlay-resource-card span,
.editor-overlay-preview .overlay-question-spotlight span,
.editor-overlay-preview .overlay-poll-card span,
.editor-overlay-preview .overlay-quiz-card span,
.editor-overlay-preview .overlay-qr-copy span {
  font-size: 9px;
  letter-spacing: 0;
}

.editor-overlay-preview .overlay-standby-lockup strong,
.editor-overlay-preview .overlay-ribbon-title strong,
.editor-overlay-preview .overlay-lower-third strong,
.editor-overlay-preview .overlay-resource-card strong,
.editor-overlay-preview .overlay-question-spotlight strong,
.editor-overlay-preview .overlay-poll-card strong,
.editor-overlay-preview .overlay-quiz-card strong,
.editor-overlay-preview .overlay-qr-copy strong,
.editor-overlay-preview .overlay-join-qr strong,
.editor-overlay-preview .overlay-hand-raise-alert strong {
  font-size: 12px;
  line-height: 1.05;
}

.editor-overlay-preview .overlay-standby-lockup em,
.editor-overlay-preview .overlay-lower-third em,
.editor-overlay-preview .overlay-resource-card em,
.editor-overlay-preview .overlay-resource-card small,
.editor-overlay-preview .overlay-question-spotlight em,
.editor-overlay-preview .overlay-poll-card em,
.editor-overlay-preview .overlay-quiz-card em,
.editor-overlay-preview .overlay-qr-copy em,
.editor-overlay-preview .overlay-hand-raise-alert em {
  font-size: 9px;
  line-height: 1.15;
}

.editor-overlay-preview .overlay-telemetry-ribbon,
.editor-overlay-preview .overlay-lower-third,
.editor-overlay-preview .overlay-resource-card,
.editor-overlay-preview .overlay-question-spotlight,
.editor-overlay-preview .overlay-poll-card,
.editor-overlay-preview .overlay-quiz-card,
.editor-overlay-preview .overlay-hand-raise-alert {
  display: grid;
  gap: 5px;
  padding: 8px;
}

.editor-overlay-preview .overlay-ribbon-metrics {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-overlay-preview .overlay-ribbon-metrics span {
  min-width: 0;
  padding: 4px;
}

.editor-overlay-preview .overlay-poll-bars {
  height: 8px;
}

.editor-overlay-preview .overlay-qr-lobby {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 38px;
  padding: 8px;
}

.editor-overlay-preview .overlay-join-qr {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 36px minmax(0, 1fr);
  justify-items: start;
  padding: 8px;
}

.editor-qr-block {
  aspect-ratio: 1;
  background:
    linear-gradient(90deg, var(--text) 45%, transparent 45% 55%, var(--text) 55%),
    linear-gradient(var(--text) 45%, transparent 45% 55%, var(--text) 55%),
    rgba(245, 249, 252, 0.12);
  border-radius: 4px;
  display: block;
  width: 100%;
}

.editor-overlay-preview .overlay-hand-icon {
  block-size: 24px;
  inline-size: 24px;
}

.editor-overlay-preview .burst-layer {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 100%;
}

.editor-overlay-preview .burst-layer b {
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.68), transparent 68%);
  border-radius: 999px;
  width: 34px;
}

.editor-overlay-preview .overlay-stinger-layer {
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.28);
  border-radius: 8px;
  display: grid;
  justify-items: center;
  min-height: 100%;
}

.editor-overlay-preview .overlay-stinger-layer strong {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.layout-drag-preview {
  border: 2px dashed var(--accent);
  border-radius: 8px;
  background: rgba(0, 217, 255, 0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  z-index: 3;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.widget-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-tools {
  position: absolute;
  right: 30px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  max-width: calc(100% - 38px);
}

.widget-tool {
  min-height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #041225;
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
}

.danger-tool {
  border-color: var(--accent);
}

.widget-resize-handle {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(0, 217, 255, 0.72) 39% 47%, transparent 48% 61%, rgba(0, 217, 255, 0.72) 62% 70%, transparent 71%),
    #041225;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.22);
  cursor: nwse-resize;
  touch-action: none;
}

.widget-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.reaction-pack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
}

.reaction-card {
  min-height: 118px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #041225;
  padding: 8px;
  text-align: center;
}

.reaction-card-icon {
  width: 70px;
  height: 70px;
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.2);
}

.reaction-card strong {
  font-size: 11px;
  line-height: 1.2;
}

.host-reaction-details .reaction-pack {
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.host-reaction-details .reaction-card {
  min-height: 74px;
  gap: 4px;
  padding: 5px;
}

.host-reaction-details .reaction-card-icon {
  width: 42px;
  height: 42px;
}

.host-reaction-details .reaction-card strong {
  font-size: 9px;
}

.surface-grid > .panel,
.surface-grid > details.panel {
  align-self: stretch;
  margin-bottom: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.host-layout-tab-overlay > .host-overlay-control-panel {
  overflow: auto;
}

.panel-fit-shell {
  min-width: 0;
  transform-origin: top left;
}

.student-widget-controls,
.live-widget-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1px solid rgba(0, 217, 255, 0.34);
  border-radius: 999px;
  background: rgba(2, 13, 31, 0.82);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.13), inset 0 0 10px rgba(0, 217, 255, 0.08);
  opacity: 0.82;
  transition: opacity 120ms ease, transform 120ms ease;
}

.student-widget-controls {
  right: 8px;
  padding: 2px;
  opacity: 0.82;
}

.admin-widget-controls {
  top: 6px;
  right: 8px;
  opacity: 0;
  pointer-events: none;
}

.host-page .live-widget-controls,
.admin-page .live-widget-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
}

.student-widget-grip,
.student-widget-resize,
.live-widget-grip,
.live-widget-resize {
  border: 1px solid rgba(0, 217, 255, 0.54);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(8, 42, 91, 0.92), rgba(2, 13, 31, 0.98));
  box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.1), 0 0 12px rgba(0, 217, 255, 0.1);
  color: var(--accent);
  font-weight: 900;
}

.student-widget-grip,
.live-widget-grip {
  width: 26px;
  height: 26px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: grab;
  font-size: 0;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  touch-action: none;
}

.student-widget-grip {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 0;
}

.student-widget-grip::before,
.live-widget-grip::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(123, 239, 255, 0.98) 0 1.8px, transparent 2.4px) 1px 1px / 7px 7px,
    radial-gradient(circle, rgba(0, 217, 255, 0.9) 0 1.7px, transparent 2.3px) 4px 4px / 7px 7px;
  filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.84));
}

.student-widget-grip::before {
  content: "";
}

.student-widget-resize,
.live-widget-resize {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 8;
  width: 18px;
  height: 18px;
  opacity: 0.74;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(0, 217, 255, 0.74) 39% 47%, transparent 48% 61%, rgba(0, 217, 255, 0.74) 62% 70%, transparent 71%),
    linear-gradient(145deg, rgba(8, 42, 91, 0.94), rgba(2, 13, 31, 0.98));
  cursor: nwse-resize;
  touch-action: none;
}

.host-page .live-widget-resize,
.admin-page .live-widget-resize {
  opacity: 0;
  pointer-events: none;
}

.surface-grid > .panel:hover .student-widget-controls,
.surface-grid > details.panel:hover .student-widget-controls,
.host-page .surface-grid > .panel:hover .live-widget-controls,
.host-page .surface-grid > details.panel:hover .live-widget-controls,
.host-page .surface-grid > .panel:focus-within .live-widget-controls,
.host-page .surface-grid > details.panel:focus-within .live-widget-controls,
.host-page .surface-grid > .panel:hover .live-widget-resize,
.host-page .surface-grid > details.panel:hover .live-widget-resize,
.host-page .surface-grid > .panel:focus-within .live-widget-resize,
.host-page .surface-grid > details.panel:focus-within .live-widget-resize,
.student-widget-grip:focus-visible,
.student-widget-resize:focus-visible,
.live-widget-grip:focus-visible,
.live-widget-resize:focus-visible,
.student-widget-moving .student-widget-controls,
.student-widget-moving .live-widget-controls,
.student-widget-moving .live-widget-resize {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.student-widget-moving {
  z-index: 12;
  outline: 2px solid rgba(0, 217, 255, 0.88);
  outline-offset: 2px;
  box-shadow: 0 0 26px rgba(0, 217, 255, 0.22), inset 0 0 18px rgba(0, 217, 255, 0.1);
}

@media (hover: none), (pointer: coarse) {
  .student-page .student-widget-controls,
  .student-page .student-widget-resize {
    opacity: 0.92;
    pointer-events: auto;
    transform: none;
  }
}

.input-hub-panel > .panel-fit-shell,
.leaderboard-panel > .panel-fit-shell {
  display: grid;
  gap: inherit;
}

.panel-fit-scaled > .panel-fit-shell {
  width: calc(100% / var(--panel-fit-scale, 1));
  transform: scale(var(--panel-fit-scale, 1));
}

.panel-fit-tight {
  padding: 8px;
  font-size: 0.94em;
}

.panel-fit-tight .label {
  margin-bottom: 2px;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.input-hub-panel.panel-fit-tight .label,
.input-hub-panel.panel-fit-ultra .label {
  font-size: clamp(13px, 0.9cqw, 16px);
  font-weight: 950;
  letter-spacing: 0.1em;
}

.input-hub-panel.panel-fit-tight .input-hub-rewind .label,
.input-hub-panel.panel-fit-ultra .input-hub-rewind .label {
  margin: 0;
  font-size: clamp(15px, 1cqw, 18px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.55);
}

.panel-fit-tight h2,
.panel-fit-tight h3 {
  margin-bottom: 6px;
}

.panel-fit-tight h2 {
  font-size: 16px;
}

.panel-fit-tight h3 {
  font-size: 13px;
}

.panel-fit-tight .collapsible-summary {
  min-height: 34px;
  padding: 5px 7px;
  gap: 5px;
}

.panel-fit-tight .collapsible-summary strong {
  font-size: 13px;
}

.panel-fit-tight .surface-count {
  height: 20px;
  min-width: 30px;
  padding: 0 6px;
  font-size: 10px;
}

.panel-fit-tight .collapse-mark {
  width: 18px;
  height: 18px;
}

.panel-fit-tight .collapsible-body {
  gap: 5px;
  margin-top: 5px;
}

.panel-fit-tight .field {
  gap: 4px;
}

.panel-fit-tight .field input,
.panel-fit-tight .field textarea,
.panel-fit-tight .field select {
  min-height: 34px;
  padding: 7px 8px;
}

.panel-fit-tight #questionText {
  min-height: 38px;
  height: 38px;
}

.panel-fit-tight .question-helper,
.panel-fit-tight .subtle {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}

.panel-fit-tight .question-visibility-toggle {
  min-height: 30px;
  margin: 0;
  padding: 4px 6px;
  gap: 5px;
}

.panel-fit-tight .row {
  gap: 5px;
}

.panel-fit-tight .row > button,
.panel-fit-tight .question-actions .ghost-button {
  min-height: 32px;
  padding: 5px 7px;
}

.panel-fit-tight .question-list {
  margin-top: 4px !important;
}

.panel-fit-tight .list,
.panel-fit-tight .resource-list,
.panel-fit-tight .leaderboard-list {
  gap: 4px;
}

.panel-fit-tight .list-item,
.panel-fit-tight .question-row {
  padding: 5px 6px;
}

.panel-fit-tight .score-chip {
  min-width: 48px;
  min-height: 30px;
  font-size: 9px;
}

.panel-fit-tight .score-chip span {
  font-size: 16px;
}

.host-queue-panel.panel-fit-tight .queue-score-chip,
.host-queue-panel .queue-score-chip {
  width: auto;
  min-width: 58px;
  max-width: none;
  padding-inline: 7px;
}

.host-queue-panel.panel-fit-tight .compact-answer-button,
.host-queue-panel .compact-answer-button {
  min-width: 52px;
  max-width: none;
  padding-inline: 9px;
}

.panel-fit-tight .resource-filter-strip {
  gap: 4px;
  margin-bottom: 4px;
}

.panel-fit-tight .resource-filter-button {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 9px;
}

.panel-fit-tight .resource-link,
.panel-fit-tight .resource-link-button {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
}

.panel-fit-tight .resource-link-button {
  min-height: 38px;
}

.panel-fit-tight .resource-link-button.has-thumbnail {
  grid-template-columns: 28px 48px minmax(0, 1fr);
}

.panel-fit-tight .resource-icon {
  width: 26px;
  height: 26px;
}

.panel-fit-tight .resource-icon svg {
  width: 20px;
  height: 20px;
}

.panel-fit-tight .resource-thumbnail {
  width: 48px;
  height: 32px;
}

.panel-fit-tight .resource-meta b {
  font-size: 8px;
  padding: 1px 4px;
}

.panel-fit-tight .leaderboard-head,
.leaderboard-panel.compact-widget .leaderboard-head,
.leaderboard-panel.compact-widget .leaderboard-note {
  display: none;
}

.panel-fit-tight .leaderboard-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 28px;
  padding: 4px 6px;
}

.panel-fit-tight .instructor-card {
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  gap: 6px 8px;
}

.panel-fit-tight .instructor-headshot {
  width: 64px;
  height: 64px;
}

.panel-fit-tight .instructor-info > strong {
  font-size: 14px;
}

.panel-fit-tight .instructor-qr-tile {
  grid-column: 3;
  justify-self: end;
  width: 64px;
}

.panel-fit-tight .instructor-qr-tile img {
  width: 64px;
  height: 64px;
}

.panel-fit-tight .instructor-contact-actions {
  gap: 4px;
}

.panel-fit-tight .instructor-contact-link {
  min-height: 28px;
  padding: 4px;
  font-size: 10px;
}

.panel-fit-ultra .question-helper,
.panel-fit-ultra .subtle,
.panel-fit-ultra .resource-filter-strip,
.panel-fit-ultra .resource-description,
.panel-fit-ultra .leaderboard-note,
.panel-fit-ultra .quick-poll-compact-list .label,
.question-panel.compact-widget .question-helper,
.question-panel.compact-widget > .panel-fit-shell > .collapsible-body > .subtle {
  display: none;
}

.panel-fit-ultra .collapsible-summary .label {
  display: none;
}

.student-layout.surface-grid > .input-hub-panel,
.student-layout.surface-grid > details.collapsible-surface {
  align-self: stretch;
  display: grid;
  align-content: start;
}

.hidden {
  display: none !important;
}

@media (max-width: 920px) {
  .topbar {
    align-items: flex-start;
  }

  .status-chip {
    max-width: 100%;
    white-space: normal;
  }

  .student-header-status {
    min-width: 0;
  }

  .student-hand-alert {
    left: 12px;
    top: 146px;
    width: min(268px, calc(100vw - 24px));
  }

  .grid,
  .editor-shell {
    display: block;
  }

  .admin-ops-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel,
  .palette,
  .inspector {
    margin-bottom: 12px;
  }

  .student-layout .input-hub-panel,
  .student-layout .comfort-panel,
  .student-layout .question-panel,
  .student-layout .status-panel,
  .student-layout .reaction-panel,
  .student-layout .command-panel,
  .student-layout .resources-panel,
  .student-layout .instructor-panel,
  .student-layout .identity-panel,
  .student-layout .secondary-details,
  .host-layout .wide,
  .host-layout .side,
  .host-layout .half,
  .admin-layout .admin-status,
  .admin-layout .admin-launch,
  .admin-layout .admin-access,
  .admin-layout .admin-session,
  .admin-layout .admin-activity,
  .admin-layout .admin-timeline,
  .admin-layout .admin-archive,
  .admin-layout .admin-questions,
  .admin-layout .admin-files,
  .admin-layout .admin-shortcuts {
    grid-column: auto;
  }

  .reaction-grid,
  .meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .host-layout .half {
    margin-bottom: 12px;
  }

  .share-kit,
  .share-qr-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .page {
    width: min(100% - 12px, 1480px);
    padding-top: 8px;
  }

  .panel {
    padding: 12px;
  }

  .static-lobby-shell,
  .static-command-lobby {
    grid-template-columns: minmax(0, 1fr);
  }

  .static-command-lobby {
    min-height: 300px;
  }

  .static-lobby-orbit {
    width: 150px;
    justify-self: start;
  }

  .brand {
    width: 100%;
  }

  .student-page {
    width: min(100% - 8px, 720px);
    padding-top: 4px;
    padding-bottom: 78px;
  }

  .student-anchor-panel {
    scroll-margin-top: 8px;
  }

  .student-jump-menu {
    position: relative;
    inset: auto;
    gap: 5px;
    width: 100%;
    transform: none;
  }

  .student-jump-menu.is-open {
    position: fixed;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    top: calc(8px + env(safe-area-inset-top, 0px));
    z-index: 190;
    width: auto;
    max-height: calc(100vh - 82px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(0, 217, 255, 0.82);
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(7, 31, 68, 0.97), rgba(2, 8, 23, 0.98)),
      radial-gradient(circle at 20% 0%, rgba(0, 217, 255, 0.22), transparent 38%);
    box-shadow: 0 0 32px rgba(0, 217, 255, 0.34), inset 0 0 24px rgba(0, 217, 255, 0.1);
    padding: 6px;
  }

  .student-jump-menu.is-collapsed {
    width: 100%;
  }

  .student-menu-toggle {
    min-height: 36px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 7px;
  }

  .student-jump-menu-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .student-jump-menu-links > a {
    width: 100%;
    min-height: 36px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 2px;
    padding: 4px 3px;
    font-size: 9px;
    text-align: center;
  }

  .student-jump-menu-links > a > span {
    width: 22px;
    height: 22px;
  }

  .student-rain-controls {
    gap: 4px;
  }

  .student-rain-toggle {
    min-height: 34px;
    font-size: 9px;
  }

  .student-hand-alert {
    left: 10px;
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: min(292px, calc(100vw - 20px));
  }

  .student-entry-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-code-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-entry-profile-panel,
  .entry-profile-fields,
  .student-access-preferences,
  .student-access-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-profile-fields,
  .student-access-fields {
    grid-column: auto;
  }

  .entry-profile-grid,
  .student-access-preset-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tech-rain-layer {
    opacity: 0.82;
  }

  .tech-rain-token {
    max-width: 168px;
  }

  .tech-rain-token small {
    font-size: calc(var(--size) * 0.62);
  }

  .student-page .notice-banner {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .student-page .topbar {
    gap: 6px;
    margin-bottom: 6px;
    padding: 2px 0;
  }

  .student-page .brand {
    width: 100%;
    gap: 8px;
    padding-right: 0;
  }

  .student-page .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .student-page .brand h1 {
    font-size: 19px;
  }

  .student-page .brand p {
    margin-top: 1px;
    font-size: 11px;
  }

  .student-page .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(108px, 132px) minmax(0, 1fr) minmax(96px, 118px);
    align-items: stretch;
    gap: 5px;
  }

  .student-menu-dock {
    grid-column: 1;
    grid-row: 1;
  }

  .student-header-status {
    width: auto;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(76px, 96px);
    grid-template-areas:
      "identity points"
      "topics topics";
    align-items: start;
    align-content: start;
    grid-auto-rows: min-content;
    gap: 5px;
    min-height: 0;
    padding: 0;
  }

  .student-status-identity {
    grid-area: identity;
    flex: unset;
    max-width: none;
    grid-template-rows: auto minmax(20px, 1fr);
    min-height: 44px;
  }

  .student-points-menu {
    grid-area: points;
    flex: unset;
    min-width: 0;
    min-height: 44px;
  }

  .student-status-identity,
  .student-points-menu,
  .student-topic-strip,
  .student-page .topbar-actions > .status-chip {
    align-self: start;
    max-height: 56px;
    overflow: hidden;
  }

  .student-status-identity,
  .student-topic-strip {
    padding: 5px 7px;
  }

  .student-topic-pill strong {
    display: -webkit-box;
    font-size: 12px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  .student-display-name {
    font-size: 16px;
    line-height: 1.05;
    white-space: nowrap;
  }

  .student-handle-row {
    grid-template-columns: minmax(74px, 0.55fr) minmax(0, 1fr) auto;
  }

  .student-topic-strip {
    grid-area: topics;
    flex: unset;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 44px;
  }

  .student-page .topbar-actions > .status-chip {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 0;
  }

  .student-page .status-chip {
    width: auto;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 12px minmax(0, 1fr);
    padding: 7px 9px;
  }

  .student-page .status-chip-beacon {
    width: 12px;
    height: 12px;
  }

  .student-page .status-chip-kicker {
    font-size: 8px;
  }

  .student-page .status-chip-main {
    font-size: 14px;
  }

  .student-page .panel {
    padding: 9px;
    margin-bottom: 0;
  }

  .student-page .panel h2,
  .student-page .panel h3 {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .student-page .label {
    margin-bottom: 5px;
    font-size: 9px;
  letter-spacing: 0.08em;
}

.admin-widget-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-widget-step {
  width: 20px;
  height: 20px;
  min-height: 22px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  border-radius: 6px;
  background: rgba(2, 13, 31, 0.9);
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  padding: 0;
}

.admin-widget-step:hover,
.admin-widget-step:focus-visible {
  border-color: rgba(0, 217, 255, 0.92);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.22);
}

  .student-page .subtle {
    font-size: 11px;
    line-height: 1.25;
  }

  .student-page .input-hub-panel {
    gap: 7px;
  }

  .student-page .input-hub-head {
    align-items: center;
  }

  .student-page .comfort-pill {
    max-width: 145px;
    padding: 6px 7px;
    font-size: 12px;
  }

  .student-page .input-hub-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .student-page .input-hub-comfort {
    gap: 6px;
  }

  .student-page .slider-wrap {
    padding: 8px;
  }

  .student-page .comfort-labels {
    gap: 3px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    font-size: clamp(13px, 3vw, 15px);
  }

  .student-page .comfort-level {
    gap: 2px;
  }

  .student-page .comfort-level b {
    font-size: clamp(13px, 3vw, 15px);
    font-weight: 950;
  }

  .student-page .comfort-icon {
    width: 44px;
    height: 44px;
    border-radius: 7px;
  }

  .student-page .comfort-photo-icon {
    width: 34px;
    height: 50px;
    border-radius: 10px;
  }

  .student-page .comfort-icon svg {
    width: 28px;
    height: 28px;
  }

  .student-page .comfort-range {
    height: 20px;
  }

  .student-page .comfort-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -7px;
  }

  .student-page .comfort-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }

  .student-page .comfort-readout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    margin-top: 5px;
  }

  .student-page .big-value {
    font-size: 20px;
  }

  .student-page .input-hub-slider .big-value {
    font-size: 16px;
  }

  .student-page .button-grid,
  .student-page .compact-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .student-page .input-hub-button-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .student-page .input-hub-signal-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--input-hub-button-min, 96px)), 1fr));
  }

  .student-page .input-hub-control-deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "vcr"
      "rewind";
    gap: 5px;
    align-items: stretch;
  }

  .student-page .input-hub-vcr-group {
    --input-hub-button-min: 132px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .student-page .input-hub-rewind {
    grid-template-columns: repeat(2, minmax(80px, 1fr)) minmax(120px, 1.2fr) minmax(70px, auto);
    gap: 5px;
  }

  .student-page .input-hub-panel.widget-h-3 .input-hub-rewind,
  .student-page .input-hub-panel.widget-h-4 .input-hub-rewind,
  .student-page .input-hub-panel.widget-h-5 .input-hub-rewind {
    grid-template-columns: repeat(2, minmax(80px, 1fr)) minmax(120px, 1.2fr) minmax(70px, auto);
  }

  .student-page .input-hub-rewind .label {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
    text-shadow: 0 0 14px rgba(0, 217, 255, 0.55);
  }

  .student-page .input-hub-rewind input {
    min-width: 0;
  }

  .student-page .input-hub-rewind .rewind-preset-button,
  .student-page .input-hub-rewind .rewind-send-button {
    min-width: 0;
    width: 100%;
  }

  .student-page .input-hub-slider {
    order: 1;
  }

  .student-page .input-hub-control-deck {
    order: 2;
  }

  .student-page .input-hub-action-stack {
    order: 3;
  }

  .student-page .input-hub-reaction-strip {
    order: 4;
    --input-hub-button-min: 118px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-page .student-safety-rail {
    gap: 5px;
  }

  .student-page .student-safety-rail span {
    min-height: 26px;
    flex: 1 1 112px;
    justify-content: center;
    font-size: 12px;
    text-align: center;
  }

  .student-page .action-button,
  .student-page .ghost-button,
  .student-page .danger-button {
    min-height: 48px;
    padding: 6px 5px;
    font-size: 12px;
    line-height: 1.08;
  }

  .student-page .input-hub-button-grid .action-button {
    min-height: 76px;
    padding: 8px 6px;
    font-size: 12px;
  }

  .student-page .branded-action,
  .student-page .branded-reaction {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    text-align: center;
  }

  .student-page .branded-action .button-label,
  .student-page .branded-reaction .button-label {
    min-height: 30px;
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.04;
    padding: 4px 6px;
  }

  .student-page .action-icon {
    width: 40px;
    height: 40px;
  }

  .student-page .action-icon svg {
    width: 32px;
    height: 32px;
  }

  .student-page .reaction-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .student-page .reaction-button {
    min-height: 54px;
    padding: 4px;
    font-size: 0;
  }

  .student-page .reaction-icon {
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .student-page .input-hub-button-grid .compact-reaction-button {
    min-height: 116px;
    font-size: 12px;
  }

  .student-page.student-scene-default .input-hub-button-grid .compact-reaction-button {
    min-height: 80px;
    padding: 6px 4px;
  }

  .student-page .input-hub-reaction-strip .cooked-request-button .button-label {
    font-size: clamp(12px, 2.5vw, 15px);
  }

  .student-page .input-hub-button-grid .compact-reaction-button .reaction-icon {
    width: 72px;
    height: 72px;
  }

  .student-page.student-scene-default .input-hub-button-grid .compact-reaction-button .reaction-icon {
    width: 48px;
    height: 48px;
  }

  .student-page.student-scene-default .branded-action .button-label,
  .student-page.student-scene-default .branded-reaction .button-label {
    min-height: 22px;
    padding: 3px 5px;
    font-size: clamp(12px, 2.9vw, 15px);
  }

  .student-page.student-scene-default .input-hub-vcr-group .action-button {
    min-height: 72px;
  }

  .student-page.student-scene-default .input-hub-vcr-group .action-icon {
    width: 38px;
    height: 38px;
  }

  .student-page .command-panel .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-page .field {
    gap: 5px;
    margin-bottom: 7px;
  }

  .student-page .field input,
  .student-page .field textarea,
  .student-page .field select {
    min-height: 46px;
    padding: 9px;
    font-size: 14px;
  }

  .student-page #questionText {
    min-height: 54px;
  }

  .student-page .question-helper {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .student-page .question-visibility-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 34px;
    margin-bottom: 7px;
    padding: 6px 8px;
  }

  .student-page .question-visibility-toggle strong {
    grid-column: 2;
    max-width: 100%;
  }

  .student-page .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .student-page .row > button,
  .student-page .row > select {
    width: 100%;
  }

  .student-page .question-list {
    max-height: 146px;
    overflow: auto;
  }

  .student-page .points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-page .spend-tile {
    min-height: 74px;
    gap: 5px;
  }

  .student-page .spend-tile-preview {
    width: 58px;
    height: 28px;
  }

  .comfort-readout {
    display: grid;
    justify-items: start;
  }

  .route-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .share-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-session-grid,
  .admin-session-note-row,
  .admin-room-row,
  .admin-student-message-grid,
  .instructor-config-grid,
  .host-status-grid,
  .host-resource-grid,
  .host-embed-grid,
  .host-status-note-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .instructor-card {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
  }

  .instructor-headshot {
    width: 64px;
    height: 64px;
  }

  .instructor-qr-tile {
    grid-column: 3;
    width: 64px;
    justify-self: end;
  }

  .instructor-qr-tile img {
    width: 64px;
    height: 64px;
  }

  .embed-content-field {
    grid-column: auto;
  }

  .command-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-action-grid,
  .admin-access-status,
  .admin-access-actions,
  .admin-generate-actions,
  .access-shortcut-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .question-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .question-meta {
    justify-content: flex-start;
  }

  .question-author {
    max-width: 100%;
  }

  .signal-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-timeline-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-statline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-qr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-row .copy-button,
  .admin-actions > button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .button-grid {
    grid-template-columns: 1fr;
  }

  .student-page .button-grid,
  .student-page .compact-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .student-page .reaction-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .student-page .command-panel .list,
  .student-page .points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reaction-grid,
  .meter-grid {
    grid-template-columns: 1fr;
  }

  .signal-statline,
  .signal-gauges {
    grid-template-columns: 1fr;
  }

  .admin-ops-strip {
    grid-template-columns: 1fr;
  }

  .comfort-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
  }

  .student-page .comfort-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
  }

  .student-page .comfort-level-1,
  .student-page .comfort-level-3,
  .student-page .comfort-level-4 {
    display: none;
  }

  .action-button,
  .ghost-button,
  .danger-button {
    min-height: 48px;
  }
}

@media (max-width: 520px) {
  .student-page .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .student-page .brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
  }

  .student-page .topbar-actions {
    display: contents;
  }

  .student-menu-dock {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: end;
    align-self: start;
  }

  .student-jump-menu.is-collapsed {
    width: auto;
  }

  .student-menu-toggle {
    min-width: 104px;
  }

  .student-page .topbar-actions > .student-header-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .student-header-status {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 92px);
    align-items: start;
    grid-auto-rows: min-content;
  }

  .student-page .topbar-actions > .status-chip {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 36px;
  }

  .student-page .status-chip {
    grid-template-columns: 10px minmax(0, 1fr);
    padding: 5px 8px;
    text-align: left;
  }

  .student-page .status-chip-copy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
  }

  .student-page .status-chip-kicker {
    font-size: 7px;
  }

  .student-page .status-chip-main {
    font-size: 13px;
  }

  .student-page .input-hub-rewind,
  .student-page .input-hub-panel.widget-h-3 .input-hub-rewind,
  .student-page .input-hub-panel.widget-h-4 .input-hub-rewind,
  .student-page .input-hub-panel.widget-h-5 .input-hub-rewind {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-page .input-hub-rewind .rewind-preset-button[data-phrase="last slide"] {
    grid-column: 1;
    grid-row: 2;
  }

  .student-page .input-hub-rewind .rewind-preset-button[data-phrase="last question"] {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  .student-page .input-hub-rewind input {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .student-page .input-hub-rewind .rewind-send-button {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .student-page.student-scene-default .input-hub-rewind input {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 46px;
  }

  .student-page.student-scene-default .input-hub-rewind .rewind-send-button {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 48px;
  }

  .student-page.student-scene-default .input-hub-rewind .rewind-preset-button {
    min-height: 44px;
  }
}

@container (min-width: 700px) {
  .input-hub-control-deck {
    grid-template-columns: minmax(420px, 1fr) minmax(270px, 360px);
    grid-template-areas: "rewind vcr";
    align-items: stretch;
  }

  .input-hub-vcr-group {
    max-width: 360px;
    align-self: stretch;
  }

  .input-hub-vcr-group .action-button {
    min-height: 64px;
  }

  .input-hub-rewind,
  .input-hub-panel.widget-h-3 .input-hub-rewind,
  .input-hub-panel.widget-h-4 .input-hub-rewind,
  .input-hub-panel.widget-h-5 .input-hub-rewind {
    grid-template-columns: minmax(70px, 0.6fr) minmax(88px, 0.72fr) minmax(160px, 1.4fr) minmax(76px, 0.62fr);
  }

  .input-hub-rewind input,
  .input-hub-panel.widget-h-3 .input-hub-rewind input,
  .input-hub-panel.widget-h-4 .input-hub-rewind input,
  .input-hub-panel.widget-h-5 .input-hub-rewind input {
    grid-column: 1 / span 3;
  }

  .input-hub-rewind .rewind-send-button {
    grid-column: 4;
  }
}

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

  .overlay-orbit,
  .overlay-scanline,
  .overlay-greek-circuit,
  .overlay-hand-raise-alert,
  .overlay-reaction-field,
  .overlay-stinger-layer,
  .burst,
  .spend-fx {
    animation: none !important;
    opacity: var(--fx-opacity, 1) !important;
  }

  .burst,
  .spend-fx,
  .spend-fx-core,
  .overlay-hand-raise-alert {
    opacity: var(--fx-opacity, 1) !important;
    transform: none !important;
  }
}