:root {
  --ink: #17201d;
  --muted: #63706b;
  --surface: #ffffff;
  --canvas: #f5f7f6;
  --line: #dce3df;
  --primary: #08765b;
  --primary-dark: #065944;
  --accent: #f0b323;
  --danger: #c83b3b;
  --success-soft: #e9f7f1;
  --danger-soft: #fff0f0;
}

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0;
}
a { color: var(--primary); }
.btn { border-radius: 6px; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}
.app-navbar {
  min-height: 64px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.navbar-brand { color: var(--ink); font-size: 1rem; font-weight: 700; }
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: white;
  background: var(--primary);
  border-radius: 6px;
  font-size: 1.2rem;
}
.nav-link { color: #34413c; font-weight: 500; }
.nav-link:hover { color: var(--primary); }
.message-stack { position: relative; z-index: 20; padding-top: 1rem; }
.alert { border-radius: 6px; }
.app-footer {
  padding: 24px 0;
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.dashboard-header {
  color: #fff;
  background:
    linear-gradient(110deg, rgba(6, 65, 50, .97), rgba(8, 118, 91, .88)),
    repeating-linear-gradient(45deg, #075e49 0, #075e49 16px, #086b52 16px, #086b52 32px);
  border-bottom: 5px solid var(--accent);
}
.section-kicker {
  color: #b7dacf;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.container > .section-kicker,
.page-heading .section-kicker,
.section-heading .section-kicker,
.auth-panel .section-kicker { color: var(--primary); }
.display-title {
  max-width: 720px;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.12;
}
.lead-copy { max-width: 680px; color: #dbece6; }
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.28);
}
.stat-strip div { padding: 20px 12px; text-align: center; }
.stat-strip div + div { border-left: 1px solid rgba(255,255,255,.22); }
.stat-strip strong { display: block; font-size: 1.65rem; }
.stat-strip span { color: #cee5dc; font-size: .8rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.section-heading h2 { margin: 4px 0 0; font-size: 1.65rem; font-weight: 750; }
.action-card {
  display: grid;
  min-height: 170px;
  padding: 24px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.action-card:hover {
  color: var(--ink);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(23, 32, 29, .08);
  transform: translateY(-2px);
}
.action-card i { color: var(--primary); font-size: 1.6rem; }
.action-card strong { align-self: end; font-size: 1.08rem; }
.action-card span { color: var(--muted); font-size: .88rem; }
.learning-band { background: #eaf0ed; border-top: 1px solid var(--line); }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); }
.metric-row div { padding: 22px; }
.metric-row div + div { border-left: 1px solid var(--line); }
.metric-row span { display: block; color: var(--muted); font-size: .82rem; }
.metric-row strong { font-size: 1.7rem; }
.exam-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  color: var(--ink);
  border-bottom: 1px solid #cfd9d4;
  text-decoration: none;
}
.exam-row:hover { color: var(--primary); }
.empty-note { color: var(--muted); }
.page-heading { padding: 44px 0 32px; background: #fff; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: 8px 0; font-size: 2rem; font-weight: 750; }
.page-heading p { margin: 0; color: var(--muted); }
.content-stack { padding-top: 32px; padding-bottom: 56px; }
.tool-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.tool-section-title { display: flex; align-items: flex-start; gap: 16px; }
.tool-section-title > i {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--primary);
  background: #e1f0eb;
  border-radius: 6px;
  font-size: 1.25rem;
}
.tool-section h2 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; }
.tool-section p { margin: 0; color: var(--muted); }
.saved-progress-list {
  width: min(100%, 560px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.saved-progress-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.saved-progress-link:last-child { border-bottom: 0; }
.saved-progress-link:hover { color: var(--primary); background: #f2f8f5; }
.saved-progress-link small { display: block; margin-top: 3px; color: var(--muted); }
.chapter-list { width: min(100%, 620px); background: #fff; border: 1px solid var(--line); }
.chapter-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.chapter-progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.chapter-progress-item:last-child { border-bottom: 0; }
.chapter-progress-item small { display: block; margin-top: 4px; color: var(--muted); }
.chapter-progress-item a { display: inline-flex; padding: 5px 9px; border: 1px solid; }
.dashboard-card {
  height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.history-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.history-summary-row:last-child { border-bottom: 0; }
.question-tools {
  margin-top: 12px;
}
.feedback-controls { min-width: min(100%, 300px); }
.question-tools .form-select { min-width: 0; width: auto; }
.question-tools small { min-height: 20px; color: var(--muted); }
.question-tools .active { color: #8a5a00; background: #fff4c9; }
.chapter-list a:last-child { border-bottom: 0; }
.chapter-list a:hover { background: #f2f8f5; color: var(--primary); }
.practice-shell { max-width: 900px; padding-top: 42px; padding-bottom: 70px; }
.practice-shell.is-memorize { max-width: 1240px; }
.practice-shell.is-memorize .practice-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: start;
}
.directory-toggle { display: none; margin-top: 18px; }
.memorize-directory {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  margin-top: 24px;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.directory-heading h2 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 750; }
.directory-heading > span { color: var(--muted); font-size: .78rem; }
.directory-legend {
  display: flex;
  gap: 14px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: .74rem;
}
.directory-legend .bi-check-circle-fill { color: var(--primary); }
.directory-legend .bi-arrow-repeat { color: var(--danger); }
.directory-group + .directory-group { margin-top: 18px; }
.directory-group h3 {
  margin: 0 0 7px;
  color: #50615b;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.45;
}
.directory-question {
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  padding: 9px 8px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
}
.directory-question:hover { background: #f0f6f3; }
.directory-question.is-current {
  color: var(--primary-dark);
  background: #e5f3ee;
  box-shadow: inset 3px 0 var(--primary);
}
.directory-number {
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.directory-title {
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.directory-question .bi { color: #a8b3af; font-size: .78rem; text-align: center; }
.directory-question.is-memorized .bi { color: var(--primary); }
.directory-question.needs-review .bi { color: var(--danger); }
.directory-empty { margin: 24px 0 8px; color: var(--muted); text-align: center; }
.practice-meta { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.practice-meta strong { display: block; margin-top: 4px; }
.practice-meta > span { color: var(--muted); font-size: .88rem; }
.practice-meta-right { display: grid; justify-items: end; gap: 3px; color: var(--muted); font-size: .88rem; }
.practice-meta-right small { color: #7a8782; font-size: .72rem; }
.progress { height: 5px; border-radius: 0; }
.progress-bar { background: var(--primary); }
.question-panel { margin-top: 24px; padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.question-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.question-tags span, .tag {
  padding: 4px 8px;
  color: #426158;
  background: #eaf2ef;
  border-radius: 4px;
  font-size: .76rem;
}
.question-panel h1 { margin: 20px 0 28px; font-size: 1.35rem; line-height: 1.65; font-weight: 700; }
.question-instruction {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .86rem;
}
.question-instruction i { color: var(--primary); }
.answer-list { display: grid; gap: 12px; margin-bottom: 28px; }
.answer-option {
  display: grid;
  grid-template-columns: 24px 34px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.answer-option:hover { border-color: #8ca89f; }
.answer-option input { width: 18px; height: 18px; accent-color: var(--primary); }
.option-key { font-weight: 750; }
.answer-option.is-correct { background: var(--success-soft); border-color: #61a98e; }
.answer-option.is-wrong { background: var(--danger-soft); border-color: #d87b7b; }
.is-submitting .answer-list { pointer-events: none; }
.is-submitting .answer-option { cursor: wait; opacity: .72; }
.answer-result { margin-top: 28px; padding: 22px; border-left: 4px solid; }
.result-correct { background: var(--success-soft); border-color: var(--primary); }
.result-wrong { background: var(--danger-soft); border-color: var(--danger); }
.answer-result h2 { margin: 0 0 12px; font-size: 1.2rem; }
.answer-result h3 { margin-top: 20px; font-size: 1rem; }
.result-answers { display: flex; flex-wrap: wrap; gap: 20px; }
.answer-result p { color: #3d4d47; }
.article-note { margin-bottom: 0; font-size: .88rem; }
.memorize-result { background: #eef7f4; border-color: var(--primary); }
.memorize-actions {
  margin-top: 24px;
  padding: 20px;
  text-align: center;
  background: #fffaf0;
  border: 1px solid #ead59b;
  border-radius: 8px;
}
.memorize-actions p { margin: 0 0 14px; color: var(--muted); }
.memorize-actions > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.question-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.floating-next {
  position: fixed;
  z-index: 1020;
  right: 0;
  bottom: 18px;
  left: 0;
  width: min(calc(100% - 32px), 860px);
  margin: 0 auto;
  padding: 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(23, 32, 29, .18);
  backdrop-filter: blur(8px);
}
.question-panel:has(.floating-next:not([hidden])) { padding-bottom: 108px; }
.completion-panel { max-width: 720px; padding-top: 100px; padding-bottom: 120px; text-align: center; }
.completion-inline { padding: 76px 24px 96px; text-align: center; }
.completion-inline h1 { margin: 8px 0 12px; font-weight: 750; }
.completion-inline > p { color: var(--muted); }
.completion-sync { min-height: 24px; font-size: .84rem; }
.completion-icon { display: block; margin-bottom: 14px; color: var(--primary); font-size: 4rem; }
.completion-panel h1 { margin: 8px 0 12px; font-weight: 750; }
.completion-panel p { color: var(--muted); }
.mistake-table { background: #fff; border: 1px solid var(--line); }
.mistake-row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 22px; padding: 24px; border-bottom: 1px solid var(--line); }
.mistake-row:last-child { border-bottom: 0; }
.mistake-count { text-align: center; border-right: 1px solid var(--line); }
.mistake-count strong { display: block; color: var(--danger); font-size: 1.5rem; }
.mistake-count span { color: var(--muted); font-size: .72rem; }
.mistake-content h2 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.55; }
.mistake-content p { margin: 0; color: var(--muted); font-size: .85rem; }
.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.icon-button.active { color: #a36b00; background: #fff7dd; border-color: #efce70; }
.empty-state { padding: 70px 24px; text-align: center; }
.empty-state i { color: var(--primary); font-size: 3rem; }
.empty-state h2, .empty-state h3 { margin-top: 12px; }
.empty-state p { color: var(--muted); }
.exam-config { display: flex; flex-wrap: wrap; align-items: end; gap: 32px 54px; padding: 32px 0 42px; border-bottom: 1px solid var(--line); }
.exam-config fieldset { border: 0; padding: 0; }
.exam-config legend { margin-bottom: 10px; font-size: .88rem; font-weight: 700; }
.segmented-control { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented-control label { margin: 0; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; }
.segmented-control span { display: block; padding: 10px 18px; border-right: 1px solid var(--line); }
.segmented-control label:last-child span { border-right: 0; }
.segmented-control input:checked + span { color: #fff; background: var(--primary); }
.history-section { padding-top: 36px; }
.history-section h2, .weak-section h2, .review-section > h2 { margin-bottom: 18px; font-size: 1.25rem; }
.history-list { background: #fff; border: 1px solid var(--line); }
.history-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.history-list a:last-child { border-bottom: 0; }
.history-list small { display: block; margin-top: 2px; color: var(--muted); }
.history-list .score { color: var(--primary); font-size: 1.25rem; font-weight: 750; }
.exam-toolbar { top: 64px; z-index: 9; padding: 13px 0; background: #fff; border-bottom: 1px solid var(--line); }
.exam-toolbar span { margin-left: 10px; color: var(--muted); font-size: .82rem; }
.timer { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.timer strong { font-size: 1.2rem; }
.timer.urgent { color: var(--danger); }
.exam-paper { max-width: 960px; padding-top: 26px; padding-bottom: 100px; }
.exam-question { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.question-number { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--primary); border-radius: 6px; font-weight: 700; }
.exam-question h2 { margin: 10px 0 20px; font-size: 1.1rem; line-height: 1.6; }
.answer-list.compact { margin-bottom: 0; }
.answer-list.compact .answer-option { min-height: 50px; background: #fff; }
.submit-exam-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; }
.submit-exam-bar span { color: var(--muted); }
.result-hero { padding: 56px 0; color: #fff; text-align: center; background: #08634d; border-bottom: 5px solid var(--accent); }
.result-hero .section-kicker { color: #b7dacf; }
.score-display { font-size: 4.8rem; line-height: 1.1; font-weight: 800; }
.score-display small { margin-left: 6px; font-size: 1.1rem; }
.result-hero p { color: #d8ebe4; }
.weak-section { margin-bottom: 40px; }
.weak-list { display: flex; flex-wrap: wrap; gap: 10px; }
.weak-list span { padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.weak-list strong { margin-left: 8px; color: var(--danger); }
.review-item { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.review-number { color: var(--danger); font-size: 1.25rem; font-weight: 750; }
.review-item h3 { margin: 12px 0; font-size: 1.08rem; line-height: 1.55; }
.answer-comparison { color: var(--muted); }
.answer-comparison span { margin-left: 18px; }
.review-analysis { padding: 14px 16px; background: #fff; border-left: 3px solid var(--primary); }
.auth-section { min-height: calc(100vh - 130px); padding: 70px 0; }
.auth-panel { width: min(100%, 440px); margin: 0 auto; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.form-control { border-radius: 6px; }
.practice-loading {
  display: grid;
  min-height: calc(100vh - 130px);
  place-items: center;
  padding: 48px 0;
}
.loading-panel {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 42px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.loading-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 1.7rem;
}
.loading-panel h1 { margin: 8px 0; font-size: 1.65rem; font-weight: 750; }
.loading-panel > p { color: var(--muted); }
.loading-progress {
  height: 10px;
  margin: 26px 0 10px;
  overflow: hidden;
  background: #e4ebe8;
  border-radius: 5px;
}
.loading-progress > div {
  height: 100%;
  background: var(--primary);
  border-radius: 5px;
  transition: width .18s ease;
}
.loading-progress > div.is-error { background: var(--danger); }
.loading-panel > strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.loading-error { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.loading-error p { color: var(--danger); }

@media (max-width: 767.98px) {
  .dashboard-header .container { padding-top: 38px !important; padding-bottom: 38px !important; }
  .display-title { font-size: 2.15rem; }
  .stat-strip { margin-top: 12px; }
  .tool-section { align-items: flex-start; flex-direction: column; }
  .saved-progress-list { width: 100%; }
  .saved-progress-link { align-items: flex-start; flex-direction: column; }
  .chapter-list { width: 100%; }
  .chapter-progress-item { align-items: flex-start; flex-direction: column; }
  .feedback-controls { flex-basis: 100%; }
  .question-tools .form-select { width: 100%; }
  .question-panel { padding: 22px 18px; }
  .question-panel:has(.floating-next:not([hidden])) { padding-bottom: 96px; }
  .floating-next {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 20px);
    padding: 10px;
  }
  .floating-next .btn { width: 100%; }
  .memorize-actions > div { flex-direction: column-reverse; }
  .memorize-actions .btn { width: 100%; }
  .practice-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .practice-meta-right { justify-items: start; }
  .metric-row { grid-template-columns: 1fr; }
  .metric-row div + div { border-left: 0; border-top: 1px solid var(--line); }
  .mistake-row { grid-template-columns: 58px 1fr 40px; gap: 12px; padding: 18px 12px; }
  .mistake-count { padding-right: 8px; }
  .exam-config { align-items: stretch; flex-direction: column; gap: 24px; }
  .segmented-control { display: flex; width: 100%; }
  .segmented-control label { flex: 1; text-align: center; }
  .segmented-control span { padding: 10px 8px; }
  .exam-toolbar { top: 64px; }
  .exam-toolbar .container > div:first-child span { display: none; }
  .exam-question { grid-template-columns: 34px 1fr; gap: 10px; }
  .question-number { width: 32px; height: 32px; }
  .answer-option { grid-template-columns: 22px 28px 1fr; padding: 11px 10px; }
  .submit-exam-bar { align-items: stretch; flex-direction: column; }
  .answer-comparison span { display: block; margin: 6px 0 0; }
  .loading-panel { padding: 30px 20px; }
}

@media (max-width: 991.98px) {
  .practice-shell.is-memorize { max-width: 900px; }
  .practice-shell.is-memorize .practice-content {
    display: flex;
    flex-direction: column;
  }
  .practice-shell.is-memorize .directory-toggle { display: block; }
  .memorize-directory {
    position: static;
    display: none;
    max-height: 60vh;
    margin-top: 12px;
  }
  .memorize-directory.is-open {
    display: block;
    order: -1;
  }
}