:root{
  --ink:#17301c; --paper:#f6f5ee; --sage:#e6ece2; --card:#fff;
  --line:#e6eae2; --line-2:#eaeee5; --line-3:#dde4d8; --line-4:#c7d4c3;
  --muted:#8b988a; --muted-2:#a3afa1; --muted-3:#7c8a79; --muted-4:#6b7a68; --muted-5:#93a190;
  --accent:#c9e3a8; --now:#e07a5f;
  --brico:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,Menlo,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sage);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
body{min-height:100vh;min-height:100dvh;overscroll-behavior-y:contain;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#cbd6c6;border-radius:3px}

.frame[hidden]{display:none!important}

/* ---------- MOBILE ---------- */
.frame-mobile{
  display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--paper);
  max-width:520px;margin:0 auto;position:relative;
}
.mobile-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;padding-top:env(safe-area-inset-top)}
.mobile-nav{
  flex:0 0 auto;background:#fff;border-top:1px solid var(--line);
  padding:9px 12px calc(20px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0;cursor:pointer;background:none;border:0}
.nav-icon{width:22px;height:22px;border-radius:7px;background:#dde4d8;transition:background .15s,border-radius .15s}
.nav-item.on .nav-icon{background:var(--ink);border-radius:8px}
.nav-lbl{font-size:9.5px;font-weight:600;color:#9aa798}
.nav-item.on .nav-lbl{font-weight:700;color:var(--ink)}

/* ---------- DESKTOP ---------- */
.frame-desktop{display:flex;height:100vh;height:100dvh;background:#fff}
.desktop-side{
  flex:0 0 232px;background:#eef1ea;border-right:1px solid #e2e7dd;
  padding:18px 14px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;
}
.desktop-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.desktop-header{
  flex:0 0 auto;padding:18px 26px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.desktop-body{flex:1;min-height:0;display:flex}
.desktop-canvas{flex:1;min-width:0;overflow-y:auto;padding:18px 26px 26px}
.desktop-rail{
  flex:0 0 268px;border-left:1px solid var(--line);background:#fff;
  padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}
@media (max-width:1000px){
  .desktop-rail{display:none}
}
@media (max-width:820px){
  .frame-desktop{display:none}
}
@media (min-width:821px){
  .frame-mobile{display:none!important}
}

/* ---------- shared components ---------- */
.hgroup{display:flex;flex-direction:column;gap:4px}
.h1{font-family:var(--brico);font-weight:800;font-size:25px;letter-spacing:-0.02em;color:var(--ink);margin:0}
.h1-lg{font-size:32px}
.sub{font-size:12px;color:var(--muted)}
.pad{padding:6px 20px 24px;display:flex;flex-direction:column;gap:16px}

.check{
  width:20px;height:20px;min-width:20px;border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;
  border:1.5px solid var(--line-4);background:transparent;color:var(--accent);
  transition:background .12s,border-color .12s;
}
.check.on{border-color:var(--ink);background:var(--ink)}

.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.01em;width:fit-content}
.stage-badge{display:inline-flex;padding:3px 9px;border-radius:8px;background:#eef1ea;color:#5d6c5b;font-size:10.5px;font-weight:700}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-sm{width:6px;height:6px}
.dot-md{width:8px;height:8px}

.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.card-lg{border-radius:22px;padding:16px}

.pill-tab{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:var(--muted-4);border:1px solid var(--line);white-space:nowrap}
.pill-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.title.done{color:var(--muted-2);text-decoration:line-through}

.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:600;z-index:80;box-shadow:0 10px 30px -10px rgba(23,48,28,.4);
}
.toast[hidden]{display:none}

/* HOME hero */
.hero{position:relative;border-radius:26px;background:#d5e9d4;padding:22px 22px 24px;overflow:hidden}
.hero .blob1{position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:#c4e0c2}
.hero .blob2{position:absolute;right:34px;top:52px;width:44px;height:44px;border-radius:50%;background:#fbe8c0}
.hero .inner{position:relative}
.hero .date{font-size:12px;font-weight:600;color:#4a6349;letter-spacing:.02em}
.hero .greet{font-family:var(--brico);font-weight:800;font-size:27px;line-height:1.12;color:var(--ink);letter-spacing:-0.02em;margin-top:4px;max-width:220px}
.hero .meta{font-size:13px;color:#41583f;margin-top:8px;max-width:220px;line-height:1.45}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border-radius:22px;background:#fff;border:1px solid var(--line);padding:16px}
.stat-hd{display:flex;align-items:center;gap:8px}
.stat-sw{width:22px;height:22px;border-radius:8px}
.stat-lbl{font-size:11px;font-weight:600;color:var(--muted-4)}
.stat-num{font-family:var(--brico);font-weight:800;font-size:26px;color:var(--ink);margin-top:10px}
.stat-sub{font-size:11px;color:var(--muted);margin-top:2px}
.stat-num .small{font-size:15px;color:var(--muted)}

.focus-strip{border-radius:22px;background:var(--ink);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.focus-strip .lbl{font-size:11px;font-weight:600;color:#9fc09c;letter-spacing:.04em;text-transform:uppercase}
.focus-strip .clock{font-family:var(--brico);font-weight:800;font-size:30px;color:var(--paper);letter-spacing:-0.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.focus-btn{padding:12px 20px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;border:0;transition:background .12s}
.focus-btn:hover{background:#d8eebd}

.section-hd{display:flex;align-items:baseline;justify-content:space-between}
.section-hd .ttl{font-family:var(--brico);font-weight:700;font-size:17px;color:var(--ink)}
.section-hd .link{cursor:pointer;font-size:12px;font-weight:600;color:#3f6b45;background:none;border:0}

.ag-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px 14px;cursor:pointer;text-align:left}
.ag-row:hover{border-color:var(--line-4)}
.ag-time{font-family:var(--mono);font-size:11px;color:var(--muted);width:42px;flex-shrink:0}
.ag-bar{width:4px;height:30px;border-radius:2px;flex-shrink:0}
.ag-body{flex:1;min-width:0}
.ag-title{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-meta{font-size:11px;color:var(--muted);margin-top:1px}

/* TODAY timeline */
.today-hd{padding:6px 20px 12px;display:flex;flex-direction:column;gap:12px;background:var(--paper);position:sticky;top:0;z-index:5}
.today-hd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tab-strip{display:flex;gap:6px;flex-wrap:wrap}
.tl-wrap{position:relative;padding:0 16px 16px}
.tl-inner{position:relative}
.tl-hour{position:relative;height:60px;border-top:1px solid var(--line)}
.tl-hour-lbl{position:absolute;left:0;top:-8px;font-family:var(--mono);font-size:10px;color:var(--muted-2);background:var(--paper);padding-right:6px}
.tl-now{position:absolute;left:46px;right:0;height:2px;background:var(--now);z-index:4;pointer-events:none}
.tl-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--now)}
.tl-block{position:absolute;left:46px;right:0;cursor:pointer;border-radius:14px;padding:8px 11px;overflow:hidden;box-shadow:0 1px 0 rgba(23,48,28,.04);display:flex;flex-direction:column;gap:0}
.tl-block.compact{padding:4px 11px;border-radius:11px;flex-direction:row;align-items:center;gap:8px}
.tl-block .b-title{font-size:12.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-block .b-range{font-size:10.5px;opacity:.72;margin-top:2px}
.tl-block.compact .b-range{margin:0 0 0 auto;white-space:nowrap}
.tl-hour.drag-over{background:rgba(199,212,195,.35)}

.inbox-dock{padding:4px 16px 20px}
.inbox-dock .box{border-radius:22px;background:var(--sage);padding:14px 14px 16px}
.inbox-dock .box-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.inbox-dock .box-hd .l{font-size:12px;font-weight:700;color:var(--ink)}
.inbox-dock .box-hd .r{font-size:11px;color:var(--muted-3)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line-3);font-size:12px;font-weight:600;color:var(--ink);cursor:grab;user-select:none}
.chip .duLbl{opacity:.55;font-weight:500}
.chip[data-dragging="1"]{opacity:.5}

/* INBOX list */
.cat-pills{display:flex;gap:7px;flex-wrap:wrap}
.cat-pill{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:700}

.task-row{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.task-row .body{flex:1;min-width:0;cursor:pointer;background:none;border:0;text-align:left;padding:0}
.task-row .meta{display:flex;gap:7px;align-items:center;margin-top:6px;flex-wrap:wrap}
.task-row .when{font-size:11px;color:var(--muted-2)}
.task-row .du{font-family:var(--mono);font-size:11px;color:var(--muted-2);padding-top:3px}

/* VIEWS */
.view-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 20px 4px}
.grp{display:flex;flex-direction:column;gap:8px}
.grp-hd{display:flex;align-items:center;gap:8px}
.grp-hd .n{font-size:12px;font-weight:700;color:var(--ink)}
.grp-hd .c{font-size:11px;color:var(--muted-2)}
.mini-row{display:flex;align-items:center;gap:11px;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.mini-row .ttl{flex:1;cursor:pointer;background:none;border:0;text-align:left;padding:0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;min-width:0}
.mini-row .ttl.done{color:var(--muted-2);text-decoration:line-through}
.mini-row .du{font-family:var(--mono);font-size:11px;color:var(--muted-2)}

.tbl{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.tbl-hd{display:grid;background:#eef1ea;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-3);gap:6px}
.tbl-row{display:grid;align-items:center;padding:11px 12px;border-top:1px solid #f0f2ec;gap:6px}
.m-tbl-hd,.m-tbl-row{grid-template-columns:1.6fr 0.8fr 0.6fr}
.d-tbl-hd,.d-tbl-row{grid-template-columns:2.4fr 1fr 1fr 0.7fr 1fr}
.tbl-row .tt{font-size:12.5px;cursor:pointer;background:none;border:0;text-align:left;padding:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbl-row .tt.done{color:var(--muted-2);text-decoration:line-through}
.d-tbl-row:hover{background:#fbfbf7}
.d-tbl-row .tt{font-size:13px}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px}
.gal-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;text-align:left;display:flex;flex-direction:column;position:relative}
.gal-card.done{opacity:.7}
.gal-thumb{height:56px;border-radius:14px;display:flex;align-items:flex-end;padding:8px;cursor:pointer;position:relative}
.gal-thumb .knob{
  width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--ink);cursor:pointer;transition:background .12s;
}
.gal-thumb .knob:hover{background:#fff}
.gal-thumb .knob.on{background:var(--ink);color:var(--accent)}
.gal-body{background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.gal-card .gt{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;margin-top:10px}
.gal-card .gt.done{color:var(--muted-2);text-decoration:line-through}
.gal-card .gm{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;color:var(--muted)}
.d-gallery{grid-template-columns:repeat(4,1fr);gap:14px;padding:0}
.d-gallery .gal-thumb{height:84px;padding:10px}
.d-gallery .gal-thumb .knob{width:26px;height:26px;border-radius:9px;font-size:14px}
.d-gallery .gt{font-size:13.5px;margin-top:11px}
.d-gallery .gm{font-size:11px}
@media (max-width:600px){.d-gallery{grid-template-columns:1fr 1fr}}

.wk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:0 16px}
.wk-col{display:flex;flex-direction:column;gap:5px}
.wk-hd{text-align:center}
.wk-hd .dow{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--muted-2);text-transform:uppercase}
.wk-hd .num{font-family:var(--brico);font-weight:800;font-size:15px;margin-top:2px;color:var(--ink)}
.wk-hd.today .num{background:var(--ink);color:var(--paper);border-radius:9px;display:inline-block;padding:1px 7px}
.wk-mini{border-radius:8px;padding:4px 5px;font-size:9px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mo-wrap{padding:0 16px}
.mo-title{font-family:var(--brico);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:10px}
.mo-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.mo-dows div{text-align:center;font-size:9.5px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.mo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mo-cell{min-height:52px;border-radius:11px;padding:6px;background:#fff;border:1px solid var(--line-2)}
.mo-cell.oth{background:#f1f3ed}
.mo-cell.today{background:#d5e9d4;border-color:#bcd8ba}
.mo-cell .n{font-family:var(--brico);font-weight:600;font-size:12px;color:var(--ink)}
.mo-cell.oth .n{color:#bcc6b9}
.mo-cell.today .n{font-weight:800}
.mo-cell .dotrow{display:flex;gap:2px;margin-top:4px;flex-wrap:wrap}

/* ROUTINES */
.routine-card{border-radius:24px;background:#fff;border:1px solid var(--line);padding:20px}
.routine-card.hi{background:#d5e9d4;border-color:#c6dcc4}
.routine-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.routine-hd .nm{font-family:var(--brico);font-weight:700;font-size:17px;color:var(--ink)}
.routine-hd .mt{font-size:11.5px;color:#5d6c5b;margin-top:2px}
.routine-badge{padding:6px 12px;border-radius:999px;background:#eef1ea;font-size:11.5px;font-weight:700;color:var(--ink)}
.routine-card.hi .routine-badge{background:rgba(23,48,28,.1)}
.routine-bar{height:6px;border-radius:3px;background:rgba(23,48,28,.08);margin-top:14px;overflow:hidden}
.routine-bar .fill{height:100%;border-radius:3px;background:var(--ink);transition:width .2s}
.routine-steps{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.routine-step{display:flex;align-items:center;gap:11px;padding:9px 2px;cursor:pointer;background:none;border:0;text-align:left}
.routine-step .lbl{font-size:13.5px;font-weight:500;color:var(--ink)}
.routine-step .lbl.done{color:var(--muted);text-decoration:line-through}
.routine-step .du{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}
.routine-new{border-radius:22px;border:1.5px dashed var(--line-4);padding:18px;text-align:center;color:var(--muted-4);font-size:12.5px;font-weight:600;background:none;width:100%;cursor:pointer}

/* DETAIL SHEET */
.sheet-backdrop{position:fixed;inset:0;background:rgba(23,48,28,.35);z-index:20;animation:fadeIn .18s ease-out}
.sheet-outer{
  position:fixed;inset:0;z-index:21;display:flex;pointer-events:none;
  align-items:flex-end;justify-content:center;
}
.sheet{
  position:relative;background:var(--paper);
  border-radius:30px 30px 0 0;padding:14px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(23,48,28,.18);max-height:88vh;overflow-y:auto;
  width:100%;max-width:520px;pointer-events:auto;
  animation:slideUp .22s ease-out;
}
@media (min-width:821px){
  .sheet-outer{align-items:center;padding:24px}
  .sheet{max-width:560px;border-radius:22px;max-height:82vh;padding:22px 26px 26px;
    animation:pop .18s ease-out;box-shadow:0 30px 80px -20px rgba(23,48,28,.4);
  }
  .sheet .grabber{display:none}
}
.sheet .grabber{width:40px;height:4px;border-radius:2px;background:#d3dbcf;margin:0 auto 16px}
.sheet .title-lg{font-family:var(--brico);font-weight:800;font-size:24px;line-height:1.15;color:var(--ink);letter-spacing:-0.02em;margin-top:10px}
.sheet .chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sheet .chip-info{padding:8px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:11.5px;color:#5d6c5b;font-weight:600}
.sheet .kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-3)}
.sheet .sub-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sheet .sub-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;cursor:pointer;text-align:left;width:100%;border-style:solid}
.sheet .stages{display:flex;gap:6px;margin-top:8px}
.sheet .stage-btn{flex:1;text-align:center;padding:10px 4px;border-radius:12px;font-size:11.5px;font-weight:700;cursor:pointer;background:#fff;color:var(--muted-4);border:1px solid var(--line)}
.sheet .stage-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sheet .actions{display:flex;gap:10px;margin-top:22px}
.sheet .btn-dark{flex:1;text-align:center;padding:15px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:700;cursor:pointer;border:0}
.sheet .btn-lime{padding:15px 20px;border-radius:16px;background:var(--accent);color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer;border:0}
.sheet .field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.sheet .field label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-3)}
.sheet .field input,.sheet .field select,.sheet .field textarea{
  width:100%;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:14px;color:var(--ink);
}
.sheet .field textarea{min-height:70px;resize:vertical;font-family:inherit}
.sheet .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet .add-sub{display:flex;gap:8px;margin-top:8px}
.sheet .add-sub input{flex:1;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:13px}
.sheet .add-sub button{padding:9px 14px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;border:0}
.sheet .danger{margin-top:14px;color:#c15452;font-size:12px;font-weight:600;background:none;border:0;cursor:pointer;padding:6px 0}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-del{
  width:36px;height:36px;border-radius:12px;background:#fff;border:1px solid var(--line);
  cursor:pointer;font-size:16px;line-height:1;color:#c15452;padding:0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sheet-del:hover{background:#fdecec;border-color:#e5b0af;color:#a03e3d}

/* Row delete button — always shown on mobile (tap targets), hover-reveal on desktop */
.row-del{
  width:26px;height:26px;border-radius:8px;background:none;border:0;cursor:pointer;
  color:var(--muted-2);font-size:18px;line-height:1;padding:0;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.row-del:hover{background:#fdecec;color:#c15452}
@media (min-width:821px){
  .row-del{opacity:0;transition:opacity .12s}
  .task-row:hover .row-del,
  .mini-row:hover .row-del,
  .tbl-row:hover .row-del{opacity:1}
}

/* Reset button — small icon next to Start/Pause */
.reset-btn{
  width:38px;height:38px;border-radius:999px;background:#fff;border:1px solid var(--line);
  cursor:pointer;font-size:16px;line-height:1;color:var(--ink);padding:0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.reset-btn:hover{background:#f0f2ed;border-color:var(--line-4)}
.reset-btn-dk{
  flex:0 0 32px;width:32px;padding:0;font-size:14px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--paper);
}
.reset-btn-dk:hover{background:rgba(255,255,255,.16)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- DESKTOP-SPECIFIC ---------- */
.brand{display:flex;align-items:center;gap:9px;padding:0 6px}
.brand .lights{display:flex;gap:6px;margin-right:6px}
.brand .lights div{width:10px;height:10px;border-radius:50%}
.brand .name{font-family:var(--brico);font-weight:800;font-size:15px;color:var(--ink)}

.d-nav{display:flex;flex-direction:column;gap:2px}
.d-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;background:none;border:0;text-align:left;width:100%}
.d-nav-item.on{background:#fff;font-weight:700}
.d-nav-item .d{width:8px;height:8px;border-radius:3px;background:#bdc9b8}
.d-nav-item.on .d{background:var(--ink)}

.d-cats-hd{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-5);padding-left:10px;margin-bottom:8px}
.d-cat{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;font-size:12.5px;color:#3d4c3c;cursor:pointer;background:none;border:0;text-align:left;width:100%;font-weight:500}
.d-cat:hover{background:#e5eae0}
.d-cat.on{background:#fff;font-weight:700}
.d-cat .c{margin-left:auto;font-size:11px;color:var(--muted-2)}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;
}
.filter-chip .x{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:rgba(255,255,255,.18);color:var(--paper);
  border:0;cursor:pointer;font-size:12px;line-height:1;padding:0;
}
.filter-chip .x:hover{background:rgba(255,255,255,.3)}

/* Timer duration select — small, on the sidebar and mobile focus strip */
.mins-select{
  background:rgba(255,255,255,.08);color:var(--paper);border:1px solid rgba(255,255,255,.16);
  padding:6px 8px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;
}
.mins-select option{background:var(--ink);color:var(--paper)}
.mobile-mins{
  background:rgba(255,255,255,.1);color:var(--paper);border:1px solid rgba(255,255,255,.2);
  padding:5px 8px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;
}
.mobile-mins option{background:var(--ink);color:var(--paper)}
.focus-strip .col{display:flex;flex-direction:column;gap:4px;min-width:0}
.focus-strip .btns{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

.d-focus{margin-top:auto;border-radius:16px;background:var(--ink);padding:14px;color:var(--paper)}
.d-focus .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fc09c}
.d-focus .clock{font-family:var(--brico);font-weight:800;font-size:26px;letter-spacing:-0.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.d-focus .btn{margin-top:10px;text-align:center;padding:9px;border-radius:10px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;border:0;width:100%}

.d-title{font-family:var(--brico);font-weight:800;font-size:22px;letter-spacing:-0.02em;white-space:nowrap;color:var(--ink);margin:0}
.d-sub{font-size:12px;color:var(--muted);margin-top:1px}

/* desktop week grid */
.d-wk-hd{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));gap:0}
.d-wk-hd .col{padding-bottom:10px;text-align:center}
.d-wk-hd .dow{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--muted-2);text-transform:uppercase}
.d-wk-hd .num{font-family:var(--brico);font-weight:800;font-size:19px;margin-top:3px;color:var(--ink)}
.d-wk-hd .col.today .num{background:var(--ink);color:var(--paper);border-radius:11px;display:inline-block;padding:2px 10px}
.d-wk-grid{position:relative;display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr))}
.d-wk-hcol div.h{height:52px;position:relative}
.d-wk-hcol span{position:absolute;top:-7px;font-family:var(--mono);font-size:10px;color:var(--muted-2)}
.d-wk-col{position:relative;border-left:1px solid var(--line-2)}
.d-wk-col.today{background:#fbfbf7}
.d-wk-col .hr{height:52px;border-top:1px solid var(--line-2)}
.d-wk-block{position:absolute;left:3px;right:3px;border-radius:10px;padding:5px 7px;overflow:hidden;display:flex;flex-direction:column}
.d-wk-block.compact{padding:3px 7px;border-radius:8px;flex-direction:row;align-items:center;gap:6px}
.d-wk-block .b-title{font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-wk-block .b-range{font-size:9.5px;opacity:.7}
.d-wk-block.compact .b-range{margin:0 0 0 auto;font-size:9px;white-space:nowrap}

.d-mo-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px}
.d-mo-dows div{font-size:10px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;padding-left:4px}
.d-mo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.d-mo-cell{min-height:96px;border-radius:14px;padding:9px;background:#fff;border:1px solid var(--line-2)}
.d-mo-cell.oth{background:#f1f3ed}
.d-mo-cell.today{background:#d5e9d4;border-color:#bcd8ba}
.d-mo-cell .n{font-family:var(--brico);font-weight:600;font-size:12px;color:var(--ink)}
.d-mo-cell.oth .n{color:#bcc6b9}
.d-mo-cell.today .n{font-weight:800}
.d-mo-cell .ev{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.d-mo-cell .ev div{border-radius:7px;padding:3px 6px;font-size:9.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* desktop planner (weekly review) */
.d-planner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:20px}
@media (max-width:1200px){.d-planner{grid-template-columns:1fr}}
.dp-card{border-radius:20px;background:#fff;border:1px solid var(--line);padding:20px}
.dp-title{font-family:var(--brico);font-weight:700;font-size:17px;color:var(--ink)}
.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.dp-stat{border-radius:14px;padding:14px}
.dp-stat .n{font-family:var(--brico);font-weight:800;font-size:24px;color:var(--ink)}
.dp-stat .l{font-size:11px;margin-top:2px}
.dp-bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:22px}
.dp-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.dp-bars .bar{width:100%;border-radius:8px 8px 3px 3px}
.dp-bars .dow{font-size:10px;color:var(--muted-2);font-weight:600}
.dp-notes{font-size:13px;line-height:1.65;color:#4a5a49}
.dp-dark{border-radius:20px;background:var(--ink);padding:20px;color:var(--paper)}
.dp-dark .k{font-family:var(--brico);font-weight:700;font-size:17px}
.dp-adh{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.dp-adh .row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px}
.dp-adh .row span:last-child{color:#9fc09c}
.dp-adh .bar-bg{height:6px;border-radius:3px;background:rgba(246,245,238,.16);overflow:hidden}
.dp-adh .bar-fill{height:100%;border-radius:3px;background:var(--accent)}

/* desktop rail */
.rail-hd{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-5)}
.rail-sub{font-size:11.5px;color:var(--muted-2);margin-top:2px}
.rail-list{display:flex;flex-direction:column;gap:8px}
.rail-chip{border:1px solid var(--line);border-radius:14px;padding:12px;cursor:grab;background:#fbfbf7;user-select:none}
.rail-chip:hover{border-color:var(--line-4)}
.rail-chip .t{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35}
.rail-chip .m{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:10.5px;color:var(--muted)}
.rail-today{border-radius:16px;background:#eef1ea;padding:14px}
.rail-today .list{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.rail-today .r{display:flex;gap:9px;align-items:center}
.rail-today .t{font-family:var(--mono);font-size:10.5px;color:var(--muted);width:38px}
.rail-today .b{width:3px;height:22px;border-radius:2px}
.rail-today .n{font-size:12px;color:#3d4c3c;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* new-task FAB */
.fab{
  position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:15;
  width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:400;
  box-shadow:0 12px 24px -8px rgba(23,48,28,.4);border:0;cursor:pointer;line-height:1;
}
@media (min-width:821px){.fab{bottom:24px}}