/* OPTIONS PRO — Apropos Group LLC · Platinum treatment */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#060b1a; --bg2:#0a1330; --deep:#03060f;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.025);
  --line:rgba(146,166,196,.16); --line2:rgba(146,166,196,.28);
  --white:#eef3fb; --silver:#c3d0e8; --muted:#8fa1bd;
  --accent:#5bd3ff; --accent2:#1ea7ff; --gold:#c8a84b; --green:#54e6a8; --red:#ff7a90;
  --disp:'Cormorant',Georgia,serif; --body:'Jost',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--silver);font-weight:300;line-height:1.65;min-height:100vh;
  background:
    radial-gradient(circle at 16% -4%,rgba(30,167,255,.16),transparent 34%),
    radial-gradient(circle at 88% 6%,rgba(91,211,255,.08),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--deep));
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(91,211,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(91,211,255,.028) 1px,transparent 1px);
  background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 70%)}
a{color:inherit;text-decoration:none}
.shell{position:relative;z-index:1;width:min(1240px,94%);margin:0 auto;padding-bottom:5rem}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:1.5rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.82rem;
  background:linear-gradient(135deg,#fff,var(--accent) 55%,var(--accent2));color:#04101f;box-shadow:0 0 30px rgba(30,167,255,.25)}
.brand .bname{font-family:var(--disp);font-size:1.5rem;font-weight:600;color:var(--white);letter-spacing:.01em;line-height:1}
.brand .bsub{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.status-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(30,167,255,.08);border:1px solid rgba(91,211,255,.24);border-radius:999px;padding:.5rem 1rem}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(84,230,168,.16)}

/* hero */
.hero{padding:2.5rem 0 2.8rem;max-width:880px}
.eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}
.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.015em;color:var(--white);margin-bottom:1.1rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-tagline{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:.2rem 0 1.4rem;display:flex;align-items:center;gap:.6rem}
.hero-tagline::before{content:"";width:24px;height:1px;background:var(--gold)}
.hero-copy{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted);max-width:60ch}
.hero-copy strong{color:var(--silver);font-weight:500}

/* layout */
.deck{display:grid;grid-template-columns:1.25fr .85fr;gap:20px;align-items:start;margin-bottom:20px}
.panel{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,2.4vw,2rem);position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(91,211,255,.4),transparent)}
.panel-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.panel-title{font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--white);margin-bottom:1.1rem;letter-spacing:-.01em}

/* requirement */
.requirement{border:1px solid rgba(200,168,75,.3);background:linear-gradient(135deg,rgba(200,168,75,.08),rgba(30,167,255,.04));border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.4rem}
.requirement span{font-size:.82rem;color:var(--muted);display:block;margin-bottom:.35rem}
.requirement strong{font-family:var(--mono);font-size:1.05rem;color:var(--gold);font-weight:600;letter-spacing:.02em}

/* controls */
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1.3rem}
label{display:flex;flex-direction:column;gap:.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input,select{font-family:var(--body);font-weight:400;font-size:.98rem;color:var(--white);background:rgba(3,7,15,.55);border:1px solid var(--line2);border-radius:11px;padding:.78rem .9rem;transition:border-color .2s,box-shadow .2s;width:100%}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,211,255,.12)}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238fa1bd' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
option{background:#0a1330;color:var(--white)}

.button-row{display:flex;gap:12px;flex-wrap:wrap}
button{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.06em;border:0;border-radius:11px;padding:.9rem 1.6rem;cursor:pointer;transition:transform .18s,box-shadow .25s,background .25s}
#runScanBtn{background:linear-gradient(135deg,var(--white),var(--accent) 48%,var(--accent2));color:#04101f;box-shadow:0 10px 30px rgba(30,167,255,.22)}
#runScanBtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(30,167,255,.3)}
.secondary{background:transparent;color:var(--silver);border:1px solid var(--line2)}
.secondary:hover{border-color:var(--accent);color:var(--white)}

/* filter blueprint */
.blueprint{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.1rem}
.blueprint h3{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.blueprint pre{font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--accent);background:rgba(3,7,15,.5);border:1px solid var(--line);border-radius:12px;padding:1rem;overflow:auto}

/* readout */
.readout{text-align:center;padding-top:.4rem}
.bignum{font-family:var(--disp);font-weight:600;font-size:clamp(3.4rem,7vw,5rem);line-height:1;color:var(--white);background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.result-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.6rem 0 1.2rem;text-align:left}
.metric-grid>div{background:rgba(3,7,15,.4);border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem}
.metric-grid span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.metric-grid strong{font-family:var(--mono);font-size:.95rem;color:var(--white);font-weight:600}
.explanation{font-size:.88rem;color:var(--muted);line-height:1.65;border-top:1px solid var(--line);padding-top:1rem;text-align:left}
.explanation strong{color:var(--silver);font-weight:500}

/* results table */
.results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:1.2rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:860px}
thead th{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.95rem 1rem;background:rgba(3,7,15,.5);border-bottom:1px solid var(--line2);white-space:nowrap}
tbody td{padding:.85rem 1rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.82rem;color:var(--silver);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(91,211,255,.04)}
tbody td strong{color:var(--white);font-weight:600}
td.empty{text-align:center;color:var(--muted);font-family:var(--body);padding:2.4rem;font-size:.95rem}
.sig{display:inline-block;font-family:var(--mono);font-size:.62rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line2)}
.sig.high{color:var(--green);border-color:rgba(84,230,168,.4);background:rgba(84,230,168,.08)}
.sig.core{color:var(--accent);border-color:rgba(91,211,255,.4);background:rgba(91,211,255,.08)}
.sig.risk{color:var(--gold);border-color:rgba(200,168,75,.4);background:rgba(200,168,75,.08)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* course navigation (shared across lesson / cheat-sheet / flashcards / exam) */
.coursenav{display:flex;flex-wrap:wrap;gap:8px;max-width:880px;margin:0 auto 1.8rem;justify-content:center}
.coursenav .cn{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.5rem .95rem;transition:.2s}
.coursenav .cn:hover{color:var(--white);border-color:var(--line2)}
.coursenav .cn.active{color:#04101f;background:linear-gradient(135deg,#fff,var(--accent) 60%,var(--accent2));border-color:transparent;font-weight:600}
.prevnext{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:880px;margin:2.2rem auto 0;border-top:1px solid var(--line);padding-top:1.5rem}
.prevnext .pn{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(91,211,255,.28);background:rgba(30,167,255,.06);border-radius:999px;padding:.7rem 1.2rem;transition:.2s}
.prevnext .pn:hover{background:rgba(30,167,255,.16);color:var(--white)}
.prevnext .pn.next{margin-left:auto}

/* responsive */
@media(max-width:920px){.deck{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr}}
@media(max-width:560px){.metric-grid{grid-template-columns:1fr}.shell{width:92%}}

/* persistent "return to scanner" CTA in the topbar */
.scanner-cta{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#04101f;background:linear-gradient(135deg,#fff,var(--accent) 60%,var(--accent2));border-radius:999px;padding:.55rem 1.15rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem;box-shadow:0 0 26px rgba(30,167,255,.22);transition:transform .2s,box-shadow .2s}
.scanner-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(30,167,255,.42)}
.topbar .status-pill{margin-left:auto}