/* ---------- tokens ---------- */
:root{
  --bg:#f3f6f6; --panel:#ffffff; --panel-2:#f6f8f8; --ink:#18363d; --ink-soft:#62777b;
  --line:#d7e2e3; --accent:#11788a; --accent-ink:#ffffff; --accent-soft:#e8f4f6;
  --brand-deep:#0f5c6b; --brand-orange:#f79d3b; --brand-cyan:#1a9db7;
  --good:#167a55; --good-soft:#e8f5ef; --bad:#b9382e; --bad-soft:#fbeceb;
  --warn:#a56617; --warn-soft:#fff4e5;
  --radius:12px; --shadow:0 1px 2px rgba(20,58,64,.04),0 12px 32px rgba(20,58,64,.06);
  --maxw:1240px;
}
html[data-theme="dark"]{
  --bg:#0d1f23; --panel:#13282d; --panel-2:#19343a; --ink:#eef7f7; --ink-soft:#a9bec1;
  --line:#29474d; --accent:#49b8c8; --accent-ink:#072329; --accent-soft:#123c44;
  --brand-deep:#0a4e5a; --brand-orange:#ffad5f; --brand-cyan:#49b8c8;
  --good:#52c493; --good-soft:#12372a; --bad:#ff8178; --bad-soft:#421d1c;
  --warn:#ffc066; --warn-soft:#3b2a12;
  --shadow:0 1px 2px rgba(0,0,0,.22),0 18px 45px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:16px/1.6 Bahnschrift,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:60px;
}
h1,h2,h3{line-height:1.25; margin:0 0 .5rem}
h1{font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.02em}
h2{font-size:1.15rem; letter-spacing:-.01em}
.hidden{display:none !important}
main{max-width:var(--maxw); margin:0 auto; padding:36px 24px 48px}
.lede{color:var(--ink-soft); font-size:1.03rem; margin:.25rem 0 0; max-width:62ch}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 20px; background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--accent),#7b5cff); color:#fff; font-weight:800; font-size:.85rem; letter-spacing:.03em;
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text span{font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; align-items:center; gap:8px}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); font-size:1.05rem; cursor:pointer; transition:.15s;
}
.icon-btn:hover{background:var(--panel-2); border-color:var(--accent)}
.timer{
  font-variant-numeric:tabular-nums; font-weight:700; padding:8px 14px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line); font-size:1rem;
}
.timer.warning{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.timer.danger{background:var(--bad-soft); border-color:var(--bad); color:var(--bad); animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.55}}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-weight:600; padding:11px 20px; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--panel-2); border-color:var(--accent)}
.btn-submit{width:100%; background:var(--good); color:#fff; margin-top:14px}
.btn-submit:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- home ---------- */
.hero{padding:18px 0 26px}
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:28px}
.mode-card{
  text-align:left; font:inherit; color:var(--ink); cursor:pointer; padding:22px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  transition:.18s; display:flex; flex-direction:column; gap:6px;
}
.mode-card:hover{transform:translateY(-3px); border-color:var(--accent)}
.mode-icon{font-size:1.7rem}
.mode-card strong{font-size:1.12rem}
.mode-card p{margin:0; color:var(--ink-soft); font-size:.92rem; flex:1}
.mode-go{color:var(--accent); font-weight:600; font-size:.9rem; margin-top:8px}

.resume{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--radius); margin-bottom:22px;
  background:var(--accent-soft); border:1px solid var(--accent);
}
.resume strong{display:block}
.resume span{color:var(--ink-soft); font-size:.88rem}
.resume-actions{display:flex; gap:10px}

.settings,.topics{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:22px;
}
.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:14px}
.field{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--ink-soft); font-weight:600}
.field select{
  font:inherit; font-weight:500; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;
}
.toggle{display:flex; align-items:center; gap:10px; font-size:.92rem; cursor:pointer; align-self:end; padding-bottom:10px}
.toggle input{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}
.hint{color:var(--ink-soft); font-size:.85rem; margin:14px 0 0}
.topic-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-top:12px}
.topic-item{
  display:flex; justify-content:space-between; gap:10px; padding:11px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; font-size:.9rem;
}
.topic-item b{color:var(--accent); font-variant-numeric:tabular-nums}

/* ---------- quiz ---------- */
.quiz-layout{display:grid; grid-template-columns:1fr 250px; gap:22px; align-items:start}
.progress-row{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.progress-track{flex:1; height:8px; background:var(--panel-2); border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.progress-fill{height:100%; width:0; background:linear-gradient(90deg,var(--accent),#7b5cff); transition:width .3s}
.progress-text{font-size:.85rem; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}

.qcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.qhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.chip{
  font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:99px;
}
.flag-btn{
  font:inherit; font-size:.85rem; font-weight:600; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:9px; padding:6px 12px; cursor:pointer; transition:.15s;
}
.flag-btn:hover{border-color:var(--warn); color:var(--warn)}
.flag-btn.on{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.qtext{font-size:1.12rem; font-weight:600; line-height:1.55; margin:0 0 20px}

.options{display:flex; flex-direction:column; gap:10px}
.opt{
  display:flex; align-items:flex-start; gap:13px; text-align:left; font:inherit; color:var(--ink);
  background:var(--panel-2); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; cursor:pointer; transition:.14s; width:100%;
}
.opt:hover:not(.locked){border-color:var(--accent); background:var(--accent-soft)}
.opt-letter{
  flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:var(--panel); border:1px solid var(--line); font-weight:700; font-size:.83rem;
}
.opt.selected{border-color:var(--accent); background:var(--accent-soft)}
.opt.selected .opt-letter{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.opt.correct{border-color:var(--good); background:var(--good-soft)}
.opt.correct .opt-letter{background:var(--good); color:#fff; border-color:var(--good)}
.opt.incorrect{border-color:var(--bad); background:var(--bad-soft)}
.opt.incorrect .opt-letter{background:var(--bad); color:#fff; border-color:var(--bad)}
.opt.locked{cursor:default}
.opt-text{flex:1}

.feedback{margin-top:18px; padding:15px 17px; border-radius:12px; border-left:4px solid var(--accent); background:var(--panel-2); font-size:.94rem}
.feedback.right{border-left-color:var(--good); background:var(--good-soft)}
.feedback.wrong{border-left-color:var(--bad); background:var(--bad-soft)}
.feedback strong{display:block; margin-bottom:4px}

.quiz-nav{display:flex; gap:12px; margin-top:18px}
.quiz-nav .btn{flex:1}
.kbd-hint{text-align:center; color:var(--ink-soft); font-size:.8rem; margin:14px 0 0}
kbd{
  font:inherit; font-size:.75rem; padding:2px 6px; border-radius:5px;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:0 1px 0 var(--line);
}
.only-mobile{display:none}

.quiz-side{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); position:sticky; top:78px;
}
.quiz-side h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.nav-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:12px 0}
.nav-cell{
  aspect-ratio:1; display:grid; place-items:center; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--ink-soft); background:var(--panel-2); border:1.5px solid var(--line);
  border-radius:8px; cursor:pointer; transition:.13s; position:relative;
}
.nav-cell:hover{border-color:var(--accent)}
.nav-cell.answered{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.nav-cell.flagged::after{
  content:""; position:absolute; top:2px; right:2px; width:7px; height:7px;
  border-radius:50%; background:var(--warn);
}
.nav-cell.current{outline:2px solid var(--ink); outline-offset:1px}
.nav-cell.right{background:var(--good-soft); border-color:var(--good); color:var(--good)}
.nav-cell.wrong{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.legend{display:flex; flex-direction:column; gap:5px; font-size:.78rem; color:var(--ink-soft); margin-top:6px}
.legend span{display:flex; align-items:center; gap:7px}
.dot{width:10px; height:10px; border-radius:3px; background:var(--panel-2); border:1.5px solid var(--line); display:inline-block}
.dot.answered{background:var(--accent-soft); border-color:var(--accent)}
.dot.flagged{background:var(--warn); border-color:var(--warn)}
.side-stats{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-soft)}
.side-stats div{display:flex; justify-content:space-between; padding:2px 0}
.side-stats b{color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- results ---------- */
.result-head{
  display:flex; gap:32px; align-items:center; flex-wrap:wrap; padding:26px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:22px;
}
.score-ring{
  --pct:0; flex:none; width:168px; height:168px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ring,var(--accent)) calc(var(--pct)*1%), var(--panel-2) 0);
}
.score-inner{
  width:132px; height:132px; border-radius:50%; background:var(--panel); display:grid;
  place-items:center; align-content:center; text-align:center;
}
.score-inner span{font-size:2.3rem; font-weight:800; letter-spacing:-.03em}
.score-inner small{color:var(--ink-soft); font-size:.82rem}
.result-summary{flex:1; min-width:280px}
.result-stats{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}
.stat{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 14px; font-size:.86rem}
.stat b{display:block; font-size:1.25rem; font-variant-numeric:tabular-nums}
.result-actions{display:flex; gap:10px; flex-wrap:wrap}

.domain-breakdown{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:24px;
}
.dbar{margin-top:14px}
.dbar-head{display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:5px}
.dbar-head b{font-variant-numeric:tabular-nums}
.dbar-track{height:9px; background:var(--panel-2); border:1px solid var(--line); border-radius:99px; overflow:hidden}
.dbar-fill{height:100%; border-radius:99px; transition:width .5s}

.review-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filter{
  font:inherit; font-size:.85rem; font-weight:600; padding:7px 14px; border-radius:99px;
  background:var(--panel); color:var(--ink-soft); border:1px solid var(--line); cursor:pointer; transition:.14s;
}
.filter:hover{border-color:var(--accent)}
.filter.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.review-list{display:flex; flex-direction:column; gap:12px}
.rev{background:var(--panel); border:1px solid var(--line); border-left-width:4px; border-radius:12px; padding:18px; box-shadow:var(--shadow)}
.rev.right{border-left-color:var(--good)}
.rev.wrong{border-left-color:var(--bad)}
.rev.skip{border-left-color:var(--warn)}
.rev-head{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; font-size:.78rem}
.rev-num{font-weight:800; color:var(--ink-soft)}
.tag{padding:3px 10px; border-radius:99px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:.7rem}
.tag.right{background:var(--good-soft); color:var(--good)}
.tag.wrong{background:var(--bad-soft); color:var(--bad)}
.tag.skip{background:var(--warn-soft); color:var(--warn)}
.tag.flag{background:var(--warn-soft); color:var(--warn)}
.tag.dom{background:var(--accent-soft); color:var(--accent)}
.rev-q{font-weight:600; margin:0 0 12px; line-height:1.55}
.rev-opts{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.rev-opt{display:flex; gap:10px; padding:9px 12px; border-radius:9px; background:var(--panel-2); font-size:.92rem; border:1px solid transparent}
.rev-opt .ol{font-weight:700; flex:none}
.rev-opt.correct{background:var(--good-soft); border-color:var(--good)}
.rev-opt.chosen{background:var(--bad-soft); border-color:var(--bad)}
.rev-opt .mark{margin-left:auto; font-size:.75rem; font-weight:700; white-space:nowrap}
.rev-why{font-size:.92rem; color:var(--ink-soft); background:var(--panel-2); border-radius:9px; padding:12px 14px}
.rev-why b{color:var(--ink)}

/* ---------- study ---------- */
.study-head{margin-bottom:20px}
.search{
  width:100%; font:inherit; padding:13px 16px; border-radius:12px; margin:14px 0 12px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
}
.search:focus{outline:none; border-color:var(--accent)}
.empty{text-align:center; color:var(--ink-soft); padding:40px}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(8,13,24,.62); padding:20px}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; max-width:440px; width:100%; box-shadow:var(--shadow)}
.modal-card p{color:var(--ink-soft); margin:.4rem 0 20px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

.foot{text-align:center; color:var(--ink-soft); font-size:.82rem; padding:20px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .quiz-layout{grid-template-columns:1fr}
  .quiz-side{position:static; display:none}
  .quiz-side.open{display:block}
  .only-mobile{display:block}
  .nav-grid{grid-template-columns:repeat(8,1fr)}
  main{padding:18px 14px 30px}
  .qcard{padding:20px 17px}
  .score-ring{margin:0 auto}
}
@media (max-width:520px){
  .nav-grid{grid-template-columns:repeat(6,1fr)}
  .brand-text span{display:none}
  .quiz-nav{flex-wrap:wrap}
}

/* ---------- print ---------- */
@media print{
  .topbar,.foot,.result-actions,.filters,.quiz-side,.quiz-nav,.kbd-hint{display:none !important}
  body{background:#fff; color:#000; padding:0}
  .rev,.result-head,.domain-breakdown{box-shadow:none; break-inside:avoid; border-color:#bbb}
  main{max-width:100%}
}

/* ---------- Arabic assist ---------- */
.ar-btn{font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,serif; font-size:1.15rem; font-weight:700; line-height:1}
.ar-btn.off{opacity:.4}
.ar-btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

.ar-badge{
  flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,serif; font-size:.85rem; font-weight:700; line-height:1;
  color:var(--accent); background:var(--accent-soft); border:1px solid transparent;
  cursor:help; transition:.14s; user-select:none; margin-inline-start:8px; vertical-align:middle;
}
.ar-badge:hover,.ar-badge:focus-visible{background:var(--accent); color:var(--accent-ink); outline:none}
.opt .ar-badge{align-self:center; margin-inline-start:auto}
.rev-opt .ar-badge{align-self:center; margin-inline-start:6px}

/* floating panel */
.ar-pop{
  position:fixed; z-index:70; max-width:460px; padding:14px 16px; border-radius:12px;
  background:var(--panel); border:1px solid var(--accent); box-shadow:0 8px 30px rgba(8,13,24,.28);
  font-family:"Segoe UI","Noto Naskh Arabic","Traditional Arabic",Tahoma,serif;
  font-size:1.02rem; line-height:1.9; color:var(--ink);
  direction:rtl; text-align:right; opacity:0; transform:translateY(4px);
  transition:opacity .13s, transform .13s; pointer-events:none;
}
.ar-pop.show{opacity:1; transform:translateY(0)}
.ar-pop .ar-pop-label{
  display:block; direction:ltr; text-align:left; font-family:"Segoe UI",system-ui,sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.ar-pop.sheet{
  left:12px !important; right:12px; bottom:12px !important; top:auto !important;
  max-width:none; width:auto; max-height:52vh; overflow-y:auto; pointer-events:auto;
  box-shadow:0 -6px 30px rgba(8,13,24,.34);
}

/* inline arabic explanation inside feedback / review */
.ar-why{
  direction:rtl; text-align:right; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line);
  font-family:"Segoe UI","Noto Naskh Arabic","Traditional Arabic",Tahoma,serif;
  font-size:1rem; line-height:1.9;
}
.ar-why b{font-weight:700}
.feedback .ar-why{border-top-color:color-mix(in srgb, var(--ink) 18%, transparent)}
.ar-hint{color:var(--ink-soft); font-size:.78rem; margin:6px 0 0; text-align:center}
@media (hover:hover) and (pointer:fine){
  [data-ar]:hover > .ar-badge{background:var(--accent); color:var(--accent-ink)}
}
@media print{ .ar-pop{display:none !important} .ar-badge{display:none !important} }

/* ---------- learning materials ---------- */
.concept-list{display:flex; flex-direction:column; gap:12px}
.concept{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.concept-head{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit;
  color:var(--ink); background:transparent; border:0; padding:16px 18px; cursor:pointer; transition:.14s;
}
.concept-head:hover{background:var(--panel-2)}
.concept-head .cx{
  flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:7px;
  background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:.95rem; transition:.2s;
}
.concept.open .concept-head .cx{transform:rotate(45deg)}
.concept-head strong{flex:1; font-size:1.03rem}
.concept-head .cq{font-size:.75rem; color:var(--ink-soft); white-space:nowrap}
.concept-body{padding:0 18px 18px; border-top:1px solid var(--line)}
.concept-body p{margin:14px 0 0; line-height:1.7}
.concept-body h4{
  margin:18px 0 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
}
.klist{margin:0; padding-left:20px}
.klist li{margin-bottom:6px; line-height:1.6}
.trap{
  background:var(--warn-soft); border-left:4px solid var(--warn); border-radius:9px;
  padding:12px 14px; margin-top:16px; font-size:.94rem;
}
.trap b{color:var(--warn)}
.clinks{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.clink{
  display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; text-decoration:none;
  color:var(--accent); background:var(--accent-soft); border:1px solid transparent;
  padding:8px 13px; border-radius:99px; transition:.14s;
}
.clink:hover{border-color:var(--accent)}
.clink::after{content:"↗"; font-size:.8em; opacity:.7}
.cqs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.cq-chip{
  font:inherit; font-size:.8rem; font-weight:600; color:var(--ink-soft); background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:5px 10px; cursor:pointer; transition:.14s;
}
.cq-chip:hover{border-color:var(--accent); color:var(--accent)}
.concept .ar-block{
  direction:rtl; text-align:right; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
  font-family:"Segoe UI","Noto Naskh Arabic","Traditional Arabic",Tahoma,serif; line-height:1.9;
}
.concept .ar-block .klist{padding-left:0; padding-right:20px}

/* concept chips + why-not list inside review / feedback cards */
.learn-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.learn-row .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700}
.concept-chip{
  font:inherit; font-size:.82rem; font-weight:600; color:var(--accent); background:var(--accent-soft);
  border:1px solid transparent; border-radius:99px; padding:6px 12px; cursor:pointer; transition:.14s;
}
.concept-chip:hover{border-color:var(--accent)}
.concept-chip::after{content:" →"}
.whynot{margin-top:14px; background:var(--panel-2); border-radius:9px; padding:12px 14px}
.whynot h5{margin:0 0 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.whynot ul{margin:0; padding-left:18px}
.whynot li{margin-bottom:5px; font-size:.9rem; line-height:1.6; color:var(--ink-soft)}
.whynot li b{color:var(--ink)}
.whynot .ar-why{margin-top:10px}
.whynot .ar-why ul{padding-left:0; padding-right:18px}
@media (max-width:520px){ .concept-head strong{font-size:.97rem} .concept-head .cq{display:none} }

/* ---------- DISC professional portal ---------- */
.skip-link{
  position:fixed; inset-block-start:8px; inset-inline-start:8px; z-index:100;
  padding:9px 14px; color:#fff; background:var(--brand-deep); border-radius:7px;
  font-weight:700; text-decoration:none; transform:translateY(-150%);
}
.skip-link:focus{transform:translateY(0)}

.topbar{
  min-height:82px; padding:10px max(24px,calc((100vw - var(--maxw))/2));
  background:color-mix(in srgb,var(--panel) 96%,transparent); border-block-start:4px solid var(--brand-orange);
  border-block-end:1px solid var(--line); box-shadow:0 3px 16px rgba(15,92,107,.05);
}
.brand{gap:14px; color:var(--ink); text-decoration:none}
.brand-logo-wrap{
  display:grid; place-items:center; width:58px; height:54px; flex:none; overflow:hidden;
  background:#fff; border:1px solid #e1e7e8; border-radius:8px; padding:4px 6px;
}
.brand-logo{display:block; width:100%; height:100%; object-fit:contain}
.brand-text strong{font-size:1rem; letter-spacing:.005em}
.brand-text span{font-size:.74rem; letter-spacing:.055em; text-transform:uppercase; color:var(--ink-soft)}
.portal-context{
  display:flex; flex-direction:column; min-width:220px; padding-inline-start:24px; margin-inline:auto;
  border-inline-start:1px solid var(--line); line-height:1.25;
}
.portal-context-label{font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.09em}
.portal-context strong{font-size:.86rem; margin-top:4px}
.topbar-actions{gap:9px}
.site-link{
  display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-size:.82rem; font-weight:700;
  text-decoration:none; padding:8px 11px; border-inline-end:1px solid var(--line); margin-inline-end:2px;
}
.site-link:hover{text-decoration:underline}
.icon-btn{
  width:40px; height:40px; border-radius:8px; border-color:var(--line); background:var(--panel);
  box-shadow:0 1px 2px rgba(15,92,107,.06);
}
.icon-btn:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.timer{border-radius:8px; background:var(--panel); border-color:var(--accent); color:var(--accent)}

.eyebrow{
  display:block; margin-bottom:8px; color:var(--accent); font-size:.72rem; line-height:1.3;
  font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.home-intro{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr); gap:48px; align-items:center;
  padding:24px 0 42px; border-bottom:1px solid var(--line); margin-bottom:34px;
}
.hero{padding:0}
.hero h1{max-width:760px; margin-bottom:16px; font-size:clamp(2.25rem,4.6vw,4rem); line-height:1.04; letter-spacing:-.045em}
.hero .lede{font-size:1.08rem; line-height:1.75; max-width:68ch}
.hero-assurance{
  display:flex; align-items:center; gap:13px; max-width:650px; margin-top:22px; padding:13px 15px;
  color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); border-inline-start:3px solid var(--brand-orange);
  border-radius:8px;
}
.hero-assurance p{margin:0; font-size:.88rem; line-height:1.5}
.hero-assurance strong{color:var(--ink)}
.assurance-icon{
  display:grid; place-items:center; width:36px; height:36px; flex:none; color:var(--accent);
  background:var(--accent-soft); border-radius:7px; font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif; font-weight:800;
}
.program-card{
  position:relative; overflow:hidden; min-height:330px; padding:26px; color:#fff;
  background:var(--brand-deep); border-radius:var(--radius); box-shadow:0 18px 44px rgba(15,92,107,.2);
}
.program-card::before{content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--brand-orange)}
.program-card::after{
  content:"DISC"; position:absolute; inset:auto -10px -34px auto; color:rgba(255,255,255,.055);
  font-size:6.8rem; font-weight:900; letter-spacing:-.08em; pointer-events:none;
}
.program-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:42px}
.program-label{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#c8e2e6}
.status-badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 9px; color:#f4fffc; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); border-radius:99px; font-size:.7rem; font-weight:700;
}
.status-badge i{width:6px; height:6px; background:#7ee0b4; border-radius:50%}
.program-card h2{max-width:290px; margin-bottom:8px; color:#fff; font-size:1.5rem; line-height:1.25}
.program-card>p{margin:0; color:#c8e2e6; font-size:.87rem}
.program-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:30px 0 22px}
.program-stats div{padding-inline:12px; border-inline-start:1px solid rgba(255,255,255,.18)}
.program-stats div:first-child{padding-inline-start:0; border-inline-start:0}
.program-stats dt{color:#b9d6db; font-size:.68rem}
.program-stats dd{margin:2px 0 0; font-size:1.12rem; font-weight:800}
.program-meta{display:flex; justify-content:space-between; gap:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); font-size:.75rem}
.program-meta span{color:#b9d6db}
.program-meta strong{letter-spacing:.06em}

.section-heading,.panel-heading,.screen-heading{
  display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:16px;
}
.section-heading h2,.panel-heading h2,.screen-heading h1{margin:0}
.section-heading h2{font-size:1.55rem}
.section-heading>p,.panel-heading>p,.screen-heading>p{max-width:440px; margin:0; color:var(--ink-soft); font-size:.86rem; text-align:end}
.screen-heading{align-items:center; margin-bottom:20px}
.screen-heading.compact{padding:0 2px 18px; border-bottom:1px solid var(--line)}
.screen-heading h1{font-size:1.55rem}

.modes{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:30px}
.mode-card{
  min-height:222px; padding:22px 24px 20px; gap:9px; border-radius:10px; box-shadow:none;
  border-color:var(--line); border-block-start:3px solid var(--line);
}
.mode-card:first-child{border-block-start-color:var(--brand-orange)}
.mode-card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 14px 32px rgba(15,92,107,.09)}
.mode-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 38%,transparent); outline-offset:3px}
.mode-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px}
.mode-icon{
  display:grid; place-items:center; width:46px; height:46px; color:var(--accent); background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); border-radius:9px;
}
.mode-icon svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.mode-code{color:var(--ink-soft); font-size:.72rem; font-weight:800; letter-spacing:.08em}
.mode-card strong{font-size:1.14rem}
.mode-card p{max-width:52ch; font-size:.91rem; line-height:1.6}
.mode-go{display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; color:var(--accent); font-size:.84rem; letter-spacing:.01em}

.settings,.topics,.domain-breakdown{
  padding:24px 26px; border-radius:10px; box-shadow:none; border-color:var(--line);
}
.panel-heading{align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line)}
.panel-heading .eyebrow{margin-bottom:5px}
.panel-heading h2{font-size:1.2rem}
.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.field{gap:7px; color:var(--ink); font-size:.78rem; letter-spacing:.015em}
.field select,.search{
  min-height:46px; padding:10px 12px; border-radius:7px; background:var(--panel-2); border-color:var(--line);
}
.field select:focus-visible,.search:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent); outline-offset:1px; border-color:var(--accent)}
.toggle{
  align-self:auto; min-height:46px; padding:10px 12px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; font-size:.86rem;
}
.toggle input{width:17px; height:17px}
.hint{display:flex; gap:8px; align-items:center; padding-top:14px; border-top:1px dashed var(--line); font-size:.8rem}
.hint span{color:var(--good); font-weight:900}
.topic-list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:18px}
.topic-item{align-items:center; min-height:48px; padding:10px 13px; border-radius:7px; background:var(--panel-2); font-size:.84rem}
.topic-item b{
  min-width:30px; padding:3px 7px; color:var(--accent); background:var(--accent-soft); border-radius:99px;
  font-size:.72rem; text-align:center;
}

.progress-track{height:7px; background:var(--panel); border-radius:2px}
.progress-fill{background:var(--accent); border-radius:1px}
.qcard,.quiz-side,.result-head,.rev,.concept{border-radius:10px; box-shadow:none}
.qcard{padding:28px; border-block-start:3px solid var(--accent)}
.chip{border-radius:5px; letter-spacing:.07em}
.flag-btn{border-radius:7px}
.qtext{font-size:1.16rem; line-height:1.65}
.opt{min-height:56px; border-width:1px; border-radius:8px; padding:14px 15px}
.opt-letter{border-radius:5px}
.quiz-nav .btn,.btn{border-radius:7px}
.btn-primary{background:var(--brand-deep)}
html[data-theme="dark"] .btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-submit{background:var(--good)}
.btn:focus-visible,.icon-btn:focus-visible,.filter:focus-visible,.nav-cell:focus-visible,.flag-btn:focus-visible,.concept-head:focus-visible,.cq-chip:focus-visible,.concept-chip:focus-visible,.clink:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px;
}
.quiz-side{top:104px; border-block-start:3px solid var(--brand-orange)}
.quiz-side h3{letter-spacing:.1em}
.nav-cell{border-radius:6px}
.feedback,.rev-why,.whynot{border-radius:7px}
.result-head{border-block-start:4px solid var(--brand-orange)}
.score-inner{background:var(--panel)}
.filter,.tag,.clink,.concept-chip{border-radius:6px}
.rev{border-inline-start-width:4px}
.search{margin-top:18px}
.study-head{padding-bottom:18px; border-bottom:1px solid var(--line)}
.study-head h1{font-size:1.8rem}
.concept-head .cx{border-radius:5px}

.foot{
  display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:var(--maxw); margin:0 auto;
  padding:24px; border-top:1px solid var(--line); text-align:initial;
}
.foot-brand{display:flex; align-items:center; gap:10px; color:var(--ink)}
.foot-brand strong{color:var(--brand-orange); font-size:1.15rem; letter-spacing:.03em}
.foot-brand span{padding-inline-start:10px; border-inline-start:1px solid var(--line); font-size:.76rem; font-weight:700}
.foot-meta{display:flex; align-items:center; justify-content:flex-end; gap:10px 18px; flex-wrap:wrap}
.foot-meta span{white-space:nowrap}
.foot-meta a{color:var(--accent); font-weight:700; text-decoration:none}
.foot-meta a:hover{text-decoration:underline}
.modal-card{border-radius:10px; border-block-start:4px solid var(--brand-orange)}

@media (max-width:1050px){
  .portal-context{display:none}
  .home-intro{gap:28px}
  .topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  .topbar{min-height:72px; padding-inline:16px}
  .brand-logo-wrap{width:50px; height:46px}
  .site-link{display:none}
  main{padding:24px 18px 38px}
  .home-intro{grid-template-columns:1fr; padding-top:12px}
  .hero h1{font-size:clamp(2.1rem,8vw,3.25rem)}
  .program-card{min-height:0}
  .program-card-head{margin-bottom:28px}
  .modes{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-grid .field:first-child{grid-column:1/-1}
  .section-heading,.panel-heading{align-items:flex-start; flex-direction:column; gap:5px}
  .section-heading>p,.panel-heading>p{text-align:start}
  .foot{align-items:flex-start; flex-direction:column}
  .foot-meta{justify-content:flex-start}
}
@media (max-width:560px){
  body{padding-bottom:20px}
  .topbar{gap:8px; padding-inline:12px}
  .brand{gap:9px}
  .brand-logo-wrap{width:42px; height:42px; padding:3px}
  .brand-text strong{font-size:.8rem; max-width:180px}
  .brand-text span{display:block; font-size:.59rem}
  .topbar-actions{gap:5px}
  .icon-btn{width:36px; height:36px}
  main{padding:20px 14px 28px}
  .home-intro{gap:24px; padding:4px 0 28px; margin-bottom:27px}
  .hero h1{font-size:2.35rem; line-height:1.08; margin-bottom:13px}
  .hero .lede{font-size:.98rem; line-height:1.65}
  .hero-assurance{align-items:flex-start; margin-top:18px; padding:12px}
  .program-card{padding:22px 20px}
  .program-card h2{font-size:1.28rem}
  .program-stats{margin:24px 0 18px}
  .program-stats div{padding-inline:8px}
  .program-stats dt{font-size:.62rem}
  .program-stats dd{font-size:1rem}
  .section-heading h2{font-size:1.35rem}
  .modes{grid-template-columns:1fr; gap:10px}
  .mode-card{min-height:200px; padding:19px 18px}
  .settings,.topics,.domain-breakdown{padding:20px 16px}
  .settings-grid,.topic-list{grid-template-columns:1fr}
  .settings-grid .field:first-child{grid-column:auto}
  .screen-heading{align-items:flex-start; flex-direction:column; gap:6px}
  .screen-heading>p{text-align:start}
  .qcard{padding:21px 16px}
  .foot{margin-inline:14px; padding-inline:0}
  .foot-meta{align-items:flex-start; flex-direction:column; gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
@media print{
  .home-intro,.section-heading,.modes,.settings,.topics{break-inside:avoid}
  .program-card{background:#fff !important; color:#000; border:1px solid #aaa; box-shadow:none}
  .program-card h2,.program-card>p,.program-label,.program-stats dt,.program-meta span{color:#000}
}

/* ---------- DISC x IBM Carbon-inspired system ---------- */
:root{
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f4f4f4; --ink:#161616; --ink-soft:#525252;
  --line:#e0e0e0; --accent:#0f6b78; --accent-ink:#ffffff; --accent-soft:#d9eff2;
  --brand-deep:#0f5c6b; --brand-orange:#f79d3b; --brand-cyan:#1a9db7;
  --good:#198038; --good-soft:#defbe6; --bad:#da1e28; --bad-soft:#fff1f1;
  --warn:#8e6a00; --warn-soft:#fcf4d6; --radius:0; --shadow:none; --maxw:1376px;
}
html[data-theme="dark"]{
  --bg:#161616; --panel:#262626; --panel-2:#393939; --ink:#f4f4f4; --ink-soft:#c6c6c6;
  --line:#525252; --accent:#64c6d2; --accent-ink:#161616; --accent-soft:#183f45;
  --brand-deep:#0d4b55; --brand-orange:#ffad5f; --brand-cyan:#64c6d2;
  --good:#42be65; --good-soft:#15351f; --bad:#ff8389; --bad-soft:#43171a;
  --warn:#f1c21b; --warn-soft:#3b310c;
}
html{scroll-behavior:smooth}
body{
  padding-bottom:0; background:var(--bg); color:var(--ink);
  font:14px/1.4286 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.16px;
}
h1,h2,h3{font-weight:400; letter-spacing:0}
main{max-width:none; padding:0 32px 80px}
main>.screen{max-width:var(--maxw); margin-inline:auto}
.lede{font-size:1rem; line-height:1.5}

.topbar{
  min-height:48px; height:48px; padding:0; gap:0; border:0; border-bottom:1px solid var(--line);
  background:var(--panel); box-shadow:none; backdrop-filter:none;
}
.brand{height:48px; gap:0; border-inline-end:1px solid var(--line)}
.brand-logo-wrap{width:64px; height:48px; padding:5px 14px; border:0; border-radius:0; background:#fff}
.brand-logo{object-fit:contain}
.brand-text{justify-content:center; height:48px; padding:0 24px 0 16px}
.brand-text strong{font-size:.875rem; font-weight:600}
.brand-text span{display:none}
.portal-nav{display:flex; align-items:stretch; height:48px; margin-inline-end:auto}
.portal-nav a{
  display:flex; align-items:center; min-width:112px; padding:0 16px; color:var(--ink); text-decoration:none;
  border-inline-end:1px solid transparent; font-size:.875rem; position:relative;
}
.portal-nav a::after{
  content:""; width:6px; height:6px; margin-inline-start:16px; flex:none;
  border-inline-end:1px solid var(--ink-soft); border-block-end:1px solid var(--ink-soft);
  transform:translateY(-2px) rotate(45deg);
}
.portal-nav a:hover{background:var(--panel-2)}
.portal-nav a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.topbar-actions{height:48px; gap:0}
.site-link{height:48px; padding:0 16px; margin:0; border-inline:1px solid var(--line); font-size:.75rem}
.icon-btn{
  width:48px; height:48px; border:0; border-inline-end:1px solid var(--line); border-radius:0;
  background:var(--panel); box-shadow:none;
}
.icon-btn:hover{background:var(--panel-2); border-color:var(--line)}
.timer{height:48px; display:grid; place-items:center; padding:0 16px; border:0; border-inline-start:1px solid var(--line); border-radius:0}
.skip-link{border-radius:0}

.home-intro{
  grid-template-columns:minmax(0,6fr) minmax(0,10fr); gap:0; min-height:568px;
  padding:64px 0; margin:0; border-bottom:0;
}
.hero{display:flex; flex-direction:column; min-width:0; padding-inline-end:64px}
.eyebrow{margin-bottom:16px; color:var(--ink); font-size:.75rem; font-weight:600; letter-spacing:.32px}
.hero h1{
  max-width:600px; margin:0; color:var(--accent); font-size:clamp(3rem,4.05vw,3.625rem);
  line-height:1.08; font-weight:300; letter-spacing:0;
}
.hero .lede{max-width:520px; margin:64px 0 0; color:var(--ink); font-size:1.25rem; line-height:1.4}
.hero-actions{display:grid; grid-template-columns:repeat(2,minmax(0,230px)); gap:16px; margin-top:32px}
.hero-cta{
  display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:12px 16px;
  border:1px solid var(--accent); color:var(--accent); background:transparent; text-decoration:none;
  font-size:1rem; line-height:1.25;
}
.hero-cta.primary{color:#fff; background:var(--accent)}
.hero-cta:hover{filter:brightness(.94)}
.hero-cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.hero-cta span{font-size:1.5rem; font-weight:300}
.hero-assurance{
  max-width:520px; margin-top:16px; padding:12px 0; gap:16px; border:0; border-top:1px solid var(--line);
  border-radius:0; background:transparent;
}
.assurance-icon{width:32px; height:32px; border-radius:0; background:var(--accent-soft)}
.hero-assurance p{font-size:.75rem; line-height:1.35}
.program-card{
  align-self:stretch; min-height:440px; margin:24px 0; padding:32px; border-radius:0;
  background:var(--brand-deep); box-shadow:none;
}
.program-card::before{height:8px; background:var(--brand-orange)}
.program-card::after{inset:auto 16px -40px auto; font-size:9rem; letter-spacing:-.06em}
.program-card-head{margin-bottom:96px}
.program-label{font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:400}
.status-badge{padding:4px 8px; border-radius:0; font-size:.75rem}
.program-card h2{max-width:480px; font-size:2.625rem; line-height:1.19; font-weight:300}
.program-card>p{font-size:1rem}
.program-stats{margin:48px 0 32px}
.program-stats div{padding-inline:16px}
.program-stats dt{font-size:.75rem}
.program-stats dd{font-size:1.5rem; font-weight:400}
.program-meta{font-family:"IBM Plex Mono",monospace; font-size:.75rem}

.section-heading{
  display:grid; grid-template-columns:6fr 10fr; align-items:end; gap:0; padding:24px 0 16px;
  margin:0; border-top:1px solid var(--line);
}
.section-heading .eyebrow{margin-bottom:8px; color:var(--ink-soft)}
.section-heading h2{font-size:2rem; line-height:1.25; font-weight:300}
.section-heading>p{justify-self:end; max-width:430px; padding-inline-start:16px; font-size:.875rem}
.modes{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 64px}
.mode-card{
  min-height:248px; padding:16px; gap:8px; border:1px solid var(--line); border-radius:0;
  border-top:1px solid var(--line); background:var(--panel); box-shadow:none;
}
.mode-card:first-child{border-top:4px solid var(--brand-orange); padding-top:13px}
.mode-card:hover{transform:none; border-color:var(--ink-soft); background:var(--panel-2); box-shadow:none}
.mode-top{margin-bottom:24px}
.mode-icon{width:48px; height:48px; border:0; border-radius:0; background:var(--accent-soft)}
.mode-code{font-family:"IBM Plex Mono",monospace; font-weight:400}
.mode-card strong{font-size:1rem; font-weight:600}
.mode-card p{font-size:.875rem; line-height:1.43}
.mode-go{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.875rem; font-weight:400}

.settings,.topics,.domain-breakdown{
  padding:0; margin:0 0 64px; border:0; border-top:1px solid var(--line); border-radius:0;
  background:var(--panel); box-shadow:none;
}
.panel-heading{
  display:grid; grid-template-columns:6fr 10fr; align-items:start; gap:0; margin:0; padding:24px 0 32px;
  border-bottom:0;
}
.panel-heading .eyebrow{margin-bottom:8px; color:var(--ink-soft)}
.panel-heading h2{font-size:2rem; line-height:1.25; font-weight:300}
.panel-heading>p{justify-self:end; padding-inline-start:16px}
.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; background:var(--line)}
.field,.toggle{min-height:80px; margin:0; padding:12px 16px; border:0; border-radius:0; background:var(--panel-2)}
.field{gap:8px; font-size:.75rem; font-weight:400}
.field select{height:40px; min-height:40px; padding:0 16px; border:0; border-bottom:1px solid var(--ink-soft); border-radius:0; background:var(--panel)}
.toggle{min-height:48px; font-size:.875rem}
.hint{margin:0; padding:16px; border:0; background:var(--panel-2)}
.topic-list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; background:var(--line)}
.topic-item{min-height:64px; padding:16px; border:0; border-radius:0; background:var(--panel-2); font-size:.875rem}
.topic-item b{border-radius:0; font-family:"IBM Plex Mono",monospace; font-weight:400}

.screen-heading{padding:48px 0 24px; margin:0; border-bottom:1px solid var(--line)}
.screen-heading h1,.study-head h1{font-size:2.625rem; line-height:1.19; font-weight:300}
.quiz-layout{grid-template-columns:minmax(0,1fr) 288px; gap:16px; padding-top:24px}
.qcard,.quiz-side,.result-head,.rev,.concept,.modal-card{border-radius:0; box-shadow:none}
.qcard{padding:32px; border:1px solid var(--line); border-top:4px solid var(--accent)}
.chip,.flag-btn,.opt,.opt-letter,.feedback,.nav-cell,.filter,.tag,.stat,.rev-why,.whynot,.clink,.concept-chip,.concept-head .cx,.search,.btn{border-radius:0}
.chip{font-family:"IBM Plex Mono",monospace; font-weight:400}
.qtext{font-size:1.25rem; line-height:1.4; font-weight:400}
.opt{min-height:64px; background:var(--panel-2); border-color:transparent; border-bottom:1px solid var(--line)}
.opt:hover:not(.locked){border-color:var(--accent); background:var(--accent-soft)}
.opt-letter{width:32px; height:32px}
.btn{min-height:48px; padding:12px 16px; font-weight:400}
.btn-primary{background:var(--accent)}
.quiz-side{top:72px; padding:16px; border:1px solid var(--line); border-top:4px solid var(--brand-orange)}
.nav-cell{border-width:1px}
.result-head{border:1px solid var(--line); border-top:8px solid var(--brand-orange)}
.domain-breakdown{padding:24px; border:1px solid var(--line)}
.rev{border:1px solid var(--line); border-inline-start-width:4px}
.study-head{padding:48px 0 24px; margin:0}
.search{border:0; border-bottom:1px solid var(--ink-soft); background:var(--panel-2)}
.concept{border:1px solid var(--line)}
.modal{background:rgba(22,22,22,.72)}
.modal-card{border:1px solid var(--line); border-top:8px solid var(--brand-orange)}
.ar-pop{border-radius:0; border:1px solid var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.2)}
.ar-pop.sheet{border-radius:0}

.foot{
  max-width:none; min-height:128px; margin:0; padding:32px; color:#f4f4f4; background:#161616;
  border:0; border-top:8px solid var(--brand-orange);
}
.foot-brand{color:#f4f4f4}
.foot-brand span{border-color:#525252}
.foot-meta a{color:#78d4df}

@media(max-width:1056px){
  .portal-nav a{min-width:auto}
  .home-intro{grid-template-columns:1fr 1fr}
  .hero{padding-inline-end:32px}
  .hero .lede{margin-top:48px}
  .program-card h2{font-size:2rem}
  .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  main{padding-inline:16px}
  .topbar{padding:0}
  .portal-nav{display:none}
  .brand-text{padding-inline:12px}
  .site-link{margin-inline-start:auto}
  .home-intro{grid-template-columns:1fr; min-height:0; padding:48px 0}
  .hero{padding:0}
  .hero h1{max-width:680px}
  .program-card{margin:48px 0 0; min-height:400px}
  .program-card-head{margin-bottom:64px}
  .section-heading,.panel-heading{grid-template-columns:1fr; gap:16px}
  .section-heading>p,.panel-heading>p{justify-self:start; padding:0; text-align:start}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  main{padding:0 16px 48px}
  .topbar{height:48px; min-height:48px}
  .brand-logo-wrap{width:48px; height:48px; padding:7px 9px}
  .brand-text{max-width:172px; height:48px}
  .brand-text strong{max-width:150px; font-size:.75rem}
  .brand-text span{display:none}
  .site-link{display:none}
  .icon-btn{width:48px; height:48px}
  .home-intro{padding:32px 0}
  .hero h1{font-size:2.625rem; line-height:1.1}
  .hero .lede{margin-top:40px; font-size:1.125rem}
  .hero-actions{grid-template-columns:1fr; gap:1px; margin-top:24px; background:var(--line)}
  .hero-cta{background:var(--panel)}
  .hero-cta.primary{background:var(--accent)}
  .program-card{min-height:420px; padding:24px 16px}
  .program-card-head{margin-bottom:64px}
  .program-card h2{font-size:2rem}
  .program-stats div{padding-inline:8px}
  .section-heading h2,.panel-heading h2{font-size:1.75rem}
  .modes{grid-template-columns:1fr; gap:1px; background:var(--line)}
  .mode-card{min-height:224px}
  .settings-grid,.topic-list{grid-template-columns:1fr}
  .settings-grid .field:first-child{grid-column:auto}
  .screen-heading h1,.study-head h1{font-size:2rem}
  .qcard{padding:24px 16px}
  .foot{padding:32px 16px}
}