:root {
  /* ground — blueprint charcoal, cool and deep */
  --bg: #0e1117; --bg2: #141823; --panel: #1a2030; --panel2: #222a3b;
  --line: #2a3345; --line2: #38445b;
  --ink: #eef2f9; --muted: #8b97ad; --dim: #66728a;
  /* primary — instrument cyan (the readout color) */
  --accent: #5fd0ff; --accent-2: #37a7d6;
  --accent-ink: #06222e;        /* dark text on a cyan fill */
  --accent-bg: #11303b;         /* active/selected surface */
  --accent-line: #23576a;       /* active/selected border */
  --accent-soft: #cdeefb;       /* light cyan text on active */
  /* energized — copper/amber (the wire, the live line) */
  --copper: #f4a63a; --copper-2: #ffc271; --copper-ink: #2a1a04;
  --copper-bg: #2a2110; --copper-line: #6e4f22; --copper-soft: #f6cd93;
  /* semantics */
  --ok: #34d18b; --warn: #edb63f; --bad: #f0574b;
  /* type */
  --display: "Saira SemiCondensed", -apple-system, system-ui, "Segoe UI", sans-serif;
  --sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background:
    radial-gradient(1200px 600px at 12% -14%, rgba(95,208,255,.08), transparent 58%),
    radial-gradient(1000px 520px at 104% -6%, rgba(244,166,58,.06), transparent 54%),
    var(--bg);
  background-attachment: fixed; color: var(--ink); font: 13.5px/1.5 var(--sans); display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- type foundation: engineered display + instrument mono ---- */
h1, h2, h3, .home-rank, .home-act-t, .home-hero .home-rank, .exam-intro h1, .phub-h1,
.cr-hero h1, .career h1, .mastery h1, .edpage h1, .daily h1, .cert-h {
  font-family: var(--display); font-weight: 700; letter-spacing: .2px; }
h1 { font-size: 27px; line-height: 1.12; letter-spacing: .1px; }
h2 { font-size: 19px; line-height: 1.2; }
/* eyebrows / section labels — spaced small caps in mono for that panel-schedule feel */
.ls-crumb, .home-eyebrow, .home-sec, .sec-title { font-family: var(--mono); }
/* tabular figures everywhere numbers matter */
.home-stat b, .my-big, .ct-n, .home-bar-meta, .pace-stat b, .st-conf, .rk-meta { font-variant-numeric: tabular-nums; }

/* ---- top bar ---- */
#topbar { display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.nav-toggle { display: none; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 18px; line-height: 1; width: 38px; height: 34px; cursor: pointer; flex-shrink: 0; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-backdrop { display: none; }
.brand { font-weight: 700; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.brand .bolt { color: var(--warn); }
.brand-ed { font: 700 10px var(--mono); letter-spacing: .5px; color: var(--accent); border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; margin-left: 4px; vertical-align: middle; }
.svc { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.svc select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: 12px var(--mono); }
.gauge { width: 130px; height: 9px; background: #0d0d12; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: inline-block; vertical-align: middle; }
.gfill { height: 100%; transition: width .2s; }
.gfill.ok { background: var(--ok); } .gfill.warn { background: var(--warn); } .gfill.bad { background: var(--bad); }
.gtxt { font: 11px var(--mono); color: var(--muted); margin-left: 8px; }
.actions { margin-left: auto; display: flex; gap: 8px; }
button { cursor: pointer; font: 13px var(--sans); }
#btnInspect { background: var(--accent); color: #06222e; border: 0; border-radius: 7px; padding: 8px 14px; font-weight: 700; }
#btnInspect:hover { filter: brightness(1.08); }
#btnReset { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; }

/* ---- layout ---- */
main { flex: 1; display: flex; min-height: 0; }
#left { width: 200px; background: var(--bg2); border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; }
#center { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#right { width: 350px; background: var(--bg2); border-left: 1px solid var(--line); padding: 12px; overflow-y: auto; }

.sec-title { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; }
.tag { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; font: 10px var(--mono); text-transform: none; letter-spacing: 0; }

/* ---- palette ---- */
.tool { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 6px; }
.tool:hover { border-color: #3d4254; background: var(--panel2); }
.tool.active { border-color: var(--accent); background: #11303b; color: #cdeefb; box-shadow: 0 0 0 1px var(--accent) inset; }
.tool .ico { width: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.tool.active .ico { color: var(--accent); }

/* ---- objectives ---- */
#objectives { margin-top: 18px; }
.obj { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; color: var(--muted); font-size: 12px; }
.obj .mark { color: var(--dim); font-weight: 700; }
.obj.done { color: var(--ink); } .obj.done .mark { color: var(--ok); }

/* ---- canvas ---- */
#plan { background: #15151b; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
#hint { color: var(--muted); font: 12px var(--mono); min-height: 16px; }
#legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font: 11px var(--mono); }
#legend .lg { display: flex; align-items: center; gap: 5px; }
#legend .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---- inspector controls ---- */
#right hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.muted { color: var(--muted); } .steps { padding-left: 18px; } .steps li { margin: 4px 0; }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; color: var(--muted); }
.kv b { color: var(--ink); font: 12px var(--mono); }
.kv.big b { font-size: 16px; color: var(--accent); }
.kv .ok { color: var(--ok); } .kv .bad { color: var(--bad); }
.row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.row label { width: 78px; color: var(--muted); flex-shrink: 0; }
.row input, .row select { flex: 1; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font: 12px var(--mono); }
.chk { display: flex; align-items: center; gap: 7px; margin: 7px 0; color: var(--muted); font-size: 12px; }
.ckt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.btn-del { width: 100%; margin-top: 12px; background: transparent; color: var(--bad); border: 1px solid #5a2b2b; border-radius: 7px; padding: 7px; }
.btn-del:hover { background: #2a1818; }
.mini-btn { margin-left: auto; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font: 11px var(--mono); }

/* phase bars */
.pbar { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.plbl { width: 14px; font: 700 12px var(--mono); }
.ptrack { flex: 1; height: 12px; background: #0d0d12; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pfill { height: 100%; transition: width .2s; opacity: .85; }
.pval { width: 64px; text-align: right; font: 11px var(--mono); color: var(--muted); }

/* circuit table */
table.ckt, table.calc { width: 100%; border-collapse: collapse; font: 11px var(--mono); }
table.ckt th, table.calc th { color: var(--dim); text-align: left; font-weight: 600; padding: 4px 3px; border-bottom: 1px solid var(--line); }
table.ckt td { padding: 4px 3px; border-bottom: 1px solid #232330; vertical-align: middle; }
table.ckt td.desc { color: var(--ink); } table.ckt td.desc small { display: block; color: var(--dim); font-size: 9px; }
select.mini { width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 2px; font: 10px var(--mono); }
.mini-ro { color: var(--muted); }
table.calc td { padding: 4px 3px; border-bottom: 1px solid #232330; }
table.calc .num { text-align: right; } table.calc tfoot td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }

/* ---- modal / report ---- */
.modal { position: fixed; inset: 0; background: rgba(6,6,10,.7); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(3px); }
.modal.hidden { display: none; }
.modal-body { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(720px, 92vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.rhead { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rhead h2 { margin: 0 0 10px; font-size: 18px; }
.rsummary { display: flex; gap: 8px; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; font: 11px var(--mono); color: var(--muted); }
.pill.ok { background: #0f2e22; color: var(--ok); border-color: #1d5240; }
.pill.bad { background: #2e1414; color: var(--bad); border-color: #5a2b2b; }
.pill.warn { background: #2e2410; color: var(--warn); border-color: #5a4a1d; }
.rbody { padding: 12px 22px; overflow-y: auto; }
.finding { border-left: 3px solid var(--line); padding: 8px 12px; margin: 8px 0; background: var(--panel2); border-radius: 0 8px 8px 0; }
.finding.violation { border-left-color: var(--bad); }
.finding.advisory { border-left-color: var(--warn); }
.finding.pass { border-left-color: var(--ok); }
.fhead { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; }
.badge { font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .5px; padding: 1px 7px; border-radius: 10px; }
.badge.violation { background: #2e1414; color: var(--bad); } .badge.advisory { background: #2e2410; color: var(--warn); } .badge.pass { background: #0f2e22; color: var(--ok); }
.fcode { font: 11px var(--mono); color: var(--accent); }
.ftitle { font-weight: 600; font-size: 13px; }
.fdetail { color: var(--muted); font-size: 12px; margin-top: 2px; }
.disclaimer { color: var(--dim); font-size: 11px; padding: 0 22px 16px; }
#reportClose { align-self: flex-end; margin: 0 22px 18px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 16px; }

/* ---- toast ---- */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2a2a36; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; opacity: 0; transition: all .25s; z-index: 60; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ====================== view switcher ====================== */
#viewtabs { display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
#viewtabs button { background: transparent; color: var(--muted); border: 0; border-radius: 7px; padding: 6px 16px; font-weight: 600; }
#viewtabs button:hover { color: var(--ink); }
#viewtabs button.active { background: linear-gradient(180deg, #74d7ff, var(--accent)); color: var(--accent-ink); box-shadow: 0 2px 8px -3px rgba(95,208,255,.6), inset 0 1px 0 rgba(255,255,255,.4); }
#viewtabs .tab-div { width: 1px; height: 18px; background: var(--line); margin: 0 8px 0 6px; }
#viewtabs .tab-group-label { font: 9px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .8px; padding-right: 2px; }
#viewtabs button.tab-2nd { font-weight: 500; padding: 6px 12px; font-size: 12.5px; }
#viewtabs button.tab-2nd:not(.active) { color: var(--dim); }
#viewport { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; display: none; }
.view.active { display: block; }
#view-prints.active { display: flex; }
main { height: 100%; }

/* ====================== prints view ====================== */
#prints-nav { width: 230px; background: var(--bg2); border-right: 1px solid var(--line); padding: 12px 10px; overflow-y: auto; flex-shrink: 0; }
.psheet-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 6px; }
.psheet-btn:hover { border-color: #3d4254; }
.psheet-btn.active { border-color: var(--accent); background: #11303b; }
.psheet-btn .pno { font: 700 11px var(--mono); color: var(--accent); width: 34px; flex-shrink: 0; }
.psheet-btn .pttl { font-size: 12px; color: var(--muted); }
.psheet-btn.active .pttl { color: var(--ink); }
#prints-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #2a2b31; }
#prints-toolbar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.pt-label { color: var(--muted); font-weight: 600; }
#prints-print { margin-left: auto; background: var(--accent); color: #06222e; border: 0; border-radius: 7px; padding: 8px 16px; font-weight: 700; }
#prints-sheet { flex: 1; overflow: auto; padding: 26px; display: flex; justify-content: center; align-items: flex-start; }

.sheet { background: #fff; color: #111; width: min(1180px, 98%); box-shadow: 0 10px 40px rgba(0,0,0,.5); position: relative; display: flex; flex-direction: column; }
.sheet-inner { padding: 26px 30px 14px; flex: 1; }
.sheet-canvas { width: 100%; height: auto; display: block; border: 1px solid #ddd; }
.sheet h2 { font: 700 16px var(--sans); margin: 0 0 16px; color: #111; letter-spacing: .3px; }
.sheet h3 { font: 700 12px var(--sans); margin: 14px 0 7px; color: #333; letter-spacing: .5px; }

/* title block */
.titleblock { display: flex; align-items: stretch; border-top: 2px solid #111; font: 10px var(--mono); color: #222; }
.titleblock > div { border-left: 1px solid #999; padding: 7px 11px; display: flex; flex-direction: column; justify-content: center; }
.titleblock > div:first-child { border-left: 0; }
.tb-logo { font: 800 15px var(--sans) !important; color: #111; justify-content: center; }
.tb-proj { flex: 1; line-height: 1.4; }
.tb-meta div { display: flex; gap: 8px; }
.tb-meta span { color: #717171; width: 42px; display: inline-block; }
.tb-sheet { background: #111; color: #fff; }
.tb-sheet span { color: #aaa; font-size: 9px; }
.tb-sheet b { font-size: 20px; }
.tb-title { font-size: 9px; color: #ccc; margin-top: 2px; max-width: 130px; }
.tb-stamp { color: #b00; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 1px; }

/* schedules + calc tables (print look) */
.sheet .sched { margin-bottom: 22px; }
.sched-head h3 { margin: 0; color: #111; font-size: 13px; }
.sched-meta { font: 10px var(--mono); color: #555; margin: 3px 0 6px; }
.schedtbl, .calctbl, .idxtbl, .symtbl { width: 100%; border-collapse: collapse; font: 11px var(--mono); color: #111; }
.schedtbl th, .calctbl th { background: #111; color: #fff; text-align: left; padding: 5px 7px; font-size: 10px; }
.schedtbl td, .calctbl td { border: 1px solid #ccc; padding: 4px 7px; }
.schedtbl td.ld { width: 40%; } .schedtbl td.n, .calctbl td.n { text-align: right; }
.schedtbl tfoot td, .calctbl tfoot td { background: #eee; font-weight: 700; }
.calctbl.summary { margin-top: 16px; width: 60%; }
.calctbl.summary td { border: 1px solid #ccc; }
.cnote { font: 10px var(--mono); color: #666; margin-top: 12px; line-height: 1.5; }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.idxtbl td, .symtbl td { border-bottom: 1px solid #ddd; padding: 4px 6px; }
.idxtbl td:first-child, .symtbl td:first-child { color: #06c; font-weight: 700; width: 60px; }
.notes { margin: 0; padding-left: 18px; font-size: 11px; color: #222; line-height: 1.6; }
.abbr { font: 10px var(--mono); color: #555; line-height: 1.7; }
.sheet .muted { color: #737373; }

/* ====================== print media ====================== */
@page { size: landscape; margin: 0.35in; }
@media print {
  #topbar, #prints-nav, #prints-toolbar, #toast, #reportModal { display: none !important; }
  body { overflow: visible; height: auto; display: block; }
  #viewport { position: static; }
  .view { position: static !important; display: none !important; }
  #view-prints.active { display: block !important; }
  #prints-main { background: #fff; overflow: visible; }
  #prints-sheet { padding: 0; display: block; overflow: visible; }
  .sheet { width: 100%; box-shadow: none; page-break-after: always; }
}

/* ====================== LEARN (NEC course) ====================== */
#view-learn.active { display: flex; }
#learn-nav { width: 280px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; padding: 14px 12px; }
.ln-head { padding: 2px 6px 6px; margin-bottom: 4px; }
.ln-head b { font-size: 13px; letter-spacing: .6px; }
.ln-sub { color: var(--muted); font: 11px var(--mono); margin: 4px 0 8px; }
.ln-pbar { height: 6px; background: #0d0d12; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.ln-pfill { height: 100%; background: var(--accent); transition: width .3s; }
.ln-unit { margin-bottom: 14px; }
.ln-utitle { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--dim); padding: 4px 6px; }
/* Apprenticeship-year group headers in the lesson list */
.ln-year { margin: 16px 6px 8px; padding: 9px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); }
.ln-year:first-child { margin-top: 4px; }
.ln-year.current { border-left-color: var(--accent); background: linear-gradient(150deg, rgba(95,208,255,.09), var(--panel)); }
.ln-year.done { border-left-color: var(--ok); }
.ln-yhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ln-ytitle { font: 800 13px var(--sans); color: var(--ink); letter-spacing: .2px; }
.ln-yprog { font: 700 11px var(--mono); color: var(--muted); }
.ln-year.current .ln-yprog { color: var(--accent); }
.ln-year.done .ln-yprog { color: var(--ok); }
.ln-ytheme { font: 400 11px/1.4 var(--sans); color: var(--muted); margin-top: 3px; }
.ln-ynow { font: 800 9px var(--sans); letter-spacing: .6px; color: #06222e; background: var(--accent); border-radius: 20px; padding: 2px 7px; vertical-align: middle; }
.ln-ycheck { color: var(--ok); }
.track-pick { display: flex; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin: 0 0 14px; }
.track-btn { flex: 1; background: transparent; color: var(--muted); border: 0; border-radius: 7px; padding: 8px 6px; font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; }
.track-btn:hover { color: var(--ink); }
.track-btn.active { background: #11303b; color: #cdeefb; }
.ln-utrack { font-size: 10px; }
.ed-pick { margin-top: -6px; }
.ed-pick .track-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .4px; }
button.brand-ed { cursor: pointer; background: transparent; }
button.brand-ed:hover { border-color: var(--accent); }
.ed23 { border-bottom: 1px dashed var(--warn); cursor: help; }
.ed-note { background: linear-gradient(180deg, rgba(95,208,255,.08), var(--panel)); border: 1px solid rgba(95,208,255,.35); border-radius: 10px; padding: 11px 15px; margin: 12px 0 16px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ed-note b { color: var(--ink); }
.ed-note-link { background: transparent; border: 0; color: var(--accent); font: 600 12.5px var(--sans); cursor: pointer; padding: 0; }
.ed-note-link:hover { text-decoration: underline; }
.edpage { max-width: 820px; }
.edpage h1 { font-size: 26px; margin: 4px 0 12px; }
.cw-table td { vertical-align: middle; }
.cw-from { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.cw-arrow { color: var(--dim); }
.cw-to { font: 700 13px var(--mono); color: var(--accent); white-space: nowrap; }
.edchg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.edchg-area { font: 700 9.5px var(--mono); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 4px; }
.edchg-title { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.edchg-what { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.calc-note { font-size: 12px; line-height: 1.55; color: var(--muted); background: var(--panel2); border-left: 3px solid var(--line); border-radius: 0 7px 7px 0; padding: 8px 12px; margin: 10px 0 4px; }
.calc-note b { color: var(--ink); }
.ln-tools { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.ln-group { margin-bottom: 12px; }
.ln-group:last-child { margin-bottom: 0; }
.ln-glabel { font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: .8px; color: var(--dim); padding: 0 6px; }
.ln-group .ln-exam { margin-top: 6px; }
.ln-lesson { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; color: var(--muted); border: 0; border-radius: 7px; padding: 8px 8px; font-size: 12.5px; }
.ln-lesson:hover:not([disabled]) { background: var(--panel); color: var(--ink); }
.ln-lesson.active { background: #11303b; color: #cdeefb; }
.ln-lesson.done { color: var(--ink); }
.ln-lesson.locked { opacity: .45; cursor: not-allowed; }
.ln-ic { width: 16px; text-align: center; color: var(--dim); flex-shrink: 0; }
.ln-lesson.done .ln-ic { color: var(--ok); }
.ln-lesson.active .ln-ic { color: var(--accent); }
.ln-lt { flex: 1; line-height: 1.3; }
.ln-score { font: 10px var(--mono); color: var(--ok); }

#learn-main { flex: 1; overflow-y: auto; min-width: 0; }
#learn-content { max-width: 780px; margin: 0 auto; padding: 30px 34px 80px; }
.ls-crumb { color: var(--dim); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.lesson h1 { font-size: 26px; margin: 0 0 20px; line-height: 1.2; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ls-ref { font: 12px var(--mono); color: var(--accent); background: #11303b; border: 1px solid #1d4a5a; border-radius: 20px; padding: 3px 11px; }
.ls-body { font-size: 15px; line-height: 1.65; color: #d3d8e2; }
.ls-body p { margin: 0 0 14px; }
.ls-body ul { margin: 0 0 14px; padding-left: 22px; }
.ls-body li { margin: 6px 0; }
.ls-body b { color: var(--ink); }
.ls-body code { font: 13px var(--mono); background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: #cdeefb; }
.ls-body .ref { font: 12px var(--mono); color: var(--accent); }
.ls-body .formula { text-align: center; font: 17px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 14px; margin: 16px 0; letter-spacing: .5px; }
.ls-body .callout { background: var(--panel); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 16px 0; font-size: 14px; }
.ls-body .callout.warn { border-left-color: var(--warn); }
.ls-body .ltable { border-collapse: collapse; margin: 14px 0; font: 13px var(--mono); min-width: 280px; }
.ls-body .ltable th { background: var(--panel2); color: var(--muted); text-align: left; padding: 7px 14px; border: 1px solid var(--line); font-weight: 600; }
.ls-body .ltable td { padding: 6px 14px; border: 1px solid var(--line); color: var(--ink); }

/* quiz */
.quiz { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; }
.quiz h2 { font-size: 16px; margin: 0 0 16px; }
.quiz h2::before { content: '✎ '; color: var(--accent); }
.q { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.q.ok { border-color: #1d5240; } .q.bad { border-color: #5a2b2b; }
.q-text { font-size: 14.5px; font-weight: 600; margin-bottom: 11px; color: var(--ink); }
.q-opts { display: flex; flex-direction: column; gap: 7px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--muted); transition: all .12s; }
.opt:hover { border-color: #3d4254; color: var(--ink); }
.opt input { accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: #11303b; color: #cdeefb; }
.qnum { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; font: 14px var(--mono); width: 220px; }
.qnum:focus { outline: none; border-color: var(--accent); }
.q-fb { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; display: none; }
.q.ok .q-fb, .q.bad .q-fb { display: block; }
.fb-tag { font-weight: 700; margin-right: 6px; }
.fb-tag.ok { color: var(--ok); } .fb-tag.bad { color: var(--bad); }
.quiz-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.qbtn { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 18px; font-weight: 600; transition: border-color .15s, background .15s, transform .06s, box-shadow .15s; }
.qbtn:hover { border-color: var(--accent-line); background: var(--panel); }
.qbtn:active { transform: translateY(1px); }
.qbtn.primary { background: linear-gradient(180deg, #74d7ff, var(--accent)); color: var(--accent-ink); border: 0; font-weight: 700; box-shadow: 0 4px 14px -5px rgba(95,208,255,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.qbtn.primary:hover { filter: brightness(1.06); border-color: transparent; }
#quizScore b.ok { color: var(--ok); } #quizScore b.bad { color: var(--warn); }
#quizFooter { margin-top: 16px; }
.pass-msg { color: var(--ok); margin-bottom: 12px; font-size: 14px; }
.fail-msg { color: var(--warn); margin-bottom: 12px; font-size: 14px; }

/* takeaways recap */
.takeaways { background: #11251f; border: 1px solid #1d5240; border-radius: 10px; padding: 13px 16px 13px 18px; margin: 22px 0 4px; }
.takeaways b { color: var(--ok); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.takeaways ul { margin: 8px 0 0; padding-left: 20px; }
.takeaways li { margin: 5px 0; color: #cfe6dc; font-size: 13.5px; line-height: 1.45; }

/* exam button in nav */
.ln-exam { display: block; width: 100%; text-align: left; margin-top: 12px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-weight: 600; font-size: 12.5px; }
.ln-exam:hover { border-color: var(--accent); }
.ln-exam.active { background: #11303b; border-color: var(--accent); color: #cdeefb; }
/* Practice Center — the section's landing entry, subtly energized */
.ln-hub { background: linear-gradient(135deg, var(--copper-bg), var(--panel)); border-color: var(--copper-line); }
.ln-hub:hover { border-color: var(--copper); }
.ln-hub.active { background: linear-gradient(135deg, var(--copper-bg), var(--panel2)); border-color: var(--copper); color: var(--copper-soft); }
.ln-ebest { color: var(--ok); font: 10px var(--mono); float: right; }

/* exam */
.exam-intro { max-width: 620px; }
.exam-intro h1 { font-size: 26px; margin: 4px 0 16px; }
.ex-best { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; color: var(--muted); }
.ex-best b { color: var(--ok); }
.ex-lengths { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.exam-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.exam-head h1 { font-size: 24px; margin: 0; }
.exam-timer { font: 18px var(--mono); color: var(--accent); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; white-space: nowrap; }
.exam-timer.warn { color: var(--bad); border-color: var(--bad); animation: pulse-warn 1s ease-in-out infinite; }
@keyframes pulse-warn { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .exam-timer.warn { animation: none; } }
.ex-mock { margin-top: 26px; padding: 18px 20px; background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--line); border-radius: 12px; }
.ex-mock-h { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.ex-mock-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.ex-mock-note b { color: var(--ink); }
.fb-src { display: block; margin-top: 4px; color: var(--dim); font: 11px var(--mono); }
.exam-result { border-radius: 12px; padding: 18px 22px; margin-bottom: 22px; }
.exam-result.ok { background: #0f2e22; border: 1px solid #1d5240; }
.exam-result.bad { background: #2e1414; border: 1px solid #5a2b2b; }
.exr-score { font: 700 26px var(--mono); }
.exam-result.ok .exr-score { color: var(--ok); }
.exam-result.bad .exr-score { color: var(--bad); }
.exr-sub { color: var(--muted); font-size: 13px; margin: 6px 0 14px; }
.exr-actions { display: flex; gap: 10px; }

/* practice problems */
.prac { max-width: 660px; }
.prac-hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.prac-topic { font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--accent); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }
.prac-score { font: 12px var(--mono); color: var(--muted); }
.prac-q { font-size: 17px; line-height: 1.6; color: #e3e7ee; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.prac-q b { color: #fff; }
.prac-form { display: flex; gap: 12px; align-items: center; margin: 16px 0 8px; }
.prac-form .qnum { width: 240px; font-size: 16px; }
.prac-skip { font-size: 12px; }
.prac-fb { margin-top: 4px; }
.prac-verdict { font: 700 18px var(--sans); margin: 14px 0 10px; }
.prac-verdict.ok { color: var(--ok); }
.prac-verdict.bad { color: var(--bad); }
.prac-verdict b { font-family: var(--mono); }
.prac-sol { font-size: 14px; line-height: 1.65; color: var(--muted); background: var(--panel2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 16px; }
.prac-sol b { color: var(--ink); }

/* flashcards */
.flash { max-width: 560px; }
.flash-keys { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.flash-prog { margin-bottom: 14px; }
.flash-bar { height: 5px; background: #0d0d12; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 7px; }
.flash-fill { height: 100%; background: var(--accent); transition: width .25s; }
.flash-count { font: 12px var(--mono); color: var(--muted); }
.flash-known-n { color: var(--ok); }
.flashcard { perspective: 1300px; cursor: pointer; min-height: 268px; margin-bottom: 16px; }
.fc-inner { position: relative; width: 100%; min-height: 268px; transition: transform .5s; transform-style: preserve-3d; }
.flashcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 52px 30px 40px; }
.fc-front { background: var(--panel); }
.fc-back { background: linear-gradient(180deg, #11303b, var(--panel)); transform: rotateY(180deg); }
.fc-cat { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); font: 700 9.5px var(--mono); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
.fc-back .fc-cat { background: rgba(0,0,0,.22); }
.fc-q { font-size: 18px; line-height: 1.5; color: var(--ink); }
.fc-q b, .fc-a b, .fc-why b { color: #fff; }
.fc-a { font-size: 23px; line-height: 1.35; color: #cdeefb; font-weight: 700; }
.fc-why { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 94%; }
.fc-hint { position: absolute; bottom: 13px; font: 10.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
.fc-ref { position: absolute; bottom: 13px; font: 12px var(--mono); color: var(--accent); }
.flash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qbtn.fc-known { border-color: var(--ok); color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } }

/* exam simulator */
.sim { max-width: 760px; }
.sim-hud { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sim-meta { display: flex; flex-direction: column; gap: 3px; }
.sim-meta b { font-size: 17px; }
.sim-meta span { font: 12px var(--mono); color: var(--muted); }
.sim-q .q { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.sim-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.sim-flagged { border-color: var(--warn); color: var(--warn); }
.sim-finish { margin-left: auto; }
.sim-pal { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.sp { width: 34px; height: 30px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; font: 600 11.5px var(--mono); cursor: pointer; position: relative; }
.sp:hover { border-color: var(--accent); color: var(--ink); }
.sp.done { background: #11303b; color: #cdeefb; border-color: #1d4a5c; }
.sp.cur { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(95,208,255,.4); color: #fff; }
.sp.flag::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.simrev-g { margin-bottom: 18px; }
.simrev-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.simrev-h.bad { color: var(--bad); }
.simrev-h.ok { color: var(--ok); }
.sim-banner { border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }
.sim-banner.ok { background: linear-gradient(180deg, rgba(39,192,138,.14), var(--panel)); border-color: rgba(39,192,138,.5); }
.sim-banner.bad { background: linear-gradient(180deg, rgba(232,88,75,.12), var(--panel)); border-color: rgba(232,88,75,.5); }
.sb-verdict { font: 800 22px var(--sans); letter-spacing: .5px; }
.sim-banner.ok .sb-verdict { color: var(--ok); }
.sim-banner.bad .sb-verdict { color: var(--bad); }
.sb-score { font: 18px var(--mono); margin: 6px 0 4px; }
.sb-need { color: var(--dim); font-size: 12px; }
.sb-sub { color: var(--muted); font-size: 12.5px; }
.simr-h { font-size: 16px; margin: 22px 0 12px; }
.simr-q { border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; background: var(--panel); }
.simr-q.bad { border-left-color: var(--bad); }
.simr-q.ok { border-left-color: var(--ok); }
.simr-stem { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.simr-ans { font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.simr-ans b { color: var(--ink); }
.simr-ex { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.simr-details { margin-top: 16px; }
.simr-details > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 8px 0; }
.simr-details > summary:hover { color: var(--ink); }

/* pacing report */
.pace { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; margin-bottom: 14px; }
.pace-budget { font: 11px var(--mono); color: var(--dim); font-weight: 400; margin-left: 8px; }
.pace-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.pace-stat { flex: 1; min-width: 110px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; text-align: center; }
.pace-stat b { display: block; font: 800 20px var(--mono); color: var(--accent); }
.pace-stat b.ok { color: var(--ok); }
.pace-stat b.bad { color: var(--bad); }
.pace-stat span { font: 10.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.pace-verdict { font-size: 13.5px; line-height: 1.55; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; }
.pace-verdict.ok { background: rgba(39,192,138,.1); border: 1px solid rgba(39,192,138,.4); color: #d3f5e7; }
.pace-verdict.bad { background: rgba(232,88,75,.1); border: 1px solid rgba(232,88,75,.4); color: #f7ddda; }
.pace-slow { font: 12px var(--mono); color: var(--muted); margin-top: 8px; }
.my-big.my-bad { color: var(--bad); }

/* exam-day builder */
.exday-build { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.exday-build label { display: flex; flex-direction: column; gap: 6px; font: 600 12px var(--sans); color: var(--muted); }
.exday-build select, .exday-build input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: 14px var(--mono); width: 110px; }

/* mastery dashboard */
.mastery { max-width: 760px; }
.mastery h1 { font-size: 26px; margin: 4px 0 16px; }
.my-hero { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.my-stat { flex: 1; min-width: 140px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-align: center; }
.my-big { font: 800 28px var(--mono); color: var(--accent); }
.my-lbl { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }
.my-verdict { font-size: 14.5px; line-height: 1.6; color: #d3d8e2; background: var(--panel); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 13px 17px; margin-bottom: 14px; }
.my-reco { background: linear-gradient(180deg, rgba(232,179,57,.1), var(--panel)); border: 1px solid rgba(232,179,57,.45); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.my-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 2fr 52px auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.my-name { font-size: 13.5px; font-weight: 600; }
.my-n { display: block; font: 11px var(--mono); color: var(--dim); font-weight: 400; margin-top: 2px; }
.my-bar { height: 9px; background: #0d0d12; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.my-fill { height: 100%; border-radius: 5px; }
.my-fill.ok { background: var(--ok); }
.my-fill.mid { background: var(--accent); }
.my-fill.bad { background: var(--bad); }
.my-fill.low { background: var(--dim); }
.my-pct { font: 700 14px var(--mono); text-align: right; }
.my-pct.ok { color: var(--ok); }
.my-pct.mid { color: var(--accent); }
.my-pct.bad { color: var(--bad); }
.my-pct.low { color: var(--dim); }
.my-btns { display: flex; gap: 6px; }
.qbtn.my-sm { padding: 5px 11px; font-size: 12px; }
@media (max-width: 820px) {
  .my-row { grid-template-columns: 1fr 60px; }
  .my-bar { grid-column: 1 / -1; }
  .my-btns { grid-column: 1 / -1; }
}

/* question hints */
.q-hintwrap { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-hint-btn { background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 7px; padding: 4px 11px; font: 600 12px var(--sans); cursor: pointer; }
.q-hint-btn:hover:not(:disabled) { border-color: var(--accent); }
.q-hint-btn:disabled { opacity: .5; cursor: default; }
.q-hint { font: 12.5px var(--mono); color: var(--muted); }

/* ====================== accounts / login gate ====================== */
.authgate { position: fixed; inset: 0; z-index: 1000; background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(95,208,255,.02) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(95,208,255,.02) 47px 48px),
    radial-gradient(1100px 620px at 50% -12%, #1a2636, var(--bg));
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.authgate[hidden] { display: none; }
.authbox { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.auth-brand { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.auth-brand .bolt { color: var(--copper); filter: drop-shadow(0 0 6px rgba(244,166,58,.5)); }
.auth-back { background: transparent; border: 0; color: var(--muted); font: 600 12.5px var(--sans); cursor: pointer; padding: 0; margin-bottom: 14px; }
.auth-back:hover { color: var(--ink); }

/* ---- value-forward landing (first screen on nectrainer.com) ---- */
.authbox.landing { max-width: 600px; text-align: left; padding: 34px 34px 28px; }
.lp-brand { font: 800 21px var(--display); letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.lp-brand .bolt { color: var(--copper); filter: drop-shadow(0 0 7px rgba(244,166,58,.55)); }
.lp-eyebrow { font: 700 11px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--copper); margin: 18px 0 10px; }
.lp-h1 { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1.04; letter-spacing: .2px; margin: 0 0 13px; }
.lp-sub { color: var(--muted); font: 400 14.5px/1.6 var(--sans); margin: 0 0 22px; max-width: 54ch; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.qbtn.primary.lp-start { font-size: 15px; padding: 13px 22px; background: linear-gradient(180deg, var(--copper-2), var(--copper)); color: var(--copper-ink); box-shadow: 0 8px 22px -7px rgba(244,166,58,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.qbtn.primary.lp-start:hover { filter: brightness(1.05); }
.lp-login { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 13px 18px; font: 600 14px var(--sans); cursor: pointer; }
.lp-login:hover { border-color: var(--accent); color: var(--accent-soft); }
.lp-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; border-top: 1px solid var(--line); padding-top: 22px; }
.lp-feat { display: flex; gap: 11px; align-items: flex-start; }
.lp-fic { font-size: 21px; line-height: 1; flex-shrink: 0; }
.lp-feat b { display: block; font: 700 13.5px var(--sans); color: var(--ink); margin-bottom: 2px; }
.lp-feat span { font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.lp-trust { margin-top: 22px; font: 11px var(--mono); color: var(--dim); letter-spacing: .3px; }
@media (max-width: 560px) {
  .authbox.landing { padding: 26px 20px; }
  .lp-h1 { font-size: 28px; }
  .lp-feats { grid-template-columns: 1fr; gap: 13px; }
  .lp-cta { flex-direction: column; align-items: stretch; }
  .lp-start, .lp-login { text-align: center; justify-content: center; }
}
.auth-sub { color: var(--muted); font-size: 13px; margin: 6px 0 18px; }
.auth-loading { color: var(--dim); font: 13px var(--mono); margin-top: 16px; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; background: transparent; color: var(--muted); border: 0; border-radius: 7px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer; }
.auth-tab.active { background: #11303b; color: #cdeefb; }
.auth-form label { display: block; font: 600 12px var(--sans); color: var(--muted); margin-bottom: 14px; }
.auth-form input { display: block; width: 100%; margin-top: 6px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 14px var(--sans); box-sizing: border-box; }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(95,208,255,.45); }
.auth-hint { font: 11px var(--mono); color: var(--dim); margin: -8px 0 14px; }
.auth-err { color: var(--bad); font-size: 12.5px; min-height: 16px; margin-bottom: 10px; line-height: 1.45; }
.auth-submit { width: 100%; justify-content: center; }
.auth-guest { display: block; width: 100%; margin-top: 14px; background: transparent; color: var(--muted); border: 0; font-size: 12.5px; cursor: pointer; text-align: center; }
.auth-guest:hover { color: var(--ink); }
.auth-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.account { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 6px; }
.acct-name { font: 600 12.5px var(--sans); color: var(--ink); white-space: nowrap; }
.acct-guest { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.acct-btn { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; }
.acct-btn:hover { border-color: var(--accent); color: var(--ink); }
.acct-btn.primary { background: #11303b; border-color: var(--accent); color: #cdeefb; }
.acct-role { font: 700 9px var(--mono); letter-spacing: .6px; color: #0a0a0e; background: var(--warn); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }

/* app modal (account / admin) */
.appmodal { position: fixed; inset: 0; z-index: 1100; background: rgba(6,8,12,.72); display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; overflow-y: auto; }
.appmodal[hidden] { display: none; }
.appmodal-box { position: relative; width: 100%; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.modal-x { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--ink); }
.modal-h { font-size: 20px; margin: 0 0 4px; }
.modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.modal-label { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin-bottom: 8px; }
.acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin-bottom: 18px; }
.acct-form input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 14px var(--sans); }
.acct-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(95,208,255,.4); }
.acct-form .qbtn { align-self: flex-start; }
.acct-msg { font-size: 12.5px; color: var(--bad); min-height: 16px; }
.acct-msg.ok { color: var(--ok); }
.acct-logout { margin-top: 4px; }
.admin-count { font: 12px var(--mono); color: var(--muted); margin-bottom: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.admin-table td.n, .admin-table th.n { text-align: center; font-family: var(--mono); }
.admin-del { background: transparent; color: var(--bad); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font: 600 12px var(--sans); cursor: pointer; }
.admin-del:hover { border-color: var(--bad); background: rgba(232,88,75,.12); }
.admin-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.admin-edit { background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font: 600 12px var(--sans); cursor: pointer; }
.admin-edit:hover { border-color: var(--accent); background: rgba(95,208,255,.10); }

/* manual progress editor (owner) */
.pe { margin-top: 4px; }
.pe-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 0; z-index: 2; }
.pe-rank { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pe-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font: 700 13px var(--mono); color: #0a0a0e; flex-shrink: 0; }
.pe-count { font: 13px var(--mono); color: var(--muted); } .pe-count b { color: var(--accent); font-size: 16px; }
.pe-exams { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.pe-exams label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; cursor: pointer; }
.pe-dim { color: var(--dim); font: 11px var(--mono); }
.pe-bulk { display: flex; gap: 8px; margin-bottom: 12px; }
.pe-bulk button { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; font: 600 12px var(--sans); cursor: pointer; }
.pe-bulk button:hover { border-color: var(--accent); color: var(--ink); }
.pe-units { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.pe-unit { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pe-uhead { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panel2); }
.pe-utoggle { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--ink); font-size: 13.5px; flex: 1; }
.pe-ucount { font: 11px var(--mono); color: var(--dim); }
.pe-ucount.on { color: var(--ok); }
.pe-thru { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font: 600 11px var(--sans); cursor: pointer; }
.pe-thru:hover { border-color: var(--accent); color: var(--accent); }
.pe-lessons { padding: 4px 12px 8px; }
.pe-lesson { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: var(--muted); font-size: 12.5px; cursor: pointer; border-top: 1px solid rgba(255,255,255,.03); }
.pe-lesson:first-child { border-top: 0; }
.pe-lesson input:checked ~ .pe-lt { color: var(--ink); }
.pe-lt { flex: 1; } .pe-lr { font: 11px var(--mono); color: var(--dim); }
.pe-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pe-foot .acct-msg { margin-left: auto; }
.pe input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }

/* placement / diagnostic results */
.pl-reco { background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px; margin: 10px 0 4px; }
.pl-reco-h { font-size: 16px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pl-reco-h .pe-badge { width: 30px; height: 30px; }
.pl-reco p { color: var(--muted); margin: 8px 0 14px; }

/* Home dashboard */
.home { max-width: 900px; }
.home-eyebrow { font: 700 11px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--dim); }
.home-hero { position: relative; display: flex; gap: 20px; align-items: center; background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(95,208,255,.028) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(95,208,255,.028) 39px 40px),
    linear-gradient(150deg, #182534, var(--panel));
  border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; overflow: hidden; box-shadow: 0 24px 50px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03); }
.home-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--copper) 8%, var(--accent) 55%, transparent 85%); box-shadow: 0 0 14px rgba(244,166,58,.4); }
.home-hero::after { content: ""; position: absolute; top: -60%; right: -8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(244,166,58,.10), transparent 65%); pointer-events: none; }
/* rank spec-plate: engraved number, metallic bevel */
.home-badge { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 15px; font: 800 30px/1 var(--display); color: #0a0a0e; flex-shrink: 0;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12); }
.home-badge::after { content: ""; position: absolute; inset: 4px; border-radius: 11px; border: 1px solid rgba(0,0,0,.18); pointer-events: none; }
.home-hero-main { flex: 1; min-width: 0; }
.home-rank { font-size: 34px; margin: 5px 0 13px; line-height: 1.04; letter-spacing: .2px; }
.home-bar { position: relative; height: 10px; background: #0a0d13; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.home-fill { height: 100%; background: linear-gradient(90deg, var(--copper) 0%, var(--copper-2) 100%); border-radius: 6px; transition: width .6s cubic-bezier(.22,.61,.36,1); box-shadow: 0 0 12px rgba(244,166,58,.55), 0 0 3px rgba(255,194,113,.9); }
.home-bar-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font: 11.5px var(--mono); color: var(--muted); flex-wrap: wrap; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.home-card { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, transform .1s; }
.home-act:hover { border-color: var(--accent); transform: translateY(-1px); }
.home-act.focus:hover { border-color: var(--warn); }
.home-act-t { font-size: 16px; font-weight: 600; color: var(--ink); margin: 8px 0 10px; line-height: 1.3; }
.home-pct { font: 700 13px var(--mono); padding: 1px 7px; border-radius: 20px; margin-left: 4px; }
.home-pct.ok { color: var(--ok); background: rgba(39,192,138,.12); } .home-pct.mid { color: var(--warn); background: rgba(232,179,57,.12); } .home-pct.bad { color: var(--bad); background: rgba(232,88,75,.12); }
.home-act-cta { font: 600 13px var(--sans); color: var(--accent); }
.home-act.focus .home-act-cta { color: var(--warn); }
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.home-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.home-stat b { display: block; font: 800 20px var(--sans); color: var(--accent); line-height: 1.1; }
.home-stat span { font: 11px var(--mono); color: var(--muted); }
.home-sec { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 20px 0 10px; }
.home-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-tile { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; cursor: pointer; font: 600 13px var(--sans); color: var(--ink); transition: border-color .15s, background .15s; text-align: left; }
.home-tile:hover { border-color: var(--accent); background: var(--panel2); }
.home-tile-ic { font-size: 18px; }
.ln-home { background: #11303b; border-color: #23576a; color: #cdeefb; font-weight: 700; margin-bottom: 10px; }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } .home-stats { grid-template-columns: repeat(2, 1fr); } .home-tiles { grid-template-columns: repeat(2, 1fr); } }
/* Practice hub */
.phub { max-width: 780px; }
.phub-h1 { margin: 4px 0 6px; }
.phub-lede { color: var(--muted); font: 400 14px/1.55 var(--sans); margin: 0 0 20px; max-width: 640px; }
.phub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phub-card { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px; cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s, transform .06s; }
.phub-card:hover { border-color: var(--accent); background: var(--panel2); }
.phub-card:active { transform: scale(.99); }
.phub-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.phub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phub-t { font: 700 15px var(--sans); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phub-tag { font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 20px; padding: 2px 8px; }
.phub-d { font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.phub-arr { margin-left: auto; color: var(--muted); font-size: 18px; flex: 0 0 auto; }
.phub-card:hover .phub-arr { color: var(--accent); }
@media (max-width: 700px) { .phub-grid { grid-template-columns: 1fr; } .phub-arr { display: none; } }
/* mock exam history */
.home-hist { display: flex; gap: 18px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; }
.hh-bars { display: flex; gap: 7px; align-items: flex-end; height: 88px; flex: 1; min-width: 180px; }
.hh-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 42px; }
.hh-bar { width: 100%; height: 72px; background: #0d0d12; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.hh-fill { width: 100%; border-radius: 0 0 3px 3px; }
.hh-fill.ok { background: var(--ok); } .hh-fill.mid { background: var(--warn); } .hh-fill.bad { background: var(--bad); }
.hh-lbl { font: 10px var(--mono); color: var(--muted); }
.hh-stats { display: flex; gap: 18px; }
.hh-stats b { display: block; font: 800 18px var(--sans); color: var(--accent); line-height: 1.1; }
.hh-stats b.ok { color: var(--ok); }
.hh-stats span { font: 10px var(--mono); color: var(--muted); }

/* Open Book reference panel */
.ref-open { background: #11303b; color: #cdeefb; border: 1px solid #23576a; border-radius: 8px; padding: 6px 12px; font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.ref-open:hover { border-color: var(--accent); }
.sim-hud-right { display: flex; align-items: center; gap: 12px; }
.ls-crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.refpanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 94vw); z-index: 1400; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -6px 0 30px rgba(0,0,0,.55); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; }
.refpanel.open { transform: translateX(0); }
.ref-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.ref-head b { font-size: 15px; }
.ref-note { font: 11px var(--mono); color: var(--dim); margin-top: 2px; }
.ref-x { background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.ref-x:hover { color: var(--ink); }
.ref-search { margin: 12px 16px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: 13px var(--sans); }
.ref-search:focus { outline: none; border-color: var(--accent); }
.ref-body { flex: 1; overflow-y: auto; padding: 0 16px 24px; }
.ref-grp { margin-bottom: 14px; }
.ref-glabel { font: 700 10.5px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--accent); padding: 6px 0 4px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.ref-row { display: flex; gap: 12px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.03); }
.ref-row:first-of-type { border-top: 0; }
.ref-k { flex-shrink: 0; min-width: 92px; font: 700 12px var(--mono); color: var(--ink); }
.ref-v { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ref-empty { color: var(--muted); font-size: 13px; padding: 20px 4px; }
/* floating Open Book button — available on every course screen */
.ref-fab { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 1350; width: 52px; height: 52px; border-radius: 50%; background: #11303b; color: #cdeefb; border: 1px solid var(--accent); font-size: 22px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.ref-fab:hover { background: #164253; }
body[data-view="learn"] .ref-fab { display: block; }
body.ref-panel-open .ref-fab { display: none; }

/* mobile bottom tab bar — one-tap access to the core areas (phone only) */
/* While the login/auth gate is up, hide the whole app chrome so only the gate shows. */
body.gated .ref-fab, body.gated .mobilenav { display: none !important; }
body.gated #topbar, body.gated #viewport { display: none !important; }
.mobilenav { display: none; }
@media (max-width: 820px) {
  body[data-view="learn"] .mobilenav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250;
    background: var(--bg2); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobilenav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border: 0; color: var(--muted); padding: 8px 2px 9px; font: 600 10.5px var(--sans); cursor: pointer; }
  .mobilenav button.active { color: var(--accent); }
  .mobilenav .mn-ic { font-size: 19px; line-height: 1; }
  .ref-fab { display: none !important; }        /* the Book tab replaces the floating button on phones */
  #learn-content { padding-bottom: 84px; }       /* clear the bottom bar */
}

/* state exam configurator */
.st-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 14px; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.st-conf { font: 700 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); }
.st-conf.ok { color: var(--ok); border-color: rgba(39,192,138,.5); } .st-conf.mid { color: var(--warn); border-color: rgba(232,179,57,.5); } .st-conf.bad { color: var(--bad); border-color: rgba(232,88,75,.5); }
.st-local { background: #2a2410; border: 1px solid rgba(232,179,57,.4); border-radius: 9px; padding: 10px 12px; color: #e9dcae; font-size: 12.5px; margin-bottom: 12px; }
.st-ed { border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin: 12px 0; border: 1px solid var(--line); }
.st-ed.ok { background: #0f2e22; border-color: rgba(39,192,138,.4); color: #bfeeda; }
.st-ed.mid { background: #2a2410; border-color: rgba(232,179,57,.4); color: #e9dcae; }
.st-ed.bad { background: #2e1414; border-color: rgba(232,88,75,.4); color: #f0c2bd; }
.st-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 6px; }
.st-src { text-decoration: none; }
a.qbtn.st-src { display: inline-flex; align-items: center; }

/* per-distractor "why that's wrong" coaching line */
.q-why { margin-top: 6px; padding: 7px 10px; background: rgba(232,88,75,.08); border-left: 3px solid var(--bad); border-radius: 5px; font-size: 12.5px; color: var(--ink); }
.q-why b { color: #f0a59d; font-weight: 600; }
.simr-q .q-why { margin-top: 8px; }

/* calc drills */
.drills { max-width: 720px; }
.drill-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.drill-chip { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; font: 600 12.5px var(--sans); cursor: pointer; }
.drill-chip:hover { border-color: var(--accent); color: var(--ink); }
.drill-chip.active { background: #11303b; border-color: var(--accent); color: #cdeefb; }
.drill-score { font: 13px var(--mono); color: var(--muted); min-height: 18px; margin-bottom: 8px; }
.drill-score b { color: var(--accent); } .drill-score b.ok { color: var(--ok); }
.drill-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.drill-ref { font: 700 10px var(--mono); letter-spacing: .5px; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
.drill-q { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; }
.drill-in { display: flex; gap: 8px; }
.drill-in input { flex: 1; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; font: 15px var(--mono); }
.drill-in input:focus { border-color: var(--accent); outline: none; }
.drill-in input:disabled { opacity: .7; }
.drill-fb { margin: 14px 0 10px; font-size: 13.5px; }
.drill-fb b { color: var(--ink); }
.drill-steps { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.drill-steps b { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.drill-steps ol { margin: 8px 0 0; padding-left: 20px; }
.drill-steps li { margin: 5px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* printable cheat sheet — styled as a white paper sheet on screen and in print */
.cheat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.cheat-head .qbtn { flex-shrink: 0; }
.cheat-sheet { background: #fff; color: #14161a; padding: 20px 22px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); max-width: 900px; }
.cheat-title { font: 800 16px var(--sans); text-align: center; letter-spacing: .3px; border-bottom: 2px solid #14161a; padding-bottom: 7px; margin-bottom: 12px; }
.cheat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; }
.cheat-card { break-inside: avoid; }
.cheat-card h3 { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .4px; color: #0a4d73; margin: 0 0 4px; border-bottom: 1px solid #c9ced6; padding-bottom: 2px; }
.cheat-card table { width: 100%; border-collapse: collapse; }
.cheat-card td { font-size: 11px; padding: 1.5px 0; vertical-align: top; line-height: 1.35; }
.cheat-card .cn { font-weight: 700; white-space: nowrap; padding-right: 10px; color: #14161a; font-family: var(--mono); }
.cheat-card .cd { color: #5a626e; }
.cheat-foot { text-align: center; font-size: 9px; color: #8a92a0; margin-top: 12px; border-top: 1px solid #c9ced6; padding-top: 6px; }
@media (max-width: 640px) { .cheat-grid { grid-template-columns: 1fr; } }
@media print {
  body * { visibility: hidden !important; }
  .cheat-sheet, .cheat-sheet * { visibility: visible !important; }
  .cheat-sheet { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; border-radius: 0; padding: 0; }
  .cheat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
  .cheat-card h3 { color: #000; }
  @page { margin: 0.4in; }
}

/* ====================== career progression ====================== */
/* shared badge */
.rk-badge, .rg-badge, .cr-badge, .ru-badge { display:grid; place-items:center; font-family:var(--display); font-weight:800; color:#0a0a0e; flex-shrink:0; border-radius:10px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.32), inset 0 -2px 5px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px -5px rgba(0,0,0,.6); }
.rk-badge { width:38px; height:38px; font-size:14px; }
.rg-badge { width:42px; height:42px; font-size:15px; }
.cr-badge { width:64px; height:64px; font-size:24px; border-radius:15px; }
.ru-badge { width:46px; height:46px; font-size:18px; border-radius:11px; }
.app1 { background:linear-gradient(160deg,#8b94a4,#59616f); } .app2 { background:linear-gradient(160deg,#74b6d8,#4586ad); }
.app3 { background:linear-gradient(160deg,#5f93ff,#3d6ee0); } .app4 { background:linear-gradient(160deg,#74d7ff,#43a7d4); }
.jw { background:linear-gradient(160deg,#f7b34c,#d9821f); } .master { background:linear-gradient(160deg,#ffd75f,#e0a41f); }
.inspector { background:linear-gradient(135deg,#b06ff7,#f1c40f); color:#1a0a2e; }

/* rank card (nav top) */
.rankcard { position:relative; display:flex; gap:11px; align-items:center; width:100%; text-align:left; background:linear-gradient(135deg,#1c2433,#161b26); border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:12px; overflow:hidden; box-shadow:0 8px 20px -14px rgba(0,0,0,.7); }
.rankcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--copper),var(--accent)); }
.rankcard:hover, .rankcard.active { border-color:var(--accent-line); }
.rk-info { flex:1; min-width:0; }
.rk-label { font:9px var(--mono); color:var(--dim); letter-spacing:.7px; }
.rk-title { font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-xpbar { height:5px; background:#0a0d13; border-radius:4px; overflow:hidden; margin:5px 0 4px; }
.rk-xpfill { height:100%; background:linear-gradient(90deg,var(--copper),var(--copper-2)); box-shadow:0 0 8px rgba(244,166,58,.5); transition:width .4s; }
.rk-meta { font:10px var(--mono); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* career view */
.career { max-width:780px; }
.cr-hero { display:flex; gap:18px; align-items:center; margin-bottom:22px; }
.cr-hero h1 { margin:2px 0 4px; font-size:27px; }
.cr-sub { color:var(--muted); margin:0 0 8px; }
.cr-xp { display:inline-block; font:700 13px var(--mono); color:var(--accent); background:#11303b; border:1px solid #1d4a5a; border-radius:20px; padding:3px 12px; }
.cr-stats { display:flex; gap:12px; margin-bottom:26px; }
.cr-tile { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; }
.ct-n { font:700 22px var(--mono); color:var(--ink); }
.ct-l { font:11px var(--mono); color:var(--muted); margin-top:3px; }
.cr-h { font-size:16px; margin:0 0 14px; }
.ladder { display:flex; flex-direction:column; gap:10px; }
.rung { display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:13px 15px; }
.rung.current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:#11242b; }
.rung.locked { opacity:.6; }
.rung.locked .rg-badge { filter:grayscale(.7); opacity:.5; }
.rg-body { flex:1; min-width:0; }
.rg-title { font-weight:700; color:var(--ink); font-size:14.5px; }
.rung.done .rg-title { color:var(--ok); }
.rg-you { font:9px var(--mono); background:var(--accent); color:#06222e; border-radius:10px; padding:1px 8px; margin-left:8px; vertical-align:middle; }
.rg-sub { color:var(--muted); font-size:12.5px; margin:2px 0 4px; }
.rg-need { font:11px var(--mono); color:var(--dim); }
.rung.done .rg-need { color:var(--ok); }
.rg-lock { font:11px var(--mono); color:var(--dim); margin-top:8px; }
.mile-btn { margin-top:9px; }

/* rank-up toast */
#rankup { position:fixed; top:64px; left:50%; transform:translate(-50%,-20px); display:flex; gap:12px; align-items:center; background:linear-gradient(135deg,#1a1f33,#11303b); border:1px solid var(--accent); border-radius:12px; padding:12px 20px; box-shadow:0 14px 50px rgba(0,0,0,.6); opacity:0; pointer-events:none; z-index:80; transition:all .35s; }
#rankup.show { opacity:1; transform:translate(-50%,0); }
.ru-h { font:9px var(--mono); color:var(--accent); letter-spacing:1px; }
.ru-t { font:700 16px var(--sans); color:var(--ink); }

/* ====================== engagement (streaks, toasts, achievements) ====================== */
.ln-htop { display:flex; align-items:center; gap:8px; }
.streak-chip { font:11px var(--mono); color:var(--warn); background:#2e2410; border:1px solid #5a4a1d; border-radius:20px; padding:1px 8px; }

/* toasts */
#toasts { position:fixed; top:64px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:90; pointer-events:none; align-items:center; }
.toastcard { display:flex; gap:12px; align-items:center; background:linear-gradient(135deg,#1a1f33,#11303b); border:1px solid var(--accent); border-radius:12px; padding:11px 18px; box-shadow:0 14px 50px rgba(0,0,0,.6); opacity:0; transform:translateY(-16px); transition:all .35s; }
.toastcard.show { opacity:1; transform:translateY(0); }
.toastcard.ach { border-color:var(--warn); background:linear-gradient(135deg,#26210f,#2e2410); }
.toastcard .ach-ic { font-size:26px; width:30px; text-align:center; }

/* confetti overlay */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:95; }

/* XP pop */
.xp-pop { display:inline-block; color:var(--accent); font:700 12px var(--mono); background:#11303b; border:1px solid #1d4a5a; border-radius:20px; padding:1px 9px; margin-left:6px; animation:xppop .5s ease; }
@keyframes xppop { 0%{transform:scale(.5);opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }

/* achievements grid */
.ach-count { font:11px var(--mono); color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:1px 8px; }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:10px; margin-top:4px; }
.ach { display:flex; gap:11px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 13px; opacity:.5; filter:grayscale(.8); }
.ach.got { opacity:1; filter:none; border-color:#5a4a1d; background:#1c1a12; }
.ach .ach-ic { font-size:22px; flex-shrink:0; }
.ach-n { font-weight:700; font-size:13px; color:var(--ink); }
.ach-d { font-size:11px; color:var(--muted); margin-top:1px; }

/* ====================== daily challenge ====================== */
.daily { max-width:640px; }
.daily h1 { font-size:26px; margin:4px 0 12px; }
.daily-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--warn); margin-left:6px; vertical-align:middle; box-shadow:0 0 6px var(--warn); }
.daily-done { font:700 16px var(--sans); padding:12px 16px; border-radius:10px; margin:12px 0 16px; }
.daily-done.ok { background:#0f2e22; color:var(--ok); border:1px solid #1d5240; }
.daily-done.bad { background:#2e1414; color:var(--bad); border:1px solid #5a2b2b; }
.daily .q.done .q-fb { display:block; }
.daily-next { color:var(--muted); font:12px var(--mono); margin-top:14px; }

/* ====================== certificate ====================== */
.cert-wrap { max-width:920px; }
.cert-actions { display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
#certName { background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:9px 12px; font:14px var(--sans); flex:1; max-width:280px; }
#certName:focus { outline:none; border-color:var(--accent); }
.cert-btn { margin-top:12px; }
.certificate { background:#faf6ec; border-radius:6px; padding:14px; box-shadow:0 14px 50px rgba(0,0,0,.55); }
.cert-border { border:3px double #b08d2e; border-radius:4px; padding:44px 40px; text-align:center; background:linear-gradient(#fffdf6,#f4ecd6); }
.cert-seal { font-size:46px; color:#c19a33; line-height:1; }
.cert-kicker { font:11px var(--mono); letter-spacing:2px; color:#8a6d2e; margin:8px 0 18px; }
.cert-h { font:700 34px Georgia,'Times New Roman',serif; color:#1a1a1a; margin-bottom:18px; }
.cert-line { font:14px Georgia,serif; color:#555; margin:8px 0; }
.cert-name { font:italic 700 30px Georgia,serif; color:#7a5c12; border-bottom:2px solid #cbb87a; display:inline-block; padding:2px 34px 6px; margin:8px 0 16px; min-width:240px; }
.cert-rank { font:700 24px Georgia,serif; color:#1a1a1a; margin:8px 0 28px; }
.cert-foot { display:flex; justify-content:space-between; font:11px var(--mono); color:#776a42; border-top:1px solid #d8c98f; padding-top:14px; margin-top:10px; }

@media print {
  body.printing-cert > * { display:none !important; }
  body.printing-cert #viewport { display:block !important; position:static; }
  body.printing-cert .view { display:none !important; }
  body.printing-cert #view-learn { display:block !important; }
  body.printing-cert #learn-nav, body.printing-cert .cert-actions, body.printing-cert #toasts { display:none !important; }
  body.printing-cert #learn-main { display:block !important; overflow:visible; }
  body.printing-cert #learn-content { max-width:none; padding:0; }
  body.printing-cert .certificate { box-shadow:none; }
}

/* ====================== search / review / free-nav ====================== */
#learnSearch { width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 11px; font:12px var(--sans); margin:4px 0 10px; }
#learnSearch:focus { outline:none; border-color:var(--accent); }
.ln-ref-sm { font:10px var(--mono); color:var(--dim); }
.ln-lesson.active .ln-ref-sm { color:#9fd8ef; }
.ln-empty { color:var(--muted); font-size:12px; padding:10px 6px; line-height:1.5; }
.ln-empty b { color:var(--ink); }
.rev-count { display:inline-block; background:var(--bad); color:#1a0606; font:700 10px var(--mono); border-radius:10px; padding:0 6px; margin-left:6px; }

/* ====================== code navigator ====================== */
.navigator { max-width:820px; }
.navigator h1 { font-size:26px; margin:4px 0 12px; }
.nav-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(135deg,#11303b,#1a1f33); border:1px solid #1d4a5a; border-radius:11px; padding:14px 18px; margin:14px 0 10px; }
.nav-cta b { font-size:15px; }
.tbl-grid, .nav-arts { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:8px; }
.nav-ch { margin-bottom:16px; }
.nav-ch-h { font:700 13px var(--sans); color:var(--ink); margin:0 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-ch-n { background:var(--accent); color:#06222e; border-radius:6px; padding:1px 8px; font:11px var(--mono); }
.nav-ch-note { font:10px var(--mono); color:var(--dim); font-weight:400; }
.art { display:flex; align-items:center; gap:10px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 11px; color:var(--muted); width:100%; }
.art.link { cursor:pointer; }
.art.link:hover { border-color:var(--accent); background:var(--panel2); }
.art:not(.link) { cursor:default; }
.art-n { font:700 12px var(--mono); color:var(--accent); min-width:48px; flex-shrink:0; }
.art-b { flex:1; min-width:0; }
.art-t { display:block; color:var(--ink); font-size:13px; }
.art-d { display:block; color:var(--dim); font:10px var(--mono); margin-top:2px; }
.art-go { color:var(--accent); font-weight:700; }

/* ====================== full index filter + speed round ====================== */
.nav-ctas { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 10px; }
@media (max-width:760px){ .nav-ctas { grid-template-columns:1fr; } }
.idx-count { font:10px var(--mono); color:var(--dim); background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:1px 8px; }
.art.ref { opacity:.8; }
.art.ref .art-n { color:var(--muted); }
#navFilter { width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 12px; font:13px var(--sans); margin:2px 0 12px; }
#navFilter:focus { outline:none; border-color:var(--accent); }

.speed-intro { max-width:620px; } .speed-intro h1 { font-size:26px; margin:4px 0 12px; }
.speed { max-width:640px; margin:0 auto; }
.speed-hud { display:flex; justify-content:space-between; align-items:center; margin:10px 0 22px; }
.speed-score { font:800 42px var(--mono); color:var(--ok); }
.speed-time { font:800 30px var(--mono); color:var(--accent); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 18px; }
.speed-q { font:600 19px var(--sans); color:var(--ink); margin-bottom:16px; line-height:1.4; min-height:54px; }
.speed-opts { display:grid; gap:10px; }
.speed-opt { text-align:left; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font:15px var(--sans); transition:all .1s; }
.speed-opt:hover { border-color:var(--accent); }
.speed-opt.ok { border-color:var(--ok); background:#0f2e22; color:var(--ok); }
.speed-opt.bad { border-color:var(--bad); background:#2e1414; color:var(--bad); }

/* ====================== accessibility ====================== */
/* Visible keyboard focus on every interactive element (mouse clicks unaffected). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
.tool:focus-visible, .ln-lesson:focus-visible, .ln-exam:focus-visible, .psheet-btn:focus-visible,
.art:focus-visible, .speed-opt:focus-visible, .rankcard:focus-visible, .qbtn:focus-visible,
#viewtabs button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px;
}
/* Quiz/exam option focus (radio is the real target inside the styled label). */
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Inputs that previously killed the outline now get an accent ring too. */
.qnum:focus, #certName:focus, #learnSearch:focus, #navFilter:focus { box-shadow: 0 0 0 2px rgba(95,208,255,.55); }

/* Respect reduced-motion: kill long/looping animations & transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Visually-hidden but screen-reader-available (per-view headings, etc.) */
.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; }

/* clickable NEC citations in lessons (jump to the Code Navigator) */
.ls-body .ref.ref-link { cursor: pointer; border-bottom: 1px dotted currentColor; }
.ls-body .ref.ref-link:hover { border-bottom-style: solid; filter: brightness(1.18); }
.ls-ref.ref-link { cursor: pointer; }
.ls-ref.ref-link::after { content: ' 🔎'; font-size: 9px; opacity: .7; }
.ls-ref.ref-link:hover { background: #16414f; }
.ref-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ====================== responsive (narrow panels / mobile) ====================== */
@media (max-width: 820px) {
  /* Topbar: allow it to wrap so nothing is clipped; row 1 = menu + brand + account, view tabs wrap below */
  #topbar { gap: 8px 10px; padding: 8px 12px; position: relative; z-index: 1300; flex-wrap: wrap; }
  .brand { font-size: 14px; }
  .brand-ed { display: none; }                 /* drop the NEC-2020 chip on small screens */
  #viewtabs .tab-group-label, #viewtabs .tab-div { display: none; }  /* slim the tab strip */
  #viewtabs { order: 3; width: 100%; gap: 6px; }
  .account { order: 2; }
  .acct-btn { padding: 5px 9px; }
  /* Show the hamburger only on the Learn (course) view */
  body[data-view="learn"] .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* LEARN: course nav becomes a full-height slide-in drawer; content is full-width.
     The drawer starts just below the (possibly wrapped) topbar via --topbar-h set in JS. */
  #view-learn.active { flex-direction: row; }
  #learn-nav {
    position: fixed; top: var(--topbar-h, 54px); bottom: 0; left: 0;
    width: min(86vw, 320px); max-height: none;
    z-index: 1200; padding-top: 12px;
    border-right: 1px solid var(--line); border-bottom: 0;
    box-shadow: 3px 0 26px rgba(0,0,0,.5);
    transform: translateX(-105%); transition: transform .25s ease;
  }
  body.nav-open #learn-nav { transform: translateX(0); }
  .nav-backdrop { display: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: var(--topbar-h, 54px) 0 0 0; z-index: 1150; background: rgba(0,0,0,.55); }
  #learn-main { width: 100%; flex: 1 1 auto; }
  #learn-content { padding: 18px 14px 72px; }
  .lesson h1 { font-size: 22px; }

  /* BUILD: stack the palette / canvas / inspector columns */
  #view-build main { flex-direction: column; height: auto; min-height: 100%; overflow-y: auto; }
  #left, #right { width: 100%; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  #center { overflow-x: auto; }

  /* PRINTS: stack the sheet list above the sheet */
  #view-prints.active { flex-direction: column; }
  #prints-nav { width: 100%; max-height: 32vh; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  #viewtabs button { padding: 6px 11px; }
  #viewtabs button.tab-2nd { padding: 6px 9px; }
  .cr-stats { flex-wrap: wrap; }
  .cr-tile { min-width: 44%; }
}

/* ====================== wire / conductor reference tables ====================== */
.reftables { max-width: 820px; }
.reftables h1 { font-size: 26px; margin: 4px 0 12px; }
.reftable-note { font: 11px var(--mono); color: var(--dim); margin: 0 0 12px; line-height: 1.5; }
.reftable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.reftable { width: 100%; border-collapse: collapse; font: 12px var(--mono); white-space: nowrap; min-width: 540px; }
.reftable thead th { background: var(--panel2); color: var(--muted); padding: 6px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.reftable th.grp { text-align: center; border-left: 1px solid var(--line); }
.reftable th.grp.cu { color: #e0a76a; } .reftable th.grp.al { color: #b8c0cc; }
.reftable th.sz { text-align: left; }
.reftable th.sz small { color: var(--dim); font-weight: 400; }
.reftable th.hl, .reftable td.hl { background: rgba(95,208,255,.09); }
.reftable td { padding: 5px 14px; border-bottom: 1px solid #232330; color: var(--ink); }
.reftable td.sz { text-align: left; font-weight: 700; }
.reftable td.n { text-align: right; }
.reftable td:nth-child(5), .reftable th.grp.al { border-left: 1px solid var(--line); }
.reftable tbody tr:hover td { background: rgba(255,255,255,.03); }
.reftable tbody tr:hover td.hl { background: rgba(95,208,255,.14); }
.qref { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; margin-bottom: 9px; }
.qref b { color: var(--accent); font-size: 12px; display: block; margin-bottom: 4px; }
.qref div { color: var(--muted); font-size: 13px; line-height: 1.55; }
.qref div.mono { font: 11px var(--mono); color: var(--muted); }

/* ====================== Definitions glossary ====================== */
.gloss { max-width: 820px; }
.gloss h1 { font-size: 26px; margin: 4px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gloss-ct { font: 11px var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .6px; border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; }
#glossSearch { width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; font: 14px var(--sans); margin: 6px 0 6px; }
#glossSearch:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(95,208,255,.55); }
.gloss-count { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; }
.gloss-cat { margin-bottom: 22px; }
.gloss-ch { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.gloss-item { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; margin-bottom: 9px; }
.gloss-term { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.gloss-ref { font: 11px var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; font-weight: 400; }
.gloss-plain { font-size: 14.5px; line-height: 1.62; color: #e3e7ee; }
.gloss-formal { margin-top: 10px; }
.gloss-formal > summary { cursor: pointer; font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .5px; color: var(--dim); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.gloss-formal > summary::-webkit-details-marker { display: none; }
.gloss-formal > summary::before { content: '▸'; color: var(--accent); font-size: 9px; }
.gloss-formal[open] > summary::before { content: '▾'; }
.gloss-formal > summary:hover { color: var(--muted); }
.gloss-def { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--line); }
.gloss-note { margin-top: 10px; padding: 8px 12px; background: var(--panel2); border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.gloss-note b { color: var(--accent); }

/* ====================== NEC calculators ====================== */
.calcs { max-width: 760px; }
.calcs h1 { font-size: 26px; margin: 4px 0 12px; }
.calc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; margin-bottom: 12px; }
.calc-card h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calc-ref { font: 10px var(--mono); color: var(--accent); background: #11303b; border: 1px solid #1d4a5a; border-radius: 20px; padding: 2px 9px; font-weight: 400; }
.calc-in { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.calc-in label { display: flex; flex-direction: column; gap: 4px; font: 11px var(--mono); color: var(--muted); }
.calc-in input, .calc-in select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: 13px var(--mono); }
.calc-in input[type=number] { width: 82px; }
.calc-in select { min-width: 78px; }
.calc-in .ckl { flex-direction: row; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; padding-bottom: 6px; }
.calc-in .ckl input { width: auto; }
.calc-out { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 11px; }
.co-main { font: 700 17px var(--mono); color: var(--ink); }
.co-main.ok { color: var(--ok); } .co-main.bad { color: var(--bad); }
.co-sub { font: 11px var(--mono); color: var(--muted); font-weight: 400; }
.co-steps { margin-top: 7px; font: 12px var(--mono); color: var(--muted); line-height: 1.55; }

/* exam topic breakdown */
.exr-topics { margin: 14px 0; }
.exr-th { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.topic-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.tr-name { width: 210px; font-size: 12px; color: var(--ink); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-bar { flex: 1; height: 8px; background: #0d0d12; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.tr-fill { height: 100%; }
.tr-fill.ok { background: var(--ok); } .tr-fill.mid { background: var(--warn); } .tr-fill.bad { background: var(--bad); }
.tr-pct { width: 46px; text-align: right; font: 11px var(--mono); color: var(--muted); }

/* dwelling load-calc itemized table */
.lc-table { width: 100%; border-collapse: collapse; font: 11px var(--mono); margin: 11px 0 4px; }
.lc-table th { color: var(--dim); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.lc-table th.n, .lc-table td.n { text-align: right; }
.lc-table td { padding: 3px 8px; border-bottom: 1px solid #232330; color: var(--muted); }
.lc-table td:first-child { color: var(--ink); }
.lc-table tfoot td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }

/* ============================================================================
 * Visual polish (v52) — purely cosmetic; additive, no layout/logic changes.
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Gentle entrance for the big view containers when they (re)render. */
  .home, .phub, .exam-intro, .edpage { animation: viewIn .32s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* Animated sheen sweeping across the progress fill. */
  .home-fill { position: relative; overflow: hidden; }
  .home-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: fillSheen 2.6s ease-in-out 1s infinite; }
  @keyframes fillSheen { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(320%); } }
}
/* The lightning bolt gets a soft glow so the brand pops. */
.brand .bolt, .auth-brand .bolt { filter: drop-shadow(0 0 6px rgba(232,179,57,.55)); }

/* Cards: real depth + a crisper accent hover. Applies everywhere card-like. */
.home-card, .home-stat, .phub-card, .home-hist, .st-card {
  box-shadow: 0 10px 26px -20px rgba(0,0,0,.8);
  transition: border-color .16s, transform .12s, box-shadow .16s, background .16s;
}
.home-act:hover, .phub-card:hover { box-shadow: 0 16px 34px -20px rgba(95,208,255,.35); }
.home-stat { position: relative; overflow: hidden; }
.home-stat::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(var(--accent), transparent); opacity: .55; }

/* Practice-hub icons sit in a tinted rounded tile for a more designed feel. */
.phub-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-size: 23px;
  background: linear-gradient(150deg, rgba(95,208,255,.14), rgba(95,208,255,.04)); border: 1px solid rgba(95,208,255,.16); }
.phub-card:hover .phub-ic { border-color: rgba(95,208,255,.4); }

/* Section labels get a small accent tick. */
.home-sec { position: relative; padding-left: 12px; }
.home-sec::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Mobile bottom nav: active tab gets a glowing top indicator + lifted icon. */
@media (max-width: 820px) {
  .mobilenav button { position: relative; transition: color .15s; }
  .mobilenav button::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); opacity: 0; transition: opacity .18s; }
  .mobilenav button.active::before { opacity: 1; box-shadow: 0 0 10px var(--accent); }
  .mobilenav button.active .mn-ic { filter: drop-shadow(0 0 7px rgba(95,208,255,.6)); }
  .mobilenav { box-shadow: 0 -8px 24px -12px rgba(0,0,0,.7); backdrop-filter: blur(8px); }
}