/* Дизайн-правило из game-mechanics.md §6: «взрослый по умолчанию» -
   профессиональный тон, игровой слой как приправа. Палитра Hair Spy: крем/зелёный/коралл. */
:root {
  --bg: #F7F2EA;        /* крем */
  --ink: #1F3A2E;       /* тёмно-зелёный */
  --accent: #D9714A;    /* коралл */
  --card: #FFFFFF;
  --muted: #7A8A80;
  --done: #2E7D5B;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
  padding: 16px; max-width: 480px; margin: 0 auto;
}
.loading, .error { padding: 40px 12px; text-align: center; color: var(--muted); }
h1 { font-size: 20px; margin-bottom: 4px; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.goal {
  background: var(--card); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
}
.goal .lock { color: var(--muted); font-size: 12px; }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 20px 0 8px; }

/* Карта пути (G3) */
.path { display: flex; flex-direction: column; gap: 6px; }
.step {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 12px; padding: 12px 14px;
}
.step.locked { opacity: .45; }
.step .dot {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--muted); font-size: 13px; color: var(--muted);
}
.step.done .dot { background: var(--done); border-color: var(--done); color: #fff; }
.step.current .dot { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.step .info { flex: 1; }
.step .title { font-size: 15px; font-weight: 600; }
.step .meta { font-size: 12px; color: var(--muted); }

/* Трек дохода (G1) */
.track { background: var(--card); border-radius: 12px; padding: 14px; }
.rung { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #E5DED2; }
.rung:last-child { border-bottom: none; }
.rung .marker { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin-top: 5px; flex: none; }
.rung.reached .marker { background: var(--done); }
.rung.next .marker { background: var(--accent); }
.rung .label { font-size: 14px; font-weight: 600; }
.rung .money { font-size: 14px; color: var(--accent); font-weight: 700; }
.rung .bio, .rung .note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.disclaimer { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* Бейджи и разблокировки (G4) */
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  background: var(--card); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; border: 1px solid #E5DED2;
}
.unlock { display: flex; gap: 8px; align-items: center; background: var(--card);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; font-size: 14px; }
.unlock.off { opacity: .45; }