/* Veritas Academy v3.7 — themeable. Palette lives in --c-* variables (set by the Appearance picker); defaults = back-office look.
   Loaded after styles.css and app.css; overrides their tokens and components. */
:root {
  --c-bg:#0C0C0E; --c-card:#1A1A1D; --c-accent:#8FA8D6; --c-sel:#232934; --c-btn:#E8EAED;
  --c-rail:color-mix(in srgb,var(--c-bg) 55%,var(--c-card)); --c-top:color-mix(in srgb,var(--c-bg) 92%,var(--c-card)); --c-inset:color-mix(in srgb,var(--c-bg) 70%,var(--c-card));
  --c-text:#EDEEF0; --c-text2:color-mix(in srgb,var(--c-text) 85%,var(--c-bg)); --c-muted:color-mix(in srgb,var(--c-text) 62%,var(--c-bg));
  --c-line:color-mix(in srgb,var(--c-card) 86%,var(--c-text)); --c-line2:color-mix(in srgb,var(--c-card) 78%,var(--c-text));
  --c-accent2:color-mix(in srgb,var(--c-accent) 70%,#FFFFFF); --c-sel-line:color-mix(in srgb,var(--c-sel) 65%,var(--c-accent));
  --c-on-accent:#0C0C0E; --c-btn-text:#0C0C0E;
}
:root, :root[data-theme], :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:var(--c-bg); --surface:color-mix(in srgb,var(--c-text) 4%,transparent); --surface-solid:var(--c-card); --line:color-mix(in srgb,var(--c-text) 12%,transparent); --line-strong:color-mix(in srgb,var(--c-text) 24%,transparent);
  --text:var(--c-text); --muted:var(--c-muted);
  --shell:var(--c-bg); --shell-2:color-mix(in srgb,var(--c-text) 6%,transparent); --shell-line:color-mix(in srgb,var(--c-text) 12%,transparent); --shell-text:var(--c-text); --shell-muted:var(--c-muted);
  --gold:var(--c-accent); --gold-deep:var(--c-accent2); --gold-soft:color-mix(in srgb,var(--c-accent) 12%,transparent); --gold-grad:linear-gradient(90deg,var(--c-accent),var(--c-accent));
  --good:var(--c-accent2); --good-soft:color-mix(in srgb,var(--c-accent2) 12%,transparent); --bad:#F08A7C; --bad-soft:rgba(240,138,124,.12);
  --radius-l:20px; --radius-s:12px;
  --hf:'Figtree','Helvetica Neue',Arial,sans-serif; --bf:'Figtree','Helvetica Neue',Arial,sans-serif;
  --surface:var(--c-card); --line:var(--c-line); --line-strong:var(--c-line2); --shell-line:var(--c-line);
}
html { background:var(--c-bg); }
body {
  background:var(--c-bg);
  font-family:var(--bf);
  color:var(--text);
}
h1,h2,h3 { font-family:var(--hf); font-weight:700; letter-spacing:-.01em; }
::selection { background:color-mix(in srgb,var(--c-accent) 35%,transparent); }
* { scrollbar-color:color-mix(in srgb,var(--c-text) 18%,transparent) transparent; scrollbar-width:thin; }
option { background:var(--c-card); color:var(--c-text); }
.gold-text { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- shell ---------- */
.app { grid-template-rows:72px 1fr; }
.top { background:color-mix(in srgb,var(--c-bg) 62%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line); gap:24px; padding:0 28px; }
.top .logo { height:22px; }
.top .product { font-family:var(--hf); font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--muted); border-left-color:var(--line); }
.switch { background:transparent; border:1px solid var(--line); padding:4px; }
.switch button { padding:7px 16px; font-weight:500; color:var(--muted); }
.switch button[aria-pressed="true"] { background:var(--gold-grad); color:var(--c-on-accent); }
.me { gap:12px; }
.me .pct { color:var(--gold-deep); font-family:var(--hf); font-weight:400; }
.linkbtn { border-color:var(--line-strong); color:var(--text); padding:8px 16px; font-size:13px; font-weight:500; }
.linkbtn:hover { border-color:var(--gold); color:var(--gold-deep); }

.rail { background:color-mix(in srgb,var(--c-bg) 35%,transparent); border-right:1px solid var(--line); padding:18px 12px 60px; }
.rail::after { display:none; }
.rail .group { padding:22px 16px 8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-muted); }
.track::before { left:29px; background:var(--line); }
.track .fill { left:29px; background:var(--c-accent); }
.item { border-radius:12px; padding:10px 14px 10px 20px; color:var(--text); }
.item:hover { background:color-mix(in srgb,var(--c-text) 5%,transparent); }
.item[aria-current="page"] { background:var(--gold-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 45%,transparent); }
.item .lbl small { color:var(--muted); }
.rail .plain .item { padding-left:16px; }
.dot { background:var(--c-bg); border-color:color-mix(in srgb,var(--c-text) 22%,transparent); }
.dot.part { border-color:var(--gold); background:linear-gradient(to top,var(--gold) 50%,var(--c-bg) 50%); }
.dot.done { border-color:var(--gold); background:var(--gold-grad); }

main { padding:48px clamp(20px,5vw,72px) 96px; }
.eyebrow { font-family:var(--bf); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.title { font-weight:700; letter-spacing:-.01em; font-size:clamp(30px,4.2vw,48px); line-height:1.08; }
.lede { color:var(--c-text2); }
h2.sec { font-weight:600; font-size:20px; margin:44px 0 16px; }

/* ---------- glass surfaces ---------- */
.lesson,.q,.stat,.daycard,.link,.drow,.addform,.check,.empty,.tablewrap,.lockcard,.vup,.authcard {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.check { border-radius:var(--radius-s); }
.drow { border-radius:16px; }
.lesson.read { border-color:color-mix(in srgb,var(--c-accent) 35%,transparent); box-shadow:none; }
.check.on { background:var(--gold-soft); border-color:color-mix(in srgb,var(--c-accent) 35%,transparent); }
.daycard:hover,.link:hover,.btn:hover { border-color:color-mix(in srgb,var(--c-accent) 60%,transparent); }
.daycard .n { font-family:var(--bf); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.daycard .t,.link b { font-weight:400; }
.bar { background:color-mix(in srgb,var(--c-text) 10%,transparent); height:4px; }
.bar i { background:linear-gradient(90deg,var(--c-sel-line),var(--c-accent2)); }
.chip { background:transparent; border-color:var(--line); }
.chip.ok,.chip.gold { background:var(--gold-soft); color:var(--gold-deep); }

/* ---------- buttons ---------- */
.btn { border-radius:10px; padding:11px 22px; background:transparent; border:1px solid var(--line-strong); color:var(--text); font-weight:500; }
.btn.primary { background:color-mix(in srgb,var(--c-text) 6%,transparent); border-color:color-mix(in srgb,var(--c-text) 55%,transparent); color:var(--text); }
.btn.primary:hover { background:color-mix(in srgb,var(--c-text) 12%,transparent); border-color:var(--c-text); }
.btn.gold { background:var(--gold-grad); border-color:transparent; color:var(--c-on-accent); font-weight:600; }
.btn.gold:hover { filter:brightness(1.06); }
.btn.done { background:var(--gold-soft); border-color:color-mix(in srgb,var(--c-accent) 35%,transparent); color:var(--gold-deep); }
.btn.danger { color:var(--bad); }

/* ---------- home hero ---------- */
.hero { background:color-mix(in srgb,var(--c-text) 3%,transparent); border:1px solid var(--line); border-radius:18px; padding:48px; gap:40px; }
.hero::after { content:""; inset:auto; right:-40px; top:50%; left:auto; width:380px; height:380px; margin-top:-190px; border-radius:50%;
  background:conic-gradient(from 210deg,var(--c-card),var(--c-sel-line),var(--c-accent2),var(--c-sel),var(--c-text),var(--c-card)); filter:blur(34px); opacity:.22; }
.hero .inner { padding-left:0; }
.hero .kicker { font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.hero h1 { font-weight:700; font-size:clamp(32px,4.4vw,54px); line-height:1.08; letter-spacing:-.01em; }
.hero p { color:var(--c-text2); font-size:17px; margin:16px 0 26px; }
.hero .btn { margin-right:8px; }
.ring { width:168px; height:168px; background:conic-gradient(var(--c-accent2) calc(var(--p)*1%), color-mix(in srgb,var(--c-text) 10%,transparent) 0); }
.ring div { width:150px; height:150px; background:var(--c-inset); }
.ring b { font-weight:700; font-size:36px; }
.stat { padding:22px 24px; }
.stat b { font-weight:700; font-size:32px; letter-spacing:-.02em; }
.stat b.txt { font-size:20px; font-weight:400; }
.stats { gap:16px; margin:20px 0 36px; }

/* ---------- lessons, quiz, video ---------- */
.tabs { border-bottom-color:var(--line); }
.tabs button { font-weight:500; }
.tabs button[aria-selected="true"] { border-bottom-color:var(--gold); }
.q h3 { font-weight:500; }
.opt:hover { background:color-mix(in srgb,var(--c-text) 5%,transparent); }
.opt.right { background:var(--gold-soft); border-color:var(--gold); }
.result { background:color-mix(in srgb,var(--c-text) 4%,transparent); border:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent); }
.result .score { font-weight:700; }
.result .score.pass { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.result .btn { border-color:var(--line-strong); }
.vid { background:color-mix(in srgb,var(--c-text) 4%,transparent); border:1px solid var(--line); border-radius:16px; }
.vid video { background:#000; }
.vmeta b { font-weight:400; }
.vmeta span.ok { color:var(--gold-deep); }
.vmeta button { border-radius:10px; border-color:var(--line-strong); }
.daysteps li { background:transparent; border-color:var(--line); font-weight:500; padding:8px 18px 8px 8px; }
.daysteps li b { background:color-mix(in srgb,var(--c-text) 8%,transparent); font-family:var(--hf); font-weight:400; }
.daysteps li.now { border-color:color-mix(in srgb,var(--c-accent) 70%,transparent); background:var(--gold-soft); color:var(--c-accent2); }
.daysteps li.now b { background:var(--gold-grad); }
.daysteps li.ok { background:transparent; border-color:color-mix(in srgb,var(--c-accent) 30%,transparent); color:var(--gold-deep); }
.daysteps li.ok b { background:color-mix(in srgb,var(--c-accent) 25%,transparent); color:var(--gold-deep); }
.lockedvid .vlock { background:var(--c-card); }
.lockcard { border-style:dashed; }
.notice { background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--c-accent) 30%,transparent); border-radius:14px; }

/* ---------- tables, forms ---------- */
th { background:color-mix(in srgb,var(--c-text) 3%,transparent); color:var(--muted); font-weight:500; letter-spacing:.02em; }
th,td { border-bottom-color:var(--line); }
tbody tr:hover { background:color-mix(in srgb,var(--c-accent) 7%,transparent); }
.field label { font-weight:500; }
.field input,.field select,.field textarea,.toolbar input,.vup input[type=text],.drawer select,.drawer textarea,td select,input[type=date],input[type=month],input[type=number] {
  background:color-mix(in srgb,var(--c-text) 4%,transparent); border:1px solid var(--line-strong); border-radius:var(--radius-s); color:var(--text); padding:11px 14px;
}
td select { padding:6px 10px; }
.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 18%,transparent); }
input[type=file] { color:var(--muted); }
input[type=file]::file-selector-button { font:inherit; border:1px solid var(--line-strong); background:transparent; color:var(--text); border-radius:10px; padding:8px 16px; margin-right:12px; cursor:pointer; }
.status,.tag { background:color-mix(in srgb,var(--c-text) 8%,transparent); color:var(--muted); }
.status.Certified,.tag.ok { background:var(--gold-soft); color:var(--gold-deep); }
.status.Conditional,.tag.gold { background:color-mix(in srgb,var(--c-accent) 8%,transparent); color:var(--gold-deep); }
.stage { background:transparent; border-color:var(--line); }
.stage[aria-pressed="true"] { background:var(--gold-soft); border-color:color-mix(in srgb,var(--c-accent) 60%,transparent); color:var(--text); }
.secret { background:rgba(0,0,0,.35); border-color:var(--gold); color:var(--c-accent2); border-radius:12px; }
.secret.sm { display:inline-block; font-size:14px; padding:4px 10px; }

/* ---------- drawer, toast ---------- */
.drawer { background:var(--c-card); border-left:1px solid var(--line); box-shadow:-30px 0 60px rgba(0,0,0,.5); width:min(720px,100%); }
.drawer header { background:transparent; border-bottom-color:var(--line); }
.drawer header h2 { font-weight:600; }
.scrim { background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.toast { background:color-mix(in srgb,var(--c-card) 90%,transparent); border:1px solid color-mix(in srgb,var(--c-accent) 45%,transparent); backdrop-filter:blur(12px); }
.impsum { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.impsum span { border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px; color:var(--muted); }
.impsum b { font-family:var(--hf); font-weight:400; color:var(--text); margin-right:4px; }
.impsum span.bad b { color:var(--bad); }

/* ---------- sign in ---------- */
body.auth main { padding-top:24px; }
body.auth .wrap { max-width:1180px; }
.authwrap { min-height:calc(100vh - 160px); display:flex; align-items:center; gap:64px; flex-wrap:wrap; position:relative; }
.authwrap::before { content:""; position:absolute; right:4%; top:50%; width:460px; height:460px; margin-top:-230px; border-radius:50%;
  background:conic-gradient(from 200deg,var(--c-card),var(--c-sel-line),var(--c-accent2),var(--c-sel),var(--c-text),var(--c-card)); filter:blur(40px); opacity:.22; pointer-events:none; }
.authcopy { flex:1 1 420px; position:relative; }
.authcopy .kicker { font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.authcopy h1 { font-weight:700; font-size:clamp(40px,6vw,68px); line-height:1.04; letter-spacing:-.01em; }
.authcopy p { color:var(--c-text2); font-size:17px; margin:20px 0 0; max-width:440px; }
.authcard { flex:0 1 440px; position:relative; background:color-mix(in srgb,var(--c-card) 70%,transparent); border-radius:18px; padding:40px; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.authcard h1 { font-weight:400; font-size:26px; }
.authcard .btn { padding:15px 22px; font-size:16px; }

@media (max-width:900px){
  .top { padding:0 16px; }
  .rail { background:color-mix(in srgb,var(--c-bg) 60%,transparent); padding:8px; border-bottom:1px solid var(--line); }
  .item[aria-current="page"] { box-shadow:inset 0 -2px 0 var(--gold); }
  .hero { padding:28px; border-radius:16px; }
  .hero::after { width:240px; height:240px; right:-80px; top:0; margin-top:0; }
  .authwrap { gap:32px; }
  .authwrap::before { width:300px; height:300px; right:-60px; top:20%; }
  .authcard { padding:28px; }
}
.imptable td:nth-child(2) { white-space:normal; min-width:150px; max-width:220px; }
.imptable .tag { display:inline-block; line-height:1.4; }
select { background-color:color-mix(in srgb,var(--c-text) 4%,transparent); border:1px solid var(--line-strong); border-radius:var(--radius-s); color:var(--text); padding:9px 12px; }
input[type=date],input[type=month] { padding:9px 12px; }
@media (max-width:900px){
  .top { height:auto; min-height:60px; flex-wrap:wrap; padding:10px 16px; row-gap:10px; }
  .top .spacer { display:none; }
  .top .logo { margin-right:auto; }
  .switch { order:3; width:100%; }
  .switch button { flex:1; }
  .linkbtn { padding:7px 14px; }
  .hero h1 { font-size:32px; }
}
@media (max-width:900px){ .app { grid-template-columns:minmax(0,1fr); } main,.rail,.top { min-width:0; } }
@media (max-width:900px){ .app { grid-template-rows:auto auto 1fr; } }
.authwrap { overflow-x:clip; }
body.auth main { overflow-x:hidden; }
.lesson.locked { opacity:.55; border-style:dashed; }
.lesson.locked h3 { margin-bottom:6px; }
.btn[disabled].done { opacity:1; cursor:default; }

/* ===================== v3 learning layer ===================== */
.btn.sm { padding:7px 14px; font-size:13px; }
.btn.big { padding:15px 30px; font-size:16px; min-width:180px; }
.btn.danger-solid { background:#F08A7C; border-color:transparent; color:#1A0E0C; font-weight:600; }
.xppop { position:fixed; left:50%; top:96px; transform:translateX(-50%); z-index:60; font-family:var(--hf); font-size:22px; color:var(--c-accent2);
  background:color-mix(in srgb,var(--c-card) 90%,transparent); border:1px solid color-mix(in srgb,var(--c-accent) 50%,transparent); padding:8px 18px; border-radius:999px; animation:xpup 1.4s ease forwards; pointer-events:none; }
@keyframes xpup { 0%{opacity:0;transform:translate(-50%,10px)} 15%{opacity:1;transform:translate(-50%,0)} 80%{opacity:1} 100%{opacity:0;transform:translate(-50%,-24px)} }
.celebrate { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; }
.cbox { background:var(--c-card); border:1px solid color-mix(in srgb,var(--c-accent) 50%,transparent); border-radius:18px; padding:40px 36px; max-width:420px; text-align:center; }
.cbox h2 { font-weight:600; font-size:26px; margin:10px 0 8px; } .cbox p { color:var(--muted); margin:0 0 22px; }
.cicon { font-size:56px; line-height:1; }

/* home game strip */
.gamestrip { display:flex; gap:16px; flex-wrap:wrap; margin:20px 0 0; }
.gstat { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 22px; flex:1 1 180px; }
.gstat.grow { flex:3 1 320px; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; }
.gstat b { font-family:var(--hf); font-weight:700; font-size:30px; line-height:1; display:block; }
.gstat small { color:var(--muted); font-size:13px; }
.gicon { font-size:30px; filter:grayscale(1); opacity:.5; } .gicon.on { filter:none; opacity:1; }
.goalbar { height:14px; border-radius:999px; background:color-mix(in srgb,var(--c-text) 8%,transparent); overflow:hidden; }
.goalbar div { height:100%; background:var(--gold-grad); border-radius:999px; transition:width .5s; }
.goalrow { display:flex; justify-content:space-between; font-size:14px; color:var(--muted); } .goalrow b { font-size:15px; display:inline; font-family:var(--bf); font-weight:600; color:var(--text); }
.homegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin:16px 0 8px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.phead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; } .phead h2 { font-size:18px; font-weight:600; }
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:10px; }
.badge { text-align:center; padding:10px 4px; border-radius:14px; border:1px dashed var(--line); opacity:.45; filter:grayscale(1); position:relative; }
.badge.got { opacity:1; filter:none; border:1px solid color-mix(in srgb,var(--c-accent) 45%,transparent); background:var(--gold-soft); }
.badge span { font-size:26px; display:block; } .badge b { font-size:11px; font-weight:500; display:block; line-height:1.25; margin-top:4px; } .badge small { display:none; }
.lboard { list-style:none; margin:0; padding:0; }
.lboard li { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; font-size:14px; }
.lboard li.me { background:var(--gold-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 40%,transparent); }
.lboard .rk { width:22px; font-family:var(--hf); color:var(--gold-deep); } .lboard .nm { flex:1; }

/* lesson path */
.lpath { display:flex; flex-direction:column; gap:6px; padding:12px 0 8px; position:relative; }
.lnode { display:flex; align-items:center; gap:18px; padding:8px 0; margin-left:calc(var(--off) * 36px + 36px); }
.lbtn { flex:none; width:68px; height:68px; border-radius:50%; border:0; font-family:var(--hf); font-size:22px; cursor:pointer;
  background:color-mix(in srgb,var(--c-text) 8%,transparent); color:var(--muted); box-shadow:0 6px 0 rgba(0,0,0,.45); transition:transform .1s; }
.lbtn:active:not([disabled]) { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.45); }
.lnode.done .lbtn { background:color-mix(in srgb,var(--c-accent) 25%,transparent); color:var(--c-accent2); }
.lnode.now .lbtn, .lnode.open .lbtn { background:var(--gold-grad); color:var(--c-on-accent); }
.lnode.now .lbtn { outline:3px solid color-mix(in srgb,var(--c-accent2) 35%,transparent); outline-offset:5px; animation:pulse 2s infinite; }
@keyframes pulse { 50% { outline-offset:9px; outline-color:color-mix(in srgb,var(--c-accent2) 10%,transparent); } }
.lnode.locked .lbtn { cursor:not-allowed; font-size:20px; }
.ltxt { display:flex; flex-direction:column; gap:3px; } .ltxt b { font-weight:500; font-size:16px; } .ltxt small { color:var(--muted); font-size:13px; }
.lnode.locked .ltxt { opacity:.5; } .ltxt .btn { align-self:flex-start; margin-top:8px; }

/* lesson player */
body.playing { overflow:hidden; }
#player { position:fixed; inset:0; z-index:50; background:radial-gradient(900px 600px at 80% -10%, color-mix(in srgb,var(--c-accent) 14%,transparent), color-mix(in srgb,var(--c-accent) 0%,transparent) 60%), var(--c-bg);
  display:flex; flex-direction:column; padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0); }
.ptop { display:flex; align-items:center; gap:18px; padding:22px clamp(16px,5vw,64px); max-width:1000px; width:100%; margin:0 auto; box-sizing:border-box; }
.pclose { width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--text); font-size:18px; }
.pbar { flex:1; height:16px; border-radius:999px; background:color-mix(in srgb,var(--c-text) 8%,transparent); overflow:hidden; }
.pbar div { height:100%; background:var(--gold-grad); border-radius:999px; transition:width .35s; }
.pxp { color:var(--muted); font-size:13px; white-space:nowrap; }
.pbody { flex:1; overflow-y:auto; display:flex; align-items:safe center; justify-content:center; padding:12px clamp(16px,5vw,64px) 24px; }
.pcard, .pq { width:100%; max-width:760px; }
.pkicker { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:18px; }
.ptext { font-family:var(--hf); font-weight:500; font-size:clamp(22px,3vw,32px); line-height:1.4; margin:0; letter-spacing:-.01em; }
.pq h2 { font-weight:600; font-size:clamp(20px,2.6vw,28px); line-height:1.35; margin-bottom:24px; }
.popts { display:grid; gap:12px; } .popts.two { grid-template-columns:1fr 1fr; }
.popt, .ptok { text-align:left; border:1px solid var(--line-strong); background:color-mix(in srgb,var(--c-text) 4%,transparent); color:var(--text); border-radius:16px; padding:16px 18px; font-size:16px; box-shadow:0 4px 0 rgba(0,0,0,.4); }
.popts.two .popt { text-align:center; font-size:18px; padding:20px; }
.popt:hover:not([disabled]), .ptok:hover:not([disabled]) { border-color:color-mix(in srgb,var(--c-accent) 70%,transparent); }
.popt.sel { border-color:var(--gold); background:var(--gold-soft); }
.popt.right { border-color:var(--gold); background:color-mix(in srgb,var(--c-accent) 20%,transparent); color:var(--c-accent2); }
.popt.wrong { border-color:#F08A7C; background:rgba(240,138,124,.14); }
.pslots { min-height:64px; display:flex; flex-direction:column; gap:8px; padding:12px; border:1px dashed var(--line-strong); border-radius:16px; margin-bottom:16px; }
.pbank { display:flex; flex-wrap:wrap; gap:10px; }
.ptok { padding:12px 16px; font-size:15px; } .ptok[disabled]:not(.placed) { opacity:.25; }
.ptok.placed { display:flex; gap:12px; align-items:center; border-color:color-mix(in srgb,var(--c-accent) 50%,transparent); }
.ptok.placed span { font-family:var(--hf); color:var(--gold-deep); }
.pfoot { border-top:1px solid var(--line); padding:18px max(16px, calc((100% - 1000px) / 2)) 26px; display:flex; justify-content:flex-end; }
.pfoot > .btn { margin-left:auto; }
.pfeed { display:flex; align-items:center; gap:24px; width:100%; max-width:1000px; margin:0 auto; flex-wrap:wrap; }
.pfeed > div { flex:1 1 300px; } .pfeed b { font-family:var(--hf); font-weight:500; font-size:22px; display:block; }
.pfeed.ok b { color:var(--c-accent2); } .pfeed.no b { color:#F08A7C; }
.pfeed span { display:block; margin-top:4px; font-weight:600; } .pfeed p { margin:6px 0 0; color:var(--c-text2); font-size:15px; } .pfeed small { color:var(--muted); }
.pfoot:has(.pfeed.ok) { background:color-mix(in srgb,var(--c-accent) 8%,transparent); } .pfoot:has(.pfeed.no) { background:rgba(240,138,124,.07); }
.pdone { margin:auto; text-align:center; padding:40px 20px; max-width:560px; }
.pdone h1 { font-weight:700; font-size:44px; margin:14px 0 6px; } .pdone > p { color:var(--muted); }
.pstats { display:flex; justify-content:center; gap:14px; margin:28px 0 32px; flex-wrap:wrap; }
.pstats div { border:1px solid var(--line); border-radius:18px; padding:16px 22px; min-width:110px; }
.pstats b { font-family:var(--hf); font-weight:700; font-size:30px; display:block; color:var(--c-accent2); } .pstats small { color:var(--muted); }

/* practice tools */
.check { flex-direction:column; align-items:stretch; gap:8px; }
.check .ckrow { display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.check.static .ckrow { cursor:default; }
.check .tool { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-left:34px; }

/* flashcards */
.fcdecks { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:24px; }
.fcdeck { text-align:left; display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; color:var(--text); }
.fcdeck b { font-family:var(--hf); font-weight:400; font-size:18px; } .fcdeck span { color:var(--muted); font-size:14px; } .fcdeck small { color:var(--muted); font-size:12px; }
.fcdeck:hover:not([disabled]):not(.locked) { border-color:color-mix(in srgb,var(--c-accent) 60%,transparent); }
.fcdeck.feature { grid-column:1/-1; background:var(--gold-soft); border-color:color-mix(in srgb,var(--c-accent) 45%,transparent); }
.fcdeck.locked, .fcdeck[disabled] { opacity:.45; }
.fctop { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.fcwrap { perspective:1400px; display:flex; justify-content:center; }
.flash { position:relative; width:min(640px,100%); aspect-ratio:3/2; border:0; padding:0; background:transparent; color:var(--text); transform-style:preserve-3d; transition:transform .5s; cursor:pointer; }
.flash.flipped { transform:rotateY(180deg); }
.face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:18px; border:1px solid var(--line-strong);
  background:linear-gradient(160deg, color-mix(in srgb,var(--c-text) 7%,transparent), color-mix(in srgb,var(--c-text) 2%,transparent)); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:32px; text-align:center; }
.face.back { transform:rotateY(180deg); border-color:color-mix(in srgb,var(--c-accent) 50%,transparent); }
.face small { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.face.front b { font-family:var(--hf); font-weight:700; font-size:clamp(28px,5vw,46px); letter-spacing:-.02em; }
.face.back p { font-size:clamp(17px,2.2vw,21px); line-height:1.5; margin:0; } .face.back em { color:var(--muted); font-size:15px; }
.fcbtns { display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
kbd { font:inherit; font-size:11px; border:1px solid currentColor; border-radius:5px; padding:0 5px; margin-left:8px; opacity:.6; }
.fcdone { text-align:center; padding:60px 0; }

/* resources */
.pbwrap { display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.pbnav { flex:1 1 230px; max-width:280px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; }
.pbnav input { margin-bottom:10px; background:color-mix(in srgb,var(--c-text) 4%,transparent); border:1px solid var(--line-strong); border-radius:12px; color:var(--text); padding:11px 14px; }
.pbnavi { text-align:left; border:0; background:transparent; color:var(--text); padding:10px 12px; border-radius:10px; font-size:14px; }
.pbnavi:hover { background:color-mix(in srgb,var(--c-text) 5%,transparent); } .pbnavi[aria-current="true"] { background:var(--gold-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 45%,transparent); }
.pbbody { flex:999 1 520px; min-width:0; } .pbbody p { color:var(--c-text2); max-width:76ch; }
.pbtitle { font-weight:700; font-size:30px; margin-bottom:10px; } .pbh { font-weight:400; font-size:20px; margin:30px 0 10px; }
.pbtable { margin:12px 0 18px; } .pbtable td { white-space:normal; min-width:120px; vertical-align:top; }
.pblist { padding-left:22px; } .pblist li { margin:6px 0; max-width:76ch; } .pblist.check { list-style:'☐  '; }
.pbcode { background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:12px; padding:16px; white-space:pre-wrap; font-size:13px; }
.pbhit { border-bottom:1px solid var(--line); padding:12px 0; }
.gloss { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.gterm { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.gterm .gh { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .gterm b { font-family:var(--hf); font-weight:400; font-size:17px; margin-right:auto; }
.gterm p { margin:8px 0 0; font-size:14px; color:var(--c-text2); } .gterm em { display:block; margin-top:6px; font-size:13px; color:var(--muted); }
.slide { margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); } .slide img { display:block; width:100%; height:auto; }
.slnav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; } .slnav .hint { text-align:center; flex:1; }
.slnotes { margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 16px; } .slnotes summary { cursor:pointer; color:var(--gold-deep); }
button.chip { cursor:pointer; color:var(--text); }
.bgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; align-items:start; }
.bgrid .addform { margin:0; } input[type=range] { accent-color:var(--gold); padding:0; border:0; background:transparent; }
tr.hl td { background:var(--gold-soft); }
@media (max-width:700px){ .lnode { margin-left:calc(var(--off) * 16px + 16px); } .lbtn { width:58px; height:58px; } .pbnav { max-width:none; position:static; } .popts.two { grid-template-columns:1fr; } .pfoot .btn.big { width:100%; } .pfeed { gap:14px; } }

/* ===================== v3.1 learning center, profile, add people ===================== */
.hero.lc h1 { font-size:clamp(30px,3.8vw,46px); }
.upnext { display:flex; flex-direction:column; gap:4px; margin:22px 0 22px; padding:16px 20px; border-radius:18px; border:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent); background:color-mix(in srgb,var(--c-accent) 7%,transparent); max-width:520px; }
.upnext small { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.upnext b { font-family:var(--hf); font-weight:400; font-size:20px; } .upnext span { color:var(--muted); font-size:14px; }
.courses { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.course { display:flex; flex-wrap:wrap; align-items:center; gap:14px; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.course:hover { border-color:color-mix(in srgb,var(--c-accent) 60%,transparent); }
.cic { width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:22px; background:color-mix(in srgb,var(--c-text) 6%,transparent); }
.ct { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; } .ct b { font-family:var(--hf); font-weight:400; font-size:16px; } .ct small { color:var(--muted); font-size:13px; }
.course .bar { flex-basis:100%; margin:0; }
.profhead { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.avatar { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-family:var(--hf); font-size:34px; color:var(--c-on-accent); background:var(--gold-grad); box-shadow:0 0 0 6px color-mix(in srgb,var(--c-accent) 15%,transparent); }
.xpbars { position:relative; display:flex; align-items:flex-end; gap:6px; height:140px; border-bottom:1px solid var(--line); }
.xpcol { flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.xpcol span { width:100%; max-width:26px; min-height:3px; border-radius:6px 6px 2px 2px; background:color-mix(in srgb,var(--c-text) 18%,transparent); }
.xpcol span.hit { background:var(--gold-grad); }
.xplabels { display:flex; gap:6px; margin-top:6px; } .xplabels small { flex:1; text-align:center; color:var(--muted); font-size:11px; }
.goalline { position:absolute; left:0; right:0; border-top:1px dashed color-mix(in srgb,var(--c-accent) 60%,transparent); pointer-events:none; }
.profstats { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:24px; }
@media (max-width:700px){ .profstats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.badges.wide { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.badges.wide .badge small { display:block; font-size:11px; color:var(--muted); margin-top:4px; line-height:1.3; }
.addcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:24px 0 8px; }
.addcard { display:flex; gap:16px; align-items:center; text-align:left; color:var(--text); background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent); border-radius:16px; padding:20px 22px; }
.addcard:hover { border-color:var(--gold); } .addcard b { font-family:var(--hf); font-weight:400; font-size:18px; display:block; } .addcard small { color:var(--muted); font-size:13px; }
.addcard .cic { background:color-mix(in srgb,var(--c-bg) 50%,transparent); }
pre.welcome { white-space:pre-wrap; font-family:var(--bf); font-size:14px; line-height:1.55; background:rgba(0,0,0,.35); border:1px dashed var(--gold); border-radius:14px; padding:16px 18px; margin:14px 0; user-select:all; color:var(--c-accent2); }
a.btn { text-decoration:none; display:inline-flex; align-items:center; }
@media (max-width:700px){ .hero.lc .ring { display:none; } .hero.lc .btn.big { width:100%; } }

/* v3.4 guided flow */
.nextbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 28px; padding:14px 18px 14px 22px;
  border-radius:18px; border:1px solid color-mix(in srgb,var(--c-accent) 50%,transparent); background:linear-gradient(90deg, color-mix(in srgb,var(--c-accent) 16%,transparent), color-mix(in srgb,var(--c-accent) 4%,transparent)); }
.nextbar small { display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.nextbar b { font-family:var(--hf); font-weight:400; font-size:17px; }
.rail .tools .item { opacity:.8; } .rail .tools .item .lbl { font-size:13px; }

/* ---------- v3.6 back-office match ---------- */
:root, :root[data-theme], :root:not([data-theme="light"]) {
  --sel:var(--c-sel); --sel-line:var(--c-sel-line); --bad:#E5534B; --bad-soft:rgba(229,83,75,.12); --good:var(--c-accent2); --good-soft:color-mix(in srgb,var(--c-accent) 12%,transparent);
  --shell:var(--c-rail); --shell-line:var(--c-line); --surface:var(--c-card); --line:var(--c-line); --line-strong:var(--c-line2);
}
html, body { background:var(--c-bg); }
.top { background:var(--c-top); border-bottom:1px solid var(--c-line); }
.rail { background:var(--c-rail); border-right:1px solid var(--c-line); }
.eyebrow, .kicker, .hero .kicker, .authcopy .kicker, .pkicker, .rail .group, .daycard .n { color:var(--c-muted); font-weight:500; letter-spacing:.14em; }
h1 .gold-text, .title .gold-text, .authcopy h1 .gold-text { background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--c-muted); }
.gold-text { background:none; color:var(--c-text); -webkit-text-fill-color:currentColor; }
/* selected = slate blue, like the YTD / Executive pills */
.switch { background:var(--c-rail); border-color:var(--c-line); border-radius:10px; }
.switch button { border-radius:7px; }
.switch button[aria-pressed="true"] { background:var(--sel); color:var(--c-text); box-shadow:inset 0 0 0 1px var(--sel-line); }
.item { border-radius:10px; }
.item[aria-current="page"] { background:var(--sel); box-shadow:none; }
.tabs button[aria-selected="true"] { color:var(--c-text); border-bottom-color:var(--c-text); }
.stage[aria-pressed="true"] { background:var(--sel); border-color:var(--sel-line); }
.check.on { background:var(--sel); border-color:var(--sel-line); }
/* primary action = light button on dark */
.btn { border-radius:8px; }
.btn.gold { background:var(--c-btn); color:var(--c-btn-text); border-color:transparent; }
.btn.gold:hover { background:var(--c-btn); filter:brightness(1.08); }
.linkbtn { border-radius:8px; }
/* cards */
.hero, .panel, .gstat, .daycard, .course, .fcdeck, .stat, .vid, .drow, .authcard, .cbox { background:var(--c-card); border:1px solid var(--c-line); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hero { border-radius:16px; } .hero::before, .hero::after, .authwrap::before, .authwrap::after { display:none !important; }
.upnext, .nextbar { background:var(--c-inset); border:1px solid var(--c-line); }
.nextbar small, .upnext small { color:var(--c-muted); }
input, select, textarea { background:var(--c-inset); border-color:var(--c-line); border-radius:8px; }
.dot.part { border-color:var(--c-accent); background:linear-gradient(to top,var(--c-accent) 50%,var(--c-rail) 50%); }
.dot.done { border-color:var(--c-accent); background:var(--c-accent); }
.me .pct { color:var(--c-muted); }

/* light palettes: invert the white logo, soften shadows */
:root.light-ui { color-scheme: light; }
:root.light-ui .logo { filter:invert(1) brightness(.2); }
:root.light-ui .hero, :root.light-ui .authcard, :root.light-ui .cbox, :root.light-ui .drawer { box-shadow:0 10px 30px rgba(0,0,0,.08); }
:root.light-ui option { background:#fff; color:#111; }
/* appearance picker */
.themegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
.tswatch { display:flex; flex-direction:column; gap:8px; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--c-line); background:var(--c-inset); color:var(--c-text); cursor:pointer; font:inherit; }
.tswatch[aria-pressed="true"] { border-color:var(--c-sel-line); background:var(--c-sel); }
.tswatch .chips { display:flex; gap:4px; } .tswatch .chips i { width:22px; height:22px; border-radius:6px; border:1px solid rgba(127,127,127,.35); }
.tswatch b { font-size:14px; font-weight:600; } .tswatch small { color:var(--c-muted); font-size:12px; }
.tcustom { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.tcustom label { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--c-line); border-radius:10px; background:var(--c-inset); font-size:14px; cursor:pointer; }
.tcustom input[type=color] { width:34px; height:34px; padding:0; border:1px solid var(--c-line2); border-radius:8px; background:none; cursor:pointer; }
.tcustom input[type=color]::-webkit-color-swatch-wrapper { padding:2px; } .tcustom input[type=color]::-webkit-color-swatch { border:0; border-radius:6px; }
.tcustom small { display:block; color:var(--c-muted); font-size:12px; }