/* === Button === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-sm);letter-spacing:-0.01em;transition:all var(--dur-fast) var(--ease-soft);position:relative;overflow:hidden;min-height:44px;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn:focus-visible{outline-offset:3px}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:16px;height:16px;flex-shrink:0}

.btn-primary{background:var(--color-ink);color:var(--color-paper);box-shadow:var(--shadow-2)}
.btn-primary:hover{background:var(--color-accent);color:var(--color-paper);transform:translateY(-1px);box-shadow:var(--shadow-accent)}
.btn-primary:active{transform:translateY(0)}

.btn-accent{background:var(--color-accent);color:var(--color-paper);box-shadow:var(--shadow-accent)}
.btn-accent:hover{background:var(--color-accent-strong);transform:translateY(-1px);box-shadow:var(--shadow-3)}

.btn-secondary{background:var(--color-paper-2);color:var(--color-ink);border-color:var(--color-border)}
.btn-secondary:hover{background:var(--color-paper-3);border-color:var(--color-border-strong)}

.btn-ghost{background:transparent;color:var(--color-ink-2)}
.btn-ghost:hover{background:var(--color-paper-2);color:var(--color-ink)}

.btn-lg{padding:16px 28px;font-size:var(--text-base);min-height:56px}
.btn-sm{padding:8px 14px;font-size:var(--text-xs);min-height:36px}
.btn-icon{width:44px;padding:0}
.btn-block{width:100%}

/* === Card === */
.card{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-4);padding:24px;position:relative;transition:all var(--dur-base) var(--ease-soft);box-shadow:var(--shadow-1)}
.card.is-interactive{cursor:pointer}
.card.is-interactive:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-3);transform:translateY(-2px)}
.card.is-interactive:active{transform:translateY(0)}
.card-eyebrow{display:inline-flex;align-items:center;gap:6px;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;margin-bottom:12px}
.card-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent)}
.card-title{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:8px;color:var(--color-ink)}
.card-body{color:var(--color-ink-2);font-size:var(--text-sm);line-height:var(--leading-normal)}
.card-meta{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-ink-3);font-family:var(--font-mono)}

/* === Badge === */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);font-family:var(--font-display);letter-spacing:-0.01em;line-height:1.4}
.badge-easy{background:var(--color-success-soft);color:var(--color-success-ink)}
.badge-medium{background:var(--color-warning-soft);color:var(--color-warning-ink)}
.badge-hard{background:var(--color-error-soft);color:var(--color-error-ink)}
.badge-domain{background:var(--color-paper-3);color:var(--color-ink-2);font-family:var(--font-mono);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:0.05em;font-size:10px}
.badge-pass{background:var(--color-success-soft);color:var(--color-success-ink)}
.badge-fail{background:var(--color-error-soft);color:var(--color-error-ink)}
.badge-seen{background:color-mix(in oklch,var(--color-warning-soft) 70%,transparent);color:var(--color-warning-ink);border:1px solid color-mix(in oklch,var(--color-warning-ink) 25%,transparent);cursor:default;gap:5px;transition:opacity var(--dur-fast) var(--ease-soft)}
.badge-seen svg{opacity:.85}
.badge-seen:hover{opacity:.85}

/* === Form === */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-ink-2);font-family:var(--font-display);letter-spacing:0.02em;text-transform:uppercase}
.field-input,.field-select{width:100%;padding:12px 14px;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);transition:all var(--dur-fast) var(--ease-soft);min-height:44px}
.field-input:hover,.field-select:hover{border-color:var(--color-border-strong)}
.field-input:focus,.field-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}
.field-select{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 12px center;background-size:16px;padding-right:40px}
.field-help{font-size:var(--text-xs);color:var(--color-ink-3);line-height:var(--leading-snug)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}

/* === Segmented control === */
.segmented{position:relative;display:inline-flex;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;width:100%}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{flex:1;text-align:center;padding:10px 14px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-ink-3);cursor:pointer;border-radius:var(--radius-pill);transition:all var(--dur-fast) var(--ease-soft);font-family:var(--font-display);position:relative;z-index:1;min-height:36px;display:flex;align-items:center;justify-content:center}
.segmented label:hover{color:var(--color-ink)}
.segmented input:checked + label{background:var(--color-paper);color:var(--color-ink);box-shadow:var(--shadow-1)}
.segmented input:focus-visible + label{outline:2px solid var(--color-accent);outline-offset:2px}

/* === Option (question answer) === */
.option{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--color-paper-2);border:1.5px solid var(--color-border);border-radius:var(--radius-3);cursor:pointer;transition:all var(--dur-fast) var(--ease-soft);text-align:left;width:100%;font-family:inherit;font-size:var(--text-base);color:var(--color-ink)}
.option:hover{border-color:var(--color-accent);background:var(--color-paper);transform:translateX(2px)}
.option:active{transform:scale(.99)}
.option-key{flex-shrink:0;width:32px;height:32px;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);transition:all var(--dur-fast) var(--ease-soft)}
.option:hover .option-key{background:var(--color-accent);color:var(--color-paper);border-color:var(--color-accent)}
.option-text{flex:1;line-height:var(--leading-snug);min-width:0;overflow-wrap:anywhere}
.option-mark{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;color:var(--color-ink-3);opacity:0;transition:all var(--dur-base) var(--ease-spring)}
.option:hover .option-mark{opacity:1;transform:translateX(0)}
.option-mark.is-shown{opacity:1;transform:none}
.option.is-correct .option-mark{color:var(--color-success)}
.option.is-incorrect .option-mark{color:var(--color-error)}
.option-mark svg{width:16px;height:16px}

.option.is-selected{border-color:var(--color-accent);background:var(--color-accent-soft)}
.option.is-selected .option-key{background:var(--color-accent);color:var(--color-paper);border-color:var(--color-accent)}
.option.is-correct{border-color:var(--color-success);background:var(--color-success-soft);animation:pulse-correct var(--dur-slow) var(--ease-spring)}
.option.is-correct .option-key{background:var(--color-success);color:var(--color-paper);border-color:var(--color-success)}
.option.is-incorrect{border-color:var(--color-error);background:var(--color-error-soft);animation:shake-incorrect var(--dur-slow) var(--ease-soft)}
.option.is-incorrect .option-key{background:var(--color-error);color:var(--color-paper);border-color:var(--color-error)}
.option.is-disabled{pointer-events:none}
.option.is-dim{opacity:.5}
@keyframes pulse-correct{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes shake-incorrect{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* === Progress bar === */
.progress{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.05em}
.progress-track{flex:1;height:6px;background:var(--color-paper-3);border-radius:var(--radius-pill);overflow:hidden;position:relative}
.progress-fill{position:absolute;inset:0;background:var(--color-accent);border-radius:var(--radius-pill);width:0%;transition:width var(--dur-slow) var(--ease-out);transform-origin:left}
.progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(98% 0.005 270 / 0.3),transparent);animation:progress-shine 2s linear infinite}
@keyframes progress-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* === Question palette (dotted nav) === */
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:6px;padding:12px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.palette-cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-ink-3);background:var(--color-paper);transition:all var(--dur-fast) var(--ease-soft);min-width:0;padding:0;cursor:pointer}
.palette-cell:hover{border-color:var(--color-accent);color:var(--color-accent)}
.palette-cell.is-current{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-paper);box-shadow:var(--shadow-1);font-weight:var(--weight-bold)}
.palette-cell.is-answered{background:var(--color-accent-soft);color:var(--color-accent);border-color:var(--color-accent-soft)}
.palette-cell.is-flagged{border-color:var(--color-warning);color:var(--color-warning)}

/* === Stat === */
.stat{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-3)}
.stat-label{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}
.stat-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-black);color:var(--color-ink);line-height:1;letter-spacing:-0.02em}
.stat-value.is-accent{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-trend{font-size:var(--text-xs);color:var(--color-ink-3);font-family:var(--font-mono)}

/* === Score circle === */
.score-ring{position:relative;width:200px;height:200px;display:grid;place-items:center;margin:0 auto}
.score-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.score-ring-track{stroke:var(--color-paper-3);fill:none;stroke-width:10}
.score-ring-fill{stroke:var(--color-accent);fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset var(--dur-narrative) var(--ease-out),stroke var(--dur-base) var(--ease-soft)}
.score-ring-text{text-align:center}
.score-ring-num{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-black);color:var(--color-ink);line-height:1;letter-spacing:-0.02em}
.score-ring-num.is-pass{color:var(--color-success)}
.score-ring-num.is-fail{color:var(--color-error)}
.score-ring-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px}

/* === Toggle (settings) === */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--color-border)}
.toggle-row:last-child{border-bottom:none}
.toggle-row-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.toggle-row-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-ink)}
.toggle-row-desc{font-size:var(--text-sm);color:var(--color-ink-3);line-height:var(--leading-snug)}
.toggle{position:relative;width:48px;height:28px;background:var(--color-paper-3);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur-base) var(--ease-soft);flex-shrink:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--color-paper);border-radius:50%;box-shadow:var(--shadow-1);transition:all var(--dur-base) var(--ease-spring)}
.toggle:hover{border-color:var(--color-border-strong)}
.toggle[aria-checked="true"]{background:var(--color-accent);border-color:var(--color-accent)}
.toggle[aria-checked="true"]::after{transform:translateX(20px);background:var(--color-paper)}

/* === Skeleton loader === */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--color-paper-2) 0%,var(--color-paper-3) 50%,var(--color-paper-2) 100%);background-size:200% 100%;animation:shimmer 1.6s linear infinite;border-radius:var(--radius-2)}

/* === Toast (defined in base.css) === */