*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

#app { width: 100%; flex: 1; min-width: 0; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (min-width: 1600px) { .app-header { padding: 0 48px; } }
@media (min-width: 2000px) { .app-header { padding: 0 96px; } }
.hdr-left, .hdr-right { display: flex; align-items: center; gap: 10px; }
.hdr-left { min-width: 0; flex: 1 1 0; overflow: hidden; }
.hdr-right { flex-shrink: 0; }

.hdr-logo {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 4px 6px;
  font-size: var(--fs-sec); font-weight: 800; font-family: inherit;
  color: var(--primary); cursor: pointer; letter-spacing: -0.3px;
}
.hdr-logo[aria-disabled="true"] { cursor: default; pointer-events: none; }
.logo-icon { flex-shrink: 0; border-radius: var(--radius-logo); }

.hdr-crumb {
  font-size: var(--fs-ui); color: var(--text-light); white-space: nowrap;
  padding-left: 8px; border-left: 1px solid var(--border); margin-left: 2px;
  overflow: hidden; text-overflow: ellipsis;
}
.hdr-crumb-sep { color: var(--border); padding: 0 2px; }

.hdr-hamburger {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-board);
  cursor: pointer;
}
.hdr-hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.hdr-hamburger:disabled { opacity: .5; cursor: not-allowed; }

.hdr-menu:not([hidden]) {
  display: flex; flex-direction: column; gap: 8px;
  position: absolute; top: var(--header-h); right: 16px;
  width: 208px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px; box-shadow: var(--shadow-lg); z-index: 20;
}
.hdr-menu .btn { width: 100%; text-align: center; }

.screen {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 16px 40px;
  width: 100%;
  animation: fadeIn var(--tx-slow) ease;
}
@media (min-width: 1600px) { .screen:not(.welcome-screen) { padding: 32px 48px 48px; } }
@media (min-width: 2000px) { .screen:not(.welcome-screen) { padding: 40px 96px 56px; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes fadeInPlace { from { opacity: 0; } to { opacity: 1; } }

h2 { margin: 0 0 4px; font-size: var(--fs-h2); }
.subtitle { margin: 0; color: var(--text-light); font-size: var(--fs-body); }
.section-title { font-size: var(--fs-sec); margin: 0 0 2px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.btn {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-btn); font-weight: 500; font-family: inherit;
  transition: border-color var(--tx-base), background var(--tx-base);
  text-align: left; line-height: 1.4;
  display: inline-block; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.primary {
  background: var(--primary); color: var(--white); border-color: var(--primary); text-align: center;
}
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.small { padding: 7px 14px; font-size: var(--fs-ui); text-align: center; flex-shrink: 0; }
.btn.ghost { background: transparent; color: var(--text-light); }

.welcome-screen { min-height: calc(100vh - 40px); align-items: stretch; padding: 0; }

.welcome-layout {
  display: flex; flex: 1; min-height: calc(100vh - var(--header-h));
}

.welcome-left {
  flex: 3 1 0; min-width: 0;
  background: var(--primary-soft); color: var(--text);
  padding: 32px 52px 40px; display: flex; flex-direction: column; gap: 18px;
  justify-content: center; align-items: flex-start;
}
.welcome-left-inner { max-width: 560px; width: 100%; }
.welcome-logo {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-h2); font-weight: 800; color: var(--primary); letter-spacing: -0.5px;
}
.welcome-logo-icon { border-radius: var(--radius-xl); flex-shrink: 0; }
.welcome-tagline { font-size: var(--fs-body); color: var(--text-light); margin: 0 0 12px; line-height: 1.5; }

.welcome-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.welcome-features li { display: flex; align-items: flex-start; gap: 7px; }
.wf-icon { font-size: 15px; line-height: 1.5; flex-shrink: 0; }
.welcome-features li div { display: flex; flex-direction: column; gap: 1px; }
.welcome-features li strong { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.welcome-features li span { font-size: 11px; color: var(--text-light); line-height: 1.4; }

.welcome-right {
  flex: 2 1 0; min-width: 300px; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 32px 48px 40px; gap: 16px;
  background: var(--surface);
}
.welcome-right > * { width: 100%; max-width: 400px; }
.welcome-pick-label { font-size: var(--fs-card); font-weight: 700; margin: 0; color: var(--text); }
.welcome-foot { color: var(--text-light); font-size: var(--fs-note); margin: 0; }
.board-list   { display: grid; gap: 12px; width: 100%; }

.board-btn { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; }
.board-btn strong { font-size: var(--fs-card); color: var(--text); }
.board-btn span   { font-size: var(--fs-ui); color: var(--text-light); font-weight: 400; }

@media (min-width: 1600px) {
  .welcome-left  { padding: 48px 80px; }
  .welcome-right { padding: 48px 64px; }
  .welcome-left-inner { max-width: 640px; }
  .welcome-right > * { max-width: 440px; }
}

@media (max-width: 720px) {
  .welcome-layout { flex-direction: column; min-height: unset; }
  .welcome-left { padding: 24px 20px; gap: 14px; align-items: stretch; }
  .welcome-left-inner { max-width: 100%; }
  .welcome-right { flex: unset; min-width: unset; padding: 24px 20px; align-items: stretch; }
  .welcome-right > * { max-width: 100%; }
  .welcome-features { gap: 6px 12px; }
}

.home-screen   { gap: 24px; }
.home-section  { display: flex; flex-direction: column; gap: 12px; }

.resume-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-left: 4px solid var(--warning); background: var(--resume-bg); border-color: var(--resume-border);
}
.resume-title { margin: 0 0 2px; font-weight: 700; font-size: var(--fs-btn); }
.resume-sub   { margin: 0; font-size: var(--fs-ui); color: var(--resume-fg); }
.resume-actions { display: flex; gap: 8px; }

.streak-banner {
  display: flex; align-items: flex-start; gap: 12px;
  border-left: 4px solid var(--primary); background: var(--primary-soft);
}
.streak-flame { font-size: 22px; line-height: 1; flex-shrink: 0; }
.streak-body  { flex: 1; min-width: 0; }
.streak-count { margin: 0 0 2px; font-weight: 700; font-size: var(--fs-btn); }
.streak-sub   { margin: 0; font-size: var(--fs-ui); color: var(--text-light); }
.streak-goal-bar {
  margin-top: 8px; height: 6px; border-radius: var(--radius-pill);
  background: var(--border); overflow: hidden;
}
.streak-goal-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width var(--tx-slow) ease; }
.streak-goal-fill.met { background: var(--success); }

.subj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .subj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .subj-grid { grid-template-columns: 1fr; }
}
.subj-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  transition: box-shadow var(--tx-base), transform var(--tx-base);
}
.subj-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.subj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.subj-head h3 { margin: 0; font-size: var(--fs-card); }
.subj-meta { font-size: var(--fs-note); color: var(--text-light); text-align: right; }

.subj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.act-btn { text-align: center; padding: 8px 10px; font-size: var(--fs-ui); }
.act-btn small { display: block; font-size: var(--fs-xs); font-weight: 400; opacity: 1; margin-top: 2px; }

.soon-tag {
  font-size: var(--fs-ui); color: var(--text-light);
  background: var(--bg); padding: 8px 12px; border-radius: var(--radius-md);
  grid-column: 1 / -1;
}

.chapter-picker { border-top: 1px dashed var(--border); padding-top: 12px; }
.picker-hint    { margin: 0 0 8px; font-size: var(--fs-note); color: var(--text-light); }
.chapter-chips  { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-ui); color: var(--text-light); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-board);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-chip); font-family: inherit; color: var(--text);
  cursor: pointer; transition: background var(--tx-base), border-color var(--tx-base);
}
.chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.chip-count {
  
  font-size: var(--fs-2xs); font-weight: 700; color: var(--skip-fg);
  background: var(--bg); border-radius: var(--radius-md); padding: 1px 6px;
}

.chip-badge {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--tile-weak-fg);
  background: var(--tile-weak-bg); border-radius: var(--radius-md); padding: 1px 6px;
}

.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recent-row  { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.recent-score { font-size: var(--fs-sec); font-weight: 800; min-width: 52px; }
.recent-score.good { color: var(--score-good); }
.recent-score.weak { color: var(--score-weak); }
.recent-desc { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.recent-desc small { color: var(--text-light); font-size: var(--fs-note); }

.sa-topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 10px 16px; margin: -24px -16px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: var(--header-h); z-index: 9;
}

.sa-topbar .quit-btn { margin-left: auto; }

.sa-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 220px; min-width: 0; }
.sa-tabs-loading { font-size: var(--fs-ui); color: var(--text-light); }
.sa-tabs .filter-tab small { opacity: .75; margin-left: 2px; }

.sa-chapter-select-wrap { flex: 0 1 320px; min-width: 0; }
.sa-chapter-select {
  width: 100%; padding: 8px 12px; font-size: var(--fs-ui); font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer;
}

.sa-list { display: flex; flex-direction: column; gap: 20px; }
.sa-chapter-count { font-weight: 400; color: var(--text-light); font-size: var(--fs-note); }
.sa-card { display: flex; flex-direction: column; gap: 10px; }
.sa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-marks { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-light); background: var(--bg); border-radius: var(--radius-md); padding: 2px 8px; }
.sa-status { font-size: var(--fs-2xs); font-weight: 700; border-radius: var(--radius-md); padding: 2px 8px; }
.sa-status.got-it { color: var(--score-good); }
.sa-status.review { color: var(--score-weak); background: var(--tile-weak-bg); }
.sa-question { margin: 0; font-weight: 600; }

.sa-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .sa-body { grid-template-columns: 1fr; } }

.sa-your-answer { display: flex; flex-direction: column; gap: 6px; }
.sa-your-answer label { font-size: var(--fs-note); font-weight: 600; color: var(--text-light); }
.sa-textarea {
  width: 100%; min-height: 160px; resize: vertical; font: inherit; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  color: var(--text); box-sizing: border-box;
}
.sa-model {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;
  font-size: var(--fs-ui); background: var(--bg); min-height: 160px; box-sizing: border-box;
}
.sa-model-placeholder { display: flex; align-items: center; justify-content: center; }
.sa-model > strong:first-child { display: block; margin-bottom: 4px; }
.sa-model p { margin: 4px 0 8px; }
.sa-model ul { margin: 0 0 8px; padding-left: 20px; }
.sa-model li { margin-bottom: 4px; }
.sa-markrow { display: flex; gap: 8px; }

.sol-exercise-title { margin: 4px 0 -8px; font-size: var(--fs-ui); color: var(--text-light); }

.sol-exercise-tabs { padding: 10px 0 2px; }
.sol-exercise-tabs .filter-tab { font-size: var(--fs-note); }

.test-screen, #results {
  padding: 0; gap: 0;
  animation: fadeInPlace var(--tx-slow) ease;
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--header-h));
  overflow: hidden;
}

.test-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: relative; z-index: 9;
  flex-wrap: wrap;
}
.test-title { margin: 0; font-size: var(--fs-ui); color: var(--text-light); font-weight: 500; }
.test-topbar-right { display: flex; align-items: center; gap: 10px; }
.answered-count { font-size: var(--fs-note); font-weight: 600; color: var(--text-light); }

.progress-rail { height: 3px; background: var(--border); position: relative; z-index: 8; }
.progress-fill { height: 100%; width: 0; background: var(--success); transition: width var(--tx-slow) ease; }

.timer {
  font-family: var(--font-mono);
  font-size: var(--fs-tim); font-weight: 700;
  background: var(--timer-bg); color: var(--timer-ok);
  padding: 4px 10px; border-radius: var(--radius-sm);
  min-width: 72px; text-align: center;
}
.timer.timer-low { color: var(--timer-low); }
.timer.untimed   { font-size: var(--fs-ui); background: var(--bg); color: var(--text-light); }

.quit-btn { font-size: var(--fs-ui); padding: 6px 14px; color: var(--error); border-color: var(--danger-border); font-weight: 700; text-transform: uppercase; }
.quit-btn:hover { background: var(--error-soft); border-color: var(--error); }

.test-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  align-items: start;
  gap: var(--exam-gutter);
  padding: var(--exam-gutter) var(--exam-gutter) var(--exam-bottom);
  flex: 1; min-height: 0;
  overflow: hidden;
}
.question-area {
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: 100%;
  
  min-height: 480px;
}
.q-number  { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-light); }
.q-chapter { margin: -10px 0 0; font-size: var(--fs-note); color: var(--primary); font-weight: 600; }
.qtype-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: var(--primary-soft); color: var(--primary); border-radius: 999px;
}
.q-text    { margin: 0; font-size: var(--fs-read); line-height: 1.5; white-space: pre-line; }

.inline-state {
  padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg);
  font-size: var(--fs-body); color: var(--text-light);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.inline-state.error { background: var(--error-soft); color: var(--wrong-fg); }

#options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 700px) { #options-list { grid-template-columns: 1fr; } }
.option-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: var(--fs-body); font-family: inherit; color: var(--text);
  text-align: left; transition: border-color var(--tx-base), background var(--tx-base);
}
.option-btn:hover    { border-color: var(--primary); background: var(--primary-soft); }
.option-btn.selected { border-color: var(--primary); background: var(--primary-soft); }

.option-letter {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-ui); font-weight: 700; flex-shrink: 0;
}
.option-btn.selected .option-letter { background: var(--primary); border-color: var(--primary); color: var(--white); }

.test-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; }
.nav-btn, .review-btn { flex: 1; text-align: center; font-size: var(--fs-body); padding: 10px; }
.review-btn.marked { background: var(--resume-bg); border-color: var(--warning); color: var(--resume-fg); }

.kbd-hint { margin: 0; font-size: var(--fs-sm); color: var(--text-light); }
kbd {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: var(--radius-xs); padding: 1px 5px;
}

.palette-area { max-height: 100%; overflow: hidden; padding: 12px; display: flex; flex-direction: column; min-height: 480px; }

.palette-inner { display: flex; flex-direction: column; gap: 10px; flex: 0 1 auto; max-height: 100%; min-height: 0; }
.palette-summary {
  font-size: var(--fs-body); font-weight: 600; cursor: pointer; list-style: none;
  padding-bottom: 8px;
}
.palette-summary::-webkit-details-marker { display: none; }
.palette-summary::after { content: ' ▾'; color: var(--text-light); }

.palette-legend { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--text-light); flex-wrap: wrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-2xs); margin-right: 4px; vertical-align: middle; }
.dot.answered    { background: var(--success); }
.dot.review      { background: var(--warning); }
.dot.current-dot { border: 2px solid var(--primary); background: var(--primary-soft); }
.dot.rev-correct { background: var(--correct-em); }
.dot.rev-wrong   { background: var(--error); }

.autonext { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); color: var(--text-light); cursor: pointer; }
.submit-btn { flex-shrink: 0; text-align: center; font-size: var(--fs-ui); padding: 6px 14px; }

.omr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 5px;
  flex: 1; overflow-y: auto; align-content: start;
  padding: 6px;          
  margin: -6px -6px 0;   
}
.omr-bubble {
  aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  cursor: pointer; font-size: var(--fs-xs); font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--tx-fast);
}
.omr-bubble:hover            { transform: scale(1.08); }
.omr-bubble.answered         { background: var(--success); color: var(--white); border-color: var(--success); }
.omr-bubble.review           { background: var(--warning); color: var(--white); border-color: var(--warning); }
.omr-bubble.current          { outline: 2px solid var(--primary); outline-offset: 1px; font-weight: 800; }
.omr-bubble.rev-correct      { background: var(--correct-em); color: var(--white); border-color: var(--correct-em); }
.omr-bubble.rev-wrong        { background: var(--error); color: var(--white); border-color: var(--error); }
.omr-bubble.rev-skip         { color: var(--skip-muted); text-decoration: line-through; }

.score-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.score-tile {
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--radius-md); padding: 4px 12px;
  font-size: var(--fs-ui); font-weight: 700; white-space: nowrap;
}
.score-tile .tile-val { font-size: var(--fs-num); font-weight: 800; line-height: 1; }
.score-tile .tile-lbl { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.score-tile.pct-tile.good { background: var(--primary); color: var(--white); }
.score-tile.pct-tile.weak { background: var(--tile-weak-bg); color: var(--tile-weak-fg); }
.score-tile.correct-tile  { background: var(--correct-bg); color: var(--correct-fg); }
.score-tile.wrong-tile    { background: var(--wrong-bg); color: var(--wrong-fg); }
.score-tile.skip-tile     { background: var(--bg); color: var(--skip-fg); }

.rev-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-q-num   { font-size: var(--fs-ui); font-weight: 700; color: var(--text-light); }
.rev-chapter { margin-left: auto; font-size: var(--fs-note); color: var(--text-light); }
.rev-badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius); }
.rev-badge.correct { background: var(--correct-bg); color: var(--correct-fg); }
.rev-badge.wrong   { background: var(--wrong-bg); color: var(--wrong-fg); }
.rev-badge.skipped { background: var(--skip-badge-bg); color: var(--skip-badge-fg); }

.rev-q-text  { margin: 0; font-size: var(--fs-read); font-weight: 600; line-height: 1.5; white-space: pre-line; }
.rev-options { display: flex; flex-direction: column; gap: 6px; }
.rev-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-rev); font-size: var(--fs-body); border: 2px solid transparent;
}
.rev-opt-label  { font-weight: 700; width: 18px; flex-shrink: 0; }
.rev-opt-marker { margin-left: auto; font-weight: 700; font-size: var(--fs-btn); }
.opt-correct { background: var(--correct-bg); border-color: var(--correct-em); color: var(--correct-fg); }
.opt-wrong   { background: var(--wrong-bg); border-color: var(--error); color: var(--wrong-fg); }
.opt-neutral { background: var(--bg); border-color: var(--border); color: var(--text-light); }
.rev-explanation {
  font-size: var(--fs-ui); line-height: 1.55; color: var(--text-light);
  padding: 10px 12px; background: var(--explain-bg); border-radius: var(--radius-sm); border-left: 3px solid var(--primary);
}
.rev-wrong-why {
  font-size: var(--fs-ui); line-height: 1.55; color: var(--text-light);
  padding: 10px 12px; background: var(--explain-bg); border-radius: var(--radius-sm); border-left: 3px solid var(--skip-fg);
}
.rev-wrong-why ul  { margin: 6px 0 0; padding-left: 18px; }
.rev-wrong-why li + li { margin-top: 4px; }

.small-filters .filter-tab { padding: 4px 10px; font-size: var(--fs-note); }
.results-actions { display: flex; gap: 8px; }
.results-actions .btn { text-align: center; flex: 1; padding: 10px 12px; font-size: var(--fs-body); }

.exit-btn {
  font-size: var(--fs-ui); padding: 6px 16px; font-weight: 700; text-transform: uppercase;
  color: var(--text-light); border-color: var(--border); margin-left: 4px;
}
.exit-btn:hover { border-color: var(--primary); color: var(--primary); }

#results .palette-area { padding: 20px; }
#results .results-actions { margin-top: auto; }
#results .test-layout { grid-template-columns: 1fr 340px; }
.results-actions .btn { white-space: nowrap; }
@media (max-width: 820px) { #results .test-layout { grid-template-columns: 1fr; } }
.empty-inline { font-size: var(--fs-ui); color: var(--text-light); margin: 0; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay[hidden] { display: none !important; }
.modal-box {
  background: var(--surface); border-radius: var(--radius-xl);
  padding: 28px 32px; max-width: 400px; width: 90%;
  box-shadow: var(--shadow-lg); text-align: center;
}
.modal-title { font-size: var(--fs-card); font-weight: 700; margin: 0 0 8px; }
.modal-body  { font-size: var(--fs-body); color: var(--text-light); margin: 0 0 22px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { min-width: 100px; text-align: center; }

.rev-screen {
  gap: 12px; padding: 16px 16px 0;
  animation: fadeInPlace var(--tx-slow) ease;
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--header-h));
  overflow: hidden;
}
.rev-heading-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.rev-heading-row .grade-tabs { margin: 0; flex-shrink: 0; }
.notes-subj-select {
  padding: 8px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer;
  min-width: 160px;
}

.home-heading-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.home-heading-row .grade-tabs { margin: 0; flex-shrink: 0; order: 2; }
.home-heading-row .home-top-cards { order: 1; }
.home-heading-row .subtitle { text-align: right; }

/* Compact streak + arena row inside heading */
.home-top-cards {
  display: flex; gap: 8px; align-items: stretch; flex: 1; min-width: 0; overflow: hidden;
}
.home-top-cards .streak-banner {
  flex: 1 1 0; min-width: 0; max-width: 260px;
  padding: 8px 12px; align-items: center;
}
.home-top-cards .streak-sub { display: none; }
.home-top-cards .streak-goal-bar { margin-top: 4px; height: 4px; }
.home-top-cards .streak-arena-card {
  flex: 0 0 auto;
  padding: 8px 12px;
}
.home-top-cards .arena-card-sub { display: none; }

@media (max-width: 520px) {
  .home-heading-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .home-heading-row .grade-tabs { width: 100%; justify-content: stretch; order: 1; }
  .home-heading-row .grade-tabs .filter-btn { flex: 1; text-align: center; }
  .home-heading-row .home-top-cards { order: 2; }
  .home-top-cards { flex-direction: column; overflow: visible; }
  .home-top-cards .streak-banner { max-width: 100%; }
}

.rev-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-topbar h2 { margin: 0; white-space: nowrap; }

.notes-search {
  flex: 1 1 220px; min-width: 180px;
  padding: 8px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
}
.notes-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.diff-bar { flex-wrap: nowrap; }
.diff-bar .filter-tab { font-size: var(--fs-note); padding: 4px 10px; flex: 1; text-align: center; }
.filter-tab {
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: var(--fs-ui); font-weight: 500; font-family: inherit;
  color: var(--text-light); transition: background var(--tx-base), color var(--tx-base), border-color var(--tx-base);
}
.filter-tab:hover  { border-color: var(--primary); color: var(--primary); }
.filter-tab.active { background: var(--primary); border-color: var(--primary); color: var(--white); }

.rev-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 16px;
  flex: 1; min-height: 0;
  padding-bottom: var(--exam-bottom);
}
.rev-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 6px; margin: -6px; }
.ch-select-wrap { display: none; }
.ch-select {
  width: 100%; padding: 10px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--primary); cursor: pointer;
}

.ch-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--surface);
  cursor: pointer; font-size: var(--fs-ui); font-weight: 500; font-family: inherit;
  color: var(--text-light); transition: background var(--tx-base), color var(--tx-base); line-height: 1.3;
}
.ch-tab:hover  { background: var(--primary-soft); color: var(--primary); border-color: var(--border); }
.ch-tab.active { background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 600; }
.ch-tab.active .chip-count { background: var(--active-overlay); color: var(--white); }

.rev-content { padding: 20px 24px; overflow-y: auto; }
.rev-ch-title {
  margin: 0 0 16px; font-size: var(--fs-sec);
  padding-bottom: 12px; border-bottom: 2px solid var(--border);
}
.imp-dates-wrap { margin-bottom: 20px; }
.imp-dates-title { font-size: var(--fs-body); font-weight: 700; margin: 0 0 10px; color: var(--accent); }
.imp-dates-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.imp-dates-table thead th { text-align: left; padding: 6px 10px; background: var(--bg); color: var(--text-light); font-size: var(--fs-sm); font-weight: 600; border-bottom: 2px solid var(--border); }
.imp-dates-table tbody tr:nth-child(even) { background: var(--bg); }
.imp-dates-table tbody tr:hover { background: var(--card-hover, var(--bg)); }
.imp-dates-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.imp-date-cell { white-space: nowrap; font-weight: 600; color: var(--accent); min-width: 110px; }
/* Login callout */
.login-callout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 0; flex-wrap: wrap; }
.login-callout-body { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.login-callout-icon { font-size: 1.4rem; flex-shrink: 0; }
.login-callout-title { font-size: var(--fs-body); font-weight: 700; margin: 0 0 2px; }
.login-optional-tag { font-size: var(--fs-sm); font-weight: 400; color: var(--text-light); background: var(--bg); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.login-callout-sub { font-size: var(--fs-sm); color: var(--text-light); margin: 0; line-height: 1.4; }
.login-callout-btn { flex-shrink: 0; }
.rev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rev-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-body); line-height: 1.6; padding: 8px 0;
  border-bottom: 1px solid var(--bg);
}
.rev-item:last-child { border-bottom: none; }
.note-src { display: block; font-size: var(--fs-sm); color: var(--text-light); font-style: normal; margin-top: 2px; }

.badge {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-lg);
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; margin-top: 2px;
}
.badge-th { background: var(--badge-th-bg); color: var(--badge-th-fg); }
.badge-f  { background: var(--badge-f-bg);  color: var(--badge-f-fg); }
.badge-l  { background: var(--badge-l-bg);  color: var(--badge-l-fg); }
.badge-t  { background: var(--badge-t-bg);  color: var(--badge-t-fg); }
.badge-b  { background: var(--badge-b-bg);  color: var(--badge-b-fg); }

.empty-state {
  text-align: center; color: var(--text-light);
  padding: 32px; font-size: var(--fs-btn);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

@media (max-width: 820px) {
  .test-screen, #results, .rev-screen { height: auto; overflow: visible; }
  .test-layout, .rev-layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .question-area, .rev-content, .rev-nav { height: auto; overflow: visible; }
  .palette-area { height: auto; }
  
  .question-area, .palette-area { min-height: 0; }
  .omr-grid { max-height: 34vh; }
  .rev-nav { display: none; }
  .ch-select-wrap { display: block; }
  .rev-layout { grid-template-columns: 1fr; }
  .test-topbar { position: static; }
  .progress-rail { position: static; }
  .recent-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .test-nav { flex-wrap: wrap; }
  .kbd-hint { display: none; }
  .score-tile { padding: 4px 8px; }
}

.filter-tab { display: inline-flex; align-items: center; gap: 6px; }
.filter-tab:disabled { opacity: .4; cursor: not-allowed; }
.filter-tab:disabled:hover { border-color: var(--border); color: var(--text-light); }
.filter-tab.active .chip-count { background: var(--active-overlay); color: var(--white); }

.arena-setup-screen, .arena-screen, .arena-interstitial, .arena-gameover {
  max-width: 960px; margin: 0 auto; padding: 12px 16px;
}
.arena-title { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 2px; }
.arena-sub { color: var(--text-light); margin: 0 0 6px; font-size: var(--fs-body); }
.arena-rule { font-size: var(--fs-ui); color: var(--text-light); margin-bottom: 8px; }
.arena-subj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.arena-subj-opt { display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--tx-base), background var(--tx-base); font-size: var(--fs-body); }
.arena-subj-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.arena-subj-opt input { accent-color: var(--primary); }
.arena-subj-hint { font-size: var(--fs-note); color: var(--text-light); margin-bottom: 10px; }

.arena-setup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.arena-setup-header-btns { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-shrink: 0; }
.arena-how-btn { flex-shrink: 0; font-size: var(--fs-sm); }
.arena-pick-label { font-size: var(--fs-btn); font-weight: 700; margin: 0 0 8px; }
.arena-setup-actions { display: flex; gap: 10px; margin-top: 10px; }
.arena-go-btn { min-width: 120px; }

.arena-how-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; }
.arena-how-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 201; background: var(--surface); border-radius: 14px; padding: 0;
  width: min(588px, 92vw); max-height: 80vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22); }
.arena-how-modal[hidden] { display: none; }
.arena-how-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; padding: 24px 24px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.arena-how-modal-body { padding: 16px 24px 24px; overflow-y: auto; }
.arena-how-modal-title { font-size: var(--fs-lg); font-weight: 700; }
.arena-how-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-light); padding: 2px 6px; border-radius: 6px; }
.arena-how-close:hover { background: var(--surface-alt, #f1f5f9); }
.arena-how-section-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); margin: 16px 0 8px; }
.arena-how-section-title:first-of-type { margin-top: 0; }
.arena-how-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.arena-how-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); line-height: 1.5; }
.arena-how-icon { font-size: 16px; flex-shrink: 0; line-height: 1.5; }

.arena-hud { display: flex; justify-content: space-between; align-items: center;
  padding: 4px; margin-bottom: 4px; }
.arena-hud-left { display: flex; gap: 10px; align-items: baseline; }
.arena-hud-stage { font-weight: 700; font-size: var(--fs-btn); }
.arena-hud-q { font-size: var(--fs-note); color: var(--text-light); }
.arena-hud-right { display: flex; gap: 10px; align-items: center; }
.arena-pause-btn { background: #dc2626; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; color: #fff; padding: 4px 8px; }
.arena-pause-btn:hover { background: #b91c1c; }
.arena-pause-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; }
.arena-pause-overlay.active { display: flex; }
.arena-pause-card { background: var(--bg); border-radius: var(--radius-md); padding: 32px 28px; text-align: center; max-width: 300px; width: 90%; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.arena-pause-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; }
.arena-pause-sub { font-size: var(--fs-sm); color: var(--text-light); margin: 0; }
.arena-pause-resume { font-size: var(--fs-btn); }
.arena-combo { font-size: var(--fs-ui); font-weight: 700; color: var(--text-light);
  transition: color var(--tx-base); }
.arena-combo.hot { color: var(--warning); }
.arena-score { font-size: var(--fs-sec); font-weight: 800; }
.arena-life-pip { font-size: calc(var(--fs-btn) * 1.1); color: var(--error); margin: 0 2px; }
.arena-life-pip.half { opacity: .5; }
.arena-life-pip.lost { color: var(--border); opacity: .5; }
.arena-inter-life.gained { color: var(--score-good); }

.arena-timer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.arena-timer-wrap { flex: 1; height: 8px; background: var(--border);
  border-radius: var(--radius-sm); overflow: hidden; }
.arena-timer-bar { height: 100%; background: var(--primary);
  border-radius: var(--radius-sm); transition: width 1s linear, background var(--tx-slow); }
.arena-timer-bar.low { background: var(--error); }
.arena-timer-label { font-size: var(--fs-note); color: var(--text-light);
  white-space: nowrap; flex-shrink: 0; }

.arena-subject-tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-light); margin-bottom: 4px; }
.arena-question-text { font-size: var(--fs-read); line-height: 1.5;
  margin-bottom: 10px; font-weight: 500; }
.arena-opts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arena-opt-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 2px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer; text-align: left;
  font-size: var(--fs-body); font-family: inherit; color: var(--text);
  transition: border-color var(--tx-fast), background var(--tx-fast); width: 100%; }
.arena-opt-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.arena-opt-btn:disabled { cursor: not-allowed; }
.arena-opt-btn.correct { border-color: var(--correct-em); background: var(--correct-bg); color: var(--correct-fg); }
.arena-opt-btn.wrong   { border-color: var(--error);      background: var(--wrong-bg);   color: var(--wrong-fg); }
.arena-opt-btn.reveal  { border-color: var(--correct-em); background: var(--correct-bg); }
.arena-opt-letter { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: var(--fs-ui); font-weight: 700; color: var(--text-light); }
.arena-opt-btn.correct .arena-opt-letter { background: var(--correct-em); border-color: var(--correct-em); color: #fff; }
.arena-opt-btn.wrong   .arena-opt-letter { background: var(--error); border-color: var(--error); color: #fff; }
@media (max-width: 520px) { .arena-opts-grid { grid-template-columns: 1fr; } }

.arena-interstitial { text-align: center; padding-top: 40px; }
.arena-inter-badge { font-size: var(--fs-card); font-weight: 800; margin-bottom: 6px; }
.arena-inter-badge.perfect { color: var(--score-good); }
.arena-inter-detail { font-size: var(--fs-btn); margin-bottom: 4px; }
.arena-inter-life { color: var(--error); font-size: var(--fs-body); margin-bottom: 4px; }
.arena-inter-next { color: var(--text-light); font-size: var(--fs-ui); margin-bottom: 14px; }
.arena-quit-btn { display: block; margin: 8px auto 0;
  background: var(--error); color: var(--white); border-color: var(--error); }
.arena-quit-btn:hover { background: var(--wrong-fg); border-color: var(--wrong-fg); }

.arena-gameover { max-width: 960px; }
.arena-go-layout { display: flex; gap: 0; align-items: flex-start; }
.arena-go-left { flex: 2 1 0; min-width: 0; padding-right: 28px; border-right: 1px solid var(--border); }
.arena-go-right { flex: 3 1 0; min-width: 0; padding-left: 28px; max-height: 80vh; overflow-y: auto; }
.arena-go-title { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 4px; }
.arena-cleared, .arena-new-best { font-size: var(--fs-body); margin-bottom: 4px; }
.arena-go-stats { display: flex; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
.arena-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.arena-stat-val { font-size: var(--fs-h2); font-weight: 800; }
.arena-stat-lbl { font-size: var(--fs-2xs); text-transform: uppercase; color: var(--text-light); }
.arena-go-hi { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-body); }
.arena-hi-label { font-weight: 700; font-size: var(--fs-2xs); text-transform: uppercase;
  color: var(--text-light); }
.arena-go-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.arena-missed-section { text-align: left; }
.arena-missed-section h3 { font-size: var(--fs-btn); font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px; }
.arena-review-count { font-size: var(--fs-note); font-weight: 400; color: var(--text-light);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 1px 8px; }
.arena-review-item { border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px;
  border-left: 3px solid transparent; border: 1px solid var(--border); }
.arena-review-item.arena-review-correct { border-left: 3px solid var(--score-good); background: color-mix(in srgb, var(--score-good) 5%, transparent); }
.arena-review-item.arena-review-wrong   { border-left: 3px solid var(--error);      background: color-mix(in srgb, var(--error) 5%,      transparent); }
.arena-review-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.arena-review-badge { font-size: 13px; font-weight: 800; flex-shrink: 0; }
.arena-review-correct .arena-review-badge { color: var(--score-good); }
.arena-review-wrong   .arena-review-badge { color: var(--error); }
.arena-review-subj { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-light);
  text-transform: uppercase; }
.arena-review-q { font-size: var(--fs-ui); margin: 0 0 4px; }
.arena-review-user-ans { font-size: var(--fs-ui); color: var(--error); margin: 0 0 2px; }
.arena-review-ans { font-size: var(--fs-ui); color: var(--score-good); font-weight: 600; margin: 0 0 3px; }
.arena-review-exp { font-size: var(--fs-note); color: var(--text-light); margin: 4px 0 0; border-top: 1px solid var(--border); padding-top: 4px; }
.arena-no-missed { color: var(--score-good); font-weight: 600; }
@media (max-width: 640px) {
  .arena-go-layout { flex-direction: column; }
  .arena-go-left { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 20px; }
  .arena-go-right { max-height: none; padding-left: 0; }
  .arena-setup-screen, .arena-screen, .arena-interstitial, .arena-gameover { padding: 8px 10px; }
  .arena-hud { flex-wrap: wrap; gap: 4px; }
  .arena-go-stats { gap: 10px; }
  .arena-stat-val { font-size: var(--fs-sec); }
  .arena-go-actions { flex-direction: column; }
  .arena-go-actions .btn { width: 100%; text-align: center; }
  .arena-subj-grid { gap: 6px; grid-template-columns: repeat(2, 1fr); }
}

.streak-arena-row { display: flex; gap: 12px; margin-bottom: 16px; }
.streak-arena-half { flex: 1 1 0; min-width: 0; display: flex; }
.streak-arena-half .streak-banner { flex: 1; margin: 0; }
.streak-arena-card { flex: 1; display: flex; align-items: center; gap: 14px;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color var(--tx-base), background var(--tx-base); }
.streak-arena-card:hover { border-color: var(--correct-em); background: var(--badge-t-bg); }
.arena-card-icon { font-size: var(--fs-sec); line-height: 1; flex-shrink: 0; }
.arena-card-body { display: flex; flex-direction: column; gap: 3px; }
.arena-card-title { font-weight: 800; font-size: var(--fs-btn); margin: 0; }
.arena-card-sub { font-size: var(--fs-note); color: var(--text-light); margin: 0; }
@media (max-width: 520px) {
  .streak-arena-row { flex-direction: column; }
  .home-top-cards .streak-banner { max-width: none; }
}

.site-footer {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 10px; padding: 0 16px; min-height: 40px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-note); color: var(--text-light);
}
.site-footer a { color: var(--text-light); text-decoration: none; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }
.site-footer-sep { opacity: .4; }

.home-btn {
  background: var(--primary-soft); color: var(--primary);
  border-color: var(--primary-soft); white-space: nowrap; flex-shrink: 0;
}
.home-btn:hover:not(:disabled) { background: var(--primary); color: var(--white); border-color: var(--primary); }

.rev-heading-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.progress-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
@media (max-width: 520px) {
  .progress-topbar { flex-direction: column; align-items: flex-start; }
  .progress-topbar .home-btn { align-self: flex-end; }
  .rev-heading-right { flex-wrap: wrap; }
  .rev-heading-row { flex-direction: column; align-items: flex-start; }
  .rev-heading-row .rev-heading-right { order: -1; align-self: stretch; justify-content: flex-end; }
}

.arena-skin-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.arena-skin-label { font-size: var(--fs-note); color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex-shrink: 0; }
.arena-skin-swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; outline: none; }
.arena-skin-swatch:hover:not(:disabled) { transform: scale(1.2); }
.arena-skin-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.arena-skin-swatch.locked { opacity: .35; cursor: not-allowed; }
.arena-unlock-banner { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--score-good) 12%, transparent);
  border: 1px solid var(--score-good); font-size: var(--fs-note); color: var(--text); }

body[data-arena-skin="midnight"] .arena-setup-screen,
body[data-arena-skin="midnight"] .arena-screen,
body[data-arena-skin="midnight"] .arena-interstitial,
body[data-arena-skin="midnight"] .arena-gameover { background: #1e1b4b; color: #e0e7ff; }
body[data-arena-skin="midnight"] .arena-opt-btn { background: #2d2a6e; border-color: #4338ca; color: #e0e7ff; }
body[data-arena-skin="midnight"] .arena-opt-btn:hover:not(:disabled) { background: #4338ca; border-color: #6366f1; }
body[data-arena-skin="midnight"] .arena-timer-fill, body[data-arena-skin="midnight"] .arena-timer-bar { background: #818cf8; }
body[data-arena-skin="midnight"] .btn.primary { background: #4f46e5; }
body[data-arena-skin="midnight"] .btn.primary:hover { background: #4338ca; }
body[data-arena-skin="midnight"] .card, body[data-arena-skin="midnight"] .arena-go-hi { background: #2d2a6e; border-color: #4338ca; color: #e0e7ff; }
body[data-arena-skin="midnight"] .arena-opt-letter { color: #a5b4fc; }

body[data-arena-skin="blaze"] .arena-setup-screen,
body[data-arena-skin="blaze"] .arena-screen,
body[data-arena-skin="blaze"] .arena-interstitial,
body[data-arena-skin="blaze"] .arena-gameover { background: #1c0a00; color: #fee2d5; }
body[data-arena-skin="blaze"] .arena-opt-btn { background: #3b0a00; border-color: #9a3412; color: #fee2d5; }
body[data-arena-skin="blaze"] .arena-opt-btn:hover:not(:disabled) { background: #7c2d12; border-color: #ea580c; }
body[data-arena-skin="blaze"] .arena-timer-fill, body[data-arena-skin="blaze"] .arena-timer-bar { background: #f97316; }
body[data-arena-skin="blaze"] .btn.primary { background: #dc2626; }
body[data-arena-skin="blaze"] .btn.primary:hover { background: #b91c1c; }
body[data-arena-skin="blaze"] .card, body[data-arena-skin="blaze"] .arena-go-hi { background: #3b0a00; border-color: #9a3412; color: #fee2d5; }
body[data-arena-skin="blaze"] .arena-opt-letter { color: #fb923c; }

body[data-arena-skin="solar"] .arena-setup-screen,
body[data-arena-skin="solar"] .arena-screen,
body[data-arena-skin="solar"] .arena-interstitial,
body[data-arena-skin="solar"] .arena-gameover { background: #fffbeb; color: #1c1917; }
body[data-arena-skin="solar"] .arena-opt-btn { background: #fef3c7; border-color: #d97706; color: #1c1917; }
body[data-arena-skin="solar"] .arena-opt-btn:hover:not(:disabled) { background: #fde68a; border-color: #b45309; }
body[data-arena-skin="solar"] .arena-timer-fill, body[data-arena-skin="solar"] .arena-timer-bar { background: #f59e0b; }
body[data-arena-skin="solar"] .btn.primary { background: #d97706; }
body[data-arena-skin="solar"] .btn.primary:hover { background: #b45309; }
body[data-arena-skin="solar"] .card, body[data-arena-skin="solar"] .arena-go-hi { background: #fef3c7; border-color: #d97706; }

body[data-arena-skin="jungle"] .arena-setup-screen,
body[data-arena-skin="jungle"] .arena-screen,
body[data-arena-skin="jungle"] .arena-interstitial,
body[data-arena-skin="jungle"] .arena-gameover { background: #052e16; color: #dcfce7; }
body[data-arena-skin="jungle"] .arena-opt-btn { background: #14532d; border-color: #16a34a; color: #dcfce7; }
body[data-arena-skin="jungle"] .arena-opt-btn:hover:not(:disabled) { background: #166534; border-color: #4ade80; }
body[data-arena-skin="jungle"] .arena-timer-fill, body[data-arena-skin="jungle"] .arena-timer-bar { background: #22c55e; }
body[data-arena-skin="jungle"] .btn.primary { background: #16a34a; }
body[data-arena-skin="jungle"] .btn.primary:hover { background: #15803d; }
body[data-arena-skin="jungle"] .card, body[data-arena-skin="jungle"] .arena-go-hi { background: #14532d; border-color: #16a34a; color: #dcfce7; }
body[data-arena-skin="jungle"] .arena-opt-letter { color: #86efac; }

body[data-arena-skin="lab"] .arena-setup-screen,
body[data-arena-skin="lab"] .arena-screen,
body[data-arena-skin="lab"] .arena-interstitial,
body[data-arena-skin="lab"] .arena-gameover { background: #083344; color: #cffafe; }
body[data-arena-skin="lab"] .arena-opt-btn { background: #164e63; border-color: #0891b2; color: #cffafe; }
body[data-arena-skin="lab"] .arena-opt-btn:hover:not(:disabled) { background: #155e75; border-color: #22d3ee; }
body[data-arena-skin="lab"] .arena-timer-fill, body[data-arena-skin="lab"] .arena-timer-bar { background: #22d3ee; }
body[data-arena-skin="lab"] .btn.primary { background: #0891b2; }
body[data-arena-skin="lab"] .btn.primary:hover { background: #0e7490; }
body[data-arena-skin="lab"] .card, body[data-arena-skin="lab"] .arena-go-hi { background: #164e63; border-color: #0891b2; color: #cffafe; }
body[data-arena-skin="lab"] .arena-opt-letter { color: #67e8f9; }

body[data-arena-skin="gold"] .arena-setup-screen,
body[data-arena-skin="gold"] .arena-screen,
body[data-arena-skin="gold"] .arena-interstitial,
body[data-arena-skin="gold"] .arena-gameover { background: #fefce8; color: #1c1917; }
body[data-arena-skin="gold"] .arena-opt-btn { background: #fef9c3; border-color: #ca8a04; color: #1c1917; }
body[data-arena-skin="gold"] .arena-opt-btn:hover:not(:disabled) { background: #fde047; border-color: #a16207; }
body[data-arena-skin="gold"] .arena-timer-fill, body[data-arena-skin="gold"] .arena-timer-bar { background: #eab308; }
body[data-arena-skin="gold"] .btn.primary { background: #ca8a04; }
body[data-arena-skin="gold"] .btn.primary:hover { background: #a16207; }
body[data-arena-skin="gold"] .card, body[data-arena-skin="gold"] .arena-go-hi { background: #fef9c3; border-color: #ca8a04; }

.legal-screen { max-width: 680px; margin: 0 auto; padding-bottom: 48px; padding-top: 0; }
.legal-screen h2 { margin-top: 1.75em; font-size: var(--fs-base); }
.legal-screen p { line-height: 1.7; color: var(--text); }
.legal-screen a { color: var(--primary); }
.legal-title { color: var(--primary); font-size: var(--fs-xl); margin-bottom: 4px; }
.legal-list { padding-left: 1.4em; margin: 8px 0 12px; line-height: 1.7; color: var(--text); }
.legal-list li { margin-bottom: 4px; }

/* ── Ask AI header button ──────────────────────────────────────────────────── */
.hdr-ask-ai { font-size: var(--fs-sm); gap: 4px; }

/* ── AI panel ──────────────────────────────────────────────────────────────── */
.ai-panel {
  position: fixed; top: var(--header-h); bottom: 0; right: 0; left: 0;
  width: 100%; z-index: 1200;
  display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
  transform: translateY(calc(100% + var(--header-h))); transition: transform .25s ease;
  font-size: var(--fs-body);
}
.ai-panel-open { transform: translateY(0); }

@media (max-width: 520px) {
  .ai-input-row { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .ai-badge { display: none; }
  .ai-icon-btn { min-width: 36px; min-height: 36px; padding: 8px; }
}

.ai-panel-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; }
.ai-resize-handle {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: ew-resize; z-index: 10;
  background: transparent;
  transition: background .15s;
}
.ai-resize-handle:hover { background: var(--primary-soft, rgba(37,99,235,.15)); }
.ai-resize-handle { display: none; }

.ai-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ai-header-left  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ai-star   { font-size: 15px; color: var(--primary); }
.ai-title  { font-weight: 700; font-size: var(--fs-body); }
.ai-badge  { font-size: var(--fs-sm); color: var(--text-light); background: var(--bg); padding: 2px 8px; border-radius: 20px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: 15px; padding: 4px 6px;
  border-radius: 6px; line-height: 1;
}
.ai-icon-btn:hover { background: var(--bg); color: var(--text); }

.ai-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }

.ai-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: var(--text-light); text-align: center; }
.ai-empty-icon { font-size: 2rem; opacity: .4; }
.ai-empty-sub  { font-size: var(--fs-sm); }

.ai-msg      { display: flex; align-items: flex-start; }
.ai-msg-user { justify-content: flex-end; align-items: center; gap: 6px; }
.ai-msg-ai   { justify-content: flex-start; align-items: flex-start; gap: 4px; }

.ai-bubble      { max-width: 85%; padding: 10px 13px; border-radius: 14px; line-height: 1.6; font-size: 14px; }
.ai-bubble-user { background: var(--primary); color: #fff; border-radius: 14px 14px 4px 14px; }
.ai-bubble-ai   { background: var(--bg); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; color: var(--text); }

.ai-p    { margin: 2px 0; line-height: 1.65; }
.ai-h    { font-size: var(--fs-body); font-weight: 700; margin: 10px 0 3px; }
.ai-gap  { height: 6px; }
.ai-code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; overflow-x: auto; margin: 6px 0; font-family: monospace; font-size: 13px; }
.ai-inline-code { font-family: monospace; font-size: .88em; background: var(--bg); border-radius: 3px; padding: 1px 4px; }

.ai-dots { display: inline-flex; gap: 3px; align-items: center; margin-left: 4px; vertical-align: middle; }
.ai-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-light); animation: ai-bounce 1.2s infinite; }
.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }

.ai-emoji-picker {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 14px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.ai-emoji-btn {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 2px 4px; border-radius: 6px; line-height: 1;
  transition: background .12s;
}
.ai-emoji-btn:hover { background: var(--bg); }
.ai-emoji-toggle { font-size: 16px; flex-shrink: 0; }
.ai-mic-btn { font-size: 16px; flex-shrink: 0; }
.ai-mic-active { color: #ef4444; animation: ai-mic-pulse 1s ease-in-out infinite; }
@keyframes ai-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.ai-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 14px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.ai-textarea {
  flex: 1; resize: none; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: var(--fs-body); font-family: inherit; outline: none; line-height: 1.5;
  max-height: 240px; overflow-y: auto;
}
.ai-textarea:focus { border-color: var(--primary); }
.ai-msg-actions { display: flex; gap: 6px; margin-top: 4px; padding-left: 2px; flex-shrink: 0; }
.ai-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-light); font-size: 11px; padding: 2px 8px;
  cursor: pointer; transition: background .15s, color .15s;
}
.ai-action-btn:hover { background: var(--bg); color: var(--text); }
.ai-retry-btn { padding: 2px 6px; opacity: .7; background: var(--surface); border-radius: 6px; }
.ai-retry-btn:hover { opacity: 1; }
.ai-copy-btn { padding: 3px 6px; opacity: .7; flex-shrink: 0; margin-top: 6px; background: var(--surface); border-radius: 6px; }
.ai-copy-btn:hover { opacity: 1; }

.ai-send-btn {
  padding: 9px 14px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: var(--fs-body); font-weight: 600;
  flex-shrink: 0; transition: opacity .15s;
}
.ai-send-btn:hover { opacity: .85; }
.ai-stop-btn { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* Math symbol picker */
.ai-math-picker {
  display: none; flex-wrap: wrap; gap: 4px;
  padding: 8px; background: var(--surface);
  border-top: 1px solid var(--border);
  max-height: 160px; overflow-y: auto;
}
.ai-math-picker.is-open { display: flex; position: relative; z-index: 2; }
.ai-math-backdrop {
  position: fixed; inset: 0; z-index: 1; background: transparent;
}
.ai-math-sym {
  font-size: 16px; line-height: 1; width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-math-sym:hover { background: var(--surface-alt, var(--surface)); border-color: var(--accent, #6366f1); }
.ai-math-btn-active { background: var(--accent, #6366f1) !important; color: #fff !important; }
.ai-math-block { display: block; text-align: center; margin: 6px 0; overflow-x: auto; }
.ai-math-fb, .rise-math-fb { font-family: monospace; opacity: .8; }

/* Config overlay */
.ai-config-panel {
  position: absolute; inset: 0; background: var(--surface);
  z-index: 10; display: flex; flex-direction: column;
}
.ai-config-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: var(--fs-body);
}
.ai-config-body { flex: 1; overflow-y: auto; padding: 16px; }
.ai-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 4px; }
.ai-label:first-child { margin-top: 0; }
.ai-input {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: var(--fs-body); font-family: inherit; outline: none; box-sizing: border-box;
}
.ai-input:focus { border-color: var(--primary); }
.ai-save-btn {
  display: block; width: 100%; margin-top: 20px;
  padding: 10px; border-radius: 8px; border: none;
  background: var(--primary); color: #fff; font-size: var(--fs-body);
  font-weight: 600; cursor: pointer;
}
.legal-updated { color: var(--text-light); font-size: var(--fs-sm); margin-top: 0; }
.legal-top-bar { position: sticky; top: var(--header-h); z-index: 10; display: flex; justify-content: flex-end; padding: 8px 0; margin-bottom: 12px; width: 130%; margin-left: -15%; background: transparent; border: none; }
@media (max-width: 720px) {
  .legal-top-bar { position: fixed; top: var(--header-h); right: 12px; left: auto; width: auto; margin: 0; padding: 6px 0; background: transparent; }
  .legal-screen { padding-top: 40px; }
}

.arena-col-screen { padding: 24px 0 48px; }
.arena-col-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.arena-col-title { font-size: var(--fs-xl); font-weight: 700; margin: 0; color: var(--primary); }
.arena-col-total { background: var(--primary-soft); color: var(--primary); border-radius: 12px; padding: 3px 10px; font-size: var(--fs-sm); font-weight: 600; }
.arena-col-back { margin-left: auto; }
.arena-col-sub { color: var(--text-light); font-size: var(--fs-sm); margin-bottom: 28px; }

.arena-col-section { margin-bottom: 36px; }
.arena-col-section-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.arena-col-section-count { font-size: var(--fs-sm); font-weight: 500; color: var(--text-light); background: var(--surface-alt, #f1f5f9); border-radius: 10px; padding: 2px 8px; }

.arena-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 9px; }

.arena-col-card { --col-accent: #6366f1; background: color-mix(in srgb, var(--col-accent) 9%, var(--surface)); border: 2px solid color-mix(in srgb, var(--col-accent) 35%, transparent); border-radius: 8px; padding: 11px 9px 9px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .15s, transform .15s; }
.arena-col-card:not(.locked):hover { box-shadow: 0 4px 20px color-mix(in srgb, var(--col-accent) 30%, transparent); transform: translateY(-2px); }
.arena-col-card.locked { opacity: .45; filter: grayscale(1); }

.arena-col-art { width: 58px; height: 58px; color: var(--col-accent); margin-bottom: 8px; }
.arena-col-art svg { width: 100%; height: 100%; }

.arena-col-info { width: 100%; }
.arena-col-name { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; color: color-mix(in srgb, var(--col-accent) 70%, var(--text)); }
.arena-col-rarity { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; background: color-mix(in srgb, var(--col-accent) 18%, transparent); color: var(--col-accent); }
.arena-col-desc { font-size: var(--fs-sm); color: var(--text-light); line-height: 1.5; margin: 0; }
.arena-col-hint { font-size: 11px; color: var(--text-light); margin: 0; font-style: italic; }

.arena-col-link { font-size: var(--fs-sm); margin-top: 10px; padding: 6px 14px; }

.arena-unlock-col { background: linear-gradient(90deg,#fef3c7,#fde68a20); border-color: #d97706; }

.arena-daily-card { background: linear-gradient(135deg,var(--primary-soft),#ede9fe30); border: 1.5px solid var(--primary); border-radius: 10px; padding: 10px 14px; margin-bottom: 4px; }
.arena-daily-done-card { background: linear-gradient(135deg,#f0fdf430,#dcfce730); border-color: var(--score-good, #16a34a); }
.arena-daily-card-title { font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.arena-daily-date { font-size: var(--fs-sm); font-weight: 500; color: var(--text-light); }
.arena-daily-sub { font-size: var(--fs-sm); color: var(--text-light); margin: 0 0 10px; }
.arena-daily-result { font-size: var(--fs-sm); color: var(--text); margin: 0 0 10px; }
.arena-daily-btn { padding: 7px 18px; font-size: var(--fs-sm); }

.arena-picker-sep { height: 1px; background: var(--border); margin: 10px 0; opacity: .6; }
.arena-half-row { display: flex; gap: 32px; align-items: flex-start; }
.arena-half { flex: 1 1 0; min-width: 0; }
.arena-live-half { border-left: 1px solid var(--border); padding-left: 32px; }
@media (max-width: 600px) {
  .arena-half-row { flex-direction: column; gap: 12px; }
  .arena-live-half { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

.arena-meta-count { font-size: 11px; font-weight: 600; color: var(--text-light); background: var(--surface-alt, #f1f5f9); border-radius: 8px; padding: 1px 7px; white-space: nowrap; }
.arena-skin-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-light); }

.arena-col-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

.hdr-signin { flex-shrink: 0; }

.hdr-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-family: inherit;
  border: none; cursor: pointer;
}
.hdr-avatar:hover { opacity: .85; }
.hdr-avatar img { width: 32px; height: 32px; object-fit: cover; }
.auth-signout-btn { color: #dc2626 !important; border-color: #dc2626 !important; }

#rise-auth-modal:not([hidden]) { display: block; }
#rise-auth-modal { position: fixed; inset: 0; z-index: 200; }
#rise-profile-modal:not([hidden]) { display: block; }
/* Right-side drawer, same anchoring as the Cloé panel */
#rise-profile-modal {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto;
  width: min(420px, 100vw); z-index: 200;
}
#rise-profile-modal .auth-backdrop {
  position: fixed; inset: 0; top: var(--header-h);
}
#rise-profile-modal .auth-dialog {
  position: absolute; inset: 0; transform: none;
  width: 100%; max-height: 100%;
  border-radius: 0; border: none; border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.14);
  overflow-y: auto;
}

.auth-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
}
.auth-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100% - 40px - env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px;
}
.auth-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.auth-close {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--text-light); cursor: pointer; flex-shrink: 0;
}
.auth-title { font-size: var(--fs-h2); font-weight: 800; margin: 0; }
.auth-sub { font-size: var(--fs-sm); color: var(--text-light); margin: 0; }

.auth-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: var(--radius-board); padding: 3px; }
.auth-tab {
  flex: 1; padding: 6px; font-size: var(--fs-ui); font-weight: 600; font-family: inherit;
  background: none; border: none; border-radius: calc(var(--radius-board) - 2px);
  color: var(--text-light); cursor: pointer;
}
.auth-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.auth-panel { display: flex; flex-direction: column; gap: 10px; }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
}
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-light); font-size: var(--fs-sm);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-sub-tabs { display: flex; gap: 8px; }
.auth-sub-tab {
  background: none; border: none; font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
  color: var(--text-light); cursor: pointer; padding: 0 0 2px; border-bottom: 2px solid transparent;
}
.auth-sub-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-weight: 600; }
.auth-label input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-board);
  font-size: 14px; font-family: inherit; background: var(--bg); color: var(--text);
}
.auth-label input:focus { outline: 2px solid var(--primary); border-color: transparent; }

.auth-pw-wrap { position: relative; display: flex; }
.auth-pw-wrap input { width: 100%; padding-right: 36px; }
.auth-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px;
  padding: 4px 6px; line-height: 1; opacity: .7;
}
.auth-pw-toggle:hover { opacity: 1; }

.auth-pw-hint { font-size: 12px; color: var(--text-light); margin-top: 3px; }
.auth-reset-link {
  background: none; border: none; font-size: var(--fs-sm); color: var(--text-light);
  cursor: pointer; text-align: left; padding: 0; text-decoration: underline;
}
.auth-error { font-size: var(--fs-sm); color: #dc2626; margin: 0; }
.profile-danger-zone { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.profile-danger-zone .auth-reset-link { color: #dc2626; }
.verify-email-banner {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding: 10px 12px; background: var(--resume-bg); border: 1px solid var(--resume-border);
  border-radius: var(--radius-md);
}
.verify-email-banner .btn { align-self: flex-start; }

/* ── Family section (inside profile modal) ─────────────────────────────── */
.family-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.family-heading { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin: 0 0 .35rem; }
.family-invites, .family-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.family-invite-row, .family-link-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: var(--fs-sm);
}
.family-invite-actions { display: flex; gap: 6px; margin-left: auto; }
.family-digest-toggle { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); margin-left: auto; }
.family-invite-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.family-invite-form input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text);
}
.family-invite-form input[type="email"]:focus { outline: 2px solid var(--primary); border-color: transparent; }
.family-invite-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.family-invite-buttons .btn { flex: 1; min-width: 130px; }

.family-subheading { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin: 0 0 12px; }

/* ── Guardian's Assignments tab: child picker + single selected child's content ── */
.family-assign-tab { display: flex; flex-direction: column; gap: 14px; }
.assign-child-picker {
  display: flex; flex-direction: column; gap: 5px; max-width: 320px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.assign-child-picker select {
  padding: 9px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text);
}

/* ── Assignment form (guardian's Progress screen) ──────────────────────── */
.assign-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.assign-form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.assign-form-row label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  flex: 1; min-width: 160px;
}
.assign-form-row select, .assign-form-row input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font-size: var(--fs-body); font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text);
}
.assign-form-row select:focus, .assign-form-row input:focus { outline: 2px solid var(--primary); border-color: transparent; }
.assign-form > .btn { align-self: flex-start; min-width: 120px; }

.assign-status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.assign-status-pill.pending   { background: var(--primary-soft); color: var(--primary); }
.assign-status-pill.completed { background: var(--correct-bg); color: var(--correct-fg); }
.assign-status-pill.expired   { background: var(--wrong-bg); color: var(--wrong-fg); }
.assign-status-pill.cancelled { background: var(--bg); color: var(--text-light); }

/* ── Assignment history: responsive card grid. auto-fill sizes to whatever
   container it's in (a full-width child Progress screen, or a 50%-wide
   guardian column) instead of a fixed column count tied to viewport width. */
.assign-history-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.assign-history-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px;
}
.assign-history-title { font-size: var(--fs-body); color: var(--text); }
.assign-history-meta  { color: var(--text-light); font-size: var(--fs-note); }
.assign-history-card .btn { margin-top: 4px; align-self: stretch; }
.assign-history-actions { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.assign-history-actions .btn { flex: 1; margin-top: 0; }

.arena-challenge-entry { display: flex; gap: 8px; align-items: center; }
.arena-challenge-entry input { flex: 1; font-size: var(--fs-base); padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); letter-spacing: .1em; font-weight: 600; text-transform: uppercase; }
.arena-code-error { color: #dc2626; font-size: var(--fs-sm); margin: 4px 0 0; }

.arena-challenge-box { margin-top: 12px; padding: 12px 14px; background: var(--primary-soft); border: 1.5px solid var(--primary); border-radius: 10px; }
.arena-challenge-label { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; color: var(--primary); }
.arena-code-display { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.arena-code-text { font-size: 1.5rem; font-weight: 800; letter-spacing: .25em; color: var(--primary); }
.arena-challenge-note { font-size: var(--fs-sm); color: var(--text-light); margin: 0; }

.arena-leaderboard-box { margin-top: 16px; }
.arena-leaderboard { }
.arena-lb-title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 10px; }
.arena-lb-loading { font-size: var(--fs-sm); color: var(--text-light); }
.arena-lb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.arena-lb-table th, .arena-lb-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.arena-lb-table th { font-weight: 600; color: var(--text-light); }
.arena-lb-top td { font-weight: 700; color: var(--primary); }

.arena-pick-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
.arena-live-options { display: flex; flex-direction: column; gap: 8px; }
.arena-live-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arena-live-label { font-size: var(--fs-sm); color: var(--text-light); white-space: nowrap; }
.arena-live-select { font-size: var(--fs-sm); padding: 5px 8px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: pointer; }

.live-screen { padding: 20px 0 48px; max-width: 520px; margin: 0 auto; }
.live-title { font-size: var(--fs-xl); font-weight: 800; color: var(--primary); margin: 0 0 20px; }
.live-code-card { background: var(--primary-soft); border: 1.5px solid var(--primary); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.live-code-label { font-size: var(--fs-sm); color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.live-code-row { display: flex; align-items: center; gap: 12px; }
.live-code-text { font-size: 2rem; font-weight: 800; letter-spacing: .3em; color: var(--primary); }
.live-players-box { background: var(--surface-alt, #f8fafc); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.live-players-label { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.live-player-count { font-size: var(--fs-sm); background: var(--primary-soft); color: var(--primary); border-radius: 10px; padding: 2px 8px; }
.live-player-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.live-player-item { font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px solid var(--border); }
.live-player-item:last-child { border-bottom: none; }
.live-host-actions { display: flex; gap: 10px; margin: 16px 0; }
.live-waiting { font-size: var(--fs-sm); color: var(--text-light); font-style: italic; margin: 12px 0; }
.live-host-note { font-size: var(--fs-sm); color: var(--text-light); margin-top: 12px; }
.live-loading { color: var(--text-light); font-style: italic; }

.live-q-hud { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.live-q-num { font-weight: 700; font-size: var(--fs-base); }
.live-answered-count { font-size: var(--fs-sm); color: var(--text-light); margin-left: auto; }
.live-skip-btn { margin-left: 8px; }
.live-timer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.live-timer-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.live-timer-bar { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s linear; }
.live-timer-bar.low { background: #ef4444; }
.live-timer-label { font-weight: 700; font-size: var(--fs-sm); min-width: 32px; text-align: right; }
.live-subject-tag { font-size: var(--fs-sm); font-weight: 600; color: var(--primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.live-q-text { font-size: var(--fs-lg); font-weight: 600; line-height: 1.45; margin-bottom: 18px; }
.live-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.live-opt-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; font-size: var(--fs-base); }
.live-opt-btn:not(.answered):hover { border-color: var(--primary); background: var(--primary-soft); }
.live-opt-btn.chosen { border-color: var(--primary); background: var(--primary-soft); }
.live-opt-btn.answered { opacity: .7; cursor: default; }
.live-opt-letter { font-weight: 800; color: var(--primary); min-width: 18px; }
.live-answered-msg { font-size: var(--fs-sm); color: var(--primary); font-weight: 600; text-align: center; }

.live-reveal-header { margin-bottom: 10px; }
.live-opts-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.live-opt-reveal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); font-size: var(--fs-base); }
.live-opt-reveal.correct { border-color: #16a34a; background: #f0fdf4; color: #15803d; font-weight: 700; }
.live-opt-reveal.wrong { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.live-correct-tick { margin-left: auto; font-size: 1.1rem; }
.live-explanation { font-size: var(--fs-sm); color: var(--text-light); background: var(--surface-alt, #f8fafc); border-left: 3px solid var(--primary); padding: 8px 12px; border-radius: 0 6px 6px 0; margin-bottom: 14px; }
.live-lb-mini { margin-bottom: 16px; }
.live-lb-mini-title { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px; }

.live-done-title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 20px; }
.live-final-lb { margin-bottom: 20px; }
.live-final-table { font-size: var(--fs-base); }
.live-lb-me td { font-weight: 700; color: var(--primary); }

@media (max-width: 480px) {
  .live-opts-grid, .live-opts-reveal { grid-template-columns: 1fr; }
  .live-code-text { font-size: 1.5rem; }
}

/* ── PWA Install Banner & Modal ─────────────────────────────────────────── */
.install-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--primary, #2563eb); color: #fff;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 14px;
  font-size: var(--fs-sm);
}
.install-banner span { flex: 1; min-width: 0; }
.install-banner .btn { flex-shrink: 0; background: #fff; color: var(--primary, #2563eb); border: none; }
.install-banner-close {
  background: none; border: none; color: #fff; font-size: 1rem;
  cursor: pointer; padding: 2px 4px; flex-shrink: 0; opacity: .8;
}
.install-banner-close:hover { opacity: 1; }
.hdr-install-btn { font-size: var(--fs-sm) !important; }
#install-guide-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.install-guide-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.install-guide-box {
  position: relative; background: var(--surface); border-radius: 14px;
  padding: 24px 20px; max-width: 320px; width: 90%; z-index: 1;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.install-guide-box h3 { margin: 0 0 10px; font-size: 1.1rem; }
.install-guide-box ol { padding-left: 18px; margin: 10px 0; line-height: 1.8; }
.install-guide-sub { font-size: var(--fs-sm); color: var(--text-light); margin-top: 10px; }
.install-guide-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 1rem; cursor: pointer; color: var(--text-light);
}