/* Life OS · Bento Glass. Daylight is default; [data-theme="midnight"] switches. */
:root {
  --bg:#eef0f4; --ink:#111318; --muted:#667085; --faint:#11131814;
  --mesh: radial-gradient(40% 30% at 15% 10%, #bfe3cc 0%, transparent 70%), radial-gradient(45% 35% at 95% 30%, #d9d3ff 0%, transparent 70%), radial-gradient(50% 35% at 30% 95%, #ffd9c7 0%, transparent 70%), radial-gradient(40% 30% at 90% 85%, #c9e4ff 0%, transparent 70%);
  --glass: rgba(255,255,255,.56); --glass-strong: rgba(255,255,255,.82);
  --hl: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(17,19,24,.03);
  --shadow: 0 1px 1px rgba(17,19,24,.03), 0 4px 10px -2px rgba(17,19,24,.05), 0 18px 36px -14px rgba(17,19,24,.16);
  --hero-bg: rgba(17,19,24,.9); --hero-ink:#fff; --hero-muted:#ffffff99;
  --chip: rgba(17,19,24,.05); --on:#111318; --on-ink:#fff;
  --must:#e2551f; --must-soft:#ff6b3d1f; --nn:#5a4be0; --nn-soft:#6d5ef51f; --neg:#667085; --neg-soft:#6670851a;
  --green:#1f9d5b; --green-soft:#dcf3e4; --orange:#c4511f; --orange-soft:#ffe4d6; --violet:#5a4be0; --violet-soft:#e5e1ff; --blue:#1f72b8; --blue-soft:#dbeeff;
  --ring:#2f8f5b; --danger:#d92d20;
  --spring: cubic-bezier(.3,1.5,.5,1); --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
[data-theme="midnight"] {
  --bg:#07080b; --ink:#f2f3f6; --muted:#8b91a1; --faint:#ffffff12;
  --mesh: radial-gradient(40% 30% at 10% 5%, #3b2fa060 0%, transparent 70%), radial-gradient(45% 35% at 100% 35%, #1f7a5650 0%, transparent 70%), radial-gradient(50% 35% at 20% 100%, #c05a3a3a 0%, transparent 70%), radial-gradient(40% 30% at 85% 90%, #2a63b045 0%, transparent 70%);
  --glass: rgba(255,255,255,.06); --glass-strong: rgba(28,30,38,.86);
  --hl: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.25);
  --shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 24px -8px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.6);
  --hero-bg: rgba(255,255,255,.93); --hero-ink:#0b0c10; --hero-muted:#0b0c1099;
  --chip: rgba(255,255,255,.07); --on:#f2f3f6; --on-ink:#0b0c10;
  --must:#ff8a5c; --must-soft:#ff8a5c22; --nn:#a99fff; --nn-soft:#a99fff22; --neg:#8b91a1; --neg-soft:#8b91a11f;
  --green:#4ad48b; --green-soft:#2f8f5b26; --orange:#ff9a6e; --orange-soft:#e2683c26; --violet:#a99fff; --violet-soft:#6d5ef526; --blue:#7cc0ff; --blue-soft:#2b8fd626;
  --ring:#7ee0a5; --danger:#ff6b5e;
  color-scheme: dark;
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { min-height:100%; }
body { background:var(--bg); color:var(--ink); font-family:Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; overscroll-behavior-y:contain; }
.mesh { position:fixed; inset:-20%; z-index:-1; background:var(--mesh); filter:blur(30px); pointer-events:none; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

#app { max-width:480px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 120px); min-height:100vh; }
.glass { background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); box-shadow:var(--hl), var(--shadow); border-radius:26px; }
.press { transition:transform .25s var(--spring); }
.press:active { transform:scale(.975); }
.view { animation:viewIn .35s var(--ease); }
@keyframes viewIn { from { opacity:0; transform:translateY(8px); } }

/* header */
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:4px 4px 16px; }
.date { font-size:13px; color:var(--muted); font-weight:500; }
.title { font-size:27px; font-weight:600; letter-spacing:-.035em; line-height:1.12; margin-top:3px; }
.title span, .muted { color:var(--muted); }
.iconbtn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; }
.iconbtn svg { width:19px; height:19px; }

/* bento */
.bento { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { padding:16px; position:relative; min-width:0; }
.wide { grid-column:span 2; }
.k { font-size:12.5px; font-weight:500; color:var(--muted); display:flex; align-items:center; gap:7px; }
.num { font-variant-numeric:tabular-nums; letter-spacing:-.04em; font-weight:600; }
.ic { width:26px; height:26px; border-radius:9px; display:grid; place-items:center; flex:none; }
.ic svg { width:15px; height:15px; }
.ic.green { background:var(--green-soft); color:var(--green); } .ic.orange { background:var(--orange-soft); color:var(--orange); }
.ic.violet { background:var(--violet-soft); color:var(--violet); } .ic.blue { background:var(--blue-soft); color:var(--blue); }
.ic.plain { background:var(--chip); color:var(--ink); }
.hero { background:var(--hero-bg); color:var(--hero-ink); }
.hero .k { color:var(--hero-muted); }
.ringwrap { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.ring { width:58px; height:58px; transform:rotate(-90deg); }
.ring circle { stroke-width:6; }
.up { font-size:12px; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:3px; margin-top:4px; white-space:nowrap; }
.up svg { width:12px; height:12px; stroke-width:2.4; flex:none; }
.pill { font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--chip); font-variant-numeric:tabular-nums; white-space:nowrap; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bar { height:8px; border-radius:8px; background:var(--faint); overflow:hidden; margin-top:10px; }
.bar u { display:block; height:100%; border-radius:8px; background:var(--on); transition:width .6s var(--ease); }
.section-label { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; margin:22px 6px 10px; display:flex; justify-content:space-between; align-items:center; }
.section-label button { color:var(--ink); font-weight:600; font-size:12.5px; }
.stack { display:flex; flex-direction:column; gap:10px; }

/* tiers */
.tier { padding:14px 16px 6px; }
.tier-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.tier-tag { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:7px; }
.tier-must .tier-tag { background:var(--must-soft); color:var(--must); }
.tier-non_negotiable .tier-tag { background:var(--nn-soft); color:var(--nn); }
.tier-negotiable .tier-tag { background:var(--neg-soft); color:var(--neg); }
.tier-hint { font-size:12px; color:var(--muted); }
.tier-head .pill { margin-left:auto; }
.seg { display:flex; gap:4px; margin:10px 0 2px; }
.seg i { flex:1; height:5px; border-radius:5px; background:var(--faint); transition:background .3s; }
.seg i.on { background:var(--must); }

.task { display:flex; align-items:center; gap:12px; padding:11px 0; user-select:none; }
.task + .task { box-shadow:0 -1px 0 var(--faint); }
.cb { width:26px; height:26px; border-radius:9px; background:var(--chip); flex:none; display:grid; place-items:center; transition:all .35s var(--spring); }
.cb svg { width:14px; height:14px; stroke-width:2.6; opacity:0; transform:scale(.4); transition:all .35s var(--spring); }
.task.on .cb { color:#fff; box-shadow:0 4px 10px -3px rgba(0,0,0,.3); }
.tier-must .task.on .cb { background:var(--must); } .tier-non_negotiable .task.on .cb { background:var(--nn); } .tier-negotiable .task.on .cb, .task.on .cb { background:var(--on); color:var(--on-ink); }
.tier-must .task.on .cb, .tier-non_negotiable .task.on .cb { color:#fff; }
.task.on .cb svg { opacity:1; transform:scale(1); }
.task .body { flex:1; min-width:0; }
.t { font-size:14.5px; font-weight:500; letter-spacing:-.01em; transition:opacity .3s; overflow-wrap:anywhere; }
.task.on .t { opacity:.4; text-decoration:line-through; text-decoration-thickness:1.5px; }
.m { font-size:12px; color:var(--muted); margin-top:1px; }
.time { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.guide { font-size:11px; font-weight:600; padding:4px 8px; border-radius:8px; background:var(--chip); display:inline-flex; gap:4px; align-items:center; flex:none; }
.guide svg { width:12px; height:12px; }
.add-row { display:flex; align-items:center; gap:10px; padding:10px 0 12px; color:var(--muted); font-size:13.5px; font-weight:500; width:100%; }
.add-row .cb { background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint); }
.empty { font-size:13px; color:var(--muted); padding:8px 0 12px; }

/* habits + meters */
.habits { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:12px; }
.hb { border-radius:14px; padding:10px 8px; background:var(--chip); display:flex; flex-direction:column; gap:6px; user-select:none; transition:all .3s var(--spring); text-align:left; }
.hb svg { width:16px; height:16px; }
.hb small { font-size:11px; font-weight:500; }
.hb b { font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; }
.hb.on { background:var(--on); color:var(--on-ink); transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(0,0,0,.35); }
.meter { display:flex; align-items:flex-end; gap:5px; height:30px; margin-top:8px; }
.meter i { flex:1; border-radius:6px; background:var(--chip); transition:all .3s var(--spring); }
.meter i:nth-child(1){height:30%} .meter i:nth-child(2){height:47%} .meter i:nth-child(3){height:64%} .meter i:nth-child(4){height:82%} .meter i:nth-child(5){height:100%}
.meter i.on { background:var(--c); }
.dots { display:flex; gap:4px; }
.dots i { width:14px; height:14px; border-radius:5px; background:var(--chip); }
.dots i.on { background:var(--green); }
.dots i.today { box-shadow:0 0 0 1.5px var(--ink); }
.spark { width:100%; height:44px; margin-top:6px; }

/* lists */
.list-row { display:flex; align-items:center; gap:12px; padding:12px 0; }
.list-row + .list-row { box-shadow:0 -1px 0 var(--faint); }
.list-row .grow { flex:1; min-width:0; }
.amt { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.amt.pos { color:var(--green); } .amt.neg { color:var(--ink); }
.link { font-weight:600; font-size:13px; padding:7px 11px; border-radius:10px; background:var(--chip); }

/* nav */
.nav { position:fixed; left:50%; transform:translateX(-50%); width:min(448px, calc(100% - 28px)); bottom:calc(env(safe-area-inset-bottom) + 14px); height:66px; border-radius:24px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; z-index:20; background:var(--glass-strong); }
.nav a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:500; color:var(--muted); width:56px; text-decoration:none; }
.nav a.on { color:var(--ink); }
.nav svg { width:21px; height:21px; }
.fab { width:52px; height:52px; border-radius:18px; background:var(--on); color:var(--on-ink); display:grid; place-items:center; box-shadow:0 8px 18px -6px rgba(0,0,0,.45); transition:transform .35s var(--spring); }
.fab svg { width:22px; height:22px; stroke-width:2.2; transition:transform .35s var(--spring); }
body.sheet-open .fab svg { transform:rotate(45deg); }

/* sheets */
.scrim { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.22); opacity:0; pointer-events:none; transition:opacity .3s; }
body.sheet-open .scrim { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:50%; width:min(460px, calc(100% - 20px)); bottom:calc(env(safe-area-inset-bottom) + 10px); z-index:40; padding:18px 16px 16px; background:var(--glass-strong);
  max-height:calc(100vh - 60px); overflow-y:auto; transform:translate(-50%, 30px) scale(.97); opacity:0; pointer-events:none; transition:all .4s var(--spring); border-radius:28px; }
body.sheet-open .sheet { transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.sheet h3 { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.sheet .sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.grabber { width:36px; height:4px; border-radius:4px; background:var(--faint); margin:-6px auto 12px; }
.qgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.q { border-radius:18px; padding:14px 6px; background:var(--chip); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:500; }
.q .ic { width:36px; height:36px; border-radius:12px; } .q .ic svg { width:18px; height:18px; }

/* forms */
.form { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.field label, .flabel { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 2px 6px; }
.input { width:100%; border:0; outline:0; background:var(--chip); border-radius:14px; padding:13px 14px; font-size:15px; }
.input:focus { box-shadow:0 0 0 2px var(--ink) inset; }
textarea.input { min-height:80px; resize:vertical; }
.big-amount { font-size:34px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; text-align:center; padding:14px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { padding:9px 12px; border-radius:12px; background:var(--chip); font-size:13px; font-weight:500; transition:all .25s var(--spring); }
.chip.on { background:var(--on); color:var(--on-ink); }
.chip.must.on { background:var(--must); color:#fff; } .chip.non_negotiable.on { background:var(--nn); color:#fff; }
.chip:disabled { opacity:.35; }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.scale button { padding:11px 0; border-radius:12px; background:var(--chip); font-weight:600; font-variant-numeric:tabular-nums; }
.scale button.on { background:var(--c, var(--on)); color:#fff; }
.btn { width:100%; padding:15px; border-radius:16px; background:var(--on); color:var(--on-ink); font-weight:600; font-size:15px; transition:transform .25s var(--spring), opacity .2s; }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.4; }
.btn.ghost { background:var(--chip); color:var(--ink); }
.btn.danger { background:transparent; color:var(--danger); }
.btns { display:flex; gap:8px; }
.btns .btn { flex:1; }
.toggle { width:46px; height:28px; border-radius:20px; background:var(--chip); position:relative; transition:background .25s; flex:none; }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .3s var(--spring); }
.toggle.on { background:var(--green); } .toggle.on::after { transform:translateX(18px); }
.segctl { display:flex; background:var(--chip); border-radius:14px; padding:3px; }
.segctl button { flex:1; padding:9px; border-radius:11px; font-weight:600; font-size:13px; color:var(--muted); }
.segctl button.on { background:var(--glass-strong); color:var(--ink); box-shadow:0 2px 8px -2px rgba(0,0,0,.15); }
.secret { font-family:ui-monospace, Menlo, monospace; font-size:12px; word-break:break-all; background:var(--chip); padding:12px; border-radius:12px; user-select:all; }

/* guides */
.guide-body { font-size:14.5px; line-height:1.55; }
.guide-body h2, .guide-body h3, .guide-body h4 { letter-spacing:-.02em; margin:18px 0 6px; line-height:1.25; scroll-margin-top:20px; }
.guide-body h2 { font-size:19px; } .guide-body h3 { font-size:16.5px; } .guide-body h4 { font-size:15px; }
.guide-body p { margin:6px 0; }
.guide-body ul, .guide-body ol { margin:6px 0 6px 20px; }
.guide-body li { margin:3px 0; }
.guide-body li input { margin-right:6px; accent-color:var(--green); }
.guide-body blockquote { margin:10px 0; padding:10px 14px; border-radius:14px; background:var(--chip); }
.guide-body code { font-size:13px; background:var(--chip); padding:1px 5px; border-radius:6px; }
.guide-body .table { overflow-x:auto; margin:8px 0; }
.guide-body table { border-collapse:collapse; font-size:13px; width:100%; }
.guide-body th, .guide-body td { text-align:left; padding:7px 8px; box-shadow:0 -1px 0 var(--faint) inset; vertical-align:top; }
.guide-body hr { border:0; height:1px; background:var(--faint); margin:16px 0; }
.guide-body a { color:var(--violet); }
.guide-body .flash { animation:flash 1.6s var(--ease); border-radius:8px; }
@keyframes flash { 0%,40% { background:var(--must-soft); } }

/* misc */
.status-pill { position:fixed; top:calc(env(safe-area-inset-top) + 8px); left:50%; transform:translateX(-50%); z-index:25; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--glass-strong); box-shadow:var(--hl), var(--shadow); display:flex; gap:6px; align-items:center; }
.status-pill i { width:7px; height:7px; border-radius:50%; background:#f5a524; }
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 96px); transform:translate(-50%, 20px); opacity:0; z-index:50; padding:11px 16px; border-radius:14px; background:var(--on); color:var(--on-ink); font-size:13.5px; font-weight:500; transition:all .35s var(--spring); pointer-events:none; white-space:nowrap; }
.toast.show { transform:translate(-50%, 0); opacity:1; }
.center-screen { min-height:80vh; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.logo { width:56px; height:56px; border-radius:18px; background:var(--hero-bg); color:var(--hero-ink); display:grid; place-items:center; }
.logo svg { width:28px; height:28px; }
.back { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; padding:8px 0; color:var(--muted); }
.back svg { width:18px; height:18px; }
.reorder { display:flex; flex-direction:column; gap:2px; }
.reorder button { width:30px; height:22px; border-radius:7px; background:var(--chip); display:grid; place-items:center; }
.reorder svg { width:14px; height:14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* radio-label chips (forms use real inputs) */
.chip:has(input:checked) { background:var(--on); color:var(--on-ink); }
.chip.must:has(input:checked) { background:var(--must); color:#fff; }
.chip.non_negotiable:has(input:checked) { background:var(--nn); color:#fff; }
.chip:has(input:disabled) { opacity:.35; }
.segctl label { flex:1; padding:9px; border-radius:11px; font-weight:600; font-size:13px; color:var(--muted); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.segctl label svg { width:15px; height:15px; }
.segctl label:has(input:checked) { background:var(--glass-strong); color:var(--ink); box-shadow:0 2px 8px -2px rgba(0,0,0,.15); }
.scale label { padding:11px 0; border-radius:12px; background:var(--chip); font-weight:600; text-align:center; font-variant-numeric:tabular-nums; transition:all .25s var(--spring); }
.scale label:has(input:checked) { background:var(--c, var(--on)); color:#fff; transform:translateY(-2px); }
.btns .field { flex:1; min-width:0; }
.btn svg { width:15px; height:15px; vertical-align:-2px; }
.link svg { width:13px; height:13px; vertical-align:-2px; }