:root {
  --card: #e7dbbf;
  --ring: #9db18c;
  --input: #dbc894;
  --muted: #decea0;
  --accent: #dbc894;
  --border: #b19681;
  --radius: 0.425rem;
  --chart-1: #9db18c;
  --chart-2: #8a9f7b;
  --chart-3: #bac9b4;
  --chart-4: #71856a;
  --chart-5: #5e6e58;
  --popover: #f3ead2;
  --primary: #8d9d4f;
  --sidebar: #e2d1a2;
  --font-mono: JetBrains Mono, Consolas, monospace;
  --font-sans: Merriweather, Georgia, serif;
  --secondary: #decea0;
  --background: #e4d7b0;
  --font-serif: Source Serif 4, Georgia, serif;
  --foreground: #5c4b3e;
  --destructive: #d98b7e;
  --shadow-blur: 2px;
  --shadow-color: hsl(88 22% 35% / 0.15);
  --sidebar-ring: #9db18c;
  --shadow-spread: 0px;
  --shadow-opacity: 0.15;
  --sidebar-accent: #eae5d9;
  --sidebar-border: #e5e0d4;
  --card-foreground: #5c4b3e;
  --shadow-offset-x: 3px;
  --shadow-offset-y: 3px;
  --sidebar-primary: #9db18c;
  --muted-foreground: #85766a;
  --accent-foreground: #5c4b3e;
  --popover-foreground: #5c4b3e;
  --primary-foreground: #fdfbf6;
  --sidebar-foreground: #5c4b3e;
  --secondary-foreground: #5c4b3e;
  --destructive-foreground: #faf8f2;
  --sidebar-accent-foreground: #5c4b3e;
  --sidebar-primary-foreground: #fdfbf6;
}

.dark {
  --card: #413c33;
  --ring: #8a9f7b;
  --input: #5a5345;
  --muted: #4a4439;
  --accent: #a18f5c;
  --border: #5a5345;
  --chart-1: #8a9f7b;
  --chart-2: #9db18c;
  --chart-3: #71856a;
  --chart-4: #a18f5c;
  --chart-5: #5e6e58;
  --popover: #413c33;
  --primary: #8a9f7b;
  --sidebar: #3a3529;
  --secondary: #5a5345;
  --background: #3a3529;
  --foreground: #ede4d4;
  --destructive: #b5766a;
  --sidebar-ring: #8a9f7b;
  --sidebar-accent: #a18f5c;
  --sidebar-border: #5a5345;
  --card-foreground: #ede4d4;
  --sidebar-primary: #8a9f7b;
  --muted-foreground: #a8a096;
  --accent-foreground: #2a2521;
  --popover-foreground: #ede4d4;
  --primary-foreground: #2a2521;
  --sidebar-foreground: #ede4d4;
  --secondary-foreground: #ede4d4;
  --destructive-foreground: #f0e9db;
  --sidebar-accent-foreground: #2a2521;
  --sidebar-primary-foreground: #2a2521;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground);
  padding: 0 12px;
}

.hidden {
  display: none !important;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card,
.question-card,
.study-panel,
.settings-card,
.item-card,
.progress-summary,
.chapter-row {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

.login-card {
  width: min(420px, 100%);
  padding: 28px;
}

.login-card h1,
.topbar h2,
.section-header h2,
.settings-card h2 {
  margin: 0 0 18px;
}

.login-card label {
  display: block;
  margin-bottom: 8px;
}

.login-card button {
  width: 100%;
  margin-top: 14px;
}

.form-error,
.status-message {
  color: var(--destructive);
}

.app-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
  font-family: var(--font-mono);
  font-weight: 700;
}

.brand small,
.muted-text,
.eyebrow,
.question-meta,
.stat-grid span,
.panel-block p {
  color: var(--muted-foreground);
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item,
.ghost-button,
.secondary-button,
.icon-button {
  background: transparent;
  color: var(--foreground);
}

.nav-item {
  text-align: left;
  padding: 0 12px;
  box-shadow: none;
}

.nav-item.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.ghost-button {
  margin-top: auto;
  box-shadow: none;
}

.main-area {
  padding: 24px;
  min-width: 0;
}

.topbar,
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.icon-button {
  width: 42px;
  padding: 0;
}

.status-message {
  background: var(--popover);
  border: 1px solid var(--destructive);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.quiz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.question-card {
  padding: 22px;
}

.quiz-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 180px;
}

.segmented-control button {
  border: 0;
  border-radius: 0;
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: none;
}

.segmented-control button.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

#questionText {
  margin: 14px 0 20px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.45;
}

.options-list {
  display: grid;
  gap: 10px;
}

.option-button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: none;
  padding: 10px 12px;
}

.option-button.selected {
  border-color: var(--ring);
  background: var(--accent);
  color: var(--accent-foreground);
}

.option-button.correct {
  border-color: var(--chart-4);
  background: var(--chart-1);
  color: var(--primary-foreground);
}

.option-button.incorrect {
  border-color: var(--destructive);
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.option-key {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
}

.feedback-panel {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--popover);
  border: 1px solid var(--border);
}

.feedback-panel.good {
  border-color: var(--chart-4);
}

.feedback-panel.bad {
  border-color: var(--destructive);
}

.quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.study-panel {
  padding: 16px;
  position: sticky;
  top: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat-grid div {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.stat-grid strong {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 1.35rem;
}

.panel-block {
  margin-top: 16px;
}

.panel-block h3 {
  margin: 0 0 8px;
}

.chapter-mini-progress,
.chapter-progress,
.item-list {
  display: grid;
  gap: 10px;
}

.mini-row,
.chapter-row {
  display: grid;
  gap: 6px;
}

.mini-row {
  font-size: 0.86rem;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--chart-1);
}

.item-card,
.chapter-row,
.settings-card {
  padding: 16px;
}

.item-card h3 {
  margin: 0 0 8px;
}

.item-card footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.progress-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.progress-summary div {
  border-right: 1px solid var(--border);
}

.progress-summary div:last-child {
  border-right: 0;
}

.progress-summary strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.45rem;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.toggle-row input {
  width: 20px;
  min-height: 20px;
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .nav-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-item {
    text-align: center;
    padding: 0 6px;
  }

  .ghost-button {
    display: none;
  }

  .main-area {
    padding: 14px;
  }

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

  .study-panel {
    position: static;
  }

  .quiz-toolbar {
    display: grid;
  }

  .progress-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .brand small {
    display: none;
  }

  .topbar {
    align-items: start;
  }

  .question-card {
    padding: 16px;
  }

  .quiz-actions {
    position: sticky;
    bottom: 0;
    background: var(--background);
    padding: 10px 0 0;
  }
}