:root{
  --bg:#f5f5f5;--card:#fff;--line:#e5e5e5;--line2:#f0f0f0;--text:#1a1a1a;--muted:#666;--faint:#999;
  --chip:#f0f0f0;--accent:#3b82f6;--accent-bg:#eff6ff;--good:#10b981;--warn:#f59e0b;--bad:#e74c3c;
  --primary-bg:#1a1a1a;--primary-fg:#fff;--shadow:0 8px 30px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111113;--card:#1c1c1f;--line:#2c2c30;--line2:#26262a;--text:#f2f2f2;--muted:#a0a0a8;--faint:#6f6f78;
    --chip:#2a2a2e;--accent:#60a5fa;--accent-bg:#1e2a3d;--primary-bg:#f2f2f2;--primary-fg:#111;--shadow:0 8px 30px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.app{max-width:680px;margin:0 auto;padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* Header */
.header{padding:calc(1rem + env(safe-area-inset-top)) 1rem .75rem;background:var(--bg);position:sticky;top:0;z-index:10}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.h-title{font-size:24px;font-weight:700;letter-spacing:-.5px}
.h-sub{font-size:13px;color:var(--muted);margin-top:2px}
.back{font-size:14px;color:var(--accent);background:none;border:none;cursor:pointer;padding:4px 0;margin-bottom:4px;display:inline-block}
.date-nav{display:flex;align-items:center;gap:2px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:active{background:var(--chip)}

main{padding:0 1rem}
.section-label{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:1.5rem 0 .5rem;display:flex;align-items:center;justify-content:space-between}
.section-label .link{text-transform:none;letter-spacing:0;font-size:13px;color:var(--accent);font-weight:500;background:none;border:none;cursor:pointer}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-bottom:.75rem}
.card.tight{padding:.35rem 1.1rem}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.small{font-size:12px}
.empty{text-align:center;color:var(--faint);font-size:14px;padding:1.5rem .5rem}

/* Buttons */
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:14px;cursor:pointer;font-weight:500}
.btn.primary{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg)}
.btn.danger{color:var(--bad)}
.btn.full{width:100%}
.btn-row{display:flex;gap:8px;margin-top:1rem}
.btn-row .btn{flex:1}
.add-btn{width:100%;padding:10px;background:none;border:1px dashed var(--line);border-radius:10px;color:var(--faint);font-size:14px;cursor:pointer;margin-top:4px}

/* Task rows */
.goal-group{margin-bottom:.75rem}
.goal-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);padding:.75rem 0 .25rem}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.task{display:flex;align-items:center;gap:12px;padding:.65rem 0;border-bottom:1px solid var(--line2)}
.task:last-child{border-bottom:none}
.check{width:26px;height:26px;border-radius:50%;border:2px solid var(--gc,var(--line));background:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:all .15s}
.check.done{background:var(--gc,var(--good));border-color:var(--gc,var(--good))}
.check.skipped{border-style:dashed;color:var(--faint)}
.task-main{flex:1;min-width:0;cursor:pointer}
.task-title{font-size:15px;font-weight:500}
.task.is-done .task-title{color:var(--faint);text-decoration:line-through}
.task-meta{font-size:12px;color:var(--faint);margin-top:1px}
.more{background:none;border:none;color:var(--faint);font-size:18px;cursor:pointer;padding:4px 6px}
.badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--chip);color:var(--muted);margin-left:6px;vertical-align:1px}
.badge.big{background:#fef3c7;color:#92400e}
.badge.late{background:#fee2e2;color:#991b1b}

/* Upcoming list */
.up{display:flex;align-items:center;gap:10px;padding:.55rem 0;border-bottom:1px solid var(--line2);cursor:pointer}
.up:last-child{border-bottom:none}
.up-date{font-size:12px;color:var(--muted);width:64px;flex-shrink:0}
.up-title{font-size:14px;flex:1}

/* Check-in */
.checkin-row{display:flex;align-items:center;gap:10px;margin:.35rem 0}
.checkin-row label{font-size:12px;color:var(--muted);width:46px}
.scale{display:flex;gap:6px;flex:1}
.scale-btn{flex:1;height:32px;border-radius:9px;border:1px solid var(--line);background:none;font-size:13px;cursor:pointer;color:var(--muted)}
.scale-btn.on{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:none;font-size:13px;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:500}

/* Context */
.ctx-row{display:flex;flex-wrap:wrap;gap:6px}
.ctx{font-size:12.5px;padding:5px 10px;border-radius:20px;background:var(--chip);white-space:nowrap}

/* Calendar */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;color:var(--faint);text-align:center;margin-bottom:4px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1/1.1;border-radius:10px;background:var(--card);border:1px solid var(--line2);padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.cal-day.out{opacity:.35}
.cal-day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-num{font-size:13px;font-weight:500}
.cal-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.cal-dots .dot{width:6px;height:6px}
.cal-dots .dot.hollow{background:none!important;border:1.5px solid}
.cal-star{font-size:9px;line-height:1}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:.75rem}
.legend span{display:flex;align-items:center;gap:5px}

/* Goals */
.goal-card{display:block;position:relative;overflow:hidden;cursor:pointer}
.goal-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gc)}
.goal-title{font-size:16px;font-weight:600}
.goal-why{font-size:13px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.goal-stats{display:flex;gap:14px;margin-top:.6rem;font-size:12px;color:var(--muted);flex-wrap:wrap}
.goal-stats b{color:var(--text);font-size:14px}
.bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;border-radius:3px;background:var(--gc,var(--good));transition:width .4s}
.status-pill{font-size:11px;padding:3px 8px;border-radius:10px;background:var(--chip);color:var(--muted);font-weight:500;text-transform:capitalize}
.why-quote{font-size:15px;line-height:1.45;border-left:3px solid var(--gc);padding-left:.75rem}
.timeline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

/* Measures */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.75rem}
.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.85rem;cursor:pointer;min-width:0}
.metric.wide{grid-column:1/-1}
.m-label{font-size:11px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-big{font-size:24px;font-weight:700;margin-top:4px;letter-spacing:-.5px}
.m-big small{font-size:12px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.m-sub{font-size:12px;color:var(--muted);margin-top:2px}
.mini-bars{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:8px;position:relative}
.mini-bars i{flex:1;background:var(--gc);opacity:.35;border-radius:2px 2px 0 0;min-height:2px}
.mini-bars i.hit{opacity:1}
.mini-bars .tline{position:absolute;left:0;right:0;border-top:1px dashed var(--faint)}
.steps{display:flex;gap:4px;margin-top:8px}
.steps i{flex:1;height:6px;border-radius:3px;background:var(--line2)}
.steps i.on{background:var(--gc)}
svg.spark{width:100%;height:34px;margin-top:6px;display:block}

/* Task detail inside goal */
.task.focus{background:var(--accent-bg);margin:0 -1.1rem;padding-left:1.1rem;padding-right:1.1rem;border-radius:10px}
.task-detail{background:var(--accent-bg);margin:0 -1.1rem .5rem;padding:.25rem 1.1rem .9rem;border-radius:0 0 10px 10px;font-size:13px;margin-top:-4px}
.history{display:flex;gap:3px;margin:.5rem 0;flex-wrap:wrap}
.history i{width:14px;height:14px;border-radius:4px;background:var(--line);display:inline-block}
.history i.done{background:var(--gc)}
.history i.skipped{background:none;border:1.5px dashed var(--faint)}

/* Versions */
.ver{display:flex;gap:12px;padding:.7rem 0;border-bottom:1px solid var(--line2);cursor:pointer}
.ver:last-child{border-bottom:none}
.ver-n{font-size:12px;font-weight:700;color:var(--muted);width:28px;flex-shrink:0;padding-top:1px}
.ver-note{font-size:14px}
.ver-date{font-size:12px;color:var(--faint);margin-top:2px}
.diff{font-size:13px;padding:.4rem 0;border-bottom:1px solid var(--line2);line-height:1.4}
.diff .k{font-weight:600}
.diff.add::before{content:'+ ';color:var(--good);font-weight:700}
.diff.del::before{content:'− ';color:var(--bad);font-weight:700}
.diff.del{color:var(--muted)}
.diff s{color:var(--faint)}

/* Insights */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.75rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.75rem;text-align:center}
.stat b{display:block;font-size:22px;letter-spacing:-.5px}
.stat span{font-size:11px;color:var(--muted)}
.hbar{display:flex;align-items:center;gap:8px;font-size:13px;margin:.45rem 0}
.hbar .lbl{width:118px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.hbar .track{flex:1;height:10px;border-radius:5px;background:var(--line2);overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:5px;background:var(--gc,var(--accent))}
.hbar .v{width:40px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.finding{font-size:14px;line-height:1.45;padding:.55rem 0;border-bottom:1px solid var(--line2)}
.finding:last-child{border-bottom:none}
.finding b{display:block;font-size:14px}
.finding span{font-size:13px;color:var(--muted)}
.seg{display:flex;background:var(--chip);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:none;background:none;padding:6px 10px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--text);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Forms */
.field{margin-bottom:.85rem}
.field > label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit;background:var(--card);color:var(--text);outline:none}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field .hint{font-size:12px;color:var(--faint);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line2);font-size:14px}
.toggle input{width:20px;height:20px}
.colors{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.swatch.on{border-color:var(--text)}
.type-opt{display:flex;gap:10px;padding:.6rem;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer;align-items:flex-start}
.type-opt.on{border-color:var(--accent);background:var(--accent-bg)}
.type-opt .ic{font-size:18px;width:24px;text-align:center}
.type-opt b{font-size:14px;display:block}
.type-opt span{font-size:12px;color:var(--muted)}

/* Bottom nav */
.nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.nav a{flex:1;max-width:170px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0 7px;font-size:11px;color:var(--faint);font-weight:500}
.nav a.on{color:var(--text)}
.nav-ic{font-size:19px;line-height:1.2}

/* Sheet */
.sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:flex-end;justify-content:center}
.sheet-backdrop.open{display:flex}
.sheet{background:var(--card);border-radius:18px 18px 0 0;width:100%;max-width:680px;padding:1.1rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.sheet-title{font-size:17px;font-weight:600}
.close-btn{background:none;border:none;cursor:pointer;color:var(--faint);font-size:26px;line-height:1;padding:2px 6px}

/* Login + toast */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.75rem 1.5rem;width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px}
.login-title{font-size:22px;font-weight:700}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:6px}
.login-card input{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--card);color:var(--text)}
.status-msg{font-size:13px;color:var(--muted);display:none}
.status-msg.visible{display:block}
.status-msg.error{color:var(--bad)}
.toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--primary-bg);color:var(--primary-fg);padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:200;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}