* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f5f6f0;
  --card: #ffffff;
  --ink: #1c221d;
  --muted: #6a7268;
  --accent: #2d6a4f;
  --accent-2: #40916c;
  --accent-weak: #e8f3ec;
  --sidebar-bg: #1a201b;
  --sidebar-text: #c8ccc6;
  --sidebar-active: #2d6a4f;
  --border: #e2e5dd;
  --error: #c0392b;
  --warn: #d48806;
  --mark: #fff3a0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
}

a { color: var(--accent); text-decoration: none; }

/* ---- Sidebar ---- */
#rail {
  width: 200px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
}

.brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-en {
  display: block;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--accent-2);
  margin-bottom: 2px;
}
.brand-cn {
  display: block;
  font-size: 13px;
  color: var(--sidebar-text);
  opacity: 0.7;
}

#nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#nav a svg { flex-shrink: 0; opacity: 0.7; }
#nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
#nav a.active { background: var(--sidebar-active); color: #fff; }
#nav a.active svg { opacity: 1; }

.rail-foot {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sidebar-text);
  opacity: 0.6;
}
.rail-foot svg { color: #e8a317; }

/* ---- Main ---- */
#main {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
  position: relative;
}

.view {
  display: none;
  padding: 24px 28px 48px;
  max-width: 1200px;
}
.view.active { display: block; }

/* ---- Page head ---- */
.page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
  transition: all 0.12s;
}
.btn-icon:hover { background: var(--accent-weak); color: var(--accent); }

.btn-warn {
  background: var(--error);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.btn-warn.confirm2-active {
  background: #8e2a20;
  animation: pulse 0.5s infinite alternate;
}
@keyframes pulse { to { opacity: 0.7; } }

/* ---- Toast ---- */
#toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #1a201b;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toastIn 0.25s;
}
.toast.error { background: var(--error); }
.toast.out { opacity: 0; transition: opacity 0.3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---- Home / Today ---- */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--accent) 0%, #1a4332 100%);
  color: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 20px;
}
.hero-left { display: flex; flex-direction: column; gap: 4px; }
.hero-streak {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  opacity: 0.85;
}
.hero-streak span { font-size: 32px; font-weight: 800; color: #fff; }
.hero-streak small { font-size: 13px; opacity: 0.7; }
.hero-date { font-size: 13px; opacity: 0.6; }

.hero-right { display: flex; }
.hero-action {
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 16px 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-action:hover { background: rgba(255,255,255,0.25); }
.ha-num { font-size: 28px; font-weight: 800; }
.ha-label { font-size: 13px; opacity: 0.8; }
.ha-btn {
  margin-top: 8px;
  display: inline-block;
  background: #fff;
  color: var(--accent);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.hero-action-empty { background: rgba(255,255,255,0.08); cursor: default; }
.hero-action-empty:hover { background: rgba(255,255,255,0.08); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stat-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.stat-value { font-size: 26px; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, transform 0.1s;
}
.quick-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.qc-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.qc-title svg { color: var(--accent); }
.qc-desc { font-size: 12px; color: var(--muted); }

/* ---- Review / Flashcards ---- */
.deck-bar { display: flex; gap: 10px; padding: 0 20px 12px; align-items: center; }
.deck-select { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--card); cursor: pointer; outline: none; }
.deck-select:focus { border-color: var(--accent); }

.review-summary {
  display: flex;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.rs-item { display: flex; flex-direction: column; }
.rs-num { font-size: 22px; font-weight: 700; }
.rs-lbl { font-size: 12px; color: var(--muted); }

.btn-start, .btn-create { margin-bottom: 16px; }

.empty-banner {
  background: var(--accent-weak);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: var(--accent);
  font-size: 14px;
  margin-bottom: 16px;
}

.add-words-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.add-words-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.add-words-bar input:focus { border-color: var(--accent); }

.daily-limit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.daily-limit-row input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.daily-limit-row input:focus { border-color: var(--accent); }

.word-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.wt-row {
  display: grid;
  grid-template-columns: 140px 1fr 100px 100px 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.wt-row:last-child { border-bottom: none; }
.wt-head {
  background: #f8f9f5;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}
.wt-word { font-weight: 600; font-family: Georgia, serif; }
.wt-def { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-actions { display: flex; gap: 4px; justify-content: flex-end; }

.stage-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.stage-0 { background: #e8f3ec; color: var(--accent); }
.stage-1 { background: #fff3cd; color: #856404; }
.stage-2 { background: #d1ecf1; color: #0c5460; }
.stage-3 { background: #cce5ff; color: #004085; }
.stage-4 { background: #e2d5f1; color: #6f42c1; }
.stage-5 { background: #d4edda; color: #155724; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty-state p { margin: 8px 0; }

/* ---- Flashcard review mode ---- */
.review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.review-progress { font-size: 14px; color: var(--muted); }
.review-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.rp-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

.flashcard {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: 20px;
  position: relative;
}
.flashcard:hover { border-color: var(--accent); }
.flashcard.flipped { border-color: var(--accent); }

.fc-face { text-align: center; padding: 30px; width: 100%; }
.fc-word {
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 12px;
}
.fc-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.fc-hint { font-size: 12px; color: var(--muted); opacity: 0.6; }
.fc-def { font-size: 15px; line-height: 1.8; margin-bottom: 16px; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; }
.fc-def-loading { color: var(--muted); font-style: italic; }
.fc-deeplink { margin-top: 8px; }

.rating-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.rate-btn {
  flex: 1;
  max-width: 140px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s;
}
.rate-btn span { font-size: 11px; color: var(--muted); font-weight: 400; }
.rate-btn:hover { transform: translateY(-2px); }
.rate-again { color: var(--error); border-color: var(--error); }
.rate-again:hover { background: #fceae8; }
.rate-hard { color: var(--warn); border-color: var(--warn); }
.rate-hard:hover { background: #fef5e7; }
.rate-good { color: var(--accent); border-color: var(--accent); }
.rate-good:hover { background: var(--accent-weak); }
.rate-easy { color: #155724; border-color: #155724; }
.rate-easy:hover { background: #d4edda; }

.flip-hint { text-align: center; color: var(--muted); font-size: 13px; padding: 12px; }
.review-done { text-align: center; padding: 40px; }
.review-done p { margin-bottom: 16px; font-size: 18px; }

/* ---- Vocab lookup ---- */
.vl-searchbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.vl-searchbar input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.vl-searchbar input:focus { border-color: var(--accent); }

.vl-hint { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.vl-example { color: var(--accent); cursor: pointer; border-bottom: 1px dashed currentColor; }

.vl-start { max-width: 700px; margin: 20px auto; }
.vl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.04);
}
.vl-start-card p { margin: 6px 0; font-size: 14px; color: var(--muted); }
.vl-start-card p b { color: var(--ink); }
.vl-start-card .t { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--ink); }

.vl-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.vl-card-label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); flex: none; }
.vl-card-sub { font-size: 11.5px; color: var(--muted); margin: -6px 0 12px; }
.vl-empty-note { color: var(--muted); font-size: 13.5px; padding: 4px 0; }
.vl-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef0f5 25%, #f8f9fc 50%, #eef0f5 75%); background-size: 200% 100%; animation: vlSh 1.2s infinite; margin: 9px 0; }
@keyframes vlSh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.vl-wordhead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}
.vl-the-word { font-family: Georgia, serif; font-size: 32px; font-weight: 700; }
.vl-wh-meta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.vl-phonetic { color: var(--muted); font-size: 15px; }
.vl-audio-btn { border: 1px solid var(--border); background: #fff; border-radius: 999px; width: 34px; height: 34px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.vl-audio-btn:hover { border-color: var(--accent); color: var(--accent); }
.vl-collected { font-size: 13px; color: var(--muted); }

.vl-single-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.vl-full { grid-column: 1 / -1; }

.vl-pos-group { margin-bottom: 14px; }
.vl-pos-group:last-child { margin-bottom: 0; }
.vl-pos-tag { display: inline-block; font-size: 11.5px; font-weight: 700; font-style: italic; color: var(--accent); background: var(--accent-weak); padding: 1px 9px; border-radius: 6px; margin-bottom: 6px; }
.vl-defs { list-style: disc; margin-left: 20px; }
.vl-defs li { margin: 7px 0; font-size: 14.5px; }
.vl-defs .vl-ex { display: block; color: var(--muted); font-size: 13px; font-style: italic; margin-top: 2px; }

.vl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-chip { padding: 3px 12px; background: #f3f4f6; border-radius: 999px; font-size: 13.5px; cursor: default; transition: background 0.12s; }
.vl-chip:hover { background: var(--accent-weak); color: var(--accent); }
.vl-chip .vl-pos { font-size: 10px; color: var(--muted); margin-left: 6px; text-transform: uppercase; }

.vl-coll-group { margin-bottom: 16px; }
.vl-coll-title { font-family: Georgia, serif; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.vl-coll-title .vl-slot { color: var(--accent); font-style: italic; }
.vl-gq { border-left: 3px solid var(--accent); padding: 8px 14px; margin-bottom: 12px; background: #fafbff; border-radius: 0 8px 8px 0; }
.vl-gq p { font-size: 14.5px; font-family: Georgia, serif; }
.vl-gq.mini p { font-size: 13px; }
.vl-gq .vl-src { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-gq .vl-src:hover { color: var(--accent); }
mark { background: linear-gradient(transparent 55%, var(--mark) 55%); padding: 0 1px; }

.vl-cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.vl-cmp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vl-cmp-word { font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.vl-cmp-sec { margin-top: 12px; }
.vl-lbl { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; }
.vl-minidef { font-size: 13px; margin: 4px 0; }
.vl-report-card { margin-top: 14px; }
.vl-report-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vl-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 6px 0; }
.vl-spin { width: 16px; height: 16px; border: 2.5px solid var(--accent-weak); border-top-color: var(--accent); border-radius: 50%; animation: vlRot 0.8s linear infinite; flex: none; }
@keyframes vlRot { to { transform: rotate(360deg); } }
.vl-md { font-size: 14.5px; overflow-wrap: break-word; }
.vl-md p { margin: 9px 0; }
.vl-md ul, .vl-md ol { margin: 9px 0 9px 22px; }
.vl-md li { margin: 4px 0; }
.vl-md h3, .vl-md h4, .vl-md h2 { margin: 18px 0 8px; }
.vl-md h2 { font-size: 20px; }
.vl-md h3 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.vl-md h4 { font-size: 15.5px; color: var(--accent); }
.vl-md code { background: #f3f4f6; padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.vl-md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13.5px; }
.vl-md th, .vl-md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.vl-md th { background: #f8f9fc; }
.vl-ai-empty { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.9; }
.vl-ai-error { padding: 18px 4px; color: var(--error); font-size: 14px; }
.vl-ai-error .vl-tip { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.vl-collected-tag { background: var(--accent-weak); color: var(--accent); font-size: 11px; }

/* ---- Exam ---- */
.exam-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  margin: -24px -28px 0;
  padding: 12px 28px;
}
.exam-title-top { font-size: 15px; font-weight: 600; flex: 1; }
.exam-timer { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.exam-timer.timer-warn { color: var(--warn); }
.exam-timer.timer-up { color: var(--error); }
.exam-timer.timer-practice { color: var(--muted); font-size: 14px; font-weight: 400; }
.btn-submit { font-size: 13px; padding: 7px 18px; }

.exam-split {
  display: flex;
  height: calc(100vh - 100px);
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.pdf-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.splitter {
  width: 6px;
  background: var(--border);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}
.splitter:hover, .splitter:active { background: var(--accent); }
.answer-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px;
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #f8f9f5;
}
.pdf-toolbar .pdf-spacer { flex: 1; }
#pdfPageInfo { font-size: 13px; color: var(--muted); min-width: 60px; text-align: center; }
#pdfZoomInfo { font-size: 12px; color: var(--muted); min-width: 40px; }

.pdf-viewer {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: #e8e8e8;
  display: flex;
  justify-content: center;
}
.pdf-loading, .pdf-missing, .pdf-error {
  text-align: center;
  color: var(--muted);
  padding: 40px;
  align-self: center;
}
.pdf-canvas-wrap { display: flex; flex-direction: column; gap: 8px; }
.pdf-canvas-wrap.double { flex-direction: row; gap: 4px; }
.pdf-canvas {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: #fff;
}

/* Answer sheet */
.as-section { margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.as-section:last-child { border-bottom: none; }
.as-section-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--accent); }
.as-group { margin-bottom: 14px; }
.as-group-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.as-questions { display: flex; flex-wrap: wrap; gap: 10px; }
.as-q { display: flex; align-items: center; gap: 4px; }
.as-qnum { font-size: 13px; font-weight: 600; min-width: 24px; }
.as-opts { display: flex; gap: 3px; }
.as-opt {
  border: 1.5px solid var(--border);
  background: var(--card);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.as-opt:hover { border-color: var(--accent); }
.as-opt.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.as-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.8;
}
.as-textarea:focus { border-color: var(--accent); }
.word-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }

/* Answer overview */
.overview-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 20px 0 8px; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 4px; margin-bottom: 8px; }
.ov-cell {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #f0f0ed;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.1s;
}
.ov-cell.ov-done { background: var(--accent); color: #fff; }
.ov-cell:hover { transform: scale(1.15); }
.overview-summary { font-size: 12px; color: var(--muted); }

/* Audio player */
.audio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8f9f5;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 16px;
}
.audio-play-btn { background: var(--accent); color: #fff; border: none; padding: 7px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.audio-play-btn:hover { background: var(--accent-2); }
.audio-progress { flex: 1; height: 6px; background: var(--border); border-radius: 3px; cursor: pointer; position: relative; }
.audio-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width 0.2s; }
.audio-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audio-missing { color: var(--error); font-size: 13px; padding: 8px; }

/* New exam form */
.form-card {
  max-width: 600px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.form-card label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
.form-card input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.form-card input[type="text"]:focus { border-color: var(--accent); }
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--card);
  cursor: pointer;
}
.form-select:focus { border-color: var(--accent); }
.mode-select { display: flex; flex-direction: column; gap: 8px; }
.mode-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; transition: border-color 0.15s; }
.mode-option:hover { border-color: var(--accent); }
.mode-option input { margin-top: 4px; }
.mode-option span { display: flex; flex-direction: column; gap: 2px; }
.mode-option b { font-size: 14px; }
.mode-option small { font-size: 12px; color: var(--muted); }

.file-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.file-drop:hover { border-color: var(--accent); color: var(--accent); }
.file-drop.drag-over { border-color: var(--accent); background: var(--accent-weak); }
.file-name { font-size: 13px; color: var(--accent); margin-top: 6px; }
.btn-create-exam { margin-top: 20px; }

/* Exam list */
.btn-create { margin-bottom: 16px; }
.exam-list { display: flex; flex-direction: column; gap: 10px; }
.exam-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.exam-item:hover { border-color: var(--accent); }
.ei-main { flex: 1; }
.ei-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ei-meta { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.ei-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.exam-status { font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.status-progress { background: #fff3cd; color: #856404; }
.status-grading { background: #cce5ff; color: #004085; }
.status-done { background: #d4edda; color: #155724; }
.exam-score { font-size: 16px; font-weight: 700; color: var(--accent); }

/* Grading */
.grading-score {
  display: flex;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
}
.gs-correct { color: var(--accent); font-weight: 700; font-size: 16px; }
.gs-wrong { color: var(--error); font-weight: 700; font-size: 16px; }
.gs-remain { color: var(--muted); font-size: 14px; }
.grading-hint { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.grading-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.gr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.gr-qnum { font-weight: 700; min-width: 30px; }
.gr-your { font-size: 13px; flex: 1; }
.gr-your b { color: var(--ink); }
.gr-btns { display: flex; gap: 6px; }
.gr-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.12s;
}
.gr-btn:hover { transform: scale(1.05); }
.gr-correct.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gr-wrong.active { background: var(--error); color: #fff; border-color: var(--error); }
.btn-finish-grading { margin-top: 8px; }

/* Review */
.review-score-bar {
  display: flex;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.rsb-item { font-size: 14px; color: var(--muted); }
.rsb-item b { font-size: 20px; color: var(--ink); margin-right: 4px; }
.rsb-percent { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--accent); }
.review-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.review-answers { }
.review-text {
  background: #f8f9f5;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  margin-bottom: 8px;
}
.review-empty { color: var(--muted); font-style: italic; }
.review-q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
}
.rq-num { font-weight: 700; min-width: 28px; }
.rq-ans { flex: 1; }
.rq-grade { font-weight: 700; }
.rv-correct { background: var(--accent-weak); }
.rv-correct .rq-grade { color: var(--accent); }
.rv-wrong { background: #fceae8; }
.rv-wrong .rq-grade { color: var(--error); }

/* ---- Mistakes ---- */
.mistake-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.ms-item { font-size: 13px; color: var(--muted); }
.ms-unreviewed { color: var(--warn); font-weight: 600; }
.ms-reviewed { color: var(--accent); }
.mistake-list { display: flex; flex-direction: column; gap: 16px; }
.mistake-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mg-title { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--border); background: #f8f9f5; }
.mg-items { display: flex; flex-direction: column; }
.mk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.mk-item:last-child { border-bottom: none; }
.mk-item:hover { background: #f8f9f5; }
.mk-item.reviewed { opacity: 0.55; }
.mk-qnum { font-weight: 600; min-width: 70px; }
.mk-section { font-size: 12px; color: var(--muted); min-width: 120px; }
.mk-ans { flex: 1; font-size: 13px; color: var(--muted); }
.mk-actions { display: flex; gap: 4px; }

/* ---- Data & Settings ---- */
.data-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.data-danger-zone { border-color: var(--error); }
.ds-title { padding: 14px 18px; font-weight: 700; border-bottom: 1px solid var(--border); }
.data-danger-zone .ds-title { color: var(--error); }
.ds-body { padding: 18px; }
.ds-body label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.key-input-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.key-input-row input:focus { border-color: var(--accent); }
.ds-tip { font-size: 12.5px; color: var(--muted); margin: 6px 0; line-height: 1.6; }
.data-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dstat-item { text-align: center; padding: 12px; background: #f8f9f5; border-radius: 8px; }
.dstat-val { display: block; font-size: 22px; font-weight: 700; }
.dstat-lbl { font-size: 12px; color: var(--muted); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5c8c0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a5a8a0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  #rail { width: 56px; }
  .brand-cn, .rail-foot span { display: none; }
  #nav a { justify-content: center; padding: 12px; }
  #nav a span { display: none; }
  .view { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: 1fr; }
  .exam-split { flex-direction: column; height: auto; }
  .pdf-panel, .answer-panel { width: 100% !important; }
  .splitter { display: none; }
}