/* PAREEKSHA v2 — clean exam-portal design system (sky blue) */
:root{
  --primary:#0284c7;        /* sky-600 */
  --primary-dark:#075985;   /* sky-800 */
  --primary-light:#e0f2fe;  /* sky-100 */
  --bg:#f0f7fc;
  --surface:#ffffff;
  --text:#1e293b;
  --text-2:#64748b;
  --border:#dbe7f0;
  --green:#16a34a;
  --green-bg:#dcfce7;
  --red:#dc2626;
  --red-bg:#fee2e2;
  --amber:#d97706;
  --amber-bg:#fef3c7;
  --radius:10px;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 14px rgba(2,132,199,.10);
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:15.5px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.25;font-weight:700;color:#0f172a}
.h-xl{font-size:clamp(1.9rem,4.5vw,2.9rem);letter-spacing:-.5px}
.h-lg{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.3px}
.h-md{font-size:1.25rem}
.muted{color:var(--text-2)}
.hindi{font-family:'Noto Sans Devanagari',var(--font)}

/* ---- top bar + nav ---- */
.topstrip{background:var(--primary-dark);color:#bae6fd;font-size:.8rem;padding:6px 0;text-align:center}
.nav{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1160px;margin:0 auto;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.25rem;color:#0f172a}
.logo .mark{background:var(--primary);color:#fff;border-radius:8px;padding:3px 9px;font-size:1.05rem}
.logo .mark-img{width:38px;height:38px;border-radius:9px;background:#fff;padding:2px;object-fit:contain;box-shadow:var(--shadow);display:block}
footer .logo .mark-img{box-shadow:0 0 0 1px rgba(255,255,255,.15)}
/* footer social bar */
.footer-social{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.12);margin-top:8px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.10);color:#fff;opacity:.95;transition:all .15s;padding:0}
.footer-social a:hover{background:var(--primary);opacity:1;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.footer-social .fs-label{width:auto;border-radius:999px;padding:0 14px;font-size:.82rem;font-weight:600;background:transparent}
.footer-social .fs-label:hover{background:transparent;transform:none;color:#bae6fd}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--text-2);letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{padding:8px 13px;font-weight:600;font-size:.92rem;color:#334155;border-radius:8px}
.nav-links a:hover{background:var(--primary-light);color:var(--primary-dark)}
.nav-links a.active{color:var(--primary);background:var(--primary-light)}
.nav-toggle{display:none;background:var(--primary-light);color:var(--primary-dark);border:1px solid var(--border);padding:7px 12px;border-radius:8px;font-weight:700;cursor:pointer}
.avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--primary);cursor:pointer}
.user-chip{display:flex;align-items:center;gap:8px;position:relative}
.user-menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);min-width:200px;padding:8px;display:none;z-index:50}
.user-menu.open{display:block}
.user-menu a,.user-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-weight:600;font-size:.9rem;background:none;border:none;cursor:pointer;font-family:var(--font);color:var(--text)}
.user-menu a:hover,.user-menu button:hover{background:var(--primary-light)}
.user-menu .u-email{font-size:.78rem;color:var(--text-2);padding:6px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;font-weight:500;word-break:break-all}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.95rem;font-family:var(--font);
  padding:11px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .15s;background:var(--primary);color:#fff}
.btn:hover{background:var(--primary-dark);box-shadow:var(--shadow-md)}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary-light);box-shadow:none}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{background:#f1f5f9;box-shadow:none}
.btn-green{background:var(--green)}
.btn-green:hover{background:#15803d}
.btn-red{background:var(--red)}
.btn-red:hover{background:#b91c1c}
.btn-sm{padding:7px 14px;font-size:.85rem}
.btn-lg{padding:14px 30px;font-size:1.05rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,#e8f4fd 0%,var(--bg) 100%);padding:64px 0 56px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;background:var(--primary-light);color:var(--primary-dark);font-weight:700;font-size:.8rem;padding:5px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em}
.hero p.lead{font-size:1.1rem;color:var(--text-2);margin:16px 0 28px;max-width:34rem}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.trust-row{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.trust-item{font-size:.85rem;color:var(--text-2);font-weight:600}
.trust-item b{display:block;font-size:1.25rem;color:#0f172a}

/* ---- cards / sections ---- */
section{padding:52px 0}
.section-head{margin-bottom:30px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.section-head p{color:var(--text-2);margin-top:6px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
a.card:hover,.card.hoverable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card .icon{width:44px;height:44px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px}
.card h3{font-size:1.05rem;margin-bottom:6px}
.card p{font-size:.9rem;color:var(--text-2)}
.card ul{list-style:none;margin-top:10px}
.card ul li{padding:5px 0;font-size:.88rem;color:var(--text-2);border-bottom:1px dashed var(--border)}
.card ul li:last-child{border:none}
.card ul li::before{content:"✓ ";color:var(--green);font-weight:700}
.tag{display:inline-block;background:var(--primary-light);color:var(--primary-dark);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.tag.green{background:var(--green-bg);color:#166534}
.tag.amber{background:var(--amber-bg);color:#92400e}
.tag.red{background:var(--red-bg);color:#991b1b}

/* stats band */
.stats-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:26px 12px}
.stat .num{font-size:1.9rem;font-weight:800;color:var(--primary)}
.stat .lbl{font-size:.82rem;color:var(--text-2);font-weight:600}

/* steps */
.step{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.step .n{min-width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.step h3{font-size:1rem;margin-bottom:3px}
.step p{font-size:.9rem;color:var(--text-2)}

/* banner CTA */
.banner{background:linear-gradient(120deg,var(--primary) 0%,#0369a1 100%);color:#fff;border-radius:14px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:var(--shadow-md)}
.banner h2{color:#fff;font-size:clamp(1.25rem,2.5vw,1.7rem)}
.banner p{color:#e0f2fe;margin-top:6px}
.banner .btn{background:#fff;color:var(--primary-dark)}
.banner .btn:hover{background:var(--primary-light)}

/* ---- footer ---- */
footer{background:#0c4a6e;color:#bae6fd;padding:46px 0 22px;margin-top:48px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
footer h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
footer a{display:block;padding:3px 0;font-size:.9rem;color:#bae6fd;opacity:.9}
footer a:hover{opacity:1;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem;opacity:.85}

/* ---------- TEST ENGINE ---------- */
.pill{display:inline-block;border:1px solid var(--border);background:#f8fafc;color:var(--text-2);padding:3px 11px;font-weight:600;font-size:.75rem;border-radius:999px}
.test-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.engine{display:none;padding:22px 0 56px}
.engine.active{display:block}
.engine-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 20px;margin-bottom:20px}
.engine-top .t-name{font-weight:800;font-size:1.05rem}
.timer{font-weight:800;font-size:1.15rem;background:var(--primary-light);color:var(--primary-dark);padding:7px 16px;border-radius:8px;font-variant-numeric:tabular-nums}
.timer.danger{background:var(--red-bg);color:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.6}}
.engine-grid{display:grid;grid-template-columns:1fr 290px;gap:20px;align-items:start}
.q-area{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.q-num{display:inline-block;background:var(--primary);color:#fff;font-weight:700;padding:3px 11px;font-size:.78rem;border-radius:6px}
.q-topic{display:inline-block;background:#f1f5f9;color:var(--text-2);font-weight:600;padding:3px 11px;font-size:.78rem;border-radius:6px;margin-left:6px}
.q-text{font-size:1.08rem;font-weight:600;margin:16px 0 20px;color:#0f172a}
.opt{display:flex;gap:13px;align-items:center;border:1.5px solid var(--border);border-radius:9px;padding:12px 15px;margin-bottom:10px;cursor:pointer;background:#fff;transition:all .12s;font-weight:500}
.opt:hover{border-color:var(--primary);background:#f0f9ff}
.opt .ob{min-width:30px;height:30px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;background:#f8fafc;color:var(--text-2)}
.opt.sel{border-color:var(--primary);background:var(--primary-light)}
.opt.sel .ob{background:var(--primary);border-color:var(--primary);color:#fff}
.opt.correct{border-color:var(--green);background:var(--green-bg)}
.opt.correct .ob{background:var(--green);border-color:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-bg)}
.opt.wrong .ob{background:var(--red);border-color:var(--red);color:#fff}
.q-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.palette{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;position:sticky;top:76px}
.palette h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin-bottom:12px}
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px;max-height:300px;overflow-y:auto}
.pq{aspect-ratio:1;border:1.5px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;background:#f8fafc;font-size:.82rem;color:var(--text-2)}
.pq.answered{background:var(--green);border-color:var(--green);color:#fff}
.pq.marked{background:#a855f7;border-color:#a855f7;color:#fff}
.pq.current{outline:2.5px solid var(--primary);outline-offset:1px}
.legend{font-size:.75rem;font-weight:600;color:var(--text-2);display:grid;gap:5px;margin-bottom:12px}
.legend span i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1px solid var(--border);margin-right:7px;vertical-align:-1px}
.solution{border-left:4px solid var(--primary);background:#f0f9ff;border-radius:0 9px 9px 0;padding:14px 16px;margin-top:14px;font-size:.92rem}
.solution b{color:var(--primary-dark)}

/* results */
.results{display:none}
.results.active{display:block}
.score-hero{background:linear-gradient(120deg,var(--primary-dark),var(--primary));color:#fff;border-radius:14px;padding:36px;text-align:center;margin-bottom:26px;box-shadow:var(--shadow-md)}
.score-hero .big{font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800}
.score-hero p{color:#e0f2fe}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.res-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center}
.res-stat .v{font-size:1.5rem;font-weight:800;color:#0f172a}
.res-stat .l{font-size:.75rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
table.clean{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.clean th{background:#f1f5f9;color:var(--text-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:11px 14px;text-align:left}
table.clean td{border-top:1px solid var(--border);padding:11px 14px;font-size:.9rem;font-weight:500}

/* topic chips */
.topic-chips{display:flex;flex-wrap:wrap;gap:10px}
.topic-chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:9px 18px;font-weight:600;font-size:.88rem;cursor:pointer;box-shadow:var(--shadow);transition:all .12s;color:var(--text)}
.topic-chip:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.topic-chip .cnt{color:var(--text-2);font-size:.75rem;font-weight:600}

/* ---- login page ---- */
.auth-wrap{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);max-width:420px;width:100%;padding:38px;text-align:center}
.auth-card .logo{justify-content:center;margin-bottom:8px}
.auth-card h1{font-size:1.35rem;margin:10px 0 6px}
.auth-card p{color:var(--text-2);font-size:.92rem;margin-bottom:24px}
.btn-google{width:100%;background:#fff;color:#334155;border:1.5px solid var(--border);font-size:.98rem;padding:12px}
.btn-google:hover{background:#f8fafc;border-color:#94a3b8;box-shadow:var(--shadow)}
.auth-note{font-size:.78rem;color:var(--text-2);margin-top:18px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:.8rem;margin:18px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---- dashboard ---- */
.dash-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.dash-head img{width:56px;height:56px;border-radius:50%;border:2.5px solid var(--primary)}
.attempt-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 20px;margin-bottom:10px;flex-wrap:wrap}
.attempt-row .a-name{font-weight:700}
.attempt-row .a-meta{font-size:.8rem;color:var(--text-2)}
.attempt-row .a-score{font-weight:800;font-size:1.1rem;color:var(--primary)}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-2)}
.empty-state .big-ico{font-size:2.6rem;margin-bottom:10px}

/* ---- admin ---- */
.admin-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:22px;flex-wrap:wrap}
.admin-tab{padding:10px 18px;font-weight:600;font-size:.92rem;color:var(--text-2);cursor:pointer;border-bottom:2.5px solid transparent}
.admin-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.admin-panel{display:none}
.admin-panel.active{display:block}
.form-grid{display:grid;gap:14px}
label.f-label{font-weight:600;font-size:.85rem;color:var(--text)}
input.f-input,select.f-input,textarea.f-input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-family:var(--font);font-size:.92rem;background:#fff;color:var(--text)}
input.f-input:focus,select.f-input:focus,textarea.f-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(2,132,199,.12)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:12px 22px;border-radius:10px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-md);z-index:200;display:none}
.toast.show{display:block}

/* blog */
.post-card{display:block}
.post-card .p-cat{margin-bottom:10px}
.post-card h3{font-size:1.02rem;line-height:1.4}
.post-card .p-meta{font-size:.78rem;color:var(--text-2);margin-top:8px}
.article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;max-width:820px;margin:0 auto}
.article h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:8px}
.article .a-meta{color:var(--text-2);font-size:.85rem;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.article p{margin:13px 0;color:#334155}
.article h2{font-size:1.2rem;margin:22px 0 6px}
.article li{margin:6px 0 6px 20px;color:#334155}

.notice{background:var(--amber-bg);border:1px solid #fcd34d;color:#92400e;border-radius:var(--radius);padding:12px 16px;font-size:.88rem;font-weight:500;margin-bottom:18px}
.notice.blue{background:var(--primary-light);border-color:#7dd3fc;color:var(--primary-dark)}

/* ===================================================================
   EXAM MODULE v4 — preflight, header tools, palette states, recovery,
   submit modal, analytics heatmaps, dark mode, font sizes
   =================================================================== */

/* resume banner */
.resume-banner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--amber-bg);border:1px solid #fcd34d;color:#92400e;border-radius:var(--radius);padding:12px 18px;font-weight:600;font-size:.9rem}
.resume-banner .resume-ico{font-size:1.1rem}
.resume-btns{display:flex;gap:8px;flex-wrap:wrap}

/* preflight (system check + instructions) */
.preflight{display:none}
.preflight.active{display:block}
.pf-steps{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.pf-step{font-weight:700;font-size:.85rem;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 16px}
.pf-step.active{color:#fff;background:var(--primary);border-color:var(--primary)}
.sys-rows{display:grid;gap:2px;margin-top:6px}
.sys-row{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border)}
.sys-row:last-child{border-bottom:none}
.sys-dot{min-width:14px;width:14px;height:14px;border-radius:50%;margin-top:4px}
.sys-dot.green{background:var(--green)}
.sys-dot.yellow{background:var(--amber)}
.sys-dot.red{background:var(--red)}
.sys-info{display:flex;flex-direction:column;gap:1px}
.sys-info b{font-size:.92rem}
.sys-info span{font-size:.85rem;color:var(--text-2)}
.sys-info em{font-size:.8rem;color:var(--amber);font-style:normal;margin-top:2px}
.sys-verdict{margin-top:16px;padding:12px 16px;border-radius:var(--radius);font-weight:600;font-size:.9rem}
.sys-verdict.green{background:var(--green-bg);color:#166534}
.sys-verdict.yellow{background:var(--amber-bg);color:#92400e}
.sys-verdict.red{background:var(--red-bg);color:#991b1b}
.ins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ins-cell{background:#f8fafc;border:1px solid var(--border);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ins-cell span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);font-weight:600}
.ins-cell b{font-size:1rem}
.ins-rules{list-style:none;margin-top:4px}
.ins-rules li{position:relative;padding:6px 0 6px 22px;font-size:.9rem;color:#334155;border-bottom:1px dashed var(--border)}
.ins-rules li:last-child{border:none}
.ins-rules li::before{content:"›";position:absolute;left:6px;color:var(--primary);font-weight:800}
.legend-sample{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}
.legend-sample i{margin-right:8px}
.ins-agree{display:flex;align-items:center;gap:10px;margin-top:20px;font-weight:600;font-size:.92rem;background:var(--primary-light);border:1px solid #7dd3fc;border-radius:9px;padding:12px 14px;cursor:pointer}
.ins-agree input{width:18px;height:18px;accent-color:var(--primary)}

/* engine header tools */
.engine-status{display:flex;gap:10px;align-items:center}
.engine-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-icon{background:#f1f5f9;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;font-size:.9rem;font-weight:700;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--primary-light);color:var(--primary-dark)}
.net-status{font-size:.72rem;font-weight:700}
.net-status.on{color:var(--green)}
.net-status.off{color:var(--red)}
.save-status{font-size:.72rem;font-weight:700;color:var(--text-2)}
.save-status.ok{color:var(--green)}
.save-status.err{color:var(--red)}

/* palette states (v4) */
.pq.answered{background:var(--green);border-color:var(--green);color:#fff}
.pq.notans{background:#fecaca;border-color:#ef4444;color:#991b1b}
.pq.marked{background:#a855f7;border-color:#a855f7;color:#fff}
.pq.ansmarked{background:var(--green);border-color:#a855f7;color:#fff;position:relative}
.pq.ansmarked::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#a855f7;border:1.5px solid #fff}
.pq.notvisited{background:#f1f5f9;border-color:var(--border);color:var(--text-2)}
.pq.current{outline:2.5px solid var(--primary);outline-offset:1px}
.ansmarked-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--green);border:1px solid #a855f7;box-shadow:1px -1px 0 #a855f7}

/* submit modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-md);max-width:460px;width:100%;padding:28px}
.sub-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sub-cell{background:#f8fafc;border:1px solid var(--border);border-radius:9px;padding:14px;text-align:center}
.sub-cell .v{font-size:1.5rem;font-weight:800}
.sub-cell .l{font-size:.75rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em}

/* analytics heatmaps */
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px;margin-top:6px}
.hm{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;border:1px solid transparent}
.hm.c{background:var(--green)}
.hm.w{background:var(--red)}
.hm.s{background:#e2e8f0;color:var(--text-2)}
.hm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;font-weight:600;color:var(--text-2);margin:6px 0 4px}
.hm-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px}
.hm-legend i.c{background:var(--green)}
.hm-legend i.w{background:var(--red)}
.hm-legend i.s{background:#e2e8f0}
.sa-wrap{display:grid;gap:14px;margin-top:10px}
.sa-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.sa-name{font-weight:700;font-size:.88rem}
.sa-bar{background:#f1f5f9;border-radius:6px;height:16px;overflow:hidden}
.sa-fill{height:100%;background:var(--primary);border-radius:6px}
.sa-meta{font-size:.78rem;color:var(--text-2);margin-top:4px;font-weight:600}

/* font-size preference */
body.font-small{font-size:14px}
body.font-large{font-size:17.5px}

/* ---------- DARK MODE (exam-friendly) ---------- */
body.dark{
  --bg:#0b1220;--surface:#111c2e;--text:#e2e8f0;--text-2:#94a3b8;--border:#22334d;
  --primary-light:#0e2a44;--green-bg:#0f2e1e;--red-bg:#3a1620;--amber-bg:#3a2c0f;
}
body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:#f1f5f9}
body.dark .q-text{color:#f1f5f9}
body.dark .opt{background:#0e1a2b}
body.dark .opt:hover{background:#132339}
body.dark .opt .ob{background:#0b1220;color:var(--text-2)}
body.dark .btn-icon,body.dark .pill,body.dark .ins-cell,body.dark .sub-cell,body.dark .sys-row{background:#0e1a2b}
body.dark .hm.s{background:#22334d;color:#94a3b8}
body.dark .sa-bar,body.dark .pq.notvisited{background:#1a2740}
body.dark table.clean th{background:#0e1a2b}
body.dark .solution{background:#0e2233}
body.dark .modal,body.dark .card{background:var(--surface)}

@media(max-width:920px){
  .hero-grid,.grid-3,.grid-2,.grid-4,.engine-grid,.res-grid,.stats-grid,.ins-grid{grid-template-columns:1fr}
  .ins-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .sa-row{grid-template-columns:1fr}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:10px 16px;box-shadow:var(--shadow-md)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .palette{position:static}
  .engine-top{align-items:flex-start}
}