/* ===== Reset & base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0c10;
  --bg-elev: #14161c;
  --bg-elev-2: #1c1f27;
  --border: #262a35;
  --text: #f1f3f7;
  --text-dim: #9ba1ac;
  --text-faint: #5f6571;
  --accent: #ffd166;
  --accent-2: #66e0c6;
  --danger: #ef6f6c;
  --good: #66e0c6;
  --warn: #ffb86b;
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 44px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafbfc;
    --bg-elev: #ffffff;
    --bg-elev-2: #f0f2f5;
    --border: #e3e6ec;
    --text: #1a1d24;
    --text-dim: #5f6571;
    --text-faint: #9ba1ac;
  }
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior-y: contain; }

#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ===== Views ===== */
.view { display: none; padding: 0 16px; }
.view.active { display: block; }
.view-session.active { padding: 0 16px 24px; }

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; gap: 12px;
  background: var(--bg);
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.icon-btn {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-size: 20px;
  border-radius: 50%;
  text-decoration: none;
}
.icon-btn:hover { background: var(--bg-elev); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); }

/* ===== Hero (home) ===== */
.hero { padding: 8px 0 16px; }
.hero-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.streak .flame { font-size: 20px; }
.streak-label { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.phase-pill {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px; color: var(--text-dim);
}
.hero-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.today-meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 14px;
}
.today-meta .day-num { color: var(--text); font-weight: 600; }
.today-meta .dot { color: var(--text-faint); }
.today-topic { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.today-prep { color: var(--text-dim); font-size: 14px; }
.btn-primary {
  height: var(--tap);
  padding: 0 20px;
  background: var(--accent);
  color: #1a1d24;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.btn-primary.big { height: 52px; font-size: 17px; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  height: var(--tap); padding: 0 16px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 500; cursor: pointer;
}
.btn-ghost.danger { color: var(--danger); border-color: rgba(239,111,108,0.3); }

/* ===== Quick stats ===== */
.quick-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 16px 0;
}
.stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.stat-num { font-size: 22px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.section-title {
  font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 18px 0 10px; font-weight: 600;
}
.phrase-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.phrase-list li {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.phrase-list .ph { font-weight: 600; }
.phrase-list .meaning { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.markers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 24px;
}
.marker {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
}
.marker.met { background: var(--bg-elev-2); border-color: var(--accent-2); }
.marker .num { font-size: 16px; font-weight: 700; }
.marker .label { font-size: 11px; color: var(--text-dim); }

/* ===== Stage progress ===== */
.stage-progress {
  display: flex; gap: 6px; flex: 1; justify-content: center;
}
.stage-step {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev); color: var(--text-faint);
  border-radius: 50%; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
}
.stage-step.active { background: var(--accent); color: #1a1d24; border-color: var(--accent); }
.stage-step.done { background: var(--accent-2); color: #1a1d24; border-color: var(--accent-2); }

/* ===== Stages (session view) ===== */
.session-body { padding-top: 8px; }
.stage { display: none; min-height: 60vh; flex-direction: column; }
.stage.active { display: flex; }
.stage-title {
  font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  margin: 8px 0 16px;
}
.stage-actions {
  margin-top: auto;
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 16px;
}
.stage-actions .btn-primary { flex: 1; min-width: 140px; }

/* ===== Quiz ===== */
.quiz-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
}
.quiz-instruction {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.45;
}
.quiz-instruction .label {
  display: block;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 4px;
}
.quiz-instruction .why {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.quiz-prompt { font-size: 17px; line-height: 1.4; margin-bottom: 12px; font-weight: 500; }
.quiz-prompt .ko {
  color: var(--text);
  font-size: 18px;
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.4;
}
.quiz-prompt .meta {
  color: var(--text-dim);
  font-size: 13px;
  display: block;
  margin-top: 4px;
}
.quiz-prompt .phrase-hint {
  display: inline-block;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  color: var(--accent-2);
  margin-top: 6px;
  font-weight: 500;
}
.quiz-input { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.quiz-input.compose textarea {
  width: 100%; min-height: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 12px;
  font: inherit; resize: vertical;
}
.quiz-input.tokens .pool, .quiz-input.tokens .answer {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 40px;
  width: 100%;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px dashed var(--border);
}
.quiz-input.tokens .answer { border-style: solid; margin-bottom: 8px; }
.token {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.token:active { transform: scale(0.97); }
.quiz-input.choice .opts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.opt {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit; color: var(--text);
}
.opt.selected { border-color: var(--accent); background: var(--bg-elev-2); }
.opt.correct { border-color: var(--good); background: rgba(102,224,198,0.12); }
.opt.incorrect { border-color: var(--danger); background: rgba(239,111,108,0.12); }
.quiz-feedback {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  background: var(--bg);
  display: none;
}
.quiz-feedback.shown { display: block; }
.quiz-feedback .verdict {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.quiz-feedback.correct { border-left-color: var(--good); }
.quiz-feedback.correct .verdict { background: rgba(102,224,198,0.15); color: var(--good); }
.quiz-feedback.partial { border-left-color: var(--warn); }
.quiz-feedback.partial .verdict { background: rgba(255,184,107,0.15); color: var(--warn); }
.quiz-feedback.wrong { border-left-color: var(--danger); }
.quiz-feedback.wrong .verdict { background: rgba(239,111,108,0.15); color: var(--danger); }
.quiz-feedback .note { display: block; margin-bottom: 4px; }
.quiz-feedback .hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.quiz-feedback .your-answer {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.quiz-feedback .your-answer .label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
.quiz-reveal {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  animation: fadeIn 0.2s ease;
}
.quiz-reveal .label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
}
.quiz-reveal .answer { color: var(--good); font-weight: 600; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Seed ===== */
.seed-topic { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.seed-helper { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.seed-phrases-title {
  font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 16px 0 8px; font-weight: 600;
}
.seed-phrases { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.seed-phrases li {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 15px;
}
.seed-phrases li .hint { color: var(--text-dim); font-size: 13px; margin-top: 2px; }

/* ===== Speaking ===== */
.conv {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
  max-height: 50vh; overflow-y: auto;
}
.bubble { padding: 10px 14px; border-radius: 14px; max-width: 85%; line-height: 1.4; font-size: 15px; }
.bubble.ai { background: var(--bg-elev); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me { background: var(--accent); color: #1a1d24; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.placeholder { background: var(--bg-elev-2); color: var(--text-dim); font-style: italic; }
.bubble .play-btn {
  margin-top: 4px;
  background: transparent; border: none; padding: 0;
  color: inherit; opacity: 0.7; cursor: pointer; font-size: 13px;
}

.hint-card {
  background: linear-gradient(135deg, rgba(255,209,102,0.07), rgba(102,224,198,0.05));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  animation: fadeIn 0.25s ease;
}
.hint-card .hint-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.hint-card .hint-label {
  font-size: 12px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em;
}
.hint-close {
  width: 28px; height: 28px;
  background: transparent; border: none; color: var(--text-faint);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.hint-sample {
  font-size: 16px; line-height: 1.55; color: var(--text);
  font-weight: 500; margin-bottom: 8px;
}
.hint-translation {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.5; margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.hint-highlights {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.hint-highlights li {
  font-size: 13px; color: var(--text-dim);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.hint-highlights li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-size: 11px;
  top: 2px;
}
.hint-actions {
  display: flex; gap: 8px;
}
.btn-ghost.small {
  height: 32px; padding: 0 12px; font-size: 13px;
}

.mic-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 16px 0;
}
.mic-btn {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1d24;
  border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(255,209,102,0.25);
}
.mic-btn.recording {
  background: var(--danger); color: #fff;
  box-shadow: 0 0 0 8px rgba(239,111,108,0.18), 0 0 0 16px rgba(239,111,108,0.08);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(239,111,108,0.18), 0 0 0 16px rgba(239,111,108,0.08); }
  50% { box-shadow: 0 0 0 14px rgba(239,111,108,0.10), 0 0 0 24px rgba(239,111,108,0.04); }
}
.mic-btn:active { transform: scale(0.96); }
.mic-icon { font-size: 30px; }
.mic-label { font-size: 12px; font-weight: 600; }
.live-text {
  min-height: 24px; color: var(--text-dim);
  font-size: 14px; text-align: center; font-style: italic;
}

/* ===== Feedback ===== */
.scores {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.score-cell {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 8px; text-align: center;
}
.score-cell .v { font-size: 22px; font-weight: 700; }
.score-cell .n { font-size: 11px; color: var(--text-dim); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.score-cell .v.high { color: var(--good); }
.score-cell .v.mid { color: var(--warn); }
.score-cell .v.low { color: var(--danger); }
.feedback-section { margin-bottom: 16px; }
.fb-title {
  font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  margin-bottom: 8px;
}
.fb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fb-list li {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px;
}
.fb-list li .strike { color: var(--danger); text-decoration: line-through; }
.fb-list li .arrow { color: var(--text-faint); margin: 0 6px; }
.fb-list li .right { color: var(--good); font-weight: 600; }
.fb-list li .note { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.fb-rephrase, .fb-text {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  line-height: 1.6;
}
.fb-rephrase .lbl { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.fb-rephrase .original { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.fb-rephrase .upgraded { color: var(--text); }

/* ===== Mission ===== */
.mission-prompt {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
  font-size: 16px; line-height: 1.5;
}
.mission-prompt .label {
  font-size: 13px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 6px;
}
.mission-input-area textarea {
  width: 100%; min-height: 140px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text);
  font: inherit; resize: vertical;
}
.mission-input-area .voice-control {
  display: flex; gap: 10px; align-items: center; padding: 12px 0;
}
.mission-result {
  margin-top: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: none;
}
.mission-result.shown { display: block; }
.mission-result .header { font-weight: 600; margin-bottom: 6px; }

/* ===== Wrap ===== */
.wrap-summary {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.wrap-summary .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.wrap-summary .row .k { color: var(--text-dim); }
.phrase-capture { margin-bottom: 16px; }
.capture-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.capture-item {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.capture-item.kept { border-color: var(--accent-2); background: var(--bg-elev-2); }
.capture-item .check { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.capture-item.kept .check { background: var(--accent-2); border-color: var(--accent-2); color: #1a1d24; }
.save-status { margin-top: 12px; font-size: 14px; color: var(--text-dim); text-align: center; }
.save-status.ok { color: var(--good); }
.save-status.bad { color: var(--danger); }

/* ===== Bottom nav ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  background: rgba(11,12,16,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
@media (prefers-color-scheme: light) {
  .bottom-nav { background: rgba(250,251,252,0.92); }
}
.nav-btn {
  flex: 1; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; background: transparent; border: none;
  color: var(--text-faint); font-size: 11px; font-weight: 500;
  cursor: pointer;
}
.nav-btn.active { color: var(--text); }
.nav-btn .nav-icon { font-size: 22px; }

/* ===== Phrases view ===== */
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px; }
.chip {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; color: var(--text-dim);
  cursor: pointer; font: inherit;
}
.chip.active { background: var(--accent); color: #1a1d24; border-color: var(--accent); font-weight: 600; }
.phrase-grid {
  list-style: none; display: grid; grid-template-columns: 1fr;
  gap: 8px;
}
.phrase-grid .pcard {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.phrase-grid .pcard .ph { font-weight: 600; font-size: 16px; }
.phrase-grid .pcard .meaning { color: var(--text-dim); font-size: 14px; margin: 2px 0 6px; }
.phrase-grid .pcard .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.phrase-grid .pcard .meta .tag {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; color: var(--text-dim);
}
.phrase-grid .pcard .meta .tag.mastery-Mastered { color: var(--good); border-color: rgba(102,224,198,0.3); }
.phrase-grid .pcard .meta .tag.mastery-New { color: var(--accent); border-color: rgba(255,209,102,0.3); }

/* ===== Notes view (오답노트) ===== */
.notes-summary {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--text-dim);
}
.notes-summary .num { color: var(--text); font-weight: 700; font-size: 20px; }
.notes-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.note-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.note-card .note-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-dim);
}
.note-card .note-head .type-tag {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
  color: var(--text);
}
.note-card .note-head .streak-tag { color: var(--text-faint); }
.note-card .note-prompt { font-size: 14px; line-height: 1.5; color: var(--text); }
.note-card .note-prompt .ko { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }
.note-card .note-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.note-card .note-row .label {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.note-card .note-row .your { color: var(--danger); text-decoration: line-through; }
.note-card .note-row .right { color: var(--good); font-weight: 600; }
.note-card .note-actions { display: flex; gap: 8px; margin-top: 4px; }
.note-card .note-actions .btn-ghost.small {
  flex: 1;
}
.notes-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-faint); font-size: 14px; line-height: 1.6;
}
.notes-empty .big { font-size: 32px; display: block; margin-bottom: 8px; }

/* ===== Stats view ===== */
.kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 8px 0 16px;
}
.kpi {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 10px; text-align: center;
}
.kpi-num { font-size: 26px; font-weight: 700; }
.kpi-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.chart-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.chart-title { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.sparkline { width: 100%; height: 80px; }
.sparkline svg { width: 100%; height: 100%; }
.phase-progress { padding: 8px 0 16px; }
.phase-bar {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px;
}
.phase-bar .head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.phase-bar .head .name { font-weight: 600; }
.phase-bar .head .frac { color: var(--text-dim); }
.phase-bar .track { height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; }
.phase-bar .fill { height: 100%; background: var(--accent-2); transition: width 0.3s; }

/* ===== Settings ===== */
.settings-body { padding: 12px 0 24px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.field input, .field select {
  height: var(--tap);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px; color: var(--text);
  font: inherit;
}
.field.switch-row { flex-direction: row; align-items: center; justify-content: space-between; }
.field.switch-row input[type=checkbox] { width: 22px; height: 22px; }
.settings-status { font-size: 14px; color: var(--text-dim); text-align: center; }
.settings-status.ok { color: var(--good); }
.footnote { font-size: 12px; color: var(--text-faint); line-height: 1.5; padding: 12px 0; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Misc utilities ===== */
[hidden] { display: none !important; }