/* CARDS */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.card:hover { border-color: var(--border2); } /* No heavy shadows */

.card h2{font-size:18px;font-weight:700;margin:0 0 12px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* TODAY PANEL — the hero of the screen: one card, two static columns (Today | Tomorrow).
   Visually distinct from every other card on the page (thicker border, its own padding rhythm)
   since this is the primary surface, not just another list. Kept tight — this is a scan-and-act
   dashboard, not a document. */
/* 2026-07-19: switched from var(--card) to var(--panel) — this box is now the SHELL around
   the Today/Tomorrow columns, not itself a raised card. The Today column (below) carries the
   --card tone instead, so the page reads in three clear steps: page (--bg) -> shell (--panel)
   -> primary column/daycards (--card/--card2), instead of shell and page being too close in
   tone to tell apart. Same --panel tone as .targets-shell (css/layout.css) on purpose — Targets
   and Tasks read as two peer sections in one calm shell language. */
.today-panel{background:var(--panel);border:1px solid var(--border2);border-radius:14px;padding:16px 18px;margin-bottom:14px;}
/* Two columns, always both rendered — they're the two halves of the plan, and letting one vanish
   when its last task is finished would make the layout jump. Unlike the old Now/Later system,
   these never swap identity or contents based on the clock — Today always means today, Tomorrow
   always means tomorrow (see renderTodayPanel() in ui/tables.js). */
.today-bands{display:flex;gap:18px;align-items:flex-start;}
.today-band{flex:1;min-width:0;}
/* 2026-07-20: 60/40 split — Today is the wider, primary action column; Tomorrow stays
   narrower/quieter, matching how much more attention Today actually needs. flex:3/2 keeps the
   ratio proportional at any panel width instead of hard-coding a % that breaks on resize. */
/* TODAY vs TOMORROW — same type scale, same layout; the only difference is elevation. Today
   is the surface you act on right now, so it gets a raised --card box (the same tone every
   daycard already sits against). Tomorrow stays flush against the shell with a quieter
   (--muted) header, reading as "coming up" rather than equally urgent — without a font-size
   or color change, which would be louder than this calm app wants. */
/* 2026-07-20 revision (round 2): equal width — the 60/40 split left Today's wider column with
   visibly empty horizontal space whenever it had fewer/shorter items than Tomorrow, reading as
   "empty in the middle" rather than dominant. Both columns are open (no box) and now equal
   width; "Today matters more" is carried by position (left, first) and label weight instead. */
.today-band-primary{flex:1;padding:2px 2px 8px;}
.today-band-secondary{flex:1;padding:2px 2px 8px;}
.today-band-secondary .today-band-label{color:var(--muted);}

.today-band-label{display:flex;align-items:baseline;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.today-band-window{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--muted2);text-transform:none;margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;}
.today-band-empty{font-size:13px;color:var(--muted2);padding:8px 2px;}
/* Sub-groups inside a Today/Tomorrow column (Carried / Afternoon / Night / Anytime) — smaller and
   lighter than the column's own header so "Today"/"Tomorrow" clearly stays the dominant label. */
.today-subgroup .today-band-label{font-size:13px;font-weight:600;margin-top:14px;margin-bottom:6px;padding-bottom:4px;}
.today-subgroup .today-band-label:first-child{margin-top:0;}
.today-completed{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);}
.today-completed-toggle{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:2px 0;}
.today-completed-toggle:hover{color:var(--text);}
.today-completed-chevron{font-size:10px;color:var(--muted2);transition:transform 150ms cubic-bezier(0.16,1,0.3,1);display:inline-block;}
.today-completed-toggle.open .today-completed-chevron{transform:rotate(90deg);}
#todayCompletedList{margin-top:8px;}

/* "Next 5 Days" removed 2026-07-20 (round 2) — redundant now that Future Tasks is a permanent
   calendar+list split card; that's the one place to browse anything beyond Tomorrow. */

/* TIME PASSED — plain muted text cue on the flat task row (taskRow()), shown when a task's
   startTime is set and has already gone by today. Deliberately reuses --c-late (the same
   low-stakes attention tone as the Today daycard's "Late" cue) and stays plain text — no badge,
   no background — per the rule that --c-red stays reserved for destructive/error only. */
.trow-time-passed{font-size:11px;color:var(--c-late);font-weight:500;margin-left:6px;white-space:nowrap;}

@media (max-width:860px){.today-bands{flex-direction:column;}}

/* DAY CARD — accent-edge treatment (option C). A solid category-colored block runs down the
   left; the card body stays neutral so the task name reads white and dominant. No background
   tint, no pills, no checkbox — completing is a deliberate act inside the drawer.
   Row 1: [!] name [notes] [time]. Row 2 (optional): plain muted state cues.
   Deliberately NOT named .tcard — that belongs to the target portrait cards in layout.css. */
.daycard{display:flex;align-items:stretch;background:var(--card2);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:7px;cursor:pointer;transition:border-color 150ms cubic-bezier(0.16,1,0.3,1);}
.daycard:hover{border-color:var(--border2);}
/* The edge carries CATEGORY color only — earlier state overrides (amber working / red attention)
   made the stripe mean two things at once. State reads from the cue text instead. */
.daycard-edge{width:5px;flex-shrink:0;}
.daycard-body{flex:1;min-width:0;padding:12px 13px;}
.daycard-done{opacity:.5;}
.daycard-top{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}
/* High-priority indicator. Was a literal "!" character, which read as a typo glued to the front
   of the task name. A solid dot is unambiguously an indicator rather than part of the title. */
.daycard-prio-dot{width:7px;height:7px;border-radius:50%;background:var(--c-late);flex-shrink:0;}
.daycard-name{font-size:19px;font-weight:700;line-height:1.35;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.daycard-name-strike{text-decoration:line-through;color:var(--muted);}
.daycard-note-mark{font-size:11px;flex-shrink:0;opacity:.75;}
.daycard-time{font-size:14px;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap;flex-shrink:0;}
.daycard-time-none{color:var(--muted2);font-style:italic;}
.daycard-cues{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.4;}
.daycard-cues-late{color:var(--c-late);}
/* 3+ day carry escalation — overrides the inherited red from .daycard-cues-late on this span only. */
.daycard-carried-warn{color:var(--c-amber);}
/* Plain-text status line, no card/border/background — same convention as .hdr-greeting/.rr-label. */
/* .today-summary-line removed 2026-07-20 — the "X of Y checklist done · X of Y tasks done ·
   block pending" line was retired, see js/ui/tables.js for why. */

/* TWO-COLUMN SPLIT — Reminders / Tomorrow / Exceptions all used to be full-width single-column
   lists that wasted the entire right half of the page and doubled the scroll. Split down the
   middle (earlier left, later right) so the whole page reads on the same grid as Now/Later. */
.split-cols{display:flex;gap:18px;align-items:flex-start;}
.split-col{flex:1;min-width:0;}
@media (max-width:860px){.split-cols{flex-direction:column;gap:0;}}

/* REMINDER ROW — a flat list line, not a surface: reminders are scheduled alerts, not execution
   cards. Everything sits on ONE line at fixed widths — time | dot | name (flexes) | when | kebab.
   Nothing uses margin-left:auto, which is what previously blew a dead gutter across the middle
   of each row. Height is content-height; no padding beyond what separates the lines. */
/* .rrow* (reminderRow()'s markup) removed 2026-07-20 — its only caller, the Calendar day-detail
   view, switched to the shared taskCardHtml() (.daycard) instead, see js/ui/calendar.js. */
/* .reminders-notify (the old bell button on the Reminders card) removed 2026-07-19 along with
   the card itself — enabling notifications now lives as a plain .trow-menu-item in the ⋯ More menu. */

/* CALENDAR + LIST SPLIT (2026-07-20, round 2) — permanent card, true 50/50: .cal-column (nav +
   grid) and #calDayDetail are both flex:1, so the month label sits directly above its own grid
   instead of floating centered over the whole card while the grid only fills the left half. */
.calendar-split-card{padding:16px 18px;}
.calendar-split-body{display:flex;gap:28px;align-items:flex-start;}
@media (max-width:700px){
  .calendar-split-body{flex-direction:column;}
  /* .cal-day-detail's left-border/padding-left was authored for the side-by-side desktop split —
     once stacked into one column on mobile, a leftover left border read as a stray vertical line
     with everything indented 22px for no reason. Swap to a top border/padding instead, matching
     the new stacked layout. */
  .cal-day-detail{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:16px;margin-top:16px;}
}
.cal-column{flex:1;min-width:0;}

.cal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 14px;}
.cal-month{font-weight:700;font-size:17px;min-width:130px;text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-weekday{color:var(--muted);font-weight:600;font-size:12px;text-align:center;padding:6px 0;text-transform:uppercase;letter-spacing:.04em;}
.cal-day{position:relative;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:8px;cursor:default;transition:background 150ms cubic-bezier(0.16,1,0.3,1);}
.cal-day-num{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
.cal-day-has{cursor:pointer;background:var(--card2);}
.cal-day-has:hover{background:var(--border2);}
.cal-day-today{outline:2px solid var(--c-teal);outline-offset:-2px;}
.cal-day-today .cal-day-num{font-weight:700;}
.cal-day-selected{background:var(--c-blue)!important;}
.cal-day-selected .cal-day-num,.cal-day-selected .cal-dot{color:#fff;}
/* A legible task-count badge, not a bare color dot — shows the actual number so a glance tells
   you both "something's there" and "how much", no color-decoding required. */
.cal-dot{font-size:12px;font-weight:700;color:var(--c-blue);line-height:1;}
.cal-day-detail{flex:1;min-width:0;border-left:1px solid var(--border);padding-left:22px;}
.cal-detail-header{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:10px;}

/* BUTTONS */
.btn { border: 1px solid var(--border); background: var(--card2); color: var(--text); font-size: 13px; padding: 6px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn:hover { background: var(--border2); border-color: var(--text2); }
.btn-done { background: var(--bg2); border-color: var(--c-green); color: var(--c-green); }
.btn-done:hover { background: rgba(93,170,122,0.1); }
.btn-skip{border:1px solid rgba(248,113,113,.2);color:var(--c-red);}.btn-skip:hover{background:rgba(248,113,113,.08);}
.btn-undo{border-color:rgba(251,191,36,.3);color:var(--c-amber);}
.btn-working{border:1px solid rgba(74,154,245,.3);color:var(--c-blue);}.btn-working:hover{background:rgba(74,154,245,.08);}
.btn-cancel{border:1px solid rgba(248,113,113,.2);color:var(--c-red);font-size:12px;}.btn-cancel:hover{background:rgba(248,113,113,.08);}

/* CHECKLIST BLOCKS */
/* 2026-07-20: same --panel "shell" treatment as .today-panel above — the checklist used to sit
   directly on the page background right under the shared KPI header, with nothing marking it as
   its own section. This gives it the same recessed shell tone (page -> shell -> card, same 3-step
   language used everywhere else) plus the .hdr-kpi-bar border-bottom above it (css/layout.css). */
#checklistArea{background:var(--panel);border:1px solid var(--border2);border-radius:14px;padding:14px 16px;}
.cl-block{margin-bottom:10px;background:var(--card2);border-radius:18px;overflow:hidden;border:1px solid var(--border);border-left:5px solid var(--border2);transition:border-color .2s;}
.cl-block[data-block="morning"]{border-left-color:var(--c-amber);}
.cl-block[data-block="afternoon"]{border-left-color:var(--c-blue);}
.cl-block[data-block="night"]{border-left-color:var(--c-purple);}
.cl-block[data-block="sleep"]{border-left-color:var(--c-teal);}
.cl-block-header{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;user-select:none;transition:background .15s;}
.cl-block-header:hover{background:var(--glass-hover);}
/* Calm hover motion — was scale(1.25) rotate(10deg) on the bouncy curve. */
.cl-block-icon{font-size:24px;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.cl-block-header:hover .cl-block-icon{transform:scale(1.05);}
.cl-block-title{font-size:18px;font-weight:700;flex:1;}
.cl-block-stats{display:flex;align-items:center;gap:10px;}
.cl-block-count{font-size:14px;color:var(--muted);font-weight:600;}
.cl-mini-bar{width:70px;height:6px;border-radius:3px;background:var(--border);overflow:hidden;}
.cl-mini-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.cl-mini-dots{display:flex;gap:4px;align-items:center;}
.cl-mini-dot{width:9px;height:9px;border-radius:50%;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.cl-mini-dot:hover{transform:scale(1.3);}
.cl-mini-dot.done{background:var(--c-green);}
.cl-mini-dot.skip{background:var(--muted2);}
.cl-mini-dot.pending{background:var(--border2);}
.cl-chevron{font-size:14px;color:var(--muted);transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);}
.cl-block.collapsed .cl-chevron{transform:rotate(-90deg);}
.cl-block-body{padding:0 20px 12px;overflow:hidden;transition:max-height .35s ease,opacity .25s ease,padding .2s;}
.cl-block.collapsed .cl-block-body{max-height:0!important;opacity:0;padding:0 20px;}

/* CHECKLIST ROWS */
.ck-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.03);transition:all .15s ease;border-radius:10px;}
[data-theme="light"] .ck-row{border-bottom-color:rgba(0,0,0,.03);}
.ck-row:last-child{border-bottom:none;}
.ck-row:hover{background:var(--glass-hover);transform:translateX(3px);}
.ck-row.is-done{opacity:.4;}.ck-row.is-done .ck-title{text-decoration:line-through;}
.ck-row.is-skipped{opacity:.25;}.ck-row.is-skipped .ck-title{text-decoration:line-through;color:var(--c-red);}
.ck-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--card3);transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.ck-row:hover .ck-icon{transform:scale(1.05);}
.ck-info{flex:1;min-width:0;}
.ck-title{font-size:15px;font-weight:500;}
.ck-sub{font-size:12px;color:var(--muted2);}
.ck-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
/* Status-only row + Log button — replaces the always-visible inline time/note inputs and
   Done/Skip buttons that used to sit on every checklist row. */
.ck-status{font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ck-status-done{color:var(--c-green);}
.ck-status-skip,.ck-status-holiday{color:var(--muted2);}
.ck-log-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text2);cursor:pointer;flex-shrink:0;transition:border-color 150ms cubic-bezier(0.16,1,0.3,1),color 150ms cubic-bezier(0.16,1,0.3,1);}
.ck-log-btn:hover{border-color:var(--c-blue);color:var(--c-blue);}

/* Trend chart tooltip — instant on hover, replaces the native `title` attribute (slow default
   delay, unstyled). */
.trend-tooltip{position:fixed;z-index:1000;pointer-events:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.15);font-size:11px;white-space:nowrap;}
.trend-tooltip .tt-date{font-weight:700;color:var(--text);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.trend-tooltip .tt-row{display:flex;align-items:center;gap:6px;color:var(--muted);padding:1px 0;}
.trend-tooltip .tt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ck-actions{display:flex;gap:5px;flex-shrink:0;}
.ck-time{width:80px;padding:6px 7px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text);text-align:center;transition:border-color .15s;}
.ck-time:focus{border-color:var(--c-blue);outline:none;box-shadow:0 0 8px rgba(74,154,245,.15);}
.ck-time:disabled{opacity:1;-webkit-text-fill-color:var(--text);color:var(--text);background:transparent;border-color:transparent;cursor:default;}
.ck-note{width:120px;padding:6px 8px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text);transition:border-color .15s;}
.ck-note:focus{border-color:var(--c-purple);outline:none;box-shadow:0 0 8px rgba(167,139,250,.12);}
.ck-note::placeholder,.ck-time::placeholder{color:var(--muted2);}
select.wtype{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:13px;padding:5px 6px;border-radius:8px;}
.holiday-badge{font-size:11px;padding:3px 8px;border-radius:5px;background:rgba(251,191,36,.1);color:var(--c-amber);border:1px solid rgba(251,191,36,.2);}

/* XP float and level-up toast styles removed with the points system. */

/* NOTIFICATION SYSTEM — toast (passive success), inline (local issue), banner (broader warning). */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:500;color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1000;transition:opacity 200ms cubic-bezier(0.16,1,0.3,1),transform 200ms cubic-bezier(0.16,1,0.3,1);display:flex;align-items:center;gap:14px;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast-success{border-color:rgba(74,222,128,.3);}
.toast-info{border-color:var(--border);}
.toast-undo{padding:8px 10px 8px 18px;}
.toast-action{background:none;border:none;color:var(--c-blue);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background 150ms cubic-bezier(0.16,1,0.3,1);}
.toast-action:hover{background:var(--glass-hover);}

.inline-msg{font-size:11px;padding:4px 0;margin-top:2px;}
.inline-msg-error{color:var(--c-red);}
.inline-msg-warning{color:var(--c-amber);}

.app-banner{display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;font-size:13px;font-weight:500;margin-bottom:12px;border-radius:8px;}
.app-banner-warning{background:rgba(251,191,36,.12);color:var(--c-amber);border:1px solid rgba(251,191,36,.25);}
.app-banner-error{background:rgba(212,90,74,.1);color:var(--c-red);border:1px solid rgba(212,90,74,.25);}
.app-banner-close{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;padding:2px 6px;opacity:.7;}
.app-banner-close:hover{opacity:1;}

/* PATTERNS */
.slip-row{display:flex;align-items:center;gap:12px;padding:6px 0;}
.slip-label{width:150px;font-size:14px;flex-shrink:0;font-weight:500;}
.slip-track{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden;}
.slip-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.slip-count{width:46px;text-align:right;font-size:13px;color:var(--muted);font-weight:500;}

/* TREND CHART */
.trend-pt{transition:transform .15s ease;transform-box:fill-box;transform-origin:center;cursor:pointer;}.trend-pt:hover{transform:scale(2);}

/* TASKS */
.tform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.tform input,.tform select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:14px;padding:10px 14px;border-radius:10px;outline:none;transition:all .15s;}
.tform input:focus,.tform select:focus{border-color:var(--c-blue);box-shadow:0 0 10px rgba(74,154,245,.1);}
.add-btn{background:linear-gradient(135deg,var(--c-blue),var(--c-purple));color:#fff;border:none;font-size:14px;padding:10px 22px;border-radius:10px;font-weight:700;box-shadow:0 4px 14px rgba(74,154,245,.2);transition:all .15s;}
/* Was scale(1.06) + a blue glow shadow — the primary "+Add" button appears on nearly every
   screen (tasks, targets, categories), so its hover motion sets the tone for the whole app. */
.add-btn:hover{transform:translateY(-1px);}
/* .add-btn-full (the old full-width "+ Add task" bar) removed 2026-07-20, round 3 — replaced by
   the inline .header-add-btn in the shared header bar (see below). */
.trow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);position:relative;transition:background .1s;min-width:0;max-width:100%;}
.trow:last-child{border-bottom:none;}
/* Flat category-group divider — a plain muted label, never a card or colored block, so
   grouping reads as structure rather than decoration (POS Design Bible: restraint, no
   surfaces added purely for hierarchy). */
.cat-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px 4px;}
.cat-group-label:first-child{padding-top:2px;}
.tc-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.tc-item:last-child{border-bottom:none;}
.tc-check{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:0;line-height:1;flex-shrink:0;}
.tc-item-done .tc-text{text-decoration:line-through;color:var(--muted);}
.tc-text{flex:1;font-size:13px;color:var(--text);word-break:break-word;}
.tc-del{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px 6px;flex-shrink:0;}
.tc-del:hover{color:var(--c-red);}
.trow-checklist-frac{background:var(--bg2);color:var(--muted);font-weight:600;}
.trow:hover{background:var(--glass-hover);}
.trow-completed{opacity:.55;}
.trow-cancelled{opacity:.45;}
.tname{font-size:14px;font-weight:500;color:var(--text);min-width:0;word-break:break-word;line-height:1.3;}
.tname-strike{text-decoration:line-through;}
.trow-tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
.trow-tag-working{background:rgba(93,170,122,.12);color:var(--c-green);}
.trow-tag-done{background:rgba(93,170,122,.12);color:var(--c-green);}
.trow-tag-cancel{background:rgba(212,90,74,.1);color:var(--c-red);}
.trow-tag-date{background:var(--bg2);color:var(--muted);font-weight:500;}
.trow-prio-high{background:rgba(212,90,74,.1);color:var(--c-red);}
.trow-prio-medium{background:rgba(251,191,36,.12);color:var(--c-amber);}
.trow-prio-low{background:var(--bg2);color:var(--muted);}
.tname-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.trow-note{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow-kebab{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .1s;line-height:1;flex-shrink:0;}
.trow-kebab:hover{background:var(--glass-hover);color:var(--text);}
.trow-menu{display:none!important;}

.trow-menu-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .1s;}
.trow-menu-item:hover{background:var(--glass-hover);}
.trow-menu-item.danger{color:var(--c-red);}
.trow-menu-sep{height:1px;background:var(--border);margin:2px 8px;}
.mini-label{font-size:13px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px;font-weight:700;}.mini-label:first-child{margin-top:0;}

.badge{font-size:12px;padding:4px 10px;border-radius:6px;white-space:nowrap;font-weight:600;}
.status-badge{font-size:11px;padding:3px 9px;border-radius:5px;font-weight:600;}
.status-working{background:rgba(74,154,245,.12);color:var(--c-blue);}
.status-completed{background:rgba(74,222,128,.12);color:var(--c-green);}
.status-cancelled{background:rgba(248,113,113,.1);color:var(--c-red);}
.pulsing-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c-blue);margin-right:5px;animation:pulse 1.5s infinite;}

/* CATEGORIES */
.cat-personal{background:var(--badge-blue-bg);color:var(--badge-blue-text);}
.cat-family{background:var(--badge-purple-bg);color:var(--badge-purple-text);}
.cat-health{background:var(--badge-teal-bg);color:var(--badge-teal-text);}
.cat-nightshift{background:rgba(167,139,250,.08);color:#c4b5fd;}
.cat-bizresearch{background:var(--badge-amber-bg);color:var(--badge-amber-text);}
.cat-learning{background:rgba(34,211,238,.08);color:#67e8f9;}
.cat-blogging{background:var(--badge-pink-bg);color:var(--badge-pink-text);}
[data-theme="light"] .cat-nightshift{background:rgba(124,58,237,.06);color:#6d28d9;}
[data-theme="light"] .cat-learning{background:rgba(8,145,178,.06);color:#0e7490;}
/* Overflow slots for categories added beyond the original 7 defaults — getCatColor() assigns
   one of these deterministically by id so any new category gets a distinct, stable color
   instead of always rendering as "Personal" blue (js/features/categories.js). */
.cat-x1{background:rgba(212,90,74,.1);color:#f87171;}
.cat-x2{background:rgba(201,138,74,.1);color:#fb923c;}
.cat-x3{background:rgba(45,140,167,.1);color:#38bdf8;}
.cat-x4{background:rgba(163,190,71,.1);color:#a3e635;}
[data-theme="light"] .cat-x1{background:rgba(212,90,74,.08);color:#b91c1c;}
[data-theme="light"] .cat-x2{background:rgba(201,138,74,.08);color:#9a5b1f;}
[data-theme="light"] .cat-x3{background:rgba(45,140,167,.08);color:#0369a1;}
[data-theme="light"] .cat-x4{background:rgba(163,190,71,.08);color:#4d7c0f;}
.cat-manager{margin-bottom:12px;}.cat-manager summary{font-size:13px;color:var(--muted);cursor:pointer;font-weight:500;padding:5px 0;}
.cat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.cat-tag{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--card2);transition:border-color 150ms cubic-bezier(0.16,1,0.3,1);}.cat-tag:hover{border-color:var(--border2);}
.cat-tag .remove-cat{background:none;border:none;color:var(--c-red);font-size:12px;opacity:.3;padding:0 2px;}.cat-tag .remove-cat:hover{opacity:1;}
.cat-add-row{display:flex;gap:5px;margin-top:6px;}
.cat-add-row input{flex:1;padding:5px 8px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);}
.cat-add-row button{padding:5px 11px;font-size:13px;border-radius:6px;border:1px solid var(--c-blue);background:none;color:var(--c-blue);}

/* TARGETS */
.target-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.target-form input,.target-form select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:14px;padding:10px 14px;border-radius:10px;outline:none;transition:all .15s;}
.target-form input:focus,.target-form select:focus{border-color:var(--c-teal);box-shadow:0 0 10px rgba(52,211,153,.1);}
.target-row{padding:14px 0;border-bottom:1px solid var(--border);}.target-row:last-child{border-bottom:none;}.target-achieved{opacity:.85;}.target-achieved .target-fill{background:linear-gradient(90deg,var(--c-green),var(--c-teal))!important;}
.trow-arrows{display:flex;flex-direction:column;gap:0;margin-left:auto;margin-right:2px;}
.trow-arrow{background:none;border:none;cursor:pointer;font-size:11px;padding:0 4px;line-height:1.1;color:var(--muted);opacity:.6;transition:opacity .15s;}.trow-arrow:hover{opacity:1;color:var(--c-teal);}
.log-pct-btn{font-size:12px;padding:5px 10px;border-radius:6px;border:1px solid var(--c-teal);background:rgba(93,170,122,.08);color:var(--c-teal);cursor:pointer;transition:background 150ms cubic-bezier(0.16,1,0.3,1);font-weight:500;}.log-pct-btn:hover{background:rgba(93,170,122,.18);}.log-pct-btn.neg{border-color:var(--c-red);background:rgba(248,113,113,.06);color:var(--c-red);}.log-pct-btn.neg:hover{background:rgba(248,113,113,.15);}


.target-log-list{margin-top:6px;padding:6px 8px;background:var(--bg2);border-radius:6px;font-size:11px;color:var(--muted);}

.target-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.target-name{font-size:15px;font-weight:600;}.target-name .target-horizon{font-size:12px;color:var(--muted);font-weight:400;}
.target-count{font-size:14px;color:var(--muted);font-weight:600;}
.target-bar{height:10px;border-radius:5px;background:var(--border);overflow:hidden;margin-bottom:8px;}
.target-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--c-teal),var(--c-green));transition:width .5s ease;}
.target-actions{display:flex;gap:6px;align-items:center;}
.target-actions button{font-size:13px;padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--glass);color:var(--text2);transition:all .12s;font-weight:500;}.target-actions button:hover{transform:scale(1.04);border-color:var(--c-teal);}
.target-actions input{width:60px;padding:5px 6px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:var(--card2);color:var(--text);text-align:center;}
.target-delete{font-size:14px;color:var(--muted2);background:none;border:none;padding:2px 5px;opacity:.3;transition:all .15s;margin-left:auto;}.target-delete:hover{opacity:1;color:var(--c-red);}

/* STALE ARCHIVE */
.stale-card{border:1px solid rgba(251,191,36,.2);background:rgba(251,191,36,.03);}.stale-card h2{color:var(--c-amber);}
.stale-info{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.archive-btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;border:2px solid var(--c-amber);background:none;color:var(--c-amber);transition:all .15s;margin-bottom:10px;}.archive-btn:hover{background:rgba(251,191,36,.1);transform:scale(1.03);}
.stale-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:14px;}.stale-row:last-child{border-bottom:none;}
.stale-date{font-size:12px;color:var(--c-amber);margin-left:auto;}

/* SYNC / MODAL */
.sync-bar{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:12px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap;position:relative;}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sync-dot.local{background:var(--c-amber);box-shadow:0 0 8px rgba(251,191,36,.3);}
.sync-dot.connected{background:var(--c-green);box-shadow:0 0 8px rgba(74,222,128,.3);animation:pulse 2s infinite;}
.sync-dot.error{background:var(--c-red);box-shadow:0 0 8px rgba(212,90,74,.35);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.sync-btn{margin-left:auto;padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--muted);font-size:12px;transition:all .15s;position:relative;z-index:1;}.sync-btn:hover{color:var(--c-blue);border-color:var(--c-blue);}
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.active{display:flex;}
.modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
@keyframes modalIn{from{transform:scale(.9) translateY(12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal h3{font-size:18px;margin-bottom:14px;font-weight:700;}
.modal label{font-size:14px;color:var(--muted);display:block;margin-bottom:5px;}
.modal input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;margin-bottom:14px;outline:none;}.modal input:focus{border-color:var(--c-blue);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
/* .modal-box was used by several existing modals (Postpone, Add Note, Task Checklist, Checklist
   Log) but had no CSS rule anywhere in the app — they rendered as raw unstyled text over the
   dark overlay. Styled to match .modal's card treatment. */
.modal-box{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:24px;width:400px;max-width:90vw;margin:auto;box-shadow:0 16px 48px rgba(0,0,0,0.4);}

/* ADD TASK DRAWER — right-side slide-in, replaces the old always-open inline form */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;z-index:1100;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,0.25);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 220ms cubic-bezier(0.16,1,0.3,1);}
.drawer-overlay.open .drawer{transform:translateX(0);}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.drawer-header h3{font-size:16px;font-weight:700;margin:0;}
.drawer-close{background:none;border:none;font-size:16px;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:6px;transition:background 150ms cubic-bezier(0.16,1,0.3,1);}
.drawer-close:hover{background:var(--card2);}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;}
.drawer-label{font-size:13px;color:var(--muted);display:block;margin-bottom:5px;margin-top:14px;}
.drawer-label:first-child{margin-top:0;}
.drawer-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px;outline:none;}
.drawer-input:focus{border-color:var(--c-blue);}
/* Universal 12-hour AM/PM time input (js/ui/timepicker12h.js) — replaces the native
   <input type="time">, which rendered in 24-hour format on this app's primary setup while every
   other time display in the app is 12-hour/AM-PM. Three plain selects, same visual weight as
   .drawer-input, no popup/overlay. */
.time-picker-12h{display:flex;align-items:center;gap:4px;width:100%;}
.time-picker-12h select{padding:10px 8px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;outline:none;}
.time-picker-12h select:focus{border-color:var(--c-blue);}
.time-picker-12h .tp-hour{flex:1.1;}
.time-picker-12h .tp-min{flex:1.1;}
.time-picker-12h .tp-ampm{flex:1;}
.time-picker-12h .tp-colon{color:var(--muted);font-size:14px;}
.drawer-row{display:flex;gap:12px;align-items:flex-end;}
.drawer-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;padding-bottom:10px;}
/* Section divider inside the drawer — the panel now carries four distinct jobs (status, edit,
   move, notes) and without breaks it reads as one undifferentiated wall of controls. */
.drawer-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
/* Live plain-English echo of which work block a chosen time lands in, so the slot rules are
   visible instead of being knowledge the user has to reverse-engineer from the columns. */
.drawer-hint{font-size:11px;color:var(--muted);margin-top:5px;min-height:14px;}
.drawer-footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border);flex-shrink:0;}
.modal-actions button{padding:8px 18px;border-radius:10px;font-size:14px;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--text);transition:transform .12s;}.modal-actions button:hover{transform:scale(1.04);}
.modal-actions .primary{background:linear-gradient(135deg,var(--c-blue),var(--c-purple));border:none;color:#fff;}
.empty-state{text-align:center;padding:18px;color:var(--muted);font-size:14px;font-style:italic;}

/* RESPONSIVE */
@media(max-width:960px){
  .content-row{flex-direction:column;}
  .rr-streak { background: var(--card); border-radius: 12px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); }
  .pie-sidebar { background: var(--card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .wrap{padding:0 16px 60px;}
  .grid-2,.top-task-row{grid-template-columns:1fr;}
  .tform,.target-form{flex-direction:column;}
  .ck-meta{flex-wrap:wrap;}
  .appheader{padding:16px 16px 12px;}
  .hdr-title{font-size:24px;}
}
@media(max-width:600px){
  html{font-size:14px;}
  .wrap{padding:0 8px 70px;}
  .appheader{padding:10px 8px 8px;flex-wrap:wrap;gap:6px;max-width:100vw;}
  .hdr-title{font-size:18px;}
  .hdr-greeting{font-size:11px;}
  .hdr-right{width:100%;justify-content:space-between;}
  .hdr-av{width:36px;height:36px;font-size:13px;}
  .hdr-notes-btn{width:34px;height:34px;font-size:14px;}
  .theme-btn{padding:6px 10px;font-size:13px;}
  .sync-bar{padding:5px 8px;font-size:11px;gap:4px;flex-wrap:wrap;max-width:100%;}
  .sync-btn{padding:4px 10px;font-size:11px;}
  #notesModal .modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  #notesModal textarea{min-height:60vh!important;}
  .top-task-row{grid-template-columns:1fr!important;gap:8px!important;}
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
  .card h2{font-size:15px;margin-bottom:8px;}
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
  .trow{gap:6px;padding:8px 8px;}
  .tname{font-size:13px;}
  .badge{font-size:9px;padding:2px 5px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .trow-tag{font-size:9px;padding:2px 5px;}
  .trow-arrows{margin-left:0;margin-right:0;}
  .trow-arrow{font-size:10px;padding:0 2px;}
  .trow-kebab{padding:2px 4px;font-size:16px;}
  .tform input[style*="min-width"]{min-width:0!important;}
  .tform input,.tform select{min-width:0;width:100%;}
  .target-form input,.target-form select{min-width:0!important;width:100%;}
  .section-label { font-size: 14px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin: 32px 0 16px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .kpi-row{gap:8px;flex-wrap:wrap;}
  .kpi-chip{padding:6px 10px;}
  .kpi-chip-val{font-size:18px;}
  .kpi-chip-label{font-size:9.5px;}
  /* 2026-07-20 (round 5) — Today/Tomorrow cards, the KPI/toggle header, and the calendar were
     never given phone-specific sizing when they were built/rebuilt over the last several rounds;
     every rule above this point in the file only had one (desktop/tablet) size. Scaled down here,
     matching the density step other rows in this same breakpoint already take (e.g. .tname above
     drops from its desktop size to 13px). */
  .hdr-kpi-bar{margin:8px 0 12px;padding-bottom:12px;}
  .header-add-btn{padding:7px 14px;font-size:12px;}
  .tab-btn{padding:6px 12px;font-size:12px;}
  .today-band-label{font-size:14px;gap:6px;margin-bottom:6px;padding-bottom:6px;}
  .today-band-window{font-size:10px;}
  .daycard-body{padding:9px 10px;}
  .daycard-name{font-size:15px;}
  .daycard-time{font-size:12px;}
  .daycard-cues{font-size:11px;}
  .calendar-split-card{padding:12px;}
  .cal-nav{gap:8px;margin-bottom:10px;}
  .cal-month{min-width:0;font-size:14px;}
  .cal-day{height:44px;}
  .cal-day-num{font-size:15px;}
  .cal-dot{font-size:10px;}
  .cal-detail-header{font-size:13px;}
  .rr-streak { background: var(--card); border-radius: 12px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); }
  .streak-val{font-size:34px!important;}
  .streak-unit{font-size:11px!important;}
  .streak-action{padding:5px 12px;font-size:12px;min-height:32px;}
  /* Checklist rows: stack vertically on mobile */
  
  .ck-icon{width:32px;height:32px;font-size:15px;border-radius:8px;}
  .ck-info{flex:1;min-width:120px;}
  .ck-title{font-size:13px;}
  
  .ck-meta select,.ck-meta input{min-height:30px;font-size:12px;}
  .ck-actions{gap:4px;}
  .ck-actions button{min-height:30px;font-size:12px;padding:4px 10px;}
  .ck-note{font-size:12px;min-height:28px;flex:1;}
  .ck-sub{font-size:11px;}
  .ck-status-badge{font-size:10px!important;padding:2px 6px!important;}
  /* Task rows: single line on mobile */
  .trow{gap:6px;padding:8px 10px;}
  .trow .badge{font-size:10px;padding:2px 6px;flex-shrink:0;}
  .trow .tname{font-size:13px;flex:1;min-width:0;word-break:break-word;line-height:1.3;}
  .trow-tag{font-size:9px!important;padding:2px 5px!important;flex-shrink:0;}
  .tname-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.trow-note{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow-kebab{padding:2px 6px!important;flex-shrink:0;}
  .tform{gap:6px;}
  .tform input,.tform select,.tform button{min-height:38px;font-size:13px;padding:6px 10px;}
  .target-form{gap:6px;}
  .target-form input,.target-form select,.target-form button{min-height:38px;font-size:13px;}
  /* Patterns */
  .grid-2{gap:8px;grid-template-columns:1fr!important;}
  .slip-row{padding:4px 0;}
  .slip-label{font-size:12px;min-width:0;flex:1;}
  .slip-count{font-size:11px;}

  .tab-bar{margin:8px 0;}
  .tab-btn{font-size:13px;padding:8px 12px;}
  .streak-panel{flex-direction:column;gap:8px;padding:8px;}.streak-panel>.streak-card{width:auto;flex-direction:row;gap:10px;padding:10px 14px;}.streak-card .streak-val{font-size:26px;}.streak-panel .target-grid{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:6px;max-width:100%;}.target-pill { border-radius: 12px; background: var(--card); border: 1px solid var(--border); padding: 16px; display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 76px; overflow: hidden; }.target-pill-name{font-size:11px;max-width:none;}.target-pill-pct{font-size:16px;}.target-pill-btn{font-size:8px;padding:2px 5px;}.target-pill-cat{font-size:8px;padding:1px 4px;}
  .view-nav{width:100%;}.view-btn{flex:1;text-align:center;padding:7px 12px;}
  .tcard-achieved{padding:16px 12px 14px;}.streak-panel .tcard.tcard-achieved{min-height:180px;}.tcard-achieved .at-trophy{font-size:26px;}.streak-panel .tcard{min-height:160px;}
  .streak-item .streak-val{font-size:28px;}
  /* Modal */
  .modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 440px; max-width: 90vw; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  .modal h3{font-size:16px;}
  .modal-actions button{padding:8px 14px;font-size:13px;}
  .cat-tag{font-size:11px;padding:3px 8px;}
  .mini-label{font-size:11px;}
  .empty-state{font-size:12px;padding:12px;}
  .add-btn{padding:6px 12px;font-size:13px;min-height:38px;}
}

details.card>summary{padding:0;margin:0;}
details.card>summary::-webkit-details-marker{display:none;}
details.card[open]>summary span::before{content:''}
.mini-label::-webkit-details-marker{display:none;}
#globalMenu{position:fixed;z-index:99999;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.2);display:none;}

/* VIEW NAVIGATION */
.view-nav{display:flex;gap:4px;margin-bottom:16px;padding:3px;background:var(--card);border:1px solid var(--border);border-radius:10px;width:fit-content;}
.view-btn{font-size:13px;font-weight:600;padding:7px 18px;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);}
.view-btn.active{background:var(--text);color:var(--bg);}
.view-btn:hover:not(.active){color:var(--text);}
/* SECTION TITLE - TARGETS */
.section-title-targets{font-size:16px;font-weight:800;color:var(--text);letter-spacing:.08em;text-transform:uppercase;margin:16px 0 8px;padding:0 4px;}
/* VIEW CONTAINERS */
.manage-section{margin-bottom:24px;}
.manage-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.manage-section-title::before{content:'';display:block;width:3px;height:16px;border-radius:2px;flex-shrink:0;}
.manage-section-title.ms-cat::before{background:var(--c-purple);}
.manage-section-title.ms-cl::before{background:var(--c-teal);}
.manage-section-title.ms-tgt::before{background:var(--c-amber);}
.manage-section-title.ms-hist::before{background:var(--c-blue);}
.manage-section-title.ms-trend::before{background:var(--c-green);}
.manage-section-title.ms-aware::before{background:var(--c-blue);}
.manage-section-title.ms-carried::before{background:var(--c-amber);}
.manage-section-title.ms-heat::before{background:var(--c-teal);}
.aware-sublabel{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.manage-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg2);border-radius:6px;margin-bottom:3px;}
.manage-item span.mi-icon{font-size:14px;flex-shrink:0;}
.manage-item span.mi-name{flex:1;font-size:13px;min-width:0;}

/* --- UNIFIED ROW SYSTEM --- */
.uni-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  transition: background 0.15s; min-width: 0;
}
.uni-row:last-child { border-bottom: none; }
.uni-row:hover { background: var(--glass-hover); }
.uni-row.is-done { opacity: 0.55; }
.uni-row.is-done .uni-title { text-decoration: line-through; }

.uni-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; background: var(--bg2);
}
.uni-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.uni-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uni-meta {
  font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.uni-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.uni-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0; justify-content: flex-end;
}
.uni-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 6px; padding: 4px 8px; cursor: pointer; transition: all 0.15s; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.uni-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--border); }
.uni-kebab { font-size: 18px; line-height: 1; padding: 2px 8px; }

/* Mobile Rules */
@media (max-width: 600px) {
  .card { padding: 16px !important; margin-bottom: 16px; }
  .uni-row { padding: 12px 10px; gap: 8px; flex-wrap: wrap; }
  .uni-icon { min-width: 36px; height: 36px; }
  .uni-main { flex: 1 1 calc(100% - 50px); min-width: 150px; }
  .uni-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; gap: 8px; }
  .uni-btn, .uni-kebab, .holiday-badge { min-height: 44px; min-width: 44px; flex: 0 0 auto; }
  .uni-actions input, .uni-actions select { min-height: 44px; font-size: 14px; flex: 1 1 80px; max-width: 100%; width: auto !important; }
  .ck-note { flex: 2 1 120px !important; }

  .ck-row { flex-wrap: wrap; padding-bottom: 12px; }
  .ck-info { flex: 1 1 100%; min-width: 100%; margin-bottom: 4px; }
  .ck-meta { width: 100%; justify-content: flex-start; padding-left: 50px; margin-top: 0; gap: 8px; }
  .ck-actions { margin-left: auto; display: flex; flex: 0 0 auto; }
  .ck-time, .ck-note { flex: 1; min-width: 0; }
}