/* Life OS — theme + shell. Dark is default; [data-theme="light"] swaps the palette.
   Visual identity carried from the prototype: Sora + IBM Plex Mono, teal accent, soft cards. */

/* ---------- DARK (default) ---------- */
:root {
  --bg:#0f1115; --panel:#171a21; --panel-2:#1d212a; --panel-3:#252b36;
  --border:#2a303c; --border-soft:#222732;
  --text:#e7e9ee; --muted:#9aa3b2; --dim:#6b7382;
  --accent:#2dd4bf; --accent-dk:#14b8a6; --accent-soft:rgba(45,212,191,.12);
  --high:#f87171; --med:#fbbf24; --low:#60a5fa;
  --gold:#e3c97a; --gold-bg:#2a2515; --gold-bd:#5c4f24;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Sora',system-ui,sans-serif;
  --sh:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --glow:radial-gradient(1000px 480px at 78% -8%,rgba(45,212,191,.08),transparent 65%);
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --bg:#f6f4ef; --panel:#fff; --panel-2:#f1efe9; --panel-3:#eae7df;
  --border:#e3dfd5; --border-soft:#eeebe3;
  --text:#20242b; --muted:#6b7280; --dim:#a4a097;
  --accent:#0e9d8e; --accent-dk:#0a7d71; --accent-soft:rgba(14,157,142,.10);
  --high:#dd5a4d; --med:#d2872c; --low:#3b82f6;
  --gold:#a9802a; --gold-bg:#fbf4df; --gold-bd:#e3c97a;
  --sh:0 1px 2px rgba(40,35,25,.04),0 4px 14px rgba(40,35,25,.05);
  --glow:radial-gradient(1000px 480px at 78% -8%,rgba(14,157,142,.05),transparent 65%);
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:var(--glow);
  transition:background .25s, color .25s;
}
.wrap { max-width:780px; margin:0 auto; padding:0 18px 90px; }

header {
  position:sticky; top:0; z-index:30; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border); margin:0 -18px 24px; padding:15px 18px 0;
}
.brand { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.logo { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; -webkit-user-select:none; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.logo h1 { font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.head-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.clock { font-family:var(--mono); font-size:11px; color:var(--dim); }
.theme-btn {
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  width:30px; height:30px; border-radius:8px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:.15s;
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
.theme-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.head-link {
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  width:30px; height:30px; border-radius:8px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:.15s; text-decoration:none;
}
.head-link:hover { border-color:var(--accent); color:var(--accent); }
.head-link.active { border-color:var(--accent); color:var(--accent); }
.head-link svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

nav { display:flex; overflow-x:auto; scrollbar-width:none; }
nav::-webkit-scrollbar { display:none; }
nav a {
  background:none; border:none; color:var(--dim); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:9px 13px 11px; cursor:pointer;
  border-bottom:2px solid transparent; transition:.18s; white-space:nowrap;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
}
nav a svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
nav a:hover { color:var(--muted); }
nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
nav a.locked { color:var(--gold); }

.sec-label {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin:2px 0 13px; display:flex; align-items:center; gap:9px;
}
.sec-label::after { content:''; flex:1; height:1px; background:var(--border); }

.card { background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:16px; box-shadow:var(--sh); margin-bottom:14px; }
.empty { font-family:var(--mono); font-size:12px; color:var(--dim); text-align:center; padding:28px; }
.stub-note { font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:6px; }

/* toast */
.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); font-family:var(--mono); font-size:12px;
  padding:11px 18px; border-radius:10px; z-index:200; opacity:0; transition:.3s; pointer-events:none;
}
.toast.show { opacity:1; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ---------- forms & buttons ---------- */
.add-form { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.add-form input, .add-form select {
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font-family:var(--sans); font-size:13px; padding:9px 11px; border-radius:9px; outline:none;
  transition:.15s; box-shadow:var(--sh);
}
.add-form input:focus, .add-form select:focus { border-color:var(--accent); }
.add-form input::placeholder { color:var(--dim); }
.add-form .grow { flex:1; min-width:120px; }
.btn {
  background:var(--accent); border:1px solid var(--accent); color:#06231f; font-weight:600;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:9px 16px; border-radius:9px;
  cursor:pointer; transition:.15s; text-transform:uppercase;
}
.btn:hover { background:var(--accent-dk); border-color:var(--accent-dk); }
.btn.ghost { background:none; color:var(--accent); }
.btn.ghost:hover { background:var(--accent-soft); color:var(--accent); }
.btn.sm { padding:6px 11px; font-size:10px; }
.icon-btn {
  background:var(--panel); border:1px solid var(--border); color:var(--dim);
  width:28px; height:28px; border-radius:7px; cursor:pointer; font-size:13px; line-height:1;
  transition:.15s; flex-shrink:0;
}
.icon-btn:hover { border-color:var(--high); color:var(--high); }
.icon-btn.ed:hover { border-color:var(--low); color:var(--low); }

/* ---------- projects + tasks ---------- */
.proj { border:1px solid var(--border); border-radius:12px; background:var(--panel); margin-bottom:12px; box-shadow:var(--sh); overflow:hidden; }
.proj-head { display:flex; align-items:center; gap:11px; padding:14px 16px; background:var(--panel-2); }
.proj-head .nm { font-weight:600; font-size:14px; }
.proj-head .tally { font-family:var(--mono); font-size:10px; color:var(--dim); margin-top:3px; display:flex; gap:9px; }
.proj-head .tally b { color:var(--accent); }
.proj-head .tally .ip { color:var(--med); }
.proj-head .actions { margin-left:auto; display:flex; gap:6px; align-items:center; }
.proj-due { font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right; margin-right:4px; }
.proj-due small { display:block; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.tasks-in { padding:6px 14px 12px; }
.tk { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.tk:last-child { border-bottom:none; }
.pri { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pri.high { background:var(--high); } .pri.medium { background:var(--med); } .pri.low { background:var(--low); }
.tk .nm { font-size:13px; flex:1; min-width:120px; }
.tk.done .nm { text-decoration:line-through; color:var(--dim); }
.tk .est { font-family:var(--mono); font-size:10px; color:var(--dim); }
.tk .est.over { color:var(--med); }
.tk .done-tag { font-family:var(--mono); font-size:9px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.tk .check { width:24px; height:24px; font-size:13px; border-radius:6px; border:1.5px solid var(--border); background:var(--panel); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#06231f; }
.tk.done .check { background:var(--accent); border-color:var(--accent); }
.addtask { margin:4px 14px 14px; font-family:var(--mono); font-size:11px; color:var(--accent); cursor:pointer; background:none; border:1px dashed var(--accent); padding:8px; width:calc(100% - 28px); border-radius:8px; }
.addtask:hover { background:var(--accent-soft); }

/* follow-up trail */
.fu-toggle { font-family:var(--mono); font-size:10px; color:var(--med); cursor:pointer; width:100%; padding:2px 0 0 18px; }
.fu-trail { width:100%; padding:6px 0 2px 18px; }
.fu-item { border-left:2px solid var(--border); padding:5px 0 5px 10px; margin-bottom:5px; }
.fu-rmk { font-size:12px; color:var(--muted); }
.fu-meta { font-family:var(--mono); font-size:9.5px; color:var(--dim); margin-top:2px; }

/* ---------- modal ---------- */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:18px; }
.mask.show { display:flex; }
.modal { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; width:360px; max-width:100%; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal h3 { font-size:14px; font-weight:600; margin-bottom:12px; }
.modal .msub { font-family:var(--mono); font-size:11px; color:var(--dim); margin-bottom:14px; }
.modal .f { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.modal input, .modal select { background:var(--panel-2); border:1px solid var(--border); padding:10px 11px; border-radius:9px; font-family:var(--sans); font-size:13px; outline:none; color:var(--text); }
.modal input:focus, .modal select:focus { border-color:var(--accent); }
.modal .mrow { display:flex; gap:8px; justify-content:flex-end; }
.upd-split { display:flex; gap:8px; }
.upd-split .btn { flex:1; }

/* ---------- skills ---------- */
.skill { border:1px solid var(--border); border-radius:12px; background:var(--panel); margin-bottom:10px; box-shadow:var(--sh); padding:15px 16px; }
.skill-top { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.skill .nm { font-weight:600; font-size:14px; flex:1; }
.skill .pct { font-family:var(--mono); font-size:18px; color:var(--accent); font-weight:600; }
.pbar { height:7px; background:var(--panel-3); border-radius:4px; overflow:hidden; }
.pbar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent-dk),var(--accent)); border-radius:4px; transition:width .6s; }
.skill .wt { font-family:var(--mono); font-size:10px; color:var(--dim); margin-top:7px; }
.sktasks { margin-top:10px; border-top:1px dashed var(--border); padding-top:8px; }
.sktask { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:12.5px; }
.sktask .lbl { flex:1; }
.sktask .w { font-family:var(--mono); font-size:10px; color:var(--dim); }
.sktask.done .lbl { color:var(--dim); text-decoration:line-through; }
.sktask .ck { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent; }
.sktask.done .ck { background:var(--accent); border-color:var(--accent); color:#06231f; }

.shelf-label { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:22px 0 12px; display:flex; align-items:center; gap:8px; }
.shelf-label::before { content:'❖'; }
.shelf-label::after { content:''; flex:1; height:1px; background:var(--gold-bd); }
.mastered { border:1px solid var(--gold-bd); border-radius:12px; background:var(--gold-bg); margin-bottom:10px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.mastered .seal { width:34px; height:34px; border-radius:50%; background:var(--gold); color:#1a1505; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
.mastered .nm { font-weight:600; font-size:14px; color:var(--gold); }
.mastered .sub { font-family:var(--mono); font-size:10px; color:var(--gold); opacity:.85; margin-top:2px; letter-spacing:.04em; }

/* ---------- pomodoro ---------- */
.pomo { display:flex; flex-direction:column; align-items:center; padding:26px 16px 20px; }
.mode { font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.ring-wrap { position:relative; width:220px; height:220px; }
.ring-wrap svg { transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--panel-3); stroke-width:6; }
.ring-fg { fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.ring-time { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-time .t { font-family:var(--mono); font-size:44px; font-weight:500; }
.ring-time .c { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; margin-top:4px; }
.dots { display:flex; gap:7px; margin:18px 0 16px; }
.dots i { width:8px; height:8px; border-radius:50%; background:var(--panel-3); border:1px solid var(--border); }
.dots i.done { background:var(--accent); border-color:var(--accent); }
.pomo-ctrl { display:flex; gap:10px; margin-bottom:18px; }
.working { font-family:var(--mono); font-size:11px; color:var(--dim); margin-bottom:6px; text-align:center; }
.working select { margin-top:6px; padding:8px 11px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-family:var(--sans); font-size:13px; outline:none; }
.stats { display:flex; gap:34px; margin-top:6px; padding-top:16px; border-top:1px solid var(--border); width:100%; justify-content:center; }
.stat { text-align:center; }
.stat b { font-family:var(--mono); font-size:23px; color:var(--accent); display:block; }
.stat small { font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
.settings { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.settings label { font-family:var(--mono); font-size:9.5px; color:var(--dim); display:flex; flex-direction:column; gap:4px; text-transform:uppercase; letter-spacing:.07em; text-align:center; }
.settings input { width:60px; text-align:center; background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-family:var(--mono); padding:7px; border-radius:8px; outline:none; }

/* ---------- star / sacrosanct + milestone + flags ---------- */
.star { cursor:pointer; font-size:15px; color:var(--dim); flex-shrink:0; line-height:1; }
.star.on { color:var(--gold); }
.next-ms { font-family:var(--mono); font-size:10px; color:var(--accent); margin-top:3px; }
.flag-late { font-family:var(--mono); font-size:8.5px; background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-bd); padding:1px 5px; border-radius:4px; margin-left:7px; text-transform:uppercase; letter-spacing:.05em; }
.flag-missed { font-family:var(--mono); font-size:8.5px; background:rgba(248,113,113,.12); color:var(--high); border:1px solid var(--high); padding:1px 5px; border-radius:4px; margin-left:7px; text-transform:uppercase; letter-spacing:.05em; }
.dl-label, .star-row { font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; display:flex; flex-direction:column; gap:5px; }
.star-row { flex-direction:row; align-items:center; gap:8px; text-transform:none; font-size:12px; letter-spacing:0; color:var(--muted); cursor:pointer; }
.star-row input { width:auto; }
a.btn { text-decoration:none; display:inline-flex; align-items:center; }

/* ---------- check-ins ---------- */
.energy-row { display:flex; gap:8px; justify-content:center; margin:6px 0 4px; }
.energy-dot { width:46px; height:46px; border-radius:12px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-family:var(--mono); font-size:16px; cursor:pointer; transition:.15s; }
.energy-dot:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.energy-ends { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 4px; }

/* ---------- habits / groups ---------- */
.hint { font-family:var(--mono); font-size:10px; color:var(--dim); margin:-6px 0 14px; line-height:1.5; }
.grp { border:1px solid var(--border); border-radius:12px; background:var(--panel); margin-bottom:12px; box-shadow:var(--sh); padding:14px 16px; }
.grp-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.grp-head .nm { font-weight:600; font-size:14px; flex:1; }
.grp-items { border-top:1px dashed var(--border); padding-top:8px; }
.hb { display:flex; flex-direction:column; gap:6px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.hb:last-child { border-bottom:none; }
.hb-top { display:flex; align-items:center; gap:7px; }
.hb-nm { font-size:14px; flex:1; min-width:0; }
.hb-tag { font-size:9px; padding:1px 6px; border-radius:5px; flex-shrink:0; }
.hb-tag.avoid { background:rgba(217,83,79,.15); color:#e0746f; }
.hb-tag.time { background:rgba(127,127,127,.15); color:var(--dim); }
.icon-btn.kebab { width:26px; height:26px; font-size:16px; flex-shrink:0; margin-left:auto; }
.hb-bot { display:flex; align-items:center; gap:13px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.icon-btn.qlog { width:24px; height:24px; font-size:12px; margin-left:auto; }
.dot7 { display:inline-flex; gap:3px; align-items:center; }
.dot7 i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot7 i.win { background:#4caf72; }
.dot7 i.miss { background:#e0746f; }
.dot7 i.skip { background:var(--dim); opacity:.5; }
.dot7 i.none { background:transparent; border:1px solid var(--border); }
.menu-sheet { display:flex; flex-direction:column; gap:8px; margin:6px 0 12px; }
.menu-sheet .btn { width:100%; text-align:left; }
.menu-sheet .btn.danger:hover { border-color:#e0746f; color:#e0746f; }
.ms-tag { font-family:var(--mono); font-size:8px; padding:1px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.ms-tag.routine { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent); }
.ms-tag.system { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-bd); }
.bf-list { max-height:300px; overflow-y:auto; margin-bottom:14px; }
.bf-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:12px; border-bottom:1px solid var(--border-soft); }
.bf-row select { background:var(--panel-2); border:1px solid var(--border); color:var(--text); padding:5px 8px; border-radius:7px; font-size:12px; }

/* ---------- routines ---------- */
.rt { display:flex; align-items:center; gap:11px; border:1px solid var(--border); border-radius:11px; background:var(--panel); padding:12px 14px; margin-bottom:9px; box-shadow:var(--sh); }
.rt-main { flex:1; }
.rt-nm { font-weight:600; font-size:13.5px; }
.rt-sub { font-family:var(--mono); font-size:9.5px; color:var(--dim); margin-top:3px; }
.rt-due { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em; }
.rt-due.ok { color:var(--accent); background:var(--accent-soft); }
.rt-due.due { color:var(--med); background:rgba(251,191,36,.12); }
.rt-due.over { color:var(--high); background:rgba(248,113,113,.12); }
.rt-due.never { color:var(--dim); background:var(--panel-3); }

/* ---------- integrity badge ---------- */
.integrity { display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:13px; padding:14px 18px; margin-bottom:16px; background:var(--panel); box-shadow:var(--sh); }
.integrity .iv { font-family:var(--mono); font-size:30px; font-weight:600; line-height:1; }
.integrity .iv small { font-size:13px; color:var(--dim); }
.integrity.good .iv { color:var(--accent); }
.integrity.mid .iv { color:var(--med); }
.integrity.low .iv { color:var(--high); }
.integrity .il b { font-size:12px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:3px; }
.integrity .il span { font-family:var(--mono); font-size:10px; color:var(--dim); }

/* ---------- tapped button flash ---------- */
.modal button.tapped, .energy-dot.tapped { background:var(--accent) !important; border-color:var(--accent) !important; color:#06231f !important; transform:scale(.96); }
.integrity .tr { font-size:16px; margin-left:8px; }
.integrity .tr.up { color:var(--accent); }
.integrity .tr.down { color:var(--high); }
.integrity .tr.flat { color:var(--dim); }

/* ---------- countdowns ---------- */
.cd { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:11px; background:var(--panel); padding:11px 14px; margin-bottom:8px; box-shadow:var(--sh); }
.cd-ic { font-size:15px; }
.cd-main { flex:1; }
.cd-nm { font-size:13px; font-weight:500; }
.cd-note { font-size:11px; color:var(--muted); margin-top:2px; }
.cd-when { font-family:var(--mono); font-size:9.5px; color:var(--dim); margin-top:2px; }
.cd-left { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.cd-left.ok { color:var(--accent); background:var(--accent-soft); }
.cd-left.soon { color:var(--low); background:rgba(96,165,250,.12); }
.cd-left.due { color:var(--med); background:rgba(251,191,36,.12); }
.cd-left.over { color:var(--high); background:rgba(248,113,113,.12); }
.cd-auto { font-family:var(--mono); font-size:8px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }

/* ---------- notes ---------- */
.note { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:14px 16px; margin-bottom:10px; box-shadow:var(--sh); }
.note.locked { border-color:var(--gold-bd); }
.note-text { font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.note-foot { display:flex; align-items:center; gap:8px; margin-top:10px; }
.note-foot .tags { flex:1; display:flex; flex-wrap:wrap; gap:5px; }
.tag { font-family:var(--mono); font-size:9.5px; color:var(--accent); background:var(--accent-soft); padding:2px 7px; border-radius:5px; }
.note-actions { display:flex; align-items:center; gap:6px; }
.lock-tog { cursor:pointer; font-size:14px; }
.note-when { font-family:var(--mono); font-size:9px; color:var(--dim); margin-top:6px; }
.note textarea, .modal textarea { background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-family:var(--sans); font-size:13px; padding:10px 11px; border-radius:9px; outline:none; resize:vertical; width:100%; }
.modal textarea:focus { border-color:var(--accent); }
.lock-banner { font-family:var(--mono); font-size:11px; color:var(--gold); background:var(--gold-bg); border:1px solid var(--gold-bd); padding:9px 12px; border-radius:9px; margin-bottom:12px; }
.pin-err { color:var(--high); font-family:var(--mono); font-size:11px; min-height:14px; margin-bottom:8px; }

/* ---------- habit archive ---------- */
.archive-btn { cursor:pointer; font-size:14px; color:var(--dim); line-height:1; }
.archive-btn:hover { color:var(--accent); }
.archived-hb { opacity:.72; }
.arch-grp { font-family:var(--mono); font-size:9px; color:var(--dim); background:var(--panel-3); padding:1px 6px; border-radius:4px; }

/* ---------- discipline / leaks ---------- */
.leak-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.leak-card { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:14px 16px; box-shadow:var(--sh); }
.leak-top { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:10px; }
.leak-top b { font-weight:600; }
.leak-rows { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.leak-rows > div { display:flex; flex-direction:column; gap:2px; text-align:center; background:var(--panel-2); border-radius:8px; padding:7px 4px; }
.leak-rows span { font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.leak-rows i { font-family:var(--mono); font-size:10px; color:var(--text); font-style:normal; }
.known-msg { font-family:var(--mono); font-size:10px; color:var(--accent); margin:-8px 0 12px; min-height:13px; }
.recent { margin-top:4px; }
.rec-row { display:flex; justify-content:space-between; font-size:12px; padding:7px 2px; border-bottom:1px solid var(--border-soft); }
.rec-meta { font-family:var(--mono); font-size:10px; color:var(--dim); }
.unavoid { font-family:var(--mono); font-size:8px; color:var(--dim); background:var(--panel-3); padding:1px 5px; border-radius:4px; }

/* ---------- rating dots (challenge + completion quality) ---------- */
.rate-row { display:flex; gap:5px; flex-wrap:wrap; }
.rate-dot { width:30px; height:30px; border-radius:7px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted); font-family:var(--mono); font-size:12px; cursor:pointer; transition:.12s; }
.rate-dot:hover { border-color:var(--accent); }
.rate-dot.on { background:var(--accent); border-color:var(--accent); color:#06231f; }
.challenge-box { border:1px solid var(--border); border-radius:13px; background:var(--panel); padding:14px; margin-bottom:16px; box-shadow:var(--sh); }
.ch-avg { font-family:var(--mono); font-size:10px; color:var(--accent); text-align:right; margin-top:4px; }
.cx { cursor:pointer; color:var(--high); }

/* ---------- report ---------- */
.rep-note { font-family:var(--mono); font-size:10px; color:var(--dim); margin:-6px 0 14px; }
.rep-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.rep-stat { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:14px 6px; text-align:center; box-shadow:var(--sh); }
.rep-stat b { font-family:var(--mono); font-size:18px; color:var(--accent); display:block; }
.rep-stat small { font-family:var(--mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); display:block; margin-top:4px; }
@media (max-width:520px){ .rep-grid { grid-template-columns:repeat(2,1fr); } .leak-rows { gap:4px; } }

/* ---- plan gate ---- */
#gateOverlay {
  position:fixed; inset:0; z-index:9999; display:none;
  background:var(--bg); overflow-y:auto; padding:28px 18px;
}
.gate-wrap { max-width:560px; margin:0 auto; }
.gate-title { font-size:21px; font-weight:600; letter-spacing:.02em; margin:6px 0 4px; }
.gate-sub { color:var(--dim); font-size:13px; margin-bottom:20px; }
.plan-list { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.plan-row {
  display:flex; align-items:center; gap:11px; padding:12px 13px;
  background:var(--panel); border:1px solid var(--border); border-radius:11px; cursor:pointer;
}
.plan-row input { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.plan-nm { flex:1; font-size:14px; }
.plan-proj { font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
.gate-actions {
  display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0;
  padding:14px 0 4px; background:linear-gradient(transparent, var(--bg) 30%);
}
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---- collapsible sections ---- */
.collapse-head {
  cursor:pointer; user-select:none; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--dim); padding:8px 2px; display:flex; align-items:center; gap:7px;
}
.collapse-head:hover { color:var(--muted); }
.collapse-head .caret { font-size:10px; }

/* ---- weekly review card ---- */
.review-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 15px; margin-bottom:6px; }
.rv-row { display:flex; align-items:center; gap:10px; padding:5px 0; }
.rv-row + .rv-row { border-top:1px solid var(--border); }
.rv-k { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); min-width:120px; }
.rv-v { font-size:14px; flex:1; }
.rv-grade { font-size:10px; padding:2px 9px; border-radius:6px; text-transform:uppercase; letter-spacing:.06em; }
.rv-grade.done { background:var(--accent-soft); color:var(--accent); }
.rv-grade.partly { background:rgba(212,160,23,.18); color:var(--gold,#d4a017); }
.rv-grade.no { background:rgba(217,83,79,.16); color:#e0746f; }

/* ---- tracked metric journey ---- */
.metric { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin-bottom:9px; }
.metric-top { display:flex; align-items:center; gap:9px; }
.metric-nm { font-size:14px; font-weight:500; flex:1; }
.metric-vals { font-family:var(--mono); font-size:11px; color:var(--muted); }
.journey { position:relative; height:6px; border-radius:3px; background:var(--border); margin:11px 0 7px; }
.journey-fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; }
.journey-dot { position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--bg); }
.metric-foot { display:flex; justify-content:space-between; font-size:9.5px; color:var(--dim); letter-spacing:.04em; }

/* ---- home dashboard ---- */
.hero { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px 16px 16px; text-align:center; margin-bottom:10px; }
.hero-num { font-family:var(--mono); font-size:52px; font-weight:600; line-height:1; color:var(--accent); }
.hero-lbl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:6px; }
.hero-partial { font-size:9px; color:var(--dim); margin-top:3px; }
.pchips { display:flex; gap:6px; margin-top:16px; }
.pchip { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 2px; }
.pchip b { display:block; font-family:var(--mono); font-size:14px; }
.pchip small { font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); }
.plan-line { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--panel); border:1px solid var(--border); border-radius:10px; margin-bottom:7px; }
.plan-line.done .plan-nm { text-decoration:line-through; color:var(--dim); }
.plan-check { width:20px; height:20px; border:1.5px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--accent); font-size:13px; flex-shrink:0; }
.plan-line.done .plan-check { border-color:var(--accent); }
.plan-nm { flex:1; font-size:14px; }
.cat-mini { font-size:8.5px; padding:1px 6px; border-radius:5px; background:rgba(127,127,127,.15); color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.home-cols { display:grid; grid-template-columns:1fr; gap:4px; margin-top:18px; }
.cd-mini { display:flex; align-items:center; gap:7px; padding:8px 9px; background:var(--panel); border:1px solid var(--border); border-radius:9px; margin-bottom:6px; font-size:12px; }
.cdm-nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-mini { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:11px 12px; margin-bottom:8px; }
.mm-top { display:flex; justify-content:space-between; font-size:12px; margin-bottom:9px; }
.mm-v { font-family:var(--mono); color:var(--muted); font-size:11px; }

/* ---- schedule (clock day-calendar) ---- */
.sched-bar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sched-date { font-family:var(--mono); font-size:13px; font-weight:500; min-width:130px; }
.btn.sm { padding:6px 11px; font-size:12px; }
.sched-scroll { max-height:70vh; overflow-y:auto; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.sched-grid { position:relative; margin-left:46px; }
.hour-line { position:absolute; left:0; right:0; border-top:1px solid var(--border); }
.hour-lbl { position:absolute; left:-44px; top:-7px; font-family:var(--mono); font-size:9.5px; color:var(--dim); }
.sched-block {
  position:absolute; left:6px; right:8px; background:var(--bg); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:7px; padding:4px 8px; overflow:hidden; cursor:pointer; z-index:2;
}
.sched-block:hover { border-color:var(--accent); }
.sb-nm { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-tm { font-family:var(--mono); font-size:9px; color:var(--dim); }
.now-line { position:absolute; left:0; right:0; border-top:2px solid #e0746f; z-index:3; }
.now-line::before { content:''; position:absolute; left:-4px; top:-4px; width:7px; height:7px; border-radius:50%; background:#e0746f; }

/* ---- home: next 2 hours ---- */
.next2-wrap { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 13px; margin-bottom:10px; }
.next2-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.next2-block { display:flex; align-items:center; gap:10px; padding:7px 9px; background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; margin-bottom:6px; }
.next2-block:last-child { margin-bottom:0; }
.n2-tm { font-family:var(--mono); font-size:10px; color:var(--muted); min-width:78px; }
.n2-nm { font-size:13px; }

/* ---- templates + completed archive ---- */
.tpl-list { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; max-height:50vh; overflow-y:auto; }
.tpl-row { display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--bg); border:1px solid var(--border); border-radius:9px; }
.tpl-nm { flex:1; font-size:13px; }
.tpl-cnt { font-size:10px; color:var(--dim); }
.arch-row { display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--panel); border:1px solid var(--border); border-radius:8px; margin-bottom:5px; }
.arch-nm { flex:1; font-size:13px; color:var(--muted); }
.arch-proj { font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }