/* xSTELLAR8 and simul8R site styles. Brand: black, red and silver; type: Inter (self-hosted). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --space: #0a0a0c;
  --space-2: #131316;
  --space-3: #1f1f24;
  --space-line: rgba(255, 255, 255, 0.09);
  --star: #dc2626;
  --star-2: #ef4444;
  --red-dark: #b91c1c;
  --red-tint: #fef2f2;
  --red-glow: rgba(220, 38, 38, 0.35);
  --silver: #c4c7ce;
  --silver-2: #e7e8ec;
  --violet: var(--red-dark);
  --ink: #111114;
  --ink-2: #44474f;
  --ink-3: #6b6f78;
  --line: #e6e7eb;
  --line-2: #d6d8de;
  --paper: #ffffff;
  --paper-2: #f6f6f8;
  --paper-3: #eeeff2;
  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --warn: #92400e;
  --warn-bg: #fffbeb;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.06);
  --shadow: 0 1px 2px rgba(16, 17, 20, 0.05), 0 6px 24px rgba(16, 17, 20, 0.07);
  --shadow-lg: 0 2px 6px rgba(16, 17, 20, 0.06), 0 24px 60px rgba(16, 17, 20, 0.14);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Red brand surfaces: buttons, icons, accent lines and bands */
  --red-grad: linear-gradient(135deg, #ef4444 0%, #dc2626 45%, #b91c1c 100%);
  --red-line: linear-gradient(90deg, #7f1d1d, #dc2626 30%, #f87171 50%, #dc2626 70%, #7f1d1d);
  --red-wash: #fff5f5;
  --red-edge: #fecaca;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: 'cv11', 'ss01';
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--red-dark); text-underline-offset: 3px; }
a:hover { color: var(--star); }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.025em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0 0 1em; }
.h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
.h3 { font-size: 1.2rem; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.hidden, [hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--star-2); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) { .hide-sm { display: none; } .wrap { padding: 0 18px; } }

/* ---------- Header ---------- */
.site-header {
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--space-line);
}
.nav { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 0.02em; font-size: 1.15rem; }
.brand:hover { color: #fff; }
.brand svg { width: 46px; height: 23px; flex: none; }
.brand .x, .brand .eight { color: var(--star-2); }
.brand b { color: var(--silver); font-weight: 800; }
/* "by xSTELLAR8" beside the simul8R name links back to the main site. */
.by-main { font-weight: 600; font-size: 0.72rem; color: var(--silver); letter-spacing: 0.06em; text-transform: uppercase; margin-left: -14px; padding-left: 10px; border-left: 1px solid var(--space-line); text-decoration: none; white-space: nowrap; }
.by-main:hover { color: #fff; text-decoration: underline; }
.nav-links .to-main { display: none; }
@media (max-width: 900px) { .by-main { display: none; } .nav-links .to-main { display: block; } }
/* The brand names (simul8R, xSTELLAR8) are one word with a red 8: never split, never spaced. */
.brandword { white-space: nowrap; display: inline; letter-spacing: inherit; }
.brandword .eight { display: inline; margin: 0; padding: 0; background: none; width: auto; height: auto; border-radius: 0; color: var(--star); }
.eight { color: var(--star); }
/* On a red background a red 8 would vanish: it gets a little black backing, and stays red. */
.btn:not(.secondary):not(.light):not(.ghost):not(.link):not(.dark) .eight, .pill.dark .eight, .price-card .tag .eight, .showcase-tabs button[aria-selected='true'] .eight {
  background: #0a0a0c; color: var(--star-2); border-radius: 3px; padding: 0 0.08em; margin: 0 0.02em;
}
.btn.dark .eight, .btn.secondary .eight,
.site-header .eight, .site-footer .eight, .hero .eight, .page-hero .eight, .dash-head .eight, .dark-band .eight, .cta .eight, .auth-panel .eight { color: var(--star-2); }
.brand .sub { font-weight: 600; font-size: 0.72rem; color: var(--silver); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--space-line); }
.nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav-links a { color: #c9ccd3; text-decoration: none; font-weight: 500; font-size: 0.94rem; padding: 8px 12px; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-links a[aria-current='page'] { color: #fff; }
.nav-links .btn { margin-left: 6px; padding: 9px 16px; }
.nav-links .btn:hover { background: var(--star-2); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 0.9rem; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 68px; background: var(--space); flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 18px 18px; border-bottom: 1px solid var(--space-line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-links .btn { margin: 8px 0 0; text-align: center; }
  .brand .sub { display: none; }
}
.local-banner { background: #fffbeb; color: #78350f; text-align: center; font-size: 0.85rem; padding: 7px 16px; border-bottom: 1px solid #fde68a; }
.local-banner a { color: #78350f; font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 11px; padding: 12px 22px;
  font: inherit; font-weight: 650; font-size: 0.95rem; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  background: var(--star); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px -6px var(--red-glow);
  transition: transform 0.12s var(--ease), background 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.secondary { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.secondary:hover { background: rgba(127, 127, 127, 0.08); color: inherit; }
.btn.dark { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.btn.dark:hover { background: #2a2a30; }
.btn.light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.btn.light:hover { background: var(--paper-2); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.small { padding: 8px 14px; font-size: 0.86rem; border-radius: 9px; }
.btn.large { padding: 15px 26px; font-size: 1.02rem; border-radius: 13px; }
.btn.block { width: 100%; }
.btn.danger { background: var(--bad); }
.btn.link { background: none; color: var(--red-dark); padding: 0; font-weight: 600; box-shadow: none; }
.btn.link:hover { transform: none; text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(220, 38, 38, 0.32), transparent 60%),
    radial-gradient(700px 420px at -5% 110%, rgba(196, 199, 206, 0.12), transparent 60%),
    var(--space);
  color: #fff;
  padding: 96px 0 104px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 700; color: var(--star); margin-bottom: 16px; }
.hero .eyebrow, .page-hero .eyebrow, .cta .eyebrow, .dark-band .eyebrow { color: #f87171; }
.badge-dot { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--space-line); color: #e5e7eb; font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.badge-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--star-2); box-shadow: 0 0 0 4px rgba(239,68,68,.2); }
.hero h1 { max-width: 760px; }
.hero h1 em, .grad { font-style: normal; background: linear-gradient(92deg, #ff6b6b, #dc2626 55%, #f3f4f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.18rem; color: #b9bdc6; max-width: 600px; margin-bottom: 32px; }
.hero .btn.secondary { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.hero .btn.secondary:hover { background: rgba(255,255,255,.08); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #d1d5db; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--space-line); background: rgba(255,255,255,.035); }
.chip svg { width: 14px; height: 14px; color: #f87171; }
.page-hero { position: relative; overflow: hidden; background: radial-gradient(700px 300px at 85% -40%, rgba(220,38,38,.3), transparent 60%), var(--space); color: #fff; padding: 64px 0 56px; }
.page-hero p { color: #b9bdc6; max-width: 680px; margin: 0; font-size: 1.08rem; }

/* Browser-window frame around product screenshots */
.window { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #1c1c21; }
.window-bar > span { width: 11px; height: 11px; border-radius: 50%; background: #3a3a42; }
.window-bar > span:first-child { background: #ef4444; }
.window-bar em { margin-left: 10px; font-style: normal; font-size: 0.74rem; color: #9ca3af; background: #111114; padding: 3px 12px; border-radius: 6px; flex: 1; max-width: 300px; }
.window img { display: block; width: 100%; }
.light .window { box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.tilt { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transition: transform 0.6s var(--ease); }
.tilt:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }
@media (max-width: 960px) { .tilt { transform: none; } }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.alt { background: var(--paper-2); }
.dark-band { background: var(--space); color: #fff; }
.dark-band .muted { color: #9ca3af; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.08rem; }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } section { padding: 72px 0; } }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
a.card, .card.hover { color: inherit; text-decoration: none; display: block; }
a.card:hover, .card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--red-tint); color: var(--star); margin-bottom: 18px; border: 1px solid #fde2e2; }
.icon svg { width: 22px; height: 22px; }
.dark-band .icon { background: rgba(220,38,38,.14); border-color: rgba(239,68,68,.25); color: #f87171; }
.feature-list { list-style: none; padding: 0; margin: 0 0 20px; }
.feature-list li { padding-left: 30px; position: relative; margin-bottom: 11px; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 5px; width: 19px; height: 19px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2315803d'%3E%3Cpath d='M8.1 13.3 4.8 10l-1.1 1.1 4.4 4.4 8.4-8.4-1.1-1.1z'/%3E%3C/svg%3E") center/14px no-repeat; }
.dark-band .feature-list li::before { background-color: rgba(34,197,94,.15); }
.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { position: relative; padding: 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 800; margin-bottom: 14px; }

.feature-course { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; overflow: hidden; padding: 0; }
.feature-course .body { padding: 38px; }
.feature-course .side { background: linear-gradient(160deg, var(--space-2), var(--space)); color: #fff; padding: 38px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.feature-course .side .stat { display: flex; justify-content: space-between; border-bottom: 1px solid var(--space-line); padding-bottom: 10px; }
.feature-course .side .stat span:first-child { color: var(--silver); }
.feature-course .side .stat span:last-child { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .feature-course { grid-template-columns: minmax(0, 1fr); } }

.cta { position: relative; overflow: hidden; background: radial-gradient(600px 300px at 90% 0%, rgba(220,38,38,.35), transparent 60%), var(--space); color: #fff; border-radius: 24px; padding: 64px 48px; text-align: center; }
.cta p { color: #b9bdc6; max-width: 600px; margin: 0 auto 28px; font-size: 1.08rem; }
.cta .btn.secondary { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
@media (max-width: 600px) { .cta { padding: 44px 22px; border-radius: 18px; } }

/* Platform showcase (tabs + screenshot) */
.showcase-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--space-line); margin-bottom: 28px; }
.light .showcase-tabs { background: var(--paper-3); border-color: var(--line); }
.showcase-tabs button { border: 0; background: none; color: #c9ccd3; font: inherit; font-weight: 600; font-size: 0.92rem; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.light .showcase-tabs button { color: var(--ink-2); }
.showcase-tabs button[aria-selected='true'] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.showcase-note { font-size: 0.9rem; color: #9ca3af; margin-top: 16px; }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pricing { grid-template-columns: minmax(0, 1fr); } }
.price-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow-sm); }
.price-card.featured { border: 2px solid var(--star); box-shadow: 0 20px 50px -20px var(--red-glow); }
.price-card .tag { position: absolute; top: -12px; left: 24px; background: var(--star); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.price-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.price-card .amount { font-size: 2.6rem; font-weight: 850; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 4px; }
.price-card .amount small { font-size: 0.95rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.price-card .note { font-size: 0.85rem; color: var(--ink-3); min-height: 1.4em; margin-bottom: 18px; }
.price-card .feature-list { font-size: 0.92rem; margin-bottom: 24px; flex: 1; }
.price-card .btn { width: 100%; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 650; font-size: 1.04rem; padding: 18px 40px 18px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font-size: 1.5rem; font-weight: 400; color: var(--ink-3); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); margin: 0 0 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--space); color: #9ca0a8; padding: 64px 0 32px; font-size: 0.93rem; border-top: 1px solid var(--space-line); }
.site-footer a { color: #c9ccd3; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-grid h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-bottom { border-top: 1px solid var(--space-line); padding-top: 22px; font-size: 0.82rem; line-height: 1.6; }
.footer-grid > div { min-width: 0; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Forms ---------- */
form .field { margin-bottom: 18px; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 11px; background: #fff; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover, textarea:hover { border-color: #b9bcc5; }
input:focus, select:focus, textarea:focus { border-color: var(--star); outline: none; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
textarea { min-height: 130px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { width: auto; margin-top: 5px; accent-color: var(--star); }
.hint { font-size: 0.84rem; color: var(--ink-3); margin-top: 5px; }
.hp { position: absolute; left: -5000px; }
.alert { border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 0.95rem; border: 1px solid transparent; }
.alert.error { background: var(--bad-bg); color: #7f1d1d; border-color: #fecaca; }
.alert.ok { background: var(--ok-bg); color: #14532d; border-color: #bbf7d0; }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; }

/* Sign-in pages: form beside a dark brand panel */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px); }
.auth-panel { background: radial-gradient(600px 400px at 100% 0%, rgba(220,38,38,.35), transparent 60%), var(--space); color: #fff; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.auth-panel h2 { font-size: 2rem; }
.auth-panel p { color: #b9bdc6; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--paper-2); }
.auth-card { width: 100%; max-width: 440px; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.7rem; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-panel { display: none; } .auth-main { min-height: calc(100vh - 68px); } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: var(--paper-2); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafafb; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.violet { background: var(--red-tint); color: var(--red-dark); }
.pill.dark { background: var(--ink); color: #fff; }

/* ---------- Course listing ---------- */
.class-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); }
.class-row:first-child { border-top: 0; }
.class-row .when { font-weight: 700; }
.price { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.outline { counter-reset: ch; list-style: none; padding: 0; }
.outline li { counter-increment: ch; padding: 14px 0 14px 54px; position: relative; border-bottom: 1px solid var(--line); }
.outline li::before { content: counter(ch); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* ---------- Dashboard ---------- */
.dash-head { background: radial-gradient(700px 300px at 90% -30%, rgba(220,38,38,.3), transparent 60%), var(--space); color: #fff; padding: 44px 0 96px; }
.dash-head h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 6px; }
.dash-head p { color: #b9bdc6; margin: 0; }
.dash-head .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; }
.access-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--space-line); font-size: 0.9rem; }
.access-pill strong { color: #fff; }
.dash-body { margin-top: -64px; padding-bottom: 80px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; margin-bottom: 24px; }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.panel-head h2 { font-size: 1.25rem; margin: 0; letter-spacing: -0.02em; }
.panel-head p { margin: 0; }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .platforms { grid-template-columns: repeat(2, 1fr); } }
.platform { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.platform:hover { border-color: var(--line-2); transform: translateY(-1px); }
.platform[aria-checked='true'] { border-color: var(--star); box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
.platform[aria-checked='true']::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--star); color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; }
.platform .thumb { height: 74px; border-radius: 9px; overflow: hidden; background: var(--paper-3); border: 1px solid var(--line); }
.platform .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.platform strong { font-size: 0.92rem; line-height: 1.25; }
.platform span { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }

.exam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.exam-card { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: linear-gradient(180deg, #fff, #fbfbfc); display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.2s, transform 0.2s; }
.exam-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.exam-card .exam-no { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.exam-card h3 { margin: 0; font-size: 1.15rem; }
.exam-card .meta { font-size: 0.85rem; color: var(--ink-3); }
.exam-card .best { font-size: 0.85rem; }
.exam-card .actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }
.exam-card.locked { background: var(--paper-2); }
.exam-card.locked h3, .exam-card.locked .meta { color: var(--ink-3); }
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--c, var(--ok)) calc(var(--p) * 1%), var(--paper-3) 0); display: grid; place-items: center; position: absolute; top: 18px; right: 18px; }
.ring::before { content: attr(data-label); width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; }

.inprogress { display: grid; gap: 10px; }
.ip-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid #fde68a; background: #fffdf5; }
.ip-icon { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #fde68a; display: grid; place-items: center; color: var(--warn); }
.ip-icon svg { width: 20px; height: 20px; }
.ip-row strong { display: block; }
.ip-row .meta { font-size: 0.86rem; color: var(--ink-3); }
.ip-row .btn-row { gap: 8px; }
@media (max-width: 640px) { .ip-row { grid-template-columns: 1fr; } .ip-icon { display: none; } }

.more-practice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .more-practice { grid-template-columns: minmax(0, 1fr); } }
.chapter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter-buttons .btn { font-weight: 600; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.92rem; cursor: pointer; margin: 0; }
.toggle input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; padding: 0; border: 0; transition: background 0.2s; flex: none; margin: 0; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease); }
.toggle input:checked { background: var(--star); }
.toggle input:checked::after { transform: translateX(18px); }

.upsell { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .upsell { grid-template-columns: minmax(0, 1fr); } }
.upsell .card { padding: 22px; }
.upsell .card h3 { font-size: 1.05rem; }

.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: minmax(0, 220px) 1fr 54px; gap: 12px; align-items: center; font-size: 0.9rem; }
.bar .track { height: 10px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 99px; background: var(--ink-2); transition: width 0.6s var(--ease); }
.bar .fill.low { background: var(--bad); }
.bar .fill.mid { background: #d97706; }
.bar .fill.high { background: var(--ok); }
@media (max-width: 560px) { .bar { grid-template-columns: 1fr 50px; } .bar .track { grid-column: 1 / -1; grid-row: 2; } }
.empty { text-align: center; color: var(--ink-3); padding: 26px 10px; }
.empty svg { width: 36px; height: 36px; color: var(--line-2); margin-bottom: 8px; }

/* ---------- Standard exam screen (xSTELLAR8 layout) ---------- */
.exam-shell { display: grid; grid-template-columns: 1fr 270px; gap: 28px; align-items: start; padding-top: 32px; padding-bottom: 80px; }
@media (max-width: 900px) { .exam-shell { grid-template-columns: minmax(0, 1fr); } }
.exam-bar { position: sticky; top: 68px; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.exam-bar .wrap { display: flex; align-items: center; gap: 16px; min-height: 58px; }
body.focus-mode .site-header, body.focus-mode .local-banner { display: none; }
body.focus-mode .exam-bar { top: 0; }
body.focus-mode .palette { top: 82px; }
.exam-mark { display: inline-flex; }
.timer { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; padding: 6px 12px; border-radius: 9px; background: var(--paper-2); border: 1px solid var(--line); }
.timer.low { background: var(--bad-bg); color: var(--bad); border-color: #fecaca; }
.save-state { font-size: 0.84rem; color: var(--ink-3); }
.q-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.q-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.q-text { font-size: 1.08rem; white-space: pre-wrap; margin-bottom: 22px; }
.q-text.has-table { font-family: var(--mono); font-size: 0.93rem; }
.choices { display: grid; gap: 10px; margin-bottom: 20px; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; margin: 0; white-space: pre-wrap; transition: border-color 0.15s, background 0.15s; }
.choice:hover { border-color: #f3b4b4; }
.choice input { width: auto; margin-top: 4px; accent-color: var(--star); }
.choice .letter { font-weight: 800; color: var(--red-dark); min-width: 1.2em; }
.choice.selected { border-color: var(--star); background: var(--red-tint); }
.choice.correct { border-color: var(--ok); background: var(--ok-bg); }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.explanation { background: var(--paper-2); border-radius: 12px; padding: 16px 18px; font-size: 0.95rem; border-left: 3px solid var(--ink-2); }
.q-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.palette { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 146px; }
.palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 12px 0; }
@media (max-width: 900px) { .palette { position: static; } .palette-grid { grid-template-columns: repeat(10, 1fr); } }
.palette-grid button { aspect-ratio: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0; color: var(--ink-2); position: relative; }
.palette-grid button.answered { background: var(--ink); color: #fff; border-color: var(--ink); }
.palette-grid button.current { outline: 3px solid var(--star-2); outline-offset: 1px; }
.palette-grid button.flagged::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--star); border: 2px solid #fff; }
.legend { display: grid; gap: 4px; font-size: 0.8rem; color: var(--ink-3); }
.result-hero { text-align: center; padding: 44px 28px; }
.result-hero .score { font-size: 3.8rem; font-weight: 900; line-height: 1; margin: 10px 0; letter-spacing: -0.04em; }

/* ---------- Admin ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.tabs button { background: none; border: 0; font: inherit; font-weight: 600; padding: 12px 16px; color: var(--ink-3); border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--star); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; }
@media (max-width: 600px) { .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 14px; } .stat-card .v { font-size: 1.4rem; } }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.stat-card .v { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }
.stat-card .l { font-size: 0.84rem; color: var(--ink-3); }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar select, .toolbar input { width: auto; }
dialog { border: 0; border-radius: 18px; padding: 0; width: min(720px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10, 10, 12, 0.55); backdrop-filter: blur(2px); }
dialog form { padding: 28px; }
dialog h3 { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.option-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.option-row input[type='text'] { flex: 1; }
.option-row input[type='checkbox'] { width: auto; }
.q-admin { border-bottom: 1px solid var(--line); padding: 16px 0; }
.q-admin .q-text { font-size: 1rem; margin-bottom: 8px; }
.q-admin ol { margin: 0 0 8px; padding-left: 22px; }
.q-admin li.correct { color: var(--ok); font-weight: 700; }

.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--star); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.prose h2 { margin-top: 1.6em; font-size: 1.4rem; }
.prose { padding: 56px 24px 88px; }

/* ---------- Pictures: image spots, placeholders and the gallery ---------- */
[data-ratio='4 / 3'] { --ratio: 4 / 3; }
[data-ratio='16 / 9'] { --ratio: 16 / 9; }
[data-ratio='21 / 9'] { --ratio: 21 / 9; }
/* The shape is reserved from the first paint, so the page doesn't jump when the picture arrives. */
.slot, [data-slot] { position: relative; width: 100%; aspect-ratio: var(--ratio, 4 / 3); border-radius: 16px; overflow: hidden; background: var(--space); margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; color: #fca5a5;
  background: radial-gradient(70% 90% at 80% 0%, rgba(239, 68, 68, .45), transparent 65%), linear-gradient(135deg, #34090a, #0a0a0c); }
.slot-empty svg { width: 44px; height: 44px; opacity: .75; }
.slot-empty.admin { border: 2px dashed #f87171; border-radius: 16px; font-size: 0.86rem; color: #fecaca; }
.slot-empty.admin strong { color: #fff; font-size: 0.95rem; }
.slot-empty.admin a { color: #fff; font-weight: 700; }
.card > .slot:first-child { border-radius: 12px; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.gallery-item { display: block; width: 100%; padding: 0; border: 0; background: var(--space); border-radius: 14px; overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-sm); }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.35s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-caption { display: block; margin-top: 8px; font-size: 0.9rem; color: var(--ink-2); }
/* Admin > Gallery */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.g-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.g-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-card figcaption { padding: 10px 12px 12px; }
.g-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.g-stage { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.g-stage > img { width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
@media (max-width: 600px) { .g-stage { grid-template-columns: 1fr; } .g-stage > img { width: 100%; } }
.g-big { display: block; max-width: 100%; max-height: 260px; margin: 0 auto 16px; border-radius: 10px; }
.g-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; max-height: 340px; overflow: auto; }
.pick { position: relative; display: block; margin: 0; padding: 4px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; }
.pick input { position: absolute; opacity: 0; }
.pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.pick span { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick:has(input:checked) { border-color: var(--star); background: var(--red-wash); box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); }
.pick:has(input:focus-visible) { outline: 3px solid var(--star-2); }
dialog.lightbox { width: min(1100px, 96vw); background: #0a0a0c; color: #fff; border-radius: 16px; padding: 12px; }
dialog.lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 10px; }
dialog.lightbox figcaption { padding: 10px 6px 2px; text-align: center; color: #e5e7eb; }
dialog.lightbox .lb-bar { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px 0; }

/* ---------- Red accents ---------- */
::selection { background: #fecaca; color: #7f1d1d; }
/* A thin red line under the header and above the footer, and at the foot of every dark hero. */
.site-header::after, .hero::after, .page-hero::after, .dash-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red-line); pointer-events: none;
}
.page-hero, .dash-head { position: relative; }
/* The panel that overlaps the dashboard banner must stay above it so its tabs and buttons can be clicked. */
.dash-body { position: relative; z-index: 1; }
.nav-links a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--star-2); border-radius: 8px 8px 0 0; }
.hero {
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(220, 38, 38, 0.48), transparent 60%),
    radial-gradient(700px 420px at -8% 112%, rgba(185, 28, 28, 0.32), transparent 60%),
    var(--space);
}
.page-hero { background: radial-gradient(760px 340px at 88% -40%, rgba(220,38,38,.48), transparent 62%), radial-gradient(520px 260px at 0% 140%, rgba(185,28,28,.25), transparent 60%), var(--space); }
.dash-head { background: radial-gradient(760px 340px at 92% -30%, rgba(220,38,38,.45), transparent 62%), var(--space); }
.auth-panel { background: radial-gradient(640px 440px at 100% 0%, rgba(220,38,38,.5), transparent 62%), radial-gradient(480px 320px at 0% 100%, rgba(185,28,28,.28), transparent 60%), var(--space); }
.dark-band { background: radial-gradient(820px 420px at 100% 0%, rgba(220,38,38,.28), transparent 60%), radial-gradient(600px 360px at 0% 100%, rgba(185,28,28,.18), transparent 60%), var(--space); }
section.alt { background: linear-gradient(180deg, var(--red-wash), #fff 70%); border-top: 1px solid #fde4e4; }

/* Buttons: red gradient with a warm glow. */
.btn { background: var(--red-grad); }
.btn:hover { background: linear-gradient(135deg, #dc2626, #991b1b); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 22px -8px var(--red-glow); }
.btn.secondary, .btn.ghost, .btn.link { background: transparent; }
.btn.light { background: #fff; }
.btn.dark { background: var(--ink); }
.btn.danger { background: var(--bad); }

/* Section titles get a short red bar; eyebrows a red dash. */
.section-head h2::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--red-grad); margin-top: 16px; }
.section-head.center h2::after { margin-left: auto; margin-right: auto; }
.eyebrow:not(.badge-dot):not(:has(.badge-dot))::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.auth-main { background: radial-gradient(500px 300px at 100% 100%, #fee2e2, transparent 70%), var(--red-wash); }
.auth-card { border-top: 4px solid var(--star); }

/* Icons and numbers in solid red. */
.icon { background: var(--red-grad); color: #fff; border: 0; box-shadow: 0 8px 18px -8px var(--red-glow); }
.dark-band .icon { background: var(--red-grad); color: #fff; }
.step::before, .outline li::before { background: var(--red-grad); box-shadow: 0 6px 14px -6px var(--red-glow); }
.feature-list li::before, .dark-band .feature-list li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M8.1 13.3 4.8 10l-1.1 1.1 4.4 4.4 8.4-8.4-1.1-1.1z'/%3E%3C/svg%3E") center/13px no-repeat, var(--red-grad); }
.chip svg { color: #f87171; }

/* Cards and panels: a red top edge, and a red glow on hover. */
.grid > .card, .steps > .step, .panel, .stat-card, .format, .exam-card, .price-card { border-top: 3px solid var(--star); }
a.card:hover, .card.hover:hover, .grid > .card:hover { border-color: var(--red-edge); border-top-color: var(--star); box-shadow: 0 14px 34px -14px rgba(220, 38, 38, .35); }
.exam-card:hover, .class-card:hover { box-shadow: 0 14px 34px -14px rgba(220, 38, 38, .35); }
.exam-card .exam-no { color: var(--red-dark); }
.price-card.featured { border: 2px solid var(--star); border-top-width: 5px; }
.stat-card .v { color: var(--red-dark); }
.feature-course { border-top: 3px solid var(--star); }
.feature-course .side { background: radial-gradient(420px 260px at 100% 0%, rgba(220,38,38,.4), transparent 65%), linear-gradient(160deg, var(--space-2), var(--space)); }
.fact-card { border-top: 4px solid var(--star); }
.format strong { color: var(--red-dark); }

/* Call-to-action panel: a deep red band. */
.cta { background: radial-gradient(640px 320px at 92% 0%, rgba(248,113,113,.45), transparent 60%), radial-gradient(520px 300px at 0% 100%, rgba(10,10,12,.55), transparent 60%), linear-gradient(135deg, #7f1d1d 0%, #450a0a 55%, #0a0a0c 100%); box-shadow: 0 30px 70px -30px rgba(127, 29, 29, .7); }
.cta p { color: #fecaca; }
.cta .eyebrow { color: #fecaca; }
.cta .btn:not(.secondary) { background: #fff; color: var(--red-dark); }
.cta .btn:not(.secondary):hover { background: #fee2e2; color: #7f1d1d; }

/* Tabs, tables, FAQ and the footer. */
.showcase-tabs button[aria-selected='true'] { background: var(--red-grad); color: #fff; box-shadow: 0 6px 14px -6px var(--red-glow); }
.tabs button:hover { color: var(--red-dark); }
th { background: var(--red-wash); color: #991b1b; }
tbody tr:hover td { background: #fffafa; }
.faq summary:hover, .faq details[open] summary { color: var(--red-dark); }
.faq summary::after { color: var(--star); font-weight: 600; }
.site-footer { position: relative; border-top: 0; background: radial-gradient(700px 300px at 100% 0%, rgba(220,38,38,.16), transparent 60%), var(--space); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red-line); }
.footer-grid h4 { color: #f87171; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; }
.site-footer a:hover { color: #fca5a5; }
.promo-box { border-color: var(--red-edge); background: var(--red-wash); }
.platform[aria-checked='true'] { background: var(--red-wash); }
.palette-grid button.answered { background: var(--red-dark); border-color: var(--red-dark); }

/* ---------- More red, second pass ---------- */
:root { --space-red: linear-gradient(165deg, #34090a 0%, #170708 38%, #0a0a0c 78%); }
.site-header { background: linear-gradient(90deg, rgba(52, 9, 10, .97), rgba(14, 8, 9, .97) 50%, rgba(52, 9, 10, .97)); border-bottom-color: rgba(248, 113, 113, .25); }
.site-header::after, .hero::after, .page-hero::after, .dash-head::after, .site-footer::before { height: 4px; }
.nav-links a:hover { background: rgba(220, 38, 38, .22); }
.hero {
  background:
    radial-gradient(1000px 560px at 88% -14%, rgba(239, 68, 68, .55), transparent 62%),
    radial-gradient(760px 460px at -10% 115%, rgba(185, 28, 28, .45), transparent 62%),
    var(--space-red);
}
.page-hero { background: radial-gradient(820px 380px at 90% -45%, rgba(239, 68, 68, .55), transparent 64%), radial-gradient(560px 300px at 0% 150%, rgba(185, 28, 28, .4), transparent 62%), var(--space-red); }
.dash-head { background: radial-gradient(820px 380px at 94% -35%, rgba(239, 68, 68, .5), transparent 64%), var(--space-red); }
.auth-panel { background: radial-gradient(700px 480px at 100% 0%, rgba(239, 68, 68, .6), transparent 64%), radial-gradient(520px 360px at 0% 100%, rgba(185, 28, 28, .42), transparent 62%), var(--space-red); }
.dark-band { background: radial-gradient(900px 480px at 100% 0%, rgba(239, 68, 68, .42), transparent 62%), radial-gradient(680px 400px at 0% 100%, rgba(185, 28, 28, .32), transparent 62%), var(--space-red); }
.cta { background: radial-gradient(660px 340px at 92% 0%, rgba(252, 165, 165, .5), transparent 60%), radial-gradient(520px 300px at 0% 100%, rgba(10, 10, 12, .5), transparent 60%), linear-gradient(135deg, #991b1b 0%, #5c0f10 52%, #1a0708 100%); }
.site-footer { background: radial-gradient(760px 340px at 100% 0%, rgba(239, 68, 68, .3), transparent 62%), linear-gradient(180deg, #34090a 0%, #170708 40%, #0a0a0c 100%); }
section.alt { background: linear-gradient(180deg, #ffe9e9 0%, var(--red-wash) 38%, #fff 100%); border-top: 1px solid var(--red-edge); }
.chip { border-color: rgba(248, 113, 113, .4); background: rgba(220, 38, 38, .14); }
.badge-dot { border-color: rgba(248, 113, 113, .45); background: rgba(220, 38, 38, .2); }
.window-bar { background: linear-gradient(90deg, #3a0d0e, #1c1c21); }

/* Prices, headings and numbers in red. */
.class-price strong, .price-card .amount, .price, .fact:first-child strong, .result-hero .score { color: var(--red-dark); }
.price-card .amount small, .class-price .was { color: var(--ink-3); }
.panel-head h2 { border-left: 4px solid var(--star); padding-left: 12px; }
.stat-card { border-left: 4px solid var(--star); }
.tabs { border-bottom-color: var(--red-edge); }
.tabs button[aria-selected='true'] { color: var(--red-dark); border-bottom-color: var(--star); }
section:not(.dark-band) .card h3, .step h3, .price-card h3 { color: #7f1d1d; }
.pill.dark { background: var(--red-dark); }
.pill:not(.ok):not(.bad):not(.warn):not(.violet):not(.dark) { background: var(--red-wash); color: #991b1b; box-shadow: inset 0 0 0 1px var(--red-edge); }
.exam-bar { border-top: 4px solid var(--star); border-bottom-color: var(--red-edge); }
.q-card { border-top: 4px solid var(--star); }
.choice:hover { background: var(--red-wash); }
.explanation { border-left-color: var(--star); background: var(--red-wash); }
hr { border: 0; height: 2px; background: var(--red-line); opacity: .5; }
.tilt .window, .window { box-shadow: 0 30px 80px -20px rgba(127, 29, 29, .75), 0 0 0 1px rgba(248, 113, 113, .2); }

/* Secondary buttons are red-outlined on light pages (they stay white on dark ones). */
.btn.secondary { color: var(--red-dark); box-shadow: inset 0 0 0 2px var(--star); }
.btn.secondary:hover { background: var(--red-wash); color: #7f1d1d; }
.hero .btn.secondary, .page-hero .btn.secondary, .dash-head .btn.secondary, .dark-band .btn.secondary, .cta .btn.secondary, .auth-panel .btn.secondary, .site-footer .btn.secondary { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.hero .btn.secondary:hover, .page-hero .btn.secondary:hover, .dash-head .btn.secondary:hover, .dark-band .btn.secondary:hover, .cta .btn.secondary:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn.dark { background: linear-gradient(135deg, #3a0d0e, #0a0a0c); }
.btn.light:hover { background: var(--red-wash); }

/* High contrast keeps solid colors. */
html[data-contrast='high'] section.alt { background: var(--paper-2); }
html[data-contrast='high'] .btn:not(.secondary):not(.ghost):not(.link):not(.light) { background: #b91c1c; }

/* Gentle reveal on scroll (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}
@media print { .site-header, .site-footer, .exam-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Floating 'next class' card over the hero screenshot */
.float-card { position: absolute; left: -28px; bottom: -34px; max-width: 300px; padding: 18px 20px; box-shadow: var(--shadow-lg); color: var(--ink); }
@media (max-width: 960px) { .float-card { position: static; margin-top: 18px; max-width: none; } }

/* Question exhibits (diagrams, tables, charts) */
.q-exhibit { margin: 0 0 20px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.q-exhibit img { max-height: 420px; width: auto; max-width: 100%; }

/* ---------- Course page ---------- */
.fact-card { padding: 26px 28px; box-shadow: var(--shadow-lg); color: var(--ink); }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fact span { color: var(--ink-3); }
.fact strong { text-align: right; }
.fact:first-child strong { font-size: 1.6rem; letter-spacing: -0.03em; }
.formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .formats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .formats { grid-template-columns: minmax(0, 1fr); } }
.format { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.format strong { display: block; font-size: 1.6rem; letter-spacing: -0.03em; }
.format span { display: inline-block; margin: 2px 0 10px; font-weight: 600; color: var(--red-dark); }
.format p { margin: 0; color: var(--ink-3); font-size: 0.93rem; }
.class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
@media (max-width: 420px) { .class-cards { grid-template-columns: minmax(0, 1fr); } }
.class-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; transition: box-shadow 0.2s, transform 0.2s; }
.class-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Class length, outlined in shades of red from light (3 days) to deep (6 evenings). The text says the length too. */
[data-days] { --len: var(--line); --len-ink: var(--red-dark); }
[data-days='3'] { --len: #fecaca; --len-ink: #b91c1c; }
[data-days='4'] { --len: #f87171; --len-ink: #b91c1c; }
[data-days='5'] { --len: #dc2626; --len-ink: #991b1b; }
[data-days='6'] { --len: #7f1d1d; --len-ink: #7f1d1d; }
.class-card[data-days] { border: 3px solid var(--len); }
.format[data-days] { border-top: 6px solid var(--len); }
.format[data-days] strong { color: var(--len-ink); }
.class-card[data-days] .class-days { color: var(--len-ink); }
/* Filter and sort controls above the class cards; the length buttons wear the same red shades as the cards. */
.class-tools { display: grid; gap: 14px; margin: 0 0 22px; }
.len-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.len-filter button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.88rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink-2); border: 3px solid var(--len); cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.len-filter button:hover { background: var(--red-wash); }
.len-filter button[aria-pressed='true'] { background: var(--red-wash); color: var(--ink); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
.len-filter button[aria-pressed='true']::before { content: '✓'; font-weight: 800; color: var(--len-ink); }
.tool-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.tool-row label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 0.82rem; font-weight: 650; color: var(--ink-2); }
.tool-row select { width: auto; min-width: 11em; padding: 8px 12px; font-size: 0.92rem; }
.tool-row .check { flex-direction: row; align-items: center; font-size: 0.92rem; font-weight: 500; padding-bottom: 9px; }
.tool-row .check input { margin-top: 0; }
#f-count { margin: 0; }
.class-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.class-card h3 { margin: 4px 0 4px; font-size: 1.15rem; }
.class-days { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red-dark); }
.promo-box { margin: 0 0 18px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--paper-2); }
.promo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.promo-form label { font-weight: 650; font-size: 0.9rem; }
.promo-form input { width: 12em; text-transform: uppercase; letter-spacing: 0.04em; }
#promo-msg:not(:empty) { margin-top: 6px; }
.error-text { color: var(--bad); font-weight: 600; }
.class-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.class-price strong { font-size: 1.5rem; letter-spacing: -0.03em; }
.class-price .was { text-decoration: line-through; color: var(--ink-3); font-size: 0.9rem; }
.sessions { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.sessions li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; }
.sessions li span:first-child { font-weight: 600; }
.sessions li span:last-child { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.class-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.empty-state { text-align: center; padding: 40px 24px; }
.instructor { display: flex; gap: 20px; align-items: flex-start; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--star), #7f1d1d); color: #fff; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; }
.creds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 520px) { .instructor { flex-direction: column; } }

/* ---------- Courses page ---------- */
.course-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; padding: 34px; }
@media (max-width: 860px) { .course-card { grid-template-columns: 1fr; gap: 24px; padding: 26px; } }
.course-dates { background: var(--paper-2); border-radius: 14px; padding: 20px; }
.light-chips .chip { color: var(--ink-2); border-color: var(--line); background: var(--paper-2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 0; }
.contact-item .icon { margin: 0; width: 42px; height: 42px; flex: none; }
.contact-item strong { display: block; }

.course-option { border: 2px solid var(--ink); }
.course-option-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.course-option-grid .btn { width: auto; }
@media (max-width: 700px) { .course-option-grid { grid-template-columns: 1fr; } .course-option-grid > div:last-child { text-align: left !important; } }

/* ---------- Admin editors ---------- */
.session-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 14px; margin: 0 0 18px; }
.session-box legend { font-weight: 700; padding: 0 6px; }
.gen-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .gen-grid { grid-template-columns: 1fr 1fr; } }
.session-row { display: grid; grid-template-columns: 52px 1fr 110px auto 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 0.9rem; }
.session-row input { padding: 8px 10px; }
@media (max-width: 640px) { .session-row { grid-template-columns: 1fr 1fr; } .session-row strong { grid-column: 1 / -1; } }
.photo-row { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.checkin-toggle { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.checkin-toggle p { margin: 2px 0 0; max-width: 560px; }

/* ---- Guides and sample questions (SEO pages) ---- */
.crumbs { font-size: 0.85rem; color: #9ca0a9; margin-bottom: 14px; }
.crumbs a { color: #d4d6dc; }
.crumbs a:hover { color: #fff; }
.prose .stat-grid { margin: 0 0 28px; }
.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 8px; }
.toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; break-inside: avoid; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th.num, .prose td.num { text-align: right; }
.prose tbody tr:last-child td { border-bottom: 0; }
.cta-panel { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 40px 0; padding: 28px 32px; border-radius: var(--radius); color: #fff;
  background: radial-gradient(500px 220px at 90% -30%, rgba(220, 38, 38, 0.35), transparent 60%), var(--space); }
.cta-panel > div:first-child { flex: 1 1 360px; }
.cta-panel h2 { margin: 0 0 6px !important; color: #fff; }
.cta-panel p { margin: 0; color: #c4c7ce; }
.sample-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 22px 0; background: #fff; box-shadow: var(--shadow-sm); }
.sample-stem { font-weight: 600; font-size: 1.05rem; margin: 0 0 14px; }
.sample-options { margin: 0 0 14px; padding-left: 26px; }
.sample-options li { margin: 6px 0; padding-left: 4px; }
.sample-answer { border-top: 1px solid var(--line); padding-top: 12px; }
.sample-answer summary { cursor: pointer; font-weight: 650; color: var(--red-dark); }
.sample-answer p { margin: 10px 0 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .cta-panel { padding: 22px 20px; }
  .sample-q { padding: 18px 16px; }
}

/* ---- Shared small helpers ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.join-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
/* Form checking: a message under the field, and a red edge on the field. */
.field-error { flex: 0 0 100%; width: 100%; margin-top: 6px; color: var(--bad); font-size: 0.86rem; font-weight: 600; }
.field-error::before { content: '⚠ '; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12); }
.check input[aria-invalid='true'] { outline: 2px solid var(--bad); outline-offset: 1px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.join-row.big input { font-size: 1.4rem; padding: 14px 16px; }

/* ---- Dashboard: confirm email and phone ---- */
.ready-panel { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #fff 60%); }
.ready-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.ready-steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; align-items: start; }
.ready-steps li::before { content: counter(step); grid-row: span 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9rem; }
.ready-steps li.done::before { content: '✓'; background: var(--ok); }
.ready-steps p { margin: 2px 0 8px; }
.ready-steps .join-row { max-width: 380px; margin-top: 6px; }
.ready-steps .join-row input { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ready-steps .pill { justify-self: start; }

/* ---- Teach: live activities ---- */
.room-card { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: var(--radius); color: #fff;
  background: radial-gradient(500px 220px at 90% -30%, rgba(220, 38, 38, 0.35), transparent 60%), var(--space); }
.room-card .eyebrow { color: #f87171; }
.room-card p { color: #c4c7ce; }
.room-code { font-size: 2.6rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.1; margin: 4px 0 6px; }
.room-card .btn.light { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.launch { text-align: left; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.launch:hover, .launch:focus-visible { border-color: var(--star); transform: translateY(-2px); box-shadow: var(--shadow); }
.launch strong { font-size: 1.05rem; }
.launch span { color: var(--ink-3); font-size: 0.88rem; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 14px; }
fieldset.session-box .check { margin: 6px 0; }
.live-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.live-stats { display: flex; gap: 22px; align-items: center; }
.live-stats div { display: grid; text-align: center; }
.live-stats strong { font-size: 1.6rem; line-height: 1; }
.live-stats span { font-size: 0.78rem; color: var(--ink-3); }
.live-controls .toggles { display: inline-flex; gap: 14px; margin-left: auto; }
.live-controls .toggles .check { margin: 0; font-size: 0.9rem; }
.live-table table { font-size: 0.9rem; }
.live-table th, .live-table td { padding: 8px 10px; }
.lc-h { padding: 6px 2px !important; text-align: center; min-width: 30px; }
.lc { text-align: center; padding: 6px 2px !important; font-weight: 700; font-size: 0.82rem; min-width: 30px; border-left: 2px solid #fff; }
.lc-ok { background: #dcfce7; color: #166534; }
.lc-bad { background: #fee2e2; color: #991b1b; }
.lc-text { background: #e0e7ff; color: #3730a3; }
.lc-none { background: var(--paper-2); }
.lc-foot { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.live-table tfoot td { border-top: 2px solid var(--line); background: var(--paper-2); }
tr.idle td:first-child { opacity: 0.55; }
.team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.mini-progress { width: 90px; height: 8px; background: var(--paper-3); border-radius: 99px; overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: var(--ink); border-radius: 99px; transition: width 0.4s; }
.teacher-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; background: var(--paper-2); }
.q-detail { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; background: #fff; }
.teacher-q .q-detail { margin: 0; }
.q-detail-stem { font-weight: 600; font-size: 1.05rem; white-space: pre-line; }
.dist { display: grid; gap: 8px; margin: 12px 0; }
.dist-row { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr 36px; gap: 12px; align-items: center; font-size: 0.92rem; }
.dist-row.ok .dist-label { color: var(--ok); font-weight: 650; }
.dist-bar { height: 22px; background: var(--paper-3); border-radius: 6px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: #94a3b8; transition: width 0.4s; }
.dist-row.ok .dist-bar span { background: #22c55e; }
.dist-n { text-align: right; font-weight: 700; }
.short-answers { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.short-answers li { background: var(--paper-2); border-radius: 10px; padding: 10px 14px; }
.race { display: grid; gap: 10px; margin: 6px 0 22px; }
.race-lane { display: grid; grid-template-columns: 110px 1fr 52px; gap: 12px; align-items: center; }
.race-name { font-weight: 700; }
.race-track { position: relative; height: 40px; background: repeating-linear-gradient(90deg, var(--paper-2) 0 18px, var(--paper-3) 18px 20px); border-radius: 10px; overflow: visible; }
.race-fill { position: absolute; inset: 0 auto 0 0; border-radius: 10px; opacity: 0.25; transition: width 0.6s; }
.race-rocket { position: absolute; top: 3px; transition: left 0.6s; transform: rotate(45deg); }
.race-pct { text-align: right; font-weight: 700; }
.small-race .race-track { height: 14px; }
.small-race .race-fill { opacity: 0.9; }
.small-race .race-lane { grid-template-columns: 70px 1fr 42px; font-size: 0.85rem; }

/* Projector view: big type, no page chrome, for showing results on the classroom screen. */
body.projector .site-header, body.projector .site-footer, body.projector .teach-head, body.projector .tabs, body.projector .no-projector, body.projector .local-banner { display: none !important; }
body.projector .dash-body { margin-top: 0; max-width: none; padding: 16px 24px; }
body.projector .panel { border: 0; box-shadow: none; padding: 8px; }
body.projector .live-title, body.projector .live-top h2 { font-size: 2rem; }
body.projector .q-detail-stem { font-size: 1.5rem; }
body.projector .dist-row { font-size: 1.2rem; grid-template-columns: minmax(160px, 2fr) 4fr 50px; }
body.projector .dist-bar { height: 34px; }
body.projector .race-track { height: 64px; }
body.projector .race-rocket svg { width: 56px; height: 56px; }
body.projector .race-lane { grid-template-columns: 160px 1fr 70px; font-size: 1.3rem; }
.projector-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--space); color: #fff; padding: 12px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 1.2rem; }
.projector-bar strong { color: #fca5a5; letter-spacing: 0.06em; }

/* ---- Teach: practice monitor ---- */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--line-2); vertical-align: middle; }
.status-dot.online { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: ping 1.6s infinite; }
.status-dot.away { background: #f59e0b; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .status-dot.online { animation: none; } }
.monitor td { vertical-align: middle; }
.good { color: var(--ok); font-weight: 700; }
.low { color: var(--bad); font-weight: 700; }
.strip { display: grid; grid-template-columns: repeat(20, 9px); gap: 2px; }
.strip span { width: 9px; height: 9px; border-radius: 2px; background: var(--paper-3); }
.strip span.c { background: #22c55e; }
.strip span.w { background: #ef4444; }
.strip span.cur { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---- Teach: attendance ---- */
.attendance-class { display: grid; gap: 4px; padding: 18px; }
.day-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.day-tabs a { display: grid; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-weight: 650; text-decoration: none; white-space: nowrap; font-size: 0.92rem; }
.day-tabs a span { font-weight: 500; font-size: 0.78rem; color: var(--ink-3); }
.day-tabs a[aria-selected='true'] { border-color: var(--ink); background: var(--ink); color: #fff; }
.day-tabs a[aria-selected='true'] span { color: #c4c7ce; }
table.att td { vertical-align: middle; }
table.att input[type='time'] { width: 150px; }
table.att input[data-k='note'] { min-width: 140px; }
.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg { font: inherit; font-size: 0.85rem; font-weight: 600; border: 0; background: #fff; padding: 7px 11px; cursor: pointer; color: var(--ink-2); border-right: 1px solid var(--line-2); }
.seg:last-child { border-right: 0; }
.seg.on[data-status='present'] { background: var(--ok); color: #fff; }
.seg.on[data-status='absent'] { background: var(--bad); color: #fff; }
.seg.on[data-status='excused'] { background: #475569; color: #fff; }
.seg.clear { color: var(--ink-3); }
.time-cell { display: flex; gap: 6px; align-items: center; }
.att-ok { color: var(--ok); font-weight: 700; }
.att-warn { color: var(--warn); font-weight: 700; font-size: 0.85rem; }
.att-bad { color: var(--bad); font-weight: 700; }

/* ---- Student: live activity ---- */
.live-wrap { padding: 40px 20px 80px; }
.live-card { padding: 28px; }
.live-card.center, .live-card .center { text-align: center; }
.live-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.live-title { margin: 0 0 14px; }
.team-chip { color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 99px; font-size: 0.85rem; }
.live-q { margin: 10px 0 16px; }
.live-stem { font-size: 1.15rem; font-weight: 600; white-space: pre-line; }
.live-options { display: grid; gap: 10px; margin-top: 12px; }
.live-opt { display: flex; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; background: #fff; transition: border-color 0.15s, background 0.15s; }
.live-opt input { position: absolute; opacity: 0; pointer-events: none; }
.live-opt:hover { border-color: var(--line-2); }
.live-opt:focus-within { outline: 3px solid rgba(220, 38, 38, 0.35); outline-offset: 2px; }
.live-opt.on { border-color: var(--ink); background: var(--paper-2); }
.live-opt.right { border-color: #22c55e; background: #f0fdf4; }
.live-opt.wrong { border-color: #ef4444; background: #fef2f2; }
.live-opt .letter { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--paper-3); }
.live-opt.on .letter { background: var(--ink); color: #fff; }
.live-opt.right .letter { background: #22c55e; color: #fff; }
.live-q textarea { width: 100%; }
.big-score { font-size: 3rem; font-weight: 800; margin: 10px 0; display: grid; }
.big-score span { font-size: 1.1rem; color: var(--ink-3); font-weight: 600; }
.pulse { width: 18px; height: 18px; border-radius: 50%; background: var(--star); margin: 6px auto 16px; animation: ping-red 1.6s infinite; }
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); } 70% { box-shadow: 0 0 0 16px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.last-result { background: var(--paper-2); border-radius: 12px; padding: 14px; margin: 16px 0; }
.live-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.live-nav a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 8px; font-weight: 700; font-size: 0.85rem; text-decoration: none; color: var(--ink-2); }
.live-nav a.done { background: var(--ink); color: #fff; border-color: var(--ink); }
.live-block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; scroll-margin-top: 90px; }
.live-review { border-left: 4px solid var(--line-2); padding: 6px 12px; margin: 10px 0; }
.live-review.ok { border-color: #22c55e; }
.live-review.bad { border-color: #ef4444; }

@media (max-width: 720px) {
  .live-controls .toggles { margin-left: 0; }
  .room-code { font-size: 2rem; }
  .dist-row { grid-template-columns: 1fr 1.4fr 30px; }
  .race-lane { grid-template-columns: 70px 1fr 42px; }
  .live-card { padding: 20px 16px; }
  table.att input[type='time'] { width: 132px; }
}

.filter-label { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.filter-label select { min-width: 0; max-width: 100%; flex: 1; }
.live-q:focus, .live-card h1:focus, .live-card h2:focus { outline: none; }

/* Learning-objective drills (dashboard) */
.drill-card { grid-column: 1 / -1; }
.drill-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.drill-suggest .low { margin-left: 4px; }
.drill-pick select { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (max-width: 560px) { .drill-pick { flex-direction: column; } .drill-pick .btn { align-self: flex-start; } }

/* Readiness score (dashboard) */
.readiness { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.readiness p { margin: 4px 0 0; }
.gauge { --p: 0; --c: var(--ok); flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #fff 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--paper-3) 0); }
.gauge span { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.gauge small { font-size: 0.7rem; color: var(--ink-3); }
.readiness.ready strong { color: var(--ok); }
.focus-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.focus-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 0.88rem; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
/* Study plan (dashboard) */
.study-panel .panel-head { align-items: center; }
.countdown { font-size: 0.95rem; }
.countdown strong { font-size: 1.5rem; color: var(--star); margin-right: 2px; }
.exam-date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 16px; font-size: 0.9rem; }
.exam-date label { font-weight: 600; }
.exam-date input { width: auto; }
.study-panel h3 { margin: 0 0 10px; font-size: 1.05rem; }
.plan-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-tasks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 0.93rem; }
.plan-tasks .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: #fff; }
.plan-tasks li.done { background: var(--ok-bg); border-color: #bbf7d0; }
.plan-tasks li.done .tick { background: var(--ok); border-color: var(--ok); }
.plan-tasks li .sr-only:empty { display: none; }
.plan-later { margin-top: 14px; }
.plan-later summary { cursor: pointer; font-weight: 650; }
.plan-later ol { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9rem; }
@media (max-width: 560px) { .plan-tasks li { grid-template-columns: 22px 1fr; } .plan-tasks li .btn { grid-column: 2; justify-self: start; } }
/* Study mode (exam screen) */
.study-check { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: -6px 0 18px; }
.study-feedback { margin: -6px 0 18px; }
.study-feedback:focus { outline: none; }
.choice.right { border-color: #22c55e; background: #f0fdf4; }
.choice.right .letter { color: #15803d; }
.choice.wrong { border-color: #ef4444; background: #fef2f2; }
.palette-grid button.right, .palette-grid button.answered.right { background: #dcfce7; border-color: #22c55e; color: #166534; }
.palette-grid button.wrong, .palette-grid button.answered.wrong { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.toggles-row { display: inline-flex; flex-wrap: wrap; gap: 16px; }
/* Pacing coach */
.pace { font-size: 0.82rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; margin-right: 10px; }
.pace:empty { display: none; }
.pace.ok { background: var(--ok-bg); color: var(--ok); }
.pace.warn { background: var(--warn-bg); color: var(--warn); }
.pace.bad { background: var(--bad-bg); color: var(--bad); }
.pacing-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 12px; }
.pacing-stats div { display: grid; background: var(--paper-2); border-radius: 12px; padding: 12px; }
.pacing-stats strong { font-size: 1.4rem; }
.pacing-stats span { font-size: 0.8rem; color: var(--ink-3); }
/* Report a problem with a question */
.report-row { margin-top: 10px; }
.report-row .btn.link { font-size: 0.85rem; color: var(--ink-3); }
.report-form { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--paper-2); display: grid; gap: 10px; }
.report-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.report-form legend { font-weight: 650; margin-bottom: 6px; }
.report-form label { font-size: 0.9rem; }
.report-form textarea { width: 100%; margin-top: 4px; }
.report-done { color: var(--ok); font-weight: 600; font-size: 0.9rem; margin: 10px 0 0; }
/* Admin: question reports */
.report-card { margin-bottom: 16px; padding: 20px; }
.report-quote { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--star); background: var(--red-tint); border-radius: 0 10px 10px 0; }
.q-admin-text { font-weight: 600; white-space: pre-line; margin-bottom: 10px; }
.q-admin-opts { margin: 0 0 10px; padding-left: 24px; }
.q-admin-opts li.ok { color: var(--ok); font-weight: 650; }
/* Spaced review (dashboard) */
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.review-stats div { display: grid; text-align: center; background: var(--paper-2); border-radius: 12px; padding: 10px 6px; }
.review-stats strong { font-size: 1.4rem; }
.review-stats span { font-size: 0.75rem; color: var(--ink-3); }
/* CTFL glossary and flashcards */
.glossary { padding: 32px 24px 88px; max-width: 900px; }
.glossary-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.glossary-tools input[type='search'] { flex: 1 1 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 0.85rem; font-weight: 650; border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 6px 12px; cursor: pointer; color: var(--ink-2); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; }
.az a { min-width: 30px; text-align: center; padding: 4px 6px; border-radius: 6px; font-weight: 700; text-decoration: none; background: var(--paper-2); color: var(--ink-2); }
.az a:hover { background: var(--ink); color: #fff; }
section.letter h2 { font-size: 1.5rem; border-bottom: 2px solid var(--star); padding-bottom: 4px; margin: 28px 0 10px; }
.term { padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.term h3 { font-size: 1.1rem; margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.term h3 a { color: var(--ink); text-decoration: none; }
.term p { margin: 4px 0; }
.term .plain { color: var(--ink-2); }
.term .example { color: var(--ink-2); font-size: 0.95rem; }
.term:target { background: var(--warn-bg); border-radius: 10px; padding: 14px; }
#flashcards { margin: 10px 0 30px; }
.fc-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.9rem; color: var(--ink-3); }
.fc-card { width: 100%; min-height: 260px; display: grid; place-content: center; gap: 12px; text-align: center; padding: 32px 24px; font: inherit; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.fc-card.flipped { background: var(--paper-2); }
.fc-term { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.fc-hint { font-size: 0.85rem; color: var(--ink-3); }
.fc-term-small { font-weight: 800; color: var(--star); }
.fc-def { font-size: 1.15rem; max-width: 620px; }
.fc-plain, .fc-ex { color: var(--ink-2); max-width: 620px; font-size: 0.95rem; }
.fc-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.fc-actions kbd { font-size: 0.7rem; opacity: 0.7; margin-left: 4px; }
.fc-done { text-align: center; padding: 40px 0; }
/* Accessibility settings (footer) */
.site-footer .a11y-open { color: #c4c7ce; text-decoration: underline; padding: 0; margin-bottom: 10px; display: block; font-size: 0.85rem; }
.a11y-dlg { max-width: 460px; width: calc(100% - 32px); border: 0; border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.a11y-dlg::backdrop { background: rgba(10, 10, 12, 0.5); }
.a11y-dlg fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.a11y-dlg legend { font-weight: 650; margin-bottom: 6px; }
.seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-opt input { position: absolute; opacity: 0; }
.seg-opt span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 99px; cursor: pointer; font-size: 0.9rem; }
.seg-opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(220, 38, 38, 0.45); outline-offset: 2px; }
html[data-text='lg'] { font-size: 112.5%; }
html[data-text='xl'] { font-size: 125%; }
html[data-links='underline'] a { text-decoration: underline !important; }
html[data-motion='reduce'] *, html[data-motion='reduce'] *::before, html[data-motion='reduce'] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-contrast='high'] { --ink: #000; --ink-2: #111; --ink-3: #2b2b2b; --line: #6b6b6b; --line-2: #3f3f3f; --paper-2: #fff; --paper-3: #e5e5e5; --star: #b91c1c; }
html[data-contrast='high'] main .muted, html[data-contrast='high'] main .hint, html[data-contrast='high'] main .small, html[data-contrast='high'] dialog .muted { color: #1a1a1a !important; }
html[data-contrast='high'] main .page-hero .muted, html[data-contrast='high'] main .dash-head .muted, html[data-contrast='high'] main .cta-panel .muted { color: #fff !important; }
html[data-contrast='high'] .site-footer, html[data-contrast='high'] .site-footer a, html[data-contrast='high'] .page-hero p { color: #fff; }
html[data-contrast='high'] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
/* Offline page (installable app) */
.offline-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper-2); }
.offline-card { max-width: 480px; text-align: center; padding: 36px 28px; }

.cal-link { margin: 10px 0 0; }

/* Class portal */
.join-panel .btn { margin: 4px 0 8px; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.post.pinned { border-color: var(--star); background: var(--red-tint); }
.post-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-actions { margin-left: auto; font-size: 0.85rem; }
.post-body { white-space: pre-line; margin: 8px 0 0; }
.post p { margin: 6px 0 0; }
.portal-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.portal-days li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 0.92rem; }
.portal-days li span { color: var(--ink-3); }
.portal-days li.today { border-color: var(--ok); background: var(--ok-bg); }
.portal-days li.past { opacity: 0.6; }
/* Pre-class check */
.check-card { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff, #fff 70%); }
.diag-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 0.9rem; }
.diag-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 4px 0; }

/* Certificate of completion */
.cert-wrap { padding: 40px 20px 80px; max-width: 1000px; }
.cert-verify { max-width: 520px; margin: 0 auto; }
.certificate { background: #fff; border: 2px solid var(--ink); outline: 6px double var(--star); outline-offset: 6px; border-radius: 6px; padding: 48px 56px; text-align: center; margin: 24px auto; max-width: 900px; aspect-ratio: 1.414; display: flex; flex-direction: column; justify-content: center; }
.certificate.revoked { opacity: 0.5; }
.cert-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cert-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.04em; }
.cert-brand .x { color: var(--star); }
.cert-kicker { text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; color: var(--star); margin: 18px 0 10px; font-size: 0.95rem; }
.cert-line { margin: 4px 0; color: var(--ink-2); font-style: italic; }
.cert-name { font-size: 2.6rem; margin: 8px 0 6px; font-family: Georgia, 'Times New Roman', serif; }
.cert-course { font-size: 1.5rem; margin: 6px 0; }
.cert-detail { color: var(--ink-2); margin: 6px 0 26px; }
.cert-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: auto; }
.cert-foot div { display: grid; border-top: 1px solid var(--ink); padding-top: 6px; }
.cert-sign { font-weight: 700; }
.cert-role { font-size: 0.8rem; color: var(--ink-3); }
.cert-note { font-size: 0.72rem; color: var(--ink-3); margin: 18px 0 0; }
@media (max-width: 700px) { .certificate { padding: 28px 18px; aspect-ratio: auto; } .cert-name { font-size: 1.8rem; } .cert-foot { grid-template-columns: minmax(0, 1fr); } }
@media print {
  @page { size: landscape; margin: 12mm; }
  .site-header, .site-footer, .local-banner, .no-print, #cert-msg { display: none !important; }
  .cert-wrap { padding: 0; max-width: none; }
  .certificate { margin: 0 auto; max-width: none; height: 170mm; aspect-ratio: auto; }
}
.panel-inset { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 20px; }
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cert-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 0; }

/* ---- Reviews ---- */
.stars { --pct: 0%; display: inline-block; position: relative; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; color: #d9d4d4; white-space: nowrap; }
.stars::before { content: '★★★★★'; position: absolute; inset: 0; width: var(--pct); overflow: hidden; color: var(--star); }
.rating-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; text-decoration: none; }
.rating-link:empty { display: none; }
.rating-num { font-weight: 700; }
.reviews > h2 { margin-bottom: 14px; }
.review-summary { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-bottom: 18px; }
.review-avg { display: grid; gap: 4px; justify-items: start; }
.review-avg strong { font-size: 2.6rem; line-height: 1; color: var(--red-dark); }
.hist { flex: 1 1 240px; display: grid; gap: 5px; max-width: 420px; }
.hist-row { display: grid; grid-template-columns: 62px 1fr 28px; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ink-3); }
.hist-track { height: 8px; border-radius: 99px; background: #eee9e9; overflow: hidden; }
.hist-fill { height: 100%; background: var(--star); border-radius: 99px; }
.review-list { display: grid; gap: 14px; margin: 18px 0; }
.review { border: 1px solid var(--line, #e6e0e0); border-left: 4px solid var(--star); border-radius: 12px; padding: 16px 18px; background: #fff; }
.review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review-top h3 { margin: 0; font-size: 1.05rem; }
.review-body { margin: 8px 0; white-space: pre-line; }
.review-by { font-size: 0.88rem; color: var(--ink-3); margin-top: 6px; }
.review-reply { margin-top: 12px; padding: 10px 14px; background: #faf5f5; border-radius: 10px; font-size: 0.93rem; }
.review-reply p { margin: 4px 0 0; }
.review-write { margin-top: 10px; }
.review-write > summary { cursor: pointer; font-weight: 700; color: var(--red-dark); }
.review-form { margin-top: 14px; display: grid; gap: 4px; max-width: 560px; }
.star-input { border: 0; padding: 0; margin: 0; }
.star-input legend { font-weight: 600; margin-bottom: 6px; }
.star-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-row label { font-size: 2rem; line-height: 1; color: #d9d4d4; cursor: pointer; padding: 0 2px; }
.star-row input:checked ~ label, .star-row label:hover, .star-row label:hover ~ label { color: var(--star); }
.star-row input:focus-visible + label { outline: 3px solid var(--star); outline-offset: 2px; border-radius: 6px; }
.review-signin { margin: 8px 0 0; }

/* ---- FAQ and blog ---- */
.faq-wrap { max-width: 860px; }
.faq-group h2 { margin: 28px 0 10px; font-size: 1.2rem; }
.faq { border: 1px solid var(--line); border-left: 4px solid var(--star); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.faq > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: '+'; float: right; color: var(--red-dark); font-size: 1.3rem; line-height: 1; }
.faq[open] > summary::after { content: '–'; }
.faq-answer { padding: 0 18px 14px; }
.faq-answer p:first-child { margin-top: 0; }
.mine-q { border-top: 1px solid var(--line); padding-top: 10px; }
.mine-a { white-space: pre-line; background: #faf5f5; border-radius: 10px; padding: 10px 14px; }
.post-list { display: grid; gap: 16px; max-width: 820px; }
.post-card { border: 1px solid var(--line); border-left: 4px solid var(--star); border-radius: 14px; padding: 18px 20px; background: #fff; }
.post-card h2 { font-size: 1.25rem; margin: 0 0 4px; }
.post-card .more { font-weight: 700; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose p, .prose li { line-height: 1.7; }

/* ---- Study schedule ---- */
.sched-add { display: grid; grid-template-columns: 170px 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
@media (max-width: 760px) { .sched-add { grid-template-columns: minmax(0, 1fr); } }
.sched-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.sched-item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; }
.sched-item.done { opacity: 0.6; text-decoration: line-through; }
.sched-item.late { border-left: 4px solid var(--star); }
.sched-check { display: flex; gap: 10px; align-items: center; flex: 1 1 240px; }
.sched-tools { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.sched-tools > summary { cursor: pointer; font-weight: 700; }
.day-pick { display: flex; flex-wrap: wrap; gap: 8px 14px; }

/* ---- Study room ---- */
.room { display: grid; grid-template-columns: 270px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .room { grid-template-columns: minmax(0, 1fr); } }
.room-side, .room-main { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px; }
.room-list, .here-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.room-link { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 0.93rem; }
.room-link:hover { background: #faf1f1; }
.room-link.on { background: var(--star); color: #fff; font-weight: 700; }
.room-n { background: #fde8e8; color: var(--red-dark); border-radius: 99px; padding: 0 8px; font-size: 0.8rem; font-weight: 700; }
.room-link.on .room-n { background: #fff; }
.here-list li { font-size: 0.9rem; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.room-rules { background: #faf5f5; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.chat-log { height: 460px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #fcfbfb; }
.chat-log[data-empty]::before { content: attr(data-empty); color: var(--ink-3); margin: auto; }
.day-divider { text-align: center; font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.msg { max-width: 85%; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; }
.msg.mine { align-self: flex-end; background: #fdf0f0; border-color: #f4cccc; }
.msg-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; font-size: 0.86rem; }
.msg-body { margin-top: 2px; overflow-wrap: anywhere; }
.badge { display: inline-block; border-radius: 99px; padding: 0 8px; font-size: 0.72rem; font-weight: 700; background: #eee; color: #444; }
.badge.current { background: #fde8e8; color: var(--red-dark); }
.badge.alumni { background: #e6f4ea; color: #14532d; }
.badge.future { background: #eef2ff; color: #3730a3; }
.badge.host { background: var(--star); color: #fff; }
.here-list .badge { width: 10px; height: 10px; padding: 0; align-self: center; }
.chat-form { display: flex; gap: 10px; margin-top: 10px; align-items: end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 54px; }
.focus-time { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--red-dark); }
.room-side h2.h4 { font-size: 1rem; margin: 0 0 8px; }
.sched-item .sched-check { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 400; width: auto; }
.sched-item .sched-check input, .day-pick input { width: auto; margin: 0; flex: none; }
.sched-item > span.muted { margin-left: auto; }
.day-pick label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; }

/* ---- Practice tools ---- */
.tool-wrap { max-width: 960px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tool-card { padding: 22px; }
.tool-problem figure, .tool-problem svg { max-width: 100%; }
.tool-inputs { margin: 14px 0; display: grid; gap: 10px; }
.tool-field label { display: block; font-weight: 600; margin-bottom: 4px; }
.tool-field select, .tool-field input { max-width: 420px; }
.tool-grid { overflow-x: auto; }
.tool-grid table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tool-grid th, .tool-grid td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: middle; }
.tool-grid thead th { background: var(--paper-2); }
.tool-grid tbody th { font-weight: 500; min-width: 220px; }
.tool-feedback:empty { display: none; }
.tool-feedback { margin-top: 14px; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--line); }
.tool-feedback.ok { background: var(--ok-bg); border-color: #bbf7d0; }
.tool-feedback.bad { background: var(--bad-bg); border-color: #fecaca; }
.tool-feedback p { margin: 4px 0; }
.prose-tool { max-width: 760px; margin-top: 28px; }
.prose-tool h2 { margin-top: 1.4em; font-size: 1.3rem; }
.prose-tool p, .prose-tool li { line-height: 1.7; }
.tool-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tool-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--star); transition: transform 0.15s, box-shadow 0.15s; }
.tool-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-link .btn { align-self: flex-start; margin-top: auto; }

.after-part { margin-bottom: 18px; }

/* ---- Roadmap, cost, corporate, assistant ---- */
.road { display: grid; gap: 12px; }
.road-step { border-left: 4px solid var(--star); }
.road-step p { margin: 4px 0 0; }
.interest { margin-top: 16px; }
.interest-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 10px; }
.interest-row .field { flex: 1 1 220px; margin: 0; }
.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.cost-card { border-top: 4px solid var(--star); }
.cost-total { font-size: 2rem; font-weight: 800; color: var(--red-dark); margin: 6px 0 10px; }
.corp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .corp-grid { grid-template-columns: minmax(0, 1fr); } }
.asst-log { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.asst-msg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; max-width: 92%; }
.asst-msg.user { align-self: flex-end; background: #fdf0f0; border-color: #f4cccc; }
.asst-msg.error { border-color: #fecaca; background: var(--bad-bg); }
.sprint-banner { margin: 8px 0; }
@media print {
  .site-header, .site-footer, .no-print, .page-hero + .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { background: none !important; color: #000 !important; padding: 0 0 12px; }
  .page-hero h1, .page-hero p { color: #000 !important; }
  .prose-tool { max-width: none; }
  a { color: #000; text-decoration: none; }
}

/* ---- Schedule ---- */
.cal-title { min-width: 150px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 12px; }
.cal-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.cal-cell { min-height: 96px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell.empty { background: var(--paper-2); }
.cal-day { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.cal-chip { display: block; font-size: 0.74rem; line-height: 1.25; padding: 2px 5px; border-radius: 6px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.unassigned { border-left-style: dashed; background: #f3f4f6; }
.cal-off { font-size: 0.7rem; color: var(--warn); }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.inst-sched > summary { cursor: pointer; }
.inst-editor { margin-top: 12px; }
.avail-days td, .avail-days th { padding: 3px 8px 3px 0; text-align: left; font-weight: 400; }
.avail-days input[type="time"] { width: auto; }
.off-list { margin: 0 0 8px; padding-left: 18px; }
.off-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.off-form .field { margin: 0; }
.cal-box p { margin-top: 0; }
@media (max-width: 700px) { .cal-cell { min-height: 64px; } .cal-chip { white-space: normal; } }

.day-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 18px; }
.day-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-time label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; min-width: 64px; }
.day-time input[type=checkbox] { width: auto; margin: 0; flex: none; }
.day-time select { width: auto; flex: 1; min-width: 0; }

.sched-block { margin-top: 18px; }
.sched-h { font-size: 1rem; margin: 0 0 8px; color: var(--red-dark); }
.sched-day { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--silver-2); border-radius: 12px; background: #fff; }
.sched-day.today { border-color: var(--star); box-shadow: 0 0 0 3px var(--red-tint); }
.sched-day h3 { margin: 0 0 8px; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sched-day .sched-list { margin: 0; padding: 0; list-style: none; }
.sched-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--silver-2); }
.sched-day .sched-item:first-child { border-top: 0; }
.sched-item .sched-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; }
.sched-item .sched-main { display: flex; flex-direction: column; gap: 3px; }
.sched-item .sched-main > .pill { align-self: flex-start; }
.sched-item .sched-detail { display: block; line-height: 1.45; }
.sched-item .sched-actions { display: flex; gap: 8px; align-items: center; }
.sched-item > .small { grid-column: 1 / -1; }
.pill.warn { background: var(--red-tint); color: var(--red-dark); }
.sched-day .sched-item { border: 0; border-top: 1px solid var(--silver-2); border-radius: 0; background: none; padding: 10px 0; }
.sched-day .sched-item:first-child { border-top: 0; }
.sched-item.late { border-left: 0; }
.sched-day .sched-item.late .sched-main strong { color: var(--red-dark); }

.g-card { position: relative; }
.g-sel { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, 0.92); border-radius: 6px; padding: 4px 6px; display: flex; margin: 0; }
.g-sel input { width: auto; margin: 0; }
.g-ai-table textarea { width: 100%; min-width: 260px; font-size: 0.85rem; }
.g-draft { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 14px; align-items: start; padding: 12px; border: 2px solid var(--star); border-radius: 12px; background: var(--red-wash); }
.g-draft img { width: 100%; height: auto; border-radius: 8px; display: block; }
.g-draft-side { display: grid; gap: 8px; }
.g-draft-side label { display: grid; gap: 4px; }
.g-drafts { display: grid; gap: 14px; }
.g-free { display: grid; gap: 10px; max-width: 720px; }
.g-free label { display: grid; gap: 4px; }
@media (max-width: 640px) { .g-draft { grid-template-columns: minmax(0, 1fr); } }
.day-time { flex-wrap: wrap; }
.day-time select + select { margin-left: 4px; }
.extra-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.extra-row input[type=date], .extra-row select { width: auto; }
.skip-chip { display: inline-flex; gap: 4px; align-items: center; }

.drill-chapter { margin: 0 0 28px; }
.drill-chapter h2 { font-size: 1.15rem; margin: 22px 0 6px; }
.drill-chapter h3 { font-size: 0.95rem; margin: 16px 0 6px; color: var(--ink-2); }
.drill-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--silver-2); border-radius: 12px; overflow: hidden; background: #fff; }
.drill-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--silver-2); }
.drill-row:first-child { border-top: 0; }
.drill-main { flex: 1 1 320px; }
.drill-side { display: flex; gap: 12px; align-items: center; }

/* Admin: a vertical menu on the left (a Menu button on small screens). */
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.side-menu { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 6px; border-right: 1px solid var(--red-edge); }
.side-menu button { background: none; border: 0; border-left: 3px solid transparent; text-align: left; font: inherit; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: 0 8px 8px 0; cursor: pointer; width: 100%; }
.side-menu button:hover { background: var(--red-tint); color: var(--red-dark); }
.side-menu button[aria-selected='true'] { color: var(--red-dark); background: var(--red-tint); border-left-color: var(--star); }
.side-head { margin: 14px 0 4px; padding: 0 12px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red-dark); }
.side-toggle { display: none; width: 100%; text-align: left; margin-bottom: 14px; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.admin-main { min-width: 0; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .side-toggle { display: block; }
  .side-menu { display: none; position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--red-edge); padding-bottom: 10px; margin-bottom: 14px; }
  .side-menu.open { display: flex; }
}
.off-request { padding: 10px 0; border-top: 1px solid var(--silver-2); display: grid; gap: 6px; }
.off-request:first-of-type { border-top: 0; }

/* Sortable, filterable tables */
tr[data-f], tr[data-s] { display: none; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: ' \2195'; color: var(--ink-3); font-size: 0.8em; opacity: 0.5; }
th.sortable[aria-sort='ascending']::after { content: ' \25B2'; opacity: 1; color: var(--red-dark); }
th.sortable[aria-sort='descending']::after { content: ' \25BC'; opacity: 1; color: var(--red-dark); }
th.sortable:hover, th.sortable:focus-visible { color: var(--red-dark); }
.table-filter { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; }
.table-filter input { max-width: 320px; }

/* Grades page */
.grade-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.grade-chart { margin: 0; }
.grade-chart svg { width: 100%; height: auto; display: block; }
.grade-chart .g-grid { stroke: var(--silver-2); stroke-width: 1; }
.grade-chart .g-axis { font-size: 11px; fill: var(--ink-3); }
.grade-chart .g-pass { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grade-chart .g-line { fill: none; stroke: var(--star); stroke-width: 2; stroke-linejoin: round; }
.grade-chart .g-dot { fill: var(--star); stroke: #fff; stroke-width: 2; }
.grade-chart .g-hit { fill: transparent; }
.grade-chart .g-pt:hover .g-dot, .grade-chart .g-pt:focus .g-dot { r: 7; }
.grade-chart .g-pt:focus { outline: none; }
.grade-chart .g-pt:focus-visible .g-hit { stroke: var(--red-dark); stroke-width: 2; }
.grade-chart .g-label { font-size: 12px; font-weight: 700; fill: var(--ink); }
.grade-bars { display: grid; gap: 10px; }
.gb-row { display: grid; grid-template-columns: minmax(180px, 2fr) 3fr 52px; gap: 12px; align-items: center; }
.gb-name { display: flex; flex-direction: column; }
.gb-track { position: relative; height: 12px; background: var(--paper-3, #f1f1f3); border-radius: 6px; }
.gb-fill { height: 100%; background: var(--star); border-radius: 0 4px 4px 0; }
.gb-pass { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-2); }
.gb-val { text-align: right; font-weight: 700; }
@media (max-width: 640px) { .gb-row { grid-template-columns: 1fr 52px; } .gb-track { grid-column: 1 / -1; grid-row: 2; } }

/* Admin and teaching screens use the whole window. */
body.wide-app .wrap { max-width: none; padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); }
body.wide-app .site-header .wrap, body.wide-app .site-footer .wrap { max-width: 1240px; }
body.wide-app .side-menu { position: static; max-height: none; overflow: visible; }

/* Record IDs */
td.rid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; }
.rid-tag { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--ink-2); background: var(--paper-3, #f1f1f3); border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: middle; }

.quality-sum, .q-char, #q-live { margin-bottom: 16px; }
.q-char td[rowspan] { vertical-align: top; background: var(--red-wash); }

/* People's names stay on one line. */
.instructor h3, .cert-name, .cert-sign, .person-name { white-space: nowrap; }

.instructor p { max-width: 75ch; }

.class-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--ink-3); }

/* Nicer line breaks everywhere: balanced headings and labels, no single word left alone on a last line. */
h1, h2, h3, h4, .eyebrow, .btn, .chip, .pill, summary, th, figcaption, .lead, .section-head p { text-wrap: balance; }
p, li, td, dd, label, blockquote, .muted { text-wrap: pretty; }

.chip { white-space: nowrap; }

/* Phone fields: country picker (flag, country, dialing code) and the number side by side. The flag font only covers
   flag characters, so Windows (which has no flag emoji) shows real flags and all other text keeps the site font. */
@font-face { font-family: 'Twemoji Country Flags'; src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2'); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; font-display: swap; }
.phone-field { display: flex; gap: 8px; align-items: stretch; flex: 1; min-width: 0; }
.phone-field .phone-country { flex: 0 0 auto; width: 9.5rem; max-width: 45%; font-family: 'Twemoji Country Flags', var(--font); text-overflow: ellipsis; }
.phone-field .phone-country option { font-family: 'Twemoji Country Flags', var(--font); }
.phone-field input { flex: 1; min-width: 0; }
.join-row .phone-field input { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* FAQ lists inside a bordered box: keep the questions and answers off the red edge. */
div.faq > details > summary { padding-left: 22px; }
div.faq > details > p, div.faq > details > ul, div.faq > details > div { padding: 0 22px; }

/* Study plan pacing panel. */
.pace { margin: 0 0 18px; padding: 18px 20px; }
.pace-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: center; margin-bottom: 12px; }
.pace-row strong { font-size: 1.35rem; letter-spacing: -0.02em; }
.pace-status { justify-self: end; }
.pace-bar { height: 10px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.pace-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red-dark), var(--star)); }
@media (max-width: 640px) { .pace-row { grid-template-columns: 1fr 1fr; } .pace-status { justify-self: start; } }

/* Drills: each objective's progress meter and level, and the level filter. */
.drill-progress { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 2px; }
.drill-meter { flex: 0 0 160px; height: 8px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.drill-meter span { display: block; height: 100%; border-radius: 99px; background: var(--ink-3); }
.drill-meter.lv-solid span { background: var(--ok); }
.drill-meter.lv-close span { background: var(--warn); }
.drill-meter.lv-work span { background: var(--bad); }
.lv { font-weight: 700; }
.lv-solid { color: var(--ok); } .lv-close { color: var(--warn); } .lv-work { color: var(--bad); } .lv-new { color: var(--ink-3); }
.drill-stats { margin: 6px 0 14px; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chip-btn { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.chip-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.drill-row[hidden], .drill-section[hidden], .drill-chapter[hidden] { display: none; }

/* Cart: classes, who each seat is for, and the order total. */
.cart-link .cart-count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 5px; border-radius: 99px; background: var(--star); color: #fff; font-size: 0.75rem; font-weight: 700; margin-left: 4px; }
.cart-link[hidden] { display: none; }
.cart-items { display: grid; gap: 14px; margin: 14px 0 18px; }
.cart-item { border: 1px solid var(--line); border-left: 4px solid var(--star); border-radius: 12px; padding: 16px 18px; background: #fff; }
.cart-item.gone { opacity: 0.7; border-left-color: var(--line); }
.cart-item-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.cart-price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.seat-who { border: 0; padding: 0; margin: 12px 0 6px; }
.seat-who legend { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.seat-row { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 8px; margin: 8px 0; }
@media (max-width: 600px) { .seat-row { grid-template-columns: minmax(0, 1fr); } }
.paste-box { margin-top: 8px; display: grid; gap: 6px; }
.cart-code input { max-width: 220px; text-transform: uppercase; }
.cart-summary { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.cart-lines { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.cart-lines td { padding: 8px 6px; border-bottom: 1px solid var(--silver-2); vertical-align: top; }
.cart-lines .num { text-align: right; white-space: nowrap; }
.cart-lines tfoot td { border-bottom: 0; }
.cart-total { font-size: 1.25rem; }
.order { margin: 12px 0; }

/* Bug button (admins only) on the right edge of every page, and its report form. */
.bug-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999; width: 46px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 26px 0 0 26px; background: var(--star); color: #fff; cursor: pointer; box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.3); transition: width 0.15s var(--ease), background 0.15s; }
.bug-fab:hover, .bug-fab:focus-visible { width: 54px; background: var(--red-dark); }
.bug-fab.busy { opacity: 0.6; cursor: progress; }
.bug-dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border: 0; border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.bug-dlg::backdrop { background: rgba(10, 10, 12, 0.6); }
.bug-kind { display: flex; gap: 18px; margin: 10px 0 6px; }
.bug-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.bug-thumbs figure { margin: 0; max-width: 200px; font-size: 0.8rem; }
.bug-thumbs img { max-width: 200px; max-height: 140px; border: 1px solid var(--line); border-radius: 8px; display: block; }
.bug-msg { border-left: 3px solid var(--line); padding: 4px 12px; margin: 10px 0; }
.bug-msg.claude { border-color: var(--star); }
@media print { .bug-fab { display: none; } }

/* Sample agendas: a wide table, one row per class format, one column per day. On a phone each row becomes a card. */
.agenda-wide { width: min(1120px, calc(100vw - 48px)); margin: 18px 0 28px; position: relative; left: 50%; transform: translateX(-50%); }
.agenda-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.agenda-table th, .agenda-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; overflow-wrap: break-word; hyphens: manual; }
.agenda-table thead th { background: var(--red-tint); color: var(--red-dark); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.agenda-table thead th:first-child, .agenda-table tbody th { width: 12.5rem; }
.agenda-table tbody th { background: var(--paper-2); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.agenda-table tbody th strong { display: block; color: var(--red-dark); font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.agenda-table tbody th span { display: block; color: var(--ink-3); font-size: 0.86rem; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.agenda-table tbody tr:last-child th, .agenda-table tbody tr:last-child td { border-bottom: 0; }
.agenda-table tbody tr:nth-child(even) td { background: #fcfcfd; }
.agenda-table td + td, .agenda-table th + td { border-left: 1px solid var(--silver-2); }
.agenda-table td.none { color: var(--ink-3); text-align: center; }
@media (max-width: 820px) {
  .agenda-wide { width: 100%; left: 0; transform: none; }
  .agenda-table, .agenda-table tbody, .agenda-table tr, .agenda-table th, .agenda-table td { display: block; width: auto !important; }
  .agenda-table thead { position: absolute; left: -9999px; }
  .agenda-table tbody tr { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .agenda-table tbody tr:last-child { border-bottom: 0; }
  .agenda-table td { border: 0 !important; padding: 6px 16px 6px 5.5em; position: relative; background: none !important; }
  .agenda-table td::before { content: attr(data-label); position: absolute; left: 16px; font-weight: 700; color: var(--red-dark); }
  .agenda-table td.none { display: none; }
}
@media print { .agenda-wide { width: 100%; left: 0; transform: none; } }

/* Flashcards: the list of cards missed in a set. */
.fc-missed { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 10px; }
.fc-missed li { border-left: 3px solid var(--star); padding: 4px 12px; }

/* Study planner */
.sp-wrap { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
#sp, #sp > *, .sp-plan-grid > *, .sp-two > * { min-width: 0; }
#sp { display: grid; gap: 20px; }
.sp-wrap .card { margin: 0; }
.sp-block { margin-bottom: 28px; }
.sp-conf { border: 0; padding: 0; margin: 0 0 14px; }
.sp-conf legend { padding: 0; margin-bottom: 6px; }
.sp-scale { display: flex; gap: 8px; }
.sp-pill { position: relative; }
.sp-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-pill span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-weight: 700; cursor: pointer; }
.sp-pill input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.sp-pill input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.sp-scale-ends { display: flex; justify-content: space-between; max-width: 276px; margin-top: 4px; }
.sp-grid { display: grid; gap: 3px; max-width: 560px; user-select: none; touch-action: none; }
.sp-grid-head, .sp-grid-row { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 3px; align-items: center; }
.sp-grid-head span { text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.sp-hour { font-size: .72rem; color: var(--muted, #6b7280); text-align: right; padding-right: 6px; }
.sp-cell { height: 26px; border: 1px solid var(--line-2); background: #fff; border-radius: 5px; cursor: pointer; padding: 0; }
.sp-cell.on { background: var(--red); border-color: var(--red-dark); }
.sp-cell:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.sp-offs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sp-options .sp-opt { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.sp-options .sp-opt:first-child { border-top: 0; }
.sp-ready-top { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; }
.sp-big { font-size: 1.9rem; line-height: 1.1; }
.sp-stats { margin-bottom: 16px; }
.stat-grid .stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 2px; }
.stat-grid .stat strong { font-size: 1.7rem; }
.stat-grid .stat span { color: var(--ink-2); font-size: .9rem; }
.sp-summary { display: grid; gap: 16px; }
.sp-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-ch-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-risks, .sp-mocks { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.sp-mocks { list-style: none; padding: 0; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sp-plan-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.sp-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.sp-day { min-height: 46px; border-radius: 8px; border: 1px solid transparent; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; font-weight: 500; color: var(--ink); padding: 2px; }
.sp-day.blank { background: none; }
.sp-day .n { font-weight: 700; }
.sp-day .m { font-size: .62rem; color: var(--ink-2); }
.sp-day.has { background: #fff; border-color: var(--line-2); cursor: pointer; }
.sp-day.mock { background: var(--red-tint); border-color: var(--red); }
.sp-day.light { background: var(--ok-bg); }
.sp-day.done { opacity: .6; }
.sp-day.exam { background: var(--ink); color: #fff; }
.sp-day.exam .m { color: #fff; }
.sp-day.off { text-decoration: line-through; opacity: .55; }
.sp-day.today { box-shadow: inset 0 0 0 2px var(--red); }
.sp-day.sel { outline: 3px solid var(--ink); }
.sp-week { margin-bottom: 14px; }
.sp-week > summary { cursor: pointer; padding: 8px 0; }
.sp-session { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 10px 0; }
.sp-session > header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.sp-session.done { opacity: .65; }
.sp-session.late { border-color: var(--red); }
.sp-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.sp-check input { margin-top: 4px; width: 18px; height: 18px; }
.sp-time { color: var(--ink-2); font-size: .88rem; }
.sp-acts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.sp-act { border-top: 1px solid var(--line); padding-top: 10px; }
.sp-act.done .sp-detail, .sp-act.done strong { text-decoration: line-through; color: var(--ink-2); }
.sp-act-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-act-top .sp-check { flex: 1 1 260px; }
.sp-detail { margin: 6px 0 4px 28px; }
.sp-success { margin: 0 0 6px 28px; font-size: .92rem; color: var(--ink-2); }
.sp-act-actions { margin-left: 28px; }
.sp-break { list-style: none; text-align: center; font-size: .82rem; color: var(--ink-2); border-top: 1px dashed var(--line-2); padding-top: 8px; }
.sp-setup-sum { cursor: pointer; font-weight: 700; padding: 10px 0; }
@media (max-width: 860px) { .sp-plan-grid, .sp-two { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .site-header, .site-footer, .dash-head, .sp-actions, .sp-setup, .sp-cal, #sp-log-card, .sp-act-actions, #sp-msg, .alert .btn { display: none !important; }
  .sp-plan-grid { display: block; }
  .sp-session { break-inside: avoid; border-color: #999; }
  body { background: #fff; }
}

.sitemap-list { list-style: none; margin: 0; padding: 0; columns: 2 280px; }
.sitemap-list li { padding: 5px 0; break-inside: avoid; }
.sp-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.sp-tool input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-tool span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 99px; cursor: pointer; background: #fff; font-weight: 600; }
.sp-tool input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sp-tool input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.sp-key { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; display: inline-block; }
.sp-key.on, .sp-cell.on { background: #16a34a; border-color: #15803d; }
.sp-key.busy, .sp-cell.busy { background: repeating-linear-gradient(45deg, #9ca3af, #9ca3af 3px, #d1d5db 3px, #d1d5db 6px); border-color: #6b7280; }
.sp-grid { max-width: 640px; }
.sp-grid-row .sp-cell { height: 22px; }
.sp-cal-grid { gap: 6px; }
.sp-day { min-height: 92px; justify-content: flex-start; align-items: stretch; padding: 6px; text-align: left; gap: 2px; }
.sp-day .n { font-size: .95rem; }
.sp-day .m { font-size: .72rem; font-weight: 700; }
.sp-day .t { font-size: .7rem; color: var(--ink-2); font-weight: 500; line-height: 1.25; white-space: nowrap; }
.sp-day.exam .t { color: #fff; }
@media (max-width: 700px) { .sp-day { min-height: 56px; padding: 3px; } .sp-day .t { display: none; } }

/* Links the site adds to the first mention of a term */
a.autolink { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: inherit; }
a.autolink:hover { color: var(--red-dark); }
a.autolink.ext::after { content: ' ↗'; font-size: .8em; color: var(--red-dark); }

.view-banner { background: #1e3a8a; color: #fff; padding: 10px 16px; text-align: center; font-size: .92rem; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 60; }
.footer-grid h2.foot-h { font-family: inherit; font-weight: 700; margin-top: 0; }
.course-dates .eyebrow { color: var(--red-dark); }
.footer-grid h2.foot-h { font-size: 0.76rem; color: #f87171; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.instructor h2 { font-size: 1.5rem; letter-spacing: -0.015em; font-weight: 700; white-space: nowrap; }
.toolbar { flex-wrap: wrap; }
.toolbar label select, .toolbar select { max-width: 100%; }
@media (max-width: 600px) { .toolbar label { flex-wrap: wrap; } .toolbar select { min-width: 0; width: 100%; } }
.email-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; background: #fff; }
.email-tpl summary { cursor: pointer; }