:root {
  color-scheme: light;
  --background: #f2f6f4;
  --surface: #fff;
  --ink: #172b28;
  --muted: #586d67;
  --line: #dce6e1;
  --line-strong: #cbdad3;
  --wash: #f6f9f7;
  --accent: #11664f;
  --accent-deep: #0a503e;
  --accent-soft: #eaf5ef;
  --accent-line: #88bba4;
  --hero-from: #133b35;
  --hero-to: #1a5043;
  --hero-glow: #bbecce;
  --shadow: 0 3px 10px #173c2d07;
  --body-font: Inter, Geist, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --number-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font-family: var(--body-font); font-size: 15px; line-height: 1.55; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #44a589; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd { margin: 0; }
.icon { display: inline-block; flex: 0 0 auto; width: 19px; height: 19px; vertical-align: middle; }
button, input, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #c2e9d8; color: #0c4938; }

.skip-link { position: fixed; z-index: 20; top: 10px; left: 12px; padding: 9px 13px; border-radius: 6px; color: white; background: #114c3b; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { width: min(100% - 72px, 1180px); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: #173b32; font-weight: 760; font-size: 18px; line-height: 1.1; white-space: nowrap; border-radius: 9px; user-select: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #174f40; color: #d6f3df; }
.brand-mark svg { width: 23px; height: 23px; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-left: auto; }
.hide-hidden-button { min-height: 36px; flex: 0 0 auto; margin-left: -12px; padding: 5px 11px; border: 1px solid #d7c7eb; border-radius: 8px; background: #fff; color: #5c3e95; font-size: 13px; font-weight: 680; white-space: nowrap; }
.hide-hidden-button:hover { background: #f3edfa; border-color: #b8a3d5; }
.nav-item { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #4d625c; font-size: 14px; font-weight: 650; white-space: nowrap; }
.nav-item .icon { width: 17px; height: 17px; }
.nav-item:hover { background: #f0f5f2; color: #173b32; }
.nav-item[aria-current] { background: #e7f2ec; color: #0d5b44; }
.nav-item.nav-normal[aria-current] { background: #e4f0f2; color: #165667; }
.nav-item.nav-hidden { color: #5c3e95; background: #f2eafa; }
.nav-item.nav-hidden:hover, .nav-item.nav-hidden[aria-current] { color: #fff; background: #604299; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.page-shell { width: min(100% - 72px, 1180px); min-height: calc(100vh - 73px); margin: 0 auto; padding: 29px 0 56px; outline: 0; }
.loading-message { padding: 30px 0; color: var(--muted); }
.theme-exam { --accent: #185e70; --accent-deep: #124b5b; --accent-soft: #e8f3f5; --accent-line: #8ab5c1; --hero-from: #153943; --hero-to: #205361; --hero-glow: #bbe8ed; }
.theme-hidden { --accent: #65459b; --accent-deep: #513583; --accent-soft: #f3edfa; --accent-line: #b8a3d5; --hero-from: #362b50; --hero-to: #533d71; --hero-glow: #e5d5ff; }
.theme-history { --hero-from: #193c40; --hero-to: #2a5454; --hero-glow: #c6e8e0; }
.page-hero { min-height: 170px; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; margin-bottom: 23px; padding: 26px 33px; border-radius: 17px; background: linear-gradient(112deg, var(--hero-from) 12%, var(--hero-to) 100%); color: #fff; }
.hero-pattern { position: absolute; z-index: -1; inset: 0 0 0 35%; opacity: .65; pointer-events: none; background-image: linear-gradient(90deg, #d3f6e513 1px, transparent 1px), linear-gradient(#d3f6e513 1px, transparent 1px); background-size: 27px 27px; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.hero-pattern::before, .hero-pattern::after { content: ""; position: absolute; border: 1px solid #e8fff52c; border-radius: 50%; width: 360px; height: 360px; top: -65px; right: -82px; box-shadow: 0 0 0 25px #e8fff50c, 0 0 0 52px #e8fff50a; }
.hero-pattern::after { width: 560px; height: 180px; top: 15px; right: -146px; border-radius: 0; transform: rotate(-27deg); box-shadow: 0 22px 0 -21px #e8fff527; border-inline: 0; }
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--hero-glow); font-size: 12px; font-weight: 620; letter-spacing: .065em; }
.hero-eyebrow::before { content: ""; display: inline-block; width: 15px; height: 1px; background: currentColor; opacity: .8; }
.page-hero h1 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.15; font-weight: 750; letter-spacing: .015em; margin: 10px 0 9px; }
.hero-subtitle { color: #f1fcf6d9; font-size: 14px; }
.hero-stats { display: flex; align-items: center; gap: 25px; margin-left: auto; flex: 0 0 auto; }
.hero-stat { display: grid; gap: 4px; padding-left: 25px; border-left: 1px solid #f5fff438; }
.hero-stat strong { color: var(--hero-glow); font-size: 33px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.hero-stat span { color: #f1fcf6d9; font-size: 12px; white-space: nowrap; }

.workspace-grid, .session-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(274px, 31%); align-items: start; gap: 21px; }
.panel-stack { display: grid; gap: 20px; min-width: 0; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 23px; box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.panel-head.compact { margin-bottom: 12px; }
.panel-head h2, .setup-summary h2 { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 720; line-height: 1.35; }
.panel-head h2 .icon { color: var(--accent); }
.panel-head p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 0; background: transparent; color: var(--accent); border: 0; border-radius: 4px; font-size: 13px; font-weight: 680; line-height: 1.4; white-space: nowrap; }
.text-button:hover:not(:disabled) { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.text-button:disabled { opacity: .43; }
.text-button .icon { width: 16px; height: 16px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border: 1px solid transparent; border-radius: 9px; line-height: 1.35; font-size: 14px; font-weight: 680; white-space: nowrap; transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.button .icon { width: 17px; height: 17px; }
.button.wide { width: 100%; min-height: 48px; }
.button.primary { background: var(--accent); color: white; }
.button.primary:hover:not(:disabled) { background: var(--accent-deep); }
.button.secondary { color: var(--ink); background: #fff; border-color: var(--line-strong); }
.button.secondary:hover:not(:disabled), .button.subtle:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); }
.button.subtle { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.button:disabled { opacity: .47; }
.back-link { font-size: 13px; margin-bottom: 6px; }
.back-link .icon { width: 17px; height: 17px; }

.bank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.bank-card { position: relative; min-width: 0; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 12px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); color: var(--ink); text-align: left; transition: border-color .14s ease, background-color .14s ease; }
button.bank-card:hover, button.mode-card:hover { border-color: var(--accent-line); }
.bank-card[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.bank-code { color: var(--muted); font-family: var(--number-font); font-size: 12px; line-height: 1.2; font-weight: 660; }
.bank-card[aria-pressed="true"] .bank-code { color: var(--accent); }
.bank-name { font-size: 14px; line-height: 1.45; font-weight: 720; white-space: nowrap; }
.bank-size { color: var(--muted); font-size: 12px; line-height: 1.3; }
.bank-check { display: grid; place-items: center; position: absolute; top: 11px; right: 10px; width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--line-strong); color: transparent; background: #fff; }
.bank-check .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.bank-card[aria-pressed="true"] .bank-check { background: var(--accent); border-color: var(--accent); color: white; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mode-card { min-height: 84px; display: flex; align-items: center; gap: 11px; padding: 11px; text-align: left; color: var(--ink); background: var(--wash); border: 1px solid var(--line); border-radius: 10px; transition: border-color .14s ease, background-color .14s ease; }
.mode-card[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.mode-card strong, .mode-card small { display: block; }
.mode-card strong { font-size: 14px; line-height: 1.3; font-weight: 720; }
.mode-card small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.mode-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #eaf0ed; color: #4f6a5e; }
.mode-card[aria-pressed="true"] .mode-icon { background: #d2ebde; color: var(--accent); }
.practice-filter { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.practice-filter h3 { margin-bottom: 7px; font-size: 13px; font-weight: 720; }
.practice-filter-options { display: flex; flex-wrap: wrap; gap: 7px; }
.practice-filter-button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); color: var(--ink); font-size: 13px; font-weight: 650; white-space: nowrap; }
.practice-filter-button:hover, .practice-filter-button[aria-pressed="true"] { border-color: var(--accent-line); }
.practice-filter-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.practice-filter-button small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.setup-summary { position: sticky; top: 18px; padding: 24px; }
.summary-total { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; color: var(--accent-deep); }
.summary-total strong { font-size: clamp(39px, 4vw, 54px); font-weight: 750; line-height: 1.02; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.summary-total span { color: var(--muted); font-size: 14px; }
.summary-scope { display: flex; align-items: center; gap: 6px; margin: 6px 0 14px; color: var(--muted); font-size: 13px; }
.summary-scope .icon { width: 15px; height: 15px; color: var(--accent); }
.counts-list { padding: 9px 0 10px; margin: 0 0 14px; border-block: 1px solid var(--line); }
.counts-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.counts-list dt { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.counts-list dd { white-space: nowrap; }
.counts-list dd strong { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 730; }
.counts-list dd span { color: var(--muted); }
.type-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #3d8b6c; }
.type-dot.multi { background: #8266a8; }
.type-dot.judge { background: #b37935; }
.summary-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 14px; }
.hidden-idle-note { margin-bottom: 11px; padding: 7px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; }
.hidden-idle-note strong { font-family: var(--number-font); font-variant-numeric: tabular-nums; }

.total-control { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px; padding: 11px 13px; }
.total-control label { font-weight: 700; font-size: 14px; }
.total-control-fields { display: flex; align-items: center; gap: 10px; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; color: var(--ink); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.total-control input { width: 90px; min-height: 40px; border-radius: 7px; border: 1px solid var(--line-strong); background: #fff; text-align: center; }
.total-control input[aria-invalid="true"] { border-color: #c96b60; }
.total-control .button { min-height: 39px; padding: 7px 9px; font-size: 12px; background: #fff; border-color: var(--accent-line); }
.total-cap { color: var(--muted); white-space: nowrap; font-size: 12px; }
.type-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.type-control { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); }
.type-control-title { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-bottom: 8px; }
.type-control-title label { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; font-size: 13px; }
.type-control-title > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.stepper { display: grid; grid-template-columns: 33px minmax(0, 1fr) 33px; align-items: stretch; min-height: 36px; overflow: visible; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
.stepper button { display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-radius: 7px; color: var(--accent); background: transparent; }
.stepper button:hover:not(:disabled) { background: var(--accent-soft); }
.stepper button:disabled { color: #8da19a; opacity: .55; }
.stepper .icon { width: 15px; height: 15px; }
.stepper input { min-width: 0; width: 100%; padding: 0 2px; border: 0; border-inline: 1px solid var(--line); background: transparent; text-align: center; }
.stepper input[aria-invalid="true"] { color: #a4372c; background: #fff1ee; }
.form-error { margin-top: 10px; color: #a43b32; font-size: 13px; font-weight: 620; }
.session-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 19px; padding: 2px 0 0; }
.session-head.exam-session-head { position: sticky; z-index: 5; top: 0; align-items: center; margin-top: -8px; padding: 12px 0 13px; background: var(--background); border-bottom: 1px solid var(--line); }
.session-title h1 { font-size: 28px; font-weight: 750; line-height: 1.2; }
.session-title > p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.session-tools { display: flex; align-items: center; gap: 10px; }
.timer-chip { display: flex; align-items: center; gap: 10px; min-width: 124px; padding: 7px 12px; border: 1px solid var(--accent-line); border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); }
.timer-chip > div { display: grid; gap: 2px; }
.timer-chip span { font-size: 11px; line-height: 1.1; color: var(--muted); white-space: nowrap; }
.timer-chip strong { font-family: var(--number-font); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 660; line-height: 1.13; }
.timer-chip.timer-urgent { background: #fff0eb; color: #9a302a; border-color: #d68a7f; }
.question-panel { padding: 26px; }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.question-tags { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 12px; }
.type-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 7px; border-radius: 5px; background: #e7f3eb; color: #236449; font-size: 11px; font-weight: 700; white-space: nowrap; }
.type-chip.multi { background: #f1eaf8; color: #674592; }
.type-chip.judge { background: #f8efdf; color: #77521e; }
.question-position { flex: 0 0 auto; color: var(--muted); font-family: var(--number-font); font-size: 13px; white-space: nowrap; }
.question-position strong { color: var(--accent-deep); font-size: 17px; }
.question-heading { margin: 20px 0; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.65; font-weight: 680; overflow-wrap: anywhere; white-space: pre-wrap; }
.question-heading:focus { outline: none; }
.question-instruction { margin: -12px 0 12px; color: var(--muted); font-size: 13px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 51px; padding: 8px 12px; color: var(--ink); background: var(--wash); border: 1px solid var(--line); border-radius: 9px; text-align: left; transition: border-color .14s ease, background-color .14s ease; }
button.choice:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.choice.is-picked { background: var(--accent-soft); border-color: var(--accent-line); }
.choice-letter { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; color: var(--muted); font-family: var(--number-font); font-size: 13px; font-weight: 670; }
.choice.is-picked .choice-letter { background: var(--accent); color: white; border-color: var(--accent); }
.choice-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.choice.is-correct { color: #175c40; border-color: #9cc7ad; background: #ecf7ef; }
.choice.is-correct .choice-letter { color: #175c40; border-color: #b8dac5; background: #dceee1; }
.choice.is-wrong { color: #8f332b; border-color: #e1ada6; background: #fdf0ee; }
.choice.is-wrong .choice-letter { color: #8f332b; border-color: #e9bfb9; background: #fae0dc; }
.answer-box { display: grid; gap: 6px; margin-top: 15px; padding: 13px 15px; border: 1px solid #b5d4c0; border-radius: 9px; background: #edf7f0; color: #21583f; }
.answer-box.incorrect { border-color: #e1ada6; background: #fdf1ef; color: #84352e; }
.answer-box.memo { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-deep); }
.answer-heading { display: flex; align-items: center; gap: 7px; }
.answer-heading .icon { width: 17px; height: 17px; }
.answer-box p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-box p span, .review-answers p strong { display: inline-block; min-width: 60px; margin-right: 7px; color: var(--muted); font-weight: 680; font-size: 12px; }
.answer-box p.answer-topic { font-size: 13px; }
.question-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.question-actions-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.question-actions .clear-answer { margin-left: auto; }
.question-actions .clear-answer + .question-actions-right { margin-left: 0; }
.question-navigator { position: sticky; top: 18px; }
.exam-session-grid .question-navigator { top: 101px; }
.progress-track { height: 6px; margin-bottom: 14px; background: #e8efeb; border-radius: 8px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .15s ease; }
.palette-pagination { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.icon-button { display: grid; place-items: center; width: 31px; min-height: 30px; padding: 0; color: var(--accent); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.icon-button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); }
.icon-button:disabled { color: #8e9d99; opacity: .5; }
.icon-button .icon { width: 15px; height: 15px; }
.palette-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.palette-cell { min-width: 0; min-height: 34px; padding: 3px 1px; border: 1px solid var(--line); border-radius: 6px; background: var(--wash); color: var(--muted); font-family: var(--number-font); font-size: 11px; font-weight: 650; }
.palette-cell:hover { border-color: var(--accent-line); }
.palette-cell.done { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.palette-cell.missed { color: #983c30; background: #faece9; border-color: #e3b2ab; }
.palette-cell[aria-current] { color: white; background: var(--accent); border-color: var(--accent); }
.palette-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; margin-top: 13px; color: var(--muted); font-size: 11px; }
.palette-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.palette-legend i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--wash); }
.palette-legend .legend-current { background: var(--accent); border-color: var(--accent); }
.palette-legend .legend-done { background: var(--accent-soft); border-color: var(--accent-line); }
.palette-legend .legend-missed { background: #faece9; border-color: #e3b2ab; }
.after-practice { display: flex; flex-wrap: wrap; gap: 9px; }

.result-back { margin: 0 0 9px; }
.results-view .page-hero { margin-bottom: 16px; }
.results-view .hero-stat strong { font-size: clamp(36px, 5vw, 55px); }
.result-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.result-stat { display: grid; gap: 5px; padding: 15px 16px; }
.result-stat > span { color: var(--muted); font-size: 12px; font-weight: 630; }
.result-stat > strong { color: var(--accent-deep); font-size: 23px; line-height: 1.22; font-variant-numeric: tabular-nums; }
.result-stat small { color: var(--muted); font-size: 12px; font-weight: 550; }
.result-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.type-results { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; color: var(--muted); font-size: 12px; }
.type-results > span { display: inline-flex; gap: 5px; align-items: center; }
.type-results strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.export-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.export-actions .button { min-height: 39px; padding-inline: 11px; font-size: 13px; }
.muted-count { color: var(--muted); font-size: 12px; font-weight: 570; white-space: nowrap; }
.review-panel { scroll-margin-top: 15px; }
.review-filters { display: flex; gap: 4px; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); }
.review-filters button { border: 0; border-radius: 5px; background: transparent; color: var(--muted); padding: 4px 8px; font-size: 12px; font-weight: 620; white-space: nowrap; }
.review-filters button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.review-error-filters { width: fit-content; max-width: 100%; margin-bottom: 12px; }
.review-list { display: grid; gap: 12px; }
.review-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.review-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review-status { color: #9b3c31; background: #faede9; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 680; white-space: nowrap; }
.review-status.status-blank { color: #6a5632; background: #f8f0e1; }
.review-status.status-correct { color: #236449; background: #e7f3eb; }
.review-card h3 { margin: 11px 0; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-card .choice { min-height: 43px; font-size: 14px; padding-block: 6px; }
.review-card .choice-letter { width: 26px; height: 26px; }
.review-answers { display: grid; gap: 3px; margin-top: 11px; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.review-empty { display: flex; gap: 7px; justify-content: center; align-items: center; min-height: 88px; color: var(--muted); }
.review-empty .icon { color: var(--accent); }
.review-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; color: var(--muted); font-size: 13px; }
.inline-warning { display: flex; align-items: center; gap: 8px; padding: 10px; margin-bottom: 12px; border-radius: 8px; background: #fff0e2; color: #7b4528; }

.table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.history-table th { padding: 10px 12px; color: var(--muted); background: var(--wash); font-weight: 680; white-space: nowrap; }
.history-table th:first-child { border-radius: 7px 0 0 7px; }
.history-table th:last-child { border-radius: 0 7px 7px 0; }
.history-table td { border-bottom: 1px solid var(--line); padding: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-table tr:last-child td { border-bottom: 0; }
.exam-label { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #e8f3f5; color: #185e70; font-size: 12px; font-weight: 660; }
.exam-label.hidden { background: #f3edfa; color: #65459b; }
.history-banks { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.history-score { color: var(--accent-deep); font-size: 16px; }
.history-score-scale { color: var(--muted); font-size: 11px; }
.history-empty { display: grid; place-items: center; padding: 30px 10px 35px; text-align: center; border-top: 1px solid var(--line); }
.empty-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 10px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.empty-icon .icon { width: 23px; height: 23px; }
.history-empty h3 { font-size: 16px; }
.history-empty p { margin: 4px 0 13px; color: var(--muted); font-size: 13px; }

.app-dialog { width: min(100% - 36px, 430px); max-height: calc(100% - 36px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 16px 52px #0d30223b; }
.app-dialog::backdrop { background: #14292377; backdrop-filter: blur(2px); }
.dialog-content { padding: 24px; }
.dialog-icon { display: grid; place-items: center; width: 41px; height: 41px; margin-bottom: 11px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.dialog-content h2 { margin-bottom: 4px; font-size: 21px; }
.dialog-content > p:not(.form-error) { color: var(--muted); font-size: 14px; }
.dialog-label { display: block; margin: 13px 0 5px; font-size: 13px; font-weight: 670; }
.dialog-content input { display: block; width: 100%; min-height: 41px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); font-size: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.toast { position: fixed; bottom: 19px; right: 19px; z-index: 10; max-width: min(385px, calc(100vw - 38px)); padding: 11px 15px; border-radius: 8px; background: #183d32; color: white; box-shadow: 0 8px 22px #10291c32; font-size: 13px; }

@media (max-width: 940px) {
  .header-inner, .page-shell { width: min(100% - 48px, 1180px); }
  .panel { padding: 19px; }
  .bank-card { padding-inline: 9px; }
  .bank-check { right: 7px; }
  .mode-card { gap: 7px; padding-inline: 8px; }
  .mode-icon { width: 30px; height: 30px; }
  .stepper { grid-template-columns: 28px minmax(0, 1fr) 28px; }
  .type-control { padding-inline: 8px; }
}

@media (max-width: 780px) {
  .workspace-grid, .session-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .panel-stack { gap: 15px; }
  .setup-summary, .question-navigator { position: static; }
  .palette-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .palette-cell { min-height: 38px; }
  .review-panel .panel-head { align-items: center; }
}

@media (max-width: 860px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: calc(100% - 30px); min-height: auto; padding: 11px 0 8px; gap: 9px; }
  .brand { width: fit-content; min-height: 36px; gap: 9px; font-size: 17px; }
  .brand-mark { width: 33px; height: 33px; border-radius: 9px; }
  .brand-mark svg { width: 20px; height: 20px; }
  .site-nav { grid-area: 2 / 1 / auto / -1; width: 100%; justify-content: stretch; gap: 3px; margin-left: 0; }
  .hide-hidden-button { grid-area: 1 / 2; min-height: 36px; margin-left: 0; }
  .nav-item { position: relative; flex: 1 1 0; min-width: 0; gap: 4px; padding: 0 3px; min-height: 39px; font-size: 13px; }
  .nav-item .icon { width: 15px; height: 15px; }
  .nav-dot { position: absolute; top: 6px; right: 5px; width: 5px; height: 5px; }
}

@media (max-width: 600px) {
  .page-shell { width: calc(100% - 28px); padding: 15px 0 35px; }
  .page-hero { align-items: flex-start; flex-direction: column; justify-content: center; min-height: 0; gap: 15px; padding: 20px; border-radius: 13px; margin-bottom: 15px; }
  .page-hero h1 { margin: 7px 0 6px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-subtitle { font-size: 13px; }
  .hero-stats { margin: 0; gap: 13px; }
  .hero-stat { padding-left: 11px; gap: 2px; }
  .hero-stat strong { font-size: 25px; }
  .hero-stat span { font-size: 11px; }
  .panel { padding: 16px; border-radius: 11px; }
  .panel-head { margin-bottom: 12px; }
  .panel-head h2, .setup-summary h2 { font-size: 17px; }
  .bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bank-grid { gap: 7px; }
  .bank-card { min-height: 78px; gap: 3px; padding-block: 8px; }
  .bank-check { top: 8px; }
  .mode-grid { gap: 7px; }
  .mode-card { min-height: 96px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 8px; }
  .mode-card strong { font-size: 13px; white-space: nowrap; }
  .mode-card small { font-size: 11px; }
  .mode-icon { width: 27px; height: 27px; }
  .mode-icon .icon { width: 16px; height: 16px; }
  .type-controls { gap: 6px; }
  .type-control { padding: 7px; }
  .stepper { grid-template-columns: 23px minmax(0, 1fr) 23px; }
  .stepper .icon { width: 13px; height: 13px; }
  .total-control { padding: 8px 9px; }
  .total-control input { width: 72px; }
  .session-head { margin-bottom: 12px; }
  .session-title h1 { font-size: 23px; }
  .session-head.exam-session-head { padding: 9px 0; }
  .session-tools { gap: 6px; }
  .timer-chip { gap: 5px; min-width: 91px; padding: 6px 8px; }
  .timer-chip > .icon { width: 16px; height: 16px; }
  .timer-chip strong { font-size: 18px; }
  .timer-chip span { font-size: 10px; }
  .question-meta { padding-bottom: 10px; }
  .question-heading { margin: 14px 0; }
  .question-instruction { margin: -6px 0 8px; }
  .choice { gap: 8px; min-height: 48px; padding-inline: 8px; }
  .question-actions { margin-top: 14px; padding-top: 11px; gap: 6px; }
  .question-actions .button { padding-inline: 8px; min-height: 39px; font-size: 13px; gap: 4px; }
  .question-actions-right { gap: 5px; }
  .question-actions .clear-answer { font-size: 12px; }
  .palette-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .palette-cell { min-height: 33px; }
  .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .result-stat { padding: 11px; }
  .result-stat strong { font-size: 20px; }
  .results-view .hero-stat strong { font-size: 38px; }
  .history-panel .panel-head { flex-wrap: wrap; }
  .history-table, .history-table tbody { display: block; }
  .history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .history-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 11px 0; border-top: 1px solid var(--line); }
  .history-table td { min-width: 0; padding: 0; border: 0; }
  .history-table td[data-label]::before { display: block; content: attr(data-label); margin-bottom: 1px; color: var(--muted); font-size: 10px; font-weight: 600; }
  .history-table td:first-child { grid-column: span 2; }
  .history-table td:nth-child(6) { grid-column: span 2; }
  .history-table td:last-child { justify-self: end; align-self: end; }
  .review-card { padding: 11px; }
  .review-card-meta { align-items: flex-start; }
  .review-panel .panel-head { flex-wrap: wrap; }
}

@media (max-width: 365px) {
  .nav-item .icon { display: none; }
  .bank-name { font-size: 13px; }
  .type-controls { grid-template-columns: minmax(0, 1fr); }
  .type-control { display: grid; grid-template-columns: 1fr 115px; gap: 6px; align-items: center; }
  .type-control-title { margin-bottom: 0; }
  .session-title h1 { font-size: 21px; }
  .question-actions .icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}