@font-face {
  font-family: 'system';
  src: local('system-ui');
}

:root {
  --ink: #1B2430;
  --paper: #F4EFE6;
  --paper-dim: #EAE3D4;
  --road: #1B3A5C;
  --road-dark: #12283F;
  --rust: #C1440E;
  --rust-dark: #9C360A;
  --gold: #D9A441;
  --green: #2F6B4F;
  --line-yellow: #E8B93A;
  --card-radius: 3px;
  --shadow: 0 2px 0 rgba(27,36,48,0.15);
  font-size: 17px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
}

body {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(27,36,48,0.035) 38px 40px);
}

#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--road);
  color: var(--paper);
  padding: 18px 20px 22px;
  position: relative;
  overflow: hidden;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-yellow) 0 26px, transparent 26px 46px);
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-btn {
  background: none;
  border: 2px solid rgba(244,239,230,0.4);
  color: var(--paper);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.back-btn:active { background: rgba(244,239,230,0.15); }
.topbar h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: 0.2px;
}
.topbar .subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: rgba(244,239,230,0.75);
}

/* ---------- Content ---------- */
main {
  flex: 1;
  padding: 20px 18px 60px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 22px;
}
.stat-tile {
  background: var(--paper-dim);
  border: 1px solid rgba(27,36,48,0.1);
  border-radius: var(--card-radius);
  padding: 12px 10px;
  text-align: center;
}
.stat-tile .num {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--road);
  display: block;
}
.stat-tile .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6255;
}

.mock-exam-card {
  background: var(--rust);
  color: var(--paper);
  border-radius: var(--card-radius);
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mock-exam-card:active { background: var(--rust-dark); }
.mock-exam-card .octagon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--rust);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.65rem;
}
.mock-exam-card .txt h3 { margin: 0 0 2px; font-size: 1.05rem; }
.mock-exam-card .txt p { margin: 0; font-size: 0.82rem; color: rgba(244,239,230,0.85); }

.section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a7060;
  margin: 0 0 10px 2px;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chapter-card {
  background: #fff;
  border: 1px solid rgba(27,36,48,0.1);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.chapter-card:active { background: #faf8f3; }
.chapter-num {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--road);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
}
.chapter-info { flex: 1; min-width: 0; }
.chapter-info h3 { margin: 0 0 3px; font-size: 1rem; }
.chapter-info p { margin: 0 0 8px; font-size: 0.82rem; color: #6b6255; }
.progress-track {
  height: 6px;
  background: var(--paper-dim);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 4px;
  transition: width 0.3s;
}
.chapter-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--road);
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}

/* ---------- Chapter view tabs ---------- */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.tab-btn {
  flex: 1;
  padding: 10px;
  background: var(--paper-dim);
  border: none;
  border-radius: var(--card-radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b6255;
  cursor: pointer;
}
.tab-btn.active {
  background: var(--road);
  color: var(--paper);
}

.lesson-card {
  background: #fff;
  border: 1px solid rgba(27,36,48,0.1);
  border-left: 4px solid var(--gold);
  border-radius: var(--card-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.lesson-card h3 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--road);
}
.lesson-card ul {
  margin: 0;
  padding-left: 20px;
}
.lesson-card li {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 0.94rem;
}
.lesson-card li:last-child { margin-bottom: 0; }

.start-quiz-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--road);
  color: var(--paper);
  border: none;
  border-radius: var(--card-radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.start-quiz-btn:active { background: var(--road-dark); }

/* ---------- Quiz ---------- */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: #6b6255;
}
.quiz-progress .track {
  flex: 1;
  height: 6px;
  background: var(--paper-dim);
  border-radius: 4px;
  overflow: hidden;
}
.quiz-progress .fill {
  height: 100%;
  background: var(--gold);
}

.question-card {
  background: #fff;
  border: 1px solid rgba(27,36,48,0.1);
  border-radius: var(--card-radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.question-card .qtext {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 18px;
  line-height: 1.4;
}
.option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--paper-dim);
  border: 2px solid transparent;
  border-radius: var(--card-radius);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ink);
}
.option:active { background: #e0d8c6; }
.option.correct {
  background: rgba(47,107,79,0.15);
  border-color: var(--green);
}
.option.incorrect {
  background: rgba(193,68,14,0.12);
  border-color: var(--rust);
}
.option[disabled] { cursor: default; }

.explain-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--card-radius);
  font-size: 0.9rem;
  line-height: 1.5;
}
.explain-box.correct { background: rgba(47,107,79,0.1); color: #1d4a35; }
.explain-box.incorrect { background: rgba(193,68,14,0.08); color: #7a2d0a; }
.explain-box .verdict { font-weight: 700; display: block; margin-bottom: 4px; }

.next-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: var(--road);
  color: var(--paper);
  border: none;
  border-radius: var(--card-radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Results ---------- */
.results-card {
  text-align: center;
  padding: 30px 20px;
}
.results-card .score-circle {
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 8px solid var(--road);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.results-card .score-circle .n { font-size: 2rem; font-weight: 800; font-family: Georgia, serif; color: var(--road); }
.results-card .score-circle .d { font-size: 0.75rem; color: #6b6255; }
.results-card h2 { margin: 0 0 6px; font-family: Georgia, serif; }
.results-card p { color: #6b6255; margin: 0 0 20px; }
.weak-list { text-align: left; margin: 20px 0; }
.weak-list .weak-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--paper-dim);
  border-radius: var(--card-radius);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.btn-row { display: flex; gap: 10px; }
.btn-secondary {
  flex: 1;
  padding: 13px;
  background: #fff;
  border: 2px solid var(--road);
  color: var(--road);
  border-radius: var(--card-radius);
  font-weight: 700;
  cursor: pointer;
}
.btn-primary {
  flex: 1;
  padding: 13px;
  background: var(--road);
  border: none;
  color: var(--paper);
  border-radius: var(--card-radius);
  font-weight: 700;
  cursor: pointer;
}

.footer-note {
  text-align: center;
  font-size: 0.75rem;
  color: #9a9080;
  padding: 20px 30px 6px;
  line-height: 1.5;
}

.install-hint {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: rgba(217,164,65,0.18);
  border: 1px solid rgba(217,164,65,0.45);
  border-radius: var(--card-radius);
  font-size: 0.82rem;
  line-height: 1.5;
  display: none;
}
.install-hint.show { display: block; }
.install-hint button {
  background: var(--gold);
  border: none;
  padding: 7px 12px;
  border-radius: var(--card-radius);
  font-weight: 700;
  margin-top: 8px;
  cursor: pointer;
}

@media (min-width: 480px) {
  :root { font-size: 16px; }
}

/* v2 dashboard */
.readiness-card{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#fff;border:1px solid rgba(27,36,48,.1);border-left:5px solid var(--gold);padding:16px;margin:4px 0 10px;box-shadow:var(--shadow)}
.readiness-card.ready{border-left-color:var(--green)}.readiness-card h2{margin:2px 0 5px;font-family:Georgia,serif;color:var(--road);font-size:1.2rem}.readiness-card p{margin:0;font-size:.82rem;color:#6b6255;line-height:1.4}.eyebrow{font-size:.7rem;letter-spacing:.08em;color:#7a7060;font-weight:700}.readiness-score{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:var(--road);white-space:nowrap}
.check-list{background:rgba(255,255,255,.55);border:1px solid rgba(27,36,48,.08);padding:10px 12px;margin-bottom:16px}.check-item{font-size:.82rem;color:#6b6255;padding:5px 0;display:flex;gap:8px}.check-item.ok{color:var(--green);font-weight:600}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.test-card{border:1px solid rgba(27,36,48,.12);background:#fff;color:var(--ink);text-align:left;padding:14px;border-radius:var(--card-radius);box-shadow:var(--shadow);cursor:pointer;min-height:88px}.test-card.primary{background:var(--rust);color:var(--paper)}.test-card strong{display:block;font-size:.92rem;margin-bottom:5px}.test-card span{display:block;font-size:.76rem;line-height:1.35;opacity:.8}
.history-list{background:#fff;border:1px solid rgba(27,36,48,.1);margin-bottom:22px}.history-list div{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(27,36,48,.08);font-size:.82rem}.history-list div:last-child{border-bottom:0}.pass{color:var(--green)}.fail{color:var(--rust)}
.done-badge{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.62rem;background:rgba(47,107,79,.12);color:var(--green);padding:2px 5px;border-radius:10px;vertical-align:middle;white-space:nowrap}.study-btn{display:block;width:100%;padding:12px;margin:2px 0 10px;background:#fff;border:2px solid var(--green);color:var(--green);font-weight:700;cursor:pointer}.study-btn.completed{background:rgba(47,107,79,.1)}
.backup-label{margin-top:24px}.backup-row{display:flex;gap:10px}.backup-row>*{flex:1}.file-btn{display:flex!important;align-items:center;justify-content:center;cursor:pointer}.file-btn input{display:none}.link-btn{background:none;border:0;color:#7a7060;text-decoration:underline;cursor:pointer;font-size:.75rem;margin-top:8px}
@media(max-width:520px){.test-grid{grid-template-columns:1fr}.readiness-card{align-items:flex-start}.backup-row{flex-direction:column}}