/* Alibaba Cloud CAP Quiz — v5 stylesheet */
:root{
  --orange:#FF6A00;--orange-d:#E05E00;--orange-bg:#FFF3E6;
  --violet:#7C3AED;--violet-d:#6D28D9;--violet-bg:#EDE9FE;
  --green:#10B981;--green-d:#047857;--green-bg:#ECFDF5;
  --red:#EF4444;--red-bg:#FEF2F2;
  --amber:#F59E0B;--amber-d:#D97706;--amber-bg:#FFFBEB;
  --sky:#0EA5E9;--sky-d:#0284C7;--sky-bg:#F0F9FF;
  --ink:#1F2937;--ink-2:#374151;--ink-3:#4B5563;--mute:#6B7280;--faint:#9CA3AF;
  --line:#E5E7EB;--line-2:#F3F4F6;--bg:#F0F2F5;--panel:#fff;
  --radius:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.5}
#app{max-width:880px;margin:0 auto;padding:24px 16px 72px}
.boot{text-align:center;color:var(--mute);padding:60px 0}
button{font-family:inherit}
a{color:var(--sky-d)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:#F3F4F6;padding:1px 5px;border-radius:4px}
q{font-style:italic;quotes:"\201C" "\201D"}

/* header */
.header{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.logo-icon{width:42px;height:42px;flex-shrink:0}
.header h1{font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.header .sub{font-size:.8rem;color:var(--mute);display:block;margin-top:2px}
.app-ver{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:10px;background:var(--line-2);color:var(--faint);font-size:.7rem;font-weight:600}
.bank-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.bank-chip{background:var(--panel);border-radius:9px;padding:8px 13px;box-shadow:0 1px 4px rgba(0,0,0,.06);font-size:.74rem;color:var(--mute)}
.bank-chip b{color:var(--ink);font-size:.92rem;display:block;line-height:1.3}
.home-desc{background:var(--panel);border-radius:12px;padding:16px 20px;margin-bottom:18px;border-left:4px solid var(--orange);font-size:.88rem;line-height:1.7;color:var(--ink-2)}
.home-desc strong{color:var(--orange)}

/* panels on the home screen */
.panel{background:var(--panel);border-radius:12px;padding:16px 18px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.07);border-left:4px solid var(--line)}
.panel-src{border-left-color:var(--sky)}
.panel-topic{border-left-color:var(--green)}
.panel-find{border-left-color:#8B5CF6}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.panel-title{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.panel-src .panel-title{color:var(--sky)}
.panel-topic .panel-title{color:var(--green-d)}
.panel-find .panel-title{color:var(--violet)}
.panel-count{font-size:.78rem;color:var(--mute)}
.panel-count b{color:var(--ink)}
.panel-note{font-size:.74rem;color:var(--faint);margin-top:9px;line-height:1.5}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.seg{grid-template-columns:1fr}}
.seg-btn{border:2px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;transition:all .18s}
.seg-btn:hover{border-color:var(--sky);background:var(--sky-bg)}
.seg-btn.active{border-color:var(--sky);background:var(--sky-bg);box-shadow:0 0 0 3px rgba(14,165,233,.12)}
.seg-lbl{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:2px}
.seg-sub{display:block;font-size:.72rem;color:var(--mute);line-height:1.4}
.seg-btn.active .seg-lbl{color:var(--sky-d)}
.opt-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.78rem;color:var(--ink-3);cursor:pointer;user-select:none}
.opt-row input{width:15px;height:15px;accent-color:var(--orange);cursor:pointer;pointer-events:none}
.opt-row .n{color:var(--faint)}

.topic-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tool-btn{border:1px solid #D1D5DB;background:#fff;border-radius:7px;padding:5px 11px;font-size:.76rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.tool-btn:hover{background:var(--line-2);border-color:var(--faint)}
.dom-list{display:flex;flex-direction:column;gap:6px}
.dom-row{display:flex;align-items:stretch;gap:8px}
.dom-check{width:36px;flex-shrink:0;border:2px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:.85rem;font-weight:700;color:#D1D5DB;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dom-check:hover{border-color:var(--green)}
.dom-check.all{background:var(--green);border-color:var(--green);color:#fff}
.dom-check.some{background:var(--green-bg);border-color:var(--green);color:var(--green-d)}
.dom-name{flex:1;display:flex;align-items:center;gap:9px;border:2px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;cursor:pointer;text-align:left;transition:all .15s;min-width:0}
.dom-name:hover,.dom-name.open{border-color:var(--green);background:#F0FDF4}
.chev{font-size:.62rem;color:var(--faint);width:11px;flex-shrink:0;transition:transform .15s;display:inline-block}
.dom-name.open .chev{transform:rotate(90deg)}
.dom-lbl{font-size:.86rem;font-weight:700;color:var(--ink);flex:1;min-width:0}
.dom-w{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;background:var(--line-2);color:var(--mute);font-size:.66rem;font-weight:600;vertical-align:middle;white-space:nowrap}
.dom-n{font-size:.75rem;color:var(--faint);flex-shrink:0;font-variant-numeric:tabular-nums}
.dom-n b{color:var(--green-d);font-size:.82rem}
.sub-list{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px 44px}
@media(max-width:560px){.sub-list{padding-left:0}}
.sub-chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:5px 11px;font-size:.775rem;color:var(--ink-3);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:all .13s}
.sub-chip:hover{border-color:var(--green);color:var(--green-d)}
.sub-chip.on{background:var(--green-bg);border-color:var(--green);color:var(--green-d);font-weight:600}
.sub-chip b{font-weight:700;color:#C4C9D1;font-size:.71rem}
.sub-chip.on b{color:var(--green)}
.sub-chip.zero{opacity:.42}

/* find: jump + search */
.find-row{display:flex;gap:8px;flex-wrap:wrap}
.find-row input{flex:1;min-width:160px;border:2px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9rem;font-family:inherit;color:var(--ink)}
.find-row input:focus{outline:none;border-color:#8B5CF6}
.find-row input.err{border-color:#DC2626}
.btn-jump{padding:9px 18px;background:#8B5CF6;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-jump:hover{background:var(--violet)}
.find-error{font-size:.78rem;color:#B91C1C;margin-top:8px;line-height:1.5}
.search-results{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.search-sum{font-size:.74rem;color:var(--mute);margin-bottom:6px}
.search-hit{display:flex;gap:9px;align-items:flex-start;padding:7px 4px;border-radius:7px;cursor:pointer;font-size:.82rem;color:var(--ink-2);line-height:1.45}
.search-hit:hover{background:#F5F3FF}
.search-hit .num{flex-shrink:0;font-weight:700;color:var(--violet);font-variant-numeric:tabular-nums}
.search-hit mark{background:#FDE68A;color:inherit;border-radius:2px;padding:0 1px}
.search-hit .tag{font-size:.68rem;color:var(--faint);margin-left:4px}

/* mode cards */
.mode-group{margin-bottom:20px}
.mode-group-label{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);margin-bottom:10px}
.len-row,.ord-row,.start-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.len-lbl{font-size:.78rem;font-weight:600;color:var(--mute)}
.len-seg{display:inline-flex;background:var(--line-2);border-radius:9px;padding:3px;gap:3px}
.len-btn,.ord-btn{border:none;background:transparent;color:var(--mute);font-size:.82rem;font-weight:600;padding:6px 14px;border-radius:7px;cursor:pointer}
.len-btn:hover,.ord-btn:hover{color:var(--ink)}
.len-btn.active{background:#fff;color:var(--orange);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ord-btn.active{background:#fff;color:var(--violet);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.len-note{font-size:.72rem;color:var(--faint);font-style:italic}
.start-input{width:190px;max-width:100%;border:2px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.85rem;font-family:inherit;color:var(--ink)}
.start-input:focus{outline:none;border-color:var(--violet)}
.start-input.err{border-color:#DC2626}
.start-error{font-size:.76rem;color:#B91C1C;margin:-2px 0 8px}
.ord-note{font-size:.74rem;color:var(--faint);margin-bottom:10px;line-height:1.5}
.cards-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cards-row{grid-template-columns:1fr}}
.section-card{background:var(--panel);border-radius:var(--radius);padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.07);border:2px solid transparent;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:flex-start}
.section-card:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(255,106,0,.15);transform:translateY(-2px)}
.section-card.endless-card:hover{border-color:var(--violet);box-shadow:0 4px 16px rgba(124,58,237,.15)}
.section-card .tag{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:20px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.tag-std{background:var(--orange-bg);color:var(--orange)}
.tag-end{background:var(--violet-bg);color:var(--violet)}
.section-card h2{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.section-card p{font-size:.84rem;color:var(--mute);line-height:1.55;margin-bottom:14px}
.card-meta{display:flex;gap:10px;font-size:.76rem;color:var(--faint);margin-bottom:16px;flex-wrap:wrap}
.btn-start{width:100%;padding:10px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;margin-top:auto}
.btn-start-std{background:var(--orange);color:#fff}
.btn-start-std:hover{background:var(--orange-d)}
.btn-start-end{background:var(--violet);color:#fff}
.btn-start-end:hover{background:var(--violet-d)}
.hs-chip{display:inline-flex;align-items:center;gap:4px;background:#F5F3FF;color:var(--violet);font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:20px;margin-bottom:10px}
.warn-box{background:#FEF3C7;border-left:4px solid var(--amber);border-radius:8px;padding:12px 14px;font-size:.83rem;color:#92400E;line-height:1.6;margin-bottom:18px}

/* quiz chrome */
.quiz-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.back-btn{background:none;border:1px solid #D1D5DB;padding:6px 14px;border-radius:8px;font-size:.85rem;cursor:pointer;color:var(--ink-2)}
.back-btn:hover{background:var(--line-2)}
.score-badge{background:var(--orange-bg);color:var(--orange);padding:5px 14px;border-radius:20px;font-size:.85rem;font-weight:600}
.jump-mini{display:flex;gap:6px;align-items:center}
.jump-mini input{width:110px;border:2px solid var(--line);border-radius:7px;padding:6px 9px;font-size:.8rem;font-family:inherit}
.jump-mini input:focus{outline:none;border-color:#8B5CF6}
.jump-mini input.err{border-color:#DC2626}
.btn-jump-mini{padding:6px 13px;background:#8B5CF6;color:#fff;border:none;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer}
.jump-error-mini{font-size:.76rem;color:#B91C1C;margin:-4px 0 10px}
.endless-stats{display:flex;background:var(--panel);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:16px;overflow:hidden}
.estat{flex:1;padding:12px 4px;text-align:center;border-right:1px solid var(--line-2)}
.estat:last-child{border-right:none}
.estat-val{font-size:1.3rem;font-weight:800;color:var(--ink);line-height:1}
.estat-val.streak-val{color:var(--orange)}
.estat-val.best-val{color:var(--violet)}
.estat-val.correct-val{color:var(--green)}
.estat-lbl{font-size:.66rem;color:var(--faint);margin-top:3px;text-transform:uppercase;letter-spacing:.4px}
.progress-wrap{margin-bottom:4px;display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:var(--mute);flex-wrap:wrap}
.progress-bar{width:100%;height:5px;background:var(--line);border-radius:3px;margin-bottom:16px;overflow:hidden}
.progress-fill{height:100%;background:var(--orange);border-radius:3px;transition:width .4s ease}
.progress-fill-end{background:linear-gradient(90deg,var(--violet),#EC4899)}
.round-badge{display:inline-flex;align-items:center;gap:4px;background:var(--line-2);color:var(--mute);padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:600}
.start-note{font-size:.78rem;color:#92400E;background:#FEF3C7;border-radius:8px;padding:8px 12px;margin-bottom:12px}

/* question card */
.question-card{background:var(--panel);border-radius:var(--radius);padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.07);margin-bottom:14px}
@media(max-width:560px){.question-card{padding:18px 14px}}
.q-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:600;white-space:nowrap}
.badge-num{background:var(--line-2);color:var(--mute)}
.badge-ai{background:#EEF2FF;color:#4F46E5}
.badge-dump{background:#ECFEFF;color:#0E7490}
.badge-recall{background:#FEF9C3;color:#A16207}
.badge-topic{background:var(--green-bg);color:var(--green-d);white-space:normal}
.badge-multi{background:#FEF3C7;color:var(--amber-d)}
.badge-single{background:var(--green-bg);color:#059669}
.badge-endless{background:var(--violet-bg);color:var(--violet)}
.scenario-box{background:#F8FAFC;border-radius:8px;padding:13px 15px;margin-bottom:16px;border-left:3px solid #94A3B8;font-size:.97rem;color:#475569;line-height:1.7}
.scenario-box strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:#94A3B8;margin-bottom:5px}
.question-text{font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.6;margin-bottom:16px}
.answer-count{display:flex;align-items:center;justify-content:center;gap:8px;margin:-6px -24px 16px;padding:7px 14px;background:var(--green);color:#fff;font-size:1.2rem;font-weight:500;letter-spacing:.2px}
.answer-count.multi{background:var(--amber-d)}
.answer-count.done{opacity:.55}
.answer-count b{font-weight:700}
.answer-count .ac-num{display:none}
@media(max-width:560px){.answer-count{margin-left:-14px;margin-right:-14px}}
.hint-text{font-size:.78rem;color:var(--faint);margin-bottom:12px;font-style:italic}
.choices{display:flex;flex-direction:column;gap:9px}
.choice-btn{display:flex;align-items:flex-start;gap:11px;padding:12px 15px;border:2px solid var(--line);border-radius:10px;cursor:pointer;transition:all .18s;text-align:left;background:#fff;width:100%}
.choice-btn:hover:not(.disabled){border-color:var(--orange);background:#FFF8F4}
.choice-btn.selected:not(.submitted){border-color:var(--orange);background:var(--orange-bg)}
.choice-btn.disabled{cursor:default}
.choice-btn.correct-sel,.choice-btn.correct-unsel{border-color:var(--green)!important;background:var(--green-bg)!important}
.choice-btn.wrong-sel{border-color:var(--red)!important;background:var(--red-bg)!important}
.choice-btn.alt-unsel{border-color:var(--amber)!important;border-style:dashed!important;background:var(--amber-bg)!important}
.choice-key{min-width:26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--mute);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;margin-top:1px}
.choice-btn.selected:not(.submitted) .choice-key{background:var(--orange);color:#fff}
.choice-btn.correct-sel .choice-key,.choice-btn.correct-unsel .choice-key{background:var(--green);color:#fff}
.choice-btn.wrong-sel .choice-key{background:var(--red);color:#fff}
.choice-btn.alt-unsel .choice-key{background:var(--amber);color:#fff}
.choice-text{font-size:.97rem;color:var(--ink-2);line-height:1.5;min-width:0;overflow-wrap:anywhere}
.choice-text.fmt-code{white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem}
.question-text.fmt-code,.scenario-box.fmt-code{white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;font-weight:500}
.submit-row{display:flex;justify-content:flex-end;margin-top:14px}
.btn-submit{padding:10px 26px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer}
.btn-submit:disabled{background:#D1D5DB;cursor:default}
.btn-submit:not(:disabled):hover{background:var(--orange-d)}

/* explanation stack */
.exp-stack{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.exp-panel{background:var(--panel);border-radius:var(--radius);padding:20px 22px;box-shadow:0 2px 10px rgba(0,0,0,.07);border-top:3px solid var(--orange)}
@media(max-width:560px){.exp-panel{padding:16px 14px}}
.exp-panel h3{font-size:1rem;font-weight:800;color:var(--orange);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.exp-loading{color:var(--faint);font-size:.84rem;padding:6px 0}
.alt-banner{background:var(--amber-bg);border:1px solid #FDE68A;border-left:3px solid var(--amber-d);border-radius:8px;padding:11px 14px;margin-bottom:14px;font-size:.93rem;color:#92400E;line-height:1.6}
.alt-banner b{color:#78350F}
.exp-item{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.exp-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.exp-choice-label{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.exp-key{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}
.exp-key-correct{background:var(--green);color:#fff}
.exp-key-wrong{background:var(--red);color:#fff}
.exp-key-alt{background:var(--amber);color:#fff}
.exp-key-neutral{background:var(--line);color:var(--mute)}
.exp-tick{font-size:.88rem;font-weight:700;padding-top:2px}
.exp-tick-correct{color:var(--green)}
.exp-tick-wrong{color:var(--red)}
.exp-tick-alt{color:var(--amber-d)}
.exp-tick-neutral{color:var(--faint)}
.exp-opt{font-size:.88rem;color:var(--mute);padding-top:2px;flex-basis:100%;padding-left:30px;font-style:italic}
.exp-text{font-size:.97rem;color:var(--ink-3);line-height:1.7;padding-left:30px}
.exp-text p+p{margin-top:6px}
@media(max-width:560px){.exp-text,.exp-opt{padding-left:0}}

details.deep{background:var(--panel);border-radius:var(--radius);box-shadow:0 2px 10px rgba(0,0,0,.07);border-left:4px solid var(--line)}
details.deep.d-answer{border-left-color:var(--green)}
details.deep.d-walk{border-left-color:var(--sky)}
details.deep.d-tech{border-left-color:#6366F1}
details.deep>summary{padding:14px 18px;cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;align-items:center;gap:8px;color:var(--ink)}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::after{content:"\25BE  open";margin-left:auto;font-size:.7rem;font-weight:600;color:var(--faint);white-space:nowrap}
details.deep[open]>summary::after{content:"\25B4  close"}
details.deep>summary:hover{background:#FAFAFB;border-radius:var(--radius)}
details.deep>summary .sub{font-weight:500;color:var(--mute);font-size:.8rem}
.deep-body{padding:4px 20px 20px;border-top:1px solid var(--line-2);font-size:.97rem;color:var(--ink-3);line-height:1.75}
@media(max-width:560px){.deep-body{padding:4px 14px 16px}}
.deep-body>*:first-child{margin-top:12px}
.deep-body p{margin:0 0 14px}
.deep-body h5{font-size:.95rem;font-weight:700;color:var(--ink);margin:16px 0 6px}
.deep-body h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.6px;color:var(--sky-d);margin:24px 0 10px}
.deep-body ul,.deep-body ol{margin:0 0 10px 22px}
.deep-body li{margin-bottom:4px}
.deep-body table{border-collapse:collapse;width:100%;margin:8px 0 14px;font-size:.9rem}
.deep-body th,.deep-body td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.deep-body th{background:#F8FAFC;font-weight:700;color:var(--ink)}
.deep-body .table-wrap{overflow-x:auto}
.bridge{background:var(--sky-bg);border:1px solid #BAE6FD;border-radius:9px;padding:11px 14px;margin:12px 0 14px;font-size:.97rem;color:#075985}
.bridge b.lead{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--sky-d);margin-bottom:4px}
.lesson-title{font-size:1rem;font-weight:800;color:var(--ink);margin:14px 0 4px}
.lesson-meta{font-size:.74rem;color:var(--faint);margin-bottom:10px}
.tech-row{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:9px 0;border-top:1px dashed #C7D2FE;font-size:.97rem;color:var(--ink-2);line-height:1.65}
.tech-row:first-of-type{border-top:none;margin-top:10px}
.tech-row b{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:#6366F1;padding-top:3px}
@media(max-width:560px){.tech-row{grid-template-columns:1fr;gap:2px}}
.tech-kw{display:inline-block;background:#fff;border:1px solid #C7D2FE;color:#4338CA;border-radius:14px;padding:2px 10px;margin:0 5px 4px 0;font-size:.85rem;font-weight:600}
.tech-pressure{background:#EEF2FF;border-radius:8px;padding:10px 12px;margin-top:6px}
.src-box{background:var(--panel);border-radius:var(--radius);padding:16px 20px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.src-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin-bottom:8px}
.src-body .origin-line{margin-top:14px}
.src-list{display:flex;flex-direction:column;gap:5px}
.src-list a{font-size:.9rem;color:var(--sky-d);text-decoration:none;line-height:1.5;display:inline-flex;gap:6px;align-items:flex-start}
.src-list a:hover{text-decoration:underline}
.src-list a::before{content:"\2197";flex-shrink:0;color:var(--faint);font-size:.75rem}
.origin-line{font-size:.72rem;color:var(--faint);margin-top:10px;font-style:italic}
.v5-note{font-size:.76rem;color:var(--faint);padding:2px 0 0;font-style:italic}

/* nav */
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.btn-nav{padding:10px 22px;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.btn-prev{background:var(--line-2);color:var(--ink-2)}
.btn-prev:hover{background:var(--line)}
.btn-next{background:var(--ink);color:#fff}
.btn-next:hover{background:#111827}
.btn-next:disabled,.btn-prev:disabled{background:#D1D5DB;cursor:default;color:#fff}
.btn-finish{background:var(--orange);color:#fff}
.btn-finish:hover{background:var(--orange-d)}
.btn-end-session{background:var(--violet);color:#fff;padding:8px 18px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none}
.btn-end-session:hover{background:var(--violet-d)}
.next-num{font-size:.78rem;color:var(--mute);font-weight:600}

/* results */
.results-card{background:var(--panel);border-radius:var(--radius);padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.07);text-align:center;margin-bottom:18px}
.score-circle{width:130px;height:130px;border-radius:50%;margin:0 auto 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.3rem;font-weight:800;border:8px solid var(--orange)}
.score-circle.pass{border-color:var(--green);color:var(--green)}
.score-circle.fail{border-color:var(--red);color:var(--red)}
.score-circle span{font-size:.85rem;font-weight:500;color:var(--mute)}
.results-title{font-size:1.2rem;font-weight:700;margin-bottom:7px}
.results-sub{color:var(--mute);font-size:.86rem;margin-bottom:22px}
.results-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-review{padding:10px 20px;background:var(--line-2);color:var(--ink-2);border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer}
.btn-retry{padding:10px 20px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer}
.btn-other{padding:10px 20px;background:var(--ink);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer}
.btn-resume{padding:10px 20px;background:var(--violet);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer}
.endless-results-card{background:var(--panel);border-radius:var(--radius);padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.07);margin-bottom:18px}
.endless-results-card h2{font-size:1.2rem;font-weight:700;margin-bottom:20px;text-align:center}
.eres-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.eres-stat{background:#F8FAFC;border-radius:10px;padding:16px;text-align:center}
.eres-stat-val{font-size:2rem;font-weight:800;color:var(--ink)}
.eres-stat-val.hs{color:var(--violet)}
.eres-stat-val.green{color:var(--green)}
.eres-stat-lbl{font-size:.76rem;color:var(--mute);margin-top:4px}
.new-hs-badge{display:block;width:fit-content;background:var(--violet-bg);color:var(--violet);font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:20px;margin:0 auto 18px}
.review-list{background:var(--panel);border-radius:var(--radius);padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.review-list h3{font-size:.95rem;font-weight:700;margin-bottom:10px}
.review-sum{font-size:.78rem;color:var(--mute);margin-bottom:12px;display:flex;gap:14px;flex-wrap:wrap}
.rs-ok{color:#059669}.rs-bad{color:#DC2626}.rs-skip{color:var(--faint)}
.review-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.review-item:last-child{border-bottom:none}
.ri-icon{font-size:.95rem;flex-shrink:0;margin-top:2px}
.review-q{font-size:.84rem;color:var(--ink-2);line-height:1.5;transition:color .15s}
.review-item.is-ok .review-q,.review-item.is-skip .review-q{color:var(--mute)}
.review-item.is-skip .review-q{font-style:italic}
.review-item:hover .review-q{color:var(--orange)}
.empty-state{text-align:center;padding:18px;color:var(--mute);font-size:.875rem}

/* ── dark theme ──────────────────────────────────────────────────────────
   Tokens first, then the hard-coded tints that the light theme uses for
   badges, boxes and tables. html[data-theme="dark"] is set by the toggle in
   the header; with no preference saved the OS setting decides. */
html[data-theme="dark"]{
  --ink:#E5E7EB;--ink-2:#D1D5DB;--ink-3:#C4C9D1;--mute:#9CA3AF;--faint:#6B7280;
  --line:#2F3542;--line-2:#262B36;--bg:#111318;--panel:#1A1D24;
  --orange-bg:#2E1E12;--violet-bg:#241B3A;--green-bg:#0F2A21;--red-bg:#331A1C;--amber-bg:#2E2412;--sky-bg:#0E2230;
  --green-d:#34D399;--sky-d:#38BDF8;--amber-d:#FBBF24;--violet-d:#A78BFA;--orange-d:#FF8A33;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] code{background:#2A2F3A;color:#E5E7EB}
html[data-theme="dark"] .bank-chip,html[data-theme="dark"] .panel,html[data-theme="dark"] .section-card,
html[data-theme="dark"] .question-card,html[data-theme="dark"] .exp-panel,html[data-theme="dark"] details.deep,
html[data-theme="dark"] .src-box,html[data-theme="dark"] .results-card,html[data-theme="dark"] .endless-results-card,
html[data-theme="dark"] .review-list,html[data-theme="dark"] .endless-stats{box-shadow:0 2px 10px rgba(0,0,0,.35)}
html[data-theme="dark"] .home-desc{background:var(--panel);color:var(--ink-2)}
html[data-theme="dark"] .seg-btn,html[data-theme="dark"] .dom-check,html[data-theme="dark"] .dom-name,
html[data-theme="dark"] .sub-chip,html[data-theme="dark"] .tool-btn,html[data-theme="dark"] .choice-btn,
html[data-theme="dark"] .find-row input,html[data-theme="dark"] .start-input,html[data-theme="dark"] .jump-mini input,
html[data-theme="dark"] .back-btn{background:#20242D;color:var(--ink-2);border-color:var(--line)}
html[data-theme="dark"] .tool-btn:hover,html[data-theme="dark"] .back-btn:hover{background:#2A2F3A}
html[data-theme="dark"] .seg-btn:hover,html[data-theme="dark"] .seg-btn.active{background:var(--sky-bg)}
html[data-theme="dark"] .dom-name:hover,html[data-theme="dark"] .dom-name.open{background:var(--green-bg)}
html[data-theme="dark"] .dom-check{color:#4B5563}
html[data-theme="dark"] .dom-check.all{background:var(--green);border-color:var(--green);color:#fff}
html[data-theme="dark"] .dom-check.some{background:#ABE2CE;border-color:#ABE2CE;color:#0F2A21}
html[data-theme="dark"] .dom-name:hover,html[data-theme="dark"] .dom-name.open{background:#ABE2CE;border-color:#ABE2CE}
html[data-theme="dark"] .dom-name.open .dom-lbl,html[data-theme="dark"] .dom-name:hover .dom-lbl{color:#0F2A21}
html[data-theme="dark"] .dom-name.open .dom-w,html[data-theme="dark"] .dom-name:hover .dom-w{background:#8FCDB5;color:#0F2A21}
html[data-theme="dark"] .dom-name.open .dom-n,html[data-theme="dark"] .dom-name:hover .dom-n{color:#2F5F4B}
html[data-theme="dark"] .dom-name.open .dom-n b,html[data-theme="dark"] .dom-name:hover .dom-n b{color:#0F2A21}
html[data-theme="dark"] .dom-name.open .chev,html[data-theme="dark"] .dom-name:hover .chev{color:#2F5F4B}
html[data-theme="dark"] .sub-chip.on{background:#ABE2CE;border-color:#ABE2CE;color:#0F2A21;font-weight:600}
html[data-theme="dark"] .sub-chip.on b{color:#2F5F4B}
html[data-theme="dark"] .sub-chip:hover{border-color:#ABE2CE;color:#D9F2E7}
html[data-theme="dark"] .sub-chip.on:hover{color:#0F2A21}
html[data-theme="dark"] .len-seg{background:#20242D}
html[data-theme="dark"] .len-btn.active,html[data-theme="dark"] .ord-btn.active{background:#2A2F3A}
html[data-theme="dark"] .choice-btn:hover:not(.disabled){background:#2A2420}
html[data-theme="dark"] .choice-btn.selected:not(.submitted){background:var(--orange-bg)}
html[data-theme="dark"] .choice-btn.neutral-unsel{background:#20242D}
html[data-theme="dark"] .choice-key{background:#2A2F3A;color:var(--mute)}
html[data-theme="dark"] .scenario-box{background:#20242D;color:#CBD5E1;border-left-color:#475569}
html[data-theme="dark"] .scenario-box strong{color:#64748B}
html[data-theme="dark"] .answer-count{background:#059669}
html[data-theme="dark"] .answer-count.multi{background:#B45309}
html[data-theme="dark"] .badge-num{background:#2A2F3A;color:var(--mute)}
html[data-theme="dark"] .badge-ai{background:#1E2340;color:#A5B4FC}
html[data-theme="dark"] .badge-dump{background:#0F2A2E;color:#67E8F9}
html[data-theme="dark"] .badge-recall{background:#2E2A12;color:#FDE047}
html[data-theme="dark"] .badge-topic{background:var(--green-bg);color:#6EE7B7}
html[data-theme="dark"] .badge-multi{background:var(--amber-bg);color:#FCD34D}
html[data-theme="dark"] .badge-single{background:var(--green-bg);color:#6EE7B7}
html[data-theme="dark"] .badge-endless{background:var(--violet-bg);color:#C4B5FD}
html[data-theme="dark"] html[data-theme="dark"] .tag-std{background:var(--orange-bg)}
html[data-theme="dark"] .tag-end{background:var(--violet-bg);color:#C4B5FD}
html[data-theme="dark"] .hs-chip{background:var(--violet-bg);color:#C4B5FD}
html[data-theme="dark"] .score-badge{background:var(--orange-bg)}
html[data-theme="dark"] .warn-box,html[data-theme="dark"] .start-note{background:var(--amber-bg);color:#FDE68A}
html[data-theme="dark"] .alt-banner{background:var(--amber-bg);border-color:#5A4514;color:#FDE68A}
html[data-theme="dark"] .alt-banner b{color:#FEF3C7}
html[data-theme="dark"] .exp-key-neutral{background:#2A2F3A;color:var(--mute)}
html[data-theme="dark"] details.deep>summary:hover{background:#20242D}
html[data-theme="dark"] .deep-body th{background:#20242D;color:var(--ink)}
html[data-theme="dark"] .deep-body h4{color:var(--sky-d)}
html[data-theme="dark"] .bridge{background:var(--sky-bg);border-color:#1E3A4F;color:#BAE6FD}
html[data-theme="dark"] .bridge b.lead{color:var(--sky-d)}
html[data-theme="dark"] .tech-row{border-top-color:#2F3542}
html[data-theme="dark"] .tech-row b{color:#A5B4FC}
html[data-theme="dark"] .tech-kw{background:#20242D;border-color:#3B4262;color:#C7D2FE}
html[data-theme="dark"] .tech-pressure{background:#1E2340}
html[data-theme="dark"] details.deep.d-tech{border-left-color:#818CF8}
html[data-theme="dark"] .search-hit:hover{background:#241B3A}
html[data-theme="dark"] .search-hit mark{background:#5A4514;color:#FDE68A}
html[data-theme="dark"] .eres-stat{background:#20242D}
html[data-theme="dark"] .btn-prev,html[data-theme="dark"] .btn-review{background:#2A2F3A;color:var(--ink-2)}
html[data-theme="dark"] .btn-prev:hover{background:#343A47}
html[data-theme="dark"] .btn-next,html[data-theme="dark"] .btn-other{background:#E5E7EB;color:#111318}
html[data-theme="dark"] .btn-next:hover{background:#fff}
html[data-theme="dark"] .btn-next:disabled,html[data-theme="dark"] .btn-prev:disabled{background:#2A2F3A;color:#4B5563}
html[data-theme="dark"] .btn-submit:disabled{background:#2A2F3A;color:#6B7280}
html[data-theme="dark"] .review-item:hover .review-q{color:var(--orange-d)}
html[data-theme="dark"] .score-circle{border-color:var(--orange-d)}
html[data-theme="dark"] .opt-row{color:var(--ink-2)}
html[data-theme="dark"] .rs-ok{color:#34D399}.rs-bad{color:#F87171}

/* theme toggle */
.theme-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.theme-toggle{display:inline-flex;gap:2px;background:var(--line-2);border-radius:9px;padding:3px}
.theme-btn{border:none;background:transparent;color:var(--mute);font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer}
.theme-btn.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
html[data-theme="dark"] .theme-toggle{background:#20242D}
html[data-theme="dark"] .theme-btn.active{background:#343A47}