/* === Home screen: slider + 12-col grid === */
.home{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(min-width:768px){.home{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}}
.home > *{grid-column:1/-1}

/* ── slider ── */
.hero-slider{position:relative;overflow:hidden;border-radius:var(--radius-5);background:var(--color-paper-2);border:1px solid var(--color-border)}
.hero-track{display:flex;transition:transform 500ms var(--ease-out);will-change:transform}
.hero-slide{min-width:100%;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;justify-content:space-between;position:relative;background:linear-gradient(135deg,var(--slide-glow,var(--color-accent-glow)),transparent 60%),var(--color-paper-2);min-height:clamp(260px,50vh,380px)}
.hero-slide-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.hero-slide .home-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:color-mix(in oklch,var(--color-paper) 70%,transparent);backdrop-filter:blur(8px);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--slide-accent,var(--color-accent));text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;width:fit-content}
.hero-slide .home-hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--slide-accent,var(--color-accent));box-shadow:0 0 8px var(--slide-accent,var(--color-accent))}
.hero-coming-badge{font-size:10px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--color-paper-3);color:var(--color-ink-2);font-weight:var(--weight-semibold);letter-spacing:0.04em;white-space:nowrap}
.hero-slide .home-hero-title{font-size:clamp(28px,5vw,48px);font-weight:var(--weight-black);line-height:1.05;letter-spacing:-0.03em;max-width:20ch;overflow-wrap:anywhere;min-width:0}
.hero-slide .home-hero-sub{font-size:var(--text-md);color:var(--color-ink-2);max-width:52ch;line-height:var(--leading-snug)}
.hero-slide .home-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-slide-marks{position:absolute;right:clamp(20px,4vw,32px);bottom:clamp(20px,4vw,32px);display:flex;gap:8px;opacity:.45}
.hero-slide-marks span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius-2)}

.hero-controls{position:absolute;left:0;right:0;bottom:16px;display:flex;align-items:center;justify-content:center;gap:12px;z-index:2}
.hero-arrow{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:color-mix(in oklch,var(--color-paper) 88%,transparent);backdrop-filter:blur(8px);border:1px solid var(--color-border);color:var(--color-ink-2);cursor:pointer;transition:all var(--dur-fast) var(--ease-soft)}
.hero-arrow:hover{color:var(--color-ink);border-color:var(--color-border-strong);background:var(--color-paper)}
.hero-arrow svg{width:14px;height:14px}
.hero-dots{display:flex;gap:6px}
.hero-dot{width:8px;height:8px;border-radius:50%;background:var(--color-paper-4);border:none;cursor:pointer;transition:all var(--dur-base) var(--ease-soft);padding:0}
.hero-dot:hover{background:var(--color-ink-4)}
.hero-dot.is-active{background:var(--slide-accent,var(--color-accent));width:24px;border-radius:var(--radius-pill)}

/* ── cert cards — back to grid area ── */
.hero-slide .home-hero-actions .btn-accent{background:var(--slide-accent,var(--color-accent));color:var(--color-paper)}
.hero-slide .home-hero-actions .btn-accent:hover{background:var(--slide-accent-strong,var(--color-accent-strong))}

/* ── home cert cards ── */
.home-cert{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media(min-width:768px){.home-cert{grid-column:1 / span 8;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.cert-card.is-inactive{opacity:.65;cursor:default}
.cert-card.is-inactive:hover{transform:none;box-shadow:var(--shadow-1);border-color:var(--color-border)}

/* ── home stats — next to cert cards on desktop ── */
.home-stats{grid-column:1/-1;background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-4);padding:clamp(20px,4vw,28px);display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;overflow:hidden}
.home-stats::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),oklch(70% 0.18 220),oklch(60% 0.18 165))}
.home-stats-title{grid-column:1/-1;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:color-mix(in oklch,var(--color-paper) 60%,transparent);text-transform:uppercase;letter-spacing:0.08em}
.home-stats-cell{padding:12px;background:color-mix(in oklch,var(--color-paper) 8%,transparent);border-radius:var(--radius-3)}
.home-stats-cell-num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-black);line-height:1;color:var(--color-paper);letter-spacing:-0.02em}
.home-stats-cell-lbl{font-size:var(--text-xs);color:color-mix(in oklch,var(--color-paper) 60%,transparent);text-transform:uppercase;letter-spacing:0.05em;margin-top:4px}
@media(min-width:768px){.home-stats{grid-column:span 4}}

/* ── home info: research cell wider ── */
.home-info{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:28px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.home-info-cell.is-wide{grid-column:1/-1}
@media(min-width:768px){.home-info-cell.is-wide{grid-column:span 2}}
.home-info-cell-icon.u-accent{background:var(--color-ink-3);color:var(--color-paper)}

/* base home-info-cell styles */
.home-info-cell{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--color-paper);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.home-info-cell-icon{width:40px;height:40px;display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent);border-radius:var(--radius-2)}
.home-info-cell-icon svg{width:20px;height:20px}
.home-info-cell-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--color-ink)}
.home-info-cell-desc{font-size:var(--text-sm);color:var(--color-ink-3);line-height:var(--leading-snug)}

.cert-card{padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--color-paper-2);border:1.5px solid var(--color-border);border-radius:var(--radius-4);text-align:left;cursor:pointer;transition:all var(--dur-base) var(--ease-soft);min-height:200px;position:relative;overflow:hidden}
.cert-card::after{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,var(--color-accent-glow) 0%,transparent 70%);opacity:0;transition:opacity var(--dur-base) var(--ease-soft);pointer-events:none}
.cert-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-3)}
.cert-card:hover::after{opacity:1}
.cert-card-badge{align-self:flex-start;font-family:var(--font-mono);font-size:var(--text-xs);padding:3px 8px;background:var(--color-paper-3);color:var(--color-ink-2);border-radius:var(--radius-2);letter-spacing:0.05em}
.cert-card-code{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-black);color:var(--color-ink);letter-spacing:-0.02em;margin-top:auto}
.cert-card-name{font-size:var(--text-sm);color:var(--color-ink-2);line-height:var(--leading-snug)}
.cert-card-stats{display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);margin-top:8px}
.cert-card-stats span{display:flex;align-items:center;gap:4px}
.cert-card-stats strong{color:var(--color-ink);font-weight:var(--weight-semibold)}

/* === Setup screen (split) === */
.setup{display:grid;gap:24px;grid-template-columns:1fr;max-width:960px;margin:0 auto}
@media (min-width:900px){.setup{grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}}

.setup-form{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:20px}
.setup-form-head{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}
.setup-form-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-accent);text-transform:uppercase;letter-spacing:0.08em}
.setup-form-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:-0.02em;line-height:var(--leading-tight)}
.setup-form-sub{font-size:var(--text-sm);color:var(--color-ink-3)}

.setup-preview{position:sticky;top:calc(var(--topbar-h) + 16px);display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-4);overflow:hidden}
.setup-preview::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),oklch(70% 0.18 220))}
.setup-preview-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:color-mix(in oklch,var(--color-paper) 60%,transparent);text-transform:uppercase;letter-spacing:0.08em}
.setup-preview-summary{display:flex;flex-direction:column;gap:8px}
.setup-preview-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid color-mix(in oklch,var(--color-paper) 12%,transparent);font-size:var(--text-sm)}
.setup-preview-row:last-child{border-bottom:none}
.setup-preview-key{color:color-mix(in oklch,var(--color-paper) 60%,transparent);font-family:var(--font-display);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.05em}
.setup-preview-val{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--color-paper)}
.setup-preview-cta{margin-top:8px}

/* === Exam screen (focus) === */
.exam{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - var(--topbar-h) - 80px)}
.exam-head{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}
.exam-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.exam-head-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.exam-head-counter{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em}
.exam-head-counter strong{color:var(--color-ink);font-weight:var(--weight-bold)}
.exam-head-timer{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-ink)}
.exam-head-timer.is-warning{background:var(--color-warning-soft);color:var(--color-warning-ink);border-color:var(--color-warning);animation:pulse-warning 1.5s ease infinite}
.exam-head-timer.is-danger{background:var(--color-error-soft);color:var(--color-error-ink);border-color:var(--color-error);animation:pulse-warning .8s ease infinite}
@keyframes pulse-warning{0%,100%{opacity:1}50%{opacity:.7}}
.exam-head-timer svg{width:14px;height:14px}

.exam-question{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:20px}
.exam-question-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.exam-question-text{font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--color-ink)}
.exam-options{display:flex;flex-direction:column;gap:10px}

/* YN rows (yes_no_set) */
.yn-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.yn-row+.yn-row{margin-top:8px}
.yn-text{flex:1;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--color-ink);min-width:0;overflow-wrap:anywhere}
.yn-actions{display:flex;gap:6px;flex-shrink:0}
.yn-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-paper);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-ink-2);cursor:pointer;transition:all var(--dur-fast) var(--ease-soft);min-height:36px;white-space:nowrap}
.yn-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.yn-btn.is-selected{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.yn-btn.is-correct{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success-ink)}
.yn-btn.is-incorrect{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error-ink)}
.yn-btn:disabled{pointer-events:none;opacity:.85}
.yn-key{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:color-mix(in oklch,currentColor 15%,transparent);font-size:11px;font-weight:var(--weight-black);letter-spacing:0}
.yn-btn.is-selected .yn-key{background:color-mix(in oklch,var(--color-paper) 25%,transparent)}
@media (max-width:480px){.yn-row{flex-direction:column;align-items:stretch;gap:8px}.yn-actions{justify-content:flex-end}}

/* Dropdown rows */
.dd-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.dd-row+.dd-row{margin-top:8px}
.dd-row.is-correct{border-color:var(--color-success);background:var(--color-success-soft)}
.dd-row.is-incorrect{border-color:var(--color-error);background:var(--color-error-soft)}
.dd-blank{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em;min-width:50px}
.dd-select{flex:1;padding:10px 12px;background:var(--color-paper);border:1.5px solid var(--color-border);border-radius:var(--radius-2);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;transition:all var(--dur-fast) var(--ease-soft);min-height:40px;appearance:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23999' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:36px}
.dd-select:hover{border-color:var(--color-accent)}
.dd-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}
.dd-mark{width:22px;height:22px;display:grid;place-items:center;color:var(--color-error);flex-shrink:0}
.dd-mark svg{width:14px;height:14px}
.dd-mark.is-ok{color:var(--color-success)}

/* Ordering items */
.ord-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--color-paper-2);border:1.5px solid var(--color-border);border-radius:var(--radius-3);cursor:grab;transition:all var(--dur-fast) var(--ease-soft)}
.ord-item+.ord-item{margin-top:6px}
.ord-item:hover{border-color:var(--color-accent);transform:translateX(2px)}
.ord-item.is-placed{border-color:var(--color-accent);background:var(--color-accent-soft)}
.ord-item.is-correct{border-color:var(--color-success);background:var(--color-success-soft)}
.ord-item.is-incorrect{border-color:var(--color-error);background:var(--color-error-soft)}
.ord-item.is-dragging{opacity:0.4;cursor:grabbing;transform:scale(0.98)}
.ord-item.is-drag-over{border-color:var(--color-accent);border-style:dashed;transform:translateY(-2px);box-shadow:0 4px 16px -4px color-mix(in oklch,var(--color-accent) 30%,transparent)}
.ord-num{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-2);background:var(--color-paper);border:1px solid var(--color-border);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--color-ink-3);flex-shrink:0}
.ord-item.is-placed .ord-num{background:var(--color-accent);color:var(--color-paper);border-color:var(--color-accent)}


.exam-explain{background:var(--color-paper-3);border:1px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-3);padding:16px 20px;display:flex;flex-direction:column;gap:8px;animation:explain-in var(--dur-slow) var(--ease-out)}
.exam-explain.is-correct{border-left-color:var(--color-success);background:var(--color-success-soft)}
.exam-explain.is-incorrect{border-left-color:var(--color-error);background:var(--color-error-soft)}
.exam-explain-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;gap:8px;color:var(--color-ink-2)}
.exam-explain.is-correct .exam-explain-title{color:var(--color-success-ink)}
.exam-explain.is-incorrect .exam-explain-title{color:var(--color-error-ink)}
.exam-explain-body{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-2)}
@keyframes explain-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.exam-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;flex-wrap:wrap}
.exam-foot-actions{display:flex;gap:8px;flex-wrap:wrap}

/* === Result screen (stat-led) === */
.result{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.result-hero{display:grid;grid-template-columns:1fr;gap:24px;padding:clamp(24px,5vw,40px);background:var(--gradient-hero),var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-5);position:relative;overflow:hidden}
@media (min-width:640px){.result-hero{grid-template-columns:auto 1fr;align-items:center;gap:40px}}
.result-hero-content{display:flex;flex-direction:column;gap:8px}
.result-hero-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-accent);text-transform:uppercase;letter-spacing:0.08em}
.result-hero-title{font-size:clamp(28px,5vw,40px);font-weight:var(--weight-black);letter-spacing:-0.02em;line-height:1.1}
.result-hero-sub{color:var(--color-ink-2);font-size:var(--text-md);max-width:48ch;line-height:var(--leading-snug)}

.result-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.result-stats{grid-template-columns:repeat(4,1fr)}}
.result-stat{padding:16px;background:var(--color-paper);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.result-stat-lbl{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em}
.result-stat-val{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-black);color:var(--color-ink);margin-top:4px;letter-spacing:-0.02em;line-height:1}
.result-stat-val.is-success{color:var(--color-success-ink)}
.result-stat-val.is-error{color:var(--color-error-ink)}

.result-breakdown{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:16px}
.result-breakdown-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.result-breakdown-title{font-size:var(--text-lg);font-weight:var(--weight-bold)}
.result-breakdown-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em}
.result-domain{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-border)}
.result-domain:last-child{border-bottom:none}
.result-domain-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.result-domain-name{font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-ink);font-family:var(--font-display);overflow-wrap:anywhere}
.result-domain-bar{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--color-ink-3);font-family:var(--font-mono)}
.result-domain-bar-track{flex:1;min-width:60px;max-width:160px;height:6px;background:var(--color-paper-3);border-radius:var(--radius-pill);overflow:hidden}
.result-domain-bar-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-pill);transition:width var(--dur-narrative) var(--ease-out)}
.result-domain-score{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-ink);text-align:right;min-width:60px}

.result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:24px 0}

/* === History screen (list) === */
.history{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.history-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.history-head-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:-0.02em}
.history-head-sub{font-size:var(--text-sm);color:var(--color-ink-3);margin-top:4px}
.history-empty{padding:60px 24px;text-align:center;background:var(--color-paper-2);border:1px dashed var(--color-border-strong);border-radius:var(--radius-4);color:var(--color-ink-3)}
.history-empty svg{width:48px;height:48px;color:var(--color-ink-4);margin:0 auto 16px;display:block}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px 20px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-3);transition:all var(--dur-fast) var(--ease-soft);cursor:pointer}
.history-item:hover{border-color:var(--color-border-strong);background:var(--color-paper-3);transform:translateX(2px)}
.history-item-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.history-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.history-item-name{font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-ink);font-family:var(--font-display)}
.history-item-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em}
.history-item-right{display:flex;align-items:center;gap:12px}
.history-item-score{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-black);color:var(--color-ink);letter-spacing:-0.02em;min-width:60px;text-align:right}

/* === Settings === */
.settings{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.settings-section{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:8px}
.settings-section-title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-accent);text-transform:uppercase;letter-spacing:0.08em;padding-bottom:12px;border-bottom:1px solid var(--color-border);margin-bottom:8px}

/* === Exam feedback: verdict banner + per-option analysis === */
.verdict{display:flex;gap:14px;padding:16px 18px;border-radius:var(--radius-3);border:1px solid var(--color-border);animation:verdict-in var(--dur-slow) var(--ease-spring) both}
@keyframes verdict-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.verdict.is-correct{background:var(--color-success-soft);border-color:var(--color-success)}
.verdict.is-incorrect{background:var(--color-error-soft);border-color:var(--color-error)}
.verdict-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--color-paper)}
.verdict-icon svg{width:18px;height:18px}
.verdict.is-correct .verdict-icon{background:var(--color-success);animation:verdict-pop var(--dur-slow) var(--ease-spring) both}
.verdict.is-incorrect .verdict-icon{background:var(--color-error);animation:verdict-pop var(--dur-slow) var(--ease-spring) both}
@keyframes verdict-pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.verdict-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.verdict-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);letter-spacing:-0.01em}
.verdict.is-correct .verdict-title{color:var(--color-success-ink)}
.verdict.is-incorrect .verdict-title{color:var(--color-error-ink)}
.verdict-body{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-2)}

.opt-analysis{display:flex;flex-direction:column;gap:6px;margin-top:4px;animation:verdict-in var(--dur-slow) var(--ease-soft) 120ms both}
.opt-analysis-head{display:flex;align-items:center;gap:8px;padding:10px 4px 4px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:0.06em;color:var(--color-ink-3)}
.opt-analysis-head svg{width:14px;height:14px}

.opt-detail{border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-paper);overflow:hidden}
.opt-detail.is-correct{border-color:var(--color-success);background:var(--color-success-soft)}
.opt-detail.is-yours{border-color:var(--color-error);background:var(--color-error-soft)}
.opt-detail summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;user-select:none;transition:background var(--dur-fast) var(--ease-soft)}
.opt-detail summary::-webkit-details-marker{display:none}
.opt-detail summary:hover{background:color-mix(in oklch,var(--color-paper-3) 60%,transparent)}
.opt-detail-key{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-1);background:var(--color-paper-3);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xs);color:var(--color-ink-2)}
.opt-detail.is-correct .opt-detail-key{background:var(--color-success);color:var(--color-paper)}
.opt-detail.is-yours .opt-detail-key{background:var(--color-error);color:var(--color-paper)}
.opt-detail-text{flex:1;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--color-ink);min-width:0;overflow-wrap:anywhere}
.opt-tag{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:10px;font-weight:var(--weight-semibold);font-family:var(--font-display);letter-spacing:0.02em;background:var(--color-paper-3);color:var(--color-ink-3);white-space:nowrap}
.opt-tag svg{width:10px;height:10px}
.opt-tag.is-correct{background:var(--color-success);color:var(--color-paper)}
.opt-tag.is-yours{background:var(--color-error);color:var(--color-paper)}
.opt-detail-chev{flex-shrink:0;width:16px;height:16px;color:var(--color-ink-3);transition:transform var(--dur-base) var(--ease-soft)}
.opt-detail-chev svg{width:16px;height:16px}
.opt-detail[open] .opt-detail-chev{transform:rotate(180deg)}
.opt-detail-body{padding:0 12px 12px 46px;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-2);animation:opt-body-in var(--dur-base) var(--ease-out)}
@keyframes opt-body-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:520px){.opt-detail-body{padding-left:12px}.opt-tag{font-size:9px;padding:2px 6px}}

.kb-hint{font-family:var(--font-mono);font-size:10px;color:var(--color-ink-4);letter-spacing:0.04em;text-transform:uppercase}
@media (max-width:640px){.kb-hint{display:none}}

/* === Result screen: confetti + staggered reveals === */
.result.is-passed{position:relative}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.confetti i{position:absolute;top:-12px;left:calc(var(--x)*1%);width:8px;height:12px;background:var(--color-accent);opacity:.9;border-radius:2px;animation:confetti-fall 2.6s var(--ease-soft) var(--d) both;transform:rotate(calc(var(--r)*1deg))}
.confetti i:nth-child(3n){background:var(--color-success)}
.confetti i:nth-child(4n){background:var(--color-warning);width:6px;height:6px;border-radius:50%}
.confetti i:nth-child(5n){background:var(--color-info);width:10px;height:6px}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(calc(var(--r)*1deg));opacity:1}80%{opacity:1}100%{transform:translateY(110vh) rotate(calc(var(--r)*1deg + 540deg));opacity:0}}

.result-hero,.result-stats,.result-breakdown,.result-next{position:relative;z-index:1}
.reveal-in{animation:reveal-rise var(--dur-narrative) var(--ease-out) both}
@keyframes reveal-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.result-next{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:clamp(20px,4vw,28px);display:flex;flex-direction:column;gap:10px}
.result-next-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-accent);text-transform:uppercase;letter-spacing:0.08em}
.result-next-row{display:flex;align-items:baseline;gap:10px;font-size:var(--text-sm);color:var(--color-ink);flex-wrap:wrap}
.result-next-tag{flex-shrink:0;display:inline-flex;padding:2px 10px;border-radius:var(--radius-pill);font-size:10px;font-weight:var(--weight-bold);font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.04em}
.result-next-tag.is-strong{background:var(--color-success-soft);color:var(--color-success-ink)}
.result-next-tag.is-weak{background:var(--color-warning-soft);color:var(--color-warning-ink)}
.result-next-note{font-size:var(--text-sm);color:var(--color-ink-3);line-height:var(--leading-snug);margin-top:4px}

/* === Confetti / success animation === */
@keyframes burst{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
.is-burst{animation:burst var(--dur-slow) var(--ease-spring)}