:root{color-scheme:light;--bg: #f6f7f9;--surface: #ffffff;--surface-2: #eef0f3;--text: #16181d;--muted: #6b7280;--border: #e2e5ea;--accent: #2563eb;--accent-soft: #dbeafe;--track: #e5e7eb;--done: #16a34a;--shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #0f1115;--surface: #171a21;--surface-2: #1f232c;--text: #e8eaee;--muted: #9aa1ad;--border: #2a2f3a;--accent: #60a5fa;--accent-soft: #1e3a5f;--track: #2a2f3a;--done: #4ade80;--shadow: none}}:root[data-theme=dark]{color-scheme:dark;--bg: #0f1115;--surface: #171a21;--surface-2: #1f232c;--text: #e8eaee;--muted: #9aa1ad;--border: #2a2f3a;--accent: #60a5fa;--accent-soft: #1e3a5f;--track: #2a2f3a;--done: #4ade80;--shadow: none}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:960px;margin:0 auto;padding:24px 16px 48px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.topbar h1{font-size:1.1rem;margin:0;font-weight:600}.topbar .sub{color:var(--muted);font-size:.9rem}.theme-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:2px;background:var(--surface)}.theme-toggle button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px 10px;border-radius:999px;font:inherit;font-size:.8rem}.theme-toggle button[aria-pressed=true]{background:var(--accent-soft);color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow)}.card h2{margin:0 0 12px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.grid{display:grid;gap:16px;margin-top:16px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}@media(max-width:720px){.grid-3,.grid-2{grid-template-columns:1fr}}.hero{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}@media(max-width:720px){.hero{grid-template-columns:1fr}}.hero .big{font-size:3.5rem;font-weight:700;line-height:1;letter-spacing:-.02em}.hero .big small{font-size:1.5rem;color:var(--muted);font-weight:500}.hero .meta{color:var(--muted);margin-top:6px}.hero .badge{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--text);margin-left:8px;vertical-align:middle}.bar{position:relative;height:12px;background:var(--track);border-radius:999px;overflow:hidden}.bar>.fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}.bar.tall{height:22px}.bar-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:6px}.stat .value{font-size:1.9rem;font-weight:700;letter-spacing:-.01em}.stat .label{color:var(--muted);font-size:.85rem}.stat .hint{color:var(--muted);font-size:.78rem;margin-top:4px}.split{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px}.split .value{font-size:1.5rem;font-weight:700}.split .label{color:var(--muted);font-size:.8rem}.split .right{text-align:right}.countdown{display:flex;gap:28px;flex-wrap:wrap}.countdown .value{font-size:2.4rem;font-weight:700;line-height:1.1}.countdown .label{color:var(--muted);font-size:.85rem}.timeline{position:relative;height:34px;background:var(--track);border-radius:8px;margin:18px 0 8px;overflow:hidden}.timeline .today{position:absolute;top:0;bottom:0;width:2px;background:var(--text);opacity:.7;z-index:2}.phase{position:absolute;top:4px;bottom:4px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}.phase .phase-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background:var(--accent-soft)}.phase.done .phase-fill{background:var(--accent-soft)}.phase span{position:relative;display:block;padding:0 8px;font-size:.75rem;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.phase-list li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}.phase-list .dates{color:var(--muted)}.phase-list .state{font-size:.75rem;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}.phase-list .state.active{background:var(--accent-soft);color:var(--text)}.phase-list .state.done{color:var(--done)}.empty{color:var(--muted);font-size:.9rem}.empty code{background:var(--surface-2);padding:1px 6px;border-radius:4px;font-size:.85em}footer{margin-top:28px;color:var(--muted);font-size:.8rem;text-align:center}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.date-controls{display:flex;align-items:center;gap:8px}.date-controls label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}.date-controls input{font:inherit;font-size:.85rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 8px}.date-controls input:focus{outline:2px solid var(--accent);outline-offset:1px}button.link{border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-size:.8rem;padding:0 4px}button.link:hover{text-decoration:underline}@media(max-width:720px){.topbar{flex-direction:column;align-items:flex-start}.controls{justify-content:flex-start}}.bar{overflow:visible}.bar>.fill{border-radius:999px}.bar .marker{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--muted);opacity:.55;border-radius:1px}.bar .marker.reached{background:var(--done);opacity:1}.marker-labels{position:relative;height:16px;margin-top:4px;font-size:.75rem;color:var(--muted)}.marker-labels span{position:absolute;transform:translate(-50%)}.marker-labels span.reached{color:var(--done);font-weight:600}.hero .bar-labels{margin-top:0}.stages{list-style:none;margin:0 0 12px;padding:0;display:flex;align-items:flex-start}.stages li{flex:1;position:relative;text-align:center}.stages li:not(:last-child):after{content:"";position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--track);z-index:0}.stages li.done:not(:last-child):after{background:var(--done)}.stages button{position:relative;z-index:1;border:0;background:none;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:0;color:var(--muted)}.stages .dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:600;background:var(--surface);border:2px solid var(--track);color:var(--muted);transition:transform .15s ease}.stages button:hover .dot{transform:scale(1.08)}.stages .name{font-size:.85rem}.stages li.done .dot{background:var(--done);border-color:var(--done);color:#fff}.stages li.done .name{color:var(--text)}.stages li.current .dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}.stages li.current .name{color:var(--text);font-weight:600}@media(max-width:480px){.stages .name{font-size:.7rem}.stages .dot{width:26px;height:26px;font-size:.75rem}.stages li:not(:last-child):after{top:12px}}:root{--spend: #dc2626;--spend-soft: #fee2e2;--gain: #16a34a;--gain-soft: #dcfce7}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--spend: #f87171;--spend-soft: #451a1a;--gain: #4ade80;--gain-soft: #14361f}}:root[data-theme=dark]{--spend: #f87171;--spend-soft: #451a1a;--gain: #4ade80;--gain-soft: #14361f}.spend-text,.value.spend{color:var(--spend)}.gain-text,.value.gain{color:var(--gain)}.stat.spend{border-left:4px solid var(--spend)}.stat.spend .value{color:var(--spend)}.spend-bar{overflow:hidden}.spend-bar .fill{position:absolute;top:0;height:100%}.spend-bar .fill.spend{left:0;background:var(--spend);border-radius:999px 0 0 999px}.spend-bar .fill.gain{background:var(--gain);opacity:.35;border-radius:0 999px 999px 0}.burn-rate{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--border);display:grid;gap:4px;font-size:.9rem;color:var(--muted)}.burn-rate strong{font-weight:700}.callout{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;border-radius:14px;background:linear-gradient(135deg,var(--spend-soft),var(--surface) 70%);border:1px solid var(--spend);border-left-width:6px}.callout-main{display:flex;align-items:center;gap:18px}.callout-amount{font-size:2.6rem;font-weight:800;color:var(--spend);letter-spacing:-.02em;line-height:1;white-space:nowrap}.callout-title{font-size:1.05rem;font-weight:600}.callout-sub{color:var(--muted);font-size:.9rem;margin-top:4px;max-width:52ch}.callout-side{flex-shrink:0}.callout-mini{text-align:right;display:flex;flex-direction:column}.callout-mini span{font-size:1.3rem;font-weight:700}.callout-mini small{color:var(--muted);font-size:.78rem}@media(max-width:720px){.callout{flex-direction:column;align-items:flex-start}.callout-main{flex-direction:column;align-items:flex-start;gap:8px}.callout-mini{text-align:left}}.nav{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:2px;background:var(--surface)}.nav a{color:var(--muted);text-decoration:none;padding:4px 12px;border-radius:999px;font-size:.85rem}.nav a[aria-current=page]{background:var(--accent-soft);color:var(--text);font-weight:600}.reminders{margin-top:0}.reminder-form{display:grid;gap:14px}.reminder-form label{display:grid;gap:4px;font-size:.85rem;color:var(--muted)}.reminder-form input,.reminder-form select{font:inherit;font-size:.95rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;width:100%}.reminder-form input:focus,.reminder-form select:focus{outline:2px solid var(--accent);outline-offset:1px}.reminder-form input[readonly]{color:var(--muted);background:var(--surface-2)}.reminder-form fieldset{border:0;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}.reminder-form legend{font-size:.85rem;color:var(--muted);margin-bottom:6px}.reminder-form .radio{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--text)}.reminder-form .radio:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}.reminder-form .radio input{width:auto;margin:0}.reminder-form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.reminder-form .uses{font-size:.85rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:10px 12px}.reminder-form .uses strong{color:var(--text)}.reminder-form .error{color:var(--spend);background:var(--spend-soft);border-radius:8px;padding:10px 12px;font-size:.9rem}.reminder-form .fine{margin:0;font-size:.78rem;color:var(--muted)}button.primary{font:inherit;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:10px;padding:10px 16px;cursor:pointer}button.primary:disabled{opacity:.6;cursor:default}.success{background:var(--gain-soft);border:1px solid var(--gain);border-radius:10px;padding:16px}.success-title{font-weight:700;color:var(--gain);margin-bottom:4px}.success p{margin:0 0 8px}.preview{border:1px dashed var(--border);border-radius:10px;padding:16px;background:var(--surface-2)}.preview-head{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.preview-big{font-size:2.4rem;font-weight:700;line-height:1.1;margin:6px 0 2px}.preview-big small{font-size:1.1rem;color:var(--muted)}.preview-sub{color:var(--muted);font-size:.9rem;margin-bottom:10px}.preview .bar{overflow:hidden}.preview-callout{margin-top:14px;padding:10px 12px;background:var(--spend-soft);border-left:4px solid var(--spend);border-radius:8px;font-weight:600}.preview-callout .spend-text{font-size:1.2rem}.preview .burn-rate li{display:flex;justify-content:space-between}
