:root {
  --glass-canvas:#e9eefc;
  --glass-blue:#a8bcff;
  --glass-violet:#d5beff;
  --glass-mint:#b3e7f5;
  --glass-fill:#f9fbffb8;
  --glass-fallback:#f4f7ff;
  --glass-edge:#ffffffd9;
  --glass-line:#43588326;
  --glass-shine:#ffffffed;
  --glass-sheen:#ffffffa8;
  --glass-shadow:#34467824;
  --glass-active:#cfdbff;
  --glass-ink:#152446;
  --glass-muted:#394d70;
  --glass-focus:#2455b4;
  --lens-core:#f7fbff;
  --lens-rim:#6e98e7;
}
:root[data-theme=dark] {
  --glass-canvas:#080c1c;
  --glass-blue:#1b3173;
  --glass-violet:#312655;
  --glass-mint:#123750;
  --glass-fill:#111b36c9;
  --glass-fallback:#18233e;
  --glass-edge:#acbfff45;
  --glass-line:#a9c0f43d;
  --glass-shine:#e2ebff65;
  --glass-sheen:#a8c4fc24;
  --glass-shadow:#03061175;
  --glass-active:#314e86;
  --glass-ink:#f1f5ff;
  --glass-muted:#becceb;
  --glass-focus:#adcfff;
  --lens-core:#aad3ff;
  --lens-rim:#648dea;
}
:root[data-ui-style=midnight] { --glass-violet:#b5c9f5; --glass-blue:#9bb2e5; }
:root[data-ui-style=cobalt] { --glass-violet:#bfbcff; --glass-blue:#94abff; --lens-rim:#597bf4; }
:root[data-ui-style=editorial] { --glass-violet:#ebc9a7; --glass-blue:#c7c7ee; --glass-mint:#f0e2be; --lens-rim:#bc987a; }
:root[data-ui-style=mint] { --glass-violet:#c9bef4; --glass-blue:#a2c4ee; --glass-mint:#a9ebd2; --lens-rim:#55aaac; }
:root[data-ui-style=midnight][data-theme=dark] { --glass-violet:#1e2b4a; --glass-blue:#1b325d; }
:root[data-ui-style=cobalt][data-theme=dark] { --glass-violet:#272660; --glass-blue:#1b3590; }
:root[data-ui-style=editorial][data-theme=dark] { --glass-violet:#463248; --glass-blue:#2a3656; --glass-mint:#423531; }
:root[data-ui-style=mint][data-theme=dark] { --glass-violet:#352956; --glass-blue:#18375b; --glass-mint:#123e3f; }

body {
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 70% 0%,var(--glass-blue),transparent 55%),
    radial-gradient(ellipse at 100% 50%,var(--glass-mint),transparent 62%),
    radial-gradient(ellipse at 0% 62%,var(--glass-violet),transparent 60%),
    var(--glass-canvas);
}
.shell {
  padding:12px;
  gap:10px;
  grid-template-columns:222px minmax(0,1fr);
}
.side, .top, .overview-panel, .overview-today button, .chat-room, .wrap > .card, .demo-grid .card, .style-option, dialog {
  background-color:var(--glass-fallback);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px var(--glass-shine),0 8px 24px var(--glass-shadow);
}
@supports (backdrop-filter:blur(1px)) {
  .side, .top, .overview-panel, .overview-today button, .chat-room, .wrap > .card, .demo-grid .card, .style-option, dialog {
    background-color:var(--glass-fill);
  }
  .side, .top, .overview-panel, .chat-room, dialog {
    backdrop-filter:blur(17px) saturate(142%);
  }
}
.side {
  top:12px;
  height:calc(100dvh - 24px);
  border-radius:25px;
  color:var(--glass-ink);
}
.brand, .side-footer { border-color:var(--glass-line); }
.brand small, .nav-label, .side-footer, .nav button, .crumb { color:var(--glass-muted); }
.nav button {
  border:1px solid transparent;
  border-radius:12px;
}
.nav button:hover { background:var(--glass-sheen); color:var(--glass-ink); }
.nav button[aria-current=page] {
  background:linear-gradient(145deg,var(--glass-sheen),transparent 75%),var(--glass-active);
  border-color:var(--glass-edge);
  box-shadow:inset 0 1px var(--glass-shine),0 2px 6px var(--glass-shadow);
  color:var(--glass-ink);
}
.top {
  min-height:56px;
  padding:8px clamp(14px,2.8vw,38px);
  border-radius:22px;
}
.top .btn, .overview-panel .btn {
  border-color:var(--glass-line);
  border-radius:999px;
}
.top .btn { min-height:38px; background:var(--glass-sheen); }
.top .btn:hover { background:var(--glass-active); }
.wrap { padding:20px clamp(12px,2.8vw,38px) 40px; }
.preview-note { color:var(--glass-muted); }
.wrap :focus-visible, .top :focus-visible, .side :focus-visible, .bottom-nav :focus-visible {
  outline-color:var(--glass-focus);
}

.overview { gap:18px; }
.role-resources { margin-block:14px; }
.hero {
  min-height:276px;
  padding:clamp(24px,4.5vw,56px);
  grid-template-columns:minmax(0,1fr);
  border:1px solid var(--glass-edge);
  border-radius:32px;
  background:
    radial-gradient(ellipse at 90% 5%,var(--glass-violet),transparent 61%),
    radial-gradient(ellipse at 91% 87%,var(--glass-blue),transparent 58%),
    linear-gradient(125deg,var(--glass-fallback),var(--glass-fill));
  color:var(--glass-ink);
  box-shadow:inset 0 1px 1px var(--glass-shine),inset 0 -12px 30px var(--glass-shadow),0 17px 38px -18px var(--glass-shadow);
}
.hero::after {
  display:block;
  width:auto;
  height:auto;
  inset:6px;
  border:1px solid var(--glass-edge);
  border-radius:26px;
  box-shadow:none;
  opacity:.65;
}
.hero-copy { z-index:1; width:66%; }
.hero .hero-label { color:var(--glass-muted); }
.hero h1 { font-size:clamp(51px,6.2vw,91px); margin:5px 0 10px; }
.hero p:not(.hero-label) { color:var(--glass-muted); }
.hero .btn {
  min-height:43px;
  padding-inline:16px;
  border:1px solid var(--glass-edge);
  border-radius:999px;
  background:var(--glass-fill);
  color:var(--glass-ink);
  box-shadow:inset 0 1px var(--glass-shine),0 3px 10px var(--glass-shadow);
}
.hero .btn:hover { background:var(--glass-fallback); }
.hero .btn.primary {
  background:linear-gradient(140deg,#3864d0,#244488);
  border-color:#6e8bd2;
  color:#fff;
  box-shadow:inset 0 1px #b2c6ff98,0 5px 15px #213f854f;
}
.hero .btn.primary:hover { background:#244488; }
.hero-optics {
  position:absolute;
  z-index:0;
  width:clamp(170px,31vw,410px);
  aspect-ratio:1;
  right:clamp(6px,3vw,42px);
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  display:grid;
  place-items:center;
}
.glass-orbit {
  position:absolute;
  width:100%;
  height:46%;
  border-radius:50%;
  border:1px solid var(--glass-shine);
  transform:rotate(-29deg);
  background:linear-gradient(115deg,var(--glass-sheen),transparent 34% 67%,var(--glass-sheen));
  box-shadow:inset 0 2px 6px var(--glass-shine),inset 0 -6px 19px var(--lens-rim),0 10px 28px var(--glass-shadow);
}
.glass-orbit-cross {
  width:83%;
  height:54%;
  transform:rotate(32deg);
  opacity:.68;
}
.hero-optics .hero-seal {
  position:relative;
  display:grid;
  top:auto;
  right:auto;
  width:48%;
  margin:0;
  border:1px solid var(--glass-shine);
  background:
    radial-gradient(ellipse at 34% 13%,var(--glass-shine),transparent 35%),
    linear-gradient(148deg,var(--glass-sheen),transparent 55%,var(--lens-core));
  box-shadow:inset 0 0 0 6px var(--glass-sheen),inset 0 -9px 20px var(--lens-rim),0 11px 29px var(--glass-shadow);
  animation:seal-float 4s ease-in-out;
}
.hero-seal img { width:69%; box-shadow:0 3px 10px #091e4f44; }
@keyframes seal-float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}

.overview-today { gap:12px; }
.overview-today button,
[data-ui-style=cobalt] .overview-today button:nth-child(odd),
[data-ui-style=mint] .overview-today button {
  background-image:linear-gradient(139deg,var(--glass-sheen),transparent 62%);
  background-color:var(--glass-fill);
  border-color:var(--glass-edge);
  border-radius:21px;
  color:var(--glass-ink);
  transition:transform .18s ease,background-color .18s ease;
}
.overview-today button:hover { background-color:var(--glass-fallback); transform:translateY(-2px); }
.quick-icon {
  border-radius:13px;
  background:linear-gradient(145deg,var(--glass-sheen),transparent),var(--glass-active);
  box-shadow:inset 0 1px var(--glass-shine),0 2px 6px var(--glass-shadow);
  color:var(--glass-ink);
}
.quick-label small { color:var(--glass-muted); }
.overview-panel { border-radius:24px; }
.overview-panel .card { background:transparent; border-top-color:var(--glass-line); }
.chat-room { border-radius:24px; }
.chat-message-content {
  background:linear-gradient(145deg,var(--glass-sheen),transparent),var(--glass-fill);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px var(--glass-shine);
}
.shared-link { border-radius:12px; }

@media (min-width:701px) and (max-width:960px) {
  .shell { grid-template-columns:170px minmax(0,1fr); }
  .hero { padding-inline:27px; }
  .hero-optics { right:-10px; width:35vw; }
}
@media (max-width:700px) {
  .shell { padding:8px 8px calc(76px + env(safe-area-inset-bottom)); }
  .top { min-height:54px; border-radius:19px; }
  .top .btn { min-height:44px; }
  .top .theme-toggle { flex:none; width:44px; min-height:44px; }
  .top-location .crumb { min-width:0; }
  .top-location .mobile-hub-name, .top-location .page-crumb {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .wrap { padding:14px 5px 23px; }
  .overview { gap:13px; }
  .hero { min-height:0; border-radius:25px; padding:20px 17px; }
  .hero::after { inset:4px; border-radius:21px; }
  .hero-copy { width:100%; }
  .hero .hero-label { padding-right:95px; }
  .hero h1 { font-size:clamp(40px,10vw,60px); margin:5px 0; }
  .hero-copy > p:not(.hero-label) { max-width:72%; }
  .hero .actions { margin-top:14px; }
  .hero .btn { min-height:40px; padding-inline:11px; }
  .hero-optics { right:-15px; top:58px; width:133px; }
  .hero-optics .hero-seal { width:52%; }
  .overview-today { gap:8px; }
  .overview-today button { border-radius:16px; }
  .quick-icon { border-radius:9px; }
  .overview-panel { border-radius:20px; }
  .bottom-nav {
    inset:auto 9px max(7px,env(safe-area-inset-bottom));
    border:1px solid var(--glass-edge);
    border-radius:24px;
    background:var(--glass-fallback);
    box-shadow:inset 0 1px var(--glass-shine),inset 0 -1px var(--glass-line),0 9px 27px var(--glass-shadow);
  }
  @supports (backdrop-filter:blur(1px)) {
    .bottom-nav { background:var(--glass-fill); backdrop-filter:blur(19px) saturate(165%); }
  }
  .bottom-nav button { color:var(--glass-muted); border-radius:19px; }
  .bottom-nav button[aria-current=page], .bottom-nav .more-current {
    background:linear-gradient(150deg,var(--glass-sheen),transparent),var(--glass-active);
    box-shadow:inset 0 1px var(--glass-shine),0 2px 7px var(--glass-shadow);
    color:var(--glass-ink);
  }
  #more-panel { border-radius:26px 26px 0 0; }
}
@media (max-width:350px) {
  .top { gap:6px; padding-inline:8px; }
  .top-location, .top-actions { gap:5px; }
  .mobile-crest { width:30px; height:30px; }
  .mobile-hub-name { font-size:12px; }
  .page-crumb > span { margin-inline:2px; }
  .top .btn { padding-inline:6px; }
  .hero .btn { padding-inline:8px; }
  .hero-optics { width:102px; right:-14px; }
  .hero .hero-label { padding-right:70px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-optics .hero-seal { animation:none; }
  .overview-today button { transition:none; }
  .overview-today button:hover { transform:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .side, .top, .overview-panel, .overview-today button, .chat-room, .wrap > .card, .demo-grid .card, .style-option, .bottom-nav, dialog {
    background-color:var(--glass-fallback);
    backdrop-filter:none;
  }
}

.notification-bell { position:relative; min-width:42px; padding-inline:8px; }
.notification-bell span:not(:empty) {
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:17px;
  min-height:17px;
  padding:1px 4px;
  border-radius:999px;
  background:var(--blue);
  color:white;
  font-size:10px;
  line-height:15px;
}
.notification-settings { max-width:620px; }
.notification-settings .notification-state { margin-top:7px; color:var(--glass-ink); font-weight:700; }
.notification-settings .actions { margin-top:12px; }

.chat-directory {
  max-width:860px;
  overflow:hidden;
  border:1px solid var(--glass-edge);
  border-radius:20px;
  background:var(--glass-fill);
  box-shadow:inset 0 1px var(--glass-shine),0 8px 24px var(--glass-shadow);
}
.chat-row {
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:73px;
  padding:12px 16px;
  text-align:left;
}
.chat-row + .chat-row { border-top:1px solid var(--glass-line); }
.chat-row:hover { background:var(--glass-sheen); }
.chat-row:focus-visible { outline-offset:-4px; }
.chat-row-title { display:grid; min-width:0; gap:4px; flex:1; }
.chat-row-title strong,.chat-row-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row-title small,.chat-chevron { color:var(--glass-muted); }
.chat-chevron { font-size:24px; }
.group-icon {
  --group-color:#5271c9;
  flex:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(135deg,#ffffff50,transparent 70%),var(--group-color);
  color:#fff;
  box-shadow:inset 0 1px #fff7,0 2px 6px var(--glass-shadow);
}
.group-icon--book { --group-color:#5c53ad; }
.group-icon--health { --group-color:#087564; }
.group-icon--lab { --group-color:#375ea6; }
.group-icon--notes { --group-color:#915821; }
.group-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.group-icon-picker,.group-members { min-width:0; margin:0; padding:10px; border:1px solid var(--border); border-radius:10px; }
.group-icon-picker legend,.group-members legend { font-size:13px; font-weight:700; }
.group-icon-choices { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.group-icon-choices label { position:relative; justify-items:center; padding:5px; border:1px solid transparent; border-radius:10px; cursor:pointer; }
.group-icon-choices label:has(:checked) { border-color:var(--accent); background:var(--tint); }
.group-icon-choices label:has(:focus-visible) { outline:2px solid var(--focus); }
.group-icon-choices input { position:absolute; opacity:0; width:1px; }
.group-icon-choices .group-icon { width:33px; height:33px; }
.group-members { max-height:180px; overflow:auto; }
.group-members label { padding:4px 0; flex-wrap:wrap; overflow-wrap:anywhere; }
.group-members small { color:var(--muted); }
.student-search { max-width:430px; margin-bottom:12px; }
dialog { max-height:calc(100dvh - 24px); overflow:auto; }

.chat-screen {
  min-width:0;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chat-screen-header {
  z-index:1;
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px clamp(12px,4vw,48px);
  padding-top:max(10px,env(safe-area-inset-top));
  border-bottom:1px solid var(--glass-edge);
  background:var(--glass-fill);
  box-shadow:0 5px 18px var(--glass-shadow);
}
.chat-screen-header .btn { flex:none; border-radius:999px; }
.chat-screen-header .btn:first-child { font-size:16px; }
.chat-screen-name { flex:1; min-width:0; }
.chat-screen-name h1 { font-size:clamp(18px,3.5vw,25px); margin:0 0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-screen-name p { font-size:12px; color:var(--glass-muted); }
.chat-screen .chat-room {
  max-width:none;
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.chat-screen .demo-chat {
  max-height:none;
  min-height:0;
  flex:1;
  padding:18px max(15px,calc((100% - 850px)/2));
}
.chat-screen .chat-composer {
  flex:none;
  max-height:48dvh;
  overflow:auto;
  padding:10px max(15px,calc((100% - 850px)/2)) max(10px,env(safe-area-inset-bottom));
  background:var(--glass-fill);
}
.chat-screen .chat-composer textarea { min-height:48px; }
.chat-screen-details { overflow:auto; padding:14px clamp(14px,4vw,45px) 24px; }
.chat-readonly { font-size:12px; color:var(--glass-muted); margin:8px 15px 0; }
@media (max-width:460px) {
  .chat-screen-header { gap:7px; }
  .chat-screen-header .group-icon { width:34px; height:34px; }
  .chat-screen-header .btn { padding-inline:8px; font-size:11px; }
  .chat-screen-header .btn:first-child { font-size:15px; }
  .chat-screen-header .btn:first-child span { font-size:11px; }
  .chat-screen .chat-composer textarea { font-size:16px; }
}

#study-create [hidden] { display:none; }
.assessment-setup,.assessment-questions,.assessment-question-fields,.assessment-options-fields {
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.assessment-setup legend,.assessment-question-fields legend,.assessment-options-fields legend {
  margin-bottom:8px;
  font-weight:700;
}
.assessment-question-fields {
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
}
.assessment-question-fields textarea { min-height:68px; }
.assessment-question-fields details > .stack { margin-top:10px; }
.assessment-builder-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.assessment-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.assessment-prompt,.essay-sheet h2 { white-space:pre-wrap; overflow-wrap:anywhere; }
.essay-sheet { padding-inline-start:25px; }
.essay-sheet li { padding-block:8px; }
.essay-sheet li+li { border-top:1px solid var(--border); margin-top:8px; }
.essay-sheet h2 { font-size:1rem; margin:0 0 10px; }
.essay-sheet textarea { min-height:96px; }
@media (max-width:420px) {
  .assessment-option-grid { grid-template-columns:1fr; }
  #study-create input,#study-create textarea,#study-create select,.essay-sheet textarea { font-size:16px; }
}
.essay-attempt .assessment-header {
  position:sticky;
  top:0;
  z-index:1;
  padding:8px 0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.assessment-step-buttons {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-block:8px;
}
.assessment-step-buttons .btn { min-width:96px; }
.assessment-jumps {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  gap:6px;
}
.assessment-jumps .btn { min-width:0; padding-inline:4px; }
.assessment-jumps .btn[aria-current=step] { background:var(--tint); border-color:var(--accent); color:var(--accent); }

.chat-screen {
  --chat-incoming:var(--surface);
  --chat-outgoing:#d2f2df;
  --chat-outgoing-ink:#143426;
  --chat-outgoing-muted:#365746;
  --chat-green:#17644b;
}
:root[data-theme=dark] .chat-screen {
  --chat-outgoing:#183f34;
  --chat-outgoing-ink:#edf9f0;
  --chat-outgoing-muted:#b1d1c3;
  --chat-green:#147253;
}
.chat-screen .demo-chat {
  overscroll-behavior:contain;
  touch-action:pan-y pinch-zoom;
  background-image:radial-gradient(circle,var(--glass-line) 1px,transparent 1px);
  background-size:22px 22px;
}
.chat-screen .chat-message { justify-content:flex-start; }
.chat-screen .chat-message--mine { justify-content:flex-end; }
.chat-screen .chat-message + .chat-message { margin-top:8px; }
.chat-screen .chat-message-content {
  max-width:min(82%,620px);
  min-width:76px;
  padding:7px 10px 5px;
  border-radius:3px 15px 15px;
  background:var(--chat-incoming);
  border:1px solid var(--glass-line);
  box-shadow:0 2px 4px var(--glass-shadow);
}
.chat-screen .chat-message--mine .chat-message-content {
  border-radius:15px 3px 15px 15px;
  background:var(--chat-outgoing);
  color:var(--chat-outgoing-ink);
}
.chat-message--mine .chat-message-content > p { color:inherit; }
.chat-message-meta {
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  align-items:center;
  justify-content:flex-end;
  color:var(--muted);
  font-size:11px;
}
.chat-message--mine .chat-message-meta { color:var(--chat-outgoing-muted); }
.chat-reply-action {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:8px;
  color:inherit;
}
.chat-reply-action:hover { background:var(--glass-sheen); }
.chat-reply-action svg { width:15px; height:15px; }
.chat-quote {
  display:grid;
  width:100%;
  min-width:0;
  gap:2px;
  padding:6px 8px;
  margin-bottom:5px;
  border-inline-start:3px solid #38956f;
  border-radius:7px;
  background:var(--glass-shadow);
  text-align:left;
  font-size:12px;
  color:inherit;
}
.chat-quote span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-photo { display:block; width:min(100%,380px); max-height:320px; object-fit:contain; border-radius:8px; }
.chat-photo[hidden],#demo-message [hidden] { display:none; }
.chat-file {
  display:flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:8px 0;
  font-size:13px;
  text-align:left;
}
.chat-file span { overflow-wrap:anywhere; }
.chat-screen .chat-composer { grid-template-columns:minmax(0,1fr); gap:4px; }
.chat-composer-row {
  display:flex;
  align-items:flex-end;
  gap:4px;
  padding:3px;
  border:1px solid var(--glass-line);
  border-radius:24px;
  background:var(--surface);
}
.chat-screen .chat-composer-row textarea {
  flex:1;
  width:0;
  min-width:0;
  min-height:43px;
  max-height:96px;
  padding:10px 5px;
  border:0;
  resize:none;
  background:transparent;
  font-size:16px;
  field-sizing:content;
}
.chat-tool {
  flex:none;
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:50%;
  color:var(--strong);
}
.chat-tool:hover { background:var(--hover); }
.chat-tool svg { width:21px; height:21px; }
.chat-tool.chat-send { background:var(--chat-green); color:white; }
.chat-tool.chat-send:disabled { opacity:.6; }
.chat-reply-draft,.chat-file-draft {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:4px 8px;
  border-radius:10px;
  background:var(--surface);
  font-size:13px;
}
.chat-reply-draft .chat-quote { margin:0; }
.chat-file-draft span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-emoji-panel { display:flex; flex-wrap:wrap; gap:2px; }
.chat-emoji-panel .chat-tool { font-size:22px; }
.chat-screen .chat-link-field summary { min-height:30px; padding-block:5px; }
@media (max-width:460px) {
  .chat-screen .chat-message-content { max-width:88%; }
  .chat-screen .chat-composer { padding-inline:9px; }
}

.tutorial-view [hidden] { display:none; }
.tutorial-directory { max-width:760px; margin-bottom:12px; }
.tutorial-directory > h2 { margin:0 0 8px; font-size:15px; color:var(--glass-muted); }
.tutorial-channel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
  padding:8px;
  border:1px solid var(--glass-edge);
  border-radius:16px;
  background:var(--glass-fill);
}
.tutorial-members { min-width:0; }
.tutorial-members summary {
  display:flex;
  min-height:50px;
  align-items:center;
  gap:8px;
  padding:5px 7px;
  border-radius:10px;
  list-style:none;
  cursor:pointer;
}
.tutorial-members summary::-webkit-details-marker { display:none; }
.tutorial-members summary:hover { background:var(--glass-sheen); }
.tutorial-members summary:focus-visible { outline:2px solid var(--glass-focus); }
.tutorial-members summary span { display:grid; gap:2px; }
.tutorial-members summary small { color:var(--glass-muted); font-size:12px; }
.tutorial-members summary svg { flex:none; width:17px; height:17px; }
.tutorial-members summary .tutorial-chevron { width:13px; }
.tutorial-members[open] .tutorial-chevron { transform:rotate(90deg); }
.tutorial-join { margin-top:4px; }
[data-tutorial-roster] { margin:4px 0 4px 18px; padding-inline-start:10px; border-inline-start:1px solid var(--glass-line); }
[data-tutorial-roster] p { margin:4px 0; color:var(--glass-muted); font-size:13px; }
[data-tutorial-roster] ul { margin:0; padding:0; list-style:none; max-height:240px; overflow:auto; }
[data-tutorial-roster] li { display:flex; gap:7px; align-items:center; padding:4px 0; font-size:13px; }
[data-tutorial-roster] li strong { min-width:0; overflow-wrap:anywhere; }
[data-tutorial-roster] li small { flex:none; margin-inline-start:auto; color:var(--glass-muted); }
.tutorial-member-avatar { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--accent); }
[data-room-controls]:not(:has(:not([hidden]))) { margin:0; }
@media (max-width:420px) {
  .tutorial-channel { padding:6px; gap:4px; }
  .tutorial-members summary { gap:5px; padding-inline:4px; }
  .tutorial-members summary strong { font-size:13px; }
  .tutorial-join { padding-inline:7px; font-size:12px; }
}

.tutorial-channel + .tutorial-channel { margin-top:8px; }
.tutorial-row-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.tutorial-row-actions .btn { min-height:38px; margin-top:4px; }
.tutorial-members summary span[data-tutorial-count] { display:inline; }
.tutorial-members summary strong,.tutorial-members summary small { overflow-wrap:anywhere; }
.overview-tutorial-slot { grid-column:1/-1; }
.overview-tutorial-slot:empty { display:none; }
.dashboard-tutorials ul { list-style:none; margin:0; padding:0 0 8px; }
.dashboard-tutorials li { border-top:1px solid var(--glass-line); }
.dashboard-tutorials li button { display:grid; gap:3px; width:100%; padding:10px 3px; text-align:left; }
.dashboard-tutorials li button:hover { background:var(--glass-sheen); }
.dashboard-tutorials li small { color:var(--glass-muted); }
@media (max-width:420px) {
  .tutorial-row-actions { flex-direction:column; }
  .tutorial-row-actions .btn { padding-inline:7px; font-size:12px; }
}

.tutorial-fullscreen {
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:var(--glass-canvas);
  box-shadow:none;
  backdrop-filter:none;
}
.tutorial-session-actions {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px max(10px,calc((100% - 850px)/2)) max(8px,env(safe-area-inset-bottom));
  border-top:1px solid var(--glass-line);
  background:var(--glass-fill);
}
.tutorial-call-tools { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.tutorial-session-actions .btn { min-height:44px; padding:5px 8px; border-radius:24px; }
.tutorial-session-actions .btn svg { width:18px; height:18px; }
.tutorial-session-actions .btn:not([data-exit]) { font-size:12px; }
.tutorial-session-actions .tutorial-hangup { flex:none; padding-inline:12px; }
.tutorial-danger.btn { color:#fff; background:#b52439; border-color:#b52439; }
.tutorial-danger.btn:hover { color:#fff; background:#9c1d2f; border-color:#9c1d2f; }
.tutorial-audio-slash { display:none; }
.tutorial-audio-off .tutorial-audio-slash { display:initial; }
.tutorial-session-actions .tutorial-audio-off { background:var(--tint); }
.tutorial-confirm h2 { font-size:22px; }
.tutorial-confirm p { margin-block:8px 16px; }
.tutorial-confirm .actions { justify-content:flex-end; }
.tutorial-confirm::backdrop { background:#040817a8; }
.tutorial-session-hint,
.tutorial-session-status {
  flex:none;
  padding:5px clamp(12px,4vw,48px);
}
.tutorial-session-status:empty { display:none; }
.tutorial-session .chat-message [data-qa-reply] {
  min-height:34px;
  margin-top:6px;
  padding:4px 12px;
}
.tutorial-session .chat-composer { padding-bottom:8px; }
.tutorial-session .chat-composer-row textarea { padding-inline:12px 5px; }
.tutorial-session .chat-composer .chat-reply-draft { min-width:0; }
.tutorial-session .chat-reply-draft span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.gallery-filters {
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.gallery-filters .btn { min-height:44px; border-radius:999px; }
.gallery-filters [aria-pressed="true"] {
  background:var(--glass-active);
  border-color:var(--glass-edge);
  color:var(--glass-ink);
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,172px),1fr));
  gap:8px;
}
.gallery-tile {
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
  border:1px solid var(--glass-line);
  border-radius:13px;
  background:var(--surface);
  text-align:left;
}
.gallery-thumbnail {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--glass-fill);
  color:var(--glass-muted);
  text-align:center;
  font-size:12px;
}
.gallery-thumbnail img,.gallery-thumbnail video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-title {
  position:absolute;
  inset:auto 0 0;
  padding:16px 7px 6px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(transparent,#000d);
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.gallery-play {
  position:absolute;
  top:6px;
  right:6px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  color:#fff;
  background:#15151ad9;
}
dialog:has(.gallery-viewer) {
  width:min(900px,calc(100% - 20px));
  max-width:none;
  padding:0;
}
.gallery-viewer { padding:0 12px 12px; }
.gallery-viewer-bar {
  position:sticky;
  z-index:1;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 -12px 12px;
  padding:10px 12px;
  background:var(--surface);
}
.gallery-viewer-bar h2 { min-width:0; font-size:17px; overflow-wrap:anywhere; }
.gallery-viewer-actions { display:flex; flex:none; gap:5px; }
.gallery-viewer-actions .btn { min-height:44px; padding-inline:9px; }
.gallery-viewer > p { margin-top:10px; }
@media (max-width:550px) {
  .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .gallery-tile { border-radius:6px; }
}

.admin-stats,.admin-tools,.admin-overview { display:grid; gap:10px; }
.admin-stats,.admin-tools { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-overview { grid-template-columns:repeat(2,minmax(0,1fr)); margin-block:12px; }
.admin-stats .card,.admin-tools .card,.admin-overview .card { margin:0; min-width:0; }
.admin-stat-icon { display:inline-grid; width:35px; height:35px; place-items:center; border-radius:10px; color:var(--accent); background:var(--tint); }
.admin-stats p { margin-top:8px; }
.admin-stats strong { display:block; font-size:clamp(26px,4vw,38px); line-height:1.1; margin-top:3px; }
.admin-panel h2 { font-size:17px; }
.admin-panel > .heading { margin:0 0 12px; }
.admin-panel .sub { margin-top:7px; }
.admin-panel > .btn { margin-top:9px; }
.admin-panel progress { width:100%; height:10px; margin-top:12px; accent-color:var(--accent); }
.admin-tools h3 { display:flex; align-items:center; gap:6px; }
.admin-tools h3 svg { color:var(--accent); }
.admin-students { list-style:none; padding:0; margin:12px 0 0; }
.admin-student {
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content 100px auto;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-top:1px solid var(--glass-line);
}
.admin-student small { display:block; color:var(--glass-muted); }
.admin-student div { overflow-wrap:anywhere; }
.admin-student-role { font-size:12px; }
@media(max-width:960px) {
  .admin-stats,.admin-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:540px) {
  .admin-overview { grid-template-columns:1fr; }
  .admin-stats .card,.admin-tools .card { padding:10px; }
  .admin-student { grid-template-columns:minmax(0,1fr) auto; }
  .admin-student .tag { justify-self:end; }
  .admin-student > .btn { justify-self:end; }
}

.admin-analytics,.staff-panels {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:10px;
  margin-block:12px;
}
.admin-analytics .card,.staff-panels .card { min-width:0; margin:0; }
.admin-chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.admin-chart-select { max-width:52%; font-size:11px; color:var(--glass-muted); }
.admin-chart-select select { font-size:13px; }
.admin-chart-total { font-size:30px; font-weight:800; color:var(--glass-ink); }
.admin-activity canvas { display:block; width:100%; height:clamp(130px,23vw,185px); }
.admin-activity [data-activity-note]:empty { display:none; }
.admin-chart-values { margin-top:8px; font-size:12px; color:var(--glass-muted); }
.admin-chart-values summary { cursor:pointer; padding-block:4px; }
.admin-chart-values table { width:100%; margin-top:5px; text-align:left; border-collapse:collapse; }
.admin-chart-values td,.admin-chart-values th { padding:4px; border-top:1px solid var(--glass-line); }
.admin-donut {
  display:grid;
  place-items:center;
  width:clamp(94px,13vw,136px);
  aspect-ratio:1;
  margin:14px auto;
  border-radius:50%;
  background:conic-gradient(var(--accent) var(--activation),var(--tint) 0);
}
.admin-donut strong {
  display:grid;
  place-items:center;
  width:76%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--surface);
  font-size:25px;
}
.admin-activation-legend { display:grid; gap:6px; margin:0; font-size:12px; }
.admin-activation-legend > div { display:flex; justify-content:space-between; gap:6px; }
.admin-activation-legend dd { margin:0; font-weight:750; }
.staff-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.staff-list { list-style:none; padding:0; margin:8px 0 0; }
.staff-list li {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px;
  padding:8px 0; border-top:1px solid var(--glass-line); overflow-wrap:anywhere;
}
.staff-list small { display:block; color:var(--glass-muted); }
@media(max-width:800px) {
  .admin-analytics,.staff-panels { grid-template-columns:1fr; }
}

.profile-directory,.profile-form { max-width:760px; }
.profile-directory-list { display:grid; gap:7px; margin-top:14px; }
.profile-directory-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px;
  width:100%; min-height:64px; padding:10px 13px; border:1px solid var(--glass-line);
  border-radius:16px; background:var(--glass-fill); color:var(--glass-ink); text-align:left;
}
.profile-directory-row:hover { background:var(--glass-active); }
.profile-directory-name { grid-column:2; overflow-wrap:anywhere; }
.profile-directory-name small,.profile-handle,.profile-full-name { display:block; color:var(--glass-muted); }
.profile-directory-row .member-roles { grid-column:3; justify-content:flex-end; }
.profile-chevron { grid-column:4; color:var(--glass-muted); font-size:22px; line-height:1; }
.member-roles { display:flex; flex-wrap:wrap; gap:5px; }
.member-role {
  padding:3px 8px; border-radius:999px; border:1px solid currentColor; font-size:11px;
  line-height:1.35; font-weight:750; white-space:nowrap; color:var(--badge-ink); background:var(--badge-fill);
}
.member-role[data-role=student] { --badge-ink:var(--glass-ink); --badge-fill:var(--glass-fill); }
.member-role[data-role=main_admin] { --badge-ink:#a32946; --badge-fill:#ffe3ea; }
.member-role[data-role=sub_admin] { --badge-ink:#216344; --badge-fill:#def7e8; }
.member-role[data-role=class_rep] { --badge-ink:#704e07; --badge-fill:#fff1ba; }
.member-role[data-role=tutor] { --badge-ink:#234ca8; --badge-fill:#e0eaff; }
.member-role[data-role=group_admin] { --badge-ink:#6335a3; --badge-fill:#efe5ff; }
:root[data-theme=dark] .member-role[data-role=main_admin] { --badge-ink:#ffb6c7; --badge-fill:#482139; }
:root[data-theme=dark] .member-role[data-role=sub_admin] { --badge-ink:#a9efc6; --badge-fill:#1a3a34; }
:root[data-theme=dark] .member-role[data-role=class_rep] { --badge-ink:#ffe39b; --badge-fill:#42351e; }
:root[data-theme=dark] .member-role[data-role=tutor] { --badge-ink:#bfd3ff; --badge-fill:#223767; }
:root[data-theme=dark] .member-role[data-role=group_admin] { --badge-ink:#dec8ff; --badge-fill:#3b2a59; }
.member-role-options { margin:0; padding:10px 12px; border:1px solid var(--glass-line); border-radius:14px; }
.member-role-options .checkbox { padding-block:6px; }
.profile-avatar {
  display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--tint); color:var(--accent); font-weight:800;
}
.profile-form > .btn { justify-self:start; }
#profile-viewer {
  position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-width:none; max-height:none;
  padding:0; border:0; border-radius:0; overflow:auto; background:var(--glass-canvas); backdrop-filter:none;
  background-image:radial-gradient(ellipse at 50% 0,var(--glass-blue),transparent 75%);
  background-size:100% 450px; background-repeat:no-repeat;
}
.profile-content {
  max-width:760px; margin:auto;
  padding:max(14px,env(safe-area-inset-top)) clamp(14px,4vw,28px) max(24px,env(safe-area-inset-bottom));
}
.profile-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.profile-top .btn { min-height:44px; border-radius:999px; }
.profile-top [aria-hidden] { font-size:20px; line-height:0; vertical-align:-1px; }
.profile-identity {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end; gap:clamp(12px,4vw,22px);
  min-height:clamp(164px,27vw,226px); padding:clamp(16px,4vw,30px);
  border:1px solid #92b7ff55; border-radius:26px;
  color:#f5f8ff; background:
    radial-gradient(ellipse at 94% -15%,#668bf6a6,transparent 58%),
    radial-gradient(ellipse at 38% 130%,#5844939c,transparent 68%),
    linear-gradient(118deg,#102244,#1b3b72 62%,#294686);
  box-shadow:inset 0 1px #ffffff36,0 14px 32px #10254d36;
}
.profile-identity::before,.profile-identity::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
}
.profile-identity::before {
  width:clamp(240px,46vw,390px); aspect-ratio:1; top:-58%; right:-8%; border-radius:50%;
  border:1px solid #c3e2ff42; background:linear-gradient(155deg,#b6dcff36,transparent 65%);
  box-shadow:0 0 0 22px #c3e2ff14,0 0 0 48px #c3e2ff0d,0 0 0 78px #c3e2ff08;
}
.profile-identity::after {
  width:clamp(102px,23vw,176px); aspect-ratio:1; top:14px; right:clamp(12px,4vw,36px);
  border-radius:50%; background:center / contain no-repeat var(--app-crest-image, url("./u26-crest.png"));
  filter:grayscale(1); opacity:.12;
}
.profile-identity .profile-avatar {
  width:clamp(54px,16vw,84px); height:clamp(54px,16vw,84px);
  border:1px solid #d7e7ff6e; color:#f5f8ff;
  background:linear-gradient(145deg,#5277b8,#2c4679); font-size:clamp(20px,6vw,30px);
  box-shadow:inset 0 1px #ffffff40,0 5px 16px #0c1e4166;
}
.profile-summary { min-width:0; overflow-wrap:anywhere; }
.profile-identity h1 { color:inherit; font-size:clamp(25px,6vw,38px); line-height:1.1; margin:0 0 5px; }
.profile-identity .profile-handle,.profile-identity .profile-full-name { color:#dce9ff; margin:0; }
.profile-name-label { font-size:.8em; font-weight:700; margin-inline-end:4px; }
.profile-identity .profile-full-name,.profile-summary .member-roles { margin-top:8px; }
.profile-detail {
  margin-top:12px; padding:15px 17px; border:1px solid var(--glass-line);
  border-radius:17px; background:var(--glass-fill); overflow-wrap:anywhere;
}
.profile-detail h2 { font-size:15px; }
.profile-detail p { margin:4px 0 0; white-space:pre-wrap; }
.profile-detail .btn { margin-top:10px; }
@media(max-width:520px) {
  .profile-directory-row { grid-template-columns:auto minmax(0,1fr) auto; column-gap:10px; row-gap:6px; }
  .profile-directory-row .member-roles { grid-column:2; grid-row:2; justify-content:flex-start; }
  .profile-chevron { grid-column:3; grid-row:1; }
}
.chat-profile { padding:0; color:inherit; font-weight:inherit; text-align:left; }
.chat-profile:hover,.chat-profile:focus-visible { text-decoration:underline; }
.chat-message .chat-profile { min-height:24px; max-width:100%; text-decoration:underline;
  text-decoration-color:currentColor; text-underline-offset:3px; overflow-wrap:anywhere; }
@media(min-width:541px) {
  .admin-student:has([data-profile-id]) { grid-template-columns:minmax(0,1fr) max-content minmax(70px,145px) auto auto; }
}

.support-list { display:grid; gap:9px; max-width:780px; }
.support-ticket.card { margin:0; }
.support-ticket-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.support-ticket h2 { font-size:17px; overflow-wrap:anywhere; }
.support-ticket .support-message { margin:8px 0; white-space:pre-wrap; }
.support-ticket .btn { margin-top:6px; }

.group-title-button { text-align:left; padding:4px 6px; border-radius:10px; }
.group-title-button:hover { background:var(--glass-active); }
.group-chat-title {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(18px,3.5vw,25px); font-weight:750; line-height:1.2;
}
.group-title-button small { display:block; color:var(--glass-muted); }
.group-roster { display:grid; gap:7px; padding:0; list-style:none; }
.group-roster li {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px;
  border:1px solid var(--glass-line); border-radius:14px; background:var(--glass-fill);
}
.group-roster-name { flex:1; min-width:90px; overflow-wrap:anywhere; }
.group-roster-identity { display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; }
.group-roster-identity > button { max-width:100%; overflow-wrap:anywhere; }
.group-roster-name small { display:block; color:var(--glass-muted); }
.group-member-menu { position:relative; }
.group-member-menu summary {
  display:grid; place-items:center; width:44px; height:44px; cursor:pointer;
  border:1px solid var(--glass-line); border-radius:12px; list-style:none; font-size:22px;
}
.group-member-menu summary::-webkit-details-marker { display:none; }
.group-member-menu[open] { flex:1 0 100%; }
.group-member-menu[open] summary { margin-inline-start:auto; }
.group-member-menu div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin-top:7px; }
.chat-sender { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; }
.chat-sender h3 { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.chat-sender .member-role { flex:none; }
.chat-write-block,.chat-link-note { padding:6px 12px; font-size:13px; color:var(--glass-muted); }
.chat-write-block { text-align:center; padding:12px; background:var(--glass-fill); }

.chat-message-content[data-message-actions] { -webkit-touch-callout:none; user-select:none; }
.chat-message-content[data-message-actions]:focus-visible { outline:2px solid var(--glass-focus); outline-offset:3px; }
.chat-actions-popover {
  position:fixed; inset:auto; margin:0; max-width:calc(100vw - 16px); padding:5px;
  border:1px solid var(--glass-line); border-radius:14px; background:var(--glass-fallback);
  box-shadow:0 8px 26px #0004; color:var(--glass-ink);
}
.chat-actions-popover:popover-open { display:flex; flex-wrap:wrap; gap:4px; }
.chat-actions-popover .btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.chat-actions-popover .btn[hidden] { display:none; }
.chat-actions-popover [data-message-delete] { color:var(--error); }
.chat-deleted > p { font-style:italic; opacity:.85; }

.branding-summary { display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere; }
.branding-summary h2 { font-size:16px; }
.branding-summary p { margin-top:2px; }
.branding-summary .crest { flex:none; }
.brand strong { overflow-wrap:anywhere; }

.demo-options button[data-quiz-outcome] { opacity:1; flex-wrap:wrap; justify-content:space-between; }
.demo-options button[data-quiz-outcome="correct"] { background:#def5e8; color:#164d31; border-color:#428862; }
.demo-options button[data-quiz-outcome="incorrect"] { background:#ffe5e8; color:#831b30; border-color:#bb4a5f; }
:root[data-theme=dark] .demo-options button[data-quiz-outcome="correct"] { background:#193a2d; color:#bcf5d2; border-color:#62a783; }
:root[data-theme=dark] .demo-options button[data-quiz-outcome="incorrect"] { background:#482234; color:#ffc1ca; border-color:#bf6575; }
.demo-options button:disabled { cursor:default; }
.quiz-outcome { flex:none; font-size:11px; font-weight:750; }
.quiz-feedback {
  margin-top:12px; padding:12px 14px; border:1px solid var(--glass-line);
  border-radius:14px; background:var(--glass-fill); overflow-wrap:anywhere;
}
.quiz-feedback h3 { margin:0; }
.quiz-feedback p { margin-top:4px; white-space:pre-wrap; }

.academic-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.academic-actions:empty, [data-exam-countdown-controls]:empty { display:none; }
[data-exam-countdown]:not(:empty) { margin-bottom:16px; }
.exam-countdown-card {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 15px;
  border:1px solid var(--glass-line); border-radius:18px; background:var(--glass-fill);
  color:var(--glass-ink);
}
.exam-countdown-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--tint); color:var(--accent); }
.exam-countdown-copy { flex:1 1 170px; min-width:0; overflow-wrap:anywhere; }
.exam-countdown-copy p { font-size:12px; font-weight:750; color:var(--accent); }
.exam-countdown-title { display:block; font-size:17px; }
.exam-countdown-detail { display:block; font-size:12px; color:var(--glass-muted); }
.exam-countdown-time { font-variant-numeric:tabular-nums; font-size:clamp(17px,3vw,22px); }
[data-phase="period"] .exam-countdown-card { border-color:var(--accent); }
.countdown-fields { display:grid; gap:8px; margin:0; padding:10px 12px; border:1px solid var(--glass-line); border-radius:12px; }
.countdown-fields[hidden] { display:none; }
.countdown-fields legend { font-size:13px; font-weight:700; }
@media(max-width:440px) {
  .exam-countdown-copy { flex-basis:calc(100% - 58px); }
  .exam-countdown-time { margin-inline-start:52px; }
}

.hero--dashboard {
  min-height:190px;
  margin-bottom:14px;
  padding-block:24px;
}
.hero--dashboard h1 { font-size:clamp(36px,4.8vw,64px); }
.hero--dashboard .hero-optics { width:clamp(155px,29vw,315px); }

@media (max-width:700px) {
  .hero--dashboard { min-height:122px; }
  .hero--dashboard .hero-copy { width:calc(100% - 74px); }
  .hero--dashboard .hero-label { padding-right:0; }
  .hero--dashboard h1 { font-size:clamp(30px,7.6vw,47px); }
  .hero--dashboard .hero-optics { top:50%; width:clamp(102px,29vw,158px); }
}

[data-exam-countdown="compact"]:not(:empty) { flex:none; margin:0 0 10px; }
.chat-screen > [data-exam-countdown="compact"]:not(:empty) {
  margin:6px clamp(10px,4vw,36px);
}
[data-exam-countdown="compact"] .exam-countdown-card { gap:4px 8px; padding:6px 10px; border-radius:12px; }
[data-exam-countdown="compact"] .exam-countdown-copy { flex:1 1 104px; }
[data-exam-countdown="compact"] .exam-countdown-icon { display:none; }
[data-exam-countdown="compact"] .exam-countdown-title,
[data-exam-countdown="compact"] .exam-countdown-time { font-size:13px; margin:0; }

.scientific-calculator {
  display:grid; gap:12px; width:100%; max-width:425px;
  padding:clamp(10px,3vw,18px); border:1px solid var(--glass-line);
  border-radius:18px; background:var(--glass-fill);
}
.calculator-display { display:grid; gap:8px; }
.calculator-display input,.calculator-result { font-variant-numeric:tabular-nums; }
.calculator-display input { font-size:16px; }
.calculator-result {
  display:block; min-height:34px; text-align:right; overflow-wrap:anywhere;
  font-size:clamp(17px,4vw,24px); font-weight:750;
}
.calculator-angle { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calculator-angle select { width:auto; }
.calculator-keys { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.calculator-keys .btn { min-height:44px; padding-inline:2px; }
#calculator-dialog { max-width:min(467px,calc(100% - 20px)); }

.exam-duration {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin:0; min-width:0; padding:10px; border:1px solid var(--glass-line); border-radius:12px;
}
.exam-duration[hidden], [data-quiz-duration][hidden] { display:none; }
.exam-duration .sub { grid-column:1/-1; }