:root{
  --ground:#EEF1EC; --surface:#FFFFFF; --sunk:#E3E8E1; --ink:#15201A; --muted:#5F6B64; --faint:#98A39C;
  --line:#D5DCD4; --accent:#0E6A55; --accent-soft:#D6EAE2; --accent-ink:#FFFFFF;
  --warn:#B4661A; --warn-soft:#F6E7D6; --bad:#B0413E;
  --s-money:#B8861B; --s-health:#3F8A57; --s-family:#C0566A; --s-growth:#5760BF;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Onest", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}
:root[data-theme="dark"]{
  --ground:#0F1412; --surface:#171D1A; --sunk:#1F2622; --ink:#E6ECE8; --muted:#9AA7A0; --faint:#66726B;
  --line:#2A332E; --accent:#46B795; --accent-soft:#183A30; --accent-ink:#08130F;
  --warn:#E0A05A; --warn-soft:#3A2A18; --bad:#E07A76;
  --s-money:#D9A83E; --s-health:#62B47C; --s-family:#E07D90; --s-growth:#8C93E8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
.app{max-width:480px;margin:0 auto;padding-inline:16px;padding-block:16px calc(92px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:20px}
.loading,.error{color:var(--muted);text-align:center;padding-block:40px}
.error b{display:block;color:var(--ink);margin-bottom:6px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.12;margin:4px 0 0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
h2 span{letter-spacing:0;text-transform:none;font-weight:500;font-variant-numeric:tabular-nums}
.meter{display:flex;align-items:center;gap:8px;flex-shrink:0}
.meter svg{display:block}
.meter b{font-family:var(--display);font-size:15px;display:block;line-height:1;white-space:nowrap}
.meter small{font-size:11px;color:var(--muted);display:block;line-height:1.2}
.focus{background:var(--accent);color:var(--accent-ink);border-radius:18px;padding:14px 16px;display:grid;gap:4px}
.focus .eyebrow{color:inherit;opacity:.78}
.focus p{margin:0;font-weight:600;font-size:16px;text-wrap:balance}
.card-note{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--muted)}
.card-note b{color:var(--ink);font-size:15px;display:block;margin-bottom:4px}
.card-note code{font-family:var(--body);font-weight:600;color:var(--accent)}
.list{display:flex;flex-direction:column;gap:8px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 10px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start}
.row > *{min-width:0}
.row.noc{grid-template-columns:1fr;padding-left:14px}
.check{grid-row:span 4;width:28px;height:28px;border-radius:50%;border:2px solid var(--faint);background:transparent;cursor:pointer;display:grid;place-items:center;margin-top:0;color:var(--accent-ink);padding:0}
.check svg{opacity:0}
.check:focus-visible,.tab:focus-visible,.rung summary:focus-visible,.day:focus-visible,.nav:focus-visible,.mday:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row.done .check{background:var(--accent);border-color:var(--accent)} .row.done .check svg{opacity:1}
.row.not_done .check{border-color:var(--bad);color:var(--bad)}
.row.done .title{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--muted)}
.title{font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.time{font-family:var(--display);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.why{font-size:13px;color:var(--muted)}
.why b{font-weight:600;color:var(--ink)}
.why.none{color:var(--warn)}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.chip{font-size:11.5px;border-radius:999px;padding:2px 9px;background:var(--sunk);color:var(--muted);display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.goal{background:var(--accent-soft);color:var(--accent)}
.chip.off{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--warn-soft);color:var(--bad);white-space:normal;border-radius:10px}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;background:var(--faint)}
.money{background:var(--s-money)} .health{background:var(--s-health)} .family{background:var(--s-family)} .growth{background:var(--s-growth)}
.hint{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);padding:2px}
.hint svg{flex-shrink:0;color:var(--accent)}
.empty{font-size:14px;color:var(--muted);background:var(--sunk);border-radius:12px;padding:12px 14px}
/* календарь */
.weekhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{border:none;background:transparent;border-radius:12px;padding:8px 0 7px;display:grid;justify-items:center;gap:3px;cursor:pointer}
.day small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.day b{font-family:var(--display);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.day .marks{display:flex;gap:3px;height:6px}
.day .marks i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.day[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.day[aria-pressed="true"] small{color:inherit;opacity:.8}
.day[aria-pressed="true"] .marks i{background:var(--accent-ink)}
.day.today b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-variant-numeric:tabular-nums;text-align:center;font-size:13px}
.month .h{font-size:11px;color:var(--faint);padding-bottom:4px}
.mday{border:none;background:transparent;padding:7px 0;border-radius:8px;position:relative;color:var(--muted);cursor:pointer;font-size:13px}
.mday.has{color:var(--ink);font-weight:600}
.mday.has::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.mday.cur{background:var(--accent-soft);color:var(--accent);font-weight:600}
.mday.sel{outline:2px solid var(--accent);outline-offset:-2px}
/* цели */
.ladder{display:flex;flex-direction:column}
.rung{position:relative;padding-left:26px;padding-bottom:10px}
.rung::before{content:"";position:absolute;left:7px;top:16px;bottom:-4px;width:2px;background:var(--line)}
.rung:last-child::before{display:none}
.rung::after{content:"";position:absolute;left:1px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--accent)}
.rung.now::after{background:var(--accent)}
.rung.empty-rung::after{border-color:var(--faint)}
.rung details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.rung.empty-rung details{background:transparent;border-style:dashed}
.rung summary{list-style:none;cursor:pointer;padding:10px 12px;display:grid;gap:2px}
.rung summary::-webkit-details-marker{display:none}
.lvl{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.lvl em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;text-align:right}
.rung .head{font-weight:600;text-wrap:balance}
.rung .head.muted{color:var(--faint);font-weight:500}
.rung .body{padding:0 12px 12px;display:grid;gap:10px;font-size:13.5px}
.g-item{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline}
.g-item > *{min-width:0}
.g-item .dot{margin-top:6px}
.g-item b{font-weight:600}
.g-item small{grid-column:2;color:var(--muted);font-size:12px}
.bar{grid-column:2;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;gap:5px;align-items:center}
/* путь */
.big{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.big b{font-family:var(--display);font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.big b span{font-size:16px;color:var(--muted)}
.big p{margin:0;font-size:13px;color:var(--muted)}
.big p strong{color:var(--ink);font-weight:600;display:block;font-size:15px}
.grid30{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.cell{aspect-ratio:1;border-radius:6px;background:var(--sunk);display:grid;grid-template-rows:1fr 1fr;overflow:hidden;max-width:100%}
.cell i.on:first-child{background:var(--accent)} .cell i.on:last-child{background:var(--accent);opacity:.55}
.cell.future{background:transparent;border:1px dashed var(--line)}
.cell.today{outline:2px solid var(--accent);outline-offset:1px}
.caption{font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.caption i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);margin-right:5px;vertical-align:-1px}
.caption i.half{opacity:.55}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-family:var(--body);font-size:11px}
/* вкладки */
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs div{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tab{border:none;background:transparent;color:var(--muted);font-size:11.5px;font-weight:500;display:grid;justify-items:center;gap:3px;padding:6px 0;border-radius:10px;cursor:pointer}
.tab svg{width:22px;height:22px}
.tab[aria-selected="true"]{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.check,.day,.mday{transition:background-color .15s,border-color .15s,color .15s}}