/* ===== Themes ===== */
:root,[data-theme="navy"]{--bg:#0b1323;--panel:#131f32;--deep:#0c1728;--btn:#1a2a42;--btn-hover:#233b51;--line:#2b3b53;--text:#edf3fa;--muted:#b0bfd3;--cyan:#64e3d2;--ink:#08232b;--red:#ff9a9a;--gold:#ffcd7d;--callout:#152d3a;--warn:#302b25;--pill:#22354b;--stat:#0d192c;--ok-bg:#173c3c;--bad-bg:#3b2631;--r-low:#233b42;--r-mid:#51442e;--r-high:#59313b;--sel:#fff;--flow:#21344b;color-scheme:dark}
[data-theme="midnight"]{--bg:#120d22;--panel:#1c1533;--deep:#150f28;--btn:#271e45;--btn-hover:#33285a;--line:#3a2f5e;--text:#f1edfb;--muted:#bcb2d8;--cyan:#b69bff;--ink:#1d0f45;--red:#ff9fb4;--gold:#ffd27f;--callout:#261c48;--warn:#33283a;--pill:#2c2250;--stat:#160f2b;--ok-bg:#2b2152;--bad-bg:#40213a;--r-low:#2a2650;--r-mid:#4f3d38;--r-high:#5b2a44;--sel:#fff;--flow:#2b2150;color-scheme:dark}
[data-theme="emerald"]{--bg:#07170f;--panel:#0f241a;--deep:#0a1c13;--btn:#153223;--btn-hover:#1d4330;--line:#25473a;--text:#eaf7f0;--muted:#a9c9b8;--cyan:#4fe39a;--ink:#05281a;--red:#ff9a8f;--gold:#f6d77a;--callout:#123526;--warn:#2f2c1c;--pill:#18392a;--stat:#0b1d14;--ok-bg:#164030;--bad-bg:#3a2324;--r-low:#1b3c2d;--r-mid:#4b4527;--r-high:#55302f;--sel:#fff;--flow:#183a2b;color-scheme:dark}
[data-theme="light"]{--bg:#f3f6fb;--panel:#ffffff;--deep:#eef3f9;--btn:#e7edf5;--btn-hover:#dbe6f2;--line:#cbd6e4;--text:#14233a;--muted:#4f6079;--cyan:#0b7d72;--ink:#ffffff;--red:#b42335;--gold:#9a6200;--callout:#e3f4f1;--warn:#fbf0dc;--pill:#e1eef0;--stat:#eef3f9;--ok-bg:#d7f1ec;--bad-bg:#f9dfe2;--r-low:#d5ece8;--r-mid:#f5e3bd;--r-high:#f4c7cc;--sel:#14233a;--flow:#e1eaf4;color-scheme:light}
[data-theme="sand"]{--bg:#f6f0e5;--panel:#fffaf1;--deep:#f1e8d8;--btn:#efe4d0;--btn-hover:#e7d7bb;--line:#d9c7a6;--text:#3a2a17;--muted:#6f5b40;--cyan:#a3541c;--ink:#fffaf1;--red:#a8262c;--gold:#7d5a00;--callout:#f7e6d2;--warn:#f6ecc9;--pill:#f1dfc6;--stat:#f3e9d7;--ok-bg:#f1dcc3;--bad-bg:#f5d6d2;--r-low:#e8ddc5;--r-mid:#f1d79c;--r-high:#ecb9a8;--sel:#3a2a17;--flow:#efe0c8;color-scheme:light}
[data-theme="contrast"]{--bg:#000;--panel:#0a0a0a;--deep:#000;--btn:#111;--btn-hover:#222;--line:#fff;--text:#fff;--muted:#e6e6e6;--cyan:#ffeb3b;--ink:#000;--red:#ff6b6b;--gold:#00e5ff;--callout:#111;--warn:#1a1a00;--pill:#1a1a1a;--stat:#000;--ok-bg:#2a2a00;--bad-bg:#2a0000;--r-low:#003322;--r-mid:#4d3d00;--r-high:#5c0000;--sel:#ffeb3b;--flow:#1a1a1a;color-scheme:dark}

/* ===== Base (mirrors original) ===== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.9 Tahoma,'Segoe UI',Arial,'Noto Sans','Noto Sans SC','Noto Nastaliq Urdu',sans-serif;transition:background .25s,color .25s}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--btn);color:var(--text);padding:9px 17px;border-radius:10px;transition:.18s}
button:hover{border-color:var(--cyan);background:var(--btn-hover)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
.primary,button.active{background:var(--cyan);color:var(--ink);border-color:var(--cyan);font-weight:700}
.primary:hover,button.active:hover{background:var(--cyan);filter:brightness(1.08)}
.shell{max-width:1320px;margin:auto;padding:28px}
header{display:flex;justify-content:space-between;gap:24px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;flex-wrap:wrap}
.brand{font-weight:bold}
.tag{color:var(--cyan);font-size:13px;letter-spacing:1px}
.muted,small{color:var(--muted)}
h1{font-size:clamp(28px,4vw,46px);line-height:1.5;margin:12px 0}
h2{font-size:24px;margin:0 0 14px}
h3{font-size:18px;margin:0 0 8px}
p{margin:8px 0 16px}
.hero{padding:30px 0 22px;max-width:930px}
nav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 26px}
nav button{flex:1;white-space:nowrap}
.grid{display:grid;grid-template-columns:290px 1fr;gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:18px}
.attack-list{display:grid;gap:9px}
.attack-list button{text-align:start;display:flex;align-items:center;gap:12px}
.symbol{font-size:26px;color:var(--cyan)}
.attack-list button.active .symbol{color:inherit}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.callout{border-inline-start:3px solid var(--cyan);background:var(--callout);padding:14px 18px;border-radius:6px;margin:14px 0}
.warning{border-color:var(--gold);background:var(--warn)}
.pill{display:inline-block;padding:2px 12px;background:var(--pill);border-radius:30px;font-size:13px;color:var(--cyan)}
.stage-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:22px 0}
.stage-strip button{font-size:13px;padding:10px 4px;border-radius:8px}
.stage-strip button.done{border-color:var(--cyan)}
.stage-detail{min-height:175px;padding:22px;border-radius:14px;background:var(--deep);border:1px solid var(--line)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.checks{display:grid;gap:10px}
.check{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:12px;border-radius:10px;cursor:pointer}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--cyan);flex-shrink:0}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}
.stat{padding:14px;background:var(--stat);border-radius:12px}
.stat b{font-size:25px;color:var(--cyan);display:block}
.progress{height:9px;background:var(--line);border-radius:20px;overflow:hidden;margin:15px 0}
.progress span{display:block;height:100%;background:var(--cyan);transition:width .25s}
.options{display:grid;gap:10px;margin:18px 0}
.options button{text-align:start}
.correct{border-color:var(--cyan)!important;background:var(--ok-bg)!important;color:var(--text)!important}
.wrong{border-color:var(--red)!important;background:var(--bad-bg)!important;color:var(--text)!important}
.result{color:var(--cyan);margin:12px 0}
.result.bad{color:var(--red)}
.hidden,[hidden]{display:none!important}
.note{font-size:14px;color:var(--muted)}
label.field{display:block;margin:12px 0}
input[type=number],input[type=text],select,textarea,td input{width:100%;padding:10px;color:var(--text);background:var(--deep);border:1px solid var(--line);border-radius:8px}
textarea{min-height:85px;resize:vertical}
.risk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;direction:ltr;max-width:350px}
.risk-grid span{text-align:center;border-radius:6px;padding:8px;background:var(--r-low)}
.risk-grid .mid{background:var(--r-mid)}
.risk-grid .high{background:var(--r-high)}
.risk-grid .selected{outline:3px solid var(--sel);outline-offset:-3px;font-weight:bold}
.tablewrap{overflow:auto}
table{border-collapse:collapse;width:100%;min-width:600px}
th,td{border-bottom:1px solid var(--line);text-align:start;padding:13px;vertical-align:top}
th{color:var(--cyan)}
td input{min-width:120px}
footer{margin-top:25px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:bold}
.mail{background:#edf2f8;color:#182a42;border-radius:12px;padding:22px}
.mail small{color:#40546d}
.mail button{margin:5px;color:#24344c;background:#dfe8f2;border-color:#aabbd0;text-align:start}
.mail button.found{background:#ffe6ab;border-color:#856320}
.mail p{margin:8px 0}
#toast{color:var(--cyan);font-size:14px}
.topline{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}
.flow{display:flex;gap:8px;flex-wrap:wrap}
.flow span{background:var(--flow);padding:8px 15px;border-radius:8px}
.score{font-size:40px;color:var(--cyan)}
fieldset.q{border:0;border-bottom:1px solid var(--line);padding:18px 0}
fieldset.q .check{margin:8px 0}

/* ===== Settings bar (new) ===== */
.head-side{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prefs{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.prefs label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.prefs select{width:auto;padding:6px 10px;font-size:14px}
.swatches{display:flex;gap:6px}
.swatch{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--line);position:relative;overflow:hidden}
.swatch[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
.swatch i{position:absolute;inset:0;background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%)}
.content-note{font-size:13px;margin:0 0 14px}

@media(max-width:850px){.grid{grid-template-columns:1fr}.attack-list{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}.shell{padding:16px}.card{padding:18px}.hero{padding-top:20px}header{align-items:flex-start}.stage-strip{grid-template-columns:repeat(3,1fr)}nav button{flex:auto}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.attack-list{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stage-strip{grid-template-columns:1fr 1fr}header{display:block}.head-side{margin-top:12px}.prefs{width:100%}}
@media print{body{background:white;color:black}header,nav,.hero,footer,button,.no-print,.prefs{display:none!important}.shell{padding:0}.card{background:white;color:black;border:1px solid #aaa;break-inside:avoid}.muted,small,.note{color:#444}input,textarea,td input{color:black!important;background:white!important;border:0!important}th{color:black}table{min-width:0}#plan{display:block!important}main>section:not(#plan){display:none!important}}