/* =====================================================================
   GG Team Hub — command-deck design system (shared visual language with
   tracker.armasourcing.com/me.html). Dark by default, light via
   :root[data-theme="light"]. Every color reads from a token so the two
   themes stay in lockstep. No em/en dashes in any UI copy.
   ===================================================================== */
:root {
  /* ---- dark (default) ---- */
  --canvas:#080D1A; --canvas-2:#0B1120;
  --panel:#111A2E; --panel-2:#0E1626;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#EAEEF7; --ink-dim:#AEB8CE; --mute:#6E7A98; --faint:#3A465F;
  --teal:#2DD4BF; --teal-hi:#5EEAD4; --teal-deep:#14B8A6; --teal-soft:rgba(45,212,191,.13);
  --gold:#F5C842; --gold-hi:#FFDD6B; --gold-2:#E7B626; --gold-soft:rgba(245,200,66,.15); --gold-ink:#FFDD6B;
  --good:#34D399; --good-soft:rgba(52,211,153,.14);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.14);
  --bad:#F87171;  --bad-soft:rgba(248,113,113,.13);
  --info:#7DA8FF; --info-soft:rgba(125,168,255,.14);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  --sh:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -24px rgba(0,0,0,.8);
  --sh-pop:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 70px -20px rgba(0,0,0,.9);
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --hero-grad:linear-gradient(160deg, #12203A, #0A1120 62%);
  --canvas-glow:radial-gradient(1200px 620px at 85% -10%, rgba(45,212,191,.10), transparent 60%),
                radial-gradient(1000px 520px at 4% 112%, rgba(245,200,66,.05), transparent 55%);
  /* accent aliases so component rules never hardcode a hue */
  --accent:var(--teal); --accent-hi:var(--teal-hi); --accent-soft:var(--teal-soft);
  --on-accent:#03110F;
  color-scheme:dark;
}
:root[data-theme="light"] {
  --canvas:#F4F6FB; --canvas-2:#EDF1F8;
  --panel:#FFFFFF; --panel-2:#F7F9FD;
  --glass:rgba(16,32,64,.02); --glass-2:rgba(16,32,64,.045);
  --line:rgba(12,28,58,.10); --line-2:rgba(12,28,58,.16);
  --ink:#0F1B33; --ink-dim:#3D4E6C; --mute:#6B7896; --faint:#B7C0D4;
  --teal:#0E9E8E; --teal-hi:#0B7F73; --teal-deep:#0C8A7C; --teal-soft:rgba(14,158,142,.12);
  --gold:#B98900; --gold-hi:#8A6600; --gold-2:#B98900; --gold-soft:rgba(214,158,10,.16); --gold-ink:#8A6600;
  --good:#0E9E6E; --good-soft:rgba(14,158,110,.13);
  --warn:#B26B00; --warn-soft:rgba(214,158,10,.16);
  --bad:#D1444A;  --bad-soft:rgba(209,68,74,.10);
  --info:#2B62D9; --info-soft:rgba(43,98,217,.10);
  --sh:0 1px 2px rgba(16,24,40,.05), 0 12px 28px -18px rgba(16,24,40,.25);
  --sh-pop:0 4px 14px -4px rgba(16,24,40,.14);
  --hero-grad:linear-gradient(160deg, #E7EEFA, #FAFCff 65%);
  --canvas-glow:radial-gradient(1100px 560px at 88% -12%, rgba(14,158,142,.10), transparent 60%),
                radial-gradient(900px 480px at 2% 114%, rgba(185,137,0,.06), transparent 55%);
  --on-accent:#FFFFFF;
  color-scheme:light;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--ink); background:var(--canvas-glow), var(--canvas); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:15px; line-height:1.55; letter-spacing:-.008em; min-height:100vh;
}
a { color:var(--accent-hi); text-decoration:none; }
a:hover { text-decoration:underline; }
.mono, .num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* skip link for keyboard/screen-reader users */
.skip-link { position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:10px; font-weight:700; }
.skip-link:focus { left:12px; text-decoration:none; }
.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; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--faint); border-radius:99px; border:3px solid var(--canvas); }

/* ---------- shell ---------- */
.shell { display:flex; min-height:100vh; }
.sidebar {
  width:244px; flex:0 0 244px; background:var(--panel-2);
  border-right:1px solid var(--line); padding:18px 14px;
  display:flex; flex-direction:column; gap:5px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; padding:4px 8px 14px; }
.brand .dot, .brand .brand-owl { width:32px; height:32px; border-radius:9px; flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line-2), 0 8px 22px -8px rgba(45,212,191,.4); }
.brand .dot { background:linear-gradient(180deg,var(--teal),var(--teal-deep)); color:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.brand .brand-owl { background:#fff; }
.brand small { display:block; font-size:10px; font-weight:600; color:var(--mute); letter-spacing:.3px; }
.nav-sec { font-size:9px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--mute); padding:14px 12px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600;
  color:var(--ink-dim); padding:9px 12px; border-radius:10px; transition:background .12s, color .12s; }
.nav-item:hover { background:var(--glass-2); color:var(--ink); text-decoration:none; }
.nav-item.active { background:var(--teal-soft); color:var(--teal-hi); font-weight:700; }
.nav-item .ico { width:18px; text-align:center; }
.sidebar .spacer { flex:1; }
.userchip { border-top:1px solid var(--line); padding:12px 8px 2px; font-size:12.5px; }
.userchip .nm { font-weight:700; }
.userchip .em { color:var(--mute); font-size:11px; word-break:break-all; }
.userchip form { margin-top:8px; display:inline-block; }
.theme-toggle { margin-top:8px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; }

.main { flex:1; min-width:0; padding:24px 28px 90px; max-width:1180px; }
.pagehead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.datechip { border:1px solid var(--line-2); border-radius:10px; padding:7px 12px;
  font-size:12.5px; color:var(--ink-dim); background:var(--glass); }
.eyebrow, .sec-eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.sec-eyebrow { margin:26px 2px 12px; display:block; }

/* ---------- hero / command deck ---------- */
.hero { position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--hero-grad); border:1px solid var(--line); box-shadow:var(--sh);
  padding:24px 28px; margin-bottom:18px; }
.hero::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(440px 230px at 92% 6%, var(--teal-soft), transparent 70%); }
.hero > * { position:relative; z-index:1; }
.hero h2 { font-weight:800; letter-spacing:-.02em; margin:6px 0 4px; }
.hero p { font-size:13px; color:var(--ink-dim); line-height:1.6; max-width:60ch; }
.hero-owl { position:absolute; right:22px; top:22px; width:60px; height:60px; border-radius:14px;
  background:rgba(245,247,239,.92); border:1px solid var(--line-2); padding:5px; z-index:1; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* hero progress dial + copy */
.hero-ring { display:flex; align-items:center; gap:28px; padding-right:70px; }
.ring-copy { flex:1; min-width:0; }
.ring-copy h2 { font-size:20px; }
/* conic progress dial driven by --pct (0-100) */
.ring { position:relative; width:132px; height:132px; flex:0 0 auto; border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--pct,0) * 1%), var(--glass-2) 0);
  display:grid; place-items:center; }
.ring::before { content:''; position:absolute; inset:11px; border-radius:50%; background:var(--panel-2); }
.ring-in { position:relative; z-index:1; text-align:center; display:grid; gap:1px; }
.ring-pct { font-family:var(--mono); font-size:27px; font-weight:700; line-height:1; color:var(--teal-hi); }
.ring-lbl { font-size:9.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.ring-steps { display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 2px; }
.ring-step { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); }
.ring-step.done { color:var(--good); }
.ring-step .tick { width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center;
  font-size:11px; flex:none; border:1px solid var(--line-2); color:var(--mute); }
.ring-step.done .tick { background:var(--good-soft); color:var(--good); border-color:transparent; }
@media (max-width:640px) { .hero-ring { flex-direction:column; align-items:flex-start; gap:16px; padding-right:0; } }

/* start-a-call launch tiles */
.launch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; }
.launch { display:flex; align-items:center; gap:12px; padding:14px 16px; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh); transition:transform .15s, box-shadow .2s; }
.launch:hover { transform:translateY(-2px); box-shadow:var(--sh-pop); text-decoration:none; }
.launch .l-ico { font-size:22px; flex:0 0 auto; }
.launch .l-name { font-size:14.5px; font-weight:700; display:block; }
.launch .l-when { font-size:11.5px; color:var(--mute); display:block; margin-top:1px; }

/* golden-rules panel */
.rules-panel { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh); padding:6px 20px; }
.rule-row { display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.rule-row:last-child { border-bottom:0; }
.rule-row .r-num { width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal-hi); font-family:var(--mono); font-size:12px; font-weight:700; }
.rule-row .r-head { font-size:14.5px; font-weight:700; }
.rule-row .r-body { font-size:13px; color:var(--ink-dim); line-height:1.55; margin-top:2px; }
.cats { display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- search ---------- */
.search-wrap { position:relative; margin:2px 0 10px; }
.search-wrap input { width:100%; }
.search-pop { position:absolute; top:44px; left:0; right:0; background:var(--panel); border:1px solid var(--line-2);
  border-radius:12px; box-shadow:var(--sh-pop); z-index:40; max-height:340px; overflow-y:auto; display:none; }
.search-pop.open { display:block; }
.search-hit { display:block; padding:9px 12px; border-bottom:1px solid var(--line); }
.search-hit:last-child { border-bottom:0; }
.search-hit:hover { background:var(--glass-2); text-decoration:none; }
.search-hit .k { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.search-hit .t { font-size:13px; font-weight:700; color:var(--ink); }
.search-hit .s { font-size:11.5px; color:var(--ink-dim); }

/* ---------- cards / grids ---------- */
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.card { background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:18px 20px; }
.card-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mute);
  font-weight:800; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.statnum { font-size:30px; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.statnum small { font-size:13px; font-weight:600; color:var(--mute); }
.statcap { font-size:12px; color:var(--ink-dim); margin-top:4px; line-height:1.55; }

/* ---------- pills / badges ---------- */
.pill { display:inline-block; padding:3px 11px; border-radius:99px; font-size:10.5px;
  font-weight:800; letter-spacing:.04em; }
.pill.good { background:var(--good-soft); color:var(--good); }
.pill.done { background:var(--teal-soft); color:var(--teal-hi); }
.pill.bad { background:var(--bad-soft); color:var(--bad); }
.pill.warn { background:var(--warn-soft); color:var(--gold-ink); }
.pill.mute { background:var(--glass-2); color:var(--mute); }
.pill.gold { background:var(--gold-soft); color:var(--gold-ink); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:0;
  padding:10px 18px; border-radius:11px; font-size:12.5px; font-weight:700; font-family:inherit;
  color:var(--on-accent); background:linear-gradient(180deg, var(--teal), var(--teal-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(45,212,191,.5);
  transition:filter .12s, transform .08s; }
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }
.btn.secondary { background:var(--glass-2); color:var(--ink); border:1px solid var(--line-2); box-shadow:none; font-weight:600; }
.btn.secondary:hover { border-color:var(--line-2); filter:none; background:var(--glass); }
.btn.ghost { background:transparent; color:var(--ink-dim); border:1px solid var(--line); box-shadow:none; font-weight:600; }
.btn.danger { background:var(--bad); color:#2B0606; box-shadow:none; }
.btn.sm { padding:6px 12px; font-size:11.5px; border-radius:9px; }

/* ---------- forms ---------- */
input[type=text], input[type=email], select, textarea {
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
  padding:10px 13px; border-radius:10px; font-size:13px; font-family:inherit; width:100%;
  transition:border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color:var(--mute); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select { appearance:none; cursor:pointer; }
option { background:var(--panel); color:var(--ink); }
label.f { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); margin:12px 0 5px; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; }
th { padding:11px 14px; text-align:left; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mute); background:var(--glass); }
td { padding:12px 14px; font-size:13.5px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
tbody tr:hover { background:var(--glass); }
td .mono, .mono { font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.emptyval { color:var(--mute); }

/* ---------- alerts ---------- */
.alert { border-radius:12px; padding:12px 15px; font-size:13px; font-weight:600; margin-bottom:14px; border:1px solid transparent; }
.alert.good { background:var(--good-soft); color:var(--good); border-color:var(--good-soft); }
.alert.bad { background:var(--bad-soft); color:var(--bad); }
.alert.warn { background:var(--warn-soft); color:var(--gold-ink); }
.alert.info { background:var(--info-soft); color:var(--info); }

/* ---------- playbook ---------- */
.fact { padding:13px 0; border-bottom:1px solid var(--line); }
.fact:last-child { border-bottom:0; }
.fact .f-fact { font-size:15px; font-weight:700; line-height:1.45; }
.fact .f-detail { font-size:13.5px; color:var(--ink-dim); margin-top:4px; line-height:1.6; }
.fact .f-flag { margin-left:6px; }
.fact.big { padding:16px 0; }
.fact.big .f-fact { font-size:16.5px; }
.fact.big .f-detail { font-size:14px; }
.qs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)); gap:12px; }
.qs-tile { display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh); padding:16px 17px;
  text-decoration:none; color:inherit; transition:transform .15s, box-shadow .2s; }
.qs-tile:hover { transform:translateY(-2px); box-shadow:var(--sh-pop); text-decoration:none; }
.qs-value { font-size:29px; font-weight:700; color:var(--teal-hi); font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.qs-label { font-size:13.5px; font-weight:700; }
.qs-detail { font-size:12px; color:var(--ink-dim); line-height:1.5; }
.sec-card { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .2s; }
.sec-card:hover { transform:translateY(-2px); box-shadow:var(--sh-pop); text-decoration:none; }
.sec-card .sec-title { font-size:15px; font-weight:700; }
.sec-card .sec-count { font-size:12px; color:var(--mute); }

/* ---------- scripts ---------- */
.script-body { font-size:14px; line-height:1.75; white-space:pre-wrap; }
.sc-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--mute); margin:12px 0 14px; align-items:center; }
.sc-legend .dot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:baseline; }
.sc-legend .dot.say { background:var(--teal); }
.sc-legend .dot.branch { background:var(--gold); }
.sc-legend .dot.note { background:var(--mute); }
.sc-legend .blank { display:inline-block; height:12px; border-bottom:2px dotted var(--line-2); vertical-align:middle; }
.sc-coach { margin:0 0 14px; font-size:12.5px; }
.sc-coach summary { cursor:pointer; color:var(--ink-dim); font-weight:700; }
.sc-coach > div { margin-top:8px; color:var(--ink-dim); line-height:1.6; }
.script-flow { display:flex; flex-direction:column; gap:8px; }
.sc-block { padding:11px 14px; border-radius:11px; font-size:14px; line-height:1.65; white-space:pre-wrap; border-left:3px solid transparent; }
.sc-block.say { background:var(--teal-soft); border-left-color:var(--teal); }
.sc-block.branch { background:var(--gold-soft); border-left-color:var(--gold); color:var(--ink); }
.sc-block.note { background:var(--glass-2); border-left-color:var(--mute); color:var(--ink-dim); font-size:13px; }
.sc-block .blank { display:inline-block; min-width:44px; border-bottom:2px dotted var(--line-2); }

/* ---------- checklist runtime ---------- */
.ck-group { margin-bottom:16px; }
.ck-group h3 { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mute); font-weight:800; margin-bottom:8px; }
.ck-item { display:flex; gap:13px; align-items:flex-start; padding:13px 15px;
  border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--glass); cursor:pointer; }
.ck-item:hover { background:var(--glass-2); }
.ck-item input { width:19px; height:19px; margin-top:2px; accent-color:var(--teal); flex:0 0 auto; }
.ck-item .lbl { font-size:15px; font-weight:700; line-height:1.4; }
.ck-item .dtl { font-size:13px; color:var(--ink-dim); margin-top:4px; line-height:1.55; padding-left:10px; border-left:2px solid var(--teal-soft); }
.ck-item.checked { background:var(--teal-soft); border-color:var(--teal-soft); }
.ck-req { color:var(--bad); font-weight:800; }
.ck-bar { position:sticky; bottom:0; background:var(--panel); border:1px solid var(--line-2);
  border-radius:14px; box-shadow:var(--sh-pop); padding:12px 16px; display:flex; gap:14px;
  align-items:center; justify-content:space-between; margin-top:16px; flex-wrap:wrap; }
.ck-count { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- training ---------- */
.phase-head { display:flex; align-items:center; gap:10px; margin:22px 0 10px; }
.phase-head h2 { font-size:16px; font-weight:800; }
.mod { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); margin-bottom:8px; transition:background .12s; }
.mod:hover { background:var(--glass-2); text-decoration:none; }
.mod .m-title { font-size:14px; font-weight:700; color:var(--ink); }
.mod .m-sub { font-size:11.5px; color:var(--mute); margin-top:2px; }
.mat { display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:7px; background:var(--glass); }
.mat:hover { background:var(--glass-2); text-decoration:none; }
.mat .ico { width:20px; text-align:center; }

/* progress ring (home / training) */
.ring { position:relative; display:inline-grid; place-items:center; }
.ring svg { transform:rotate(-90deg); display:block; }
.ring-center, .ring-in { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-pct { font-family:var(--mono); font-size:24px; font-weight:700; }
.ring-lbl { font-size:10px; color:var(--mute); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.ring-steps { display:flex; flex-direction:column; gap:9px; }
.ring-step { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-dim); }
.ring-step .tick { width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; flex:none; border:1px solid var(--line-2); color:var(--mute); }
.ring-step.done .tick { background:var(--good-soft); color:var(--good); border-color:transparent; }
.rules-panel { display:flex; flex-direction:column; gap:2px; }
.rule-row { padding:11px 0; border-bottom:1px solid var(--line); }
.rule-row:last-child { border-bottom:0; }
.launch-grid { display:flex; flex-wrap:wrap; gap:8px; }
.cats { display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- quiz ---------- */
.qq { margin-bottom:18px; }
.qq .qtext { font-size:14.5px; font-weight:700; margin-bottom:9px; }
.qopt { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:6px; background:var(--glass); cursor:pointer; font-size:14px; }
.qopt:hover { background:var(--glass-2); }
.qopt input { accent-color:var(--teal); margin-top:2px; }
.qres { padding:12px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:9px; }
.qres.right { background:var(--good-soft); border-color:var(--good-soft); }
.qres.wrong { background:var(--bad-soft); border-color:var(--bad-soft); }
.qres .exp { font-size:12.5px; color:var(--ink-dim); margin-top:5px; line-height:1.55; }

/* ---------- grading ---------- */
.crit { padding:12px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--glass); }
.crit .c-name { font-size:14px; font-weight:700; }
.crit .c-desc { font-size:12px; color:var(--ink-dim); margin:3px 0 8px; line-height:1.55; }
.crit .anchors { font-size:11.5px; color:var(--mute); margin-bottom:8px; line-height:1.55; }
.crit .opts { display:flex; gap:8px; }
.crit .opts label { flex:1; text-align:center; border:1px solid var(--line-2); border-radius:9px;
  padding:8px 4px; font-size:12px; font-weight:700; cursor:pointer; background:var(--glass); }
.crit .opts input { display:none; }
.crit .opts label:has(input:checked) { background:var(--teal-soft); border-color:var(--teal); color:var(--teal-hi); }

/* recent-grades / questions rows */
.r-head { font-weight:700; }
.r-body { color:var(--ink-dim); }
.l-ico { width:20px; text-align:center; }
.l-name { font-weight:700; }
.l-when { color:var(--mute); font-size:11.5px; }

/* ---------- login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:400px; background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-pop); padding:32px; }
.login-card h1 { font-size:19px; font-weight:800; margin:14px 0 4px; }
.login-card p { font-size:13px; color:var(--ink-dim); line-height:1.6; margin-bottom:16px; }

/* ---------- assistant chat (Hoot) ---------- */
.chat-fab { position:fixed; right:22px; bottom:22px; z-index:70; display:inline-flex;
  align-items:center; gap:8px; color:var(--on-accent); border:0; border-radius:99px;
  padding:9px 18px 9px 9px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,var(--teal),var(--teal-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -8px rgba(45,212,191,.55); }
.chat-fab:hover { filter:brightness(1.08); }
.chat-fab img { width:32px; height:32px; border-radius:50%; background:#fff; display:block; }
body:has(.ck-bar) .chat-fab { bottom:96px; }
body:has(.ck-bar) .chat-panel { bottom:160px; }
.chat-panel { position:fixed; right:22px; bottom:86px; z-index:71; width:390px; max-width:calc(100vw - 28px);
  height:520px; max-height:calc(100vh - 120px); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-pop); display:none; flex-direction:column; overflow:hidden; }
.chat-panel.open { display:flex; }
.chat-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--glass); }
.chat-head > span { flex:1; min-width:0; }
.chat-head strong { font-size:14.5px; display:block; }
.chat-head small { font-size:11px; color:var(--mute); display:block; }
.chat-head-avatar { width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--line-2); flex:0 0 auto; }
.chat-close { border:0; background:none; font-size:15px; cursor:pointer; color:var(--mute); width:30px; height:30px; border-radius:8px; }
.chat-close:hover { background:var(--glass-2); color:var(--ink); }
.chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.chat-msg { max-width:100%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word; }
.chat-msg.user { align-self:flex-end; background:linear-gradient(180deg,var(--teal),var(--teal-deep)); color:var(--on-accent); border-bottom-right-radius:4px; max-width:88%; }
.chat-msg.bot { background:var(--glass-2); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg.bot.err { background:var(--bad-soft); color:var(--bad); }
.chat-msg.bot b, .chat-msg.bot strong { color:var(--teal-hi); }
.chat-row { display:flex; gap:8px; align-items:flex-end; max-width:92%; }
.chat-avatar { width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--line); flex:0 0 auto; margin-bottom:2px; }
.chat-typing { align-self:flex-start; color:var(--mute); font-size:12.5px; padding:4px 13px; }
.chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat-input input { flex:1; }

/* ---------- responsive ---------- */
.menu-btn { display:none; }
@media (max-width: 900px) {
  .shell { flex-direction:column; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:60; height:100vh;
    transform:translateX(-100%); transition:transform .18s ease; width:264px; }
  .sidebar.open { transform:translateX(0); box-shadow:var(--sh-pop); }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    border:1px solid var(--line-2); border-radius:10px; background:var(--glass); color:var(--ink); cursor:pointer; font-size:16px; }
  .main { padding:16px 14px 90px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns:1fr; }
  .hero-owl { width:46px; height:46px; }
  .scrollx { overflow-x:auto; }
}
@media (min-width: 901px) { .scrollx { overflow-x:auto; } }