*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  /* Kill the default mobile tap overlay (a black rectangle that ignores
     border-radius) so press feedback follows each component's own shape. */
  html{-webkit-tap-highlight-color:transparent}
  /* M5: 100vh on mobile Safari reports the *maximum* visible area including the
     address bar, which pushes content behind the toolbar. Prefer 100dvh (dynamic
     viewport) and fall back to 100vh for browsers that don't support dvh. */
  body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 88px;background:var(--bg-0);color:var(--text-1);font-family:var(--font-sans);font-size:var(--fs-14);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  button{cursor:pointer;font-family:inherit;border:none;-webkit-tap-highlight-color:transparent}button:hover{filter:brightness(1.12)}
  /* Keyboard-focus outline. Modern browsers render `outline` so it follows
     the focused element's own `border-radius` automatically — no need (or
     correctness) in setting `border-radius:inherit` here, which would
     override each rounded control's own corners with the parent's (usually
     zero) value, producing a sharp rectangle on focused chips/pills. */
  *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  .task-checkbox:focus-visible{border-radius:50%}
  .toggle:focus-visible{border-radius:10px}
  input,select,textarea{font-family:inherit}
  ::selection{background:rgba(106,168,255,.25);color:var(--text-1)}
  /* Scrollbar — themed via tokens; light-theme override at body.light-theme below.
     A second hardcoded ::-webkit-scrollbar rule used to live below this and silently
     shadowed it at equal specificity (4px wide, hex color); removed so this wins. */
  *::-webkit-scrollbar{width:8px;height:8px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
  *::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
  @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
  @keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
  /* Task-card insertion: slides in when window._lastAddedTaskId matches.
     Two stacked animations: slideIn (transform/opacity) AND a backdrop halo
     (taskJustAdded) that pulses --accent-bg, then decays to default. The
     halo gives the eye a clear target after the slide settles, especially
     on long lists where the new card lands offscreen-bottom and the
     scrollIntoView only just got us there. */
  .task-item--enter{animation:slideIn .24s ease-out both,taskJustAdded 1.4s ease-out .24s both}
  @keyframes taskJustAdded{
    0%   {box-shadow:0 0 0 0 var(--accent-bg),inset 0 0 0 2px var(--accent-border);background:var(--accent-bg)}
    35%  {box-shadow:0 0 0 6px transparent,    inset 0 0 0 2px var(--accent-border);background:var(--accent-bg)}
    100% {box-shadow:0 0 0 0  transparent,    inset 0 0 0 0 transparent;            background:var(--bg-1)}
  }
  @media (prefers-reduced-motion:reduce){
    .task-item--enter{animation:none}
  }

  :root{
    /* Typography */
    --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    /* Surface colors — --bg-0 matches index.html theme-color + manifest theme/background (#0a1320) */
    --bg-0:#0a1320;
    --bg-1:#111a2c;
    --bg-2:#172335;
    --bg-3:#1e2c42;
    /* --border was identical to --bg-3 (#1e2c42), so card edges disappeared on
       hover. Lifted to #26344a so cards keep a visible separator in active
       states. --border-subtle preserves the previous value where the design
       intentionally wanted a near-invisible divider. */
    --border:#26344a;
    --border-subtle:#1e2c42;
    --border-strong:#2a3a54;
    /* Text — --text-3 was #6b7a8f (3.5:1 on --bg-0), failing WCAG 2.2 AA for
       normal text. Lifted to #8a98ad (4.6:1). --text-4 demoted to non-text use
       (dividers, dot indicators) — too low for any readable copy. */
    --text-1:#e8edf5;
    --text-2:#a8b3c5;
    --text-3:#8a98ad;
    --text-4:#6b7a8f;
    /* Accents */
    --accent:#6aa8ff;
    --accent-bg:rgba(106,168,255,.12);
    --accent-border:rgba(106,168,255,.3);
    --success:#30d158;
    --success-bg:rgba(48,209,88,.12);
    --success-border:rgba(48,209,88,.3);
    --warning:#ff9f0a;
    --warning-bg:rgba(255,159,10,.12);
    --warning-border:rgba(255,159,10,.3);
    --danger:#ff453a;
    --danger-bg:rgba(255,69,58,.12);
    --danger-border:rgba(255,69,58,.3);
    --purple:#bf5af2;
    --purple-bg:rgba(191,90,242,.12);
    --purple-border:rgba(191,90,242,.3);
    --pink:#ff375f;
    /* Phase colors (back-compat) */
    --work:var(--accent);--work-glow:rgba(106,168,255,.4);--work-bg:#0d1a2d;--work-border:#1a2d44;
    --short:var(--success);--short-glow:rgba(48,209,88,.4);--short-bg:#0d2818;--short-border:#1a4a2a;
    --long:var(--warning);--long-glow:rgba(255,159,10,.4);--long-bg:#1a1508;--long-border:#3a2a10;
    /* Life-area category accents (task chips + settings) */
    --cat-bodyMindSpirit:#a78bfa;
    --cat-relationships:#f87171;
    --cat-community:#fbbf24;
    --cat-jobLearningFinances:#34d399;
    --cat-interests:#60a5fa;
    --cat-personalCare:#f472b6;
    --cat-general:#94a3b8;
    /* Radii */
    --r-sm:6px;--r-md:10px;--r-lg:14px;
    /* Spacing — 4-pt baseline. Migrate components incrementally; literals in
       legacy rules continue to work. */
    --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
    --space-5:10px;--space-6:12px;--space-7:14px;--space-8:16px;
    --space-9:24px;--space-10:32px;
    /* Fluid type ramp — clamp() so phones see the floor, big screens scale up,
       no value drops below 11px (the smallest accessible body text). */
    --fs-12:clamp(11px,0.4vw + 10px,12px);
    --fs-13:clamp(12px,0.5vw + 11px,13px);
    --fs-14:clamp(13px,0.6vw + 12px,15px);
    --fs-16:clamp(14px,0.8vw + 12px,16px);
    --fs-20:clamp(18px,1.5vw + 14px,22px);
    --fs-32:clamp(26px,3vw + 16px,34px);
    --fs-48:clamp(36px,6vw + 12px,52px);
    /* Shadows */
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 4px 12px rgba(0,0,0,.25);
    --shadow-3:0 12px 32px rgba(0,0,0,.45);
    /* Animation easing language — unified across all transitions */
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
    --ease-in-out:cubic-bezier(0.45,0,0.55,1);
    --dur-fast:120ms;
    --dur-base:200ms;
    --dur-slow:320ms;
    /* Elevation shadow language — one shadow depth per surface tier */
    --shadow-card:0 1px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
    --shadow-raised:0 4px 16px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.14);
    --shadow-overlay:0 16px 48px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.22);
    /* Z-index stratification. Migrate hardcoded values as surfaces are touched.
       Dialog sits above modal so app-confirm/prompt overlays render over a task
       detail modal. Toast sits above dialog so destructive-action toasts remain
       visible. Cmdk sits above toast so the palette never gets occluded. */
    --z-sticky:5;
    --z-popover:100;
    --z-fab:500;
    --z-modal:1000;
    --z-dialog:1100;
    --z-toast:1200;
    --z-overlay:1450;
    --z-cmdk:1500;
    --z-skip-link:9999;
    /* Ring-time warn/done — token-driven so light-theme can override them.
       Dark values match the prior hardcoded #e8a838 / #ff5c4d that already
       cleared AA against the dark --work-bg. */
    --ring-warn-color:#e8a838;
    --ring-done-color:#ff5c4d;
    color-scheme:dark;
  }
  body.light-theme{
    color-scheme:light;
    --bg-0:#f4f6fa;--bg-1:#fff;--bg-2:#f8fafc;--bg-3:#e3e8f0;
    /* Light-theme border lifted off --bg-3 to keep card edges visible. */
    --border:#cfd6e1;--border-subtle:#e3e8f0;--border-strong:#c7d0de;
    /* --text-3 lifted from #64748b (4.3:1) to #475569 to clear AA on --bg-0. */
    --text-1:#0f172a;--text-2:#475569;--text-3:#475569;--text-4:#64748b;
    --work-bg:#f0f6fd;--work-border:#d0e3f7;
    --short-bg:#f0fdf4;--short-border:#d1f0dc;
    --long-bg:#fff9ed;--long-border:#fde6b8;
    --cat-bodyMindSpirit:#7c3aed;
    --cat-relationships:#dc2626;
    --cat-community:#d97706;
    --cat-jobLearningFinances:#059669;
    --cat-interests:#2563eb;
    --cat-personalCare:#db2777;
    --cat-general:#64748b;
    /* Ring-time on light --work-bg (#f0f6fd) needs deeper hues to clear AA at
       large-text thresholds (3:1). Burnt orange + brick red both pass. */
    --ring-warn-color:#b45309;
    --ring-done-color:#b91c1c;
  }

  .tabs{display:flex;gap:2px;margin-bottom:16px;background:#0a1320;border-radius:10px;padding:3px;border:1px solid #152238}
  .tab{flex:1;padding:8px 0;text-align:center;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border-radius:8px;background:0 0;color:#4a6a8a;transition:.2s}
  .tab.active{color:#e2e8f0}.tab.active.work{background:linear-gradient(135deg,#1a3a5c,#1e4a6e)}.tab.active.short{background:linear-gradient(135deg,#1a4a3a,#1e5e4a)}.tab.active.long{background:linear-gradient(135deg,#3a2a1a,#5a4020)}

  .card{position:relative;width:100%;border-radius:16px;padding:24px;margin-bottom:14px;box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03);transition:background .4s,border-color .4s}
  .ring-wrap{display:flex;justify-content:center;margin-bottom:8px;position:relative}
  .ring-svg{width:200px;height:200px;transform:rotate(-90deg)}
  /* Ring track lifted from #121e2e (1.05:1 vs work-bg) to a visible groove. */
  .ring-bg{fill:none;stroke:var(--bg-3);stroke-width:6}.ring-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .4s}
  .ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center}
  /* Done state lifted from #e74c3c to #ff5c4d for AA contrast on --work-bg. */
  .ring-time{font-size:48px;font-weight:800;letter-spacing:3px;transition:color .4s}
  /* Warn/done states use semantic tokens so light-theme can override without
     fighting !important. Previously these were hardcoded #e8a838/#ff5c4d which
     failed WCAG AA on the light --work-bg. */
  .ring-time.warn{color:var(--ring-warn-color);animation:pulse 1s infinite}
  .ring-time.done{color:var(--ring-done-color)}
  .ring-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;transition:color .4s}
  .pips{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
  .pip{width:12px;height:12px;border-radius:50%;border:2px solid #2a3a4a;background:0 0;transition:.3s;cursor:pointer}
  .pip:hover{border-color:#3d8bcc;transform:scale(1.15)}
  .pip.done{border-color:var(--work);background:var(--work);box-shadow:0 0 8px var(--work-glow)}.pip.current{border-color:var(--work);animation:pulse 1.5s infinite}.pip.pop{animation:pop .3s ease}
  .ctrls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .btn, .btn-primary, .btn-pause, .btn-ghost, .btn-skip, .btn-danger {padding:10px 24px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:.2s;cursor:pointer;}
  .btn-sm {padding:6px 12px !important;font-size:10px !important;}
  .btn-primary{background:linear-gradient(135deg,#2471a3,#3d8bcc);color:#fff;box-shadow:0 4px 16px rgba(36,113,163,.3);border:none;}
  .btn-pause{background:#1a2a3a;color:#e2e8f0;border:1px solid #2a4a6a}
  .btn-ghost{background:0 0;color:#6a8aaa;border:1px solid #2a3a4a}
  .btn-skip{background:0 0;color:#5a7a9a;border:1px solid #1e2d3d;font-size:10px;padding:8px 16px}
  .btn-danger{background:0 0;color:#c0392b;border:1px solid #3a1a1a;font-size:10px;padding:8px 16px}

  .panel{width:100%;border-radius:14px;padding:18px;background:linear-gradient(135deg,#0c1724,#0f1c2e);border:1px solid #1a2840;margin-bottom:14px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
  .views-accordion{margin-top:20px;margin-bottom:16px;}
  .views-accordion-summary{
    font-size:11px;font-weight:600;letter-spacing:1px;color:var(--text-3);text-transform:uppercase;
    cursor:pointer;list-style:none;padding-bottom:10px;
    display:flex;align-items:center;
  }
  .views-accordion-summary::-webkit-details-marker{display:none}
  .views-accordion-summary::after{
    content:"▼";font-size:8px;margin-left:6px;transition:transform 0.2s;
  }
  .views-accordion[open] .views-accordion-summary::after{transform:rotate(180deg)}
  .views-accordion-body{
    display:flex;flex-direction:column;gap:10px;
    background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:12px;
  }
  .shdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  /* Sdot color semantic variants */
  .sdot--quick{background:#48b5e0}
  .sdot--sw{background:var(--purple,#bf5af2)}
  .sdot--chimes{background:var(--accent)}
  .sdot--accent{background:var(--accent)}
  .sdot--history{background:var(--purple,#bf5af2)}
  .sdot--long{background:var(--long)}
  .sdot--work{background:var(--work)}
  .sdot--short{background:var(--short)}
  /* ── Utility/semantic classes used to retire HTML inline style="..." ── */
  /* Layout */
  .row-flex{display:flex;align-items:center;gap:6px}
  .row-flex--gap-5{display:flex;gap:5px}
  .row-flex--gap-8{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between}
  .row-flex--end{display:flex;gap:6px;align-items:flex-end}
  .col-stretch{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0 14px}
  .col-stretch--top{border-top:1px solid var(--border);margin-top:6px}
  .col-stretch--bot{border-bottom:1px solid var(--border)}
  .grow-120{flex:1 1 120px}
  .grow-100{flex:1 1 100px}
  .full-w{width:100%}
  .qa-fields-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:4px}
  /* Typography */
  .text-hint{font-size:11px;color:var(--text-3);line-height:1.5;max-width:100%}
  .text-hint--block{font-size:11px;color:var(--text-3);line-height:1.5;margin:0 0 10px}
  .text-status{font-size:11px;font-weight:600;color:var(--text-3)}
  .text-italic-hint{font-size:11px;color:var(--text-3);margin-top:4px;font-style:italic}
  /* Phase colors (initial render — JS may swap on phase change) */
  .text-work{color:var(--work)}
  .text-short{color:var(--short)}
  .text-long{color:var(--long)}
  /* Cards */
  .card--work-phase{background:var(--work-bg);border:1px solid var(--work-border);margin-top:12px}
  .panel--timer-sub{padding:20px}
  /* Modal field utilities */
  .mdName-input{flex:1;font-size:14px;font-weight:700}
  .app-dlg-msg--p{margin:0;font-size:14px;line-height:1.5}
  .app-dlg-msg--label{display:block;margin:0 0 10px;font-size:13px;white-space:pre-wrap;line-height:1.45}
  .app-prompt-textarea{width:100%;min-height:88px}
  .text-12-muted{color:var(--text-3);font-size:12px}
  .text-danger{color:var(--danger)}
  .text-3{color:var(--text-3)}
  .text-4{color:var(--text-4)}
  .mt-0{margin-top:0}
  .calfeed-worker-list{font-size:11px;line-height:1.6;padding-left:18px;color:var(--text-3)}
  .calfeed-worker-note{font-size:11px;color:var(--text-3)}
  .progress-bar{width:0%}
  .ts-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
  /* Stopwatch layout classes (replaces inline styles) */
  .sw-body{text-align:center}
  .sw-display{font-size:42px;font-weight:800;color:var(--text-1);letter-spacing:3px;font-variant-numeric:tabular-nums;margin-bottom:12px}
  .sw-buttons{display:flex;gap:10px;justify-content:center}
  .sw-laps{margin-top:10px;display:flex;flex-direction:column;gap:3px;max-height:120px;overflow-y:auto}
  /* margin:0 defends against browser default h2/h3 margins — section labels
     are now real headings (h2.slbl) but visually identical. */
  .slbl{margin:0;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#5a8ab5}
  .scnt{font-size:10px;color:#3a5060;margin-left:auto}
  .small-btn{background:0 0;color:#3a4a5a;font-size:9px;letter-spacing:1px;border:1px solid #1e2838;border-radius:5px;padding:4px 10px;margin-left:6px}

  .stitle{display:flex;align-items:center;gap:8px;margin-bottom:14px;cursor:pointer;user-select:none}
  .stitle.stitle-static{cursor:default}
  .sarrow{margin-left:auto;color:#3a5060;font-size:12px;transition:transform .2s}
  .sbody{overflow:hidden;transition:max-height .35s ease}
  /* Settings tab uses a static (non-collapsing) body — the tab itself is the
     toggle, so the legacy max-height accordion is opted out via this class. */
  .sbody.sbody-static{overflow:visible;max-height:none!important;transition:none}
  .srow{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
  .srow--full{display:block}
  .notif-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:var(--r-sm);font-size:12px;line-height:1.45}
  .notif-status--ok{background:color-mix(in srgb, var(--success) 12%, transparent);border:1px solid color-mix(in srgb, var(--success) 30%, transparent);color:var(--text-1)}
  .notif-status--warn{background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 30%, transparent);color:var(--text-1)}
  .notif-status--err{background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);color:var(--text-1)}
  .notif-status-btn{flex-shrink:0;padding:4px 10px;border-radius:6px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:600;cursor:pointer}
  .notif-status-btn:hover{background:var(--accent);color:var(--bg-0)}
  .sr-lbl{font-size:10px;color:#6a8aaa;letter-spacing:1px;min-width:120px}
  .sinput{width:56px;padding:6px 8px;background:#0d1a28;border:1px solid #1a2840;border-radius:6px;color:#c8d6e5;font-size:13px;font-family:inherit;text-align:center;outline:0}
  select.sinput{width:auto;min-width:100px;text-align:left;padding-right:24px;text-overflow:ellipsis}
  .sunit{font-size:10px;color:#4a6a8a}
  .toggle{width:36px;height:20px;border-radius:10px;background:#1a2a3a;position:relative;cursor:pointer;transition:.2s;border:1px solid #2a3a4a}
  .toggle.on{background:#1a4a6a;border-color:#2a6a9a}
  .tknob{width:14px;height:14px;border-radius:50%;background:#5a7a9a;position:absolute;top:2px;left:2px;transition:.2s}
  .toggle.on .tknob{left:18px;background:#3d8bcc}

  .fl{display:block;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#4a6a8a;margin-bottom:4px}
  .fi{padding:7px 8px;background:#0d1a28;border:1px solid #1a2840;border-radius:6px;color:#c8d6e5;font-size:12px;font-family:inherit;outline:0}
  .fi-w{width:100%}.fi-n{width:48px}.fi-s{width:76px;cursor:pointer}

  .iform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:12px;background:#0a1320;border-radius:10px;border:1px solid #152238;margin-bottom:10px}
  .iadd{padding:7px 14px;background:linear-gradient(135deg,#1a5a2a,#228b3b);border-radius:6px;color:#c8f0d0;font-size:11px;font-weight:700;letter-spacing:1px}
  .iprev{padding:7px 10px;background:#162030;border:1px solid #1e2d3d;border-radius:6px;color:#5a8ab5;font-size:14px}
  .ilist{display:flex;flex-direction:column;gap:5px}
  .iitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#0d1520;border:1px solid #152030;transition:.3s}
  .iitem.flash{background:#0d2838;border-color:#2980b9}
  .idot{width:7px;height:7px;border-radius:50%;background:#2a3a4a;flex-shrink:0;transition:.3s}
  .idot.active{background:#3d8bcc;box-shadow:0 0 6px rgba(61,139,204,.3)}.idot.flash{background:#48b5e0;box-shadow:0 0 10px rgba(72,181,224,.5)}
  .iinfo{flex:1;min-width:0}.iname{font-size:11px;font-weight:600;color:#b0c4d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .imeta{font-size:var(--fs-12);color:var(--text-3);margin-top:1px}
  .istat{text-align:right;flex-shrink:0}.ifires{font-size:13px;font-weight:700;color:#3d8bcc}.ifires.flash{color:#48b5e0}
  .inext{font-size:var(--fs-12);color:var(--text-3);margin-top:1px}
  .irm{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid #1e2838;border-radius:5px;color:#3a4a5a;font-size:11px;flex-shrink:0}
  .iempty{text-align:center;padding:10px 0;color:#2a3a4a;font-size:10px;letter-spacing:1px}

  .task-form{display:flex;gap:8px;margin-bottom:12px}
  .task-input{flex:1;padding:9px 12px;background:#0a1320;border:1px solid #152238;border-radius:8px;color:#c8d6e5;font-size:12px;font-family:inherit;outline:0}
  .task-input::placeholder{color:#2a3a4a}
  /* .task-add canonical rule lives near the design-system primary buttons
     (line ~716). The legacy green-gradient rule that lived here was dead
     code — superseded by the cascade — and removed to avoid future
     confusion about which color the Add button should be. */
  .task-list{display:flex;flex-direction:column;gap:6px}
  /* Mini-timer: body padding keeps content above the floating pill */
  body:has(.mini-timer.visible){padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  /* Task tags: cap width to prevent horizontal overflow when task has many tags */
  .task-tags-inline{display:flex;flex-wrap:wrap;gap:4px;max-width:100%;overflow:hidden}
  .task-tags-inline .tag-chip{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .task-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0a1320;border:1px solid #152238;transition:.3s}
  .task-item.active-task{border-color:var(--accent);background:var(--work-bg);box-shadow:inset 0 0 0 1px rgba(106,168,255,.2)}
  .task-play{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:.2s}
  .task-play.go{background:linear-gradient(135deg,#1a5a2a,#228b3b);color:#c8f0d0}
  .task-play.stop{background:linear-gradient(135deg,#8b2323,#c0392b);color:#fdd}
  .task-info{flex:1;min-width:0}
  .task-name{font-size:12px;font-weight:600;color:#b0c4d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .task-time-row{display:flex;gap:10px;margin-top:3px;align-items:center}
  .task-elapsed{font-size:18px;font-weight:800;color:#e2e8f0;font-variant-numeric:tabular-nums}
  .task-elapsed.ticking{color:var(--work)}
  .task-sessions{font-size:9px;color:#4a6a8a;letter-spacing:1px}
  .task-link-badge{font-size:8px;padding:2px 6px;border-radius:4px;background:#162030;color:#5a8ab5;border:1px solid #1e2d3d;letter-spacing:1px}
  .task-rm{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid #1e2838;border-radius:5px;color:rgba(255,69,58,0.6);font-size:10px;transition:.15s;flex-shrink:0;cursor:pointer}
  .task-rm:hover{color:#c0392b;border-color:#3a1a1a}
  .task-actions{display:flex;gap:5px;align-items:center;flex-shrink:0}
  .task-empty{text-align:center;padding:16px 0;color:#2a3a4a;font-size:11px;letter-spacing:1px}

  /* Nested task tree */
  .task-chevron{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#4a6a8a;cursor:pointer;transition:transform .2s;font-size:9px;user-select:none}
  .task-chevron:hover{color:#8a9bae}
  .task-chevron.collapsed{transform:rotate(-90deg)}
  .task-chevron.leaf{visibility:hidden}
  .task-item.has-children .task-name{font-weight:700;color:#c8d6e5}
  .task-item.depth-1{border-left:2px solid #1a2d44}
  .task-item.depth-2{border-left:2px solid #1a4a2a}
  .task-item.depth-3{border-left:2px solid #3a2a1a}
  .task-item.depth-4{border-left:2px solid #3a1a3a}
  .task-add-sub-btn{width:auto;height:24px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:3px;background:rgba(46,204,113,.08);border:1px solid #1a3a2a;border-radius:5px;color:#5ac47a;font-size:11px;font-weight:700;letter-spacing:.5px;line-height:1;transition:.15s;cursor:pointer;font-family:inherit}
  .task-add-sub-btn:hover{background:rgba(46,204,113,.15);color:#2ecc71;border-color:#2a5a3a}
  .task-own-time{font-size:8px;color:#3a5060;letter-spacing:1px}
  .task-subtask-form{display:flex;gap:6px;padding:8px 12px;background:#071019;border:1px dashed #1a2840;border-radius:8px;animation:slideIn .15s}
  .task-sub-input{flex:1;padding:6px 10px;background:#0d1a28;border:1px solid #1a2840;border-radius:6px;color:#c8d6e5;font-size:11px;font-family:inherit;outline:0}
  .task-sub-input:focus{border-color:#2a4a6a}
  .task-sub-btns{display:flex;gap:4px;flex-shrink:0}
  .task-sub-btn{padding:6px 12px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:1px;border:none;font-family:inherit;cursor:pointer}
  .task-sub-add{background:var(--accent,#3d8bcc);color:#0a1320}
  .task-sub-cancel{background:#162030;color:#6a8aaa;border:1px solid #1e2d3d}
  .task-breadcrumb{font-size:9px;color:#5a8ab5;letter-spacing:1px;margin-right:6px;opacity:.7}

  /* ========== ClickUp-style Task Manager ========== */
  /* Lists (projects) bar */
  .lists-bar{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;background:#0a1320;border-radius:10px;border:1px solid #152238;margin-bottom:10px;align-items:center}
  .list-chip{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.5px;border:1px solid #1a2838;background:#0d1a28;color:#8a9bae;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px;font-family:inherit}
  .list-chip:hover{background:#152a3e;color:#c8d6e5}
  .list-chip.active{background:linear-gradient(135deg,#1a3a5c,#1e4a6e);color:#e2e8f0;border-color:#2a4a6e}
  .list-chip .lc-dot{width:8px;height:8px;border-radius:50%}
  .list-chip .lc-count{font-size:9px;opacity:.7;padding:1px 5px;background:rgba(0,0,0,.3);border-radius:8px}
  .list-chip .lc-rm{margin-left:4px;opacity:0;color:#6a4040;font-size:10px;transition:.15s}
  .list-chip:hover .lc-rm{opacity:.5}
  .list-chip .lc-rm:hover{opacity:1;color:#c0392b}
  .list-chip .lc-edit{margin-left:4px;opacity:0;color:#5a7a95;font-size:10px;transition:.15s;cursor:pointer}
  .list-chip:hover .lc-edit{opacity:.5}
  .list-chip .lc-edit:hover{opacity:1;color:#3d8bcc}
  .list-add{padding:6px 10px;background:transparent;border:1px dashed #2a3a4a;border-radius:6px;color:#5a8ab5;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
  .list-add:hover{border-color:#3d8bcc;color:#3d8bcc}
  .list-new-form{display:flex;gap:6px;align-items:center}
  .list-new-input{padding:5px 8px;background:#0d1a28;border:1px solid #2a4a6a;border-radius:5px;color:#c8d6e5;font-size:11px;font-family:inherit;outline:0;width:120px}

  /* Task toolbar: search, filter, sort, view */
  .task-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;background:#0a1320;border-radius:10px;border:1px solid #152238;margin-bottom:10px;align-items:center}
  .task-search{flex:1;min-width:140px;padding:6px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;color:var(--text-2);font-size:11px;font-family:inherit;outline:0}
  .task-search:focus{border-color:var(--accent-border)}
  .task-tb-sel{padding:6px 8px;background:#0d1a28;border:1px solid #1a2838;border-radius:6px;color:#8a9bae;font-size:10px;font-family:inherit;cursor:pointer;outline:0}
  .task-tb-sel:focus{border-color:#2a4a6a}
  .view-toggle{display:flex;gap:0;background:#0d1a28;border:1px solid #1a2838;border-radius:6px;padding:2px}
  .view-toggle button{padding:5px 10px;background:transparent;border:none;color:#5a8ab5;font-size:10px;font-weight:600;letter-spacing:.5px;font-family:inherit;cursor:pointer;border-radius:4px;transition:.15s}
  .view-toggle button.active{background:linear-gradient(135deg,#1a3a5c,#1e4a6e);color:#e2e8f0}

  /* Compact control bar: view toggle + filters button */
  .task-controlbar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-bottom:8px;
  }
  .filters-toggle{
    display:flex;align-items:center;gap:6px;
    padding:6px 12px;min-height:34px;
    background:var(--bg-2,#0d1a28);
    border:1px solid var(--border,#1a2838);
    border-radius:8px;
    color:var(--text-2,#8a9bae);font-size:12px;font-weight:500;
    font-family:inherit;cursor:pointer;transition:.15s;
  }
  .filters-toggle:hover,.filters-toggle.active{
    background:var(--bg-3,#142238);color:var(--text-1,#e2e8f0);
    border-color:var(--border-strong,#2a3a4a);
  }
  .filters-toggle .ft-icon{font-size:13px;opacity:.85}
  .filters-toggle .ft-count{
    background:var(--accent,#3b82f6);color:#0a1320;
    font-size:10px;font-weight:700;
    min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* Compact today banner (when shown) */
  .today-banner-compact{
    padding:8px 12px!important;
    background:linear-gradient(135deg,rgba(61,139,204,.05),rgba(46,204,113,.03))!important;
    border-radius:8px!important;
    margin-bottom:8px!important;
    gap:8px!important;
  }
  .today-banner-compact .tb-num{font-size:20px!important;line-height:1!important}
  .today-banner-compact .tb-lbl{font-size:10px!important;opacity:.8}
  .today-banner-compact .tb-divider{width:1px;background:var(--border,#1a2838);opacity:.5}

  /* Status badge */
  .status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:.15s;border:1px solid;font-family:inherit;white-space:nowrap}
  .status-badge:hover{filter:brightness(1.15)}
  .status-open{background:rgba(106,138,170,.15);color:#8a9bae;border-color:#2a3a4a}
  .status-progress{background:rgba(61,139,204,.15);color:#5ab0e0;border-color:#2a4a6a}
  .status-review{background:rgba(142,68,173,.15);color:#b070d0;border-color:#4a2a5a}
  .status-blocked{background:rgba(192,57,43,.15);color:#e06050;border-color:#5a2a1a}
  .status-done{background:rgba(46,204,113,.15);color:#5ac47a;border-color:#1a3a2a}

  /* Priority flag */
  .priority-flag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;cursor:pointer;transition:.15s;font-size:11px;line-height:1;font-family:inherit;border:none;background:transparent;flex-shrink:0}
  .priority-flag:hover{background:rgba(255,255,255,.05)}
  .priority-urgent{color:#c0392b}
  .priority-high{color:#e67e22}
  .priority-normal{color:#3d8bcc}
  .priority-low{color:#7f8c8d}
  .priority-none{color:#2a3a4a}

  /* Date chip (single component — list, board, palette) */
  .date-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.02em;white-space:nowrap;background:var(--bg-2);color:var(--text-2);border:1px solid var(--border)}
  .date-chip--overdue{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border);animation:pulse 2.5s ease-in-out infinite}
  .date-chip--today{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)}
  .date-chip--soon{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
  .date-chip--future{background:var(--bg-2);color:var(--text-3);border-color:var(--border);font-weight:500}

  /* Tag chips */
  .tag-chip{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(61,139,204,.15);color:#5ab0e0;border:1px solid #2a4a6a}

  /* Task row extended (clickable open detail) */
  .task-item.clickable{cursor:pointer}
  .task-item.clickable:hover{background:#0f1a2a}
  .task-item.completed{opacity:.55}
  .task-item.completed .task-name{text-decoration:line-through}
  .task-item.overdue{border-left-color:#c0392b!important}
  .task-meta-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
  /* .task-checkbox is defined further below in the themed component block —
     the legacy 18px/hex-bordered rule that used to live here was dead code
     (shadowed by source order) and has been removed. */
  .task-estimate{font-size:9px;color:#5a6a7a;letter-spacing:.5px}
  .task-desc-preview{font-size:10px;color:#5a6a7a;font-style:italic;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  /* Task Detail Modal */
  .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);z-index:var(--z-modal);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
  .modal-overlay.open{display:flex;animation:fadeIn .2s}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .modal{background:#0d1a2d;border:1px solid #1a2d44;border-radius:14px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:modalSlide .25s}
  @keyframes modalSlide{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
  .modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #152238}
  .modal-close{margin-inline-start:auto;width:28px;height:28px;background:transparent;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-3);font-size:14px;cursor:pointer;font-family:inherit}
  .modal-close:hover{color:#c0392b;border-color:#3a1a1a}
  .modal-body{padding:16px 18px;max-height:70vh;overflow-y:auto}
  .mfield{margin-bottom:14px}
  .mfield-lbl{display:block;font-size:9px;color:#5a8ab5;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:6px}
  .mfield-in{width:100%;padding:8px 12px;background:#071019;border:1px solid #1a2840;border-radius:8px;color:#e2e8f0;font-size:12px;font-family:inherit;outline:0;box-sizing:border-box}
  .mfield-in:focus{border-color:#2a4a6a}
  .mfield-textarea{width:100%;padding:8px 12px;background:#071019;border:1px solid #1a2840;border-radius:8px;color:#c8d6e5;font-size:11px;font-family:inherit;outline:0;box-sizing:border-box;min-height:80px;resize:vertical;line-height:1.5}
  .mfield-row{display:flex;gap:10px;flex-wrap:wrap}
  .mfield-row > .mfield{flex:1;min-width:130px;margin-bottom:0}
  .mfield-chips{display:flex;gap:6px;flex-wrap:wrap}
  .mfield-chip-btn{padding:5px 10px;background:#0d1a28;border:1px solid #1a2838;border-radius:6px;color:#8a9bae;font-size:10px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit;transition:.15s}
  .mfield-chip-btn.active{background:linear-gradient(135deg,#1a3a5c,#1e4a6e);color:#e2e8f0;border-color:#2a4a6e}
  .mfield-chip-btn:hover:not(.active){color:#c8d6e5;border-color:#2a4a6e}
  .tags-editor{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
  .tag-edit-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(61,139,204,.15);color:#5ab0e0;border:1px solid #2a4a6a}
  .tag-edit-chip .tag-rm{cursor:pointer;color:#e06050;margin-left:2px}
  .tag-input{padding:3px 8px;background:#0d1a28;border:1px solid #1a2838;border-radius:10px;color:#c8d6e5;font-size:10px;font-family:inherit;outline:0;width:80px}
  .modal-stat{display:flex;gap:12px;padding:10px 14px;background:#071019;border-radius:8px;margin-bottom:14px;font-size:10px;color:#5a8ab5;letter-spacing:.5px}
  .modal-stat b{color:#c8d6e5;font-weight:700}
  .modal-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid #152238;justify-content:flex-end}
  .mfoot-btn{padding:7px 16px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:1px;border:none;cursor:pointer;font-family:inherit}
  .mfoot-save{background:linear-gradient(135deg,#2471a3,#3d8bcc);color:#fff}
  .mfoot-del{background:#1a1214;color:#8b4040;border:1px solid #3a1a1a}
  .mfoot-cancel{background:#162030;color:#8a9bae;border:1px solid #1e2d3d}

  /* Kanban Board View */
  .board-view{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;min-height:300px}
  .board-col{flex:0 0 240px;background:#0a1320;border:1px solid #152238;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;max-height:600px}
  .board-col-hdr{display:flex;align-items:center;gap:6px;padding:4px 2px 8px;border-bottom:1px solid #152238;margin-bottom:4px}
  .board-col-hdr .cc-count{margin-left:auto;font-size:9px;color:#5a8ab5;background:#0d1a28;padding:1px 7px;border-radius:8px}
  .board-col-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
  .board-card{padding:8px 10px;background:#0d1a28;border:1px solid #152238;border-radius:8px;cursor:pointer;transition:.15s;border-left:3px solid #2a3a4a}
  .board-card:hover{background:#0f1a2a;border-color:#2a4a6a}
  .board-card.priority-urgent-card{border-left-color:#c0392b}
  .board-card.priority-high-card{border-left-color:#e67e22}
  .board-card.priority-normal-card{border-left-color:#3d8bcc}
  .board-card.priority-low-card{border-left-color:#7f8c8d}
  .board-card-name{font-size:11px;font-weight:600;color:#e2e8f0;margin-bottom:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
  .board-card-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:6px}
  .board-breadcrumb{font-size:10px;color:#5a8ab5;margin-bottom:4px;opacity:.8}
  .board-col-empty{font-size:12px;color:var(--text-4,#4a5668);text-align:center;padding:24px 0;font-style:italic}

  /* Small "today" badge */
  .due-today-banner{font-size:9px;padding:2px 8px;background:rgba(232,168,56,.15);color:#e8a838;border:1px solid #5a4a1a;border-radius:10px;letter-spacing:.5px}

  /* ========== Personal Life Manager Additions ========== */
  /* Today summary banner */
  .today-banner{display:flex;gap:10px;padding:12px 14px;background:linear-gradient(135deg,rgba(61,139,204,.08),rgba(46,204,113,.05));border:1px solid #1a2d44;border-radius:12px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
  .tb-item{flex:1;min-width:90px;display:flex;flex-direction:column;gap:2px}
  .tb-num{font-size:22px;font-weight:800;color:#e2e8f0;font-variant-numeric:tabular-nums;line-height:1}
  .tb-num.overdue{color:#e06050}
  .tb-num.today{color:#e8a838}
  .tb-num.done{color:#5ac47a}
  .tb-lbl{font-size:8px;color:#5a8ab5;letter-spacing:2px;text-transform:uppercase;font-weight:600}
  .tb-divider{width:1px;align-self:stretch;background:#1a2d44}

  /* Smart views chips */
  .smart-views{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;padding:4px;background:#0a1320;border-radius:10px;border:1px solid #152238;align-items:center}
  /* Collapsed: only the active chip + toggle remain visible. Hides the rest
     instead of unmounting them so counts (#svcXxx) stay live & queryable. */
  .smart-views--collapsed .sv-chip:not(.active):not(.sv-chip-pinned){display:none}
  .sv-toggle{
    display:inline-flex;align-items:center;gap:4px;
    padding:7px 10px;border-radius:7px;border:1px dashed var(--border,#2a3a52);
    background:transparent;color:var(--text-3,#5a8ab5);
    font-size:11px;font-weight:600;letter-spacing:.4px;
    cursor:pointer;font-family:inherit;flex-shrink:0;order:99;
    transition:.15s;
  }
  .sv-toggle:hover{background:var(--bg-2,#152a3e);color:var(--text-1,#e2e8f0);border-style:solid}
  .sv-toggle-arrow{font-size:10px;line-height:1}
  .smart-views:not(.smart-views--collapsed) .sv-toggle{order:99}
  .sv-chip{padding:7px 12px;background:transparent;border:none;border-radius:999px;color:#5a8ab5;font-size:10px;font-weight:700;letter-spacing:.8px;cursor:pointer;transition:.15s;font-family:inherit;display:flex;align-items:center;gap:5px;text-transform:uppercase}
  .sv-chip:hover{background:#152a3e;color:#c8d6e5}
  .sv-chip.active{background:linear-gradient(135deg,#1a3a5c,#1e4a6e);color:#e2e8f0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .sv-icon{font-size:12px;line-height:1}
  .sv-count{font-size:9px;padding:1px 5px;background:rgba(0,0,0,.3);border-radius:8px;font-weight:700;min-width:14px;text-align:center}
  .sv-chip.active .sv-count{background:rgba(255,255,255,.15)}

  /* Star button */
  .task-star{width:20px;height:20px;background:transparent;border:none;color:#2a3a4a;font-size:14px;line-height:1;cursor:pointer;transition:.15s;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center}
  .task-star:hover{color:#e8a838}
  .task-star.starred{color:#e8a838}

  /* Subtask progress bar on parent tasks */
  .subtask-progress{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#5a8ab5;letter-spacing:.5px}
  .sp-bar{width:40px;height:3px;background:#152238;border-radius:2px;overflow:hidden}
  .sp-fill{height:100%;background:linear-gradient(90deg,#3d8bcc,#5ac47a);transition:width .3s}
  .sp-text{font-weight:700}

  /* Recurring badge */
  .recur-badge{font-size:8px;padding:1px 5px;background:rgba(155,89,182,.15);color:#b070d0;border:1px solid #4a2a5a;border-radius:8px;letter-spacing:.5px;font-weight:700}

  /* Reorder buttons */
  .task-reorder{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
  .task-rorder-btn{width:16px;height:12px;background:transparent;border:none;color:#2a3a4a;font-size:9px;line-height:1;cursor:pointer;padding:0;transition:.15s;display:flex;align-items:center;justify-content:center}
  .task-rorder-btn:hover{color:#5a8ab5}
  .task-rorder-btn:disabled{opacity:.3;cursor:default}

  /* Quick-add hint */
  .qa-hint{font-size:8px;color:#3a5060;letter-spacing:.5px;padding:3px 2px 0;font-style:italic}
  .qa-hint code{background:#0a1320;padding:1px 4px;border-radius:3px;color:#7ab0d8;font-family:monospace;font-size:9px;font-style:normal}

  /* Archive view */
  .archived-notice{padding:10px 14px;background:rgba(139,64,64,.08);border:1px solid #3a1a1a;border-radius:8px;color:#c89090;font-size:10px;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .archived-notice button{margin-left:auto;padding:4px 10px;background:transparent;border:1px solid #5a2a2a;color:#c89090;border-radius:5px;font-size:9px;letter-spacing:1px;cursor:pointer;font-family:inherit}
  .archived-notice button:hover{color:#e06050;border-color:#8b4040}
  .task-item.archived{opacity:.5}
  .task-actions .task-restore{width:24px;height:24px;background:transparent;border:1px solid #1a3a2a;border-radius:5px;color:#5ac47a;font-size:10px;cursor:pointer;font-family:inherit}
  .task-actions .task-restore:hover{background:rgba(46,204,113,.1)}

  /* Quick date buttons in modal */
  .quick-dates{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
  .qd-btn{padding:4px 10px;background:#0d1a28;border:1px solid #1a2838;border-radius:5px;color:#8a9bae;font-size:9px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit;text-transform:uppercase}
  .qd-btn:hover{background:#152a3e;color:#c8d6e5;border-color:#2a4a6e}

  /* Recurrence selector */
  .recur-options{display:flex;gap:4px;flex-wrap:wrap}
  .recur-opt{padding:5px 10px;background:#0d1a28;border:1px solid #1a2838;border-radius:5px;color:#8a9bae;font-size:10px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit}
  .recur-opt.active{background:linear-gradient(135deg,#3a2a4a,#4a2a5a);color:#e2e8f0;border-color:#5a2a6a}
  .recur-opt:hover:not(.active){color:#c8d6e5;border-color:#2a4a6e}

  /* Floating Mini Timer (shown on all tabs except Timer tab) */
  .mini-timer{position:fixed;bottom:16px;right:16px;z-index:var(--z-fab);display:none;align-items:center;gap:10px;padding:10px 14px;background:rgba(13,26,45,.95);backdrop-filter:blur(8px);border:1px solid #1a2d44;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:.2s;font-family:inherit;cursor:pointer;user-select:none}
  .mini-timer.visible{display:flex;animation:fadeIn .25s}
  .mini-timer:hover{border-color:#2a4a6a;transform:translateY(-1px)}
  .mini-timer.work{border-left:3px solid #3d8bcc}
  .mini-timer.short{border-left:3px solid #2ecc71}
  .mini-timer.long{border-left:3px solid #e8a838}
  .mt-phase-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .mt-phase-dot.work{background:#3d8bcc;box-shadow:0 0 8px rgba(61,139,204,.5)}
  .mt-phase-dot.short{background:#2ecc71;box-shadow:0 0 8px rgba(46,204,113,.5)}
  .mt-phase-dot.long{background:#e8a838;box-shadow:0 0 8px rgba(232,168,56,.5)}
  .mt-phase-dot.running{animation:pulse 1.5s infinite}
  .mt-info{display:flex;flex-direction:column;gap:1px;min-width:0}
  .mt-label{font-size:8px;color:#5a8ab5;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
  .mt-time{font-size:16px;font-weight:800;color:#e2e8f0;font-variant-numeric:tabular-nums;letter-spacing:1px}
  /* Warn/done use the same themed tokens as .ring-time so light-mode contrast
     stays readable; previously hardcoded to dark-mode-tuned hex values. */
  .mt-time.warn{color:var(--ring-warn-color);animation:pulse 1s infinite}
  .mt-time.done{color:var(--ring-done-color)}
  .mt-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;font-size:11px;cursor:pointer;transition:.15s;flex-shrink:0;color:#fff;font-family:inherit}
  .mt-play{background:linear-gradient(135deg,#1a5a2a,#228b3b)}
  .mt-pause{background:linear-gradient(135deg,#2471a3,#3d8bcc)}
  .mt-btn:hover{filter:brightness(1.15);transform:scale(1.05)}
  .mt-open{font-size:9px;color:#5a8ab5;letter-spacing:1px;padding-left:4px;border-left:1px solid #1a2d44}

  .goal-form{display:flex;gap:8px;margin-bottom:12px}
  .goal-input{flex:1;padding:9px 12px;background:#0a1320;border:1px solid #152238;border-radius:8px;color:#c8d6e5;font-size:12px;font-family:inherit;outline:0}
  .goal-input::placeholder{color:#2a3a4a}
  .goal-add{padding:9px 16px;background:linear-gradient(135deg,#1a5a2a,#228b3b);border-radius:8px;color:#c8f0d0;font-size:11px;font-weight:700;letter-spacing:1px;white-space:nowrap}
  .goal-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto}
  .goal-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#0a1320;border:1px solid #152238;transition:all .25s;animation:slideIn .2s}
  .goal-item.checked{background:#0a1a14;border-color:#1a3a2a}
  .goal-check{width:22px;height:22px;border-radius:6px;border:2px solid #2a3a4a;background:0 0;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;cursor:pointer;transition:.2s;color:transparent}
  .goal-check:hover{border-color:#3d8bcc}
  .goal-check.on{border-color:#2ecc71;background:#1a3a2a;color:#2ecc71;animation:checkPop .25s}
  .goal-text{flex:1;font-size:12px;color:#b0c4d8;transition:.2s;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .goal-item.checked .goal-text{text-decoration:line-through;color:#3a5060}
  .goal-time{font-size:9px;color:#3a5060;flex-shrink:0}
  .goal-rm{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid #1e2838;border-radius:5px;color:#2a3a4a;font-size:10px;flex-shrink:0;cursor:pointer;transition:.15s}
  .goal-rm:hover{color:#c0392b;border-color:#3a1a1a}
  .goal-empty{text-align:center;padding:16px 0;color:#2a3a4a;font-size:11px;letter-spacing:1px}
  .goal-progress{margin-top:10px;display:flex;align-items:center;gap:10px}
  .goal-bar-wrap{flex:1;height:6px;background:#0a1320;border-radius:3px;overflow:hidden;border:1px solid #152238}
  .goal-bar{height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:3px;transition:width .4s}
  .goal-pct{font-size:11px;font-weight:700;color:#2ecc71;min-width:36px;text-align:right}

  .log-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
  .log-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:#0a1320;font-size:10px;border:1px solid #101a28}
  .log-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
  .log-name{flex:1;color:#8a9bae;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .log-dur{color:#5a8ab5;font-weight:700;flex-shrink:0}
  .log-time{color:#3a5060;flex-shrink:0;font-size:9px}
  .log-empty{text-align:center;padding:12px 0;color:#2a3a4a;font-size:10px}

  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .stat-box{text-align:center;padding:12px 8px;background:#0a1320;border-radius:10px;border:1px solid #152238}
  .stat-val{font-size:24px;font-weight:800;color:#e2e8f0}.stat-lbl{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#4a6a8a;margin-top:4px}
  .stat-val.wc{color:var(--work)}.stat-val.bc{color:var(--short)}.stat-val.tc{color:var(--long)}
  .history{display:flex;gap:3px;flex-wrap:wrap;margin-top:12px;justify-content:center}
  .hblock{width:14px;height:14px;border-radius:3px}.hw{background:var(--work);opacity:.8}.hs{background:var(--short);opacity:.6}.hl{background:var(--long);opacity:.6}

  .export-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .export-btn{padding:8px 16px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:.2s}
  .export-txt{background:linear-gradient(135deg,#2a4a3a,#3a6a4a);color:#c8f0d0}
  .export-md{background:linear-gradient(135deg,#3a3a5a,#4a4a7a);color:#d0d0f0}
  .export-csv{background:linear-gradient(135deg,#4a3a2a,#6a5a3a);color:#f0e0c0}
  .export-clip{background:#1a2a3a;color:#8a9bae;border:1px solid #2a3a4a}

  /* History Archive */
  .hist-day{padding:12px;background:#0a1320;border:1px solid #152238;border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.2s}
  .hist-day:hover{border-color:#1a2d44}
  .hist-day-hdr{display:flex;align-items:center;gap:10px}
  .hist-day-date{font-size:12px;font-weight:600;color:#b0c4d8;flex:1}
  .hist-day-stats{display:flex;gap:12px;font-size:10px;color:#4a6a8a}
  .hist-day-stat{display:flex;align-items:center;gap:4px}
  .hist-day-detail{margin-top:10px;padding-top:10px;border-top:1px solid #152238;display:none;animation:slideIn .2s}
  .hist-day.open .hist-day-detail{display:block}
  .hist-day-section{margin-bottom:8px}
  .hist-day-section-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#3a5060;margin-bottom:4px}
  .hist-goal{font-size:10px;color:#6a8aaa;padding:2px 0}
  .hist-log{font-size:10px;color:#5a7a9a;padding:2px 0}
  .hist-task{font-size:10px;color:#5a8ab5;padding:2px 0}
  @keyframes savePulse {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .save-indicator{position:fixed;bottom:16px;right:16px;font-size:9px;color:#2ecc71;letter-spacing:2px;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
  .save-indicator.show{opacity:1;animation:savePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards}

  .clear-hist-btn{background:#1a1214;color:#8b4040;border:1px solid #3a1a1a;border-radius:6px;padding:6px 14px;font-size:9px;letter-spacing:1px;margin-top:8px}

  /* Quick Timers */
  .qt-form{display:flex;gap:6px;flex-wrap:wrap;padding:10px;background:#0a1320;border-radius:10px;border:1px solid #152238;margin-bottom:8px;align-items:flex-end}
  .qt-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .qt-preset{padding:5px 12px;background:#101c2c;border:1px solid #1a2a3a;border-radius:999px;color:#5a8ab5;font-size:10px;font-weight:600;letter-spacing:1px;transition:.15s}
  .qt-preset:hover{background:#152a3e;color:#7ab0d8}
  .qt-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
  .qt-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:#0a1320;border:1px solid #152238;transition:.25s}
  .qt-item.running{border-color:#2471a3;background:#0d1a2d}
  .qt-item.done{border-color:#6a2a1a;background:#1a0f08}
  .qt-item.flash{border-color:#e74c3c;background:#2a0808;animation:pulse .4s 4}
  .qt-btn{width:34px;height:34px;border-radius:50%;font-size:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
  .qt-play{background:linear-gradient(135deg,#1a5a2a,#228b3b);color:#c8f0d0}
  .qt-pause{background:linear-gradient(135deg,#2471a3,#3d8bcc);color:#fff}
  .qt-restart{background:linear-gradient(135deg,#8b6a23,#c09339);color:#fef0d0}
  .qt-info{flex:1;min-width:0}
  .qt-label{font-size:12px;font-weight:600;color:#b0c4d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qt-time{font-size:22px;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;margin-top:2px;color:#e2e8f0}
  .qt-time.running{color:var(--work)}
  .qt-time.warn{color:#e8a838;animation:pulse 1s infinite}
  .qt-time.done{color:#e74c3c}
  .qt-progress{height:3px;margin-top:6px;background:#152030;border-radius:2px;overflow:hidden}
  .qt-bar{height:100%;background:linear-gradient(90deg,#2471a3,#3d8bcc);transition:width .5s linear}
  .qt-bar.done{background:#e74c3c}
  .qt-actions{display:flex;gap:4px;flex-shrink:0}
  .qt-act{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid #1e2838;border-radius:5px;color:#3a4a5a;font-size:11px;transition:.15s}
  .qt-act:hover{color:#6a8aaa;border-color:#2a4a6a}

  /* Log delete button */
  .log-del{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:0 0;border:none;color:#2a3a4a;font-size:10px;opacity:0;transition:.15s;cursor:pointer;flex-shrink:0}
  .log-item:hover .log-del{opacity:1}
  .log-del:hover{color:#c0392b}

  /* Phase nav hint */
  .phase-nav-hint{text-align:center;font-size:9px;color:#3a5060;letter-spacing:2px;margin-top:10px;text-transform:uppercase}

  /* Main nav tabs - progressive disclosure between modes */
  .nav-tabs{display:flex;gap:3px;width:100%;margin-bottom:14px;background:#0a1320;border-radius:12px;padding:4px;border:1px solid #152238;box-shadow:0 4px 16px rgba(0,0,0,.3)}
  .nav-tab{flex:1;padding:10px 4px;background:0 0;border:none;border-radius:8px;color:#4a6a8a;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;position:relative}
  .nav-tab-icon{font-size:18px;line-height:1;filter:grayscale(.6);transition:filter .2s}
  .nav-tab.active{color:#e2e8f0;background:linear-gradient(135deg,#1a3a5c,#1e4a6e);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .nav-tab.active .nav-tab-icon{filter:none}
  .nav-tab:hover:not(.active){color:#6a8aaa;background:rgba(20,40,60,.3)}
  .nav-tab-badge{position:absolute;top:4px;right:8px;min-width:14px;height:14px;padding:0 4px;background:#3d8bcc;color:#fff;border-radius:7px;font-size:9px;font-weight:700;letter-spacing:0;display:flex;align-items:center;justify-content:center;line-height:1}

  /* =================================================================== */
  /* =========== DESIGN SYSTEM OVERLAY (polish pass) =================== */
  /* =================================================================== */

  /* Container: max-width for desktop, centered */
  .container{max-width:960px;width:100%}

  /* Header — understated, not a shouty ALL-CAPS wall */
  .header{text-align:center;margin-bottom:28px}
  .header h1{font-size:22px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--text-1);font-family:var(--font-sans);margin:0;display:inline-flex;align-items:center;gap:10px}
  .header-logo{width:32px;height:32px;border-radius:8px;display:block;flex-shrink:0}
  .header-line{display:none}
  .header-mid{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
  .header-date{font-size:13px;color:var(--text-3);letter-spacing:0;font-family:var(--font-sans)}
  .what-next-pill{font-size:11px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-2);color:var(--accent);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
  .what-next-pill:hover{background:rgba(61,139,204,.12);border-color:rgba(61,139,204,.35)}

  /* Header AI status — model load / ready */
  /* Outer min-width pins the chip to its widest realistic state. The widest
     label content is "100%" (4 chars, tabular-nums) which measures ~26px at
     the chip's 11px font. With 7px dot + 5px gap + 20px horizontal padding +
     2px border, that's ~62px. Use 64px to absorb sub-pixel rounding so the
     content swap from "100%" → "AI" → "✓" never reflows the .header-utils
     row, which would shift the theme toggle and Cmd-K button.  */
  .ai-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;height:38px;min-width:64px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-1);color:var(--text-2);font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
  .ai-chip:hover{background:var(--bg-2);border-color:var(--border-strong)}
  .ai-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--text-4);flex-shrink:0}
  .ai-chip--syncing .ai-chip-dot{background:var(--warning);animation:pulse 1.2s infinite}
  .ai-chip--ok .ai-chip-dot{background:var(--success)}
  .ai-chip--err .ai-chip-dot{background:var(--danger)}
  /* Inner label uses a 4ch reservation (matches "100%") so content swaps
     don't shrink the chip below the outer min-width and produce a visible
     label-jitter even within the pinned shell. */
  .ai-chip-label{font-variant-numeric:tabular-nums;min-width:4ch;text-align:center}
  .ai-chip-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;clip-path:inset(50%)}
  .sys-info-ok{color:var(--success)}
  .sys-info-warn{color:var(--warning)}
  .install-help-panel{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg-1);border:1px solid var(--border-subtle);font-size:13px;color:var(--text-1)}
  .install-help-title{font-weight:600;margin-bottom:6px;color:var(--text-1)}
  .install-help-steps{margin:0 0 8px;padding-left:20px;line-height:1.6;color:var(--text-2)}
  .install-help-steps li{margin-bottom:2px}
  .install-help-close{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:12px;cursor:pointer}
  .install-help-close:hover{background:var(--bg-2);color:var(--text-1)}
  .sw-precache-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);font-size:12px;color:var(--text-1);flex-wrap:wrap}
  .sw-precache-banner-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--warning);background:transparent;color:var(--warning);font-size:11px;font-weight:600;cursor:pointer}
  .sw-precache-banner-btn:hover{background:var(--warning);color:var(--bg-0)}
  .sw-precache-banner-btn--ghost{border-color:var(--border);color:var(--text-3)}
  .sw-precache-banner-btn--ghost:hover{background:var(--bg-2);color:var(--text-1)}

  /* Main timer card — inside Focus tab panel */
  .card{padding:24px;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;gap:18px}
  .ring-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
  .ring-svg{width:220px;height:220px;transform:rotate(-90deg)}
  .ring-bg{fill:none;stroke:var(--bg-3);stroke-width:6}
  .ring-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
  .ring-center{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}
  .pips{display:flex;gap:10px;margin-top:4px}
  .ctrls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

  /* Panel surfaces */
  .panel{background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-1)}
  .task-search-bar{margin-bottom:10px;padding:8px 10px;background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}

  /* Section labels — stop yelling */
  .slbl{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--text-1);font-family:var(--font-sans)}
  .scnt{font-size:11px;color:var(--text-3);margin-left:auto;letter-spacing:0;font-family:var(--font-sans)}
  .shdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:none}

  /* Nav tabs — cleaner */
  .nav-tabs{background:var(--bg-1);border-color:var(--border)}
  .nav-tab{color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none}
  .nav-tab.active{color:var(--text-1);background:var(--bg-3)}
  .nav-tab:hover:not(.active){color:var(--text-2);background:transparent}
  .nav-tab-icon{font-size:16px}

  /* Buttons — consistent, clean */
  .btn, .btn-primary, .btn-pause, .btn-ghost, .btn-skip, .btn-danger {font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 18px;border-radius:999px;transition:.15s;cursor:pointer;}
  .btn-sm {padding:6px 14px !important;font-size:11px !important;}
  .btn-primary{background:var(--accent);color:#0a1320;border:none;}
  .btn-primary:hover{background:#7db3ff}
  .btn-pause{background:var(--warning);color:#0a1320;border:none;}
  .btn-skip{background:transparent;color:var(--text-2);border:1px solid var(--border);font-size:11px;padding:8px 14px}
  .btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger-border);font-size:11px;padding:8px 14px}
  .btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}

  /* Today banner — heroic hero */
  .today-banner{padding:18px 20px;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:14px}
  .tb-num{font-size:32px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-sans);color:var(--text-1)}
  .tb-num.overdue{color:var(--danger)}
  .tb-num.today{color:var(--warning)}
  .tb-num.done{color:var(--success)}
  .tb-lbl{font-size:11px;color:var(--text-3);letter-spacing:.02em;text-transform:none;font-weight:500;margin-top:2px}
  .tb-divider{background:var(--border)}

  /* Smart view chips — calmer */
  .smart-views{background:var(--bg-1);border:1px solid var(--border-subtle);padding:5px;gap:2px;border-radius:12px;}
  .sv-chip{background:var(--bg-1);color:var(--text-3);font-size:var(--fs-12);font-weight:500;letter-spacing:0;text-transform:none;padding:8px 14px;display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border-subtle);border-radius:999px;cursor:pointer}
  .sv-chip:hover{background:var(--bg-2);color:var(--text-1);border-color:var(--border)}
  /* Active state lifted from a subtle bg-3 swap to a clear accent-tinted
     pill — matches the primary-action visual language and makes the
     current view legible at a glance, especially on light theme. */
  .sv-chip.active{
    background:var(--accent-bg);color:var(--accent);
    border-color:var(--accent-border);font-weight:600;
  }
  .sv-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sv-icon{font-size:13px}
  .sv-count{font-size:10px;font-weight:600;background:var(--bg-3);color:var(--text-3);padding:1px 6px;border-radius:999px}
  .sv-chip.active .sv-count{background:var(--accent);color:var(--bg-0)}

  /* Lists bar */
  .lists-bar{background:var(--bg-1);border:1px solid var(--border-subtle);padding:8px 10px;border-radius:12px;}
  .list-chip{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
  .list-chip:hover{background:var(--bg-3);color:var(--text-1)}
  .list-chip.active{background:var(--bg-3);color:var(--text-1);border-color:var(--border-strong)}
  .list-chip .lc-count{background:transparent;color:var(--text-3);font-size:10px}
  .list-add{color:var(--text-3);font-size:12px;font-weight:500}

  /* Toolbar */
  .task-toolbar{background:var(--bg-1);border:1px solid var(--border-subtle);padding:8px 10px;border-radius:12px;}
  .task-search{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:13px;padding:8px 12px;border-radius:var(--r-sm)}
  .task-search::placeholder{color:var(--text-4)}
  .task-search:focus{border-color:var(--accent-border);background:var(--bg-2)}
  .task-tb-sel{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:12px;font-weight:500;letter-spacing:0;padding:8px 10px;border-radius:var(--r-sm)}
  .view-toggle{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm)}
  .view-toggle button{color:var(--text-3);font-size:11px;font-weight:500;letter-spacing:0;padding:6px 12px}
  .view-toggle button.active{background:var(--bg-3);color:var(--text-1)}

  /* Task input */
  .task-form{gap:8px}
  .task-input{background:var(--bg-2)!important;border-color:var(--border)!important;color:var(--text-1)!important;font-size:14px!important;padding:11px 14px!important;border-radius:var(--r-sm)!important;font-weight:400}
  .task-input::placeholder{color:var(--text-4)}
  .task-input:focus{border-color:var(--accent-border)!important;outline:none}
  /* Canonical Add button — primary action in the design system. min-height
     hits the 44px WCAG 2.5.5 AAA tap target on all viewports (mobile rule
     at line ~1419 sets 46px to be safe). */
  .task-add{
    padding:11px 18px;min-height:44px;
    background:var(--accent);color:var(--bg-0);
    font-weight:700;font-size:var(--fs-13);letter-spacing:0;text-transform:none;
    border:1px solid var(--accent);border-radius:999px;
    transition:filter .12s,background .12s;
  }
  .task-add:hover{filter:brightness(1.08)}
  .task-add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .task-add:active{filter:brightness(.95)}
  .task-add:hover{background:#7db3ff}

  /* Quick-add hint — example tokens reuse the live-parse-preview chip styles
     (.qpc--*) so users learn by recognition: the chip color they see while
     typing matches the chip color in the hint row. */
  .qa-hint{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
    font-size:var(--fs-12);color:var(--text-3);
    padding:var(--space-3) var(--space-2) var(--space-5);
    line-height:1.6;
  }
  .qa-hint-lbl{color:var(--text-4);font-weight:500;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.06em}
  .qa-hint-tokens{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
  /* Legacy code-tag styling preserved for any other surfaces still using it. */
  .qa-hint code{background:var(--bg-2);color:var(--text-2);padding:2px 6px;border-radius:4px;font-size:11px;border:1px solid var(--border)}
  /* Disclosure button shown when the syntax hint is hidden (default state).
     Subtle text-link styling — discoverable but doesn't clutter the form. */
  .qa-hint-reveal{
    background:transparent;border:none;padding:6px 2px;margin:0;
    color:var(--text-3);font-family:inherit;font-size:var(--fs-12);
    cursor:pointer;text-decoration:underline;text-decoration-color:var(--border-strong);
    text-underline-offset:3px;text-decoration-thickness:1px;
    transition:color .12s,text-decoration-color .12s;
  }
  .qa-hint-reveal:hover{color:var(--text-1);text-decoration-color:var(--accent)}
  .qa-hint-reveal:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* "More options" disclosure: opens the configurable inline quick-add panel.
     Subtle until tapped — the form should read as one-line by default. */
  .qa-more-toggle{
    display:inline-flex;align-items:center;gap:4px;
    background:transparent;border:none;padding:6px 2px;margin:0;
    color:var(--text-3);font-family:inherit;font-size:var(--fs-12);
    cursor:pointer;
  }
  .qa-more-toggle:hover{color:var(--text-1)}
  .qa-more-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .qa-more-chevron{font-size:9px;line-height:1;transition:transform .2s}
  .qa-more-toggle[aria-expanded="true"] .qa-more-chevron{transform:rotate(180deg)}
  
  .qa-actions-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;margin-bottom:4px;}

  /* Configurable quick-add panel — fields are rendered by renderQuickAddPanel().
     Hidden until user expands. Each field is its own sub-block separated by a
     dashed rule for clean delimitation. */
  .qa-more-panel{
    display:flex;flex-direction:column;gap:var(--space-5);
    padding:var(--space-6) var(--space-4);
    margin:var(--space-3) 0 var(--space-2);
    background:var(--bg-1);border:1px solid var(--border-subtle);
    border-radius:var(--r-md);
  }
  .qa-more-panel[hidden]{display:none}
  .qa-more-field{display:flex;flex-direction:column;gap:var(--space-3)}
  .qa-more-field-lbl{
    font-size:var(--fs-12);color:var(--text-3);
    letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  }
  .qa-more-field-control{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
  .qa-more-empty{
    color:var(--text-4);font-size:var(--fs-12);font-style:italic;
    margin:0;padding:var(--space-3) 0;
  }
  .qa-more-empty a{color:var(--accent);text-decoration:underline;cursor:pointer}
  .qa-field-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);cursor:pointer;padding:6px 10px;background:var(--bg-2);border-radius:999px;border:1px solid var(--border)}
  .qa-field-chip-cb{cursor:pointer}

  /* Live parse-token preview — visible while user is typing, shows what
     quick-add tokens were detected so users trust the parser. */
  .qa-parse-chips{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-2);
    margin-block-start:var(--space-2);
    font-size:var(--fs-12);color:var(--text-3);
    border-block-start:1px dashed var(--border-subtle);
    animation:fadeIn .12s ease-out;
  }
  .qa-parse-chips[hidden]{display:none}
  .qpc-name{
    font-weight:600;color:var(--text-1);
    max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .qpc-list{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}
  .qpc{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px;border-radius:999px;font-size:var(--fs-12);font-weight:600;
    background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);
    white-space:nowrap;line-height:1.4;
  }
  .qpc--danger {background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger)}
  .qpc--warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}
  .qpc--accent {background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent)}
  .qpc--muted  {background:var(--bg-2);      border-color:var(--border);        color:var(--text-3)}
  .qpc--tag    {background:var(--purple-bg); border-color:var(--purple-border); color:var(--purple)}
  .qpc--star   {background:rgba(224,160,32,.12);border-color:rgba(224,160,32,.3);color:#e0a020}
  .qpc--recur  {background:var(--purple-bg); border-color:var(--purple-border); color:var(--purple)}
  .qpc--due    {background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent)}

  /* Task item — the star of the show */
  .task-item{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;gap:12px;transition:all .15s}
  .task-item:hover{background:var(--bg-2);border-color:var(--border-strong)}
  .task-item.active-task{background:linear-gradient(135deg,var(--bg-2),var(--accent-bg));border-color:var(--accent-border);box-shadow:0 0 0 1px var(--accent-border),0 4px 16px rgba(106,168,255,.08)}
  .task-item.overdue{border-left:3px solid var(--danger)!important;padding-left:13px}
  .task-item.completed{opacity:.45}
  .task-name{font-size:14px;font-weight:500;color:var(--text-1);letter-spacing:0;line-height:1.35}
  .task-item.has-children .task-name{font-weight:600}
  .task-meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
  .task-elapsed{font-size:11px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:0;font-weight:500}
  .task-elapsed.ticking{color:var(--accent)}
  .task-sessions{font-size:11px;color:var(--text-4);letter-spacing:0}

  /* Depth border colors refined */
  .task-item.depth-1{border-left:2px solid var(--accent-border)}
  .task-item.depth-2{border-left:2px solid var(--success-border)}
  .task-item.depth-3{border-left:2px solid var(--warning-border)}
  .task-item.depth-4{border-left:2px solid var(--purple-border)}

  /* Task checkbox — larger, more obvious */
  .task-checkbox{width:22px;height:22px;border:2px solid var(--border-strong);border-radius:7px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;cursor:pointer;padding:0}
  .task-checkbox:hover{border-color:var(--success);background:var(--success-bg)}
  .task-checkbox.checked{background:var(--success);border-color:var(--success);color:#0a1320;font-weight:700;font-size:13px;animation:checkPop .3s ease-out}
  @keyframes checkPop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

  /* Star — prominent when starred */
  .task-star{width:24px;height:24px;font-size:16px;border-radius:var(--r-sm);color:var(--text-4)}
  .task-star:hover{background:var(--bg-3);color:var(--warning)}
  .task-star.starred{color:var(--warning)}
  .task-star.starred:hover{color:var(--warning)}

  /* Play button */
  .task-play{width:28px;height:28px;border-radius:8px;font-size:11px;flex-shrink:0}
  .task-play.go{background:var(--success);color:#0a1320}
  .task-play.stop{background:var(--danger);color:#fff}

  /* Status badge — readable, not SHOUTY */
  .status-badge{font-size:11px;font-weight:500;letter-spacing:0;text-transform:capitalize;padding:3px 10px;border-radius:999px}
  .status-open{background:transparent;color:var(--text-3);border-color:var(--border)}
  .status-progress{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
  .status-review{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)}
  .status-blocked{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
  .status-done{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}

  /* Priority — now a numbered flag (P1-P4), Todoist-style */
  .priority-flag{width:auto;height:auto;padding:0 2px;font-size:11px;font-weight:700;font-family:var(--font-sans);border-radius:3px}
  .priority-urgent::before{content:'P1 '}
  .priority-high::before{content:'P2 '}
  .priority-normal::before{content:'P3 '}
  .priority-low::before{content:'P4 '}
  .priority-urgent{color:var(--danger)}
  .priority-high{color:var(--warning)}
  .priority-normal{color:var(--accent)}
  .priority-low{color:var(--text-3)}

  /* Tags */
  .tag-chip{font-size:11px;padding:2px 8px;letter-spacing:0;text-transform:none;font-weight:500;background:var(--bg-3);color:var(--text-2);border-radius:999px;border:none}

  /* Recurring badge */
  .recur-badge{font-size:10px;padding:2px 7px;letter-spacing:0;font-weight:500;background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)}

  /* Subtask progress */
  .subtask-progress{font-size:11px;color:var(--text-3);gap:8px}
  .sp-bar{width:56px;height:4px;background:var(--bg-3);border-radius:2px}
  .sp-fill{background:linear-gradient(90deg,var(--accent),var(--success))}
  .sp-text{font-weight:600;color:var(--text-2)}

  /* Task actions */
  .task-actions{gap:4px}
  .task-add-sub-btn{background:transparent;border-color:var(--border);color:var(--text-3);font-size:11px;padding:4px 10px;height:26px;font-weight:500;letter-spacing:0}
  .task-add-sub-btn:hover{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
  .task-rm{width:26px;height:26px;font-size:14px;color:var(--text-4);border-color:transparent;border-radius:var(--r-sm)}
  .task-rm:hover{color:var(--danger);background:var(--danger-bg)}

  /* Empty state */
  .task-empty{padding:48px 16px;color:var(--text-4);font-size:14px;letter-spacing:0;text-transform:none}

  /* Modal — cleaner */
  .modal{background:var(--bg-1);border-color:var(--border);border-radius:var(--r-lg)}
  .modal-head{border-color:var(--border);padding:18px 20px}
  .modal-body{padding:20px}
  .mfield-lbl{font-size:11px;color:var(--text-3);letter-spacing:0;text-transform:none;font-weight:500;margin-bottom:6px}
  .mfield-in{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:14px;padding:10px 12px;border-radius:var(--r-sm)}
  .mfield-in:focus{border-color:var(--accent-border)}
  .mfield-textarea{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:13px;line-height:1.5}
  .mfield-chip-btn{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;padding:7px 12px}
  .mfield-chip-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
  .qd-btn{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:11px;letter-spacing:0;text-transform:none;padding:6px 12px;font-weight:500}
  .qd-btn:hover{background:var(--bg-3);color:var(--text-1)}
  .recur-opt{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:12px;letter-spacing:0;text-transform:none;padding:7px 12px;font-weight:500}
  .recur-opt.active{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)}
  .modal-foot{padding:14px 20px;border-color:var(--border);gap:8px}
  .mfoot-btn{font-size:12px;letter-spacing:0;text-transform:none;padding:9px 18px;font-weight:600}
  .mfoot-save{background:var(--accent);color:#0a1320}
  .mfoot-save:hover{background:#7db3ff}
  .mfoot-cancel{background:var(--bg-2);border:1px solid var(--border);color:var(--text-2)}
  .mfoot-del{background:transparent;border:1px solid var(--danger-border);color:var(--danger)}
  .mfoot-del:hover{background:var(--danger-bg)}

  /* Board view */
  .board-col{background:var(--bg-1);border-color:var(--border);border-radius:var(--r-lg)}
  .board-card{background:var(--bg-2);border-color:var(--border);border-radius:var(--r-md);padding:10px 12px}
  .board-card:hover{background:var(--bg-3);border-color:var(--border-strong)}
  .board-card-name{font-size:13px;color:var(--text-1);font-weight:500;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
  .board-card.priority-urgent-card{border-left-color:var(--danger)}
  .board-breadcrumb{font-size:10px;color:var(--text-3);margin-bottom:4px}
  .board-card.priority-high-card{border-left-color:var(--warning)}
  .board-card.priority-normal-card{border-left-color:var(--accent)}
  .board-card.priority-low-card{border-left-color:var(--text-3)}

  /* Mini timer — refined */
  .mini-timer{background:var(--bg-1);border-color:var(--border);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow-2)}
  .mini-timer.work{border-left:3px solid var(--accent)}
  .mini-timer.short{border-left:3px solid var(--success)}
  .mini-timer.long{border-left:3px solid var(--warning)}
  .mt-label{font-size:10px;color:var(--text-3);letter-spacing:0;font-weight:500;text-transform:none}
  .mt-time{font-size:15px;font-weight:600;color:var(--text-1);font-family:var(--font-mono);letter-spacing:0}

  /* Archived notice */
  .archived-notice{background:var(--danger-bg);border-color:var(--danger-border);color:var(--text-2);font-size:13px;padding:12px 16px;letter-spacing:0;text-transform:none}

  /* Archive/restore actions */
  .task-restore{width:26px;height:26px;font-size:13px;color:var(--success);border:1px solid var(--success-border);border-radius:var(--r-sm);background:transparent}
  .task-restore:hover{background:var(--success-bg)}

  /* Banner */
  #banner{background:var(--bg-1)!important;border-color:var(--border)!important;border-radius:var(--r-md)!important;padding:12px 16px!important}

  /* Remove yell-case on scattered labels */
  .fl{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3)}
  .fi{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:13px;padding:8px 10px;border-radius:var(--r-sm)}
  .sr-lbl{font-size:13px;color:var(--text-2);letter-spacing:0}
  .sinput{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:14px}
  .sunit{font-size:11px;color:var(--text-3)}

  /* Main timer card (on Focus tab) */
  .main-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
  .ring-time{font-family:var(--font-mono);font-size:var(--fs-48);font-weight:700;letter-spacing:-.02em;color:var(--text-1)}
  .ring-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);font-weight:600}
  .phase-nav-hint{font-size:11px;color:var(--text-4);letter-spacing:0;text-transform:none;font-weight:400}
  .tab{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;padding:10px 0}

  /* Settings */
  .stitle{padding:0}
  .stitle .slbl{font-size:13px}
  .srow{padding:10px 0;border-bottom:1px solid var(--border)}
  .srow:last-child{border-bottom:none}
  /* Srow layout modifiers — replaces inline style= overrides in HTML */
  .srow--spread{justify-content:space-between;gap:10px}
  .srow--col{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0 0;border-top:1px solid var(--border);margin-top:10px}
  .srow--no-top{margin-top:0;padding-top:0;border-top:none}
  .srow--col-stretch{flex-direction:column;align-items:stretch;gap:8px;padding:14px 0 10px;border-top:1px solid var(--border);margin-top:10px}
  /* Sr-lbl size modifiers */
  .sr-lbl--lg{font-size:13px}
  .sr-lbl--section{font-size:12px;letter-spacing:.06em}
  /* Panel padding modifier for tasks panel */
  .panel--tasks{padding:14px}
  /* Tags bar wrap spacing */
  .tags-bar-wrap{margin-bottom:8px}
  /* Mobile view toggle: full-width row, buttons fill equally */
  .mobile-view-toggle{width:100%}
  .mobile-view-toggle button{flex:1}
  /* Fieldset toolbar reset — border/padding/margin browser defaults */
  .task-toolbar-row{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
  /* Sdot colour for Tasks panel */
  .sdot--tasks{background:#e056a0}
  /* Plugin panel containers (genAI, sync, calfeeds) fill available row width */
  .srow-full{width:100%}
  /* System info text block */
  .system-info{font-size:11px;color:var(--text-3);line-height:1.6;font-variant-numeric:tabular-nums}
  /* PWA status label */
  .pwa-status{font-size:11px;color:var(--text-3);letter-spacing:0;text-align:right;max-width:200px}

  /* Toggle switch — clean */
  /* Toggle is now a <button role="switch">. Reset native button chrome and
     keep the switch visuals. WCAG 2.5.8 minimum: 24x24 — bumped to 44x24 so
     mobile taps are forgiving. */
  .toggle{
    appearance:none;-webkit-appearance:none;
    width:44px;height:24px;padding:0;border:1px solid var(--border-strong);
    border-radius:999px;background:var(--bg-3);
    position:relative;cursor:pointer;transition:.2s;
    flex-shrink:0;
  }
  .toggle.on{background:var(--accent);border-color:var(--accent)}
  .toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tknob{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:.2s;pointer-events:none}
  .toggle.on .tknob{left:22px}

  /* Interval (repeating chime) rows */
  .iitem{background:var(--bg-2);border-color:var(--border);border-radius:var(--r-md)}
  .iprev,.iadd{background:var(--accent);color:#0a1320;font-weight:600;font-size:12px;padding:8px 14px;border-radius:var(--r-sm);letter-spacing:0;text-transform:none}
  .iempty{color:var(--text-4);font-size:13px;letter-spacing:0;text-transform:none;padding:20px}

  /* Small buttons */
  .small-btn{font-size:11px;color:var(--text-3);letter-spacing:0;text-transform:none;padding:5px 12px;border-color:var(--border)}
  .small-btn:hover{color:var(--text-1);background:var(--bg-2)}

  /* Log */
  .log-item{padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
  .log-name{color:var(--text-1);font-size:12px}
  .log-dur,.log-time{font-size:11px;color:var(--text-3);letter-spacing:0}
  .log-empty{color:var(--text-4);font-size:13px;padding:20px;text-align:center}

  /* Stats */
  .stat-grid{gap:10px;margin-top:8px}
  .stat-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px}
  .stat-val{font-size:28px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-sans)}
  .stat-lbl{font-size:11px;color:var(--text-3);letter-spacing:0;text-transform:none;font-weight:500;margin-top:4px}

  /* Quick timers */
  .qt-item{background:var(--bg-1);border-color:var(--border);border-radius:var(--r-md);padding:12px 14px}
  .qt-item.running{background:linear-gradient(135deg,var(--bg-2),var(--accent-bg));border-color:var(--accent-border)}
  .qt-label{font-size:13px;color:var(--text-1);font-weight:500}
  .qt-time{font-size:20px;font-weight:700;color:var(--text-1);font-family:var(--font-mono);letter-spacing:-.01em}
  .qt-time.running{color:var(--accent)}
  .qt-time.warn{color:var(--warning)}
  .qt-time.done{color:var(--danger)}
  .qt-preset{background:var(--bg-2);border-color:var(--border);color:var(--text-2);font-size:12px;font-weight:500;letter-spacing:0;padding:6px 14px;border-radius:999px}
  .qt-preset:hover{background:var(--bg-3);color:var(--text-1)}

  /* Goals */
  .goal-item{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px}
  .goal-text{font-size:14px;color:var(--text-1)}
  .goal-empty{color:var(--text-4);font-size:13px;padding:20px;text-align:center}
  .goal-input{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:13px;padding:9px 12px;border-radius:var(--r-sm)}
  .goal-add{background:var(--accent);color:#0a1320;font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;padding:9px 14px;border-radius:var(--r-sm)}

  /* Task desc preview */
  .task-desc-preview{font-size:12px;color:var(--text-3);font-style:normal;letter-spacing:0}
  .task-link-badge{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;padding:1px 7px;border-radius:999px}
  .task-estimate{font-size:11px;color:var(--text-4);letter-spacing:0}

  /* Tabs (phase) on Focus */
  .tabs{background:var(--bg-2);border-radius:var(--r-md);padding:4px;gap:2px}

  /* Drag-and-drop */
  .task-item[draggable="true"]{cursor:grab}
  .task-item[draggable="true"]:active{cursor:grabbing}
  /* Legacy native-drag visuals (.dragging, .drop-above, .drop-below) replaced
     by Sortable.js classes: .task-item--ghost (placeholder slot in flow),
     .task-item--chosen (the row your finger is on), .task-item--dragging
     (the floating ghost while moving). The legacy classes are kept defined
     in case any external integration still adds them, but they now point at
     the Sortable equivalents so we don't carry dead styles. */
  .task-item.dragging,
  .task-item--dragging{opacity:.85;box-shadow:var(--shadow-3);transform:scale(1.02)}
  .task-item--ghost{opacity:.35;background:var(--accent-bg)!important;border:1px dashed var(--accent-border)!important}
  .task-item--chosen{box-shadow:0 0 0 2px var(--accent-border) inset}
  .board-col.drop-target{background:var(--accent-bg);border-color:var(--accent-border)}
  .drag-handle{cursor:grab;color:var(--text-4);font-size:14px;padding:0 2px;flex-shrink:0;user-select:none;width:12px;display:flex;align-items:center;justify-content:center}
  .drag-handle:hover{color:var(--text-2)}
  .drag-handle:active{cursor:grabbing}

  /* Section headers (when grouping) */
  /* Group headers stick to the top of the scroll context so context is never
     lost when scrolling through long grouped lists. */
  .task-section{
    position:sticky;top:0;z-index:5;
    margin:16px 0 8px;padding:8px 12px;
    background:var(--bg-1);
    -webkit-backdrop-filter:saturate(140%) blur(6px);
    backdrop-filter:saturate(140%) blur(6px);
    border:1px solid var(--border);border-radius:var(--r-sm);
    display:flex;align-items:center;gap:var(--space-4);
    cursor:pointer;user-select:none;
  }
  .task-section:first-child{margin-top:0}
  .task-section:hover{background:var(--bg-3)}

  /* Long-list affordance: a 2px scroll-progress bar that fills as the user
     scrolls through a 50+ task list. Auto-hidden on shorter lists. */
  .task-list-progress{
    position:sticky;top:0;z-index:6;
    width:100%;height:2px;background:transparent;
    margin-block-end:var(--space-2);
    border-radius:1px;overflow:hidden;
  }
  .task-list-progress-bar{
    height:100%;width:0%;
    background:linear-gradient(90deg,var(--accent),var(--purple));
    transition:width .12s linear;
  }

  /* Density segmented control. Three radio-buttons styled as one pill. */
  .density-seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:2px;gap:2px}
  .density-seg-btn{
    padding:5px 10px;border-radius:calc(var(--r-md) - 4px);
    background:transparent;color:var(--text-3);
    font-size:var(--fs-12);font-weight:600;letter-spacing:.02em;
    border:1px solid transparent;cursor:pointer;transition:.15s;
  }
  .density-seg-btn:hover{color:var(--text-1)}
  .density-seg-btn.on,.density-seg-btn[aria-checked="true"]{
    background:var(--bg-0);color:var(--text-1);border-color:var(--border-strong);
    box-shadow:var(--shadow-1);
  }
  .density-seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .ts-chevron{color:var(--text-3);font-size:10px;transition:transform .2s;width:12px;display:inline-flex;justify-content:center}
  .ts-chevron.collapsed{transform:rotate(-90deg)}
  .ts-label{font-size:13px;font-weight:600;color:var(--text-1);letter-spacing:0;flex:1;display:flex;align-items:center;gap:8px}
  .ts-count{font-size:11px;color:var(--text-3);font-weight:500}
  .ts-color{width:10px;height:10px;border-radius:50%;flex-shrink:0}

  /* Completion celebration */
  @keyframes taskDonePop{0%{transform:scale(1)}30%{transform:scale(1.03);background:var(--success-bg)}100%{transform:scale(1)}}
  .task-item.just-done{animation:taskDonePop .5s ease-out}
  @keyframes confetti{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.3)}}
  .done-sparkle{position:absolute;pointer-events:none;font-size:18px;animation:confetti .6s ease-out forwards}

  /* Calendar view */
  .cal-feed-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding:8px 12px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);font-size:12px}
  .cal-feed-alert-msg{color:var(--text-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cal-feed-alert-btn{flex-shrink:0;padding:4px 10px;border-radius:6px;border:1px solid var(--warning);background:transparent;color:var(--warning);font-size:11px;font-weight:600;cursor:pointer}
  .cal-feed-alert-btn:hover{background:var(--warning);color:var(--bg-0)}
  .calendar{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
  .cal-title{font-size:16px;font-weight:700;color:var(--text-1);flex:1;text-align:center}
  .cal-nav{width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);font-size:16px;cursor:pointer;font-family:inherit}
  .cal-nav:hover{background:var(--bg-3);color:var(--text-1)}
  .cal-today-btn{padding:0 14px;height:34px;border-radius:var(--r-sm);background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
  .cal-weekday{font-size:11px;color:var(--text-3);text-align:center;font-weight:600;padding:6px 0}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .cal-day{min-height:80px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:.15s;position:relative}
  .cal-day:hover{border-color:var(--border-strong);background:var(--bg-3)}
  .cal-day.other-month{opacity:.35}
  .cal-day.today{border-color:var(--accent);background:linear-gradient(135deg,var(--bg-2),var(--accent-bg))}
  .cal-day.today .cal-daynum{color:var(--accent);font-weight:700}
  .cal-day.drop-target{border-color:var(--accent);background:var(--accent-bg)}
  .cal-daynum{font-size:12px;font-weight:600;color:var(--text-2)}
  .cal-task{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg-3);color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-left:2px solid var(--accent)}
  .cal-task:hover{background:var(--border-strong)}
  .cal-task.p-urgent{border-left-color:var(--danger)}
  .cal-task.p-high{border-left-color:var(--warning)}
  .cal-task.p-normal{border-left-color:var(--accent)}
  .cal-task.p-low{border-left-color:var(--text-3)}
  .cal-task.done{opacity:.4;text-decoration:line-through}
  .cal-task-more{font-size:10px;color:var(--text-3);text-align:center;padding:2px}

  /* Command Palette (Cmd+K) */
  .cmdk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:var(--z-cmdk);display:none;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
  .cmdk-overlay.open{display:flex;animation:fadeIn .15s}
  .cmdk-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);width:100%;max-width:560px;box-shadow:var(--shadow-3);overflow:hidden;max-height:min(90vh, 90dvh)}
  .cmdk-input{width:100%;padding:16px 18px;background:transparent;border:none;color:var(--text-1);font-size:15px;font-family:inherit;outline:0;border-bottom:1px solid var(--border)}
  .cmdk-input::placeholder{color:var(--text-4)}
  .cmdk-results{max-height:420px;overflow-y:auto;padding:6px}
  .cmdk-section{font-size:10px;color:var(--text-3);padding:10px 10px 4px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;transition:.1s;font-size:13px;color:var(--text-1)}
  .cmdk-item.active{background:var(--accent-bg);color:var(--accent)}
  .cmdk-item:hover{background:var(--bg-2)}
  .cmdk-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-3);flex-shrink:0}
  .cmdk-item.active .cmdk-icon{color:var(--accent)}
  .cmdk-desc{font-size:11px;color:var(--text-3);margin-left:auto}
  .cmdk-kbd{font-family:var(--font-mono);font-size:10px;background:var(--bg-2);border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--text-3);margin-left:auto}
  .cmdk-empty{text-align:center;padding:32px;color:var(--text-4);font-size:13px}

  /* ========== FINAL POLISH OVERRIDES ========== */
  .tag-edit-chip{background:var(--bg-3);color:var(--text-2);border:none;font-size:11px;padding:3px 10px;letter-spacing:0;text-transform:none;font-weight:500;border-radius:999px}
  .tag-edit-chip .tag-rm{color:var(--text-4);font-size:12px}
  .tag-edit-chip .tag-rm:hover{color:var(--danger)}
  .tag-input{background:var(--bg-2);border-color:var(--border);color:var(--text-1);font-size:12px;padding:4px 10px;border-radius:999px}

  .export-btn{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;padding:9px 14px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--text-2);border:1px solid var(--border)}
  .export-btn:hover{background:var(--bg-3);color:var(--text-1)}
  .export-txt,.export-md,.export-csv,.export-clip{background:var(--bg-2);color:var(--text-2);border:1px solid var(--border)}
  .export-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

  .save-indicator{background:var(--success-bg)!important;color:var(--success)!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important;padding:6px 12px!important;border-radius:999px!important;border:1px solid var(--success-border)!important;bottom:90px!important;right:16px!important;font-weight:500!important}

  .hist-day-section-title{font-size:11px;letter-spacing:0;text-transform:none;color:var(--text-3);font-weight:500;margin-bottom:6px}

  .clear-hist-btn{background:transparent;color:var(--text-3);border:1px solid var(--border);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;padding:6px 14px;border-radius:var(--r-sm)}
  .clear-hist-btn:hover{color:var(--danger);border-color:var(--danger-border)}

  /* Ensure datetime pickers show readable */
  input[type="date"].mfield-in,input[type="datetime-local"].mfield-in{color-scheme:dark}
  body.light-theme input[type="date"].mfield-in,body.light-theme input[type="datetime-local"].mfield-in{color-scheme:light}

  .qa-hint{line-height:1.8}

  /* Pomodoro pips - colorized */
  .pip{width:10px;height:10px;border:1.5px solid var(--border-strong)}
  .pip:hover{transform:scale(1.2)}
  .pip.done{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-border)}
  .pip.current{border-color:var(--accent)}

  /* Ring background refined */
  .ring-bg{stroke:var(--bg-3)!important}

  /* Chrome sub-timer style polish */
  .ilist{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .iform{margin-top:10px}

  /* Modal Stats row */
  .modal-stat{background:var(--bg-2);color:var(--text-2);font-size:12px;padding:10px 14px;border-radius:var(--r-sm);letter-spacing:0;text-transform:none;line-height:1.5}
  .modal-stat b{color:var(--text-1)}

  /* Goal progress */
  .goal-progress{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;margin-top:10px;display:flex;align-items:center;gap:10px}
  .goal-pct{font-size:13px;font-weight:600;color:var(--text-1);font-family:var(--font-mono);min-width:40px;text-align:right}
  .goal-bar-wrap{flex:1;height:6px;background:var(--bg-3);border-radius:3px;overflow:hidden}
  .goal-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));transition:width .3s}

  /* Goal/task button radii */
  .goal-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--border-strong);background:transparent;color:transparent;font-size:12px;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .goal-check:hover{border-color:var(--success)}
  .goal-check.on{background:var(--success);border-color:var(--success);color:#0a1320}

  /* Goal remove */
  .goal-rm{width:22px;height:22px;background:transparent;border:none;color:var(--text-4);font-size:14px;cursor:pointer;border-radius:var(--r-sm);margin-left:auto}
  .goal-rm:hover{color:var(--danger);background:var(--danger-bg)}

  /* Goal time */
  .goal-time{font-size:11px;color:var(--text-4);margin-right:6px}

  /* Log dot + dur */
  .log-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

  /* Archive blocks */
  .archive-day{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;margin-bottom:8px;cursor:pointer}
  .archive-day:hover{background:var(--bg-3)}
  .archive-day-hdr{display:flex;align-items:center;gap:10px}
  .archive-day-date{font-size:13px;font-weight:600;color:var(--text-1)}
  .archive-day-summary{font-size:11px;color:var(--text-3);margin-left:auto}

  /* ===== Final micro-fixes ===== */
  /* Repeating chime + Quick timer ADD buttons */
  .iadd{background:var(--accent);color:#0a1320;font-weight:600;padding:9px 14px;font-size:12px;letter-spacing:0;text-transform:none;border-radius:var(--r-sm)}
  .iadd:hover{background:#7db3ff}
  .iprev{background:var(--bg-2);color:var(--text-2);border:1px solid var(--border);font-size:13px;padding:9px 12px;border-radius:var(--r-sm)}
  .iprev:hover{background:var(--bg-3);color:var(--text-1)}

  /* Goal add button */
  .goal-add{background:var(--accent);color:#0a1320;font-weight:600;padding:9px 14px;font-size:12px;letter-spacing:0;text-transform:none;border-radius:var(--r-sm)}
  .goal-add:hover{background:#7db3ff}

  /* Calendar day readability in light theme */
  body.light-theme .cal-task{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border)}
  body.light-theme .cal-day.today{background:var(--accent-bg)}
  body.light-theme .cal-day{background:var(--bg-1)}
  body.light-theme .cal-day:hover{background:var(--bg-2)}

  /* Stat value colors in light theme */
  body.light-theme .stat-val.wc{color:var(--accent)}
  body.light-theme .stat-val.tc{color:var(--warning)}
  body.light-theme .stat-val.bc{color:var(--success)}

  /* Make sure the floating mini-timer pill button shows ▶/⏸ clearly */
  .mt-btn{color:#0a1320;font-weight:700;font-size:12px}
  .mt-pause{background:var(--accent)!important}
  .mt-play{background:var(--success)!important}
  body.light-theme .mt-btn{color:#fff}

  /* Light theme ring */
  body.light-theme .ring-bg{stroke:#e3e8f0!important}

  /* Light theme banner */
  body.light-theme #banner{background:var(--bg-1)!important;border-color:var(--border)!important}

  /* Modal overlay in light */
  body.light-theme .modal-overlay{background:rgba(15,23,42,.55)}

  /* Done-sparkle visibility in both themes */
  .done-sparkle{filter:drop-shadow(0 0 6px var(--success))}

  /* Consistent scrollbar color in light */
  body.light-theme *::-webkit-scrollbar-thumb{background:#c7d0de}

  /* Ensure number/date inputs match dark mode */
  .fi,.fi-n,.fi-s,.fi-w{color-scheme:dark}
  body.light-theme .fi,body.light-theme .fi-n,body.light-theme .fi-s,body.light-theme .fi-w{color-scheme:light}
  .sinput{color-scheme:dark}
  body.light-theme .sinput{color-scheme:light}

  /* Make Timer phase tabs prominent */
  .tab.active{color:#fff}
  .tab.active.work{background:var(--accent);color:#0a1320}
  .tab.active.short{background:var(--success);color:#0a1320}
  .tab.active.long{background:var(--warning);color:#0a1320}

  /* Light theme tab label when active (dark text on light button) */
  body.light-theme .tab.active.work,body.light-theme .tab.active.short,body.light-theme .tab.active.long{color:#0a1320}

  /* ================================================================= */
  /* ========= NEUROSCIENCE-BACKED TASK ROW (v2) ===================== */
  /* • Cognitive Load Theory — minimize extraneous load                 */
  /* • Progressive Disclosure — hide until needed                       */
  /* • Fitts's Law — large checkbox, whole row clickable                */
  /* • Preattentive processing — color stripe signals priority          */
  /* ================================================================= */
  .task-item{
    background:var(--bg-1);
    border:1px solid var(--border);
    border-left:3px solid var(--border);
    border-radius:var(--r-md);
    padding:0;gap:0;margin-bottom:4px;
    transition:background .12s,border-color .12s,transform .12s;
    position:relative;display:block;
  }
  .task-item:hover{background:var(--bg-2);border-color:var(--border-strong)}
  .task-item.priority-urgent-item{border-left-color:var(--danger)}
  .task-item.priority-high-item{border-left-color:var(--warning)}
  .task-item.priority-normal-item{border-left-color:var(--accent)}
  .task-item.priority-low-item{border-left-color:var(--text-4)}
  .task-item.starred-task{border-left-color:#e0a020}
  .task-item.starred-task:hover{background:linear-gradient(90deg,rgba(224,160,32,.06),var(--bg-2))}
  .task-item.overdue{border-left-color:var(--danger)!important;border-left-width:3px!important}
  .task-item.active-task{
    background:linear-gradient(90deg,var(--accent-bg) 0%,var(--bg-1) 40%);
    border-color:var(--accent-border);
    border-left-color:var(--accent)!important;
  }
  .task-item.completed{opacity:.45}
  .task-item.completed .task-name{text-decoration:line-through;color:var(--text-3)}
  .task-item.completed .task-signals,.task-item.completed .task-row-secondary{display:none}

  .task-row-primary{
    /* column-gap (not gap) keeps a tight horizontal rhythm: chevron+checkbox
       cluster snug to the title, while .task-row-actions pushes itself to the
       trailing edge via margin-inline-start:auto. */
    display:flex;align-items:center;column-gap:var(--space-5);
    padding:11px 14px;min-height:48px;cursor:pointer;
  }
  .task-row-primary .task-checkbox{
    width:22px;height:22px;min-width:22px;
    border:2px solid var(--border-strong);border-radius:7px;
    background:var(--bg-2);
    display:flex;align-items:center;justify-content:center;
    color:transparent;font-weight:700;font-size:13px;
    transition:all .15s;cursor:pointer;padding:0;flex-shrink:0;
  }
  .task-row-primary .task-checkbox:hover{border-color:var(--success);background:var(--success-bg);transform:scale(1.08)}
  .task-row-primary .task-checkbox.checked{background:var(--success);border-color:var(--success);color:#0a1320;animation:checkPop .3s ease-out}

  .task-row-primary .task-chevron{
    width:18px;height:18px;min-width:18px;
    background:transparent;border:none;
    color:var(--text-3);font-size:10px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;border-radius:4px;
    transform:rotate(90deg);transition:transform .15s,color .15s;
  }
  .task-row-primary .task-chevron:hover{color:var(--text-1);background:var(--bg-3)}
  .task-row-primary .task-chevron.collapsed{transform:rotate(0deg)}
  .task-chevron-spacer{width:0;min-width:0;display:none}

  .task-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;overflow:hidden}
  .star-pin{color:#e0a020;font-size:13px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(224,160,32,.5))}
  .task-main .task-name{
    /* Bumped to weight 600 for hierarchy: title vs. signals/actions. */
    font-size:var(--fs-14);font-weight:600;color:var(--text-1);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    flex:1;min-width:0;
  }
  .task-item.has-children .task-name{font-weight:700}

  .task-signals{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;font-size:var(--fs-12);color:var(--text-3)}
  .task-sig{font-size:var(--fs-12);font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--bg-3);color:var(--text-3)}
  .task-sig.sig-subs{font-family:var(--font-mono);font-size:10px;padding:2px 7px}
  .task-sig.sig-recur{background:var(--purple-bg);color:var(--purple);padding:2px 6px;font-size:10px}
  .task-sig.sig-active{background:var(--accent-bg);color:var(--accent);font-weight:600;font-family:var(--font-mono)}

  /* ===== ACTIONS — soft-visible by default, full opacity on hover ===== */
  /* Hybrid disclosure: shows affordance always (so users know it's there)  */
  /* but de-emphasized at rest (so it doesn't compete with content)         */
  .task-row-actions{
    display:flex;align-items:center;gap:var(--space-1);
    margin-inline-start:auto;
    opacity:.35;transition:opacity .15s;
    flex-shrink:0;
  }
  .task-item:hover .task-row-actions,
  .task-item:focus-within .task-row-actions{opacity:1}
  @media (hover:none){.task-row-actions{opacity:1}}

  .ta-btn{
    width:28px;height:28px;background:transparent;border:none;
    color:var(--text-3);font-size:13px;border-radius:var(--r-sm);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0;
  }
  .ta-btn:hover{background:var(--bg-3);color:var(--text-1)}
  .ta-btn.ta-star.on{color:var(--warning)}
  .ta-btn.ta-star.on:hover{background:var(--warning-bg)}
  .ta-btn.ta-play{color:var(--success)}
  .ta-btn.ta-play:hover{background:var(--success-bg)}
  .ta-btn.ta-play.on{color:var(--danger);background:var(--danger-bg)}
  .ta-btn.ta-del:hover{color:var(--danger);background:var(--danger-bg)}
  .ta-btn.ta-sub:hover{color:var(--success);background:var(--success-bg)}
  .ta-btn.ta-restore{color:var(--success)}
  .ta-btn.ta-restore:hover{background:var(--success-bg)}
  .task-item.active-task .task-row-actions .ta-play,
  .task-item.starred-task .task-row-actions .ta-star{opacity:1!important;pointer-events:auto!important}

  .task-cat-stripe{box-shadow:inset 3px 0 0 0 var(--cat-stripe, transparent)}
  .task-item--pareto{box-shadow:0 0 0 1px rgba(255,159,10,.35),var(--shadow-1)}
  .task-item--tracking .task-name::before{
    content:'';display:inline-block;width:6px;height:6px;margin-right:6px;vertical-align:middle;
    border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);
  }
  .habits-hidden-notice{
    font-size:11px;color:var(--text-3);padding:6px 4px 10px;
    text-align:center;
  }
  .habits-hidden-notice .habits-hidden-link,
  .habits-hidden-notice .btn-habits-link{
    background:none;border:none;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;padding:0;
  }
  /* ===== DENSITY MODES =====
     Comfortable: roomy, secondary row visible always (no hover required).
     Cozy: default, secondary row reveals on hover/focus (existing behavior).
     Compact: tight rows, smaller checkbox, subtler signals — for power users
              with long lists. Secondary row stays gated to hover. */
  .task-list--comfortable .task-row-primary{padding:14px 16px;min-height:56px;column-gap:var(--space-6)}
  .task-list--comfortable .task-row-secondary{display:flex}
  .task-list--comfortable .task-item{padding-block-end:2px}
  .task-list--cozy .task-row-primary{padding:11px 14px;min-height:48px}
  .task-list--compact .task-row-primary{padding:6px 10px;min-height:36px;column-gap:var(--space-4)}
  .task-list--compact .task-name{font-size:var(--fs-13)}
  .task-list--compact .task-row-primary .task-checkbox{width:18px;height:18px;min-width:18px;border-width:1.5px}
  .task-list--compact .task-sig{padding:1px 6px;font-size:11px}
  .task-list--compact .task-row-secondary{padding:0 10px 6px 36px}
  .task-row-secondary{
    display:none;align-items:center;gap:8px;flex-wrap:wrap;
    padding:0 14px 10px 52px;font-size:12px;color:var(--text-3);
  }
  .task-item:hover .task-row-secondary,
  .task-item:focus-within .task-row-secondary{display:flex}
  @media (hover:none){
    .task-item .task-row-secondary{display:flex}
    /* On touch devices, list chip Edit (✎) and Remove (✕) icons stay visible
       and meet a comfortable tap area — hover-only reveal is unreachable here */
    .list-chip .lc-edit,
    .list-chip .lc-rm{
      opacity:.7;font-size:13px;
      min-width:32px;min-height:32px;padding:0 6px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:6px;
    }
    .list-chip .lc-edit:active,
    .list-chip .lc-rm:active{opacity:1;background:var(--bg-3)}
  }
  .task-row-secondary:empty{display:none}
  .task-row-secondary .status-badge{font-size:10px;padding:2px 8px;min-height:auto}
  .task-row-secondary .status-badge.hidden-status{display:none}
  .task-tags-inline{display:inline-flex;gap:4px;flex-wrap:wrap}
  .task-tags-inline .tag-chip{font-size:10px;padding:1px 7px;background:var(--bg-3);color:var(--text-3);border:none}
  .task-desc-inline{font-size:11px;color:var(--text-4);font-style:italic;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  @media (max-width:640px){
    .task-row-primary{padding:10px 12px;gap:8px;min-height:52px}
    .task-row-actions{opacity:1;pointer-events:auto;gap:0}
    .ta-btn{width:36px;height:36px;font-size:15px}
    .ta-btn.ta-sub,.ta-btn.ta-star:not(.on){display:none}
    .task-item.starred-task .ta-star{display:flex}
    .task-row-secondary{padding:0 12px 8px 46px;font-size:11px}
    .task-sig{font-size:10px;padding:1px 6px}
    .task-signals{gap:4px}
  }

  /* ================================================================= */
  /* ================== MOBILE OPTIMIZATION (≤640px) ================== */
  /* ================================================================= */

  /* iOS zoom prevention — inputs MUST be ≥16px */
  @media (max-width:640px){
    input,select,textarea{font-size:16px!important}
    .task-input,.mfield-in,.mfield-textarea,.task-search,.task-tb-sel,.goal-input,.sinput,.fi,.list-new-input,.tag-input,.task-sub-input,.cmdk-input{font-size:16px!important}
  }

  @media (max-width:640px){
    /* Safe-area padding for iPhone notches/home indicator */
    body{padding:env(safe-area-inset-top,12px) 12px calc(60px + env(safe-area-inset-bottom,0px))}

    .container{max-width:100%}

    /* Header - smaller on mobile */
    .header{margin-bottom:14px}
    .header h1{font-size:18px}
    .header-logo{width:26px;height:26px}
    .header-date{font-size:12px;margin-top:2px}

    /* Banner (active-task tracker) - compact */
    #banner{padding:8px 10px!important;margin-bottom:8px!important}
    #bannerTask{font-size:12px!important}
    #bannerTime{font-size:13px!important}

    /* Nav tabs - icon only on mobile, smaller */
    .nav-tabs{padding:3px;gap:1px}
    .nav-tab{padding:8px 2px;min-height:48px;font-size:10px;gap:2px}
    .nav-tab-icon{font-size:16px}
    .nav-tab span:last-child{font-size:10px;letter-spacing:0}
    /* Theme + Ask / palette button */
    #themeToggleBtn{width:40px!important;height:40px!important;min-width:40px}
    #cmdKBtn.header-icon-btn--cmdk{width:auto!important;height:auto!important;min-width:56px!important;min-height:44px!important;padding:0 10px!important}
    .ai-chip{height:36px;padding:0 6px;min-width:36px;justify-content:center}
    .ai-chip-label{font-size:10px}
    body:has(.mini-timer.visible){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}

    /* Panel - tighter padding */
    .panel{padding:12px;margin-bottom:10px;border-radius:var(--r-md)}

    /* Today banner - row layout, no 2x2 */
    .today-banner{padding:12px 8px;margin-bottom:10px;gap:4px!important;flex-wrap:nowrap!important}
    .tb-item{flex:1!important;min-width:0!important;text-align:center;padding:0 2px}
    .tb-num{font-size:22px!important}
    .tb-lbl{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tb-divider{display:none!important}

    /* Smart views - horizontal scroll instead of wrap. mask-image fades the
       right edge so users SEE that more chips exist beyond the viewport;
       without it, "Fo..." cut-offs read as visual bugs rather than scroll
       affordances. */
    .smart-views{padding:4px;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
    .smart-views::-webkit-scrollbar{display:none}
    .sv-chip{white-space:nowrap;flex-shrink:0;padding:10px 12px;min-height:40px;font-size:13px}
    .sv-icon{font-size:14px}
    .sv-count{font-size:11px;padding:1px 7px}

    /* Lists bar - horizontal scroll, same fade affordance as smart-views. */
    .lists-bar{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none;gap:6px;padding:8px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
    .lists-bar::-webkit-scrollbar{display:none}
    .list-chip{white-space:nowrap;flex-shrink:0;padding:8px 12px;min-height:40px;font-size:13px}
    .list-add{flex-shrink:0;padding:8px 12px;min-height:40px;font-size:13px}

    /* Toolbar — stack into 2 rows: search full-width, then selects+views */
    .task-toolbar{flex-direction:column!important;gap:6px!important;padding:8px;align-items:stretch!important}
    .task-search{width:100%;min-height:44px;font-size:16px!important;padding:10px 12px!important}
    .task-toolbar-row{display:flex;gap:6px;width:100%;flex-wrap:wrap}
    .task-tb-sel{flex:1;min-width:0;min-height:44px;font-size:13px!important;padding:8px 10px!important}
    .view-toggle{width:100%;justify-content:space-between;display:flex!important}
    .view-toggle button{flex:1;min-height:40px;font-size:13px;padding:8px 12px}

    /* Task input + Add button - bigger */
    .task-form{flex-direction:row;gap:6px;padding:0}
    .task-input{flex:1;min-height:46px;font-size:16px!important;padding:11px 14px!important}
    .task-add{min-height:46px;padding:0 16px;font-size:14px;white-space:nowrap}

    /* Quick-add hint - hide on mobile (takes too much space) */
    .qa-hint{display:none}

    /* Task item - vertical stack: checkbox+play top, name+meta below */
    .task-item{padding:10px 12px;gap:8px;flex-wrap:wrap;align-items:flex-start}
    .task-item > *{flex-shrink:0}
    .task-item .task-checkbox{width:24px;height:24px;min-width:24px;min-height:24px}
    .task-item .task-star{width:30px;height:30px;min-width:30px;font-size:15px}
    .task-item .task-play{width:34px;height:34px;min-width:34px;font-size:12px}
    .task-name-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
    .task-name{font-size:14px;white-space:normal!important;overflow:visible!important;text-overflow:unset!important;word-break:break-word}
    .task-meta-row{width:100%;gap:6px;margin-top:4px;flex-wrap:wrap}
    .task-actions{width:auto;margin-left:auto;gap:4px;flex-shrink:0}
    .task-add-sub-btn{padding:6px 10px;height:30px;font-size:11px;min-width:50px}
    .task-rm{width:30px;height:30px;min-width:30px;font-size:15px}
    .status-badge{padding:4px 10px;font-size:11px;min-height:24px}
    .priority-flag{font-size:12px;padding:2px 4px;min-height:20px}
    .date-chip{padding:4px 10px;font-size:11px;min-height:24px}
    .tag-chip{padding:3px 10px;font-size:11px;min-height:22px}
    .recur-badge{padding:3px 9px;font-size:11px;min-height:22px}

    /* Task chevron (for collapsible children) - touch size */
    .task-chevron{width:26px;height:26px;min-width:26px;font-size:12px}
    .drag-handle{display:none}  /* drag not reliable on touch; hide handle */

    /* Subtask indent - less on mobile */
    .task-item.depth-1{margin-left:14px!important}
    .task-item.depth-2{margin-left:28px!important}
    .task-item.depth-3{margin-left:42px!important}
    .task-item.depth-4{margin-left:42px!important}  /* cap to prevent horizontal squeeze */

    /* Modal - bottom-sheet style */
    .modal-overlay{align-items:flex-end;padding:0!important}
    .modal{width:100%!important;max-width:100%!important;max-height:92vh;border-radius:16px 16px 0 0;animation:slideUp .25s ease-out}
    @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
    /* Bottom-sheet drag-handle affordance — telegraphs "swipe down to close"
       on mobile per iOS / Android sheet conventions. The header wears the
       handle so dragging the body's scroll area doesn't dismiss accidentally. */
    .modal-head{padding:18px 16px 14px;position:sticky;top:0;background:var(--bg-1);z-index:2;border-bottom:1px solid var(--border);touch-action:none;cursor:grab}
    .modal-head::before{
      content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
      width:36px;height:4px;border-radius:999px;background:var(--border-strong);
      opacity:.7;
    }
    .modal-head:active{cursor:grabbing}
    .modal-body{padding:14px 16px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
    .modal-foot{position:sticky;bottom:0;background:var(--bg-1);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));z-index:2;border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(0,0,0,.3);flex-wrap:wrap;gap:6px}
    .mfoot-btn{flex:1;min-height:44px;font-size:14px;padding:11px 14px}
    .mfoot-del{flex:1;max-width:120px}
    /* Modal fields stack on mobile */
    .modal-body .mrow{grid-template-columns:1fr!important;gap:10px!important}
    .mfield-in{min-height:44px;font-size:16px!important;padding:11px 13px!important}
    .mfield-chip-btn{min-height:40px;padding:9px 14px;font-size:13px}
    .mfield-chip-group{flex-wrap:wrap;gap:6px}
    .qd-btn,.recur-opt{min-height:36px;padding:8px 12px;font-size:12px}
    .modal-close{width:36px;height:36px;min-width:36px;font-size:18px}
    .mdtitle-in{font-size:16px!important;min-height:44px}

    /* Calendar — narrower day cells, smaller labels */
    .calendar{padding:10px}
    .cal-head{margin-bottom:8px;gap:4px}
    .cal-title{font-size:14px}
    .cal-nav{width:36px;height:36px;min-height:36px;font-size:14px}
    .cal-today-btn{height:36px;padding:0 12px;font-size:12px}
    .cal-weekday{font-size:10px;padding:4px 0}
    .cal-weekdays,.cal-grid{gap:2px}
    .cal-day{min-height:54px;padding:3px;gap:1px}
    .cal-daynum{font-size:11px}
    .cal-task{font-size:9px;padding:1px 4px;border-radius:2px}
    .cal-task-more{font-size:9px;padding:1px}

    /* Board view — narrower columns, horizontal scroll snap */
    .board-view{gap:8px;padding:0;scroll-snap-type:x mandatory}
    .board-col{min-width:78vw!important;width:78vw!important;max-width:78vw!important;scroll-snap-align:start;flex-shrink:0}
    .board-col-hdr{padding:10px 12px}
    .board-card{padding:10px 12px}
    .board-card-name{font-size:13px;-webkit-line-clamp:3}
    .board-col-body{padding:8px}
    .hm-grid{max-width:220px}

    /* Pomodoro timer card — smaller ring */
    .ring-wrap{width:180px;height:180px}
    .ring-svg{width:180px;height:180px}
    .ring-time{font-size:40px}
    .ring-label{font-size:11px}
    .card{padding:18px;gap:14px}
    .ctrls .btn{min-height:44px;padding:10px 22px;font-size:13px}
    .tabs{padding:3px;gap:1px}
    .tab{padding:10px 0;font-size:12px;min-height:40px}
    .phase-nav-hint{font-size:10px;line-height:1.4}

    /* Quick Timers presets - smaller pills */
    .qt-preset{padding:7px 12px;font-size:13px;min-height:38px}
    .qt-form,.goal-form{flex-wrap:wrap;gap:6px}
    .iform{flex-wrap:wrap;gap:6px}
    .qt-item,.iitem,.goal-item{padding:10px 12px;flex-wrap:wrap}
    .qt-time{font-size:18px}
    .iadd,.goal-add,.qt-add{min-height:40px;padding:9px 14px}

    /* Mini-timer - respect safe-area, smaller on mobile */
    .mini-timer{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;right:12px!important;padding:6px 10px!important;gap:8px!important}
    .mt-time{font-size:12px}
    .mt-label{font-size:9px}
    .mt-btn{width:28px;height:28px;min-width:28px;font-size:11px}
    /* Hide mini-timer in calendar view (it overlaps the grid) */
    body.cal-active-mobile .mini-timer{opacity:.35;transform:scale(.85);transform-origin:bottom right}
    body.cal-active-mobile .mini-timer:hover,body.cal-active-mobile .mini-timer:active{opacity:1;transform:scale(1)}

    /* Save indicator - tiny dot-pill, bottom-left, well out of the way */
    .save-indicator{bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;left:10px!important;right:auto!important;font-size:10px!important;padding:3px 9px!important;border-radius:999px!important}
    .save-indicator.show{opacity:.9!important}

    /* Cmd+K - bottom sheet on mobile */
    .cmdk-overlay{padding:0!important;align-items:flex-end}
    .cmdk-panel{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:min(80vh, 80dvh)}
    .cmdk-input{font-size:16px!important;padding:16px;min-height:56px}
    .cmdk-results{max-height:min(60vh, 55dvh)}
    .cmdk-item{padding:12px;min-height:44px;font-size:14px}

    /* Settings - stacked rows */
    .srow{flex-wrap:wrap;gap:8px;padding:12px 0}
    .sr-lbl{font-size:14px;flex:1;min-width:0}
    .sinput{min-height:44px;font-size:16px!important;width:72px!important;text-align:center}
    select.sinput{width:auto!important;min-width:100px;text-align:left;padding-right:24px!important;text-overflow:ellipsis}
    .toggle{width:42px;height:24px;flex-shrink:0}
    .toggle .tknob{width:18px;height:18px}
    .toggle.on .tknob{left:21px}

    /* Data tab */
    .stat-box{padding:12px}
    .stat-val{font-size:24px}
    .stat-lbl{font-size:10px}
    .stat-grid{grid-template-columns:repeat(3,1fr);gap:6px}
    .export-row{gap:6px}
    .export-btn{padding:10px 12px;font-size:12px;min-height:40px;flex:1;min-width:calc(50% - 3px)}

    /* Log items */
    .log-item{padding:10px 0;flex-wrap:wrap}
    .log-name{font-size:13px}

    /* Section headers (group mode) */
    .task-section{padding:10px 12px;min-height:44px}
    .ts-label{font-size:13px}

    /* Tag-edit-chip remove button - bigger touch target */
    .tag-edit-chip .tag-rm{padding:0 4px;font-size:14px}
  }

  /* Very narrow phones - further adjust */
  @media (max-width:360px){
    .nav-tab span:last-child{display:none}
    .nav-tab{min-height:44px}
    .tb-num{font-size:20px!important}
    .tb-lbl{font-size:9px!important}
    /* Earlier passes attempted an icon-only Add by hiding `.task-add span` and
       injecting `+` via ::before — but the button label is bare text, not a
       span, so the hide-rule was dead and the ::before stacked on top of the
       existing "+ Add" producing "+ + Add" at <360px. Keep the full label. */
    .view-toggle button{font-size:12px;padding:6px 8px}
  }

  /* ================================================================= */
  /* ========== PASS 2: COMPREHENSIVE MOBILE UX POLISH =============== */
  /* ================================================================= */
  @media (max-width:640px){

    /* === HEADER: tighter, less vertical space === */
    .header{margin-bottom:8px}
    .header h1{font-size:16px;letter-spacing:0}
    .header-date{font-size:11px}

    /* === NAV TABS: single compact row, theme/cmdK icon-only === */
    .nav-tabs{padding:2px;gap:0;margin-right:6px}
    .nav-tab{padding:6px 2px;min-height:44px;font-size:9px}
    .nav-tab-icon{font-size:15px;margin-bottom:1px}
    /* Touch targets: WCAG 2.1 AAA recommends ≥44px for header icon buttons */
    #themeToggleBtn{width:44px!important;height:44px!important;min-width:44px;font-size:15px}
    #cmdKBtn.header-icon-btn--cmdk{width:auto!important;height:auto!important;min-width:56px!important;min-height:44px!important;padding:0 10px!important;font-size:12px!important}
    .ai-chip{height:44px;min-width:44px;padding:0 8px}
    .ai-chip-label{font-size:9px}

    /* === SMART VIEWS: force horizontal scroll, no clipping === */
    .smart-views{
      overflow-x:auto;overflow-y:hidden;
      flex-wrap:nowrap!important;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      padding:6px 2px;gap:4px;
      scroll-snap-type:x proximity;
      mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 20px),transparent 100%);
      -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 20px),transparent 100%);
    }
    .smart-views::-webkit-scrollbar{display:none}
    .sv-chip{flex-shrink:0;scroll-snap-align:start;padding:8px 10px;min-height:36px;font-size:12px;gap:5px}
    .sv-icon{font-size:13px}
    .sv-count{font-size:10px;min-width:14px;text-align:center}

    /* === LISTS BAR: horizontal scroll, same edge-fade as smart-views above
       so the cutoff reads as scrollable rather than broken. === */
    .lists-bar{
      overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none;gap:4px;padding:6px;
      mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 20px),transparent 100%);
      -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 20px),transparent 100%);
    }
    .lists-bar::-webkit-scrollbar{display:none}
    /* Touch target: 44px min so list chips comfortably tap on mobile */
    .list-chip,.list-add{flex-shrink:0;padding:10px 12px;min-height:44px;font-size:13px}

    /* === TOOLBAR: collapsed into search + 2 compact rows === */
    .task-toolbar{padding:6px;gap:5px!important}
    .task-search{min-height:40px;padding:9px 12px!important;font-size:14px!important}
    .task-toolbar-row{gap:5px}
    .task-tb-sel{min-height:36px!important;padding:6px 8px!important;font-size:12px!important}
    .view-toggle{display:flex!important;width:100%}
    .view-toggle button{flex:1;min-height:34px!important;font-size:12px;padding:6px 8px}

    /* === TASK INPUT: prominent, always visible === */
    .task-form{padding:0;gap:6px}
    .task-input{min-height:44px!important;font-size:16px!important;padding:10px 14px!important}
    .task-add{min-height:44px!important;padding:0 18px!important;font-size:14px;font-weight:600}

    /* === TASK ROWS: tighter, better typography === */
    .task-item{margin-bottom:6px}
    .task-row-primary{padding:10px 12px;gap:10px;min-height:52px}
    .task-main .task-name{font-size:15px;line-height:1.35;white-space:normal!important;overflow:visible!important;text-overflow:unset!important}
    .task-row-primary .task-checkbox{width:24px;height:24px;min-width:24px}
    .task-sig{font-size:10px;padding:2px 7px;font-weight:500}
    .task-signals{gap:4px;flex-wrap:wrap}
    .task-row-actions{opacity:.6;gap:4px}
    /* Bumped from 34→40 — compromise between Apple HIG 44pt and density of multiple per-task actions */
    .ta-btn{width:40px;height:40px;font-size:14px}
    .task-row-secondary{padding:0 12px 8px 48px;gap:6px;font-size:10px}
    .task-tags-inline .tag-chip{font-size:10px;padding:1px 6px;max-width:100px;overflow:hidden;text-overflow:ellipsis}

    /* === TIMER TAB: smaller ring so everything fits === */
    .ring-wrap{width:200px;height:200px;margin:0 auto}
    .ring-svg{width:200px;height:200px}
    .ring-time{font-size:44px;letter-spacing:1px}
    .ring-label{font-size:10px;letter-spacing:2px}
    .card{padding:16px;gap:14px}
    .ctrls{margin-top:4px}
    .ctrls .btn{min-height:44px;padding:10px 28px;font-size:14px;font-weight:600}
    .tabs{padding:3px;gap:2px;background:var(--bg-2)}
    .tab{padding:11px 6px;font-size:11px;min-height:44px;color:var(--text-2)}
    .tab:not(.active){opacity:.75}
    .phase-nav-hint{font-size:10px;padding:4px 8px;line-height:1.4;opacity:.7}

    /* === QUICK TIMERS form: + ADD inline with inputs === */
    .qt-form{flex-wrap:wrap;gap:6px;align-items:flex-end}
    .qt-form > div:first-child{flex:1 1 100%}
    .qt-form > div:nth-child(2){flex:0 1 auto;display:flex;gap:6px}
    .qt-form > div:nth-child(3){flex:1 1 auto}
    .qt-form .iadd{flex:0 0 auto;min-height:40px!important;padding:9px 16px!important;align-self:flex-end;white-space:nowrap}
    .qt-presets{gap:5px;padding:6px 0}
    .qt-preset{padding:7px 10px;font-size:12px;min-height:36px;min-width:44px;flex-basis:calc(20% - 5px)}

    /* === REPEATING CHIMES: label input needs full width === */
    .iform{flex-wrap:wrap;gap:6px;align-items:flex-end}
    .iform > div:first-child,.iform > div:first-child[style]{flex:1 1 100%!important}
    .iform > div:not(:first-child){flex:1 1 auto}
    .iform select.fi-s{width:100%!important;padding-right:24px!important;text-overflow:ellipsis;min-width:90px}
    .iprev{width:40px;height:40px;min-width:40px}
    .iform .iadd{min-height:40px!important;padding:9px 16px!important;flex:0 1 auto;white-space:nowrap}

    /* === QUICK TIMER form: force label full width on mobile === */
    .qt-form > div:first-child,.qt-form > div:first-child[style]{flex:1 1 100%!important}

    /* === TIMER section card (the big ring card) - center and contain === */
    [data-tab="focus"] .card{padding:14px 12px}

    /* === TOOLS: Stopwatch display smaller === */
    #swDisplay{font-size:36px!important;letter-spacing:2px!important;margin-bottom:14px!important}
    [data-tab="tools"] button[onclick="swToggle()"],[data-tab="tools"] button[onclick="swLap()"],[data-tab="tools"] button[onclick="swReset()"]{min-height:44px;padding:10px 18px!important;font-size:13px!important;flex:1}

    /* === DATA tab: destructive buttons clearly styled === */
    button[onclick="clearLog()"],
    button[onclick="resetStats()"],
    button[onclick="clearArchive()"],
    button[onclick="emptyArchive()"]{color:var(--danger)!important;border:1px solid var(--danger-border)!important;background:var(--danger-bg)!important}

    /* === SETTINGS: tighter rows, clearer sections === */
    .sbody{padding:10px 0 14px}
    .srow{padding:10px 2px;gap:10px}
    .sr-lbl{font-size:14px}
    /* Background audio info row - don't let mini-timer cover it */
    .srow[style*="flex-direction:column"]{padding-bottom:18px}

    /* === MINI-TIMER: smaller, bottom-center on mobile instead of right === */
    .mini-timer{
      bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
      right:10px!important;left:auto;
      padding:5px 9px!important;gap:6px!important;
      max-width:48vw;
      font-size:11px;
    }
    .mt-time{font-size:11px}
    .mt-label{font-size:8px;letter-spacing:.5px}
    .mt-btn{width:26px;height:26px;min-width:26px;font-size:10px}

    /* === SAVE INDICATOR: floating toast near the nav bar === */
    .save-indicator{
      top:auto!important;
      bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;
      left:10px!important;right:auto!important;
      transform:none;
      font-size:10px!important;padding:4px 10px!important;
      border-radius:999px!important;
    }
    .save-indicator.show{opacity:.9!important}

    /* === TODAY BANNER: prevent flex overflow causing wrap === */
    .today-banner{padding:10px 6px}

    /* === BOARD: column width tweaks === */
    .board-col{min-width:82vw!important;width:82vw!important;max-width:82vw!important}
    .board-col-hdr{padding:8px 10px;font-size:12px}
    .board-card{padding:8px 10px}

    /* === CALENDAR: day cell height === */
    .cal-day{min-height:52px;padding:2px}
    .cal-task{font-size:9px;line-height:1.2;padding:1px 3px}

    /* === MODAL: fields stack cleaner === */
    .modal-body{padding:12px 14px;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
    .mfield-in{min-height:44px;font-size:16px!important;padding:10px 12px!important}
    .mfield-chip-btn{min-height:38px;padding:8px 12px;font-size:13px}
    .qd-btn,.recur-opt{min-height:36px;padding:7px 11px;font-size:12px}
    .mfoot-btn{min-height:44px;padding:10px 14px;font-size:14px;font-weight:600}
    .mfoot-save{flex:1.3!important}
  }

  /* === Even narrower (≤360px, iPhone SE 1st gen, small Android) === */
  @media (max-width:380px){
    .nav-tab{padding:6px 1px}
    .nav-tab span:last-child{font-size:9px}
    .ring-wrap{width:180px;height:180px}
    .ring-svg{width:180px;height:180px}
    .ring-time{font-size:38px}
    .tb-num{font-size:18px!important}
    .today-banner{padding:8px 4px}
    .board-col{min-width:85vw!important;width:85vw!important}
    .qt-preset{flex-basis:calc(25% - 5px);font-size:11px;padding:6px 6px}
    /* Calendar day cells stay comfortably tappable on small phones */
    .cal-day{min-height:60px;padding:3px}
    .cal-task{font-size:10px;padding:2px 4px}
  }

  /* === Smallest phones (≤320px iPhone SE / older Android): widen board to near-full-bleed === */
  @media (max-width:320px){
    .board-col{min-width:88vw!important;width:88vw!important;max-width:88vw!important}
    .header h1{font-size:15px}
  }

  /* Classification editor mobile rules live further down (after base styles)
     so the cascade resolves the way you'd expect. See the @media block
     near the .class-mgr-* base rules. */

  /* === Native form controls: keep date/time/datetime pickers inside their containers ===
     Android Chrome's native picker is wider than the input by default, which can
     overflow narrow modals. iOS Safari is fine but constraining is a no-op there. */
  input[type="date"],input[type="time"],input[type="datetime-local"]{
    max-width:100%;box-sizing:border-box;
  }

  /* === Landscape phones / short viewports: reclaim vertical space ===
     Triggers on phones rotated to landscape (≈667×375) and on the iPhone SE
     in landscape (568×320). Goal: keep primary actions reachable without scrolling. */
  @media (orientation:landscape) and (max-height:500px){
    /* Pomodoro ring shrinks so controls + tabs stay above the fold */
    .ring-wrap,.ring-svg{width:140px!important;height:140px!important}
    .ring-time{font-size:30px!important;letter-spacing:1px}
    .ring-label{font-size:9px!important}
    .card{padding:12px;gap:10px}
    .ctrls{margin-top:2px}
    /* Nav and headers shrink */
    .nav-tab{min-height:38px!important;padding:4px 2px!important}
    .header{margin-bottom:6px!important}
    .header h1{font-size:14px}
    /* Modals: don't reserve 100px of bottom padding when there's barely 500px of height */
    .modal{max-height:96vh!important}
    .modal-body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
    /* Today banner stays one short row */
    .today-banner{padding:6px 8px!important;gap:4px!important}
    .tb-num{font-size:16px!important}
    .tb-lbl{font-size:9px!important}
  }

  /* ================================================================= */
  /* ========== PASS 3: RADICAL MINIMALISM ========================== */
  /* Principle: hide chrome by default. Show only what's necessary,  */
  /* reveal the rest on demand via focus/hover/tap.                  */
  /* ================================================================= */

  /* --- ALL SCREENS: de-emphasize panel chrome on tasks tab --- */
  .panel[data-tab="tasks"] > .shdr{
    padding-bottom:8px;margin-bottom:4px;
    opacity:.6;
  }
  .panel[data-tab="tasks"] > .shdr .slbl{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}
  .panel[data-tab="tasks"] > .shdr .sdot{display:none}
  .panel[data-tab="tasks"] > .shdr .scnt{font-size:10px;color:var(--text-4);font-weight:400}

  /* Quick-add hint: hidden until input is focused */
  .qa-hint{
    max-height:0;overflow:hidden;opacity:0;padding:0!important;margin:0;
    transition:max-height .25s ease,opacity .2s,padding .2s;
  }
  .task-form:focus-within + .qa-hint{
    max-height:200px;opacity:1;padding:8px 2px 12px!important;
  }

  /* Today banner: make it VERY subtle when shown — it's supplementary info */
  .today-banner-compact{
    background:transparent!important;
    border:none!important;
    padding:4px 8px!important;
    margin-bottom:6px!important;
    opacity:.75;
  }
  .today-banner-compact:hover{opacity:1}
  .today-banner-compact .tb-num{font-size:16px!important;font-weight:600}
  .today-banner-compact .tb-lbl{font-size:9px!important;letter-spacing:.5px;text-transform:uppercase;opacity:.7}

  /* Smart views: show only "All" + the active chip + overflow indicator */
  /* Other chips visible on hover/tap-scroll */
  .smart-views{
    opacity:.85;
  }
  .smart-views:hover,.smart-views:focus-within{opacity:1}

  /* Task rows: even quieter by default */
  .task-item{background:transparent;border:1px solid transparent;transition:all .15s}
  .task-item:hover{background:var(--bg-1);border-color:var(--border)}
  /* Hide the mobile-only view toggle on desktop (it lives inside filtersPanel) */
  .mobile-view-toggle{display:none}
  /* Priority stripe: thinner, only prominent for urgent */
  .task-item.priority-urgent{border-left:3px solid var(--danger)!important}
  .task-item.priority-high{border-left:2px solid var(--warning,#e67e22)}
  .task-item.priority-normal,.task-item.priority-low,.task-item.priority-none{border-left:1px solid transparent}
  /* Actions: hidden until hover on desktop */
  @media (hover:hover){
    .task-row-actions{opacity:0;transition:opacity .15s}
    .task-item:hover .task-row-actions,.task-item:focus-within .task-row-actions{opacity:1}
  }

  /* Tag pills in secondary row: hide by default, show on task hover */
  .task-row-secondary{max-height:0;overflow:hidden;transition:max-height .2s;padding:0 12px!important}
  .task-item:hover .task-row-secondary,.task-item:focus-within .task-row-secondary{max-height:60px;padding:4px 12px 10px 48px!important}

  /* --- MOBILE: the big simplification --- */
  @media (max-width:640px){
    /* HIDE the panel border/background on tasks — let tasks breathe */
    .panel[data-tab="tasks"]{
      background:transparent;border:none;padding:4px 0!important;
    }
    /* HIDE the Task Manager title entirely — redundant; we're on the Tasks tab */
    .panel[data-tab="tasks"] > .shdr{display:none}

    /* Compact Add Task — smaller, tighter */
    .task-form{gap:6px;margin-bottom:2px}
    .task-input{min-height:40px!important;font-size:15px!important;padding:9px 12px!important;background:var(--bg-2);border:1px solid var(--border)}
    .task-add{min-height:40px!important;padding:0 14px!important;font-size:13px;font-weight:600;min-width:56px}

    /* Smart views: always visible on mobile (it's the main navigation) but tighter */
    .smart-views{margin-top:6px;margin-bottom:4px}
    .sv-chip{padding:6px 9px!important;min-height:32px!important;font-size:11px!important}

    /* View toggle hidden by default on mobile — most users use List. Move to menu. */
    .task-controlbar{padding:2px 0;margin-bottom:4px;justify-content:flex-end;gap:6px}
    .task-controlbar .view-toggle{display:none!important}
    .mobile-view-toggle{display:flex!important;width:100%!important}
    /* Filters button: smaller icon-only on mobile */
    .filters-toggle{padding:5px 10px;min-height:30px;font-size:11px;opacity:.7}
    .filters-toggle:hover,.filters-toggle.active{opacity:1}
    .filters-toggle .ft-label{display:none}
    .filters-toggle .ft-icon{font-size:14px;margin:0}

    /* Today banner: ULTRA-compact, only shown when has meaningful data */
    .today-banner-compact{padding:2px 0!important;gap:10px!important;margin-bottom:4px!important;justify-content:flex-start!important}
    .today-banner-compact .tb-item{display:flex;align-items:baseline;gap:4px}
    .today-banner-compact .tb-num{font-size:13px!important;font-weight:600}
    .today-banner-compact .tb-lbl{font-size:10px!important;letter-spacing:0;text-transform:none;opacity:.7}
    .today-banner-compact .tb-divider{display:none}

    /* Task rows: minimal padding, cleaner type */
    .task-item{padding:0;margin-bottom:2px;background:var(--bg-2);border:1px solid transparent;border-radius:8px}
    .task-item:hover{background:var(--bg-2)}
    .task-row-primary{padding:12px 14px;gap:12px;min-height:48px}
    .task-main .task-name{font-size:15px;font-weight:500;line-height:1.3}
    .task-row-primary .task-checkbox{width:20px;height:20px;min-width:20px}
    /* On mobile: always show actions because no hover */
    .task-row-actions{opacity:.5!important;gap:0!important}
    .task-row-actions:hover{opacity:1!important}
    .ta-btn{width:32px;height:32px;font-size:13px}
    /* Hide sub-items (tags) until tapped — reduces row height */
    .task-row-secondary{display:none!important}
    .task-item.expanded .task-row-secondary{display:flex!important;max-height:60px!important;padding:0 14px 10px 46px!important}

    /* Signals (date chip, recur icon): single small indicator only */
    .task-signals{gap:3px}
    .task-sig{font-size:9px;padding:2px 6px}
    /* Hide list dot indicator on mobile — redundant when only 1 list */
    .task-sig.sig-list{display:none}

    /* Quick-add hint: hidden by default, shown on focus */
    .qa-hint{font-size:10px!important;line-height:1.5!important}

    /* Lists bar already hides when 1 list (JS). When shown, make it subtle */
    .lists-bar{padding:4px;gap:4px;background:transparent;border:none;margin-bottom:4px}
    .list-chip{padding:5px 9px;min-height:30px;font-size:11px;opacity:.8}
    .list-chip.active{opacity:1}
    .list-add{opacity:.6;font-size:11px}

    /* Filters panel when open: tighter too */
    #filtersPanel{margin-top:2px!important;padding:8px!important;gap:5px!important}
  }

/* ── P2P Sync panel ── */
.sync-off-state,.sync-active{display:flex;flex-direction:column;gap:16px}
.sync-desc{color:var(--text-2);font-size:13px;line-height:1.5}
.sync-desc+.sync-desc{font-size:10px;color:var(--text-4);margin-top:-4px}
.sync-status-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.sync-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sync-dot--off{background:var(--text-3)}
.sync-dot--loading,.sync-dot--waiting,.sync-dot--connecting{background:var(--warning);animation:pulse 1.2s infinite}
.sync-dot--connected{background:var(--success)}
.sync-dot--error{background:var(--danger)}
.sync-my-code-block,.sync-connect-block{display:flex;flex-direction:column;gap:6px}
.sync-my-code-block label,.sync-connect-block label{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--text-1);font-family:var(--font-sans)}
.sync-code{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:.15em;color:var(--accent);padding:10px 14px;background:var(--bg-1);border-radius:8px;border:1px solid var(--border)}
.sync-input-row{display:flex;gap:8px}
.sync-input-row input{flex:1;background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text-1);font-family:var(--font-mono);letter-spacing:.1em;font-size:14px}
.sync-input-row input:focus{outline:none;border-color:var(--accent)}
.sync-code-actions{display:flex;gap:6px;flex-wrap:wrap}
.sync-input-hint{font-size:11px;color:var(--text-3);line-height:1.5;margin-top:2px}
.sync-input-hint code{font-family:var(--font-mono);background:var(--bg-2);padding:1px 5px;border-radius:4px;border:1px solid var(--border);color:var(--text-2)}
.sync-input-hint--err{color:var(--warn,#e8a838)}
.sync-disable{align-self:flex-start;margin-top:4px;color:var(--text-3);font-size:12px}

/* ── New modal fields (v4) ── */
/* Checklist */
.cl-progress{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cl-bar{height:4px;background:var(--accent);border-radius:2px;transition:width .3s}
.cl-progress{background:var(--bg-2);border-radius:2px;height:4px;flex:1;overflow:hidden;position:relative}
.cl-pct{font-size:11px;color:var(--text-3);white-space:nowrap}
.cl-item{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)}
.cl-item.cl-done .cl-text{text-decoration:line-through;color:var(--text-3)}
.cl-check{width:18px;height:18px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cl-check.on{background:var(--success);border-color:var(--success);color:#fff}
.cl-text{flex:1;font-size:13px}
.cl-rm{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:14px;padding:0 4px;opacity:.5}
.cl-rm:hover{opacity:1;color:var(--danger)}
.cl-add{display:flex;gap:8px;margin-top:8px}
.cl-input{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text-1);font-size:13px}
.cl-input:focus{outline:none;border-color:var(--accent)}

/* Task notes */
.note-add{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.note-input{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text-1);font-size:13px;resize:vertical;font-family:inherit}
.note-input:focus{outline:none;border-color:var(--accent)}
.note-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.note-time{color:var(--text-3);white-space:nowrap;flex-shrink:0}
.note-text{flex:1;color:var(--text-1);line-height:1.5;white-space:pre-wrap}
.note-rm{background:none;border:none;color:var(--text-3);cursor:pointer;opacity:.5;font-size:13px;flex-shrink:0}
.note-rm:hover{opacity:1;color:var(--danger)}

/* Blocker chips */
.blocker-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.blocker-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.3);border-radius:999px;font-size:11px;color:#e06050}
.blocker-chip.resolved{background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.3);color:#2ecc71}
.blocker-chip button{background:none;border:none;cursor:pointer;color:inherit;padding:0;font-size:12px;opacity:.7}
.blocker-chip button:hover{opacity:1}
.blocker-add-row{display:flex;gap:6px;margin-top:6px}
.blocker-sel{flex:1;font-size:12px}

/* ── Intelligence panel ── */
.intel-tools-panel.panel{background:transparent;border:none;box-shadow:none;padding:0;margin-bottom:14px}
.intel-panel-root{width:100%}
.intel-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 16px 14px;box-shadow:var(--shadow-1)}
.intel-card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.intel-card-titles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.intel-card-h3{font-size:15px;font-weight:700;color:var(--text-1);letter-spacing:-.02em;margin:0;line-height:1.2}
.intel-card-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--bg-3);color:var(--text-3);border:1px solid var(--border)}
.intel-card-body{display:flex;flex-direction:column;gap:12px}
.intel-status{font-size:12px;padding:6px 10px;border-radius:6px;margin-bottom:8px;font-weight:500}
.intel-status-chip{margin:0;max-width:100%;font-size:11px;font-weight:600;border-radius:999px;padding:6px 12px;flex-shrink:0}
.intel-status--idle{color:var(--text-3);background:var(--bg-2);border:1px solid var(--border)}
.intel-status--ok{color:var(--success);background:var(--success-bg);border:1px solid var(--success-border)}
.intel-status--error{color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border)}
.intel-status--syncing{color:var(--warning);background:var(--warning-bg);border:1px solid var(--warning-border);animation:pulse 1.2s infinite}
.intel-desc{font-size:12px;color:var(--text-3);line-height:1.5;margin-bottom:0}
.intel-desc-short strong{color:var(--text-2)}
.intel-lead{margin:0 0 10px;font-size:13px;color:var(--text-2);line-height:1.5}
.intel-feature-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 12px}
@media(min-width:480px){.intel-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.intel-feature-grid{grid-template-columns:repeat(3,1fr)}}
.intel-feature{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;min-height:44px}
.intel-feature-ic{flex-shrink:0;display:flex;color:var(--accent);margin-top:1px}
.intel-feature-ic .intel-action-icon{width:18px;height:18px}
.intel-feature-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.intel-feature-txt strong{font-size:12px;color:var(--text-1);font-weight:600}
.intel-feature-sub{font-size:10px;color:var(--text-3);line-height:1.35}
.intel-details{margin-top:8px;font-size:12px;color:var(--text-3)}
.intel-details summary{cursor:pointer;font-weight:600;color:var(--accent);user-select:none}
.intel-details-body{margin-top:8px;line-height:1.5}
.intel-desc .intel-nogen{font-size:11px;opacity:.85}
.intel-toolbar-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.intel-tool-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--border);background:var(--bg-2);color:var(--text-2);transition:background .15s,border-color .15s}
.intel-tool-btn .intel-action-icon{width:16px;height:16px;flex-shrink:0}
.intel-tool-btn:hover{background:var(--bg-3);border-color:var(--border-strong)}
.intel-tool-btn--primary{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.intel-action-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
@media(min-width:520px){.intel-action-grid{grid-template-columns:repeat(2,1fr)}}
.intel-action-btn{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 14px;border-radius:12px;font-size:12px;font-family:inherit;text-align:left;cursor:pointer;border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);transition:background .15s,border-color .15s,opacity .15s}
.intel-action-btn:hover:not(:disabled){background:var(--bg-3);border-color:var(--border-strong)}
.intel-action-btn:disabled{opacity:.45;cursor:not-allowed}
.intel-action-btn .intel-action-icon{width:20px;height:20px;flex-shrink:0;margin-top:1px;color:var(--accent)}
.intel-action-btn-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.intel-action-btn-lbl{font-weight:700;font-size:12px}
.intel-action-btn-sub{font-size:10px;color:var(--text-3);line-height:1.35}
.intel-action-btn--primary{background:var(--accent-bg);border-color:var(--accent-border)}
.intel-action-btn--primary .intel-action-icon{color:var(--accent)}
.intel-section-hdr{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-top:4px;margin-bottom:8px}
.intel-section-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.intel-section-hint{font-size:11px;color:var(--text-3)}
.intel-hint{font-size:11px;color:var(--text-3);line-height:1.6;padding:8px;background:var(--bg-2);border-radius:6px;border:1px solid var(--border)}
.intel-hint-foot{margin:0;padding:10px 12px;border-radius:10px}
.intel-progress-wrap{margin-bottom:0}
.intel-progress-track{height:8px;background:var(--bg-3);border-radius:999px;overflow:hidden}
.intel-progress-bar{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.intel-progress-info{font-size:11px;color:var(--text-3);display:flex;gap:8px;justify-content:space-between}
/* Generative LLM download / rehydrate — visible on every tab */
.gen-load-ribbon{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;min-width:min(440px,94vw);max-width:94vw;padding:11px 15px;border-radius:12px;background:var(--bg-1);border:1px solid var(--border-strong);box-shadow:0 10px 36px rgba(0,0,0,.22)}
.gen-load-ribbon[hidden]{display:none!important}
.gen-load-ribbon__track{position:relative;height:7px;background:var(--bg-3);border-radius:999px;overflow:hidden}
.gen-load-ribbon__bar{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .22s ease-out}
.gen-load-ribbon__txt{font-size:12px;color:var(--text-1);line-height:1.4;font-weight:600}
@keyframes genRibbonIndet{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(320%)}
}
.gen-load-ribbon__track--indeterminate .gen-load-ribbon__bar{width:38%!important;transition:none;animation:genRibbonIndet 1.35s ease-in-out infinite}
@media (max-width:480px){
  .gen-load-ribbon{padding:9px 12px;min-width:min(360px,96vw)}
  .gen-load-ribbon__txt{font-size:11px}
}
.intel-start-list{margin:8px 0 10px 1.1em;padding:0;font-size:12px;line-height:1.55;color:var(--text-2)}
.intel-start-list li{margin:4px 0}

/* Bulk import modal */
.bulk-import-hint{font-size:12px;color:var(--text-3);line-height:1.5;margin:0 0 10px}
.bulk-import-hint code{font-size:11px;background:var(--bg-3);padding:2px 6px;border-radius:4px;color:var(--text-2)}
.bulk-import-warn{color:var(--warning)}
.bulk-import-label{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.bulk-import-textarea{min-height:220px;font-family:var(--font-mono);font-size:12px;line-height:1.45}
.bulk-import-modal .modal-body{padding-top:8px}
/* Auto-organize toggle row — sits between the textarea and the modal footer
   so it reads as an option that affects the next click of "Add tasks". */
.bulk-import-auto{
  display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:10px;
  border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-2);
  cursor:pointer;font-size:12px;color:var(--text-2);
}
.bulk-import-auto input[type=checkbox]{margin-top:2px;flex-shrink:0;cursor:pointer}
.bulk-import-auto-text{display:flex;flex-direction:column;gap:2px}
.bulk-import-auto-text strong{color:var(--text-1);font-size:13px;font-weight:600}
.bulk-import-auto-hint{font-size:11px;color:var(--text-3);line-height:1.4}
.bulk-import-progress{
  margin-top:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);
  font-size:12px;font-weight:600;
}
.bulk-import-progress[hidden]{display:none}
#bulkImportConfirm:disabled{opacity:.45;cursor:not-allowed}
.intel-dup-section{font-size:12px;margin-top:8px;padding:8px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;max-height:200px;overflow-y:auto}
.intel-dup-hdr{font-weight:700;margin-bottom:6px;color:var(--text-2)}
.intel-dup-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--border);font-size:11px}
.intel-dup-pair{flex:1;min-width:120px;color:var(--text-1)}
.intel-dup-sim{font-variant-numeric:tabular-nums;color:var(--accent)}
.intel-dup-verdict{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid var(--border);text-transform:uppercase;letter-spacing:.04em}
.intel-dup-verdict--same{color:var(--danger);border-color:rgba(231,76,60,.4);background:rgba(231,76,60,.08)}
.intel-dup-verdict--partial{color:var(--warning);border-color:rgba(230,126,34,.4);background:rgba(230,126,34,.08)}
.intel-dup-verdict--different{color:var(--text-3);background:var(--bg-2)}
.intel-dup-reason{flex-basis:100%;font-size:11px;font-style:italic;color:var(--text-3);padding-top:2px;line-height:1.35}
.task-dup-badge{background:rgba(232,168,56,.12);color:#e8a838;border:1px solid rgba(232,168,56,.35)!important}
.task-sig.sig-pareto{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);font-weight:600;letter-spacing:.01em}

/* ===== Shared icon library (SVG, monochrome, inherits currentColor) ===== */
.ui-ic{display:inline-block;vertical-align:-0.18em;flex-shrink:0;color:currentColor}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
/* Contextual sizing — outer span controls the footprint, SVG fills it */
.sv-icon .ui-ic{width:13px;height:13px}
.nav-tab-icon .ui-ic{width:17px;height:17px}
.mv-ic .ui-ic{width:14px;height:14px}
.ft-icon .ui-ic{width:13px;height:13px}
.sig-cat-ic .ui-ic{width:11px;height:11px}
.task-enhance-btn .ui-ic{width:15px;height:15px}
.cmdk-icon .ui-ic{width:15px;height:15px;vertical-align:-0.22em}
.archived-notice-ic .ui-ic,.archived-notice-restore .ui-ic{width:14px;height:14px;vertical-align:-0.2em}
/* On narrow screens the sv-chips need their wrapper to not override SVG sizing */
@media(max-width:640px){.sv-icon .ui-ic{width:12px;height:12px}}
@media(max-width:380px){.sv-icon .ui-ic{width:12px;height:12px}}
.archived-notice-inner{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.archived-notice-restore{display:inline-flex;align-items:center;padding:2px 4px;border:1px solid var(--border);border-radius:4px;background:var(--bg-2);margin:0 2px}
/* sig-cat inline icon alignment on task cards */
.sig-cat-ic{display:inline-flex;align-items:center;margin-right:3px;vertical-align:-0.15em;color:currentColor}
/* breakdown category icon */
.breakdown-cat-ic{display:inline-flex;align-items:center;margin-right:4px;vertical-align:-0.2em;color:var(--accent)}
/* smart-add chip inline icon */
.sa-chip-ic{display:inline-flex;align-items:center;margin-right:3px;vertical-align:-0.15em}
/* update banner + quota warning */
.update-banner-msg,.quota-warning-msg{display:inline-flex;align-items:center;gap:6px}
/* empty state icon wrapper */
.empty-ic{display:flex;justify-content:center;line-height:0;color:var(--text-3)}
.empty-ic .ui-ic{width:32px;height:32px}
.done-sparkle .ui-ic{width:22px;height:22px;color:var(--accent)}
.task-search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
.task-search-row .task-search{flex:1;min-width:140px}
.task-search-semantic{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;user-select:none}
.task-search-semantic--disabled{opacity:.65;cursor:not-allowed}
.task-search-semantic--disabled input{cursor:not-allowed}
.what-next-overlay{position:fixed;inset:0;background:rgba(5,10,18,.72);z-index:var(--z-overlay);display:flex;align-items:flex-start;justify-content:center;padding:max(16px, env(safe-area-inset-top)) 12px 24px;overflow:auto}
.what-next-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);max-width:440px;width:100%;padding:16px 18px;box-shadow:var(--shadow-1);margin-top:8vh}
.what-next-hdr{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;margin-bottom:6px}
.what-next-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:16px;padding:4px}
.what-next-sub{font-size:12px;color:var(--text-3);margin:0 0 12px;line-height:1.45}
.what-next-ctx{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-bottom:12px;font-size:11px;color:var(--text-3)}
.what-next-ctx label{display:block;margin-bottom:4px}
.what-next-body{display:flex;flex-direction:column;gap:6px}
.what-next-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;padding:10px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:inherit;color:inherit}
.what-next-item:hover{border-color:var(--accent)}
.wn-name{font-weight:600;font-size:13px}
.wn-meta{font-size:11px;color:var(--text-3)}
.md-similar-wrap{margin-top:4px}
.similar-acc-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;color:var(--text-1);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.similar-acc-chevron{font-size:10px;opacity:.7;transition:transform .2s}
/* Rotation tracks the sibling panel's `.open` state. The toggle JS only
   touches the panel — without this, the chevron had a transition declared
   but no state ever firing it. */
.md-similar-wrap:has(.similar-acc-panel.open) .similar-acc-chevron{transform:rotate(180deg)}
.similar-acc-panel{display:none;max-height:200px;overflow-y:auto;margin-top:6px}
.similar-acc-panel.open{display:block}
.md-similar-tasks{display:flex;flex-direction:column;gap:4px}
.similar-task-row{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.similar-task-row:hover{border-color:var(--accent)}
.st-name{flex:1}
.st-sim{font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums}
.intel-muted{font-size:12px;color:var(--text-3)}

/* Category signal chip */
.sig-cat{
  background:color-mix(in srgb,var(--cat-color,var(--text-2)) 18%,transparent);
  color:var(--cat-color,var(--text-1));
  border:1px solid color-mix(in srgb,var(--cat-color,var(--text-3)) 35%,transparent);
  border-radius:4px;padding:1px 5px;font-size:10px;
}
.sig-values{color:#e8a838;font-size:12px;cursor:help}

/* Breakdown */
.intel-breakdown-section{margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}
.breakdown-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.breakdown-cat{flex:1;text-transform:capitalize;font-weight:500}
.breakdown-count{color:var(--text-3)}
.breakdown-badge{padding:1px 6px;border-radius:999px;font-size:10px;font-weight:700}
.breakdown-badge.urgent{background:rgba(192,57,43,.2);color:#e06050}
.breakdown-badge.high{background:rgba(230,126,34,.15);color:#e67e22}

/* ── Schwartz values grid ── */
.schwartz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:4px}
@media(min-width:480px){.schwartz-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:720px){.schwartz-grid{grid-template-columns:repeat(4,1fr)}}
.schwartz-card{padding:10px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;user-select:none;min-height:44px}
.schwartz-card:hover{border-color:var(--accent);background:var(--bg-3)}
.schwartz-card.selected{border-color:var(--accent);background:rgba(61,139,204,.12)}
.schwartz-card-top{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.schwartz-icon{font-size:14px;flex-shrink:0}
.schwartz-name{font-size:11px;font-weight:700;text-transform:capitalize;flex:1;color:var(--text-1)}
.schwartz-rank{font-size:10px;font-weight:800;color:var(--accent);background:rgba(61,139,204,.15);border-radius:999px;padding:1px 5px;flex-shrink:0}
.schwartz-short{font-size:10px;color:var(--text-3);line-height:1.3}
.schwartz-selected-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.schwartz-sel-chip{padding:3px 10px;background:rgba(61,139,204,.15);border:1px solid rgba(61,139,204,.3);border-radius:999px;font-size:11px;font-weight:600;color:var(--accent);text-transform:capitalize}

/* ── Pending ops preview (confirmation dialog) ── */
.pending-ops-wrap{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:12px;margin:10px 0}
.pending-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.pending-title{font-size:12px;font-weight:700;color:var(--text-1);text-transform:uppercase;letter-spacing:.06em}
.pending-toggle-all{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:11px;text-decoration:underline;padding:4px 0}
.pending-toggle-all:hover{color:var(--accent)}
.pending-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin-bottom:10px}

.pending-task-card{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.pending-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pending-card-head-lbl{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;flex:1;min-width:0}
.pending-card-title{font-size:13px;font-weight:700;color:var(--text-1);line-height:1.3;word-break:break-word}
.pending-card-badge{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;background:var(--bg-3);border:1px solid var(--border);border-radius:999px;padding:3px 8px;flex-shrink:0}

.pending-change-list{display:flex;flex-direction:column;gap:4px}
.pending-change-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;cursor:pointer;margin:0;transition:border-color .15s}
.pending-change-row:hover{border-color:var(--accent-border)}
.pending-change-row--warn{border-color:var(--warning);background:rgba(230,126,34,.08)}
.pending-field-check{margin:0;flex-shrink:0;cursor:pointer;width:16px;height:16px;min-width:16px;accent-color:var(--accent)}
.pending-field-lbl{flex:0 0 100px;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em}
@media(min-width:520px){.pending-field-lbl{flex:0 0 120px}}
.pending-field-vals{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0;font-size:12px;color:var(--text-1)}
.pending-field-val{word-break:break-word}
.pending-field-from{color:var(--text-3)}
.pending-field-to{color:var(--text-1);font-weight:500}
.pending-field-arrow{color:var(--text-4);font-weight:600;flex-shrink:0}
.pending-confidence-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(61,139,204,.12);border:1px solid rgba(61,139,204,.28);color:var(--accent);flex-shrink:0}
.pending-rationale{display:block;font-size:11px;font-style:italic;color:var(--text-3);line-height:1.4;word-break:break-word;margin-top:8px}
.pending-rationale--card{padding:6px 10px 4px;margin:0 0 6px;border-left:2px solid var(--accent-border);background:rgba(61,139,204,.04)}

.wn-why{display:block;font-size:11px;font-style:italic;color:var(--text-3);margin-top:4px;line-height:1.35}

.task-enhance-btn--llm{color:var(--accent)}
.task-enhance-btn--llm:hover{color:var(--accent-hover,var(--accent));filter:brightness(1.2)}

.md-breakdown-body{display:flex;flex-direction:column;gap:8px;padding:4px 0 2px}
.md-breakdown-list{display:flex;flex-direction:column;gap:4px}
.md-breakdown-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;font-size:12px;cursor:pointer}
.md-breakdown-row:hover{border-color:var(--accent)}
.md-breakdown-row input[type="checkbox"]{flex-shrink:0;accent-color:var(--accent)}
.md-breakdown-name{flex:1;word-break:break-word;color:var(--text-1)}
.md-breakdown-effort{flex-shrink:0;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:rgba(61,139,204,.12);border:1px solid rgba(61,139,204,.28);color:var(--accent)}
.md-breakdown-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.md-breakdown-btn{padding:6px 12px;font-size:12px;font-weight:600;font-family:inherit;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;color:var(--text-1);cursor:pointer;margin-top:8px}
.md-breakdown-btn:hover{border-color:var(--accent)}
.md-breakdown-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.md-breakdown-btn--primary:hover{filter:brightness(1.1)}

.pending-simple-card{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:0;overflow:hidden}
.pending-simple-card--danger{border-color:var(--danger);background:rgba(231,76,60,.06)}
.pending-simple-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;cursor:pointer;margin:0}
.pending-simple-row:hover{background:var(--bg-2)}
.pending-simple-ic-wrap{flex-shrink:0;display:flex;color:var(--accent);margin-top:1px}
.pending-simple-ic-svg{display:block}
.pending-simple-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pending-simple-title{font-size:12px;font-weight:700;color:var(--text-1)}
.pending-simple-target{font-size:12px;color:var(--text-2);word-break:break-word}
.pending-simple-detail{font-size:11px;color:var(--text-3);word-break:break-word}

.pending-section-danger{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.pending-section-danger-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pending-section-danger-ic{display:flex;color:var(--danger)}
.pending-section-danger-title{font-size:12px;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.04em}
.pending-section-danger-copy{font-size:11px;color:var(--text-3);margin:0 0 8px;line-height:1.4}
.pending-danger-ack-lbl{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-1);cursor:pointer;margin-bottom:10px}
.pending-danger-ack-lbl input{margin-top:2px;accent-color:var(--danger);flex-shrink:0}
.pending-danger-list{display:flex;flex-direction:column;gap:8px}

.pending-op-master{margin:0;flex-shrink:0;cursor:pointer;width:18px;height:18px;min-width:18px;accent-color:var(--accent);margin-top:2px}

.pending-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ── Smart Add (ambient AI on task input) ── */
.task-input-wrap{position:relative;flex:1;display:flex;align-items:center;gap:4px;
  background:var(--bg-1,#0a1320);border:1px solid var(--border,#152238);border-radius:8px;padding-right:4px;overflow:hidden}
.task-input-wrap .task-input{flex:1;min-width:0;padding:9px 8px 9px 12px!important;background:transparent!important;border:none!important;color:inherit;font-size:inherit;font-family:inherit;outline:0;border-radius:0!important;text-overflow:ellipsis}
.task-input-wrap .task-input::placeholder{color:var(--text-3,#2a3a4a)}
.task-enhance-btn{flex-shrink:0;background:rgba(61,139,204,.12);border:1px solid rgba(61,139,204,.3);border-radius:6px;padding:4px 8px;font-size:14px;color:var(--accent);cursor:pointer;transition:background .15s,transform .1s;line-height:1}
.task-enhance-btn:hover{background:rgba(61,139,204,.2);transform:scale(1.08)}
.task-enhance-btn:disabled{opacity:.6;cursor:wait}
/* Voice button active/recording state */
.task-voice-btn.on{background:rgba(231,76,60,.18);border-color:rgba(231,76,60,.5);color:#e74c3c;animation:voice-pulse 1.2s ease-in-out infinite}
@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.3)}50%{box-shadow:0 0 0 6px rgba(231,76,60,0)}}
.smart-add-preview{margin-top:6px;padding:8px 10px;background:rgba(61,139,204,.06);border:1px solid rgba(61,139,204,.2);border-radius:8px;display:flex;flex-direction:column;gap:6px}
.smart-add-hint{font-size:10px;color:var(--text-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.smart-add-empty{font-size:12px;color:var(--text-3);font-style:italic}
.sa-chips{display:flex;flex-wrap:wrap;gap:5px}
.sa-chip{display:inline-flex;align-items:center;padding:3px 9px;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;font-size:11px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;user-select:none;white-space:nowrap}
.sa-chip:hover{border-color:var(--danger);background:rgba(231,76,60,.08)}
.sa-chip.sa-p-urgent{background:rgba(192,57,43,.15);border-color:rgba(192,57,43,.3);color:#e06050}
.sa-chip.sa-p-high  {background:rgba(230,126,34,.12);border-color:rgba(230,126,34,.3);color:#e67e22}
.sa-chip.sa-p-low   {color:var(--text-3)}

/* Recently intel-modified task highlight */
.task-item.intel-modified{animation:intelFlash 1.2s ease-out 1}
.task-item.intel-modified .task-row-primary::before{
  content:'✨';position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  font-size:10px;opacity:0;animation:intelFadeOut 3s forwards
}
@keyframes intelFlash{0%{background:rgba(61,139,204,.18)}100%{background:transparent}}
@keyframes intelFadeOut{0%,70%{opacity:.8}100%{opacity:0}}
@keyframes intel-spin{to{transform:rotate(360deg)}}
.is-spin{animation:intel-spin 900ms linear infinite;transform-origin:center;display:inline-block;vertical-align:middle}

/* Smart add chip tooltips on hover (desktop) */
.sa-chip[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:var(--bg-1);color:var(--text-1);
  font-size:10px;padding:4px 8px;border-radius:4px;border:1px solid var(--border);
  white-space:nowrap;z-index:100;pointer-events:none;
}
.sa-chip{position:relative}

/* ══════════ MOBILE ≤640px — INTELLIGENCE / PENDING ══════════ */
@media (max-width:640px){
  /* Pending ops: breathable rows, larger checkboxes */
  .pending-ops-wrap{padding:10px;margin:8px 0}
  .pending-list{max-height:240px;gap:8px}
  .pending-task-card{padding:9px 10px}
  .pending-change-row{padding:9px 10px}
  .pending-field-lbl{flex:0 0 100%}
  .pending-field-vals{width:100%}
  .pending-simple-row{padding:9px 10px}
  .pending-actions{flex-direction:column;gap:6px}
  .pending-actions button{width:100%;min-height:42px}

  /* Schwartz grid: 2-col always on mobile (not 3) */
  .schwartz-grid{grid-template-columns:repeat(2,1fr)!important;gap:5px}
  .schwartz-card{padding:7px 9px}
  .schwartz-name{font-size:11px}
  .schwartz-short{font-size:10px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

  /* Smart add preview: horizontal scroll fallback for many chips */
  .smart-add-preview{padding:7px 9px;gap:5px}
  .smart-add-hint{font-size:9px}
  .sa-chips{gap:4px;overflow-x:auto;flex-wrap:wrap;scrollbar-width:none;max-height:80px;overflow-y:auto}
  .sa-chips::-webkit-scrollbar{display:none}
  .sa-chip{font-size:11px;padding:4px 10px;flex-shrink:0}

}

/* ══════════ NARROW ≤380px — additional squeeze ══════════ */
@media (max-width:380px){
  .schwartz-card{padding:6px 8px}
  .schwartz-short{display:none}
  .breakdown-row{font-size:11px}
}

/* ══════════ HOVER-CAPABLE (desktop) ══════════ */
@media (hover:hover){
  .pending-simple-card .pending-simple-row:hover{background:var(--bg-2)}
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* SYSTEM STATUS BANNERS (offline, update, quota warnings)                    */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Offline indicator — shown at top of screen when navigator.onLine=false */
.offline-indicator{
  position:fixed;top:0;left:0;right:0;z-index:5000;
  background:rgba(230,126,34,.95);color:#fff;
  padding:6px 12px;text-align:center;font-size:12px;font-weight:600;
  backdrop-filter:blur(8px);
  letter-spacing:0.02em;
}
body:has(.offline-indicator:not([style*="display:none"])){ padding-top:30px; }

/* Update-available banner — bottom of screen, dismissable */
.update-banner{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:5000;display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid var(--accent);
  padding:10px 14px;border-radius:10px;
  box-shadow:0 10px 40px rgba(61,139,204,.35);
  font-size:13px;color:var(--text-1);
  max-width:calc(100vw - 32px);
  animation:updateSlideIn .3s ease-out;
}
@keyframes updateSlideIn{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.update-banner button{
  padding:6px 12px;background:var(--accent);color:#0a1320;
  border:none;border-radius:6px;font-size:12px;font-weight:700;
  font-family:inherit;cursor:pointer;
}
.update-banner .update-dismiss{
  background:transparent;color:var(--text-3);font-weight:400;padding:6px 8px;
}
.update-banner .update-dismiss:hover{color:var(--text-1)}

/* Storage quota warning */
.quota-warning{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:5001;background:rgba(192,57,43,.95);color:#fff;
  padding:10px 14px;border-radius:10px;
  font-size:12px;display:flex;gap:8px;align-items:center;
  box-shadow:0 10px 40px rgba(192,57,43,.35);
  max-width:calc(100vw - 32px);
}
.quota-warning button{
  padding:4px 10px;background:rgba(255,255,255,.2);color:#fff;
  border:none;border-radius:5px;font-size:11px;font-weight:600;
  font-family:inherit;cursor:pointer;
}
.quota-warning button:hover{background:rgba(255,255,255,.3)}
.quota-warning--proactive{background:rgba(230,126,34,.95);box-shadow:0 10px 40px rgba(230,126,34,.35);flex-wrap:wrap}

/* Mobile tweaks */
@media (max-width:640px){
  .update-banner,.quota-warning{
    bottom:auto;top:110px;left:8px;right:8px;transform:none;
    flex-wrap:wrap;max-width:none;
  }
  .offline-indicator{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* CALENDAR FEEDS — iCal import UI                                            */
/* ══════════════════════════════════════════════════════════════════════════ */

.calfeeds-list{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.calfeed-empty{font-size:11px;color:var(--text-4);font-style:italic;padding:8px 0}

.calfeed-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:6px;
}
.calfeed-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.calfeed-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.calfeed-label{font-size:12px;font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calfeed-btn{
  width:28px;height:28px;background:transparent;border:1px solid var(--border);
  border-radius:4px;color:var(--text-3);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.calfeed-btn:hover{background:var(--bg-3);color:var(--text-1)}
.calfeed-btn.calfeed-rm:hover{color:#e74c3c;border-color:#e74c3c}

.calfeed-add-wrap{margin:10px 0;border:1px dashed var(--border);border-radius:6px;padding:0}
.calfeed-add-toggle{
  padding:10px 12px;font-size:12px;font-weight:600;color:var(--text-2);
  cursor:pointer;list-style:none;user-select:none;
}
.calfeed-add-toggle::-webkit-details-marker{display:none}
.calfeed-add-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
.calfeed-submit{margin-top:10px;width:100%}

.calfeed-lbl{font-size:11px;color:var(--text-3);margin-top:6px;letter-spacing:0.02em}
.calfeed-in{
  padding:8px 10px;background:var(--bg-0);border:1px solid var(--border);
  border-radius:4px;color:var(--text-1);font-size:13px;font-family:inherit;outline:0;
}
.calfeed-in:focus{border-color:var(--accent)}
.calfeed-color{width:40px;height:28px;padding:0;border:1px solid var(--border);border-radius:4px;background:transparent;cursor:pointer}
.calfeed-ta{
  padding:8px 10px;background:var(--bg-0);border:1px solid var(--border);
  border-radius:4px;color:var(--text-1);font-size:11px;font-family:ui-monospace,monospace;outline:0;
  resize:vertical;min-height:80px;
}
.calfeed-hint{font-size:10px;color:var(--text-4);margin:4px 0 0;line-height:1.5}
.calfeed-status{font-size:10px}
.calfeed-status--error{color:var(--danger)}
.calfeed-status--ok{color:var(--success,#2ecc71)}
.calfeed-worker-close{float:right;margin-bottom:8px}
.calfeed-hint code{background:var(--bg-3);padding:1px 4px;border-radius:3px;font-size:10px}

.calfeed-mode-tabs{display:flex;gap:4px;margin:8px 0 4px;border-bottom:1px solid var(--border)}
.calfeed-mode{
  padding:6px 10px;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--text-3);font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;
}
.calfeed-mode.active{color:var(--accent);border-bottom-color:var(--accent)}

.calfeed-mode-panel{display:flex;flex-direction:column;gap:4px}

.calfeed-sync-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
}

.calfeed-worker-panel{
  margin-top:12px;padding:12px;background:var(--bg-2);
  border:1px solid var(--accent);border-radius:6px;
}
.calfeed-code{
  background:var(--bg-0);padding:10px;border-radius:4px;
  font-size:10px;line-height:1.5;overflow-x:auto;
  font-family:ui-monospace,monospace;color:var(--text-2);
  border:1px solid var(--border);margin:8px 0;
  white-space:pre;
}

/* External calendar events in the calendar view */
.cal-task.cal-feed-event{
  background:rgba(255,255,255,0.03);
  border-left:3px solid var(--accent);
  font-style:italic;
  opacity:0.9;
}
.cal-feed-time{font-weight:700;color:var(--text-3);font-style:normal;font-size:10px}

/* Mobile tweaks */
@media (max-width:640px){
  .calfeed-row{padding:10px}
  .calfeed-btn{width:32px;height:32px}
  .calfeed-in,.calfeed-ta{font-size:14px!important}
  .calfeed-code{font-size:9px}
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* EXPORT SECTIONS — grouped Data tab layout                                  */
/* ══════════════════════════════════════════════════════════════════════════ */
.export-section{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
}
.export-section:first-of-type{border-top:none;margin-top:8px;padding-top:0}
.export-section-head{
  font-size:11px;font-weight:700;letter-spacing:0.08em;
  color:var(--text-2);text-transform:uppercase;margin-bottom:4px;
}
.export-section-desc{
  font-size:11px;color:var(--text-4);line-height:1.5;
  margin:0 0 8px;
}

/* Data-tab — consistent panel rhythm so Stats / Log / Archive / Export sit
   as visually sibling cards rather than colliding stacked sections. */
.panel-data{margin-bottom:14px}
.panel-data:last-of-type{margin-bottom:0}
.archive-list{max-height:400px;overflow-y:auto}
.archive-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* Export button color variants — replaces inline styles for maintainability. */
.export-btn.export-json{background:rgba(61,139,204,.1);border-color:rgba(61,139,204,.3);color:#3d8bcc}
.export-btn.export-ics{background:rgba(155,89,182,.1);border-color:rgba(155,89,182,.3);color:#9b59b6}
.export-btn.export-import{cursor:pointer;background:rgba(46,204,113,.08);border-color:rgba(46,204,113,.25);color:#2ecc71}
.export-btn.export-backup{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.3);color:#2ecc71}
.export-btn.export-restore{cursor:pointer;background:rgba(61,139,204,.1);border-color:rgba(61,139,204,.3);color:#3d8bcc}
.export-btn.export-encrypted{background:rgba(155,89,182,.12);border-color:rgba(155,89,182,.3);color:#9b59b6}
.export-btn.export-encrypted-restore{cursor:pointer;background:rgba(155,89,182,.08);border-color:rgba(155,89,182,.25);color:#9b59b6}
.export-row-secondary{margin-top:8px}

/* v24 — priority stripe via data-priority (replaces .priority-*-item on row) */
.task-item[data-priority="urgent"]:not(.starred-task){border-left-color:var(--danger)}
.task-item[data-priority="high"]:not(.starred-task){border-left-color:var(--warning)}
.task-item[data-priority="normal"]:not(.starred-task){border-left-color:var(--accent)}
.task-item[data-priority="low"]:not(.starred-task){border-left-color:var(--text-4)}
.task-sig.sig-streak{background:var(--accent-bg);color:var(--accent);font-weight:600}

.task-controlbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
}
.task-tb-check{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);
  cursor:pointer;user-select:none;white-space:nowrap;
}
.task-tb-check input{accent-color:var(--accent)}

/* Settings + task modal accordions */
.set-section,.md-section{
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:10px;background:var(--bg-1);
}
.set-section-sum,.md-section-sum{
  font-size:13px;font-weight:600;color:var(--text-1);
  padding:12px 14px;cursor:pointer;list-style:none;
  display:flex;align-items:center;
}
.set-section-sum::-webkit-details-marker,.md-section-sum::-webkit-details-marker{display:none}
/* Disclosure chevron — matches .views-accordion-summary pattern. The native
   <details> marker was disabled above; without this, the summary read as a
   static heading rather than a collapsible disclosure. Rotates 180° when open. */
.set-section-sum::after,.md-section-sum::after{
  content:"";width:0;height:0;margin-left:auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--text-3);
  transition:transform .2s;
}
.set-section[open] .set-section-sum::after,.md-section[open] .md-section-sum::after{
  transform:rotate(180deg);
}
.set-section-body,.md-section-body{padding:4px 14px 14px}
.set-section-body .srow:first-child{margin-top:0}
.md-section-body .mfield:first-child{margin-top:0}

.class-mgr-block{margin-bottom:16px}
.class-mgr-hdr{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase;margin-bottom:8px}
.class-mgr-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;
  padding:10px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--border);
}
.class-mgr-row--hidden{opacity:.55}
/* Desktop control sizing — consistent 13px font + 32px min-height across
   input/selects/buttons so the row reads as a single component. The label
   input gets a touch more prominence via slightly larger font + weight,
   matching the mobile hierarchy. */
.class-mgr-in{flex:1 1 160px;min-width:0;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-1);color:var(--text-1);font-family:inherit;font-size:14px;font-weight:500;min-height:34px}
.class-mgr-sel{padding:7px 24px 7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-1);color:var(--text-1);font-size:13px;font-family:inherit;min-height:34px;max-width:140px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.class-mgr-sel-color{flex:1 1 180px;max-width:min(100%,240px);font-size:13px}
.class-mgr-btn{
  padding:7px 12px;font-size:13px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg-1);color:var(--text-2);cursor:pointer;font-family:inherit;
  min-height:34px;
}
.class-mgr-btn:hover{border-color:var(--accent-border);color:var(--text-1)}
.class-mgr-id{font-size:11px;color:var(--text-4);padding:3px 8px;background:var(--bg-3);border-radius:4px;font-family:var(--font-mono);letter-spacing:.02em}

/* === Classification editor on mobile (must come AFTER the base flex rules
   above so this @media block actually wins the cascade — earlier mobile
   override sat above the base rule and was silently overridden) ===
   7 children get grouped into 4 logical rows by functional role so the
   surface has clear hierarchy:
     Row 1 — label              (identity, prominent: 15px / 600)
     Row 2 — icon + color       (appearance, 1fr + 2fr split)
     Row 3 — Hide / ↑ / ↓       (actions, 3 equal columns)
     Row 4 — id badge           (metadata footnote, subtle, centered)
   Heights normalized to 40/44px so touch targets are consistent and the
   row reads as one coherent component instead of seven stacked. */
@media (max-width:640px){
  .class-mgr-cat{margin-bottom:12px}
  .class-mgr-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:12px;
  }
  .class-mgr-row > *{max-width:none;min-width:0}
  .class-mgr-row > .class-mgr-in{
    grid-column:1 / -1;
    font-size:15px;font-weight:600;
    min-height:44px;padding:10px 12px;
  }
  .class-mgr-row > .class-mgr-sel:not(.class-mgr-sel-color){
    grid-column:1 / 2;
    font-size:13px;min-height:40px;padding:8px 24px 8px 10px;
  }
  .class-mgr-row > .class-mgr-sel-color{
    grid-column:2 / -1;
    font-size:13px;min-height:40px;padding:8px 24px 8px 10px;
  }
  .class-mgr-row > .class-mgr-btn{
    grid-column:span 1;
    min-height:40px;padding:8px 4px;font-size:13px;
  }
  .class-mgr-row > .class-mgr-id{
    grid-column:1 / -1;
    justify-self:center;
    font-size:11px;padding:4px 10px;
    opacity:.7;
  }
}
.class-mgr-add{margin-top:4px}
.class-mgr-cat{margin-bottom:8px}
.class-mgr-cat--hidden{opacity:0.55}
.class-mgr-details{margin-top:4px;border-radius:6px;border:1px solid var(--border);background:var(--bg-1);padding:0 8px 8px;font-size:12px;color:var(--text-2)}
.class-mgr-details > summary{cursor:pointer;padding:6px 0;font-size:11px;color:var(--text-3)}
.class-mgr-details[data-empty="1"] > summary{color:var(--accent,#3d8bcc)}
.class-mgr-focus-p,.class-mgr-ex{margin:6px 0 0}
.class-mgr-cv{margin:6px 0 0 18px;padding:0}
.class-mgr-field{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.class-mgr-field-lbl{font-size:11px;color:var(--text-3);font-weight:600;letter-spacing:.02em;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.class-mgr-field-lbl em{font-style:normal;color:var(--text-3);font-weight:400}
.class-mgr-field-lbl code{font-size:10px;background:var(--bg-2);padding:1px 4px;border-radius:3px}
.class-mgr-ta{font-family:inherit;font-size:12px;line-height:1.4;width:100%;resize:vertical;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);min-height:32px}
.class-mgr-ta:focus{outline:none;border-color:var(--accent,#3d8bcc)}
.class-mgr-details-actions{margin-top:8px;display:flex;justify-content:flex-end}
.class-mgr-reclass{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px}
.class-mgr-hint{font-size:11px;color:var(--text-3)}

/* Settings -> Lists manager. Visually parallel to the Classifications rows
   so the two surfaces feel like siblings, not alternatives. */
.lists-mgr-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;
  padding:10px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--border);
}
.lists-mgr-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%;display:inline-block}
.lists-mgr-meta{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lists-mgr-name{font-size:13px;font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lists-mgr-desc{font-size:11px;color:var(--text-3);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.lists-mgr-desc--empty{font-style:italic;color:var(--text-4)}
.lists-mgr-count{flex:0 0 auto;font-size:11px;color:var(--text-3);padding:2px 8px;background:var(--bg-3);border-radius:999px}
.lists-mgr-del:disabled{opacity:.4;cursor:not-allowed}
.lists-mgr-add{margin-top:8px}
@media (max-width:520px){
  .lists-mgr-row{flex-direction:column;align-items:stretch}
  .lists-mgr-meta{flex:1 1 auto}
  .lists-mgr-count{align-self:flex-start}
}

.wn-cal-hint{display:block;margin-top:4px;font-size:11px;color:var(--text-3);font-style:italic}
.cal-ev-mk-task{margin-left:6px;padding:2px 6px;font-size:10px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);color:var(--text-2);cursor:pointer}
.cal-ev-mk-task:hover{border-color:var(--accent-border);color:var(--text-1)}

.md-habit-log{font-size:12px;color:var(--text-2)}
.habit-log-sum{margin-bottom:8px;font-size:12px;color:var(--text-3)}
.habit-log-list{list-style:none;margin:0;padding:0;max-height:160px;overflow-y:auto}
.habit-log-list li{
  display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.habit-log-list li:last-child{border-bottom:none}

/* Per-task session history list — one row per timer session recorded into
   t.sessionEntries. Visually parallel to .habit-log-list so the two
   read as siblings inside the Tracking section. */
.md-sessions{font-size:12px;color:var(--text-2)}
.md-sessions-list{list-style:none;margin:0;padding:0;max-height:200px;overflow-y:auto}
.md-sessions-item{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--border-subtle);
  font-variant-numeric:tabular-nums;
}
.md-sessions-item:last-child{border-bottom:none}
.md-sessions-ts{flex:1;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-sessions-dur{font-weight:600;color:var(--text-1)}
.md-sessions-tag{
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;
  background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-border);
}
.md-sessions-item--partial .md-sessions-dur{color:var(--warning)}
.md-sessions-more{padding:6px 0;color:var(--text-3);font-size:11px;font-style:italic;text-align:center}

.iprev .ui-ic{width:16px;height:16px}

.filters-summary{font-size:11px;color:var(--text-3);line-height:1.35;flex:1 1 140px;min-width:120px}
.task-search-clear{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);
  color:var(--text-2);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.task-search-mode-pill{
  flex-shrink:0;font-size:10px;padding:3px 8px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-weight:600;
}
.today-banner .tb-snooze{
  margin-left:auto;font-size:11px;padding:5px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);
}
.swipe-tip-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin-bottom:12px;
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-1);font-size:12px;color:var(--text-2);
}
.swipe-tip-dismiss{font-size:11px;padding:5px 12px;border-radius:8px;background:var(--accent);color:#fff;border:none}
.cmdk-foot{font-size:11px;color:var(--text-4);padding:8px 12px;border-top:1px solid var(--border)}
.export-toast{
  /* bottom respects iOS home indicator / Android nav bar via safe-area-inset */
  position:fixed;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(16px);z-index:9000;
  padding:10px 18px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-1);
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:min(90vw,420px);text-align:center;
}
.export-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Action toast — like .export-toast but carries an inline action button
   (Undo). Sits above the mini-timer pill on mobile via the same
   safe-area-aware bottom offset. */
.action-toast{
  position:fixed;bottom:calc(96px + env(safe-area-inset-bottom,0px));left:50%;
  transform:translateX(-50%) translateY(16px);z-index:9100;
  display:inline-flex;align-items:center;gap:var(--space-5);
  padding:10px 12px 10px 18px;border-radius:999px;
  background:var(--bg-1);border:1px solid var(--border-strong);color:var(--text-1);
  font-size:var(--fs-13);box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  max-width:min(90vw,420px);
}
.action-toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.action-toast-lbl{color:var(--text-1);font-weight:500}
.action-toast-btn{
  appearance:none;-webkit-appearance:none;
  background:var(--accent);color:var(--bg-0);
  border:1px solid var(--accent);
  padding:6px 14px;border-radius:999px;
  font-size:var(--fs-12);font-weight:700;letter-spacing:.03em;
  cursor:pointer;transition:filter .12s;
}
.action-toast-btn:hover{filter:brightness(1.1)}
.action-toast-btn:focus-visible{outline:2px solid var(--text-1);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .action-toast{transition:opacity .01ms}
}
.sync-incoming-bar{
  position:fixed;top:0;left:0;right:0;z-index:8500;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:12px 16px;background:var(--bg-2);border-bottom:1px solid var(--warning);font-size:13px;box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.sync-incoming-inner code{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.sync-incoming-actions{display:flex;gap:8px;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* Tactile press feedback — replaces the killed mobile tap-highlight. Tiny
     scale on :active gives every primary button a "felt" response on touch.
     Honors prefers-reduced-motion via the global override. */
  .task-add:active,
  .nav-tab:active,
  .ta-btn:active,
  .density-seg-btn:active,
  .action-toast-btn:active,
  .first-task-btn:active,
  .what-next-pill:active,
  .header-icon-btn:active,
  .toggle:active,
  .small-btn:active,
  .sv-chip:active{transform:scale(.97);transition:transform .08s}

  /* === ELEVATION HIERARCHY === */
  .panel{box-shadow:var(--shadow-card)}
  .card.main-card{box-shadow:var(--shadow-raised);border-color:var(--border-strong)}
  .modal{box-shadow:var(--shadow-overlay)}
  .cmdk-panel{box-shadow:var(--shadow-overlay)}
  .intel-card{box-shadow:var(--shadow-raised)}

  /* === PRIMARY CTA EMPHASIS: Add Task button === */
  .task-add{
    background:var(--accent);
    color:var(--bg-0);
    box-shadow:0 2px 8px rgba(106,168,255,.28);
    font-weight:700;
    letter-spacing:.01em;
    transition:filter var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)
  }
  .task-add:hover{
    background:#7db3ff;
    box-shadow:0 4px 14px rgba(106,168,255,.36);
    filter:none
  }
  .task-add:active{
    transform:scale(.97);
    box-shadow:0 1px 4px rgba(106,168,255,.18)
  }
  body.light-theme .task-add{box-shadow:0 2px 8px rgba(37,99,235,.22)}
  body.light-theme .task-add:hover{box-shadow:0 4px 14px rgba(37,99,235,.30)}

  /* === PARETO TASK EMPHASIS === */
  .task-item--pareto{
    border-left-width:4px!important;
    border-left-color:var(--warning)!important;
    background:linear-gradient(90deg,rgba(255,159,10,.06) 0%,transparent 40%)
  }
  .task-item--pareto:hover{background:linear-gradient(90deg,rgba(255,159,10,.10) 0%,var(--bg-2) 40%)}
  .task-item--pareto .task-row-primary::after{
    content:'';
    position:absolute;
    inset-inline-end:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg,var(--warning),transparent);
    opacity:.35;
    pointer-events:none
  }

  /* === NAV TAB ACTIVE STATE STRENGTHENED === */
  .nav-tab.active{
    background:var(--accent-bg);
    color:var(--accent);
    border:1px solid var(--accent-border);
    border-radius:8px
  }
  .nav-tab.active .nav-tab-icon{filter:none;color:var(--accent)}
  body.light-theme .nav-tab.active{
    background:rgba(37,99,235,.10);
    color:var(--accent);
    border-color:rgba(37,99,235,.28)
  }

  /* === UNIFIED EASING LANGUAGE === */
  .task-item,.sv-chip,.nav-tab,.list-chip,
  .btn,.btn-primary,.btn-pause,.btn-ghost,.btn-skip,.btn-danger,
  .task-add,.modal,.cmdk-panel,.action-toast{
    transition-timing-function:var(--ease-out);
    transition-duration:var(--dur-base)
  }
  .task-checkbox,.ta-btn,.toggle,.task-rm{
    transition-timing-function:var(--ease-out);
    transition-duration:var(--dur-fast)
  }

  /* === TIMER RING PULSE WHEN RUNNING === */
  @keyframes ringPulse{
    0%,100%{filter:drop-shadow(0 0 6px var(--work-glow))}
    50%{filter:drop-shadow(0 0 14px var(--work-glow))}
  }
  @keyframes ringPulseShort{
    0%,100%{filter:drop-shadow(0 0 6px var(--short-glow))}
    50%{filter:drop-shadow(0 0 14px var(--short-glow))}
  }
  @keyframes ringPulseLong{
    0%,100%{filter:drop-shadow(0 0 6px var(--long-glow))}
    50%{filter:drop-shadow(0 0 14px var(--long-glow))}
  }
  .ring-wrap.ring-running.work .ring-fg{animation:ringPulse 2.4s ease-in-out infinite}
  .ring-wrap.ring-running.short .ring-fg{animation:ringPulseShort 2.4s ease-in-out infinite}
  .ring-wrap.ring-running.long .ring-fg{animation:ringPulseLong 2.4s ease-in-out infinite}

  /* === STAGGERED PANEL PAGE-LOAD ENTRY === */
  @keyframes panelEnter{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }
  [data-tab]:not([hidden]):not([data-panel-entered]) .panel,
  [data-tab]:not([hidden]):not([data-panel-entered]) .card.main-card{
    animation:panelEnter var(--dur-slow) var(--ease-out) both
  }
  [data-tab]:not([hidden]):not([data-panel-entered]) .panel:nth-child(1){animation-delay:0ms}
  [data-tab]:not([hidden]):not([data-panel-entered]) .panel:nth-child(2){animation-delay:40ms}
  [data-tab]:not([hidden]):not([data-panel-entered]) .panel:nth-child(3){animation-delay:80ms}
  [data-tab]:not([hidden]):not([data-panel-entered]) .panel:nth-child(4){animation-delay:120ms}

  /* === RADIUS NORMALIZATION === */
  .iform{border-radius:var(--r-md)}
  .qt-form{border-radius:var(--r-md)}
  .lists-bar{border-radius:var(--r-md)}
  .task-toolbar{border-radius:var(--r-md)}
  .smart-views{border-radius:var(--r-md)}
  .hist-day{border-radius:var(--r-md)}
  .sinput{border-radius:var(--r-sm)}
  .small-btn{border-radius:var(--r-sm)}
  .irm{border-radius:var(--r-sm)}
  .qt-act{border-radius:var(--r-sm)}
  .mfield-chip-btn{border-radius:var(--r-sm)}
  .board-col{border-radius:var(--r-lg)}
  .goal-item{border-radius:var(--r-md)}
  .tab{border-radius:calc(var(--r-sm) + 2px)}
  .modal-close{border-radius:var(--r-sm)}

  /* === UNIFIED CHIP SYSTEM === */
  .status-badge,.date-chip,.recur-badge{
    padding:3px 9px;
    font-size:var(--fs-12);
    font-weight:600;
    border-radius:999px;
    letter-spacing:0;
    display:inline-flex;
    align-items:center;
    gap:4px;
    line-height:1.4
  }
  .tag-chip{
    padding:2px 8px;
    font-size:var(--fs-12);
    font-weight:500;
    border-radius:999px;
    letter-spacing:0
  }
  .list-chip .lc-count,.sv-count{
    font-size:10px;
    font-weight:600;
    padding:1px 6px;
    border-radius:999px;
    line-height:1.4
  }

  /* === CONSISTENT HOVER GRAMMAR === */
  button:hover{filter:none}
  .small-btn:hover,.export-btn:hover,.clear-hist-btn:hover{filter:brightness(1.06)}

  /* === ENHANCED ACTION TOAST === */
  .action-toast{
    border-radius:var(--r-lg);
    padding:12px 14px 10px 18px;
    gap:var(--space-5);
    box-shadow:0 8px 28px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.24);
    border-color:var(--border-strong);
    flex-direction:column;
    align-items:stretch
  }
  .action-toast-header{display:flex;align-items:center;gap:var(--space-5)}
  .action-toast-lbl{flex:1;font-size:var(--fs-13);font-weight:600}
  .action-toast-btn{align-self:flex-start}
  .action-toast-progress{height:3px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:2px}
  .action-toast-progress-bar{height:100%;background:var(--accent);border-radius:999px;transition:width 0.1s linear}
  .action-toast-kbd-hint{font-size:10px;color:var(--text-3);font-family:var(--font-mono);margin-top:1px}

  /* === TYPOGRAPHIC PROPORTION === */
  .slbl{font-size:var(--fs-13);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
  .scnt{font-size:var(--fs-12);color:var(--text-3);font-weight:500}
  .task-empty-title{font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em}

  /* === FOCUS RING: matches component shape === */
  *:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .sv-chip:focus-visible,.list-chip:focus-visible,.status-badge:focus-visible,
  .date-chip:focus-visible,.tag-chip:focus-visible,.task-add:focus-visible,
  .btn:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible,
  .btn-skip:focus-visible,.btn-danger:focus-visible,.action-toast-btn:focus-visible,
  .what-next-pill:focus-visible{border-radius:999px}
  .ta-btn:focus-visible,.nav-tab:focus-visible,.task-checkbox:focus-visible,
  .modal-close:focus-visible,.header-icon-btn:focus-visible{border-radius:var(--r-sm)}

  /* === LOADING STATE LANGUAGE === */
  .ai-chip--syncing .ai-chip-dot,.track-banner-pulse,.sync-dot--loading,.mt-phase-dot.running{
    animation-name:pulse;
    animation-duration:1.4s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite
  }
  .intel-action-btn:disabled,.task-add:disabled,.btn:disabled,.btn-primary:disabled{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none
  }

  @media (prefers-reduced-motion:reduce){
    .task-add:active,.nav-tab:active,.ta-btn:active,.density-seg-btn:active,
    .action-toast-btn:active,.first-task-btn:active,.what-next-pill:active,
    .header-icon-btn:active,.toggle:active,.small-btn:active,.sv-chip:active{
      transform:none
    }
    .ring-wrap.ring-running .ring-fg,
    [data-tab]:not([hidden]):not([data-panel-entered]) .panel,
    [data-tab]:not([hidden]):not([data-panel-entered]) .card.main-card{
      animation:none
    }
  }

  /* Skip-to-content: hidden until a keyboard user tabs into it from page load. */
  .skip-link{position:absolute;inset-block-start:-44px;inset-inline-start:8px;background:var(--accent);color:var(--bg-0);padding:8px 14px;border-radius:var(--r-sm);font-weight:700;font-size:13px;letter-spacing:.02em;z-index:var(--z-skip-link);transition:inset-block-start .15s;text-decoration:none}
  .skip-link:focus,.skip-link:focus-visible{inset-block-start:8px;outline:2px solid var(--text-1);outline-offset:2px}
.drag-handle{cursor:grab;color:var(--text-4);font-size:15px;padding:0 2px;user-select:none;line-height:1;flex-shrink:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ASK MODE — command-palette natural-language input                          */
/* ══════════════════════════════════════════════════════════════════════════ */
.cmdk-input-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border)}
.cmdk-input-row .cmdk-input{border-bottom:none;flex:1}
.cmdk-find-hint{
  margin:0;padding:8px 14px;font-size:12px;line-height:1.45;color:var(--text-3);
  border-bottom:1px solid var(--border);background:var(--bg-2);
}
.cmdk-find-hint kbd{
  font-family:var(--font-mono);font-size:10px;background:var(--bg-1);border:1px solid var(--border);
  padding:1px 5px;border-radius:3px;color:var(--text-2);
}
.cmdk-find-hint strong{color:var(--text-2);font-weight:600}
.cmdk-ask-toggle{
  margin-right:10px;padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--bg-2);color:var(--text-3);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-family:inherit;flex-shrink:0;
}
.cmdk-ask-toggle:hover{background:var(--bg-3);color:var(--text-2)}
.cmdk-ask-toggle--active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.cmdk-panel--ask .cmdk-input{color:var(--accent)}
.cmdk-ask-reply{
  padding:14px 16px;max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg-2);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-1);
}
.cmdk-ask-hint{font-size:12px;color:var(--text-3);line-height:1.5}
.cmdk-ask-hint strong{color:var(--text-2)}
.cmdk-ask-streaming{display:flex;flex-direction:column;gap:10px}
.cmdk-ask-row{display:flex;align-items:center;gap:10px}
.cmdk-ask-spinner{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--accent);
  animation:cmdk-ask-spin 0.8s linear infinite;flex-shrink:0;
}
@keyframes cmdk-ask-spin{to{transform:rotate(360deg)}}
.cmdk-ask-label{font-size:12px;color:var(--text-2);font-weight:500;flex:1}
.cmdk-ask-details{font-size:11px;color:var(--text-3)}
.cmdk-ask-details summary{cursor:pointer;user-select:none;padding:2px 0}
.cmdk-ask-details summary:hover{color:var(--text-2)}
.cmdk-ask-stream{
  margin:6px 0 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.45;color:var(--text-3);
  background:var(--bg-1);border:1px solid var(--border);border-radius:6px;padding:10px 12px;
  max-height:26vh;overflow-y:auto;white-space:pre-wrap;word-break:break-word;
}
.cmdk-ask-stop{
  padding:4px 10px;font-size:11px;font-weight:600;font-family:inherit;
  background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:4px;cursor:pointer;flex-shrink:0;
}
.cmdk-ask-stop:hover{background:rgba(231,76,60,.08)}
.cmdk-ask-error{color:var(--danger);font-size:13px;line-height:1.5}
.cmdk-ask-error button{margin-left:8px;vertical-align:middle}
.cmdk-ask-empty{color:var(--text-3);font-size:13px;font-style:italic}
.cmdk-ask-done{color:var(--success,#2ecc71);font-size:13px;font-weight:500}
.cmdk-ask-answer{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--r-sm,8px);background:var(--bg-1);border:1px solid var(--border-subtle)}
.cmdk-ask-answer-body{color:var(--text-1);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.cmdk-ask-answer-foot{color:var(--text-3);font-size:11px;letter-spacing:.2px}
.cmdk-ask-rejected{margin-top:8px;border:1px solid var(--border-subtle);border-radius:var(--r-sm,8px);background:var(--bg-1);padding:6px 10px}
.cmdk-ask-rejected summary{cursor:pointer;color:var(--warning);font-size:12px;font-weight:500}
.cmdk-ask-rejected-list{margin:6px 0 0;padding-left:18px;color:var(--text-2);font-size:12px;line-height:1.55}
.cmdk-ask-rejected-list li{word-break:break-word}
.cmdk-ask-rejected-more{font-style:italic;color:var(--text-3)}

/* Source badge + bulk-destructive warning inside the pending-ops preview */
.pending-source-badge{
  display:inline-block;margin-left:8px;padding:2px 8px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-bg);color:var(--accent);border-radius:999px;vertical-align:middle;
}
.pending-mass-warn{
  margin:0 0 10px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text-1);
  background:rgba(241,196,15,.08);border:1px solid rgba(241,196,15,.35);border-radius:8px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* GENERATIVE AI — Settings subsection                                        */
/* ══════════════════════════════════════════════════════════════════════════ */
.gen-settings{display:flex;flex-direction:column;gap:10px;width:100%}
.gen-settings-lead{font-size:11px;color:var(--text-3);line-height:1.55;margin:2px 0 0}
.gen-settings-lead strong{color:var(--text-2)}
.gen-settings-lead em{font-style:italic;color:var(--text-2)}
.gen-settings-lead code,.gen-settings-lead kbd{font-family:var(--font-mono);font-size:10.5px;background:var(--bg-2);border:1px solid var(--border);padding:1px 5px;border-radius:3px;color:var(--text-2)}
.gen-settings-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gen-settings-lbl{font-size:12px;color:var(--text-2);min-width:80px}
.gen-settings select,.gen-settings input[type=number]{
  flex:1;min-width:140px;padding:6px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:5px;
  color:var(--text-1);font-family:inherit;font-size:12px;
}
.gen-settings select:disabled,.gen-settings input:disabled{opacity:.5;cursor:not-allowed}
.gen-settings-note{font-size:11px;color:var(--text-3);line-height:1.4}
.gen-settings-warn{font-size:11px;color:var(--warning,#e67e22);line-height:1.4;padding:6px 10px;background:rgba(230,126,34,.08);border:1px solid rgba(230,126,34,.3);border-radius:5px}
.gen-settings-status{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.gen-settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gen-settings-actions--secondary{margin-top:6px;padding-top:8px;border-top:1px dashed var(--border)}
.gen-settings-hint{font-size:11px;color:var(--text-4);line-height:1.5;margin:6px 0 0}

/* Ask promo chip (discoverability outside Cmd+K) */
.ask-promo-chip{
  margin:0;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--text-3);
  border-radius:999px;font-size:11px;font-family:inherit;cursor:pointer;
}
.ask-promo-chip .ask-promo-ic{display:inline-flex;align-items:center;flex-shrink:0}
.ask-promo-chip:hover{color:var(--accent);border-color:var(--accent)}
.ask-promo-chip kbd{
  font-family:var(--font-mono);font-size:10px;background:var(--bg-1);border:1px solid var(--border);
  padding:1px 5px;border-radius:3px;color:var(--text-2);
}
.ask-promo-label--touch{display:none}
@media (max-width:640px),(pointer:coarse){
  .ask-promo-label--kbd{display:none}
  .ask-promo-label--touch{display:inline}
}

@media (max-width:640px){
  .cmdk-ask-reply{max-height:35vh}
  .cmdk-ask-stream{max-height:22vh}
  .cmdk-ask-toggle{margin-right:8px;padding:5px 10px;font-size:10.5px}
  .gen-settings-row{flex-direction:column;align-items:flex-start}
  .gen-settings-lbl{min-width:0}
  .gen-settings select,.gen-settings input[type=number]{width:100%}
  .ask-promo-chip{font-size:10.5px;padding:4px 9px}
  .ask-promo-chip kbd{font-size:9.5px;padding:1px 4px}
}

/* ═══ Layout / IA: header bar, track banner, timer sub-nav, first-task CTA ═══ */
.header-nav-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin-bottom:14px;
}
.header-nav-bar .nav-tabs{flex:1;min-width:0;margin-bottom:0}
.header-utils{display:flex;align-items:center;gap:6px;flex-shrink:0}
.header-icon-btn{
  min-width:36px;height:36px;padding:0 10px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);
  font-size:12px;font-weight:600;transition:background .15s,border-color .15s;
}
.header-icon-btn:hover{background:var(--bg-3);color:var(--text-1)}
.header-icon-btn--cmdk{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:0 8px;min-width:36px;
}
.header-icon-btn--cmdk .cmdk-btn-ic{display:inline-flex;align-items:center;flex-shrink:0}
.header-icon-btn--cmdk .cmdk-btn-txt{display:none;font-size:12px;font-weight:600;letter-spacing:0.02em}
.header-icon-btn--cmdk .cmdk-btn-kbd{
  font-family:var(--font-mono);font-size:10px;line-height:1.15;letter-spacing:.02em;
}
@media (max-width:640px){
  .header-icon-btn--cmdk{min-height:44px;padding:0 10px}
  .header-icon-btn--cmdk .cmdk-btn-txt{display:inline}
  .header-icon-btn--cmdk .cmdk-btn-kbd{display:none}
}
/* HTML5 `hidden` attribute. !important ensures this wins over class rules
   that set display: flex / grid. JS toggles via el.hidden = false to show:
   once the attribute is removed the rule no longer matches, and any
   class-based display rule (or el.style.display assignment) takes effect. */
[hidden]{display:none !important}
.track-banner{
  width:100%;max-width:720px;margin:-4px 0 12px;padding:8px 12px;
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-md);
  font-size:12px;
}
.track-banner-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.track-banner-pulse{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.2s ease-in-out infinite}
.track-banner-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.track-banner-task{font-weight:600;color:var(--text-1)}
.track-banner-time{font-variant-numeric:tabular-nums;color:var(--text-2)}
.md-name-strong{font-weight:700}
.sw-lap{
  display:flex;justify-content:space-between;gap:8px;
  font-size:12px;padding:4px 0;border-bottom:1px solid var(--border);
  color:var(--text-2);
}
.sw-lap:last-child{border-bottom:none}
.sw-display{font-variant-numeric:tabular-nums}
.timer-subnav{
  display:flex;gap:4px;flex-wrap:wrap;width:100%;max-width:720px;
  margin:0 0 10px;padding:4px;background:var(--bg-1);border:1px solid var(--border);
  border-radius:var(--r-md);
}
.timer-sub-btn{
  flex:1;min-width:72px;padding:8px 10px;border-radius:8px;
  background:transparent;border:none;color:var(--text-3);
  font-size:11px;font-weight:600;letter-spacing:.04em;transition:background .15s,color .15s;
}
.timer-sub-btn:hover{color:var(--text-1);background:var(--bg-2)}
.timer-sub-btn.active{
  color:var(--text-1);background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--border-strong);
}
.first-task-btn{
  display:inline-block;margin:var(--space-4) 0;padding:10px 16px;border-radius:var(--r-sm);
  background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);
  font-size:var(--fs-13);font-weight:600;font-family:inherit;cursor:pointer;
  min-height:40px;
}
.first-task-btn:hover{filter:brightness(1.08);background:var(--accent);color:var(--bg-0);border-color:var(--accent)}
.first-task-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.habit-template-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:var(--space-3) 0}
.habit-template-row .habit-template-btn{margin:0;padding:8px 14px;font-size:var(--fs-12)}

/* Empty-state internal layout — class-driven so it stays theme-aware and
   token-consistent across views (no-tasks-yet / no-filter-match / archive). */
.task-empty-icon{
  display:flex;justify-content:center;line-height:0;
  color:var(--text-3);opacity:.6;
  margin-block-end:var(--space-4);
  font-size:28px;
}
.task-empty-icon .ui-ic{width:32px;height:32px}
.task-empty-welcome{margin:14px auto 16px;max-width:520px;text-align:left;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px}
.task-empty-welcome-title{font-weight:700;color:var(--text-1);margin-bottom:8px;font-size:14px}
.task-empty-welcome-list{margin:0 0 10px;padding-left:18px;color:var(--text-2);font-size:13px;line-height:1.6}
.task-empty-welcome-list li{margin-bottom:4px}
.task-empty-welcome-dismiss{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:12px;cursor:pointer}
.task-empty-welcome-dismiss:hover{background:var(--bg-2);color:var(--text-1)}
.stats-empty-hint{margin:8px 0 0;padding:8px 12px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--text-3);font-size:12px;line-height:1.5;text-align:center}
.task-empty-title{
  font-size:var(--fs-16);font-weight:600;color:var(--text-1);
  margin-block-end:var(--space-3);
}
.task-empty-help{
  font-size:var(--fs-13);color:var(--text-2);
  margin-block:var(--space-3);
  line-height:1.5;
}
.task-empty-help strong{color:var(--text-1);font-weight:600}
.task-empty-tip{
  font-size:var(--fs-12);color:var(--text-3);
  margin-block:var(--space-3);
  line-height:1.5;max-width:42ch;margin-inline:auto;
}
.task-empty-example{
  font-family:var(--font-mono);font-size:var(--fs-12);color:var(--text-3);
  margin-block-start:var(--space-5);line-height:1.6;
}
.task-empty-example-tokens{color:var(--accent);margin-inline-start:6px}
.mfield--readonly{
  background:var(--bg-0)!important;cursor:default!important;color:var(--text-2);
  border-color:var(--border)!important;
}
body.light-theme .mfield--readonly{background:var(--bg-2)!important}
button.hist-day{display:block;width:100%;font:inherit;cursor:pointer;background:inherit}
.filter-display-lbl{font-size:10px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.task-toolbar-display{align-items:center;gap:8px;flex-wrap:wrap}
.app-dlg{max-width:420px}
.app-dlg-msg{color:var(--text-1)}
.app-dlg-overlay{z-index:var(--z-dialog)}


/* ───── G-17 stats-by-life-area ───── */
.stats-by-area{margin-top:12px;padding:10px 12px;background:var(--card-2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--r-sm,6px)}
.sba-title{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.sba-row{display:grid;grid-template-columns:14px 1fr 100px 90px;align-items:center;gap:8px;padding:3px 0;font-size:12px}
.sba-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sba-lbl{color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sba-bar{position:relative;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.sba-bar-fill{display:block;height:100%;border-radius:3px}
.sba-val{color:var(--text-3);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}

/* ───── G-14 focus streaks + heatmap ───── */
.focus-streak{margin-top:12px;padding:12px;background:var(--card-2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--r-sm,6px)}
.streak-row{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.streak-num{font-size:28px;font-weight:700;color:var(--accent,#48b5e0);line-height:1;font-variant-numeric:tabular-nums}
.streak-lbl{font-size:12px;color:var(--text-2)}
.streak-best{margin-left:auto;font-size:11px;color:var(--text-3)}
.hm-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:100%;max-width:260px;margin:0 auto}
.hm-cell{display:block;aspect-ratio:1;border-radius:2px;background:var(--border)}
.hm-l1{background:rgba(72,181,224,.25)}
.hm-l2{background:rgba(72,181,224,.5)}
.hm-l3{background:rgba(72,181,224,.75)}
.hm-l4{background:rgba(72,181,224,1)}

/* ───── G-15 session note prompt ───── */
.session-note-prompt{margin-top:12px;padding:12px;background:var(--card-2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--r-sm,6px);display:flex;flex-direction:column;gap:8px}
.snp-lbl{font-size:12px;color:var(--text-2)}
.snp-input{font:inherit;color:var(--text-1);background:var(--input-bg,rgba(0,0,0,.2));border:1px solid var(--border);border-radius:4px;padding:6px 8px;resize:vertical;min-height:40px}
.snp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.snp-save{background:var(--accent,#48b5e0);color:#0a1320;border:none;padding:6px 12px;border-radius:4px;font:600 12px inherit;cursor:pointer}
.snp-skip{background:transparent;color:var(--text-2);border:1px solid var(--border);padding:6px 12px;border-radius:4px;font:12px inherit;cursor:pointer}
.snp-off{margin-left:auto;font-size:11px;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}

/* ───── G-7 focus-on-list mode ───── */
.app-focus-list .smart-views,
.app-focus-list .lists-bar,
.app-focus-list .today-banner{display:none !important}
/* removed focus-list absolute badge to prevent UI overlap with the Menu button */

/* ───── G-18 today-view calendar events ───── */
.today-cal-events{margin:8px 0 4px;padding:8px 10px;background:var(--card-2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--r-sm,6px)}
.tce-head{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.tce-list{display:flex;flex-direction:column;gap:4px}
.tce-row{display:grid;grid-template-columns:8px 60px 1fr auto;align-items:center;gap:8px;font-size:12px}
.tce-dot{width:8px;height:8px;border-radius:50%}
.tce-time{color:var(--text-2);font-variant-numeric:tabular-nums;font-size:11px}
.tce-title{color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tce-feed{color:var(--text-3);font-size:10px}

/* ───── G-4 bulk-select edit mode ───── */
.app-bulk-mode .task-item{cursor:pointer}
.app-bulk-mode .task-item::before{content:"";display:inline-block;width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;margin-right:8px;flex-shrink:0;background:var(--card-2,rgba(255,255,255,.05));vertical-align:middle}
.app-bulk-mode .task-item.task-bulk-selected{background:rgba(72,181,224,.08);border-color:rgba(72,181,224,.4)}
.app-bulk-mode .task-item.task-bulk-selected::before{background:var(--accent,#48b5e0);border-color:var(--accent,#48b5e0);box-shadow:inset 0 0 0 2px var(--card-2,#0a1320)}
.bulk-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--card-1,#1a2333);border:1px solid var(--border);border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.4);max-width:calc(100vw - 32px);flex-wrap:wrap}
.bulk-count{font-size:12px;color:var(--accent,#48b5e0);font-weight:600;margin-right:6px}
.bulk-btn{background:transparent;color:var(--text-1);border:1px solid var(--border);padding:5px 10px;border-radius:14px;font:600 11px inherit;cursor:pointer}
.bulk-btn:hover{background:var(--card-2,rgba(255,255,255,.05))}
.bulk-close{background:transparent;border-color:transparent;font-size:14px;color:var(--text-3)}
.bulk-sel{background:var(--card-2,rgba(255,255,255,.05));color:var(--text-1);border:1px solid var(--border);padding:4px 8px;border-radius:14px;font:11px inherit}

/* ───── G-10/G-11 brief / review card ───── */
.ai-brief-card{position:fixed;right:16px;top:80px;z-index:1100;width:min(420px,calc(100vw - 32px));max-height:60vh;overflow:auto;background:var(--card-1,#1a2333);border:1px solid var(--border);border-radius:var(--r-md,8px);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.aibc-head{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border)}
.aibc-title{flex:1;font-size:13px;font-weight:600;color:var(--text-1)}
.aibc-close{background:transparent;border:none;color:var(--text-3);font-size:14px;cursor:pointer;padding:0 4px}
.aibc-body{padding:14px;font-size:13px;line-height:1.55;color:var(--text-1);white-space:pre-wrap}

/* ───── G-25 prefers-contrast: more (high-contrast accessibility theme) ───── */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(255,255,255,.55);
    --text-3: #c8d3e0;
  }
  .task-item, .ai-brief-card, .session-note-prompt, .focus-streak, .stats-by-area, .today-cal-events, .bulk-bar { border-width:1.5px }
  .task-checkbox, .qt-btn, .bulk-btn, .snp-save, .snp-skip, .export-btn { outline:1px solid currentColor; outline-offset:1px }
  :focus-visible { outline:2px solid currentColor; outline-offset:2px }
  .sba-bar { background:#222 }
}

/* ───── G-12 voice button styling ───── */
.task-voice-btn{}
.task-voice-btn.on{color:#e74c3c;animation:pulseVoice 1.2s ease-in-out infinite}
@keyframes pulseVoice{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .task-voice-btn.on{animation:none}
}

/* ───── G-7 visible focus-on-list toggle in the lists bar ───── */
.list-focus-toggle{background:transparent;color:var(--text-3);border:1px solid var(--border);padding:4px 10px;border-radius:14px;font:11px inherit;cursor:pointer;margin-left:6px}
.list-focus-toggle.on{background:rgba(72,181,224,.12);color:var(--accent,#48b5e0);border-color:rgba(72,181,224,.4)}
.list-focus-toggle:hover{background:var(--card-2,rgba(255,255,255,.05))}

/* ───── G-21 share-target: incoming-share confirmation + input flash ───── */
.quickadd-flash{animation:quickaddFlash 1.4s ease-out;outline:2px solid var(--accent,#48b5e0);outline-offset:2px}
@keyframes quickaddFlash{
  0%{box-shadow:0 0 0 0 rgba(72,181,224,.7)}
  70%{box-shadow:0 0 0 12px rgba(72,181,224,0)}
  100%{box-shadow:0 0 0 0 rgba(72,181,224,0)}
}
@media (prefers-reduced-motion: reduce){
  .quickadd-flash{animation:none}
}
.share-in-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(72,181,224,.12);color:var(--accent,#48b5e0);border:1px solid rgba(72,181,224,.4);border-radius:999px;font-size:12px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:calc(100vw - 32px)}
.share-in-x{background:transparent;border:none;color:inherit;font-size:14px;cursor:pointer;padding:0 4px;opacity:.7}
.share-in-x:hover{opacity:1}

/* Checklist & Related tasks styling */
.mclg-group {
  display:flex;flex-direction:column;gap:6px;margin-bottom:12px;
  background:var(--bg-2, rgba(255,255,255,.02));border:1px solid var(--border);border-radius:8px;padding:8px;
}
.mclg-head { display:flex;align-items:center;gap:8px; }
.mclg-name { flex:1; background:transparent; border:none; color:var(--text-1); font-weight:600; font-size:14px; outline:none; }
.mclg-rm { background:transparent; border:none; color:var(--danger); cursor:pointer; font-size:14px; padding:0 4px; }
.mclg-items { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.mclg-items li { display:flex; align-items:center; gap:8px; }
.mclg-item-cb { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.mclg-item-txt { flex:1; background:var(--bg-1); border:1px solid var(--border); border-radius:4px; color:var(--text-1); padding:4px 8px; font-size:13px; }
.mclg-item-txt.done { text-decoration:line-through; color:var(--text-3); opacity:0.7; }
.mclg-item-x { background:transparent; border:none; color:var(--text-3); cursor:pointer; font-size:14px; padding:0 4px; }
.mclg-item-x:hover { color:var(--danger); }

/* Ghost Action Buttons */
.mclg-add-group, .mclg-add, .related-add {
  font-family: inherit;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(61,139,204,.12);border:1px solid rgba(61,139,204,.3);border-radius:6px;
  padding:6px 12px;font-size:13px;color:var(--accent);cursor:pointer;
  transition:background .15s,transform .1s;line-height:1;
  font-weight:500;margin-top:4px;align-self:flex-start;
}
.mclg-add-group:hover, .mclg-add:hover, .related-add:hover {
  background:rgba(61,139,204,.2);transform:scale(1.02)
}
.mclg-add-group:active, .mclg-add:active, .related-add:active {
  transform:scale(0.98)
}

.md-related {
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px;
}
.related-chip {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .15s;
}
.related-chip:hover {
  background:var(--bg-3, var(--bg-2));border-color:var(--accent-border, var(--border));
}
.related-x {
  color:var(--danger);font-weight:bold;cursor:pointer;font-size:14px;line-height:1;
}
.related-x:hover {
  filter:brightness(1.5);
}

/* ========== KANBAN BOARD — TOUCH DnD POLISH ========== */
/* board-card while being touch-dragged (ghost is in body; original goes faint) */
.board-card--touch-src{opacity:.28!important}
/* Column highlighted as current drop target during touch drag */
.board-col.drop-target{
  background:var(--accent-bg);
  border-color:var(--accent-border);
  box-shadow:inset 0 0 0 2px var(--accent-border);
}
/* Mobile board: longer hold indicator so users know drag has started */
@media (max-width:640px){
  .board-col-empty{
    padding:32px 16px;
    border:2px dashed var(--border);border-radius:var(--r-md);
    font-size:13px;color:var(--text-4);font-style:italic;
    transition:border-color .15s,background .15s;
  }
  .board-col.drop-target .board-col-empty{
    border-color:var(--accent-border);
    background:var(--accent-bg);color:var(--accent);
  }
}

/* ========== OPTION B — ACTION BUTTONS ACCESSIBILITY ========== */
/* Touch devices: always show the play and delete buttons (never hidden),
   make them meet the 44px minimum tap target with padding compensation */
@media (hover:none){
  /* Show all task-row action buttons on touch devices */
  .ta-btn.ta-sub,.ta-btn.ta-star:not(.on){display:flex}
  /* Ensure minimum 44×44 tap area via padding rather than size change
     so the visual button stays 28×28 but the interactive zone is safe */
  .ta-btn{
    min-width:36px;min-height:36px;
    padding:4px;
  }
}

/* Starred indicator: gold left-stripe on the board card */
.board-card.starred-card{border-left-color:#e0a020!important}