/* Claude UI / UX refinement rounds
   This file is intentionally layered in small iterations.
   Later rounds override earlier ones. */


/* ROUND 01 — Warm Claude foundation */
:root {
  --accent: #c27654;
  --accent-mid: #aa6546;
  --accent-deep: #8f5238;
  --accent-soft: rgba(194, 118, 84, 0.12);
  --accent-glow: rgba(194, 118, 84, 0.18);
  --success: #4c9476;
  --success-soft: rgba(76, 148, 118, 0.12);
  --warm: #c46745;
  --warm-soft: rgba(196, 103, 69, 0.12);
}

html[data-theme="light"] {
  --bg: #f7f3eb;
  --paper: rgba(255, 251, 245, 0.82);
  --paper-strong: rgba(255, 252, 247, 0.96);
  --ink: #2f261f;
  --muted: #7a6c61;
  --subtle: #d8ccc0;
  --line: rgba(71, 54, 42, 0.10);
  --line-strong: rgba(71, 54, 42, 0.18);
  --accent: #be7353;
  --accent-mid: #a86145;
  --accent-deep: #8c5039;
  --accent-soft: rgba(190, 115, 83, 0.11);
}

/* ROUND 01 — Warm Claude foundation */
:root {
  --accent: #c27654;
  --accent-mid: #aa6546;
  --accent-deep: #8f5238;
  --accent-soft: rgba(194, 118, 84, 0.12);
  --accent-glow: rgba(194, 118, 84, 0.18);
  --success: #4c9476;
  --success-soft: rgba(76, 148, 118, 0.12);
  --warm: #c46745;
  --warm-soft: rgba(196, 103, 69, 0.12);
}

html[data-theme="light"] {
  --bg: #f7f3eb;
  --paper: rgba(255, 251, 245, 0.82);
  --paper-strong: rgba(255, 252, 247, 0.96);
  --ink: #2f261f;
  --muted: #7a6c61;
  --subtle: #d8ccc0;
  --line: rgba(71, 54, 42, 0.10);
  --line-strong: rgba(71, 54, 42, 0.18);
  --accent: #be7353;
  --accent-mid: #a86145;
  --accent-deep: #8c5039;
  --accent-soft: rgba(190, 115, 83, 0.11);
}

/* ROUND 02 — Warm page atmosphere */
body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(194, 118, 84, 0.10), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(180, 146, 112, 0.08), transparent 24%),
    linear-gradient(180deg, #1b1713 0%, #171411 100%);
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(194, 118, 84, 0.08), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(224, 202, 176, 0.18), transparent 24%),
    linear-gradient(180deg, #faf6ef 0%, #f4efe8 100%);
}

.page-shell {
  max-width: 1520px;
  padding-top: 28px;
}

/* ROUND 03 — Editorial hero */
.hero {
  grid-template-columns: 1.12fr 0.88fr;
  gap: 24px;
}

.hero-copy {
  padding: 44px 46px 40px;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(255, 249, 242, 0.68));
}

html[data-theme="dark"] .hero-copy {
  background: linear-gradient(180deg, rgba(41, 34, 28, 0.92), rgba(29, 24, 20, 0.90));
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.08;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

.hero-text {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.9;
}

/* ROUND 04 — Calmer stat surface */
.hero-panel {
  padding: 0;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.stat-card {
  min-height: 128px;
  padding: 18px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 10px 24px rgba(44, 30, 18, 0.04);
}

html[data-theme="dark"] .stat-card {
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 28px rgba(0,0,0,0.18);
}

.stat-card strong {
  font-size: clamp(24px, 2.2vw, 32px);
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  font-weight: 400;
}

/* ROUND 05 — Sidebar hierarchy */
.workspace {
  grid-template-columns: minmax(300px, 356px) minmax(0, 1fr);
  gap: 24px;
}

.control-panel {
  padding: 0;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.panel-block {
  padding: 24px;
  border-radius: 26px;
  background: var(--paper);
}

.panel-block h2 {
  font-size: 15px;
  font-weight: 500;
}

/* ROUND 06 — Softer fields */
input,
select {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.88);
  border-color: rgba(87, 66, 51, 0.10);
  box-shadow: none;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
  background: rgba(43, 36, 30, 0.86);
  border-color: rgba(238, 225, 211, 0.08);
}

input::placeholder {
  color: var(--muted);
}

/* ROUND 07 — Claude-like button system */
.primary-button,
.mini-button.primary {
  background: #2e241d;
  color: #f8f2ea;
  border-color: rgba(46, 36, 29, 0.78);
  box-shadow: none;
}

.primary-button:hover:not(:disabled),
.mini-button.primary:hover:not(:disabled) {
  background: #392e26;
  box-shadow: none;
}

.ghost-button,
.mini-button:not(.primary),
.action-row button,
.status-row button {
  background: var(--paper);
  box-shadow: none;
}

/* ROUND 08 — Practice stage shell */
.practice-stage {
  padding: 32px;
  border-radius: 32px;
  background: rgba(255, 252, 247, 0.58);
}

html[data-theme="dark"] .practice-stage {
  background: rgba(35, 29, 24, 0.84);
}

.progress-chip {
  background: var(--paper);
  border-color: var(--line);
  font-weight: 500;
}

/* ROUND 09 — Reading-first question title */
.stage-topbar h2 {
  font-size: clamp(17px, 1.65vw, 24px);
  line-height: 1.28;
  max-width: 28ch;
}

.question-card {
  padding: 42px 46px;
  border-radius: 30px;
  background: var(--paper-strong);
}

.question-content > * {
  width: min(100%, 700px);
}

/* ROUND 10 — Body copy rhythm */
.question-content {
  gap: 34px;
}

.question-content p {
  font-size: 15.5px;
  line-height: 2.02;
  letter-spacing: -0.012em;
}

.question-intro {
  gap: 20px;
}

/* ROUND 11 — Part card separation */
.part-stack {
  gap: 20px;
}

.part-card {
  padding: 26px 28px;
  border-radius: 26px;
  background: var(--paper);
}

.part-label {
  padding: 0;
  margin-bottom: 16px;
  border: none;
  background: transparent;
  color: var(--muted);
}

/* ROUND 12 — Claude answer choices */
.choice-grid {
  gap: 12px;
}

.choice-button {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255, 252, 247, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .choice-button {
  background: rgba(42, 35, 29, 0.92);
}

.choice-button::before {
  display: none;
}

/* ROUND 13 — Choice typography */
.choice-key {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  border-color: var(--line);
}

.choice-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.76;
}

/* ROUND 14 — Muted interactive states */
.choice-button:hover:not(:disabled) {
  transform: none;
  border-color: rgba(194, 118, 84, 0.22);
  background: rgba(194, 118, 84, 0.05);
  box-shadow: none;
}

.choice-button.selected {
  background: rgba(194, 118, 84, 0.08);
  border-color: rgba(194, 118, 84, 0.24);
  box-shadow: none;
}

/* ROUND 15 — Humane correctness colors */
.choice-button.correct {
  background: rgba(76, 148, 118, 0.10);
  border-color: rgba(76, 148, 118, 0.22);
  box-shadow: none;
}

.choice-button.incorrect {
  background: rgba(196, 103, 69, 0.10);
  border-color: rgba(196, 103, 69, 0.22);
  box-shadow: none;
}

.choice-button.correct .choice-key,
.choice-button.incorrect .choice-key {
  background: rgba(255,255,255,0.28);
}

/* ROUND 16 — Feedback blocks */
.feedback-panel {
  padding: 24px;
  border-radius: 24px;
  background: rgba(245, 239, 231, 0.72);
  box-shadow: none;
}

html[data-theme="dark"] .feedback-panel {
  background: rgba(46, 38, 32, 0.72);
}

.feedback-line {
  font-size: 15px;
  line-height: 1.84;
}

/* ROUND 17 — Question list calmness */
.question-list {
  gap: 10px;
  max-height: 360px;
}

.question-list-item {
  padding: 14px 15px;
  border-radius: 18px;
  background: var(--paper);
}

.question-list-item.active {
  background: rgba(194, 118, 84, 0.08);
  border-color: rgba(194, 118, 84, 0.24);
  box-shadow: none;
}

/* ROUND 18 — Activity feed refinement */
.record-item,
.empty-records {
  padding: 16px;
  border-radius: 18px;
  background: var(--paper);
}

.record-topline strong {
  font-weight: 500;
}

.record-meta,
.record-timestamp {
  line-height: 1.65;
}

/* ROUND 19 — Badge language */
.sync-pill,
.muted-chip,
.record-badge,
.feedback-badge {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.account-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
}

/* ROUND 20 — Softer auth experience */
.auth-overlay {
  background: rgba(32, 24, 19, 0.18);
}

.auth-card {
  width: min(100%, 480px);
  padding: 40px 38px;
  background: var(--paper-strong);
}

.auth-text,
.auth-note {
  font-size: 15px;
  line-height: 1.75;
}

/* ROUND 21 — Progress and motion */
.progress-rail {
  height: 4px;
  background: rgba(194, 118, 84, 0.10);
}

.progress-fill {
  background: linear-gradient(90deg, #d28a65, #bb6a49);
  box-shadow: none;
}

button,
.choice-button,
.primary-button,
.mini-button {
  transition-duration: 140ms;
}

/* ROUND 22 — Action hierarchy */
.action-row {
  justify-content: flex-start;
  gap: 10px;
}

.action-row button,
.status-row button {
  flex: 0 0 auto;
  min-width: 164px;
}

#prev-button,
#next-button,
#clear-status-button {
  background: var(--paper);
}

/* ROUND 23 — Radius & border discipline */
.hero-copy,
.panel-block,
.practice-stage,
.question-card,
.part-card,
.auth-card,
.stat-card {
  border-radius: 28px;
}

.choice-button,
.record-item,
.question-list-item,
.feedback-panel {
  border-radius: 20px;
}

/* ROUND 24 — Mobile reading comfort */
@media (max-width: 980px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .question-content > * {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .hero {
    gap: 16px;
  }

  .question-card {
    padding: 30px 22px;
  }

  .part-card {
    padding: 22px 20px;
  }
}

/* ROUND 25 — Light theme paper polish */
html[data-theme="light"] .hero-copy,
html[data-theme="light"] .panel-block,
html[data-theme="light"] .practice-stage,
html[data-theme="light"] .question-card,
html[data-theme="light"] .part-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .auth-card {
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 36px rgba(84, 57, 35, 0.06);
}

html[data-theme="light"] .hero-copy::before,
html[data-theme="light"] .hero-copy::after {
  opacity: 0.45;
}

/* ROUND 26 — Dark theme graphite polish */
html[data-theme="dark"] {
  --bg: #17120f;
  --paper: rgba(38, 31, 26, 0.82);
  --paper-strong: rgba(42, 35, 30, 0.96);
  --ink: #f4ede4;
  --muted: #b9ab9c;
  --line: rgba(244, 237, 228, 0.08);
  --line-strong: rgba(244, 237, 228, 0.16);
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(210, 138, 101, 0.08), transparent 28%),
    linear-gradient(180deg, #191410 0%, #130f0c 100%);
}

/* ROUND 27 — Quiet numerics and labels */
.eyebrow,
.current-badge,
.field-label,
.stat-label {
  color: color-mix(in srgb, var(--muted) 88%, white 12%);
}

.stat-label {
  font-size: 12px;
}

.stat-card strong {
  letter-spacing: -0.05em;
}

/* ROUND 28 — Controls feel less mechanical */
.inline-field {
  gap: 8px;
}

#jump-button {
  width: auto;
  white-space: nowrap;
}

#mode-select,
#search-input,
#jump-input {
  font-size: 14px;
}

/* ROUND 29 — Claude typography finish */
.hero-text,
.account-note,
.shortcut-note,
.record-meta,
.record-timestamp,
.part-hint,
.auth-text,
.auth-note {
  font-size: 14px;
  line-height: 1.8;
}

.question-content .section-heading,
.part-label {
  letter-spacing: 0.2em;
}

/* ROUND 30 — Final polish */
::selection {
  background: rgba(194, 118, 84, 0.18);
  color: var(--ink);
}

.hero-copy::before,
.hero-copy::after {
  filter: blur(24px);
}

.primary-button,
.mini-button.primary {
  border-radius: 999px;
}

.practice-stage,
.question-card,
.part-card {
  backdrop-filter: blur(18px) saturate(108%);
}

/* MAJOR REDESIGN — Claude docs / notebook layout */
:root {
  --font-body: "Inter", sans-serif;
  --font-heading: "Plus Jakarta Sans", sans-serif;
  --docs-measure: 74ch;
  --docs-stage-width: 980px;
}

html[data-theme="light"] {
  --bg: #f6f3ee;
  --paper: rgba(255, 252, 247, 0.84);
  --paper-strong: rgba(255, 253, 249, 0.96);
  --ink: #26231d;
  --muted: #756d63;
  --subtle: #d7d0c5;
  --line: rgba(39, 31, 24, 0.085);
  --line-strong: rgba(39, 31, 24, 0.15);
  --accent: #be7a4f;
  --accent-mid: #a96843;
  --accent-soft: rgba(190, 122, 79, 0.11);
  --accent-glow: rgba(190, 122, 79, 0.16);
}

html[data-theme="dark"] {
  --bg: #141311;
  --paper: rgba(29, 27, 23, 0.88);
  --paper-strong: rgba(25, 24, 20, 0.96);
  --ink: #f4efe6;
  --muted: #ada394;
  --subtle: #413a31;
  --line: rgba(244, 239, 230, 0.085);
  --line-strong: rgba(244, 239, 230, 0.15);
  --accent: #d08a5b;
  --accent-mid: #bc774a;
  --accent-soft: rgba(208, 138, 91, 0.12);
  --accent-glow: rgba(208, 138, 91, 0.18);
}

body {
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(208, 138, 91, 0.08), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(173, 163, 148, 0.08), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, white 8%) 0%, var(--bg) 100%);
}

body::before {
  opacity: 0.02;
}

body::after {
  inset: auto -8vw -10vh auto;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle at 60% 40%, rgba(208, 138, 91, 0.08), transparent 68%);
}

.page-shell {
  max-width: 1640px;
  padding: 24px 28px 48px;
}

.hero.hero-docs {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 26px;
}

.hero-copy {
  padding: 26px 30px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.84), rgba(255, 250, 245, 0.72));
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 18px 44px rgba(59, 41, 27, 0.06);
}

html[data-theme="dark"] .hero-copy {
  background: linear-gradient(180deg, rgba(31, 28, 24, 0.92), rgba(23, 21, 18, 0.88));
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 48px rgba(0, 0, 0, 0.26);
}

.hero-copy::before,
.hero-copy::after {
  opacity: 0.45;
  filter: blur(42px);
}

.hero-topline {
  margin-bottom: 18px;
}

.eyebrow,
.current-badge,
.field-label,
.stat-label,
.question-content .section-heading,
.part-label {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.hero h1,
.auth-card h2,
.stage-topbar h2,
.account-name,
.panel-block h2,
.stat-card strong {
  font-family: var(--font-heading);
  color: var(--ink);
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.hero-text {
  max-width: 58ch;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.theme-toggle {
  padding: 9px 15px;
  background: rgba(255, 253, 249, 0.7);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(34, 31, 27, 0.78);
}

.hero-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.stat-card {
  min-height: 110px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}

.stat-card strong {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.workspace {
  grid-template-columns: minmax(286px, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px;
  gap: 18px;
  border-radius: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(34, 24, 17, 0.06);
  scrollbar-width: thin;
}

html[data-theme="dark"] .docs-sidebar {
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.25);
}

.docs-sidebar .panel-block {
  padding: 0 0 18px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.docs-sidebar .panel-block:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.panel-block h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.account-name {
  font-size: 20px;
  font-weight: 500;
}

.account-note,
.shortcut-note,
.record-meta,
.record-timestamp,
.auth-text,
.auth-note {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

input,
select {
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255, 253, 250, 0.92);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
  background: rgba(35, 32, 28, 0.9);
}

input:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(190, 122, 79, 0.11);
}

.ghost-button,
.mini-button:not(.primary),
.action-row button,
.status-row button,
#jump-button {
  background: rgba(255, 253, 250, 0.72);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .mini-button:not(.primary),
html[data-theme="dark"] .action-row button,
html[data-theme="dark"] .status-row button,
html[data-theme="dark"] #jump-button {
  background: rgba(35, 32, 28, 0.88);
}

.primary-button,
.mini-button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, black 8%), var(--accent-mid));
  border-color: color-mix(in srgb, var(--accent-mid) 76%, black 24%);
  color: #fffaf4;
  box-shadow: 0 10px 30px rgba(190, 122, 79, 0.18);
}

.primary-button:hover:not(:disabled),
.mini-button.primary:hover:not(:disabled) {
  box-shadow: 0 14px 34px rgba(190, 122, 79, 0.22);
}

.question-list {
  max-height: 280px;
  gap: 6px;
}

.question-list-item {
  padding: 11px 12px;
  border-radius: 14px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.question-list-item:hover:not(.active) {
  background: var(--accent-soft);
  border-color: transparent;
}

.question-list-item.active {
  background: var(--accent-soft);
  border-color: transparent;
}

.question-list-item small {
  margin-top: 3px;
}

.record-list {
  gap: 6px;
}

.record-item,
.empty-records {
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(255, 253, 250, 0.74);
  border-color: var(--line);
}

html[data-theme="dark"] .record-item,
html[data-theme="dark"] .empty-records {
  background: rgba(33, 30, 26, 0.84);
}

.docs-stage {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.docs-stage .stage-topbar,
.docs-stage .progress-rail,
.docs-stage .question-card,
.docs-stage .action-row,
.docs-stage .status-row {
  width: min(100%, var(--docs-stage-width));
  margin-inline: auto;
}

.stage-topbar {
  align-items: end;
  margin-bottom: 16px;
}

.stage-topbar h2 {
  max-width: 36ch;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
  font-weight: 500;
}

.progress-chip {
  background: rgba(255, 253, 250, 0.82);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .progress-chip {
  background: rgba(35, 32, 28, 0.84);
}

.progress-rail {
  height: 3px;
  margin: 0 auto 22px;
  background: rgba(190, 122, 79, 0.12);
}

.progress-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, white 12%), var(--accent-mid));
}

.question-card {
  padding: 40px clamp(24px, 4vw, 58px) 44px;
  border-radius: 30px;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(53, 38, 25, 0.07);
  backdrop-filter: blur(20px) saturate(108%);
}

html[data-theme="dark"] .question-card {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
}

.question-content {
  gap: 28px;
}

.question-content > * {
  width: min(100%, var(--docs-measure));
}

.question-content p {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: -0.01em;
}

.question-intro {
  gap: 16px;
  padding: 0;
}

.part-stack {
  gap: 18px;
}

.part-card {
  padding: 24px 24px 22px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper) 86%, transparent 14%);
  border: 1px solid var(--line);
  box-shadow: none;
}

.part-label {
  margin-bottom: 14px;
  color: var(--accent-mid);
}

.part-prompt {
  gap: 9px;
}

.choice-grid {
  gap: 10px;
}

.choice-button {
  padding: 16px 18px;
  border-radius: 16px;
  border-color: var(--line);
  background: rgba(255, 252, 247, 0.88);
  box-shadow: none;
}

html[data-theme="dark"] .choice-button {
  background: rgba(34, 31, 27, 0.9);
}

.choice-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--paper-strong) 42%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-strong) 72%);
}

.choice-button.selected {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--paper-strong) 30%);
  border-color: rgba(190, 122, 79, 0.3);
}

.choice-button.correct {
  background: rgba(76, 148, 118, 0.1);
  border-color: rgba(76, 148, 118, 0.28);
}

.choice-button.incorrect {
  background: rgba(196, 103, 69, 0.1);
  border-color: rgba(196, 103, 69, 0.28);
}

.choice-key {
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 999px;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.choice-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}

.feedback-panel {
  margin-top: 14px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 80%, transparent 20%);
  border-color: var(--line);
  box-shadow: none;
}

.feedback-line {
  font-size: 14px;
  line-height: 1.8;
}

.action-row,
.status-row {
  gap: 10px;
  margin-top: 18px;
}

.action-row button,
.status-row button {
  flex: 0 0 auto;
  min-width: 156px;
  padding: 13px 17px;
  border-radius: 999px;
  font-weight: 600;
}

.sync-pill,
.muted-chip,
.record-badge,
.feedback-badge,
.progress-chip {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.auth-overlay {
  background: rgba(18, 15, 12, 0.34);
}

.auth-card {
  width: min(100%, 470px);
  padding: 34px 34px 30px;
  border-radius: 26px;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(39, 28, 20, 0.12);
}

html[data-theme="dark"] .auth-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.auth-card h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 500;
}

@media (max-width: 1180px) {
  .hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .page-shell {
    padding: 18px 16px 36px;
  }

  .workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .docs-stage .stage-topbar,
  .docs-stage .progress-rail,
  .docs-stage .question-card,
  .docs-stage .action-row,
  .docs-stage .status-row {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .hero-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy,
  .docs-sidebar,
  .question-card,
  .auth-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .stage-topbar {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }

  .question-card {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .part-card {
    padding: 20px 18px 18px;
  }

  .action-row button,
  .status-row button {
    flex: 1 1 100%;
  }
}

/* REBOOT — major notebook redesign */
:root {
  --shell-max: 1680px;
  --sidebar-width: 320px;
  --rail-width: 296px;
  --content-width: 860px;
  --font-body: "Inter", sans-serif;
  --font-heading: "Plus Jakarta Sans", sans-serif;
}

html[data-theme="light"] {
  --bg: #f5f3ef;
  --paper: rgba(255, 255, 255, 0.74);
  --paper-strong: rgba(255, 255, 255, 0.92);
  --ink: #1f1b16;
  --muted: #72695d;
  --subtle: #d8d1c6;
  --line: rgba(37, 30, 23, 0.08);
  --line-strong: rgba(37, 30, 23, 0.16);
  --accent: #c98256;
  --accent-mid: #b26f48;
  --accent-soft: rgba(201, 130, 86, 0.12);
  --accent-glow: rgba(201, 130, 86, 0.2);
  --success: #4a9b7a;
  --success-soft: rgba(74, 155, 122, 0.14);
  --warm: #c66a43;
  --warm-soft: rgba(198, 106, 67, 0.14);
}

html[data-theme="dark"] {
  --bg: #0f0e0c;
  --paper: rgba(25, 23, 20, 0.88);
  --paper-strong: rgba(20, 19, 17, 0.96);
  --ink: #f4efe8;
  --muted: #aea496;
  --subtle: #373029;
  --line: rgba(244, 239, 232, 0.08);
  --line-strong: rgba(244, 239, 232, 0.15);
  --accent: #e09a68;
  --accent-mid: #c98256;
  --accent-soft: rgba(224, 154, 104, 0.14);
  --accent-glow: rgba(224, 154, 104, 0.18);
  --success: #6fbea1;
  --success-soft: rgba(111, 190, 161, 0.13);
  --warm: #e08b65;
  --warm-soft: rgba(224, 139, 101, 0.14);
}

body {
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 10% 0%, rgba(224, 154, 104, 0.09), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%) 0%, var(--bg) 100%);
}

body::before {
  opacity: 0.016;
}

body::after {
  display: none;
}

.page-shell.redesign-shell {
  max-width: var(--shell-max);
  padding: 22px 24px 36px;
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.masthead-copy {
  display: grid;
  gap: 12px;
  padding: 24px 28px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-strong) 88%, transparent 12%), color-mix(in srgb, var(--paper) 88%, transparent 12%)),
    linear-gradient(120deg, rgba(255,255,255,0.08), transparent 28%);
  box-shadow: 0 18px 50px rgba(28, 20, 14, 0.06);
}

html[data-theme="dark"] .masthead-copy {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.masthead h1,
.stage-topbar h2,
.auth-card h2,
.account-name,
.panel-block h2,
.stat-card strong {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.masthead h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(2rem, 3.7vw, 3.35rem);
  line-height: 0.98;
  color: var(--ink);
}

.hero-text {
  max-width: 58ch;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--muted);
}

.theme-toggle {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  color: var(--ink);
  box-shadow: none;
}

.theme-toggle:hover:not(:disabled) {
  box-shadow: none;
  border-color: var(--line-strong);
}

.masthead-stats.hero-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.stat-card {
  min-height: 108px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent 8%);
  box-shadow: none;
}

.stat-card strong {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.stat-label,
.eyebrow,
.current-badge,
.field-label,
.feedback-badge,
.sync-pill,
.muted-chip,
.record-badge,
.question-content .section-heading,
.part-label {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace.workspace-reboot {
  display: grid;
  grid-template-columns: minmax(280px, var(--sidebar-width)) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--paper) 90%, transparent 10%);
  box-shadow: 0 18px 50px rgba(28, 20, 14, 0.05);
  scrollbar-width: thin;
}

.docs-sidebar .panel-block {
  display: grid;
  gap: 10px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.docs-sidebar .panel-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.panel-heading {
  margin: 0;
}

.account-name {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.25;
}

.account-note,
.shortcut-note,
.record-meta,
.record-timestamp,
.part-hint,
.auth-text,
.auth-note,
.rail-copy {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.72;
  color: var(--muted);
}

input,
select {
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 88%, transparent 12%);
  color: var(--ink);
  box-shadow: none;
}

input:focus,
select:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-mid) 55%, var(--line) 45%);
}

.inline-field {
  grid-template-columns: 1fr auto;
}

.ghost-button,
.mini-button:not(.primary),
#jump-button,
.action-row button,
.status-row button {
  min-height: 44px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
  color: var(--ink);
  box-shadow: none;
}

.primary-button,
.mini-button.primary {
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 70%, black 30%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent-mid));
  color: #fffaf4;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent-glow) 90%, transparent 10%);
}

.ghost-button:hover:not(:disabled),
.action-row button:hover:not(:disabled),
.status-row button:hover:not(:disabled),
#jump-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: none;
}

.primary-button:hover:not(:disabled),
.mini-button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-glow) 95%, transparent 5%);
}

.question-list {
  gap: 6px;
  max-height: 280px;
}

.question-list-item {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.question-list-item:hover:not(.active),
.question-list-item.active {
  background: var(--accent-soft);
  border-color: transparent;
  box-shadow: none;
}

.record-list {
  gap: 8px;
}

.record-item,
.empty-records {
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 82%, transparent 18%);
}

.reboot-stage {
  display: grid;
  grid-template-columns: minmax(0, var(--content-width)) minmax(250px, var(--rail-width));
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.stage-main {
  min-width: 0;
}

.stage-rail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}

.rail-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper) 92%, transparent 8%);
}

.rail-card-actions {
  gap: 14px;
}

.stage-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.stage-topbar h2 {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.16;
  color: var(--ink);
}

.progress-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
  box-shadow: none;
}

.progress-rail {
  height: 4px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent 8%);
}

.progress-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, white 12%), var(--accent-mid));
  box-shadow: none;
}

.question-card {
  padding: 42px clamp(22px, 4vw, 54px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-strong) 94%, transparent 6%), color-mix(in srgb, var(--paper) 92%, transparent 8%)),
    linear-gradient(120deg, rgba(255,255,255,0.06), transparent 32%);
  box-shadow: 0 24px 70px rgba(32, 24, 18, 0.06);
  backdrop-filter: blur(16px) saturate(108%);
}

.question-content {
  gap: 30px;
}

.question-content > * {
  width: min(100%, 70ch);
}

.question-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: -0.01em;
}

.question-intro {
  display: grid;
  gap: 16px;
}

.part-stack {
  display: grid;
  gap: 18px;
}

.part-card {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 82%, transparent 18%);
  box-shadow: none;
}

.part-prompt {
  gap: 10px;
}

.choice-grid {
  gap: 10px;
}

.choice-button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  box-shadow: none;
}

.choice-button::before {
  display: none;
}

.choice-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--paper-strong) 36%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-strong) 72%);
}

.choice-button.selected {
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--paper-strong) 22%);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong) 60%);
}

.choice-button.correct {
  background: rgba(74, 155, 122, 0.12);
  border-color: rgba(74, 155, 122, 0.3);
}

.choice-button.incorrect {
  background: rgba(198, 106, 67, 0.12);
  border-color: rgba(198, 106, 67, 0.32);
}

.choice-key {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}

.choice-text {
  padding-top: 4px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.72;
  color: var(--ink);
}

.feedback-panel {
  margin-top: 14px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 84%, transparent 16%);
  box-shadow: none;
}

.feedback-panel.correct {
  background: color-mix(in srgb, var(--success-soft) 84%, var(--paper) 16%);
  border-color: rgba(74, 155, 122, 0.22);
}

.feedback-panel.incorrect {
  background: color-mix(in srgb, var(--warm-soft) 84%, var(--paper) 16%);
  border-color: rgba(198, 106, 67, 0.22);
}

.feedback-line {
  font-size: 0.92rem;
  line-height: 1.8;
}

.action-row,
.status-row {
  display: grid;
  gap: 8px;
  margin: 0;
}

.action-row button,
.status-row button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.status-button.mastered {
  background: rgba(74, 155, 122, 0.12);
  border-color: rgba(74, 155, 122, 0.22);
  color: color-mix(in srgb, var(--success) 90%, var(--ink) 10%);
}

.status-button.review {
  background: rgba(198, 106, 67, 0.1);
  border-color: rgba(198, 106, 67, 0.22);
  color: color-mix(in srgb, var(--warm) 90%, var(--ink) 10%);
}

.status-button.neutral {
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
}

.auth-overlay {
  background: rgba(15, 13, 10, 0.42);
  backdrop-filter: blur(18px);
}

.auth-card {
  width: min(100%, 440px);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper-strong) 96%, transparent 4%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.auth-card h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.14;
}

.sync-pill.success,
.record-badge.correct,
.feedback-badge.correct {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(74, 155, 122, 0.2);
}

.sync-pill.error,
.record-badge.incorrect,
.feedback-badge.incorrect {
  background: var(--warm-soft);
  color: var(--warm);
  border-color: rgba(198, 106, 67, 0.2);
}

@media (max-width: 1280px) {
  .masthead-stats.hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reboot-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-row,
  .status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .page-shell.redesign-shell {
    padding: 16px 14px 28px;
  }

  .workspace.workspace-reboot {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .masthead h1 {
    max-width: 14ch;
  }
}

@media (max-width: 720px) {
  .masthead-copy,
  .docs-sidebar,
  .question-card,
  .auth-card,
  .rail-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .masthead-stats.hero-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .stage-rail {
    grid-template-columns: 1fr;
  }

  .action-row,
  .status-row {
    grid-template-columns: 1fr;
  }

  .question-card {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* CLAUDE APP MODE — conversation workspace redesign */
:root {
  --shell-max: 1760px;
  --sidebar-width: 328px;
  --thread-width: 980px;
  --font-body: "Inter", sans-serif;
  --font-heading: "Plus Jakarta Sans", sans-serif;
}

html[data-theme="light"] {
  --bg: #f7f6f3;
  --paper: rgba(255, 255, 255, 0.84);
  --paper-strong: rgba(255, 255, 255, 0.96);
  --ink: #23201b;
  --muted: #746d64;
  --subtle: #ddd7cf;
  --line: rgba(38, 31, 24, 0.08);
  --line-strong: rgba(38, 31, 24, 0.16);
  --accent: #d6885c;
  --accent-mid: #be734c;
  --accent-soft: rgba(214, 136, 92, 0.12);
  --accent-glow: rgba(214, 136, 92, 0.2);
  --success: #4d9a7a;
  --success-soft: rgba(77, 154, 122, 0.12);
  --warm: #cb7550;
  --warm-soft: rgba(203, 117, 80, 0.12);
}

html[data-theme="dark"] {
  --bg: #11100e;
  --paper: rgba(26, 24, 21, 0.9);
  --paper-strong: rgba(20, 19, 17, 0.97);
  --ink: #f5efe8;
  --muted: #ada397;
  --subtle: #39322c;
  --line: rgba(245, 239, 232, 0.08);
  --line-strong: rgba(245, 239, 232, 0.14);
  --accent: #e29a69;
  --accent-mid: #ca8356;
  --accent-soft: rgba(226, 154, 105, 0.12);
  --accent-glow: rgba(226, 154, 105, 0.18);
  --success: #69bb9a;
  --success-soft: rgba(105, 187, 154, 0.12);
  --warm: #db8a63;
  --warm-soft: rgba(219, 138, 99, 0.12);
}

body {
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(226, 154, 105, 0.08), transparent 24%),
    radial-gradient(circle at 88% 0%, rgba(255,255,255,0.04), transparent 22%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%) 0%, var(--bg) 100%);
}

body::before {
  opacity: 0.014;
}

body::after {
  display: none;
}

.page-shell.claude-shell {
  max-width: var(--shell-max);
  padding: 18px 18px 28px;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 8px 10px 12px;
}

.app-branding {
  display: grid;
  gap: 2px;
}

.app-branding h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.28rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.app-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow,
.current-badge,
.field-label,
.feedback-badge,
.sync-pill,
.muted-chip,
.record-badge,
.question-content .section-heading,
.part-label,
.turn-label,
.stat-label {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.theme-toggle {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  box-shadow: none;
}

.theme-toggle:hover:not(:disabled) {
  box-shadow: none;
  border-color: var(--line-strong);
}

.app-layout {
  display: grid;
  grid-template-columns: minmax(294px, var(--sidebar-width)) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.claude-sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 92%, transparent 8%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.05);
  scrollbar-width: thin;
}

.claude-sidebar .panel-block {
  display: grid;
  gap: 10px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.claude-sidebar .panel-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.panel-block h2,
.account-name,
.stage-topbar h2,
.auth-card h2,
.stat-card strong {
  font-family: var(--font-heading);
}

.panel-block h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.panel-heading {
  margin: 0;
}

.overview-block {
  gap: 12px;
}

.hero-text,
.account-note,
.shortcut-note,
.record-meta,
.record-timestamp,
.part-hint,
.auth-text,
.auth-note,
.rail-copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--muted);
}

.overview-stats.hero-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.overview-stats .stat-card {
  min-height: 82px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  box-shadow: none;
}

.overview-stats .stat-card strong {
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.account-name {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.24;
}

input,
select {
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
  color: var(--ink);
  box-shadow: none;
}

input:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent-mid) 54%, var(--line) 46%);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.inline-field {
  grid-template-columns: 1fr auto;
}

.ghost-button,
.mini-button:not(.primary),
#jump-button,
.action-row button,
.status-row button {
  min-height: 42px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  color: var(--ink);
  box-shadow: none;
}

.primary-button,
.mini-button.primary {
  min-height: 44px;
  padding: 11px 15px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 70%, black 30%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, white 6%), var(--accent-mid));
  color: #fffaf4;
  box-shadow: 0 10px 24px var(--accent-glow);
}

.ghost-button:hover:not(:disabled),
.action-row button:hover:not(:disabled),
.status-row button:hover:not(:disabled),
#jump-button:hover:not(:disabled),
.theme-toggle:hover:not(:disabled) {
  transform: translateY(-1px);
}

.question-list {
  gap: 6px;
  max-height: 280px;
}

.question-list-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.question-list-item:hover:not(.active),
.question-list-item.active {
  background: var(--accent-soft);
  border-color: transparent;
}

.record-list {
  gap: 8px;
}

.record-item,
.empty-records {
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 82%, transparent 18%);
}

.claude-stage {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.thread-shell {
  width: min(100%, var(--thread-width));
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.thread-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.thread-toolbar h2 {
  margin: 0;
}

.stage-topbar,
.reboot-stage,
.stage-main,
.stage-rail,
.rail-card {
  all: unset;
}

.stage-topbar {
  display: contents;
}

.current-badge {
  color: var(--muted);
}

#current-title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.35vw, 2.2rem);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.progress-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
  box-shadow: none;
}

.progress-rail {
  height: 3px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent 8%);
}

.progress-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, white 12%), var(--accent-mid));
  box-shadow: none;
}

.conversation-thread {
  display: grid;
  gap: 16px;
}

.thread-turn {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.turn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 86%, transparent 14%);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}

.turn-card {
  border-radius: 22px;
  border: 1px solid var(--line);
}

.turn-card-system {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--paper) 90%, transparent 10%);
}

.turn-label {
  margin: 0;
  color: var(--muted);
}

.turn-card-question.question-card {
  padding: 34px clamp(18px, 4vw, 36px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-strong) 95%, transparent 5%), color-mix(in srgb, var(--paper) 92%, transparent 8%)),
    linear-gradient(120deg, rgba(255,255,255,0.05), transparent 32%);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px) saturate(106%);
}

html[data-theme="dark"] .turn-card-question.question-card {
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.24);
}

.question-content {
  gap: 28px;
}

.question-content > * {
  width: min(100%, 72ch);
}

.question-content p {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.88;
  letter-spacing: -0.01em;
}

.question-intro {
  display: grid;
  gap: 14px;
}

.part-stack {
  display: grid;
  gap: 16px;
}

.part-card {
  padding: 20px 20px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 80%, transparent 20%);
  box-shadow: none;
}

.part-label {
  color: var(--accent-mid);
}

.choice-grid {
  gap: 9px;
}

.choice-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
  box-shadow: none;
}

.choice-button::before {
  display: none;
}

.choice-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft) 66%, var(--paper-strong) 34%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-strong) 72%);
}

.choice-button.selected {
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--paper-strong) 22%);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong) 58%);
}

.choice-button.correct {
  background: var(--success-soft);
  border-color: rgba(77, 154, 122, 0.28);
}

.choice-button.incorrect {
  background: var(--warm-soft);
  border-color: rgba(203, 117, 80, 0.3);
}

.choice-key {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}

.choice-text {
  padding-top: 4px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.68;
  color: var(--ink);
}

.feedback-panel {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 84%, transparent 16%);
  box-shadow: none;
}

.feedback-panel.correct {
  background: color-mix(in srgb, var(--success-soft) 80%, var(--paper) 20%);
  border-color: rgba(77, 154, 122, 0.24);
}

.feedback-panel.incorrect {
  background: color-mix(in srgb, var(--warm-soft) 80%, var(--paper) 20%);
  border-color: rgba(203, 117, 80, 0.24);
}

.feedback-line {
  font-size: 0.91rem;
  line-height: 1.78;
}

.composer-card {
  position: sticky;
  bottom: 14px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper-strong) 92%, transparent 8%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] .composer-card {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
}

.action-row,
.status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.action-row button,
.status-row button {
  width: 100%;
  min-width: 0;
}

.status-button.mastered {
  background: var(--success-soft);
  border-color: rgba(77, 154, 122, 0.22);
  color: color-mix(in srgb, var(--success) 92%, var(--ink) 8%);
}

.status-button.review {
  background: var(--warm-soft);
  border-color: rgba(203, 117, 80, 0.22);
  color: color-mix(in srgb, var(--warm) 92%, var(--ink) 8%);
}

.status-button.neutral {
  background: color-mix(in srgb, var(--paper-strong) 84%, transparent 16%);
}

.auth-overlay {
  background: rgba(12, 10, 8, 0.42);
  backdrop-filter: blur(18px);
}

.auth-card {
  width: min(100%, 440px);
  padding: 30px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-strong) 96%, transparent 4%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

.auth-card h2 {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1.14;
  font-weight: 500;
}

.sync-pill.success,
.record-badge.correct,
.feedback-badge.correct {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(77, 154, 122, 0.2);
}

.sync-pill.error,
.record-badge.incorrect,
.feedback-badge.incorrect {
  background: var(--warm-soft);
  color: var(--warm);
  border-color: rgba(203, 117, 80, 0.2);
}

@media (max-width: 1180px) {
  .app-layout {
    grid-template-columns: 286px minmax(0, 1fr);
  }

  .overview-stats.hero-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .page-shell.claude-shell {
    padding: 14px 12px 22px;
  }

  .app-layout {
    grid-template-columns: 1fr;
  }

  .claude-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .thread-shell {
    width: 100%;
  }

  .composer-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .app-topbar {
    padding-inline: 4px;
  }

  .app-branding h1 {
    font-size: 1.1rem;
  }

  .overview-stats.hero-panel,
  .action-row,
  .status-row {
    grid-template-columns: 1fr;
  }

  .thread-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .thread-turn {
    grid-template-columns: 1fr;
  }

  .turn-avatar {
    display: none;
  }

  .turn-card-question.question-card {
    padding: 28px 18px;
  }

  .composer-card,
  .claude-sidebar,
  .auth-card {
    padding-left: 16px;
    padding-right: 16px;
  }
}