/* NudgeUp — Global styles
   Dark-mode first, mobile-first, CSS custom properties throughout. */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* NudgeUP-4puxk (CLS): metric-matched fallback for Inter. While the Google Fonts
   webfont is still loading (now non-render-blocking on /auth), text renders in this
   adjusted Arial so its line box / glyph advance match Inter — the font swap then
   causes no reflow (no CLS). Metrics are the published Inter→Arial adjustments. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

/* ── Horizontal-overflow guard (NudgeUP-uuq3) ──
   Defensive net so NOTHING scrolls left/right on mobile. Any element that ends
   up wider than the viewport (a stray 100vw, an un-wrapped flex row, a fixed
   width) is clipped rather than forcing a sideways scroll. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --color-bg:         #0F0E17;
  --color-surface:    #1C1B29;
  --color-surface-2:  #252438;
  --color-border:     #2E2D42;
  --color-primary:    #7C3AED;
  --color-primary-lt: #9B67F5;
  --color-accent:     #06B6D4;
  --color-success:    #10B981;
  --color-danger:     #EF4444;
  --color-warning:    #F59E0B;
  --color-text:       #E8E8F0;
  --color-text-muted: #8E8EA0;
  /* NudgeUP a11y-contrast: legacy `--text-muted` was never defined, so every
     selector using `var(--text-muted, #888)` rendered a hard-coded #888 on ALL
     themes — that fails 4.5:1 on the light themes (theme-white/light-mode/warm).
     Alias it to --color-text-muted so each theme supplies its own AA-passing
     muted value (dark themes already define a light muted; light themes a dark
     one). Verified ≥4.5:1 on every theme's surfaces. Do NOT hard-code a value
     here or it will regress the light themes again. */
  --text-muted:       var(--color-text-muted);
  --color-overlay:    rgba(0,0,0,0.65);
  /* NudgeUP-b7gq: toast-specific tokens — default (dark) theme */
  --toast-bg:         #252438;
  --toast-text:       #E8E8F0;
  --toast-border:     #2E2D42;
  /* NudgeUP-pbhb: a11y focus ring — built on --color-primary so it adapts to
     every theme automatically (each theme overrides --color-primary). */
  --focus-ring:       var(--color-primary, #7C3AED);
  /* NudgeUP-pbhb: link / toggle text color. Slightly brighter than
     --color-primary-lt so it clears 4.5:1 on the elevated input surface
     (--color-surface-2 #252438) as well as the page bg. Light themes override
     this to a darker shade below (html.light-mode / theme-warm). */
  --color-link:       #A98AF8;
  /* NudgeUP-qbc2h a11y (WCAG 1.4.3): accent-as-small-text token. Defaults to
     --color-accent so the 4 dark themes (dark/cosmos/terminal/aurora — all
     ≥6:1) are unchanged, but the 3 LIGHT themes override it to a darker AA
     value below: bright cyan/amber accents fail 4.5:1 as text on pale
     surfaces (light-mode 2.2:1, white 3.1:1, warm 1.9:1). Route accent-coloured
     SMALL TEXT to this token; keep --color-accent for fills/borders/gradients
     (those don't need 4.5:1 and darkening them would shift the palette). */
  --color-accent-text: var(--color-accent);
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        20px;
  --shadow-card:      0 2px 12px rgba(0,0,0,0.35);
  --nav-height:       64px;
  --header-height:    56px;
  /* Floating-button stack (NudgeUP-42cpq): all bottom-right FABs anchor off this
     so they clear the bottom nav and stack vertically instead of overlapping.
     --fab-stack-1 = primary slot (quick-add); --fab-stack-2 = slot above it
     (bug-report). Each FAB ≈52px tall; 12px gap between slots. */
  --fab-stack-1:      calc(env(safe-area-inset-bottom, 0px) + var(--nav-height) + 12px);
  --fab-stack-2:      calc(env(safe-area-inset-bottom, 0px) + var(--nav-height) + 12px + 52px + 12px);
  /* Clearance above the whole 2-high FAB stack — full-width bottom cards that
     would otherwise sit under the FAB column anchor here on mobile so the
     persistent FABs never occlude them (NudgeUP-42cpq). */
  --fab-stack-top:    calc(env(safe-area-inset-bottom, 0px) + var(--nav-height) + 12px + 52px + 12px + 40px + 16px);
  /* Bottom-center toast stack (NudgeUP-iyte6): the transient bottom-center toast
     family (.app-toast, .undo-toast, .streak-toast, .victory-bud-bar) all anchored
     in the same band and overlapped when two showed at once. They now stack off a
     shared base so each occupies its own slot (≈52px tall, 8px gap) above the nav. */
  --toast-base:       calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
  --toast-slot-1:     var(--toast-base);
  --toast-slot-2:     calc(var(--toast-base) + 52px + 8px);
  --toast-slot-3:     calc(var(--toast-base) + (52px + 8px) * 2);
  --toast-slot-4:     calc(var(--toast-base) + (52px + 8px) * 3);
  --font:             'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --content-max:      640px;
  --shadow-elevated:  0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --color-data-orange: #f97316;
  --color-data-cyan:   #06B6D4;
  --color-text-inverse: #fff;
  --color-amber-dark:  #b45309;
  /* NudgeUP-q01a: Smart Daily warm palette tokens. Used only by the Smart Daily
     components (coach header, hero card, stats strip, mini-list, FAB). These are
     additive — they do NOT alter any existing --color-* var or dark-mode theming. */
  --cocoa:      #281408;
  --cream:      #FBF1DE;
  --persimmon:  #D4604A;
  --honey:      #E5A535;
  /* NudgeUP-lz106: Type scale — 6-step scale from 12px (xs) to 20px (xl).
     Readability floor = --text-xs (0.75rem / 12px). No element in the app
     should render readable text below this floor; purely decorative glyphs
     (chevrons, bullets, cursor markers) may stay smaller.
     Use these tokens on NEW selectors; existing px/rem literals are left in
     place to avoid layout churn — migrate incrementally. */
  --text-xs:   0.75rem;   /* 12px — minimum label / badge floor               */
  --text-sm:   0.8125rem; /* 13px — secondary meta, timestamps, muted captions */
  --text-base: 0.9375rem; /* 15px — app body copy (task titles, form fields)  */
  --text-md:   1rem;      /* 16px — standard body / iOS zoom-safe inputs       */
  --text-lg:   1.125rem;  /* 18px — modal titles, section headings             */
  --text-xl:   1.25rem;   /* 20px — view headers, prominent numbers            */
  /* NudgeUP-lz106 / NudgeUP-u7lxk: Z-index scale — single source of truth for
     layering. All modal/overlay/FAB/toast z-index values reference these tokens;
     u7lxk consolidated the previously-hardcoded magic numbers (9999, 9002, 9001,
     8800, 999, 1000, etc.) onto named rungs to prevent future stacking conflicts. */
  --z-base:        1;
  --z-raised:      50;
  --z-sticky:      100;
  --z-dropdown:    149;
  --z-modal:       200;     /* dialogs, sheets, side drawers, popovers           */
  --z-fab:         999;     /* floating action button / pinned chips             */
  --z-fab-label:   1000;    /* FAB tooltips / labels just above the FAB          */
  --z-drawer:      1100;    /* full-screen drawer overlays                       */
  --z-toast:       1500;    /* above modals (200) and drawers (999/1100)         */
  --z-modal-hint:  8800;    /* coachmark hint sitting above modals, below overlay */
  --z-overlay:     9000;    /* coachmark/tour/focus scrims                        */
  --z-spotlight:   9001;    /* tour spotlight cut-out above the overlay          */
  --z-tour:        9002;    /* tour tooltip/skip above the spotlight             */
  --z-intro:       9999;    /* intro carousel, FAB ripple, top-of-onboarding     */
  --z-top:         10000;   /* hard ceiling: portaled popovers, critical modals  */

  /* ── AI / Coach accent (NudgeUP-qtrrq) ──────────────────────────────────────
     THEME-INDEPENDENT on purpose. The same violet→cyan "AI sheen" signals
     "Coach / AI is here" on every one of the 7 themes so the affordance never
     clashes with a theme's own palette. Do NOT override these per-theme — that
     is the whole point. The button LABEL text stays the theme's text color
     (var(--color-text)) for contrast; only the border/glyph/sheen use the
     accent. Keep EXPLAIN affordances (cached/free "what's this?") visually
     distinct from DO affordances by intent, but both share this accent. */
  --ai-accent:        #8B5CF6;                                   /* violet base   */
  --ai-accent-2:      #22D3EE;                                   /* cyan tail     */
  --ai-accent-grad:   linear-gradient(115deg, #8B5CF6 0%, #22D3EE 100%);
  --ai-accent-soft:   rgba(139, 92, 246, 0.12);                  /* tint fill     */
  --ai-accent-border: rgba(139, 92, 246, 0.45);
  /* NudgeUP-slz2q: Transition duration scale — 3 named tokens replace the 9
     ad-hoc speeds (0.1–0.6s) that were scattered across style.css.
       fast  = micro-interactions, checkbox taps, quick fades    (0.15s)
       base  = most UI state changes, hover/focus transitions      (0.2s)
       slow  = sheet/modal open, expanding panels, progress fills  (0.35s)
     Values outside this range (0.1s snappy taps; 0.4–0.6s progress bars)
     are intentional and kept as literals — they would feel wrong if rounded
     to the nearest token. */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.35s;
}

/* ── Light mode overrides ─────────────────────────────────────────────────── */
html.light-mode {
  --color-bg:         #F5F5F7;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #EEEEF5;
  --color-border:     #DDDDE8;
  --color-text:       #1A1A2E;
  /* NudgeUP-1gpgv a11y: #6E6E85 cleared AA only on theme-white; on light-mode's
     pale lilac surfaces (#eee9ff coaching strip, #efeaff for-you-empty, #dcdae6
     vibe-drill) it stalled at 3.6–4.2:1. Darkened to #5C5C72 → ≥4.7:1 on every
     cited surface; raising contrast never regresses other muted text. */
  --color-text-muted: #5C5C72;
  --color-overlay:    rgba(0,0,0,0.5);
  /* NudgeUP-pbhb: darker link on light backgrounds for 4.5:1 contrast.
     NudgeUP-qbc2h: #7C3AED only made 3.91:1 on the purple-tint filter pill;
     #5B21B6 → 6.17:1 on the pill and ≥8:1 on bg/surface. */
  --color-link:       #5B21B6;
  /* NudgeUP-qbc2h a11y: #06B6D4 cyan = 2.2–2.4:1 as text on light surfaces;
     #155E75 clears 4.5:1 (bg 6.67 / surf 7.27 / surf-2 6.29). */
  --color-accent-text: #155E75;
  --shadow-card:      0 2px 12px rgba(0,0,0,0.1);
  --shadow-elevated:  0 8px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  /* NudgeUP-b7gq: high-contrast toast on light bg */
  --toast-bg:         #1A1A2E;
  --toast-text:       #F5F5F7;
  --toast-border:     #DDDDE8;
}

/* ── Named themes ─────────────────────────────────────────────────────────── */

/* Cosmos — deep-space, glassmorphism */
html.theme-cosmos {
  --color-bg:         #050818;
  --color-surface:    rgba(18,10,40,0.75);
  --color-surface-2:  rgba(30,16,64,0.75);
  --color-border:     rgba(155,103,245,0.25);
  --color-primary:    #7C3AED;
  --color-primary-lt: #B07FFF;
  --color-accent:     #22D3EE;
  --color-text:       #E8E8FF;
  --color-text-muted: #9090C0;
  --shadow-card:      0 2px 24px rgba(124,58,237,0.18);
  --shadow-elevated:  0 8px 48px rgba(124,58,237,0.25), 0 2px 8px rgba(0,0,0,0.4);
}

/* Terminal — green-on-black retro CRT */
html.theme-terminal {
  --color-bg:         #000000;
  --color-surface:    #0A0F0A;
  --color-surface-2:  #0F180F;
  --color-border:     #00FF41;
  --color-primary:    #00FF41;
  --color-primary-lt: #39FF6A;
  --color-accent:     #00CCFF;
  --color-success:    #00FF41;
  --color-text:       #00FF41;
  --color-text-muted: #00A02A;
  --color-overlay:    rgba(0,0,0,0.85);
  --radius-sm:        2px;
  --radius-md:        2px;
  --radius-lg:        4px;
  --font:             'Courier New', Courier, monospace;
  --shadow-card:      0 0 12px rgba(0,255,65,0.2);
  --shadow-elevated:  0 0 24px rgba(0,255,65,0.3);
}

/* Aurora — soft violet-pink gradient vibes */
html.theme-aurora {
  --color-bg:         #080B14;
  --color-surface:    #100D1E;
  --color-surface-2:  #180F28;
  --color-border:     #2E2050;
  --color-primary:    #A78BFA;
  --color-primary-lt: #C4B5FD;
  --color-accent:     #F472B6;
  --color-text:       #ECF0FF;
  --color-text-muted: #8080AA;
  --shadow-card:      0 2px 16px rgba(167,139,250,0.15);
  --shadow-elevated:  0 8px 40px rgba(167,139,250,0.2), 0 2px 8px rgba(0,0,0,0.4);
}

/* White Bold — high-contrast light mode */
html.theme-white {
  --color-bg:         #EEE9FF;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F3F0FF;
  --color-border:     #C4B5FD;
  --color-primary:    #5B21B6;
  /* NudgeUP-b7gq: dark pill on light lavender bg */
  --toast-bg:         #0D0D1A;
  --toast-text:       #EEE9FF;
  --toast-border:     #C4B5FD;
  --color-primary-lt: #7C3AED;
  --color-accent:     #0891B2;
  /* NudgeUP-qbc2h a11y: white theme inherited the dark --color-link (#A98AF8 →
     1.7:1 on its pale lavender), and #0891B2 cyan = 3.1:1 as text. Route both
     to AA-tuned values: link = the theme's own deep violet primary (#5B21B6 →
     5.71:1 on the filter pill), accent-text = #155E75 (≥6:1 on bg/surface). */
  --color-link:        #5B21B6;
  --color-accent-text: #155E75;
  --color-text:       #0D0D1A;
  --color-text-muted: #5B5B8A;
  --color-overlay:    rgba(0,0,0,0.5);
  --shadow-card:      0 2px 12px rgba(91,33,182,0.12);
  --shadow-elevated:  0 8px 32px rgba(91,33,182,0.15), 0 2px 8px rgba(0,0,0,0.08);
}

/* Warm Hug — cream + persimmon (matches the marketing landing) — light theme (NudgeUP-flbt) */
html.theme-warm {
  --color-bg:         #FBF1DE;
  --color-surface:    #FFFCF5;
  --color-surface-2:  #F5E2C3;
  --color-border:     rgba(40,20,8,0.14);
  --color-primary:    #D4604A;
  --color-primary-lt: #E07A60;
  /* NudgeUP-pbhb: darker persimmon for link/toggle text — #D4604A fails 4.5:1
     on the cream surfaces; #9E3517 clears it for small text. */
  --color-link:       #9E3517;
  /* NudgeUP-qbc2h a11y (WCAG 1.4.11): warm focus ring inherited --color-primary
     (#D4604A) → only 2.97–3.36:1 on cream/elevated surfaces (fails the 3:1 UI
     threshold on surface-2). Pin it to the deep terracotta link (#9E3517 →
     5.56–6.89:1 across bg/surface/surface-2) so the ring is clearly visible. */
  --focus-ring:       #9E3517;
  --color-accent:     #E5A535;
  /* NudgeUP-qbc2h a11y: amber #E5A535 = 1.7–2.1:1 as text on cream; #7A4E08
     dark amber clears 4.5:1 (bg 6.42 / surf 7.02 / surf-2 5.67). */
  --color-accent-text: #7A4E08;
  --color-text:       #281408;
  /* NudgeUP-1gpgv a11y: #8F6E52 failed 4.5:1 on the warm light surfaces
     (3.4–4.4:1 on #eee9ff/#efeaff/#f1fbf7/#dcdae6). Darkened to #6F5440
     → ≥5.0:1 on every cited surface; pure contrast gain, no regression. */
  --color-text-muted: #6F5440;
  --color-overlay:    rgba(40,20,8,0.5);
  --shadow-card:      0 2px 12px rgba(212,96,74,0.12);
  --shadow-elevated:  0 8px 30px rgba(212,96,74,0.15), 0 2px 8px rgba(40,20,8,0.08);
  /* NudgeUP-b7gq: dark pill on cream bg */
  --toast-bg:         #281408;
  --toast-text:       #FBF1DE;
  --toast-border:     rgba(40,20,8,0.35);
}

/* ── Theme background effects ─────────────────────────────────────────────── */

/* ── Smooth theme transition ──────────────────────────────────────────────── */
html {
  transition: background-color 0.4s ease;
}
/* These elements get cross-fade when theme switches */
.app-header,
.bottom-nav,
.task-card,
.bento-tile,
.profile-card,
.pro-upgrade-card {
  transition:
    background-color var(--transition-slow) ease,
    border-color var(--transition-slow) ease,
    box-shadow var(--transition-slow) ease;
}

/* ── Cosmos theme ─────────────────────────────────────────────────────────── */

/* Nebula glow orbs */
html.theme-cosmos body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(124,58,237,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(6,182,212,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 10%, rgba(244,114,182,0.12) 0%, transparent 60%);
  z-index: 0;
}

/* Star field (JS-generated) */
.cosmos-star-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cosmos-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: star-twinkle var(--tw-dur, 3s) ease-in-out infinite var(--tw-delay, 0s);
}
@keyframes star-twinkle {
  0%, 100% { opacity: var(--tw-hi, 0.7); transform: scale(1); }
  50%       { opacity: var(--tw-lo, 0.2); transform: scale(0.6); }
}

/* Glassmorphism on main surfaces */
html.theme-cosmos .task-card,
html.theme-cosmos .profile-card,
html.theme-cosmos .auth-container,
html.theme-cosmos .modal-sheet,
html.theme-cosmos .pro-upgrade-card,
html.theme-cosmos .app-header,
html.theme-cosmos .bottom-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--color-surface);
}
html.theme-cosmos .app-header {
  border-bottom-color: rgba(155,103,245,0.2);
}
html.theme-cosmos .bottom-nav {
  border-top-color: rgba(155,103,245,0.2);
}

/* Priority dot glow on cosmos task cards */
html.theme-cosmos .task-priority-dot {
  box-shadow: 0 0 6px currentColor;
  filter: brightness(1.3);
}

/* ── Terminal theme ───────────────────────────────────────────────────────── */

/* CRT scanlines */
html.theme-terminal body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,255,65,0.04) 2px,
    rgba(0,255,65,0.04) 4px
  );
  z-index: 0;
}

/* Phosphor glow on text elements */
html.theme-terminal .app-title,
html.theme-terminal .view-header h2,
html.theme-terminal .nav-label {
  text-shadow: 0 0 14px rgba(0,255,65,0.7);
  -webkit-text-fill-color: #00FF41;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
html.theme-terminal .task-title {
  text-shadow: 0 0 8px rgba(0,255,65,0.5);
}
html.theme-terminal .header-streak {
  text-shadow: 0 0 8px rgba(0,255,65,0.6);
}

/* Task row terminal style: left border + cursor marker */
html.theme-terminal .task-card {
  border-left: 3px solid #00FF41;
  border-radius: 2px;
}
@media (hover: hover) {
  html.theme-terminal .task-card:hover {
    background: rgba(0,255,65,0.06);
    box-shadow: 0 0 12px rgba(0,255,65,0.15), inset 0 0 0 1px rgba(0,255,65,0.2);
  }
}
/* ▶ cursor shows on hover inside the left section */
html.theme-terminal .task-card-left::after {
  content: '\25B6';
  display: inline-block;
  color: #00FF41;
  font-size: 0.55rem;
  opacity: 0;
  transition: opacity 0.12s;
  margin-left: 2px;
}
@media (hover: hover) {
  html.theme-terminal .task-card:hover .task-card-left::after { opacity: 1; }
}

/* ── Aurora theme ─────────────────────────────────────────────────────────── */

/* Spinning conic blob — more intense */
@keyframes aurora-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

html.theme-aurora body::before {
  content: '';
  position: fixed;
  width: 160vmax;
  height: 160vmax;
  top: 50%;
  left: 50%;
  margin: -80vmax 0 0 -80vmax;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(167,139,250,0.22) 0deg,
    rgba(244,114,182,0.18) 80deg,
    rgba(34,211,238,0.14) 160deg,
    rgba(167,139,250,0.08) 240deg,
    rgba(244,114,182,0.20) 310deg,
    rgba(167,139,250,0.22) 360deg
  );
  animation: aurora-spin 9s linear infinite;
  z-index: 0;
}

/* Secondary slower counter-spin blob */
html.theme-aurora body::after {
  content: '';
  position: fixed;
  width: 100vmax;
  height: 100vmax;
  top: 50%;
  left: 50%;
  margin: -50vmax 0 0 -50vmax;
  pointer-events: none;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(34,211,238,0.10) 0deg,
    rgba(167,139,250,0.14) 120deg,
    rgba(244,114,182,0.08) 240deg,
    rgba(34,211,238,0.10) 360deg
  );
  animation: aurora-spin 15s linear infinite reverse;
  z-index: 0;
}

/* Glassmorphism on aurora surfaces */
html.theme-aurora .task-card,
html.theme-aurora .modal-sheet,
html.theme-aurora .pro-upgrade-card,
html.theme-aurora .app-header,
html.theme-aurora .bottom-nav {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(14,6,30,0.78);
}
html.theme-aurora .app-header { background: rgba(8,11,20,0.85); border-bottom-color: rgba(167,139,250,0.2); }
html.theme-aurora .bottom-nav { border-top-color: rgba(167,139,250,0.2); }

/* ── White Bold theme ─────────────────────────────────────────────────────── */

/* 2-column bento task grid */
html.theme-white .task-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html.theme-white .task-list .empty-state,
html.theme-white .task-list .task-section-label {
  grid-column: 1 / -1;
}
html.theme-white .task-card {
  border-radius: var(--radius-md);
  box-shadow: 0 2px 20px rgba(91,33,182,0.1), 0 1px 4px rgba(0,0,0,0.06);
}
html.theme-white .task-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) {
  html.theme-white .task-card:hover {
    box-shadow: 0 4px 28px rgba(91,33,182,0.18);
    transform: translateY(-1px);
  }
}
html.theme-white .app-header {
  background: #fff;
  box-shadow: 0 2px 16px rgba(91,33,182,0.08);
  border-bottom: none;
}
html.theme-white .bottom-nav {
  background: #fff;
  box-shadow: 0 -2px 16px rgba(91,33,182,0.08);
  border-top: none;
}

/* ── Theme swatch picker ──────────────────────────────────────────────────── */
.theme-picker {
  padding: 16px 0 4px;
}
.theme-picker-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.theme-swatches {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.theme-swatch-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}
.theme-swatch:hover .theme-swatch-dot {
  transform: scale(1.1);
}
.theme-swatch.active .theme-swatch-dot {
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 2px var(--color-primary-lt);
}
.theme-swatch-name {
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.65rem to floor */
  color: var(--color-text-muted);
  font-weight: 600;
}
.theme-swatch.active .theme-swatch-name {
  color: var(--color-primary-lt);
  font-weight: 700;
}
/* Swatch dot gradients — half background / half accent colour */
.theme-swatch[data-theme="dark"]     .theme-swatch-dot { background: linear-gradient(135deg, #0F0E17 50%, #7C3AED 50%); }
.theme-swatch[data-theme="light"]    .theme-swatch-dot { background: linear-gradient(135deg, #F5F5F7 50%, #7C3AED 50%); }
.theme-swatch[data-theme="cosmos"]   .theme-swatch-dot { background: linear-gradient(135deg, #050818 50%, #B07FFF 50%); }
.theme-swatch[data-theme="terminal"] .theme-swatch-dot { background: linear-gradient(135deg, #000000 50%, #00FF41 50%); }
.theme-swatch[data-theme="aurora"]   .theme-swatch-dot { background: linear-gradient(135deg, #080B14 50%, #F472B6 50%); }
.theme-swatch[data-theme="white"]    .theme-swatch-dot { background: linear-gradient(135deg, #EEE9FF 50%, #5B21B6 50%); }
.theme-swatch[data-theme="warm"]     .theme-swatch-dot { background: linear-gradient(135deg, #FBF1DE 50%, #D4604A 50%); }

/* ── Bento stat tiles (Cosmos, Aurora & White themes) ───────────────────────── */
.bento-stats {
  display: none;
  gap: 12px;
  margin-bottom: 16px;
}
html.theme-cosmos .bento-stats,
html.theme-aurora .bento-stats,
html.theme-white  .bento-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bento-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-card);
}
/* Cosmos: glassmorphism on bento tiles */
html.theme-cosmos .bento-tile {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* White Bold: gradient bento tiles */
html.theme-white .bento-tile-primary {
  background: linear-gradient(135deg, #FF2D95 0%, #FF6B00 100%);
  border-color: transparent;
  color: #fff;
}
html.theme-white .bento-tile-accent {
  background: linear-gradient(135deg, #2D9CFF 0%, #7C3AED 100%);
  border-color: transparent;
  color: #fff;
}
html.theme-white .bento-tile-primary .bento-tile-value,
html.theme-white .bento-tile-accent  .bento-tile-value { color: #fff; }
html.theme-white .bento-tile-primary .bento-tile-label,
html.theme-white .bento-tile-accent  .bento-tile-label { color: rgba(255,255,255,0.8); }
/* Aurora: gradient accent on tiles */
html.theme-aurora .bento-tile-primary {
  background: linear-gradient(135deg, rgba(167,139,250,0.2) 0%, rgba(244,114,182,0.15) 100%);
  border-color: rgba(167,139,250,0.3);
}
html.theme-aurora .bento-tile-accent {
  background: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(34,211,238,0.12) 100%);
  border-color: rgba(244,114,182,0.25);
}
.bento-tile-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-lt);
  line-height: 1;
}
.bento-tile-label {
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.68rem to floor */
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link, var(--color-primary-lt)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Thin scrollbar for dark UX */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── NudgeUP-cbvrq: iOS Safari zoom-on-focus guard ─────────────────────────
   iOS Safari auto-zooms whenever a focused text field has font-size < 16px.
   kp9f1 fixed the landing form; this is the in-app equivalent. On mobile
   widths, force every text-entry control to >=16px regardless of any class
   or inline override (e.g. #cs-detail's inline 13px, .input fields with no
   font-size, small support/survey textareas). !important is required to win
   over inline styles. Excludes checkbox/radio (replaced elements, no zoom). */
@media (max-width: 480px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

.hidden { display: none !important; }
.muted  { color: var(--color-text-muted); font-size: 0.875rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 12px rgba(124,58,237,0.3);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.btn-primary:hover:not(:disabled)    { opacity: 0.9; box-shadow: 0 4px 20px rgba(124,58,237,0.4); box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.btn-primary:disabled                { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ── Loading button utility (NudgeUP-juir) ──────────────────────────────────── */
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }
.btn-loading {
  position: relative;
  pointer-events: none;
  padding-right: 36px !important; /* make room for spinner */
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}
/* Secondary/outline buttons use a dark spinner */
.btn-secondary.btn-loading::after,
.btn-sm.btn-loading::after,
.vibe-mode-btn.btn-loading::after {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--color-primary);
}

.btn-secondary {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
}
.btn-secondary:hover { background: var(--color-surface); }

.btn-danger {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
}
.btn-danger:hover { background: rgba(239,68,68,0.1); }

.btn-link {
  background: none;
  border: none;
  color: var(--color-link, var(--color-primary-lt));
  font-size: 0.875rem;
  padding: 8px 0;
  width: 100%;
  min-height: 44px; /* WCAG 2.5.8 tap target (NudgeUP-j9hu5) */
  text-align: center;
}
.btn-link:hover { text-decoration: underline; }

/* ── Ghost button (NudgeUP-05dzu) — transparent, themed border/text ──────── */
.btn-ghost {
  padding: 12px;
  background: transparent;
  color: var(--color-primary-lt, var(--color-primary));
  border: 1px solid var(--color-primary-lt, var(--color-primary));
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Full-width button modifier ──────────────────────────────────────────── */
.btn-full { width: 100%; display: block; }

/* Hide Apple Sign-In until the Supabase Apple provider is configured (NudgeUP-y7bpb).
   `.btn-apple`'s display:flex overrides the bare `hidden` attribute, so force it.
   TO RESTORE when bead 6502w lands: remove this rule + the `hidden` attr in auth.html. */
.btn-apple[hidden] { display: none !important; }
.btn-apple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 10px;
  background: #fff;
  color: #000;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-apple:hover { background: #f0f0f0; }
.btn-apple:active { background: #e0e0e0; }
html.light-mode .btn-apple,
html.theme-white .btn-apple { background: #000; color: #fff; border-color: #000; }
html.light-mode .btn-apple:hover,
html.theme-white .btn-apple:hover { background: #1a1a1a; }
html.light-mode .btn-apple:active,
html.theme-white .btn-apple:active { background: #333; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-google:hover { background: #f8f8f8; box-shadow: 0 1px 6px rgba(0,0,0,0.12); }
.btn-google:active { background: #f1f1f1; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.btn-link-sm {
  background: none;
  border: none;
  color: var(--color-accent-text); /* NudgeUP-qbc2h a11y: AA text on light themes */
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
}

.btn-add {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 600;
}
.btn-add:hover { background: var(--color-primary-lt); }

.icon-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  /* NudgeUP-iyte6: 44×44 tap floor is enforced in the mobile-touch-targets
     block below (NudgeUP-4f9k7) — no override needed here. */
}
.icon-btn:hover { background: var(--color-surface-2); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }

.field input,
.field select,
.field textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 12px 14px;
  font-size: 1rem;
  width: 100%;
  transition: border-color var(--transition-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-muted); }
.field select option { background: var(--color-surface-2); }

/* ── .form-input — standalone themed input/select/textarea (NudgeUP-05dzu) ─
   Used outside of .field wrapper (modals, quick-actions, etc.)             */
.form-input {
  display: block;
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--font);
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-input option        { background: var(--color-surface-2); color: var(--color-text); }
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.field-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.field-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.field-check label { font-size: 0.9rem; cursor: pointer; }

/* ── Task bud picker (T-1) ────────────────────────────────────────────────── */
.task-bud-picker {
  margin: -12px 0 16px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.task-bud-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.task-bud-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--color-text);
}
.task-bud-chip.selected {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.12);
  color: var(--color-primary);
}
.task-bud-chip-check { font-size: 0.7rem; opacity: 0; transition: opacity 0.1s; }
.task-bud-chip.selected .task-bud-chip-check { opacity: 1; }
.task-bud-empty {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.task-bud-empty a { color: var(--color-accent-text); text-decoration: underline; cursor: pointer; } /* NudgeUP-qbc2h a11y */

/* ── Task notes toggle (NudgeUP-3ffaj) ───────────────────────────────────── */
.task-notes-wrap { margin-bottom: 16px; }
.btn-toggle-notes {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--color-primary-lt, var(--color-primary));
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
  line-height: 1.4;
}
.btn-toggle-notes:hover { text-decoration: underline; }
.btn-toggle-notes-icon {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--transition-fast) ease;
}
.btn-toggle-notes[aria-expanded="true"] .btn-toggle-notes-icon {
  transform: rotate(45deg);
}
.task-notes-field { margin-top: 8px; }
.task-notes-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 16px; /* >=16px to avoid iOS Safari zoom-on-focus (NudgeUP-yz4e1) */
  resize: vertical;
  min-height: 72px;
}
.task-notes-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lt, rgba(var(--color-primary-rgb, 99,102,241),0.25));
}
.task-notes-field textarea::placeholder { color: var(--color-text-muted); }
/* NudgeUP-9vz1n: voice mic inside the notes field — relative wrapper + room for
   the absolutely-positioned mic (reuses .brain-dump-mic styling). */
.task-notes-input-row { position: relative; }
.task-notes-input-row textarea { padding-right: 44px; }

/* ── Alert ────────────────────────────────────────────────────────────────── */
.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-bottom: 16px;
}
.alert-error   { background: rgba(239,68,68,0.15);  color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }
.alert-info    { background: rgba(6,182,212,0.15);  color: #67E8F9; border: 1px solid rgba(6,182,212,0.3); }
.alert-success { background: rgba(34,197,94,0.15);  color: #86EFAC; border: 1px solid rgba(34,197,94,0.3); }
.alert-warning { background: rgba(234,179,8,0.15);  color: #FDE047; border: 1px solid rgba(234,179,8,0.3); }
/* Light-mode alert text is dark-enough to read on tinted backgrounds */
html.light-mode .alert-error,
html.theme-white .alert-error,
html.theme-warm  .alert-error   { color: #b91c1c; }
html.light-mode .alert-info,
html.theme-white .alert-info,
html.theme-warm  .alert-info    { color: #0369a1; }
html.light-mode .alert-success,
html.theme-white .alert-success,
html.theme-warm  .alert-success { color: #15803d; }
html.light-mode .alert-warning,
html.theme-white .alert-warning,
html.theme-warm  .alert-warning { color: #92400e; }

/* ── AUTH PAGE ────────────────────────────────────────────────────────────── */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh; /* dvh excludes soft keyboard on iOS/Android */
  padding: 20px 12px;
  position: relative;
  overflow: hidden;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.08); }
}
.auth-body::before {
  content: '';
  position: fixed;
  top: -30vh; left: -20vw;
  width: 70vw; height: 70vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,0.22) 0%, transparent 70%);
  animation: glow-pulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.auth-body::after {
  content: '';
  position: fixed;
  bottom: -20vh; right: -15vw;
  width: 60vw; height: 60vw;
  max-width: 500px; max-height: 500px;
  background: radial-gradient(circle, rgba(6,182,212,0.16) 0%, transparent 70%);
  animation: glow-pulse 8s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}
.auth-container { position: relative; z-index: 1; }

.auth-container {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(124,58,237,0.06);
  /* NudgeUP-4puxk (CLS): reserve the login-panel height so the initial auth-state
     resolution (loading → form / signed-in banner) and the login⇄register tab swap
     don't reflow the card. min-height never clips the taller register form. */
  min-height: 560px;
}

/* Referral invite banner (NudgeUP-twt13) — shown above logo when arriving via ?ref= or ?bud= */
.referral-invite-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(155,103,245,0.15), rgba(6,182,212,0.10));
  border: 1px solid rgba(155,103,245,0.30);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: left;
}
.referral-invite-banner.hidden { display: none; }
.referral-invite-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.referral-invite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.referral-invite-msg {
  flex: 1;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}
.referral-invite-msg strong { color: var(--color-primary-lt); }

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.logo-icon {
  font-size: 3rem;
  display: block;
  filter: drop-shadow(0 0 10px rgba(124,58,237,0.5));
}
.logo-text {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #7C3AED;   /* Onzy brand violet */
  margin: 4px 0 0;   /* reset default <h1> margins — element is now an h1 (a11y) */
  line-height: 1.2;
}
.logo-tagline { color: var(--color-text-muted); font-size: 0.95rem; margin-top: 6px; }

.auth-tabs {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}
.tab-btn {
  flex: 1;
  padding: 10px;
  min-height: 44px; /* WCAG 2.5.8 tap target (NudgeUP-j9hu5) */
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.tab-btn.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-lt));
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

.auth-form { display: flex; flex-direction: column; }

/* Already-signed-in banner (NudgeUP-j9g0) */
.auth-signed-in-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--color-surface-2, #1e1e2e);
  border-radius: 16px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  text-align: center;
  margin-bottom: 16px;
}
.auth-signed-in-icon { font-size: 2rem; }
.auth-signed-in-msg  { font-size: 0.95rem; margin: 0; }
.auth-signed-in-sub  { font-size: 0.8rem; color: var(--color-text-muted, #888); margin: 0; }
.auth-signed-in-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.auth-signed-in-open { text-align: center; text-decoration: none; }

/* App transition skeleton — bridges the auth→/app blank flash (NudgeUP-xtmf) */
.auth-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg, #14141f);
  animation: auth-transition-fade 0.2s ease-out;
}
.auth-transition-overlay.hidden { display: none; }
@keyframes auth-transition-fade { from { opacity: 0; } to { opacity: 1; } }
.auth-transition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 360px;
}
.auth-transition-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-border, rgba(255,255,255,0.12));
  border-top-color: var(--color-primary, #7c3aed);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.auth-transition-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.auth-transition-skeleton .skel-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    var(--color-surface-2, #1e1e2e) 25%,
    var(--color-surface-3, #26263a) 37%,
    var(--color-surface-2, #1e1e2e) 63%
  );
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.auth-transition-skeleton .skel-line-lg { width: 80%; }
.auth-transition-skeleton .skel-line-md { width: 60%; }
.auth-transition-skeleton .skel-line-sm { width: 40%; }
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.auth-transition-msg {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
}
@media (prefers-reduced-motion: reduce) {
  .auth-transition-overlay { animation: none; }
  .auth-transition-spinner { animation-duration: 1.4s; }
  .auth-transition-skeleton .skel-line { animation: none; }
}

/* "Continue as …" returning-user hint (NudgeUP-q0dn) */
.last-method-hint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.last-method-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 6px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-2, #1e1e2e);
  border: 1px solid var(--color-primary, #6c5ce7);
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text, #fff);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.last-method-btn:hover { background: var(--color-surface-3, #26263a); }
.last-method-label { color: var(--color-text-muted, #888); }
.last-method-email { font-weight: 700; }
.last-method-via   { width: 100%; text-align: center; font-size: 0.78rem; color: var(--color-text-muted, #888); }
.last-method-dismiss {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG 2.5.8 tap target (NudgeUP-j9hu5) */
  padding: 0 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-muted, #888);
  text-decoration: underline;
  opacity: 0.85;
}
.last-method-dismiss:hover { opacity: 1; }

/* Password visibility toggle */
.pw-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-field input {
  flex: 1;
  padding-right: 58px; /* make room for toggle button */
}
.pw-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 14px;
  height: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-link, var(--color-primary));
  transition: color var(--transition-fast);
  user-select: none;
}
.pw-toggle:hover { color: var(--color-primary-lt); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Confirm / reset notices */
.confirm-notice {
  text-align: center;
  padding: 32px 16px;
}
.confirm-icon { font-size: 3rem; margin-bottom: 12px; }
.confirm-notice h3 { font-size: 1.25rem; margin-bottom: 8px; }
.confirm-notice p  { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 4px; }

/* ── APP LAYOUT ───────────────────────────────────────────────────────────── */
.app-body {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* dvh excludes soft keyboard on iOS/Android */
  overflow: hidden;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
}
/* Gradient accent line under header */
.app-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 60%, transparent 100%);
  opacity: 0.6;
}
.header-left { display: flex; align-items: center; gap: 8px; }
.logo-icon-sm { display: flex; align-items: center; }
.app-title { font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary-lt), var(--color-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.header-right { display: flex; gap: 4px; align-items: center; }

/* ── Header user name ────────────────────────────────────────────────────── */
.header-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ── Header streak badge ──────────────────────────────────────────────────── */
.header-streak {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 20px;
  padding: 2px 8px 2px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #F97316;
  line-height: 1;
  transition: opacity var(--transition-slow);
}
html.theme-terminal .header-streak {
  color: #00FF41;
  background: rgba(0,255,65,0.08);
  border-color: rgba(0,255,65,0.3);
}
.header-streak-flame { font-size: 0.9rem; line-height: 1; }
.header-streak-count { font-size: 0.8rem; font-weight: 700; }

/* ── Theme palette quick-access button ───────────────────────────────────── */
.theme-palette-btn { font-size: 1rem; }

/* ── Theme quick panel (floating) ────────────────────────────────────────── */
.theme-quick-panel {
  position: absolute;
  top: calc(var(--header-height) + 6px);
  right: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-elevated);
  z-index: var(--z-modal);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.theme-quick-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
html.theme-cosmos .theme-quick-panel,
html.theme-aurora .theme-quick-panel {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.theme-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-quick-btn {
  position: relative;  /* NudgeUP-enzud: anchor for .tq-streak-badge overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 6px 4px;
  color: var(--color-text-muted);
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.64rem to floor */
  font-weight: 600;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.theme-quick-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.theme-quick-btn.active {
  border-color: var(--color-primary-lt);
  color: var(--color-primary-lt);
  background: rgba(124,58,237,0.08);
}
.tq-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: block;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.theme-quick-btn.active .tq-dot {
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.3);
  transform: scale(1.1);
}
/* NudgeUP-enzud: streak-locked theme button (Pro users who haven't hit the streak yet) */
.theme-quick-btn.streak-locked {
  opacity: 0.55;
  cursor: pointer;
}
.theme-quick-btn.streak-locked:hover {
  opacity: 0.8;
  background: var(--color-surface-2);
}
.theme-quick-btn.streak-locked .tq-dot {
  filter: grayscale(0.4);
}
.tq-streak-badge {
  /* NudgeUP-enzud: overlay the badge on the button corner instead of pushing height */
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.58rem;
  color: var(--color-text-muted);
  font-weight: 700;
  line-height: 1;
}
/* NudgeUP-enzud: streak-locked voice tile (within Pro) */
.coach-aura-tile.voice-streak-locked {
  opacity: 0.55;
  cursor: pointer;
}
.coach-aura-tile.voice-streak-locked:hover {
  border-color: var(--color-primary);
  opacity: 0.75;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* NudgeUP-uuq3: no sideways scroll inside the content area */
  padding: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
}

/* ── Views ────────────────────────────────────────────────────────────────── */
.view { padding: 16px; }
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.view-header h2 { font-size: 1.25rem; font-weight: 700; }

/* view-header-actions: groups theme toggle + sign-out icon */
.view-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* NudgeUP-y48uv: the .header-signout-btn ruleset was removed along with its
   element (#btn-signout-header) — the Profile sticky-header sign-out icon was a
   redundant third sign-out trigger. */

/* Sign-out confirmation sheet (NudgeUP-j9g0) */
.modal-sheet-sm { max-width: 380px; padding-bottom: 24px; }
.modal-sheet-sm .modal-title { font-size: 1.1rem; margin-bottom: 6px; }

/* ── Bottom nav ───────────────────────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.7rem to floor */
  font-weight: 600;
  transition: color var(--transition-fast);
  position: relative;
}
.nav-btn.active { color: var(--color-primary-lt); }
/* Active pip indicator — animated version in aehc section at end of file */
.nav-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }
.nav-icon svg { transition: transform var(--transition-fast); }
.nav-btn.active .nav-icon svg { transform: scale(1.1); }

/* ── Day plan banner ──────────────────────────────────────────────────────── */
.day-plan-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(6,182,212,0.15));
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}
.day-plan-banner > span { flex: 1; }
.day-plan-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
}
.day-plan-dismiss:hover { color: var(--color-text); }

/* ── For You AI preview chip (NudgeUP-ekzn) ─────────────────────────────── */
.for-you-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,0.13), rgba(99,102,241,0.09));
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 0.875rem;
  animation: slideDown 0.25s ease;
}
.for-you-chip-icon { font-size: 1rem; flex-shrink: 0; }
.for-you-chip-msg {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-text);
}
.for-you-chip-cta {
  flex-shrink: 0;
  background: var(--color-primary, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.for-you-chip-cta:hover { opacity: 0.85; }
.for-you-chip-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.for-you-chip-dismiss:hover { color: var(--color-text); }

/* ── Task time estimation (NudgeUP-vjbi) ──────────────────────────────────── */
.task-estimate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 24px;
}
.task-estimate-row.hidden { display: none; }
.task-estimate-chip {
  font-size: 0.8rem;
  color: var(--accent, #9b67f5);
  font-weight: 600;
  background: rgba(155,103,245,0.1);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}
.task-estimate-accept {
  font-size: 0.75rem;
  background: none;
  border: 1px solid var(--accent, #9b67f5);
  color: var(--accent, #9b67f5);
  border-radius: 99px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.task-estimate-accept:hover { background: var(--accent, #9b67f5); color: #fff; }
.task-estimate-accept.hidden { display: none; }
.task-estimate-accept:disabled { opacity: 0.6; cursor: default; }

/* NudgeUP-jmtl6: prominent "Today ≈ Xh planned" load banner (time-blindness aid) */
.task-daily-total {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--accent, #9b67f5);
  font-weight: 700;
  padding: 5px 11px;
  margin: 6px 0 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #9b67f5) 12%, transparent);
}
/* Amber "heavy day" state once the planned total crosses the overload threshold */
.task-daily-total.overloaded {
  color: var(--color-warn, #b45309);
  background: color-mix(in srgb, var(--color-warn, #f59e0b) 16%, transparent);
}
.task-daily-total.hidden { display: none; }

/* Estimate insight badge in Profile (NudgeUP-0o49) */
.estimate-insight {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  padding: 8px 0 4px;
}
.estimate-insight.hidden { display: none; }

/* Estimate calibration insight card (NudgeUP-r5jxm — Pro + ADHD Mode) */
.estimate-calibration { margin: 4px 0 8px; }
.estimate-calibration.hidden { display: none; }
.estimate-calibration-card {
  background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 28%, transparent);
  border-radius: var(--radius-lg, 12px);
  padding: 11px 14px;
}
.estimate-calibration-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.estimate-calibration-icon { font-size: 1rem; flex-shrink: 0; }
.estimate-calibration-title {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.estimate-calibration-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-text, #6366f1); /* NudgeUP-qbc2h a11y */
  background: color-mix(in srgb, var(--color-accent, #6366f1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 30%, transparent);
  border-radius: 4px;
  padding: 2px 5px;
}
.estimate-calibration-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  margin: 0;
  line-height: 1.45;
}

/* ── For You section (NudgeUP-x84) ───────────────────────────────────────── */
.for-you-section { margin-bottom: 16px; }
.for-you-section.hidden { display: none; }

/* NudgeUP-9vdjy: single calm, collapsible "For you" coaching strip */
.coaching-strip { margin-bottom: 14px; }
.coaching-strip.hidden { display: none; }
.coaching-strip-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 2px;
  margin-bottom: 6px;
  cursor: pointer;
  color: var(--text-muted, #888);
  font: inherit;
}
.coaching-strip-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.coaching-strip-chevron {
  font-size: 0.8rem;
  transition: transform var(--transition-base) ease;
}
.coaching-strip-toggle[aria-expanded="false"] .coaching-strip-chevron {
  transform: rotate(-90deg);
}
.coaching-strip-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.coaching-strip.collapsed .coaching-strip-body { display: none; }
.for-you-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.for-you-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
}
.for-you-refresh {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color var(--transition-fast), transform var(--transition-slow);
}
.for-you-refresh:hover { color: var(--accent, #9B67F5); }
.for-you-refresh.spinning { animation: spin 0.6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

.for-you-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.for-you-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 12px);
  padding: 12px 14px;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s;
  text-align: left;
  width: 100%;
}
.for-you-card:hover { background: var(--card-hover, rgba(155,103,245,0.08)); transform: translateY(-1px); }
.for-you-card:active { transform: translateY(0); }
.for-you-card-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.for-you-card-body { flex: 1; min-width: 0; }
.for-you-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text, #fff);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.for-you-card-text {
  font-size: 0.78rem;
  color: var(--text-muted, #999);
  line-height: 1.4;
  margin-bottom: 6px;
}
.for-you-card-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent, #9B67F5);
}
/* NudgeUP-6kqw: "+ Add as task" one-tap chip */
.for-you-add-task-chip {
  align-self: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #9B67F5);
  border: 1px solid var(--accent, #9B67F5);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}
.for-you-add-task-chip:hover {
  background: var(--accent, #9B67F5);
  color: #fff;
}
.for-you-skeleton {
  height: 72px;
  border-radius: var(--radius-sm, 12px);
  background: linear-gradient(90deg, var(--card-bg, rgba(255,255,255,0.05)) 25%, var(--border, rgba(255,255,255,0.1)) 50%, var(--card-bg, rgba(255,255,255,0.05)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* NudgeUP-p0rd: For You empty + error states */
.for-you-empty,
.for-you-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border-radius: var(--radius-sm, 12px);
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  text-align: center;
}
.for-you-empty-icon { font-size: 26px; line-height: 1; }
.for-you-empty-text,
.for-you-error-text {
  font-size: 0.82rem;
  color: var(--text-muted, #888);
  margin: 0;
  line-height: 1.4;
}
.for-you-retry-btn {
  margin-top: 4px;
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  /* NudgeUP-hoe24 a11y: was `var(--accent, #9B67F5)` — but --accent is undefined
     so it rendered the bright #9B67F5 literal, which fails 4.5:1 with white text
     on the light themes. Reuse the .btn-primary gradient (--color-primary →
     --color-primary-lt, each AA-tuned per theme) so the retry CTA matches every
     other primary button and clears contrast on all 7 themes. */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.for-you-retry-btn:hover { opacity: 0.85; }
.for-you-retry-btn:active { opacity: 0.7; }

/* ── Filters ──────────────────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.filter-btn {
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.filter-btn.active {
  background: rgba(124,58,237,0.2);
  border-color: var(--color-primary);
  /* NudgeUP-qbc2h a11y (WCAG 1.4.3): --color-primary-lt only made 4.42:1 on the
     composited purple-tint pill in dark, and 1.9–3.9:1 on the light themes.
     --color-link is the per-theme AA-tuned text token (dark/cosmos/terminal/
     aurora 6.0–6.8:1; light-mode/white #5B21B6 ≥5.7:1; warm #9E3517 4.69:1). */
  color: var(--color-link);
}

/* ── Task search bar (improvement I) ─────────────────────────────────────── */
.task-search-bar {
  position: relative;
  margin-bottom: 12px;
}
.task-search-bar::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cline x1='13.5' y1='13.5' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.task-search-input {
  width: 100%;
  padding: 8px 36px 8px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.task-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.task-search-input::placeholder { color: var(--color-text-muted); }
.task-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.task-search-clear:hover { color: var(--color-text); }
.task-search-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding: 32px 0;
}
.task-search-empty em { font-style: italic; }
.task-search-empty .btn-link { display: block; margin-top: 10px; font-size: 0.875rem; }

/* ── Inline quick-add (NudgeUP-2pq9l) ───────────────────────────────────────
   Fast capture row pinned above the task list. Type a title + Enter. */
.inline-quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.inline-quick-add:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.inline-quick-add-plus {
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.inline-quick-add-input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 16px; /* >=16px to avoid iOS Safari zoom-on-focus (NudgeUP-cbvrq) */
  box-sizing: border-box;
}
.inline-quick-add-input:focus { outline: none; }
.inline-quick-add-input::placeholder { color: var(--color-text-muted); }
.inline-quick-add-submit {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 16px;
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform 0.05s;
}
.inline-quick-add-submit:hover { opacity: 0.92; }
.inline-quick-add-submit:active { transform: scale(0.97); }
.inline-quick-add-submit:disabled { opacity: 0.5; cursor: default; }
.inline-quick-add-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* NudgeUP-4lp0d: wrapper so the NL hint sits outside the flex row */
.inline-quick-add-wrap { display: flex; flex-direction: column; }

/* NudgeUP-4lp0d: NL date parse hint — shown below the quick-add input */
.nl-date-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 12px 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.nl-date-hint.hidden { display: none; }
.nl-date-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px dashed var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  opacity: 0.85;
}
.nl-date-hint-chip:hover { background: var(--color-primary); color: #fff; opacity: 1; }
.nl-date-hint-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.6;
}
.nl-date-hint-dismiss:hover { opacity: 1; }

/* Brief highlight when a freshly-added task scrolls into view (NudgeUP-2pq9l) */
@keyframes task-just-added-flash {
  0%   { background: rgba(124,58,237,0.18); }
  100% { background: transparent; }
}
/* NudgeUP-vgfq5: the flash now also lands on Smart Daily hero/mini rows, since a
   newly-added active task renders there (not as a .task-card). */
.task-card--just-added,
.smart-hero-card.task-card--just-added,
.smart-mini-row.task-card--just-added {
  animation: task-just-added-flash 1.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .task-card--just-added,
  .smart-hero-card.task-card--just-added,
  .smart-mini-row.task-card--just-added { animation: none; }
}

/* ── Pull-to-refresh indicator (NudgeUP-khsai) ───────────────────────────── */
.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  transition: height var(--transition-base) ease, opacity var(--transition-base) ease;
  opacity: 0;
  color: var(--accent, #9B67F5);
}
.ptr-indicator.ptr-pulling {
  height: 48px;
  opacity: 0.6;
}
.ptr-indicator.ptr-ready {
  height: 48px;
  opacity: 1;
}
.ptr-indicator.ptr-loading {
  height: 48px;
  opacity: 1;
}
.ptr-spinner {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast) ease;
}
.ptr-indicator.ptr-loading .ptr-spinner {
  animation: ptr-spin 0.75s linear infinite;
}
@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* Prevent rubber-band bounce while pulling; contain scroll within task container */
#view-tasks {
  overscroll-behavior-y: contain;
}

/* ── Task cards ───────────────────────────────────────────────────────────── */
.task-list { display: flex; flex-direction: column; gap: 10px; }

/* Task section labels ("📌 Today · 3 remaining") */
.task-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: 8px 2px 2px;
}
.task-section-label .section-count {
  background: var(--color-surface-2);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.67rem to floor */
  color: var(--color-text-muted);
}
html.theme-cosmos .task-section-label { color: rgba(176,127,255,0.7); }
html.theme-terminal .task-section-label { color: rgba(0,255,65,0.6); letter-spacing: 0.1em; }
html.theme-aurora .task-section-label { color: rgba(167,139,250,0.65); }

.task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 14px 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s, box-shadow var(--transition-fast), border-color var(--transition-fast);
  /* Skip off-screen rendering for scroll performance (NudgeUP-dgksp) */
  content-visibility: auto;
  contain-intrinsic-size: 0 72px;
}
/* Priority left-border accent colors */
.task-card[data-priority="high"]   { border-left-color: var(--color-danger); }
.task-card[data-priority="medium"] { border-left-color: var(--color-warning); }
.task-card[data-priority="low"]    { border-left-color: var(--color-border); }
@media (hover: hover) {
  .task-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.45); }
}
.task-card:active { transform: scale(0.99); }
/* NudgeUP-8py76: lift paint containment while any in-card overlay is open so
   absolutely-positioned children (e.g. .est-add-opts) are not clipped. */
.task-card.overlay-open { content-visibility: visible; }
/* NudgeUP-8od5u: the active-task hero/mini cards (and their swipe wraps) use
   overflow:hidden, which clips the upward-opening estimate popover. While the
   popover is open, JS adds .overlay-open to the rendered card + .task-swipe-wrap
   ancestor; allow the panel to overflow above the card. */
.smart-hero-card.overlay-open,
.smart-mini-row.overlay-open,
.task-swipe-wrap.overlay-open { overflow: visible; }

.task-check {
  width: 40px; height: 40px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: none;
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: -8px;
  transition: all var(--transition-fast);
}
.task-check.checked {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
/* NudgeUP-kz9vi: clearer "tap to un-complete" affordance on a completed check.
   The ↺ glyph is hidden by default and swaps in for the ✓ on hover/focus so
   it's obvious the circle is tappable to undo. */
.task-check-undo { display: none; font-size: 0.95rem; line-height: 1; }
.task-check.checked:hover .task-check-mark,
.task-check.checked:focus-visible .task-check-mark { display: none; }
.task-check.checked:hover .task-check-undo,
.task-check.checked:focus-visible .task-check-undo { display: inline; }
.task-check.checked:hover,
.task-check.checked:focus-visible {
  background: var(--color-bg, #fff);
  color: var(--color-success);
}
/* Explicit text "Undo" button shown in the right rail of completed cards. */
.btn-task-undo {
  display: inline-flex; align-items: center; gap: 4px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-task-undo:hover,
.btn-task-undo:focus-visible {
  color: var(--color-success);
  border-color: var(--color-success);
}

.task-card-body { flex: 1; min-width: 0; }
.task-title { font-size: 0.95rem; font-weight: 600; word-break: break-word; }
.task-title.done { text-decoration: line-through; color: var(--color-text-muted); }

/* sabn: .task-done — strikethrough + fade for completed tasks in All view */
/* NudgeUP-g94o0: text-decoration itself is not animatable cross-browser.
   Technique: draw line-through with transparent color first, then animate
   text-decoration-color in via @keyframes — works in all major browsers. */
.task-done .task-title {
  text-decoration: line-through;
  text-decoration-color: var(--color-success, #10B981);
  opacity: 0.6;
  transition: opacity var(--transition-slow) ease;
  animation: task-strikethrough 0.35s ease forwards;
}
@keyframes task-strikethrough {
  from { text-decoration-color: transparent; }
  to   { text-decoration-color: var(--color-success, #10B981); }
}
.task-done-header { cursor: pointer; user-select: none; }
.task-done-header:hover { opacity: 0.85; }
.task-done-chevron { margin-left: auto; font-size: 0.65rem; transition: transform var(--transition-base) ease; }
.task-done-list { display: flex; flex-direction: column; gap: 10px; }
.task-done-list.task-done-collapsed { display: none; }

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.task-category, .task-due {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: 4px;
  padding: 2px 7px;
}
/* NudgeUP-lf54e: clamp long custom category names so they don't push sibling meta chips off-screen */
.task-category {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-badge-acct {
  font-size: 0.75rem;
  color: var(--color-accent-text); /* NudgeUP-qbc2h a11y */
  background: rgba(6,182,212,0.12);
  border-radius: 4px;
  padding: 2px 7px;
}

/* NudgeUP-esfml: consistent task-row anatomy ─────────────────────────────────
   Title row hosts an optional subtask progress ring beside the title.
   Meta row hosts a priority dot + color-coded relative due + plan + notes. */
.task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-title-row .task-title { flex: 1; min-width: 0; }

/* Priority dot — replaces the old wordy priority chip in the meta row */
.task-priority-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}
.task-priority-dot.priority-high   { background: #EF4444; }
.task-priority-dot.priority-medium { background: #F59E0B; }
.task-priority-dot.priority-low    { background: #9CA3AF; }

/* Color-coded relative due chips */
.task-due.due-future { color: var(--color-text-muted); background: var(--color-surface-2); }
.task-due.due-today  { background: rgba(245,158,11,0.15); color: #FBB040; }

/* Plan-to-work-on chip */
.task-scheduled {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: 4px;
  padding: 2px 7px;
}

/* Notes indicator — small glyph only shown when notes exist */
.task-notes-ind {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1;
  align-self: center;
}

/* Subtask progress ring — only rendered for tasks that HAVE subtasks
   (never a demotivating 0% ring on a plain task) */
/* NudgeUP-w6w63: wrapper keeps ring + N/M badge inline, both vertically centred */
.task-progress-ring-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.task-progress-ring {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.task-progress-ring::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
}
.task-progress-ring { position: relative; }
.task-progress-ring-label {
  position: relative;
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.55rem to floor */
  font-weight: 700;
  color: var(--color-text);
}
/* NudgeUP-w6w63: persistent step count badge — "N/M" always visible next to ring */
.task-step-count-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
}
.task-step-count-badge--done {
  color: var(--color-primary);
}

/* Energy-fit badge (NudgeUP-wo01) */
.task-energy-badge {
  font-size: 0.72rem;
  border-radius: 4px;
  padding: 2px 7px;
}
.task-energy-badge.energy-match {
  color: #34D399;
  background: rgba(16,185,129,0.15);
}
.task-energy-badge.energy-mismatch {
  color: #FBB040;
  background: rgba(245,158,11,0.15);
}

/* Recurrence badge (NudgeUP-exexc) */
.task-recurrence-badge {
  font-size: 0.72rem;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.15);
}
/* "Done · spawned" meta note shown on completed recurring tasks */
.task-spawned-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Category chip colour variants */
.task-category[data-cat="think"]      { background: rgba(139,92,246,0.15); color: #A78BFA; }
.task-category[data-cat="move"]       { background: rgba(16,185,129,0.15); color: #34D399; }
.task-category[data-cat="connect"]    { background: rgba(6,182,212,0.15);  color: #22D3EE; }
.task-category[data-cat="quick_win"]  { background: rgba(245,158,11,0.15); color: #FBB040; }
.task-category[data-cat="deep_focus"] { background: rgba(124,58,237,0.15); color: #9B67F5; }
.task-category[data-cat="low_gear"]   { background: rgba(107,114,128,0.15); color: #9CA3AF; }

/* Overdue date — red tint + pill badge + card left border (H) */
.task-due.overdue { background: rgba(239,68,68,0.15); color: #FCA5A5; }
.task-card-overdue { border-left: 3px solid rgba(239,68,68,0.6); }
.overdue-label {
  display: inline-block;
  font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.62rem to floor */
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  background: rgba(239,68,68,0.18);
  color: #F87171;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Task completion animation */
@keyframes task-complete {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.task-check.just-completed { animation: task-complete 0.35s ease; }

/* NudgeUP-wn7u5: completion celebration — checkmark "draw" + earned spark.
   check-draw is applied by _celebrateTaskCompletion on every completion;
   the .task-check-mark inside it bounces in as if being drawn. The spark nodes
   (.task-spark) are created by _sparkBurst for scheduled/committed tasks only.
   All motion is JS-gated behind prefersReducedMotion — these classes are never
   added and spark nodes never created when the user prefers reduced motion.
   Transform/opacity only — no layout thrash. */
@keyframes task-check-draw {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.2);  opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.task-check.check-draw .task-check-mark {
  display: inline-block;
  animation: task-check-draw 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-spark {
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-success, #10B981);
  pointer-events: none;
  z-index: 9500;           /* above cards (5000) but below max-z modals */
  opacity: 1;
  animation: task-spark-fly 0.48s ease-out forwards;
}
@keyframes task-spark-fly {
  from { transform: translate(0, 0) scale(1);   opacity: 1; }
  to   { transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.3); opacity: 0; }
}

/* Task card done fade */
.task-card.fading-done {
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.task-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.drag-handle {
  font-size: 1rem;
  color: var(--color-border);
  cursor: grab;
  user-select: none;
  line-height: 1;
  padding: 2px 4px;
}
.drag-handle:active { cursor: grabbing; }

.task-card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.task-priority-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}

.task-action-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  line-height: 1;
  color: var(--color-text-muted);
  transition: background 0.1s;
}
.task-action-btn:hover { background: var(--color-surface-2); }
.task-action-btn--delete { color: rgba(239,68,68,0.7); }
.task-action-btn--delete:hover { background: rgba(239,68,68,0.12); color: rgb(239,68,68); }

/* ── Drag states ──────────────────────────────────────────────────────────── */
.task-card.dragging {
  opacity: 0.4;
  box-shadow: none;
}
.task-card.drag-over {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.1);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}
.empty-icon { font-size: 3rem; margin-bottom: 12px; display: flex; justify-content: center; }
.empty-state p { margin-bottom: 6px; }
.empty-state p:not(.muted) { font-size: 1rem; }

/* ── Coming soon ──────────────────────────────────────────────────────────── */
.coming-soon {
  text-align: center;
  padding: 48px 16px;
}
.coming-soon-icon { font-size: 3rem; margin-bottom: 16px; }
.coming-soon h3   { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
.coming-soon p    { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 8px; }
.badge-pill {
  display: inline-block;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.4);
  color: var(--color-primary-lt);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 8px;
}

/* ── Profile ──────────────────────────────────────────────────────────────── */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.profile-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}
.profile-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.profile-name-row  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-name      { font-size: 0.95rem; font-weight: 600; }
.profile-email     { font-size: 0.75rem; color: var(--color-text-muted, #888); margin-top: 1px; }
.profile-nudge-id {
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--color-primary-lt);
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: monospace;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.profile-nudge-id:hover { background: rgba(124,58,237,0.2); }
.profile-avatar-initials {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
.profile-tier      {
  display: inline-block;
  margin-top: 0;
  font-size: 0.7rem;
  background: rgba(124,58,237,0.2);
  color: var(--color-primary-lt);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
}
/* NudgeUP-mmnm3: tappable tier badge for active trial — pulse ring to hint interactivity */
.profile-tier--tappable {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(6,182,212,0.2));
  outline: 1.5px solid rgba(124,58,237,0.4);
  transition: box-shadow var(--transition-fast) ease, outline-color var(--transition-fast) ease;
}
.profile-tier--tappable:hover,
.profile-tier--tappable:focus-visible {
  box-shadow: 0 0 0 3px rgba(124,58,237,0.3);
  outline-color: rgba(124,58,237,0.7);
}
.profile-actions { display: flex; flex-direction: column; gap: 12px; }

/* ── Me page stats mini row (Option B) ─────────────────────────────────────── */
.me-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.me-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  text-align: center;
}
.me-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-lt);
  line-height: 1.2;
}
.me-stat-lbl {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
/* NudgeUP-17n3u: skeleton shimmer while stat data loads (prevents 0→number flash) */
.me-stat-num.me-stat-skeleton {
  color: transparent;
  border-radius: 6px;
  min-width: 2ch;
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: me-stat-shimmer 1.4s ease-in-out infinite;
  user-select: none;
}
@keyframes me-stat-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Me page iOS-style settings list rows (Option B) ─────────────────────── */
.profile-list-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 4px;
}
.profile-list-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.12s ease;
  font-family: inherit;
}
.profile-list-row:last-child { border-bottom: none; }
.profile-list-row:hover,
.profile-list-row:active { background: var(--color-surface-2, rgba(255,255,255,0.04)); }
.profile-list-row-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.profile-list-row-label { flex: 1; }
.profile-list-row-chev { flex-shrink: 0; color: var(--color-text-muted); }

/* Sign-out text link */
.profile-signout-link {
  display: block;
  width: 100%;
  padding: 12px 4px 20px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-danger, #dc2626);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s ease;
  font-family: inherit;
}
.profile-signout-link:hover { opacity: 1; }

/* ── Me page sticky header + fixed action bar (NudgeUP-fjuc) ──────────────── */

/* Sticky profile card — stays at top of .app-main scroll container */
.profile-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  padding: 16px 16px 0;
  margin: -16px -16px 0; /* cancel .view padding so it spans full width */
  border-bottom: 1px solid var(--color-border);
}
.profile-sticky-header .view-header {
  margin-bottom: 12px;
}
.profile-sticky-header .profile-card {
  margin-bottom: 12px;
}

/* Scrollable middle body */
.profile-scroll-body {
  padding-top: 16px;
  padding-bottom: calc(var(--nav-height) + 24px + env(safe-area-inset-bottom, 0px));
}
/* When settings sub-view is open the fixed back-button bar needs extra clearance */
.profile-scroll-body.settings-open {
  padding-bottom: calc(var(--nav-height) + 68px + env(safe-area-inset-bottom, 0px));
}

/* Fixed bottom action bar — pinned above mobile tab nav */
.profile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
/* Desktop: no mobile tab nav, and the content column is the centered/sidebar-
   offset #view-profile — its left edge and width vary with the viewport, so a
   position:fixed bar with a static left/width cannot track it.
   NudgeUP-j8qc0: on desktop, let the bar flow in-document as the last block of
   #view-profile. It then inherits the column's exact width and the .view
   horizontal padding, so the three rows line up flush under the cards above
   with no horizontal overflow at any desktop width. */
@media (min-width: 768px) {
  .profile-action-bar {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    z-index: auto;
    /* In-document at the column edges: cancel the bar's own h-padding so the
       buttons span the full .view content box and align with the cards. */
    margin: 8px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border);
    box-shadow: none;
    background: transparent;
  }
  /* Scroll body no longer needs to clear a fixed bar (bar is in flow now). */
  .profile-scroll-body {
    padding-bottom: 16px;
  }
  /* Sticky header: cancel the .view padding-left/right increase;
     suppress the generic .view-header padding-top inside it */
  .profile-sticky-header {
    margin: -24px -24px 0;
    padding: 24px 24px 0;
  }
  .profile-sticky-header .view-header {
    padding-top: 0;
  }
}
/* 1280px+ sticky header padding matches the wider .view padding */
@media (min-width: 1280px) {
  /* Sticky header: cancel the wider .view padding at 1280px+ */
  .profile-sticky-header {
    margin: -24px -32px 0;
    padding: 24px 32px 0;
  }
}

/* ── Upgrade / pricing ────────────────────────────────────────────────────── */
.upgrade-success {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(16,185,129,0.15);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: 0.9rem;
  text-align: center;
}

.upgrade-section  { margin-top: 24px; }
.upgrade-heading  {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.pricing-cards {
  display: flex;
  gap: 12px;
}

.pricing-card {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.pricing-card-featured {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.08);
}

.pricing-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-card-name {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.pricing-card-price {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-lt);
  line-height: 1;
}
.pricing-card-price span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  flex: 1;
}
.pricing-features li {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 3px 0;
}
.pricing-features li::before {
  content: '\2713 ';
  color: var(--color-success);
  font-weight: 700;
}

.btn-upgrade {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 50%, var(--color-accent) 100%);
  background-size: 200% 100%;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  margin-top: auto;
  transition: background-position 0.4s ease, box-shadow var(--transition-base), transform 0.1s;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
  letter-spacing: 0.01em;
}
/* Terminal: solid accent border button instead of gradient */
html.theme-terminal .btn-upgrade {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 12px rgba(0,255,65,0.25);
}
html.theme-terminal .btn-upgrade:hover:not(:disabled) {
  background: rgba(0,255,65,0.1);
  box-shadow: 0 0 20px rgba(0,255,65,0.4);
}
.btn-upgrade:hover:not(:disabled) {
  background-position: 100% 0;
  box-shadow: 0 6px 28px rgba(124,58,237,0.55);
  transform: translateY(-1px);
}
.btn-upgrade:active:not(:disabled) { transform: translateY(0); }
.btn-upgrade:disabled { opacity: 0.6; cursor: not-allowed; }

.manage-section { margin-top: 24px; }

/* ── Self-service portal link (NudgeUP-99hm) ────────────────────────────── */
.manage-portal-row {
  margin-bottom: 12px;
}
.btn-manage-subscription {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--accent, #9B67F5);
  border-radius: var(--radius-md, 10px);
  color: var(--accent, #9B67F5);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.btn-manage-subscription:hover { background: rgba(155,103,245,0.08); }
.btn-manage-subscription:active { opacity: 0.75; }
.btn-manage-subscription:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-manage-subscription-mailto { font-weight: 600; }

/* ── Manage card (NudgeUP-urx) ───────────────────────────────────────────── */
.manage-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.manage-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border);
}
.manage-card-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.manage-card-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(16,185,129,0.15);
  color: var(--color-success);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.manage-card-status.paused {
  background: rgba(245,158,11,0.15);
  color: var(--color-warning);
}
.manage-card-actions {
  display: flex;
}
.manage-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: 60px;
}
.manage-action-btn:last-child { border-right: none; }
.manage-action-btn:hover { background: var(--color-surface-2); }
.manage-action-btn:active { background: var(--color-border); }
.manage-action-icon { font-size: 1.1rem; }
.manage-action-danger { color: var(--color-danger, #ef4444); }
.manage-action-danger:hover { background: rgba(239,68,68,0.08); }

/* ── Paused banner ───────────────────────────────────────────────────────── */
.paused-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(234,179,8,0.1);
  border: 1px solid rgba(234,179,8,0.3);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.paused-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.paused-banner-icon { font-size: 1.3rem; flex-shrink: 0; }
.paused-banner-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}
.paused-banner-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.btn-text-primary {
  background: none;
  border: none;
  color: var(--color-primary, #7c3aed);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.btn-text-primary:hover { background: rgba(124,58,237,0.08); }
.btn-sm { font-size: 0.8rem; padding: 5px 10px; }

/* ── Pause duration picker cards ─────────────────────────────────────────── */
.pause-duration-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.pause-duration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 8px 14px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.1s;
}
.pause-duration-card:hover {
  border-color: var(--color-primary, #7c3aed);
  background: rgba(124,58,237,0.05);
}
.pause-duration-card:active { transform: scale(0.97); }
.pause-duration-card.selected {
  border-color: var(--color-primary, #7c3aed);
  background: rgba(124,58,237,0.1);
}
.pause-duration-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary, #7c3aed);
  line-height: 1;
}
.pause-duration-unit {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.pause-duration-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-align: center;
  line-height: 1.3;
}
.pause-step-cancel {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 16px;
}

/* ── Pause reason chips ──────────────────────────────────────────────────── */
.pause-reason-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.pause-reason-chip {
  padding: 14px 10px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.1s;
  text-align: center;
}
.pause-reason-chip:hover {
  border-color: var(--color-primary, #7c3aed);
  background: rgba(124,58,237,0.05);
}
.pause-reason-chip:active { transform: scale(0.97); }
.pause-reason-chip.selected {
  border-color: var(--color-primary, #7c3aed);
  background: rgba(124,58,237,0.1);
}

/* ── Pause confirm step ──────────────────────────────────────────────────── */
.pause-confirm-body {
  text-align: center;
  padding: 20px 0 10px;
}
.pause-confirm-icon { font-size: 2.5rem; margin-bottom: 12px; }
.pause-step { display: flex; flex-direction: column; }

/* ── Spinner (reusable) ──────────────────────────────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary, #7c3aed);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 16px auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pro upgrade card ────────────────────────────────────────────────────── */
.pro-upgrade-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px 18px 18px;
  box-shadow: 0 4px 32px rgba(124,58,237,0.2), 0 2px 16px rgba(0,0,0,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  position: relative;
  overflow: hidden;
}
.pro-upgrade-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(155,103,245,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.pro-upgrade-header { text-align: center; margin-bottom: 20px; }
.pro-sparkle { font-size: 2rem; display: block; margin-bottom: 4px; }
.pro-upgrade-title  { font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin-bottom: 3px; }
.pro-upgrade-tagline { font-size: 0.82rem; color: var(--color-text-muted); }

.pro-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
}
.pro-features-list li {
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.pro-features-list li:last-child { border-bottom: none; }

.plan-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.plan-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.plan-option.plan-selected {
  border-color: var(--color-primary);
  background: rgba(124, 58, 237, 0.06);
}
.plan-radio { display: none; }

.plan-option-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.plan-option-name  { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.plan-option-price { font-size: 0.95rem; font-weight: 700; color: var(--color-text); }
.plan-option-unit  { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }

.plan-option-badge { min-width: 74px; text-align: right; font-size: 0.72rem; font-weight: 600; }
.plan-save-badge   { color: var(--color-success); }
.plan-best-badge {
  background: linear-gradient(135deg, #9B67F5, #06B6D4);
  color: #fff;
  padding: 2px 9px;
  border-radius: 50px;
  font-size: 0.68rem;
}

.plan-billing-note { text-align: center; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 14px; }
.plan-trial-note   { text-align: center; font-size: 0.76rem; color: var(--color-text-muted); margin-top: 8px; }

.legal-links {
  margin-top: 20px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.legal-links a { color: var(--color-text-muted); text-decoration: underline; }
.legal-links a:hover { color: var(--color-primary-lt); }

/* ── Modal / bottom sheet ─────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes sheet-spring {
  0%   { transform: translateY(100%); }
  60%  { transform: translateY(-4px); }
  80%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.modal-sheet {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* §5 ku9q2: don't let a sheet overscroll trigger the page pull-to-refresh */
  animation: sheet-spring 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-handle {
  width: 48px; height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  margin: 0 auto 20px;
  opacity: 0.7;
}
.modal-sheet h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; }
/* ── Modal header / title / close / body tokens (NudgeUP-05dzu) ─────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
}
.modal-close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.modal-body {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.modal-actions  { display: flex; gap: 12px; margin-top: 8px; }
.modal-actions .btn-secondary { flex: 1; }
.modal-actions .btn-primary   { flex: 2; }
/* Sign-out confirm sheet (NudgeUP-j9g0): 3 buttons incl. a long "Sign out of all
   devices" label — stack them vertically, full-width, so nothing wraps mid-word. */
#modal-signout-confirm .modal-actions { flex-direction: column; gap: 8px; }
#modal-signout-confirm .modal-actions > button {
  flex: none;
  width: 100%;
  white-space: nowrap;
}
.modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: var(--shadow-elevated);
}

/* ── NudgeBuds ────────────────────────────────────────────────────────────── */
.bud-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-bottom: 12px;
}
.bud-count-cap { color: var(--color-warning, #f59e0b); font-weight: 600; }

/* Sort bar (NudgeUP-ssvf) */
.bud-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bud-sort-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.bud-sort-select {
  font-size: 0.78rem;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  outline-offset: 2px;
}
.bud-sort-select:focus { outline: 2px solid var(--color-primary, #9B67F5); }

/* ── Reset order chip (NudgeUP-jp08) ─────────────────────────────────────── */
.bud-sort-reset {
  font-size: 0.78rem;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  outline-offset: 2px;
}
.bud-sort-reset:hover {
  color: var(--color-text);
  border-color: var(--color-primary, #9B67F5);
}
.bud-sort-reset:focus { outline: 2px solid var(--color-primary, #9B67F5); }

/* ── Leaderboard header (NudgeUP-buns) ───────────────────────────────────── */
.bud-sort-bar { flex-wrap: wrap; }
.bud-leaderboard-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
}
.lb-my-streak-label {
  color: var(--color-text-muted);
}
.lb-my-streak-val {
  font-weight: 600;
  color: var(--color-text);
}
.lb-my-rank-chip {
  background: var(--color-primary, #9B67F5);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 4px;
}

/* ── Rank badge per bud card (NudgeUP-buns) ──────────────────────────────── */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-alt, #f3f0ff);
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  flex-shrink: 0;
  align-self: center;
}
.rank-crown {
  font-size: 1.1rem;
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  border-color: #ffb300;
  box-shadow: 0 0 6px rgba(255, 200, 0, 0.5);
  color: transparent; /* emoji colour handled by OS */
}
.rank-silver {
  font-size: 1.1rem;
  background: linear-gradient(135deg, #e8e8e8 0%, #c0c0c0 100%);
  border-color: #c0c0c0;
}
.rank-bronze {
  font-size: 1.1rem;
  background: linear-gradient(135deg, #f0c080 0%, #cd7f32 100%);
  border-color: #cd7f32;
}

.bud-list { display: flex; flex-direction: column; gap: 10px; }

.bud-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  box-shadow: var(--shadow-card);
}

.bud-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
}

/* Initial-letter avatar (NudgeUP-9byu item 2) */
.bud-avatar-initial {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  user-select: none;
}

.bud-active-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: var(--color-success, #10b981);
  border-radius: 50%;
  border: 2px solid var(--color-surface, #fff);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.4);
}

.bud-info { flex: 1; min-width: 0; }
.bud-name { font-size: 0.95rem; font-weight: 600; word-break: break-word; overflow-wrap: anywhere; } /* NudgeUP-iyte6: long display names no longer overflow the bud card at 360px */
.bud-nudge-id {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: monospace;
  margin-top: 2px;
}

.bud-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
  margin-top: 6px;
}
.bud-status.active      { background: rgba(16,185,129,0.15); color: var(--color-success); }
.bud-status.pending-in  { background: rgba(245,158,11,0.15);  color: var(--color-warning); }
.bud-status.pending-out { background: var(--color-surface-2); color: var(--color-text-muted); }

.bud-card-actions { display: flex; gap: 8px; margin-top: 10px; }

.bud-combined-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-warning);
  background: rgba(245,158,11,0.12);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* Elevated streak badge (NudgeUP-9byu item 3 + 50hh) */
.streak-badge-combined {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 24px;
  padding: 4px 12px;
  margin-top: 8px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 8px rgba(245,158,11,0.25);
  line-height: 1.2;
}

/* Bud streak + last-active meta row (NudgeUP-yrjw) */
.bud-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.bud-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.13);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.bud-streak-badge.bud-streak-none {
  color: var(--color-text-muted);
  background: var(--color-surface-2, rgba(255,255,255,0.06));
  font-weight: 400;
}
.bud-last-active {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* Active-today state — green dot + green text (NudgeUP-nkyx) */
.bud-last-active.bud-last-active-today {
  color: var(--color-success, #10b981);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bud-last-active.bud-last-active-today::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--color-success, #10b981);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Inactive 14d+ state — amber warning (NudgeUP-nkyx) */
.bud-last-active.bud-last-active-stale {
  color: #f59e0b;
  font-weight: 600;
}
/* Never-active state — extra muted (NudgeUP-nkyx) */
.bud-last-active.bud-last-active-never {
  opacity: 0.55;
}
/* Amber tint + left-border on inactive 7+ day bud cards (NudgeUP-sfgl) */
.bud-card-inactive {
  background: color-mix(in srgb, var(--color-warning) 7%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
  border-left: 3px solid var(--color-warning);
}
/* Pending incoming bud request card — floats to top, amber border (NudgeUP-ycw3) */
.bud-card-pending {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 6%, transparent);
  border-color: var(--color-warning);
  border-width: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent), var(--shadow-card);
}
.btn-nudge-inactive {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-top: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-nudge-inactive:hover {
  background: rgba(245,158,11,0.22);
}
/* Muted "Inactive 7d" pill badge on dormant bud cards (NudgeUP-sase) */
.bud-inactive-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted, rgba(255,255,255,0.45));
  background: var(--color-surface-2, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  padding: 2px 8px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* Mutual buds badge (NudgeUP-po86) — buds you both have in common */
.bud-mutual-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary-lt, #9B67F5);
  background: rgba(155,103,245,0.13);
  border: 1px solid rgba(155,103,245,0.3);
  border-radius: 9999px;
  padding: 2px 9px;
  margin-top: 8px;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Distant-timezone hint on bud cards (NudgeUP-v496) */
.bud-tz-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted, rgba(255,255,255,0.45));
  background: var(--color-surface-2, rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  padding: 1px 8px;
  white-space: nowrap;
  vertical-align: middle;
}
/* NudgeUP-m7tn: clock icon inside the tz hint (replaces 🌍 emoji) */
.bud-tz-hint-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Nav badge (NudgeUP-9byu item 5) */
.nav-badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 16px; height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}
.nav-badge.hidden { display: none; }

/* Buds/Activity segmented toggle (NudgeUP-9byu item 8) */
.buds-tab-toggle {
  display: flex;
  background: var(--color-surface-2);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.buds-tab-btn {
  flex: 1;
  padding: 5px 14px;
  border: none;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.buds-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
/* "N new since last look" unread badge on the Activity tab (NudgeUP-sexg) */
.buds-tab-badge {
  display: inline-block;
  min-width: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-danger, #e5484d);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}

/* Broadcast prompt chips (NudgeUP-9byu item 9) */
.prompt-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prompt-chip {
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.prompt-chip:hover {
  background: var(--color-primary-faint, rgba(99,102,241,0.1));
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Quick-nudge button on bud card (NudgeUP-9byu item 4) */
.btn-quick-nudge {
  padding: 5px 12px;
  background: var(--color-primary-faint, rgba(99,102,241,0.1));
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s;
}
.btn-quick-nudge:hover { background: rgba(99,102,241,0.18); }
.btn-quick-nudge:active { transform: scale(0.97); }

/* Send-motivation button on bud card (NudgeUP-62ej) */
.btn-send-motivation {
  padding: 5px 12px;
  background: var(--color-warning-faint, rgba(245,158,11,0.1));
  color: var(--color-warning, #f59e0b);
  border: 1px solid var(--color-warning, #f59e0b);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s;
}
.btn-send-motivation:hover { background: rgba(245,158,11,0.18); }
.btn-send-motivation:active { transform: scale(0.97); }

/* Bud commitment button on bud card (NudgeUP-bih4v) */
.btn-bud-commit {
  padding: 5px 12px;
  background: var(--color-success-faint, rgba(16,185,129,0.1));
  color: var(--color-success, #10b981);
  border: 1px solid var(--color-success, #10b981);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s;
}
.btn-bud-commit:hover  { background: rgba(16,185,129,0.18); }
.btn-bud-commit:active { transform: scale(0.97); }

/* Active commitment chip on bud card — shows open pledge (NudgeUP-bih4v) */
.bud-commitment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-top: 4px;
  cursor: default;
}
.bud-commitment-chip .btn-commitment-done {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: 0.72rem;
  color: #10b981;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}
.bud-commitment-chip .btn-commitment-done:hover { opacity: 0.75; }

/* Commitment sheet modal content (NudgeUP-bih4v) */
.bud-commitment-sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: -12px 0 16px;
  line-height: 1.45;
}
.bud-commitment-nudge-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 4px 0 16px;
  font-style: italic;
}

/* Streak solidarity chip — encourage a bud who hasn't checked in (NudgeUP-4amd) */
.streak-solidarity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-top: 6px;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s;
}
.streak-solidarity-chip:hover { background: rgba(239,68,68,0.18); }
.streak-solidarity-chip:active { transform: scale(0.97); }

/* ── Activity Feed ────────────────────────────────────────────────────────── */
.activity-section { margin-top: 24px; }

/* Broadcast keyword filter (NudgeUP-tj7u) */
.broadcast-search-bar {
  position: relative;
  margin-bottom: 10px;
}
.broadcast-search-input {
  width: 100%;
  padding: 8px 36px 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.broadcast-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.broadcast-search-input::placeholder { color: var(--color-text-muted); }
.broadcast-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.broadcast-search-clear:hover { color: var(--color-text); }
.broadcast-search-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding: 32px 0;
}
/* Broadcast emoji chip filters (NudgeUP-mvoj) */
.broadcast-emoji-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.broadcast-emoji-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s;
  line-height: 1.4;
  user-select: none;
}
.broadcast-emoji-chip:hover {
  border-color: var(--color-primary);
}
.broadcast-emoji-chip.active,
.broadcast-emoji-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.08);
}

.activity-header {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.activity-feed { display: flex; flex-direction: column; gap: 6px; }

/* Sent nudge reaction counts (NudgeUP-8rrx) */
.sent-nudges-feed { display: flex; flex-direction: column; gap: 8px; }
.sent-nudge-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* NudgeUP-ntgm: pinned broadcast card gets an amber left accent */
.sent-nudge-card--pinned {
  border-left: 3px solid var(--color-warning, #f59e0b);
}
/* NudgeUP-ntgm: top row aligns label + pin button */
.sent-nudge-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* NudgeUP-ntgm: pin/star toggle button */
.btn-pin-broadcast {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1;
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  border-radius: 4px;
}
.btn-pin-broadcast:hover,
.btn-pin-broadcast:focus-visible {
  opacity: 1;
  color: var(--color-warning, #f59e0b);
  outline: none;
}
.btn-pin-broadcast--active {
  color: var(--color-warning, #f59e0b);
  opacity: 1;
}
.sent-nudge-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.sent-nudge-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.sent-nudge-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.reaction-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}
.reaction-count-n { color: var(--color-text-muted); font-weight: 600; }
.reaction-count-none { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }
/* NudgeUP-72w4: Seen label on sent broadcast cards */
.broadcast-seen-label { font-size: 0.72rem; color: var(--color-text-muted); margin-left: 6px; font-weight: 400; white-space: nowrap; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  animation: fadeInUp 0.25s ease;
}
.activity-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.activity-body { flex: 1; min-width: 0; }
.activity-text { color: var(--color-text); }
.activity-time { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.btn-sm-primary { background: var(--color-primary); color: #fff; }
.btn-sm-primary:hover { background: var(--color-primary-lt); }
.btn-sm-danger  { background: transparent; color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn-sm-danger:hover { background: rgba(239,68,68,0.1); }

/* Search row inside modal */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; min-width: 0; width: auto; }

/* Nudge ID input: fixed "#" prefix sits flush inside the bordered control so
   users type only the 6 characters. Mirrors .field input styling/tokens so it
   renders correctly across all themes. (NudgeUP-2i0r3) */
.nudge-id-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.nudge-id-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.nudge-id-prefix {
  display: flex;
  align-items: center;
  padding: 0 4px 0 14px;
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 600;
  user-select: none;
}
.nudge-id-input input {
  flex: 1;
  min-width: 0;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 14px 12px 0;
}
.nudge-id-input input:focus,
.nudge-id-input input:focus-visible {
  border: none;
  box-shadow: none;
  outline: none;
}
.nudge-id-hint { margin-top: 6px; }

.btn-search {
  padding: 12px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  white-space: nowrap;
}
.btn-search:hover { background: var(--color-primary-lt); }

/* Bud search result preview */
.bud-search-result {
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}
.bud-search-result.loading {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.bud-search-result.error {
  background: rgba(239,68,68,0.12);
  color: #FCA5A5;
  border: 1px solid rgba(239,68,68,0.25);
}
.bud-search-result.found {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
}
.bud-result-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.bud-result-name    { font-weight: 600; font-size: 0.9rem; }
.bud-result-nudgeid { font-size: 0.75rem; color: var(--color-text-muted); font-family: monospace; }

/* ── Bud paywall modal ───────────────────────────────────────────────────── */
.bud-paywall-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 12px; gap: 10px; }
.paywall-icon  { font-size: 2.8rem; line-height: 1; }
.paywall-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 0; }
.paywall-body  { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.paywall-used  { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); background: rgba(124,58,237,0.1); padding: 3px 12px; border-radius: 9999px; }
.paywall-upgrade-btn { width: 100%; margin-top: 4px; }
.paywall-close-btn   { width: 100%; background: none; border: none; color: var(--color-text-muted); font-size: 0.875rem; cursor: pointer; padding: 8px; }
.paywall-close-btn:hover { color: var(--color-text); }

/* ── Broadcasts ──────────────────────────────────────────────────────────── */
.broadcast-tabs {
  display: flex;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 16px;
  gap: 2px;
}
.broadcast-tab {
  flex: 1;
  padding: 8px 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.broadcast-tab.active { background: var(--color-primary); color: #fff; }

.broadcast-content { margin-bottom: 4px; }

.emoji-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.emoji-preset {
  width: 44px; height: 44px;
  background: var(--color-surface-2);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.emoji-preset:hover  { border-color: var(--color-primary); }
.emoji-preset.selected { border-color: var(--color-primary); background: rgba(124,58,237,0.15); }

.victory-notice {
  text-align: center;
  padding: 24px 16px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.victory-icon { font-size: 2.5rem; margin-bottom: 8px; }
.victory-notice p { color: var(--color-text-muted); font-size: 0.9rem; }

.broadcast-bud-list { margin-bottom: 12px; }
.broadcast-buds-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.broadcast-bud-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.bud-avatar-sm {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.broadcast-bud-name { font-size: 0.875rem; font-weight: 600; }

/* ── Broadcast remaining count (NudgeUP-sv2o) ───────────────────────────── */
.broadcast-remaining {
  font-size: 0.8rem;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.broadcast-remaining.ok {
  color: var(--color-text-muted, #888);
}
.broadcast-remaining.warn {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning, #F59E0B);
  border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
  font-weight: 600;
}
.broadcast-remaining.cap {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger, #EF4444);
  border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
  font-weight: 600;
}

.broadcast-cap-warning {
  background: rgba(245,158,11,0.12);
  color: var(--color-warning);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

/* ── Broadcast Schedule (NudgeUP-iezq) ──────────────────────────────────── */
.btn-schedule-broadcast {
  padding: 10px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
  flex: 1;
}
.broadcast-schedule-picker {
  margin-top: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--radius-sm);
}
.schedule-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.schedule-picker-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.schedule-day-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.schedule-day-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.schedule-day-btn:hover:not(.active) {
  background: var(--color-surface);
}
.schedule-time-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.schedule-time-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
/* Scheduled broadcasts section in Buds tab */
.scheduled-broadcasts-section { margin-top: 4px; }
.scheduled-broadcasts-list { display: flex; flex-direction: column; gap: 8px; }
.scheduled-broadcast-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e5e7eb);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.scheduled-broadcast-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.scheduled-broadcast-body { flex: 1; min-width: 0; }
.scheduled-broadcast-content {
  font-size: 0.875rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scheduled-broadcast-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.btn-cancel-scheduled {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  background: transparent;
  color: var(--color-danger, #EF4444);
  cursor: pointer;
}
.btn-cancel-scheduled:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

/* ── Voice Broadcast ─────────────────────────────────────────────────────── */
.voice-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 8px;
  gap: 12px;
}
.voice-state { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

/* Record button */
.btn-voice-record {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}
.btn-voice-record:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(124,58,237,0.2); }
.voice-hint { color: var(--color-text-muted); font-size: 0.8rem; margin: 0; }

/* Waveform canvas + timer */
.voice-waveform {
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  width: 100%; max-width: 260px; height: 48px;
}
.voice-timer {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-error, #ef4444);
  letter-spacing: 0.05em;
}
.btn-voice-stop {
  padding: 10px 28px;
  background: var(--color-error, #ef4444);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.btn-voice-stop:hover { opacity: 0.88; }

/* Preview player */
.voice-preview-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  width: 100%;
  max-width: 280px;
}
.btn-voice-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.btn-voice-play:hover { opacity: 0.85; }
.voice-preview-bars {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.voice-preview-bars span {
  display: block; width: 3px; border-radius: 2px;
  background: var(--color-primary);
  opacity: 0.7;
  animation: none;
}
/* staggered static waveform heights */
.voice-preview-bars span:nth-child(1)  { height: 12px; }
.voice-preview-bars span:nth-child(2)  { height: 22px; }
.voice-preview-bars span:nth-child(3)  { height: 32px; }
.voice-preview-bars span:nth-child(4)  { height: 20px; }
.voice-preview-bars span:nth-child(5)  { height: 38px; }
.voice-preview-bars span:nth-child(6)  { height: 28px; }
.voice-preview-bars span:nth-child(7)  { height: 16px; }
.voice-preview-bars span:nth-child(8)  { height: 36px; }
.voice-preview-bars span:nth-child(9)  { height: 24px; }
.voice-preview-bars span:nth-child(10) { height: 14px; }
/* animate when playing */
.voice-preview-bars.playing span { animation: wave-bar 0.8s ease-in-out infinite alternate; }
.voice-preview-bars.playing span:nth-child(odd)  { animation-delay: 0s; }
.voice-preview-bars.playing span:nth-child(even) { animation-delay: 0.15s; }
@keyframes wave-bar { from { opacity: 0.4; transform: scaleY(0.6); } to { opacity: 1; transform: scaleY(1); } }
.voice-preview-duration { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); flex-shrink: 0; }
.voice-retake-btn {
  background: none; border: none;
  color: var(--color-primary); font-size: 0.8rem; font-weight: 600; font-family: inherit;
  cursor: pointer; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Received voice broadcast card in activity feed */
.voice-broadcast-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 4px;
  max-width: 220px;
}
.btn-voice-broadcast-play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff; border: none;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.voice-broadcast-bars {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.voice-broadcast-bars span {
  display: block; width: 3px; border-radius: 2px;
  background: var(--color-primary); opacity: 0.65;
}
.voice-broadcast-bars span:nth-child(1) { height: 10px; }
.voice-broadcast-bars span:nth-child(2) { height: 18px; }
.voice-broadcast-bars span:nth-child(3) { height: 28px; }
.voice-broadcast-bars span:nth-child(4) { height: 16px; }
.voice-broadcast-bars span:nth-child(5) { height: 34px; }
.voice-broadcast-bars span:nth-child(6) { height: 22px; }
.voice-broadcast-bars span:nth-child(7) { height: 12px; }
.voice-broadcast-bars.playing span { animation: wave-bar 0.9s ease-in-out infinite alternate; }
.voice-broadcast-duration { font-size: 0.7rem; color: var(--color-text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Vibe Check view ─────────────────────────────────────────────────────── */
.vibe-section { margin-bottom: 20px; }
.vibe-rate-nudge { font-size: 0.82rem; color: var(--color-primary); margin-top: 4px; animation: vibe-blink 1s ease-in-out 2; }
.vibe-prompt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  text-align: center;
}
.vibe-emojis {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.vibe-emoji {
  font-size: 2rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: none;
  line-height: 1;
  transition: transform 0.12s, border-color var(--transition-fast), background var(--transition-fast);
}
.vibe-emoji:hover { transform: scale(1.18); }
.vibe-emoji.selected {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.12);
  transform: scale(1.28);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.2), 0 0 16px rgba(124,58,237,0.25);
}
/* Dim non-selected when one is selected */
.vibe-emojis.has-selection .vibe-emoji:not(.selected) {
  opacity: 0.45;
  transform: scale(0.92);
}
.vibe-note-field { margin-bottom: 14px; }
.vibe-note-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 6px 0 0;
  opacity: 0.8;
}
/* Voice input row */
.vibe-note-input-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vibe-note-input-row textarea { flex: 1; }
.vibe-mic-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}
.vibe-mic-btn:hover { border-color: var(--color-primary); }
/* Send note button (NudgeUP-ed2op) — mirrors .vibe-mic-btn sizing, primary-filled */
.vibe-note-send-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
}
.vibe-note-send-btn:hover { filter: brightness(1.08); }
.vibe-note-send-btn:disabled { opacity: 0.55; cursor: default; }
.vibe-mic-btn.recording {
  border-color: #ef4444;
  background: rgba(239,68,68,0.1);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.35); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
/* TTS controls */
.vibe-tts-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.vibe-tts-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.vibe-tts-btn:hover { border-color: var(--color-primary); }
.vibe-tts-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(124,58,237,0.08);
}
.vibe-tts-btn.tts-playing {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(124,58,237,0.14);
  animation: tts-pulse 1.4s ease-in-out infinite;
}
@keyframes tts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(124,58,237,0); }
}
.vibe-tts-btn.tts-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* ── NudgeUP-6d5b2: today's-coach daily lock (morning confirm + chip + picker) ── */
/* Morning confirm card — matches the flat vibe-card surface language. */
.daily-coach-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.daily-coach-confirm-q {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.daily-coach-confirm-q strong { font-weight: 700; }
.daily-coach-confirm-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Locked-coach chip — flat pill strip with lock + Change. */
.daily-coach-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  margin-bottom: 14px;
}
.daily-coach-chip-lock { font-size: 0.78rem; flex-shrink: 0; opacity: 0.8; }
.daily-coach-chip-text { flex: 1; min-width: 0; }
.daily-coach-chip-text strong { color: var(--color-text); font-weight: 700; }
.daily-coach-chip-emoji { margin: 0 1px; }
.daily-coach-chip-change {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.daily-coach-chip-change:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Shared 6-coach picker — tiles reuse .vibe-mode-btn; .active marks today's pick. */
.daily-coach-picker { margin-bottom: 16px; }
.daily-coach-picker-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.daily-coach-picker-grid { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.daily-coach-tile { min-width: 0; }
.daily-coach-tile .vibe-mode-desc { align-self: stretch; text-align: center; white-space: normal; overflow: visible; text-overflow: clip; }
.daily-coach-tile.active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.vibe-modes-sublabel {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 2px;
  padding: 0;
}
.vibe-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.vibe-mode-btn {
  padding: 13px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.1s, box-shadow var(--transition-fast);
  box-shadow: var(--shadow-card);
}
.vibe-mode-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.vibe-mode-btn:active:not(:disabled) { transform: translateY(0); }

/* NudgeUP-th2s1: compact 3-button row (icon on top, label below) per the approved
   vibe-concept1 mockup. Overrides the full-width stacking so all 3 tools sit
   side-by-side at a small height. Same handlers; only the chrome changes. */
.vibe-mode-grid--compact {
  grid-template-columns: repeat(3, 1fr);
}
.vibe-mode-grid--compact .vibe-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  grid-column: auto;          /* cancel the full-width dayplan/stuck spans */
  padding: 12px 6px;
  text-align: center;
  min-height: 0;
}
.vibe-mode-grid--compact .vibe-mode-icon { flex-shrink: 0; }
.vibe-mode-grid--compact .vibe-mode-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}
/* The old subtitle spans aren't rendered in compact mode; keep this defensive. */
.vibe-mode-grid--compact .vibe-mode-desc { display: none; }
.vibe-mode-btn.loading {
  opacity: 0.7;
  cursor: wait;
}
.vibe-mode-btn:disabled { opacity: 0.5; cursor: default; }
.vibe-mode-dayplan {
  grid-column: 1 / -1;
  text-align: center;
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(6,182,212,0.06));
  border-color: rgba(124,58,237,0.45);
}
/* I'm Stuck button (NudgeUP-qgbo) */
.vibe-mode-stuck {
  grid-column: 1 / -1;
  text-align: center;
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.35);
  color: #ef4444;
}
.vibe-mode-stuck:hover:not(:disabled) {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.6);
}
.vibe-mode-stuck:disabled { opacity: 0.5; cursor: default; }

/* Power Hour mode button (NudgeUP-xbz0) — amber/gold accent */
.vibe-mode-power-hour {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
  color: var(--color-warning);
}
.vibe-mode-power-hour:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 75%, transparent);
  color: var(--color-warning);
}
.vibe-mode-power-hour:disabled { opacity: 0.5; cursor: default; }

/* Power Hour response card accent border (NudgeUP-xbz0) */
.vibe-response--power-hour {
  border-left: 3px solid color-mix(in srgb, var(--color-warning) 75%, transparent);
}

/* Drill Sergeant mode button (NudgeUP-d32g) — olive/army green */
.vibe-mode-drill {
  background: rgba(85,107,47,0.12);
  border-color: rgba(85,107,47,0.45);
  color: #6b7c3a;
}
.vibe-mode-drill:hover:not(:disabled) {
  background: rgba(85,107,47,0.22);
  border-color: rgba(85,107,47,0.7);
  color: #5a6832;
}
.vibe-mode-drill:disabled { opacity: 0.5; cursor: default; }

/* Stuck reaction row */
.stuck-reaction-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.stuck-reaction-row.hidden { display: none; }
.stuck-reaction-label {
  font-size: 0.78rem;
  color: var(--muted, #888);
  margin-right: 2px;
}
.stuck-reaction-btn {
  font-size: 0.78rem;
  border: 1px solid;
  border-radius: 99px;
  padding: 4px 12px;
  cursor: pointer;
  background: none;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.stuck-reaction-yes { border-color: #22c55e; color: #22c55e; }
.stuck-reaction-yes:hover { background: #22c55e; color: #fff; }
.stuck-reaction-no  { border-color: var(--muted, #888); color: var(--muted, #888); }
.stuck-reaction-no:hover  { background: var(--muted, #888); color: #fff; }
.stuck-reaction-btn:disabled { opacity: 0.5; cursor: default; }

/* Coach response rating row (NudgeUP-visf) */
.coach-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.coach-feedback-row.hidden { display: none; }
.coach-feedback-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  flex: 1;
}
.coach-feedback-btn {
  background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s;
  line-height: 1;
}
.coach-feedback-btn:hover { background: rgba(255,255,255,0.07); }
.coach-feedback-btn:active { transform: scale(0.92); }
.coach-feedback-btn.selected { border-color: transparent; background: rgba(255,255,255,0.12); }
.coach-feedback-btn:disabled { opacity: 0.5; cursor: default; }

/* Day plan offer row (NudgeUP-ylos) */
.dayplan-offer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.dayplan-offer-row.hidden { display: none; }
.dayplan-offer-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  flex: 1;
  min-width: 0;
}
.dayplan-offer-btn {
  background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s;
  white-space: nowrap;
}
.dayplan-offer-btn:hover { background: rgba(255,255,255,0.07); }
.dayplan-offer-btn:active { transform: scale(0.92); }
.dayplan-offer-yes {
  border-color: var(--color-primary, #9b67f5);
  color: var(--color-primary, #9b67f5);
}
.dayplan-offer-yes:hover { background: rgba(155,103,245,0.1); }

/* ── Morning focus prompt (NudgeUP-axfis) ──────────────────────────────────── */
.morning-focus-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(99,102,241,0.07));
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px 10px;
  margin-bottom: 10px;
  animation: slideDown 0.25s ease;
}
.morning-focus-card.hidden { display: none; }
.morning-focus-question {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.morning-focus-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.morning-focus-input {
  flex: 1;
  min-width: 0;
  background: var(--color-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.875rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
}
.morning-focus-input:focus {
  border-color: var(--color-primary, #7c3aed);
}
.morning-focus-input::placeholder { color: var(--color-text-muted); }
.morning-focus-set-btn {
  flex-shrink: 0;
  background: var(--color-primary, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform 0.1s;
  white-space: nowrap;
}
.morning-focus-set-btn:hover { opacity: 0.88; }
.morning-focus-set-btn:active { transform: scale(0.95); }
.morning-focus-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  padding: 4px 0 0;
  cursor: pointer;
  display: block;
  margin-top: 6px;
  transition: color var(--transition-fast);
}
.morning-focus-dismiss:hover { color: var(--color-text); }

/* NudgeUP-a4qcl: Meds check-in card (shown on meds reminder notification tap) */
.meds-checkin-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(5,150,105,0.07));
  border: 1px solid rgba(16,185,129,0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px 10px;
  margin-bottom: 10px;
  animation: slideDown 0.25s ease;
}
.meds-checkin-card.hidden { display: none; }
.meds-checkin-question {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.meds-checkin-actions {
  display: flex;
  gap: 8px;
}
.meds-checkin-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform 0.1s;
}
.meds-checkin-btn-yes {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}
.meds-checkin-btn-no {
  background: var(--color-surface, rgba(255,255,255,0.08));
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  color: var(--color-text);
}
.meds-checkin-btn:hover  { opacity: 0.88; }
.meds-checkin-btn:active { transform: scale(0.95); }
.meds-checkin-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  padding: 4px 0 0;
  cursor: pointer;
  display: block;
  margin-top: 6px;
  transition: color var(--transition-fast);
}
.meds-checkin-dismiss:hover { color: var(--color-text); }

/* Pinned morning focus banner */
.morning-focus-pin {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  animation: slideDown 0.2s ease;
}
.morning-focus-pin.hidden { display: none; }
.morning-focus-pin-label {
  font-weight: 600;
  color: var(--color-primary, #7c3aed);
  white-space: nowrap;
  flex-shrink: 0;
}
.morning-focus-pin-text {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.morning-focus-pin-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.morning-focus-pin-clear:hover { color: var(--color-text); }

/* Stuck response card — red accent border */
.vibe-response.vibe-response--stuck {
  border-left: 3px solid #ef4444;
  background: rgba(239,68,68,0.04);
}

.vibe-response {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
/* Coach/Vibe empty state — first-use example prompts (NudgeUP-o9n4) */
.vibe-response.vibe-response--empty {
  background: var(--color-surface);
  border-style: dashed;
}
/* NudgeUP-1qzvn: inline focus-task confirm step for I'm-stuck / Power Hour.
   Token-driven so it passes contrast in every theme + dark mode. */
.vibe-focus-pick-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}
.vibe-focus-pick-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted, var(--color-text));
  margin: 0 0 12px;
  line-height: 1.4;
}
.vibe-focus-pick-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, var(--color-text));
  margin: 0 0 6px;
}
.vibe-focus-pick-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.vibe-focus-pick-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
}
.vibe-focus-pick-go {
  flex: 0 0 auto;
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
}
.vibe-focus-pick-go:hover { background: var(--color-primary-lt, var(--color-primary)); }
.vibe-empty {
  text-align: center;
}
.vibe-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}
.vibe-empty-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted, var(--color-text));
  opacity: 0.7;
  margin: 0 0 12px;
}
.vibe-empty-prompts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vibe-empty-prompt {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.vibe-empty-prompt::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.7;
}
.vibe-empty-prompt:hover,
.vibe-empty-prompt:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.vibe-response.loading { opacity: 0.75; }
.vibe-response.loading::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 8px auto 0;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: vibe-spin 0.7s linear infinite;
}
.vibe-response-mode {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary-lt);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.vibe-response-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre-wrap;
}
.vibe-response-text.typing::after {
  content: '\258B';
  display: inline-block;
  margin-left: 1px;
  opacity: 0.7;
  animation: vibe-blink 0.7s step-end infinite;
}
@keyframes vibe-blink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0; }
}
@keyframes vibe-spin {
  to { transform: rotate(360deg); }
}

/* ── AI quota meta line (NudgeUP-u6v4l) ──────────────────────────────────── */
.ai-rl-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 6px;
  padding: 2px 0;
  transition: color var(--transition-base);
}
.ai-rl-meta--warn {
  color: var(--color-warning, #d97706);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .auth-body { padding: 32px 24px; }
  .auth-container { padding: 36px 32px; }
}

@media (min-width: 768px) {
  /* Frame the mobile PWA in a centered column on wide screens */
  .app-body {
    max-width: var(--content-max);
    margin: 0 auto;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
  }

  /* Bottom nav constrained to match app frame */
  .bottom-nav {
    max-width: var(--content-max);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }

  /* Center modals as dialogs instead of bottom sheets */
  .modal {
    justify-content: center;
    align-items: center;
  }
  .modal-sheet {
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: calc(100% - 32px);
    margin: 0 auto;
    max-height: 85vh;
  }
  .modal-handle { display: none; }

  /* More breathing room in views */
  .view { padding: 24px; }
  .app-header { padding: 0 24px; }
}

/* ── Reduced-motion (NudgeUP-hrahl) ───────────────────────────────────────────
   NudgeUP's audience is ADHD/neurodivergent — excessive motion can be
   distracting or aversive. When the OS signals `prefers-reduced-motion: reduce`
   we strip decorative motion app-wide. Essential feedback (a sheet appearing, a
   checkbox flipping) collapses to near-instant rather than disappearing, so the
   interface still communicates state; purely-decorative LOOPING motion (spin,
   shimmer, pulse, aurora, bounce, confetti) is killed outright.
   The in-app ADHD-Mode toggle (`body.adhd-mode`) reuses the SAME decorative
   suppression below, so a user gets a calm app without touching OS settings. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Decorative / infinitely-looping motion — fully OFF (not just near-instant)
   under reduced-motion. These are the most aversive: spinners, skeleton
   shimmers, the Aurora theme's rotating conic blobs, and any pulse. */
@media (prefers-reduced-motion: reduce) {
  html.theme-aurora body::before,
  html.theme-aurora body::after,
  .for-you-refresh.spinning,
  .pulse, .animate-pulse,
  [class*="shimmer"], [class*="-shimmer"] {
    animation: none !important;
  }
}

/* ADHD Mode = explicit in-app "calm the app down" signal. Mirror the
   reduced-motion decorative suppression so it works regardless of OS setting.
   (`.pulse`/`.animate-pulse` were already handled near body.adhd-mode; this
   extends the same idea to spinning/shimmering decoration.) */
html.theme-aurora body.adhd-mode::before,
html.theme-aurora body.adhd-mode::after,
body.adhd-mode .for-you-refresh.spinning,
body.adhd-mode [class*="shimmer"],
body.adhd-mode [class*="-shimmer"] {
  animation: none !important;
}

/* ── Onboarding overlay ───────────────────────────────────────────────────── */
/* ── Coachmark Tour (NudgeUP-7dkj) ────────────────────────────────────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.55);
  pointer-events: all;
}
.tour-overlay.hidden { display: none !important; }

.tour-dismiss-group {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-tour);
  display: flex;
  gap: 8px;
  align-items: center;
}
.tour-dismiss-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base);
  white-space: nowrap;
}
.tour-dismiss-btn:hover { background: rgba(255,255,255,0.22); }
.tour-dismiss-btn--skip {
  opacity: 0.65;
  font-weight: 600;
}
.tour-dismiss-btn--skip:hover { opacity: 1; background: rgba(255,255,255,0.16); }

.tour-tooltip {
  position: fixed;
  z-index: var(--z-tour);
  background: var(--color-surface, #1e1b2e);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  max-width: 300px;
  width: calc(100% - 32px); /* NudgeUP-uuq3: 100% (not 100vw) — vw includes scrollbar width → overflow */
  pointer-events: all;
  animation: tour-fade-in 0.2s ease;
}
@keyframes tour-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-step-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
}
.tour-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #e5e7eb);
  margin: 0 0 6px;
}
.tour-step-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
  margin: 0 0 16px;
  line-height: 1.5;
}
/* NudgeUP-ihit: segmented step progress indicator above the footer */
.tour-progress {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.tour-progress-seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-border, rgba(255,255,255,0.14));
  transition: background var(--transition-base) ease;
}
.tour-progress-seg.is-done {
  background: var(--color-accent, #a78bfa);
}
.tour-progress-seg.is-current {
  background: var(--color-accent, #a78bfa);
  opacity: 0.65;
}
.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tour-step-counter {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  white-space: nowrap;  /* NudgeUP-zt2f: prevent "2 / 4" from wrapping */
  flex-shrink: 0;
}
.tour-next-cta {
  padding: 8px 18px;
  font-size: 0.875rem;
  border-radius: 9999px;
  font-weight: 600;
}

/* Arrow pointing down to nav element */
.tour-arrow {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-surface, #1e1b2e);
}
.tour-arrow-up {
  top: -10px;
  bottom: auto;
  border-top: none;
  border-bottom: 10px solid var(--color-surface, #1e1b2e);
}
.tour-arrow-down {
  bottom: -10px;
  top: auto;
  border-bottom: none;
  border-top: 10px solid var(--color-surface, #1e1b2e);
}
.tour-arrow-hidden { display: none; }

/* Spotlight: make the target element pop above the overlay */
.tour-spotlight {
  position: relative;
  z-index: var(--z-spotlight) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 4px var(--color-primary, #7c3aed);
  pointer-events: none;
}

/* First-win in-app onboarding card (NudgeUP-57rli) — bottom-anchored coachmark
   that walks a new user through their first task → AI breakdown → check off.
   Sits above the bottom nav but below modals (quick-add/breakdown) so it stays
   visible while the user works inside those sheets. */
.first-win-card {
  position: fixed;
  left: 50%;
  bottom: 84px; /* clear the bottom nav */
  top: auto;
  transform: translateX(-50%);
  /* Above modals (--z-modal) so the hint stays visible while the quick-add /
     breakdown sheets are open, but below the intro carousel (--z-intro) and
     coachmark tour (--z-overlay) which never overlap this flow. */
  z-index: var(--z-modal-hint);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-surface, #1e1b2e);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  max-width: 360px;
  width: calc(100% - 32px);
  animation: first-win-fade-in 0.25s ease;
}
.first-win-card.hidden { display: none !important; }
/* Top-anchored variant — used while a bottom sheet (quick-add / breakdown) is
   open so the hint never covers the sheet's action buttons (NudgeUP-57rli). */
.first-win-card--top {
  bottom: auto;
  top: calc(env(safe-area-inset-top) + 16px);
}
@keyframes first-win-fade-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.first-win-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.first-win-body { flex: 1 1 auto; min-width: 0; }
.first-win-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #e5e7eb);
  margin: 0 0 4px;
}
.first-win-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
  margin: 0 0 12px;
  line-height: 1.5;
}
.first-win-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.first-win-cta {
  padding: 8px 18px;
  font-size: 0.875rem;
  border-radius: 9999px;
  font-weight: 600;
}
.first-win-cta.hidden { display: none !important; }
.first-win-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.first-win-dismiss:hover { color: var(--color-text, #e5e7eb); }

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--color-bg);
  transition: opacity var(--transition-slow) ease;
}
.onboarding-overlay.hidden { display: none !important; }
.onboarding-overlay.fading-out {
  opacity: 0;
  pointer-events: none;
}

.onboarding-swiper {
  width: 100%;
  height: 100%;
}

.onboarding-slide {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px 80px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Per-slide gradient accent */
.slide-welcome { background: linear-gradient(160deg, #1c0f42 0%, var(--color-bg) 65%); }
.slide-tasks   { background: linear-gradient(160deg, #0e1a30 0%, var(--color-bg) 65%); }
.slide-buds    { background: linear-gradient(160deg, #0c2220 0%, var(--color-bg) 65%); }
.slide-nudge   { background: linear-gradient(160deg, #1f1408 0%, var(--color-bg) 65%); }

/* Setup-time indicator (NudgeUP-lybx) — top-left "about 2 min" pill */
.onboarding-timer {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface, rgba(255,255,255,0.08));
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.onboarding-timer-icon { font-size: 0.875rem; line-height: 1; }
.onboarding-timer-text { white-space: nowrap; }

/* NudgeUP-lopfa: always-visible step-progress bar pinned to the top edge so
   users can see how far through onboarding they are at a glance. */
.onboarding-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 3;
  background: var(--color-border, rgba(255,255,255,0.12));
  pointer-events: none;
}
.onboarding-progress-fill {
  display: block;
  height: 100%;
  width: 16.6%; /* 1 of 6 — updated by JS */
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-lt));
  border-radius: 0 2px 2px 0;
  transition: width var(--transition-slow) ease;
}

.onboarding-skip {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.onboarding-skip:hover { color: var(--color-text); }

.ob-content {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.ob-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 16px rgba(124,58,237,0.5));
  line-height: 1;
}

.ob-title {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  line-height: 1.2;
}

.ob-subtitle {
  font-size: 1rem;
  color: var(--color-accent-text); /* NudgeUP-qbc2h a11y */
  font-weight: 600;
  margin-bottom: 16px;
}

.ob-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}
.ob-desc strong { color: var(--color-text); }

/* "Let's go" next button (slide 1) */
.ob-next-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-lt));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(124,58,237,0.35);
  transition: opacity var(--transition-fast);
}
.ob-next-btn:hover { opacity: 0.9; }

/* Demo task card (slide 2) */
.ob-demo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
}
.ob-demo-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.ob-demo-meta  { font-size: 0.75rem; color: var(--color-text-muted); }

/* Nudge ID badge (slide 3) */
.ob-nudge-id {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, var(--color-primary-lt), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.ob-id-caption {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Done / CTA button (slide 4) */
.onboarding-done {
  display: block;
  width: calc(100% - 64px);
  max-width: 340px;
  margin: 0 auto;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-lt));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(124,58,237,0.4);
  transition: opacity var(--transition-fast), transform 0.1s;
}
.onboarding-done:hover { opacity: 0.9; }
.onboarding-done:active { transform: scale(0.98); }

/* ── Account deletion ──────────────────────────────────────────────────────── */
/* GDPR / CCPA data rights section */
.data-rights-zone {
  text-align: center;
  padding: 12px 0 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 12px;
}
.data-rights-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 4px 0 8px;
}
/* NudgeUP-rodb: vibe CSV export row */
.vibe-export-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.vibe-export-tags-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-text-secondary, #a0a0b0);
  cursor: pointer;
  user-select: none;
}
.vibe-export-tags-label input[type="checkbox"] {
  accent-color: var(--color-primary, #6c63ff);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.btn-text-secondary {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary, #a0a0b0);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-text-secondary:hover { background: var(--color-surface-alt, #1a1a24); color: var(--color-primary-lt); }
.btn-text-secondary:disabled { opacity: 0.5; cursor: default; }

.danger-zone {
  text-align: center;
  padding: 8px 0 4px;
}
.btn-text-danger {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px 12px;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  border-radius: var(--radius-sm);
}
.btn-text-danger:hover { opacity: 1; }

.delete-warning {
  background: rgba(239,68,68,0.10);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid rgba(239,68,68,0.30);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  line-height: 1.55;
}
.delete-warning p { margin: 0 0 8px; }
.delete-warning p:last-child { margin: 0; }

/* ── Trial countdown banner (NudgeUP-nbkgb) ─────────────────────────────────── */
/* Repositioned from fixed floating bubble to inline slim strip inside #view-tasks
   so it never overlaps the task list on mobile or desktop. Flows in-document like
   the signup-bonus-banner card directly above it. */
.trial-countdown-banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 16px; background: linear-gradient(135deg, #7C3AED, #06B6D4); color: #fff; font-size: 0.84rem; border-radius: 14px; margin: 6px 16px 2px; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25); flex-wrap: nowrap; }
.trial-countdown-banner.hidden { display: none; }
.trial-banner-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-banner-cta { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 0.8rem; padding: 4px 14px; border-radius: 9999px; cursor: pointer; white-space: nowrap; font-weight: 600; flex-shrink: 0; }
.trial-banner-cta:hover { background: rgba(255,255,255,0.32); }
.trial-banner-close { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 1.1rem; padding: 2px 6px; line-height: 1; margin-left: auto; flex-shrink: 0; }
.trial-banner-close:hover { color: #fff; }

/* ── Signup bonus card (td2 / k6pp) ─────────────────────────────────────────── */
/* NudgeUP-k6pp: inline dismissible card below smart-stats-strip — no fixed
   positioning so it never overlaps the coach header or stats strip. */
.signup-bonus-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; background: linear-gradient(135deg, #059669, #0891B2); color: #fff; font-size: 0.82rem; border-radius: 14px; margin: 10px 16px 2px; box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25); animation: bonus-card-in 0.3s ease; }
@keyframes bonus-card-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.signup-bonus-banner.hidden { display: none; }
.bonus-banner-icon  { font-size: 1.1rem; flex-shrink: 0; }
.bonus-banner-body  { flex: 1; min-width: 0; }
.bonus-banner-text  { display: block; }
.bonus-banner-cta   { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 0.8rem; padding: 4px 14px; border-radius: 9999px; cursor: pointer; white-space: nowrap; font-weight: 600; flex-shrink: 0; }
.bonus-banner-cta:hover { background: rgba(255,255,255,0.32); }

/* ── Trial expiry modal ─────────────────────────────────────────────────────── */
.modal-trial {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-trial.hidden { display: none; }

.trial-content {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.trial-icon { font-size: 3rem; margin-bottom: 14px; }
.trial-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.trial-subtitle { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 22px; }

.trial-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.trial-stat {
  flex: 1;
  background: var(--color-bg);
  border-radius: 12px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trial-stat-num   { font-size: 1.9rem; font-weight: 700; color: #7C3AED; line-height: 1; }
.trial-stat-label { font-size: var(--text-xs); /* NudgeUP-lz106: raised from 0.68rem */ color: var(--color-text-muted); font-weight: 600; text-align: center; }

.trial-loss-box {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
  text-align: left;
}
.trial-loss-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); margin-bottom: 10px; }
.trial-loss-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.trial-loss-list li { font-size: 0.86rem; color: var(--color-text-muted); }

.trial-actions { display: flex; flex-direction: column; gap: 10px; }

.btn-trial-upgrade {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #9B67F5, #06B6D4);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  transition: opacity var(--transition-fast), transform 0.1s;
}
.btn-trial-upgrade:hover  { opacity: 0.92; }
.btn-trial-upgrade:active { transform: scale(0.98); }

.btn-trial-snooze {
  width: 100%;
  padding: 12px;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
  border-radius: 50px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-trial-snooze:hover { border-color: #7C3AED; color: #7C3AED; }

.btn-trial-downgrade {
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.btn-trial-downgrade:hover { color: #EF4444; }

/* ── Block user ────────────────────────────────────────────────────────────── */
.block-warning-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Block button on bud cards */
.btn-block {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: auto;
}
.btn-block:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* Remove-bud button (NudgeUP-cnie6) — larger tap target, labelled, always slightly visible */
.btn-bud-remove {
  position: absolute;
  top: 8px; right: 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  /* Minimum 44px tap target (WCAG) */
  min-width: 44px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.bud-card { position: relative; }
.bud-card:hover .btn-bud-remove,
.bud-card:focus-within .btn-bud-remove { opacity: 1; }
.btn-bud-remove:hover,
.btn-bud-remove:focus-visible {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  opacity: 1;
}
/* On touch devices keep button always visible at reduced opacity */
@media (hover: none) {
  .btn-bud-remove { opacity: 0.55; }
}

/* Broadcast text truncation (NudgeUP-wjc8) */
.bc-text { display: -webkit-box; word-break: break-word; }
.bc-text-clamped {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.btn-bc-show-more {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  font-family: inherit;
}

/* Blocked users section in profile */
/* ── Public profile (NudgeUP-40st) ──────────────────────────────── */
.public-username-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface, #f8f4ee);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.public-username-prefix {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.public-username-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  outline: none;
  min-width: 0;
}
.public-username-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.public-username-hint.valid   { color: var(--color-success); }
.public-username-hint.error   { color: var(--color-danger, #d4604a); }
.public-profile-link-text {
  color: var(--color-accent-text, #d4604a); /* NudgeUP-qbc2h a11y */
  word-break: break-all;
  font-size: 0.85rem;
}

.blocked-section {
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.blocked-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.blocked-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.blocked-item:last-child { border-bottom: none; }
.blocked-avatar { font-size: 1rem; opacity: 0.35; }
.blocked-name   { flex: 1; font-size: 0.9rem; }

/* Swiper pagination dots */
.onboarding-pagination {
  bottom: 28px !important;
}
.onboarding-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: var(--color-text-muted);
  opacity: 0.4;
  transition: all var(--transition-base);
}
.onboarding-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary-lt);
  opacity: 1;
  width: 20px;
  border-radius: 4px;
}

/* ── Streak section ────────────────────────────────────────────────────────── */
.streak-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 16px 16px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.streak-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.streak-flame {
  font-size: 2rem;
  line-height: 1;
}
.streak-count {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-lt);
  line-height: 1;
  letter-spacing: -1px;
}
.streak-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  align-self: flex-end;
  padding-bottom: 4px;
}
.streak-best {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.streak-chart-wrap {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

/* ── Consistency score (NudgeUP-bw41v) — forgiving streak alternative ──────── */
.consistency-score {
  max-width: 340px;
  margin: 0 auto 16px;
}
.consistency-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.consistency-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.5s ease;
}
.consistency-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.consistency-pct {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.consistency-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ── Task-completion heatmap (NudgeUP-7bvka) — GitHub-style activity map ─────
   Theme-safe: every intensity step is --color-success at a stepped opacity, so
   it adapts to each theme + dark mode. Level 0 = neutral track (border token). */
.completion-heatmap {
  max-width: 340px;
  margin: 0 auto 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.completion-heatmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.completion-heatmap-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}
.completion-heatmap-empty {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 4px 2px;
}
/* Best-time-of-day insight (NudgeUP-fxwjq) — friendly peak-window line above the grid. */
.best-time-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: 8px 10px;
  margin: 0 0 10px;
}
.best-time-insight-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-success);
}
.best-time-insight-text { flex: 1 1 auto; }
.best-time-insight-cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.best-time-insight-cta:disabled { color: var(--color-text-muted); cursor: default; text-decoration: none; }
.completion-heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  width: 100%;
}
/* Shared cell styling — also used by the legend swatches. */
.completion-heatmap-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--color-border);  /* level 0 / empty track */
}
.completion-heatmap-level-1 { background: color-mix(in srgb, var(--color-success) 30%, transparent); }
.completion-heatmap-level-2 { background: color-mix(in srgb, var(--color-success) 55%, transparent); }
.completion-heatmap-level-3 { background: color-mix(in srgb, var(--color-success) 78%, transparent); }
.completion-heatmap-level-4 { background: var(--color-success); }
.completion-heatmap-future { opacity: 0.4; }
.completion-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
}
.completion-heatmap-legend .completion-heatmap-cell {
  width: 11px;
  height: 11px;
  aspect-ratio: auto;
  flex: 0 0 auto;
}
.completion-heatmap-legend-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* ── Vibe Trends chart (NudgeUP-qh6) ──────────────────────────────────────── */
.vibe-trend-section {
  margin: 0 0 20px;
}
.vibe-trend-card {
  background: var(--color-surface);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.vibe-trend-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.vibe-trend-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}
.vibe-trend-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vibe-trend-pro-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  color: #fff;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vibe-trend-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}
.vibe-trend-chart-wrap {
  position: relative;
  width: 100%;
  min-height: 140px;
}
.vibe-trend-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.vibe-trend-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Streak Freeze (NudgeUP-fkr1) ─────────────────────────────────────────── */
.streak-freeze-section {
  margin: 0 0 20px;
}
.streak-freeze-card {
  background: var(--color-surface);
  border: 1px solid rgba(99, 179, 237, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.streak-freeze-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.streak-freeze-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}
.streak-freeze-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.streak-freeze-pro-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  color: #fff;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.streak-freeze-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}
.streak-freeze-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-streak-freeze {
  background: linear-gradient(135deg, #4299e1, #63b3ed);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-base), transform var(--transition-fast);
  width: 100%;
}
.btn-streak-freeze:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-streak-freeze:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.streak-freeze-status {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}
.streak-freeze-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  opacity: 0.75;
  line-height: 1.4;
}

/* ── Streak milestone toast ────────────────────────────────────────────────── */
.streak-toast {
  position: fixed;
  bottom: var(--toast-slot-3); /* NudgeUP-iyte6: shared bottom-center toast stack */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  /* NudgeUP-w6qpn: 2nd gradient stop was hard-coded #a855f7 (purple) — off-brand
     on terminal/warm/etc. Use --color-primary-lt (defined by every theme) so the
     streak toast follows the active palette. --color-text-inverse keeps the text
     readable on light themes where primary is light. */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  color: var(--color-text-inverse, #fff);
  padding: 14px 24px;
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  z-index: var(--z-fab);
  opacity: 0;
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  pointer-events: none;
  white-space: nowrap;
}
.streak-toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.streak-toast-emoji {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 4px;
}
/* NudgeUP-4bpy0: share button inside streak milestone toast */
.streak-toast-share {
  display: block;
  margin: 8px auto 0;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: transparent;
  color: var(--color-text-inverse, #fff);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1.5;
}
.streak-toast-share:hover { background: rgba(255,255,255,0.15); }

/* ── Nudge Time / Push Notifications ──────────────────────────────────────── */
/* ── Security / 2FA section ───────────────────────────────────────────────── */
.security-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
}
/* Security score card (NudgeUP-pve9) */
.security-score-card {
  border-color: var(--color-border);
}
.security-score-meter {
  height: 8px;
  background: var(--color-border);
  border-radius: 9999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.security-score-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-success, #22c55e);
  transition: width 0.4s ease, background var(--transition-slow) ease;
}
.security-score-bar.score-red   { background: var(--color-error,   #ef4444); }
.security-score-bar.score-amber { background: var(--color-warning,  #f59e0b); }
.security-score-bar.score-green { background: var(--color-success,  #22c55e); }
.security-score-pct {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.security-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.security-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.security-check-item:hover {
  background: var(--color-border);
}
.check-icon {
  font-size: 1rem;
  min-width: 20px;
  text-align: center;
}
/* ::before pseudo-element rules removed — JS sets icon.textContent directly (NudgeUP-ed1v) */
.security-check-item.check-pass .check-icon,
.security-check-item.check-fail .check-icon { font-style: normal; }
.check-label {
  color: var(--color-text);
  flex: 1;
}
.mfa-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* Last sign-in geolocation (NudgeUP-48l8) */
.last-signin-geo { padding: 10px 16px; margin-bottom: 12px; }
.last-signin-geo-text { margin: 0; font-size: 0.85rem; }

/* OTP code input — large monospace digits */
.otp-input {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 10px 12px;
  width: 100%;
}
.otp-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
/* MFA QR code container */
.mfa-qr-container {
  display: flex;
  justify-content: center;
  margin: 12px auto;
  max-width: 200px;
}
.mfa-qr-container svg,
.mfa-qr-container img {
  width: 180px !important;
  height: 180px !important;
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
}
/* Inline TOTP secret */
.mfa-secret-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  user-select: all;
  word-break: break-all;
}
/* Recovery codes grid */
.recovery-codes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.recovery-code-item {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  color: var(--color-primary-lt);
}
/* Danger-outline button (disable MFA) */
.btn-danger-outline {
  background: none;
  border: 1.5px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-danger-outline:hover { background: rgba(239,68,68,0.08); }

.nudge-time-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
}
.settings-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}
.nudge-time-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.nudge-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.nudge-time-input {
  flex: 1 1 0%;
  min-width: 0;
  width: 0; /* force flex shrink for time/date inputs that have browser-imposed min-width */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 1rem;
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--transition-base);
}
.nudge-time-input:focus { border-color: var(--color-primary); }
.btn-sm {
  font-size: 0.8125rem;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity var(--transition-base), transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sm:active { transform: scale(0.97); }
/* When .btn-sm is used alongside .btn-secondary/.btn-primary inside a flex row,
   reset the full-width/block defaults so flex-shrink:0 works correctly and the
   adjacent input can flex-grow without collapsing. */
.btn-sm.btn-secondary,
.btn-sm.btn-primary {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex-shrink: 0;
}
.btn-push-subscribe {
  width: 100%;
  background: rgba(124,58,237,0.12);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: rgba(124,58,237,0.40);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  color: var(--color-primary-lt);
  font-size: 0.875rem;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base), opacity var(--transition-base);
}
.btn-push-subscribe:hover:not(:disabled) {
  background: rgba(124,58,237,0.20);
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.btn-push-subscribe:disabled {
  opacity: 0.55;
  cursor: default;
}
.push-status {
  font-size: 0.8rem;
  margin: 8px 0 0;
}
.push-status-ok    { color: var(--color-success, #22c55e); }
.push-status-error { color: var(--color-danger); }
.push-status.error { color: var(--color-danger); } /* legacy alias */

.input-char-count {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
}
.input-char-count.char-count-warning {
  color: var(--color-error, #ef4444);
  font-weight: 600;
}
.input-char-count.char-count-over {
  color: var(--color-error, #ef4444);
  font-weight: 700;
}

/* ── Coach name chips (NudgeUP-49ab) ──────────────────────────────────────── */
.coach-name-chips,
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.coach-chip {
  background: rgba(124,58,237,0.12);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid rgba(124,58,237,0.30);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-primary-lt);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.coach-chip:hover,
.coach-chip:focus-visible {
  background: rgba(124,58,237,0.25);
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-color: var(--color-primary);
  outline: none;
}

/* ── ADHD Mode (NudgeUP-0a4gk) ─────────────────────────────────────────────── */
/* Settings section: master toggle + "what's hardest?" preset chips. */
.adhd-hardest-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.adhd-hardest-label {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}
.adhd-hardest-chips,
.ob-hardest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.adhd-chip,
.ob-hardest-chip {
  background: rgba(124,58,237,0.10);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid rgba(124,58,237,0.28);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  color: var(--color-text);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s;
}
.adhd-chip:hover,
.adhd-chip:focus-visible,
.ob-hardest-chip:hover,
.ob-hardest-chip:focus-visible {
  background: rgba(124,58,237,0.20);
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
  outline: none;
}
.adhd-chip:active,
.ob-hardest-chip:active { transform: scale(0.97); }
.adhd-chip.selected,
.ob-hardest-chip.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
/* Per-feature opt-ins (NudgeUP-vee2b) — shown only when ADHD Mode is on. */
.adhd-optins-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.adhd-optin-row { align-items: flex-start; }
/* NudgeUP-fr8n7: "Coming soon" state — delivery (szjhu) is post-beta, so these
   opt-ins are disabled + badged and fire nothing yet. Dim the row so it reads as
   not-yet-active, and gray out the disabled toggle so it can't look "on". */
.adhd-optin-row:has(input:disabled) { opacity: 0.72; }
.adhd-optin-row input:disabled + .toggle-slider {
  cursor: not-allowed;
  opacity: 0.6;
}
.adhd-optin-soon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 16%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}
.adhd-optin-hint {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
  max-width: 30ch;
}
/* Sensitive (meds) opt-in — subtle warm highlight so it reads as "personal". */
.adhd-optin-sensitive {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 4px;
}
.adhd-meds-privacy {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
/* Onboarding "what's hardest?" slide — stack chips full-width for thumb reach. */
.ob-hardest-chips {
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  margin: 14px auto 18px;
}
.ob-hardest-chip {
  width: 100%;
  text-align: left;
  font-size: 0.95rem;
  padding: 12px 16px;
}

/* ── Curated reshape bundle behaviour hook (NudgeUP-0a4gk) ──────────────────── */
/* ONE switch reshapes the app for an ADHD brain. Foundation layer: softer,
   calmer visual rhythm (downstream features layer on next wave). Kept subtle
   and free of motion that could trigger vestibular discomfort. */
body.adhd-mode {
  --adhd-mode: 1;  /* sentinel custom prop downstream features can read */
}
/* Gentle, shame-free framing: take the visual heat out of overdue chrome so a
   missed task reads as "still here" (warm amber) rather than a red alarm. */
body.adhd-mode .task-card-overdue {
  border-left-color: color-mix(in srgb, var(--color-warning, #f59e0b) 60%, transparent);
}
/* Overwhelm reduction: a touch more breathing room between tasks. */
body.adhd-mode .task-card { margin-bottom: 10px; }
/* Calmer chrome — soften any pulsing/attention-grabbing animation while ADHD
   Mode is on so the app feels steady, not noisy. */
body.adhd-mode .pulse,
body.adhd-mode .animate-pulse { animation: none !important; }

/* NudgeUP-dgm73: ADHD "done list" — a warm summary of what got finished today,
   to counter the negativity/RSD bias of only seeing the undone pile. Soft green
   "win" framing, never loud. JS adds .hidden when ADHD Mode is off or nothing
   is done yet, so this only paints when there's something to celebrate. */
.adhd-done-list {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-success, #16a34a) 10%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 28%, transparent);
}
.adhd-done-list.hidden { display: none; }
.adhd-done-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adhd-done-emoji { font-size: 1.1rem; line-height: 1; }
.adhd-done-headline {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #f5f5f5);
}
.adhd-done-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.adhd-done-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted, #cfcfcf);
}
.adhd-done-check {
  color: var(--color-success, #16a34a);
  font-weight: 700;
  line-height: 1.35;
  flex: 0 0 auto;
}
.adhd-done-text { line-height: 1.35; }
.adhd-done-more {
  font-size: 0.82rem;
  color: var(--text-muted, #9a9a9a);
  margin-top: 2px;
  padding-left: 20px;
}
.adhd-done-foot {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #a8a8a8);
}

/* ADHD quick-win generator (NudgeUP-rvzq2) — surfaces the 3 smallest tasks. */
.adhd-quick-win {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent, #f59e0b) 12%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-accent, #f59e0b) 30%, transparent);
}
.adhd-quick-win.hidden { display: none; }
.adhd-qw-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adhd-qw-emoji { font-size: 1.1rem; line-height: 1; }
.adhd-qw-headline {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #f5f5f5);
}
.adhd-qw-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #a8a8a8);
}
.adhd-qw-items {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adhd-qw-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #f59e0b) 22%, transparent);
  background: var(--card-bg, rgba(255,255,255,0.04));
  color: var(--text, #f5f5f5);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transition-fast) ease, transform 0.1s ease;
}
.adhd-qw-item:hover {
  background: color-mix(in srgb, var(--color-accent, #f59e0b) 14%, var(--card-bg, rgba(255,255,255,0.04)));
}
.adhd-qw-item:active { transform: scale(0.98); }
.adhd-qw-check {
  color: var(--color-accent, #f59e0b);
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.adhd-qw-text {
  flex: 1 1 auto;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adhd-qw-mins {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted, #9a9a9a);
}

/* ADHD "2-minute starter" (NudgeUP-a2fgm) — offer a 2-min timer for the most
   aversive task; starting counts as a win. Uses the primary accent (vs the
   quick-win amber) so the two ADHD cards read as distinct nudges. */
.adhd-2min-starter {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary, #9B67F5) 12%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-primary, #9B67F5) 30%, transparent);
}
.adhd-2min-starter.hidden { display: none; }
.adhd-2m-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adhd-2m-emoji { font-size: 1.1rem; line-height: 1; }
.adhd-2m-headline {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #f5f5f5);
}
.adhd-2m-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #a8a8a8);
  line-height: 1.4;
}
.adhd-2m-task {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-primary, #9B67F5) 22%, transparent);
  background: var(--card-bg, rgba(255,255,255,0.04));
}
.adhd-2m-task-title {
  flex: 1 1 auto;
  font-size: 0.88rem;
  color: var(--text, #f5f5f5);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adhd-2m-size {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted, #9a9a9a);
}
.adhd-2m-start {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: var(--color-primary, #9B67F5);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast) ease, transform 0.1s ease;
}
.adhd-2m-start:hover { filter: brightness(1.08); }
.adhd-2m-start:active { transform: scale(0.98); }

/* ADHD "eat the frog" morning prompt (NudgeUP-jnzgi) — surfaces the one dreaded
   task first thing in the morning with extra coach support. Uses a warm red-orange
   accent so it reads as its own morning ritual card, distinct from the purple
   2-min starter and amber quick-win. Only shown 5am–11am when ADHD Mode is on. */
.adhd-eat-frog {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, #ef4444 10%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}
.adhd-eat-frog.hidden { display: none; }
.adhd-ef-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adhd-ef-emoji { font-size: 1.1rem; line-height: 1; }
.adhd-ef-headline {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #f5f5f5);
}
.adhd-ef-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #a8a8a8);
  line-height: 1.4;
}
.adhd-ef-task {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #ef4444 22%, transparent);
  background: var(--card-bg, rgba(255,255,255,0.04));
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.adhd-ef-task:hover {
  background: color-mix(in srgb, #ef4444 8%, var(--card-bg, rgba(255,255,255,0.04)));
}
.adhd-ef-task-title {
  flex: 1 1 auto;
  font-size: 0.88rem;
  color: var(--text, #f5f5f5);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adhd-ef-size {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted, #9a9a9a);
}
.adhd-ef-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
}
.adhd-ef-start {
  flex: 1 1 auto;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: var(--color-danger, #ef4444);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast) ease, transform 0.1s ease;
}
.adhd-ef-start:hover { filter: brightness(1.08); }
.adhd-ef-start:active { transform: scale(0.98); }
.adhd-ef-open {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #ef4444 36%, transparent);
  background: transparent;
  color: var(--text-muted, #a8a8a8);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.adhd-ef-open:hover {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: var(--text, #f5f5f5);
}
.adhd-ef-dismiss {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #9a9a9a);
  font-size: 0.78rem;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast) ease;
}
.adhd-ef-dismiss:hover { opacity: 1; }

/* ── NudgeUP-eemiq: 'Wrap up in 5' ADHD transition warning banner ─────────── */
/* Fixed strip above the bottom nav; shown 5 min before a timed task.
   Warm amber accent so it reads as a friendly heads-up, not an alarm. */
.adhd-wrapup-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, #F59E0B 14%, var(--color-surface, #1A1A2E));
  border: 1px solid color-mix(in srgb, #F59E0B 40%, transparent);
  box-shadow: var(--shadow-elevated);
  z-index: 1100;   /* above task list, below full-screen modals */
  animation: adhd-wrapup-slide-in var(--transition-slow) ease forwards;
}
.adhd-wrapup-banner.hidden { display: none; }
@keyframes adhd-wrapup-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .adhd-wrapup-banner { animation: none; }
}
.adhd-wrapup-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.adhd-wrapup-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adhd-wrapup-headline {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
  line-height: 1.3;
}
.adhd-wrapup-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted, #a8a8a8);
  line-height: 1.4;
}
.adhd-wrapup-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted, #a8a8a8);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color var(--transition-fast) ease;
}
.adhd-wrapup-dismiss:hover { color: var(--color-text, #f5f5f5); }

/* ── Reward Menu / Token Economy (NudgeUP-czvll) ──────────────────────────── */
/* Pro-gated ADHD feature: define rewards, earn tokens, cash in. */

/* Settings accordion Pro badge (reused across features) */
.settings-accordion-pro-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-primary, #9B67F5);
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1.6;
}

.reward-pro-gate { margin: 8px 0; }
.reward-pro-gate-hint {
  color: var(--text-muted, #a8a8a8);
  font-size: 0.88rem;
}

/* Balance pill */
.reward-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 8px 0 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary, #9B67F5) 12%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-primary, #9B67F5) 28%, transparent);
}
.reward-balance-label {
  font-size: 0.88rem;
  color: var(--text-muted, #a8a8a8);
}
.reward-token-balance {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary, #9B67F5);
}

/* Reward list */
.reward-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}
.reward-list-empty {
  font-size: 0.85rem;
  color: var(--text-muted, #a8a8a8);
  text-align: center;
  padding: 12px 0;
}
.reward-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  background: var(--card-bg, rgba(255,255,255,0.04));
}
.reward-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.reward-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #f5f5f5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.reward-item-cost {
  font-size: 0.78rem;
  color: var(--text-muted, #a8a8a8);
}
.reward-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.reward-cashin-btn { white-space: nowrap; }
.reward-cashin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Add reward form */
.reward-add-form { margin-top: 4px; }
.reward-add-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #c0c0c0);
  margin: 0 0 8px;
}
.reward-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.reward-add-name {
  flex: 1 1 140px;
  min-width: 0;
}
.reward-cost-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.reward-add-cost {
  width: 56px;
  text-align: center;
}
.reward-cost-label {
  font-size: 0.8rem;
  color: var(--text-muted, #a8a8a8);
  white-space: nowrap;
}

/* Coach voice gender toggle (NudgeUP-i77f) */
.coach-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.coach-voice-label {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  min-width: 36px;
}
.coach-voice-toggle {
  display: flex;
  gap: 4px;
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 20px;
  padding: 3px;
}
.coach-voice-btn {
  background: none;
  border: none;
  border-radius: 16px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.coach-voice-btn.active,
.coach-voice-btn[aria-pressed="true"] {
  background: var(--color-primary, #9B67F5);
  color: #fff;
}
.coach-voice-btn:hover:not(.active) { color: var(--text, #fff); }
.coach-voice-status {
  font-size: 0.75rem;
  color: var(--color-success, #22c55e);
  transition: opacity var(--transition-slow);
}
.coach-voice-status.hidden { display: none; }

/* ── Coach memory card (NudgeUP-93ks) ─────────────────────────────────────── */
.coach-memory-card {
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid rgba(155,103,245,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
}
.coach-memory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.coach-memory-header[aria-expanded="true"] { margin-bottom: 10px; }
.coach-memory-chevron { font-size: 1rem; color: var(--muted, #888); transition: transform var(--transition-base); }
.coach-memory-header[aria-expanded="true"] .coach-memory-chevron { transform: rotate(90deg); }
.coach-memory-body { padding-top: 8px; }
.coach-memory-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #9b67f5);
  opacity: 0.85;
}
.coach-memory-badge {
  font-size: 0.7rem;
  color: var(--muted, #888);
}
.coach-memory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* NudgeUP-1jszz: tone insight — a subtle highlighted line above the memory list. */
.coach-memory-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Matches the .coach-memory-entry purple tint, with a stronger accent edge.
     Accent + text track the active theme via --color-* tokens (a11y token-driven). */
  background: rgba(155,103,245,0.12);
  border-left: 3px solid var(--color-accent, var(--accent, #9b67f5));
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text, var(--text, #e0e0e0));
}
.coach-memory-insight-icon {
  flex: none;
  line-height: 1.45;
}
.coach-memory-insight-text {
  flex: 1 1 auto;
}
.coach-memory-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(155,103,245,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #e0e0e0);
}
.coach-memory-text {
  flex: 1;
}
.coach-memory-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted, #888);
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}
.coach-memory-delete:hover { opacity: 1; color: #ef4444; }
.coach-memory-empty {
  font-size: 0.8rem;
  color: var(--muted, #888);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}
.coach-memory-error {
  color: var(--color-text-muted, #999);
  font-style: normal;
}
/* Friendly empty state for new users (NudgeUP-dqi5) */
.coach-memory-emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 8px 10px;
}
.coach-memory-emptystate-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.coach-memory-emptystate-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text, #e0e0e0);
  margin: 2px 0 0;
}
.coach-memory-emptystate-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted, #888);
  margin: 0;
  max-width: 30ch;
}
.coach-memory-emptystate-cta {
  margin-top: 8px;
  font-size: 0.78rem;
  padding: 8px 16px;
}
.coach-memory-retry {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-style: italic;
  color: var(--accent, #9b67f5);
  cursor: pointer;
  text-decoration: underline;
}
.coach-memory-retry:hover { opacity: 0.8; }
.coach-memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.coach-memory-tag {
  font-size: 0.65rem;
  background: rgba(155,103,245,0.15);
  color: var(--accent, #9b67f5);
  border-radius: 99px;
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.coach-memory-age {
  display: block;
  font-size: 0.65rem;
  color: var(--muted, #888);
  margin-top: 3px;
}
.coach-memory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
/* NudgeUP-8pxoj: coach trust / privacy panel — why this works + one-tap clear */
.coach-trust-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coach-trust-why {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.coach-trust-icon {
  flex: none;
  margin-top: 1px;
  color: var(--color-accent, var(--accent, #9b67f5));
}
.coach-trust-why-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text, var(--text, #e0e0e0));
  margin: 0 0 3px;
}
.coach-trust-why-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-text-muted, var(--muted, #888));
  margin: 0;
}
.coach-trust-clear {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  padding: 6px 12px;
}
.coach-trust-clear svg { flex: none; }
/* Capture the user's own "why" / motivation (NudgeUP-chzb7) */
.coach-why-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-why-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.coach-why-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
}
.coach-why-form-actions {
  display: flex;
  gap: 8px;
}
/* Inline edit of a coach memory entry (NudgeUP-9ucb9) */
.coach-memory-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted, #888);
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.coach-memory-edit:hover { opacity: 1; color: var(--accent, #9b67f5); }
.coach-memory-edit svg { width: 14px; height: 14px; display: block; }
.coach-memory-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-memory-edit-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  font-size: 0.82rem;
}
.coach-memory-edit-actions {
  display: flex;
  gap: 8px;
}
/* Coach memory summary bullet list (NudgeUP-mh9g) */
.coach-memory-summary-list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-memory-summary-item {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #e0e0e0);
}
.coach-memory-summary-item .coach-memory-age {
  display: block;
}
.btn-destructive {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.3) !important;
}
.btn-destructive:hover {
  background: rgba(239,68,68,0.08) !important;
}

/* Onboarding slide coach input */
.ob-coach-input {
  width: 100%;
  max-width: 240px;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  text-align: center;
  margin: 12px auto 0;
  display: block;
}
.ob-coach-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Onboarding username hint (NudgeUP-4zbx) */
.ob-username-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 6px 0 16px;
  min-height: 1.2em;
}
.ob-username-hint.error { color: var(--color-danger); }
.ob-username-hint.valid { color: var(--color-success, #22c55e); }

/* NudgeUP-vmywf / NudgeUP-lopfa: username slide friction-reduction ─────────── */
/* (NudgeUP-lopfa removed the .ob-username-value-prop microcopy — the "optional,
   set later" reassurance now lives directly in the slide title + description.) */

/* NudgeUP-lopfa: compact layout for the username slide (worst PostHog drop-off).
   Shrinks the vertical rhythm so the input + primary CTA stay above the fold on a
   375px-wide phone, even with the on-screen keyboard open. */
.ob-content-compact { max-width: 380px; }
.ob-icon-sm {
  font-size: 2.75rem;
  margin-bottom: 14px;
}
.ob-desc-tight {
  margin-bottom: 16px;
}
.ob-content-compact .ob-username-hint {
  margin: 6px 0 14px;
}
.ob-content-compact .ob-next-btn {
  margin-top: 4px;
}
/* "Not now" skip button — more visible than the ghost ob-goto-app-btn so users
   can easily escape the username step without feeling stuck */
.ob-skip-username-btn {
  display: block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9999px;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 12px;
  padding: 10px 20px;
  width: 100%;
  text-align: center;
  transition: background var(--transition-fast);
}
.ob-skip-username-btn:hover,
.ob-skip-username-btn:focus-visible {
  background: rgba(255,255,255,0.14);
  color: #fff;
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}

/* ── Vibe filter tab ───────────────────────────────────────────────────────── */
.filter-btn-vibe {
  background: rgba(124,58,237,0.10);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: rgba(124,58,237,0.30) !important;
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  color: var(--color-primary-lt) !important;
}
.filter-btn-vibe.active {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* ── Vibe share button ─────────────────────────────────────────────────────── */
.vibe-share-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.btn-vibe-share {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  padding: 7px 14px;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.btn-vibe-share:hover:not(:disabled) {
  color: var(--color-primary-lt);
  border-color: var(--color-primary-lt);
}
.btn-vibe-share:disabled { opacity: 0.5; cursor: default; }

/* ── Vibe mood quick-tags (NudgeUP-qpn8) ────────────────────────────────── */
.vibe-tags-row { margin-top: 10px; }
.vibe-tags-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 6px;
}
.vibe-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vibe-tag-chip {
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.vibe-tag-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.vibe-tag-chip.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.vibe-tag-chip:disabled { opacity: 0.45; cursor: default; }

/* ── Close-your-day vibe CTA (NudgeUP-mkjy) ────────────────────────────── */
.all-done-vibe-cta {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.all-done-vibe-cta:hover { color: var(--color-text); }
/* NudgeUP-4bpy0: share button in all-done overlay */
.all-done-share {
  width: 100%;
  margin-top: 8px;
  font-size: 0.875rem;
}

/* ── Past coaching panel (NudgeUP-qn31) ─────────────────────────────────── */
.past-coaching-section {
  margin-top: 18px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.past-coaching-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.past-coaching-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.past-coaching-chevron {
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}
.past-coaching-toggle[aria-expanded="true"] .past-coaching-chevron { transform: rotate(90deg); }
.past-coaching-body { padding-top: 10px; }
.past-coaching-list { display: flex; flex-direction: column; gap: 6px; }
.past-coaching-entry {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 6px 10px;
  background: rgba(155,103,245,0.05);
  border-radius: 8px;
  line-height: 1.4;
}
.past-coaching-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.past-coaching-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(155,103,245,0.12);
  color: var(--color-primary);
}
.past-coaching-empty { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; margin: 0; }

/* ── AI category suggestion chip (NudgeUP-zy5j) ─────────────────────────── */
.ai-category-suggestion {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px dashed var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  opacity: 0.85;
}
.ai-cat-chip:hover { background: var(--color-primary); color: #fff; opacity: 1; }
.ai-cat-chip .ai-badge { font-size: 0.65rem; opacity: 0.7; }

/* ── Streak-risk banner (NudgeUP-xit5) ──────────────────────────────────── */
.streak-risk-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(239,68,68,0.08));
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.streak-risk-icon { font-size: 1.2rem; flex-shrink: 0; }
.streak-risk-msg  { flex: 1; font-size: 0.88rem; line-height: 1.4; margin: 0; color: var(--color-text); }
.streak-risk-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.streak-risk-dismiss:hover { color: var(--color-text); }

/* ── Stuck-task proactive nudge (NudgeUP-lcfyz) ────────────────────────── */
.stuck-task-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(99,102,241,0.07));
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.stuck-task-nudge.hidden { display: none; }
.stuck-task-nudge-icon { font-size: 1.2rem; flex-shrink: 0; }
.stuck-task-nudge-body { flex: 1; min-width: 0; }
.stuck-task-nudge-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stuck-task-nudge-sub {
  font-size: 0.8rem;
  margin: 0;
  color: var(--color-text-muted);
}
.stuck-task-nudge-cta {
  flex-shrink: 0;
  background: var(--color-primary, #7c3aed);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.stuck-task-nudge-cta:hover { opacity: 0.85; }
.stuck-task-nudge-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.stuck-task-nudge-dismiss:hover { color: var(--color-text); }

/* ── Weekly AI summary card (NudgeUP-0yvb) ─────────────────────────────── */
.weekly-summary-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(6,182,212,0.07));
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.weekly-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.weekly-summary-icon { font-size: 1.1rem; flex-shrink: 0; }
.weekly-summary-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.weekly-summary-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.weekly-summary-dismiss:hover { color: var(--color-text); }
.weekly-summary-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* ── Weekly Gemini insight card (NudgeUP-l8px) ──────────────────────────── */
.weekly-insight-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.08));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.weekly-insight-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.weekly-insight-icon { font-size: 1.1rem; flex-shrink: 0; }
.weekly-insight-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.weekly-insight-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.weekly-insight-dismiss:hover { color: var(--color-text); }
.weekly-insight-summary {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 6px;
}
.weekly-insight-tip {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(245,158,11,0.9);
  font-style: italic;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(245,158,11,0.18);
}

/* In-app weekly vibe-trend insight (NudgeUP-aqb7) — single-line, lighter than email */
.vibe-trend-insight-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(124,58,237,0.08));
  border: 1px solid rgba(6,182,212,0.30);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.vibe-trend-insight-icon { font-size: 1.05rem; flex-shrink: 0; }
.vibe-trend-insight-text {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0;
}
.vibe-trend-insight-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.vibe-trend-insight-dismiss:hover { color: var(--color-text); }

/* ── Smart timing insight chip (NudgeUP-in5xm) ──────────────────────────── */
.timing-insight-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(234,179,8,0.10), rgba(245,158,11,0.07));
  border: 1px solid rgba(234,179,8,0.30);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.timing-insight-icon { font-size: 1.05rem; flex-shrink: 0; }
.timing-insight-text {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0;
}
.timing-insight-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.timing-insight-dismiss:hover { color: var(--color-text); }

/* ── Clarity suggestion banner (NudgeUP-r7ku) ───────────────────────────── */
.clarity-suggest-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(99,102,241,0.06));
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-lg);
  padding: 9px 12px;
  margin-top: 8px;
  animation: slideDown 0.25s ease;
}
.clarity-suggest-text { flex: 1; font-size: 0.86rem; line-height: 1.4; color: var(--color-text); }
.clarity-suggest-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.clarity-suggest-dismiss:hover { color: var(--color-text); }

/* ── Vibe insights card (NudgeUP-jbd8) ──────────────────────────────────── */
/* Today's Day Plan card (NudgeUP-oz24) */
.day-plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary, #7c3aed);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.day-plan-card.hidden { display: none; }
.day-plan-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.day-plan-card-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary, #7c3aed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.day-plan-card-time {
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
}
.day-plan-card-body {
  font-size: 0.875rem;
  color: var(--color-text, #e5e7eb);
  line-height: 1.5;
  margin: 0 0 12px;
}
.day-plan-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-plan-dismiss-btn {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  border-color: transparent;
}
.day-plan-regen-btn {
  font-size: 0.8125rem;
  padding: 5px 14px;
}

.vibe-insights-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.vibe-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vibe-insights-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.vibe-insights-stats { display: flex; align-items: center; gap: 6px; }
.vibe-insights-badge { font-size: 0.78rem; font-weight: 600; color: var(--color-primary); }
.vibe-insights-trend-arrow { font-size: 1rem; font-weight: 700; }
.vibe-insights-trend-arrow.trend-up   { color: #22c55e; }
.vibe-insights-trend-arrow.trend-down { color: #ef4444; }
.vibe-insights-trend-arrow.trend-flat { color: var(--color-text-muted); }
.vibe-insights-sparkline { width: 100%; min-height: 60px; }
.vibe-insights-sparkline svg { overflow: visible; }
.vibe-insights-days { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.vibe-insights-day-label { font-size: 0.72rem; color: var(--color-text-muted); }
.vibe-insights-ai {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* ── Vibe sparkline (NudgeUP-hou) ─────────────────────────────────────────── */
.vibe-sparkline-section {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.sparkline-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.vibe-sparkline { width: 100%; min-height: 60px; }
.vibe-sparkline svg { overflow: visible; }

/* Recent vibe responses — re-rate last 3 (NudgeUP-y3b4) */
.vibe-recent-section {
  margin: 4px 0 8px;
}
.vibe-recent-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  text-align: center;
}
.vibe-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.vibe-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, transform 0.1s ease, background var(--transition-fast) ease;
  text-align: left;
}
.vibe-recent-chip:hover { border-color: var(--color-accent); }
.vibe-recent-chip:active { transform: scale(0.97); }
.vibe-recent-chip.active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft, var(--color-surface));
}
.vibe-recent-chip-emoji { font-size: 1.25rem; line-height: 1; }
.vibe-recent-chip-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.vibe-recent-chip-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: capitalize;
}
.vibe-recent-chip-sub {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

/* Vibe trend chip (NudgeUP-cupp) */
.vibe-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 12px;
  margin-top: 8px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.vibe-trend-chip.improving {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.25);
}
.vibe-trend-chip.dipping {
  background: rgba(251, 146, 60, 0.12);
  color: #d97706;
  border-color: rgba(251, 146, 60, 0.25);
}
.vibe-trend-chip.steady {
  background: var(--color-surface-raised, rgba(100,100,100,0.08));
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* Vibe check-in streak badge (NudgeUP-irxo) */
.vibe-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 14px;
  margin-top: 10px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: opacity var(--transition-base);
}
.vibe-streak-badge.streak-green {
  color: var(--color-success, #16a34a);
  background: color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success, #16a34a) 30%, transparent);
}
.vibe-streak-badge.streak-amber {
  color: var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning, #d97706) 30%, transparent);
}
.vibe-streak-badge.streak-purple {
  color: var(--color-primary, #7c3aed);
  background: color-mix(in srgb, var(--color-primary, #7c3aed) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary, #7c3aed) 30%, transparent);
}

/* ── Buds header buttons ──────────────────────────────────────────────────── */
.buds-header-btns { display: flex; align-items: center; gap: 8px; }
.btn-icon-sm {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.btn-icon-sm:hover { border-color: var(--color-primary); }

/* ── Report modal (NudgeUP-wh8) ──────────────────────────────────────────── */
.report-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.report-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.report-cat {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.report-cat.selected {
  border-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  font-weight: 600;
}
.btn-report-sm {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.btn-report-sm:hover { opacity: 1; color: var(--color-danger); }

/* ── Quick-react bar on received broadcast cards (NudgeUP-4kw / NudgeUP-665) ── */
/* Burst expand toggle (NudgeUP-m6kg + NudgeUP-qw1b) */
.btn-burst-expand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  transition: opacity var(--transition-fast) ease;
}
.btn-burst-expand:hover { text-decoration: underline; }
.burst-chevron {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform var(--transition-base) ease;
}
.burst-chevron.burst-chevron-open { transform: rotate(90deg); }
.burst-expand-inner {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height var(--transition-slow) ease;
}
.burst-expand-inner.burst-collapsed { max-height: 0; }
.burst-expand-inner li {
  font-size: 0.83rem;
  color: var(--color-text);
  padding: 4px 8px;
  background: var(--color-bg);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.burst-item-time { font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }

.broadcast-react-bar {
  margin-top: 7px;
}
/* NudgeUP-b3tw: gesture-friendly swipe row of the 5 top reactions.
   Horizontally scrollable on narrow screens so all stay on one line. */
.broadcast-react-top {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.broadcast-react-top::-webkit-scrollbar { display: none; }
.broadcast-react-top .btn-react { flex: 0 0 auto; }
/* Extended reaction set, revealed by the "more" expander */
.broadcast-react-more {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.broadcast-react-more[hidden] { display: none; }
/* "More" (⋯) expander pill — sits at the end of the swipe row */
.btn-react-more {
  flex: 0 0 auto;
  background: var(--color-surface-1, var(--color-surface-2));
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 2px 11px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-secondary, inherit);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.btn-react-more:hover { border-color: var(--color-primary); }
.btn-react-more[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.btn-react {
  background: var(--color-surface-1, var(--color-surface-2));
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.btn-react:hover { border-color: var(--color-primary); }
.btn-react.active {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.18);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* NudgeUP-b9e0: Nudge back chip — one-tap reply shortcut on received broadcasts */
.nudge-back-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  padding: 3px 11px;
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nudge-back-chip:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* ── Activity feed "N more" footer + load-more (NudgeUP-q5d6) ────────────── */
.activity-more-footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.activity-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  width: 100%;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--color-border, #e2e2ea);
  border-radius: 12px;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.activity-more-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
}
.activity-more-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #8a8a96);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 1px 8px;
  border-radius: 10px;
}

/* ── Voice broadcast transcript (NudgeUP-2rc) ───────────────────────────── */
.transcript-section {
  margin-top: 7px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.btn-show-transcript {
  background: none;
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: inherit;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-show-transcript:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.btn-show-transcript:disabled { opacity: 0.55; cursor: default; }
.transcript-text { margin-top: 4px; line-height: 1.45; color: var(--color-text); }
.transcript-conf-badge {
  display: inline-block;
  font-size: 0.7rem;
  background: rgba(255,200,0,0.15);
  color: #c8a200;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: middle;
}
/* NudgeUP-hf5n: amber badge for low-confidence transcripts (confidence < 0.7) */
.broadcast-low-confidence {
  font-size: 0.75rem;
  color: var(--color-warning);
}
.btn-retry-transcript {
  background: none;
  border: 1px solid rgba(200,162,0,0.4);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  color: #c8a200;
  font-family: inherit;
  margin-left: 6px;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
.btn-retry-transcript:hover:not(:disabled) { border-color: #c8a200; }
.btn-retry-transcript:disabled { opacity: 0.5; cursor: default; }
.transcript-retry-spinner { font-size: 0.72rem; color: var(--color-text-muted); margin-left: 4px; }

/* ── QR code modal (NudgeUP-45w) ────────────────────────────────────────── */
.qr-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.qr-container { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qr-code {
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  display: inline-flex;
}
.qr-nudge-id-text {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* ── Micro-animations ──────────────────────────────────────────────────────── */

/* Streak flame flicker */
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  25%       { transform: scale(1.08) rotate(2deg); }
  50%       { transform: scale(0.96) rotate(-1deg); }
  75%       { transform: scale(1.05) rotate(1deg); }
}
.streak-flame {
  display: inline-block;
  animation: flame-flicker 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* View crossfade transition */
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.active { animation: view-fade-in 0.2s ease; }

/* Pulse on empty state CTA button */
@keyframes pulse-add {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(124,58,237,0); }
}
.btn-add.pulse { animation: pulse-add 2s ease-in-out infinite; }
/* NudgeUP-uus5v: empty-state attention pulse now targets the always-visible
   inline quick-add input (the old #btn-add-task target was display:none). */
.inline-quick-add-input.pulse { animation: pulse-add 2s ease-in-out infinite; border-radius: 10px; }

/* Broadcast confetti particles */
@keyframes confetti-pop {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5); }
}
.confetti-particle {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-intro);
  animation: confetti-pop 0.6s ease-out forwards;
}

/* ── Password strength meter ────────────────────────────────────────────────── */
.pw-strength {
  margin-top: 6px;
}
.pw-strength-bar {
  display: flex;
  gap: 4px;
  height: 4px;
}
.pw-strength-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background var(--transition-base);
}
.pw-strength-label {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.pw-breach-warning {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 5px;
  line-height: 1.4;
}

/* Inline "email already registered" hint on the register form (NudgeUP-5ow3) */
.reg-email-hint {
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.reg-email-hint.taken {
  color: var(--color-danger);
}
.reg-email-hint .reg-email-signin {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Closed-beta invite copy (NudgeUP-14nn6) ──────────────────────────────── */
.reg-invite-copy {
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.reg-invite-copy a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Birthday display ──────────────────────────────────────────────────────── */
.birthday-saved-display {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

/* ── Founding Member badge (NudgeUP-xld) ─────────────────────────────────────── */
.founder-badge {
  display: inline-block;
  font-size: 0.75rem;
  vertical-align: middle;
  line-height: 1;
  animation: founder-shimmer 2.5s ease-in-out infinite;
  cursor: default;
  user-select: none;
}

@keyframes founder-shimmer {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.6; transform: scale(1.18); }
}

.founder-badge-lg {
  font-size: 1.25rem;
}

/* ── Name-prompt banner (NudgeUP-9u28) ───────────────────────── */
.name-prompt-banner {
  background: var(--color-card);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 4px;
}
.name-prompt-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
}
.name-prompt-row {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
}
.name-prompt-input {
  flex: 1 1 0%;
  width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  min-width: 0;
}
.name-prompt-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.name-prompt-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 8px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Trial→Pro CTA banner (NudgeUP-re05) ────────────────────────── */
.trial-cta-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-card)) 0%,
    var(--color-card) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 4px;
}
.trial-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.trial-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trial-cta-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.trial-cta-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.trial-cta-btn {
  flex-shrink: 0;
  width: auto;
  padding: 9px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* NudgeUP-wsrtr — Trial-to-Pro upgrade CTA inside pricing card */
.pricing-trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 14%, var(--color-card)) 0%,
    var(--color-card) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.pricing-trial-banner__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.pricing-trial-banner__days {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: right;
}

.profile-founding-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0 4px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.08));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 10px;
}

.profile-founding-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-founding-text strong {
  font-size: 0.875rem;
  color: var(--color-text);
}

.profile-founding-since {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Founding Member — additional styles (NudgeUP-xld) ───────────────────── */
.founding-badge {
  font-size: 0.75em;
  margin-left: 4px;
  animation: founding-shimmer 3s ease-in-out infinite;
}
.founding-border { box-shadow: 0 0 0 2px #9B67F5, 0 0 0 4px #06B6D4; }
.founding-member-card {
  background: linear-gradient(135deg, rgba(155,103,245,0.3), rgba(6,182,212,0.18));
  border: 1px solid #9B67F5;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  color: #9B67F5;
  margin: 12px 0;
}
@keyframes founding-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Referral Card (NudgeUP-o0x3) ───────────────────────────────────────── */
.referral-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
}
/* NudgeUP-vs8y6: Single-panel Share card — Nudge ID + copy-link + QR inline */
.share-nudge-id-block {
  text-align: center;
  padding: 14px 0 6px;
}
.share-nudge-id-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.share-nudge-id-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  line-height: 1;
}
/* Rewards accordion toggle */
.share-rewards-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  text-align: left;
  gap: 8px;
}
.share-rewards-toggle:hover { color: var(--color-text); }
.share-rewards-chevron {
  flex-shrink: 0;
  transition: transform var(--transition-base) ease;
  color: var(--color-text-muted);
}
.share-rewards-toggle--open .share-rewards-chevron {
  transform: rotate(180deg);
}
.share-rewards-panel {
  padding-top: 8px;
}
/* Keep legacy tab classes in case any old JS refs remain — noop */
.share-tabs { display: none; }
.share-tab-btn { display: none; }
.share-tab-panel { /* visible by default; hidden panel gets .hidden */ }

.referral-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 4px 0 10px;
  line-height: 1.5;
}
.referral-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}
.referral-stats-dot { color: var(--color-text-muted); }
.referral-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.referral-link-input {
  flex: 1;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}
.referral-qr canvas,
.referral-qr img { border-radius: 8px; }
.referral-note {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

/* Tier progress bar (NudgeUP-hir) */
.referral-tier-progress {
  margin: 12px 0 4px;
}
.referral-tier-bar-wrap {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.referral-tier-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 99px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.referral-tier-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 5px 0 0;
  text-align: center;
}

/* ── Referral invite-a-friend mechanic (NudgeUP-gj7c7) ─────────────────── */
/* Referred-user welcome banner */
.referral-referred-welcome {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.referral-referred-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.referral-referred-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.referral-referred-title {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
}
.referral-referred-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.referral-referred-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 4px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.referral-referred-dismiss:hover { color: var(--color-text); }

/* Referral progress chip */
.referral-progress-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.referral-progress-chip:hover { background: var(--color-surface); border-color: var(--color-primary); }
.referral-progress-chip-icon { font-size: 1rem; flex-shrink: 0; }
.referral-progress-chip-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-muted);
}
.referral-progress-chip-text strong {
  color: var(--color-text);
  margin-right: 4px;
}
.referral-progress-chip-chev { color: var(--color-text-muted); flex-shrink: 0; }

/* ── Group Burst Events (NudgeUP-fww) ────────────────────────────────────── */
.burst-section { margin-top: 20px; }
.burst-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.burst-section-title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.burst-list { display: flex; flex-direction: column; gap: 10px; }
.burst-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
}
.burst-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.burst-category-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.burst-card-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.burst-title { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.burst-countdown { font-size: 11px; color: var(--color-text-muted); }
.burst-creator-badge {
  font-size: 10px;
  background: rgba(124,58,237,0.15);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
}
.burst-members-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.burst-member-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.burst-member-dot.done { background: #22c55e; }
.burst-member-count { font-size: 12px; color: var(--color-text-muted); margin-left: 4px; }
.btn-burst-complete { width: 100%; justify-content: center; }
.burst-done-badge {
  font-size: 13px; color: #22c55e; font-weight: 600;
  display: block; text-align: center; padding: 4px 0;
}
.burst-empty { font-size: 13px; color: var(--color-text-muted); text-align: center; padding: 12px 0; margin: 0; }
.burst-modal-note { font-size: 12px; color: var(--color-text-muted); margin: 8px 0 0; }

/* ── Group Challenges (NudgeUP-pwhu) ─────────────────────────────────────── */
.challenges-section { margin-top: 20px; }
.challenges-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.challenges-section-title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.challenges-list { display: flex; flex-direction: column; gap: 10px; }
.challenge-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.challenge-card:hover { border-color: var(--color-primary); }
.challenge-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.challenge-category-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.challenge-card-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.challenge-name { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.challenge-goal { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
.challenge-deadline { font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; }
.challenge-deadline.ending-soon { color: var(--color-warning); font-weight: 600; }
.challenge-creator-badge {
  font-size: 10px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
}
.challenge-members-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.challenge-member-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface-2));
  color: var(--color-primary);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
}
.challenge-member-avatar.done-today::after {
  content: '\2705';
  font-size: 10px;
  position: absolute;
  bottom: -4px; right: -4px;
  background: var(--color-surface-2);
  border-radius: 50%;
  line-height: 1;
}
.challenge-member-count { font-size: 12px; color: var(--color-text-muted); margin-left: 2px; }
.challenge-progress-bar-wrap {
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}
.challenge-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--color-primary);
  transition: width 0.4s ease;
}
.challenge-empty { font-size: 13px; color: var(--color-text-muted); text-align: center; padding: 16px 0; margin: 0; }
.challenge-modal-note { font-size: 12px; color: var(--color-text-muted); margin: 10px 0 0; }
.form-label-required { color: var(--color-danger); }

/* Progress board modal */
.challenge-progress-body { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.challenge-progress-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.challenge-progress-member.is-done {
  border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 8%, var(--color-surface-2));
}
.challenge-progress-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface-2));
  color: var(--color-primary);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.challenge-progress-info { flex: 1; min-width: 0; }
.challenge-progress-name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.challenge-progress-stats { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.challenge-progress-status { font-size: 18px; flex-shrink: 0; }
.challenge-progress-actions { display: flex; flex-direction: column; margin-top: 4px; }
.challenge-checkin-done-badge {
  text-align: center; font-size: 14px; font-weight: 600; color: #22c55e;
  padding: 10px 0;
}

/* Buds tab toggle — ensure 4 tabs fit */
.buds-tab-toggle .buds-tab-btn { font-size: 12px; }

/* ── Referral Leaderboard (NudgeUP-cm4n) ─────────────────────────────────── */
.referral-leaderboard {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
}
.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.leaderboard-header .settings-section-title { margin: 0; }
.leaderboard-filter {
  display: flex;
  gap: 4px;
}
.leaderboard-filter-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.leaderboard-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-surface);
  font-size: 13px;
}
.leaderboard-row-me {
  border: 1px solid var(--color-primary);
  background: var(--color-surface-2);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.lb-rank {
  font-size: 15px;
  min-width: 28px;
  text-align: center;
}
.lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lb-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-name em { font-style: normal; color: var(--color-text-muted); font-size: 11px; }
.lb-delta {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 6px;
  flex-shrink: 0;
}
.lb-delta-up    { color: #22c55e; background: rgba(34,197,94,0.12);  background: color-mix(in srgb, #22c55e 12%, transparent); }
.lb-delta-down  { color: #ef4444; background: rgba(239,68,68,0.12);  background: color-mix(in srgb, #ef4444 12%, transparent); }
.lb-delta-same  { color: var(--color-text-muted); }
.lb-delta-new   { color: var(--color-primary); }
.lb-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.lb-count-label {
  font-weight: 400;
  color: var(--color-text-muted);
}
.leaderboard-loading,
.leaderboard-empty {
  list-style: none;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 16px 0;
}
.leaderboard-self-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}
.lb-self-label { color: var(--color-text-muted); }
.lb-self-hint  { color: var(--color-text-muted); font-style: italic; margin-left: auto; font-size: 11px; }

/* ── Changelog Modal (NudgeUP-sql) ───────────────────────────────────────── */
.changelog-modal-body { max-height: 60vh; overflow-y: auto; padding: 0 4px; }
.changelog-version-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: rgba(155,103,245,0.15); color: #9B67F5;
  border-radius: 99px; padding: 2px 10px; margin-bottom: 8px;
}
.changelog-release-date { font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.changelog-image { width: 100%; border-radius: 10px; margin-bottom: 12px; }
.changelog-body-text { font-size: 14px; line-height: 1.65; color: var(--color-text); white-space: pre-wrap; }
/* Beta welcome modal (NudgeUP-5dimn) */
.beta-welcome-list { list-style: none; margin: 4px 0 0; padding: 0; }
.beta-welcome-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5; color: var(--color-text);
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.beta-welcome-list li:last-child { border-bottom: none; }
.beta-welcome-emoji { font-size: 20px; line-height: 1.4; flex-shrink: 0; }
.beta-welcome-feedback {
  margin: 12px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-surface-2); border-radius: 10px; padding: 12px 14px;
}
/* NudgeUP-og1z2: beta-welcome refreshed framing + chip + nudge bar */
.beta-welcome-icon { display: flex; justify-content: center; margin-bottom: 4px; }
.beta-welcome-body p {
  margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--color-text);
}
.beta-welcome-body p:last-child { margin-bottom: 0; }
.beta-welcome-howto-title { margin-top: 4px !important; }
.beta-welcome-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--color-text-muted);
  min-width: 44px; min-height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.beta-welcome-close:hover { background: var(--color-surface-2); }

/* ── Beta-welcome modal: fit without internal scroll (fix/beta-modal-no-scroll) ──
   Scoped ONLY to #beta-welcome-modal so the shared .modal-sheet rule is untouched.
   The content is long, so we (a) give this one sheet a touch more height and
   (b) tighten the vertical rhythm so everything fits at 390x844 and 1440x900. */
#beta-welcome-modal .modal-sheet { max-height: 96vh; }

/* Shrink the icon (svg has hardcoded 48x48 attrs; CSS wins) + trim its gap */
#beta-welcome-modal .beta-welcome-icon { margin-bottom: 0; }
#beta-welcome-modal .beta-welcome-icon svg { width: 38px; height: 38px; }

/* Tighten the three inline-styled section wrappers (override inline padding) */
#beta-welcome-modal > .modal-sheet > div[style*="24px 20px 8px"] { padding: 12px 20px 2px !important; }
#beta-welcome-modal .beta-welcome-body { padding-top: 2px !important; }
#beta-welcome-modal > .modal-sheet > div[style*="16px 20px 24px"] { padding: 10px 20px calc(14px + env(safe-area-inset-bottom)) !important; }

/* Title: a hair smaller + tighter margins (override inline) */
#beta-welcome-modal #beta-welcome-title { font-size: 19px !important; line-height: 1.25 !important; margin: 2px 0 2px !important; }

/* Body paragraphs: tighten margins + line-height (stay >=13px) */
#beta-welcome-modal .beta-welcome-body p { margin-bottom: 5px; font-size: 13.5px; line-height: 1.4; }
#beta-welcome-modal .beta-welcome-howto-title { margin-top: 2px !important; margin-bottom: 4px; }

/* List items: trim vertical padding + line-height */
#beta-welcome-modal .beta-welcome-list { margin-top: 2px; }
#beta-welcome-modal .beta-welcome-list li { padding: 4px 0; font-size: 13.5px; line-height: 1.36; }

/* Secondary button gap a touch tighter (keeps >=44px tap targets via btn padding) */
#beta-welcome-modal #beta-welcome-report { margin-top: 8px !important; }

/* Drag handle eats 25px (5px + 20px margin); shrink the gap on this sheet only */
#beta-welcome-modal .modal-handle { margin-bottom: 6px; }

/* Desktop: dialog variant — give it a touch more room than the shared 85vh */
@media (min-width: 768px) {
  #beta-welcome-modal .modal-sheet { max-height: 92vh; }
}

/* Header Beta chip — original inline SVG beaker, never an emoji in chrome */
.beta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; margin-left: 8px;
  background: linear-gradient(135deg, rgba(155,103,245,0.16), rgba(6,182,212,0.16));
  border: 1px solid rgba(155,103,245,0.45);
  border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-primary, #9B67F5);
  line-height: 1;
  /* a11y: keep the tap target ~44px tall without bloating the visual pill */
  min-height: 28px; position: relative;
}
.beta-chip::after { content: ""; position: absolute; inset: -8px; }
.beta-chip:hover { filter: brightness(1.06); }
.beta-chip:focus-visible { outline: 2px solid var(--color-primary, #9B67F5); outline-offset: 2px; }
.beta-chip-icon { display: inline-flex; }
.beta-chip-label { display: inline-block; }

/* Periodic gentle feedback nudge bar — non-blocking, dismissible */
.beta-nudge-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin: 0;
  background: var(--color-surface-2, #f4f1fb);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px; color: var(--color-text);
}
.beta-nudge-text { flex: 1 1 auto; }
.beta-nudge-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.beta-nudge-report {
  background: var(--color-primary, #9B67F5); color: #fff; border: none;
  border-radius: 8px; padding: 8px 14px; min-height: 40px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.beta-nudge-report:hover { filter: brightness(1.05); }
.beta-nudge-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 16px; line-height: 1;
  min-width: 44px; min-height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.beta-nudge-dismiss:hover { background: var(--color-border); }
.beta-chip:focus-visible, .beta-nudge-report:focus-visible, .beta-nudge-dismiss:focus-visible {
  outline: 2px solid var(--color-primary, #9B67F5); outline-offset: 2px;
}
.changelog-inline-section {
  margin: 12px 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.changelog-inline-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 12px 16px; text-align: left;
  color: var(--color-text); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.changelog-inline-content {
  padding: 0 16px 12px; font-size: 13px; line-height: 1.6;
  color: var(--color-text-muted); white-space: pre-wrap;
}
.changelog-inline-content.hidden { display: none; }

/* Changelog History Sheet (NudgeUP-j7a4) */
.changelog-history-entry { padding: 16px 0; }
.changelog-history-divider { border-top: 1px solid var(--color-border, rgba(255,255,255,0.08)); }
.changelog-new-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  background: #22c55e;
  color: #fff;
  border-radius: 9999px;
  padding: 1px 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.about-changelog-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--color-primary, #7c3aed);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-changelog-link:hover { opacity: 0.8; }

/* Nav badge dot */
/* ── Profile nav new-item dot (B+E) ────────────────────────────────────────── */
.nav-new-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 1.5px solid var(--color-bg);
  animation: nav-dot-pulse 2s ease-in-out infinite;
}
@keyframes nav-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

.nav-btn.has-badge .nav-icon { position: relative; }
.nav-btn.has-badge .nav-icon::after {
  content: '';
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444;
  border: 1.5px solid var(--color-bg);
}

/* ── App Footer (NudgeUP-4x3) ────────────────────────────────────────────── */
.app-footer { text-align: center; padding: 16px; color: #999; font-size: 12px; }
.app-footer a { color: #9B67F5; text-decoration: none; }

/* ── About Modal (NudgeUP-4x3) ──────────────────────────────────────────── */
.about-version { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-bottom: 16px; }
.about-mission { font-size: 14px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 16px; }
.about-founder-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.about-founder-card strong { display: block; margin-bottom: 4px; }
.about-founder-card a { color: #9B67F5; text-decoration: none; }
.about-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; font-size: 13px; }
.about-links a { color: #9B67F5; text-decoration: none; }
.about-qr-section { text-align: center; }
.about-qr-section p { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }
.about-qr-wrap { display: inline-block; background: #fff; padding: 10px; border-radius: 10px; }

/* ── Version History (NudgeUP-ycfjx) ────────────────────────────────────── */
.about-vh-container {
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-2);
}
.about-vh-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--color-border);
}
.about-vh-entry { padding: 12px 14px; }
.about-vh-divider { border-top: 1px solid var(--color-border); }
.about-vh-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.about-vh-version {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: rgba(155,103,245,0.15);
  color: #9B67F5;
  border-radius: 99px;
  padding: 2px 10px;
}
.about-vh-date {
  font-size: 11px;
  color: var(--color-text-muted);
}
.about-vh-notes {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.about-vh-notes li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 3px;
}
.about-vh-notes li:last-child { margin-bottom: 0; }

/* NudgeUP-nby4: DryDev attribution nested at the bottom of Settings (theme-aware) */
.settings-attribution { text-align: center; margin: 20px 0 8px; font-size: 12px; color: var(--color-text-muted); }
.settings-attribution a { color: var(--color-text-muted); text-decoration: underline; }
.settings-attribution a:hover { color: var(--color-primary); }

/* ── CSV Import ─────────────────────────────────────────────────────────────── */
.import-section {
  margin-top: 24px;
  padding: 0 0 8px;
}
.import-desc {
  font-size: 13px;
  margin-bottom: 12px;
}
.import-gate {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.import-gate-msg {
  font-size: 13px;
  margin: 0 0 10px;
}
.import-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.import-drop-zone:hover,
.import-drop-zone.import-drag-over {
  border-color: var(--accent, #9B67F5);
  background: rgba(155,103,245,0.05);
}
.import-drop-zone svg {
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.import-drop-label {
  font-size: 14px;
  margin: 0 0 4px;
  line-height: 1.5;
}
.import-file-label {
  color: var(--accent, #9B67F5);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.import-drop-hint {
  font-size: 12px;
  margin: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.import-preview-msg {
  font-size: 13px;
  margin: 0 0 10px;
}
.import-table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
  max-height: 260px;
  overflow-y: auto;
}
.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.import-table th {
  background: var(--surface-2, rgba(255,255,255,0.06));
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.import-table td {
  padding: 6px 10px;
  border-top: 1px solid var(--color-border);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-row-dupe {
  opacity: 0.45;
}
.import-dupe-badge {
  display: inline-block;
  font-size: 10px;
  background: var(--surface-2, rgba(255,255,255,0.08));
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.import-preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
/* NudgeUP-yo3r4: Column mapping step */
.import-col-map {
  margin-bottom: 4px;
}
.import-col-map-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.import-col-map-hint {
  font-size: 12px;
  margin: 0 0 12px;
}
.import-col-map-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.import-col-map-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.import-col-map-label {
  font-size: 12px;
  font-weight: 600;
  min-width: 64px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.import-col-map-select {
  flex: 1;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--surface-1, var(--surface));
  color: var(--color-text);
  cursor: pointer;
  min-width: 0;
}
.import-col-map-select:focus {
  outline: 2px solid var(--accent, #9B67F5);
  outline-offset: 1px;
}
.import-col-map-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.import-undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 12px;
}
/* Simple app toast (used by import + voice) */
/* NudgeUP-b7gq: use --toast-bg/--toast-text/--toast-border (set per-theme) so
   toasts are legible on all 7 themes. Dark themes default to elevated-surface
   tokens; light themes (light-mode, white, warm) override to dark-pill/light-text. */
.app-toast {
  position: fixed;
  bottom: var(--toast-slot-1); /* NudgeUP-iyte6: shared bottom-center toast stack */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--toast-bg, #252438);
  border: 1px solid var(--toast-border, #2E2D42);
  color: var(--toast-text, #E8E8F0);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: var(--z-fab);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
  max-width: calc(100% - 32px); /* NudgeUP-uuq3: 100% not 100vw (vw includes scrollbar → overflow) */
}
.app-toast.app-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Subtle "Updated" indicator (NudgeUP-rcy8) ───────────────────────────────── */
/* Quiet pill that pulses at the top-center when live data changes under the user
   (realtime row or a refocus refetch), so an auto-refresh reads as intentional
   rather than a glitch. Distinct position from .app-toast (top vs bottom) so the
   two never collide. */
.updated-indicator {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-primary, #7c5cff);
  color: var(--color-text-inverse, #fff);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: var(--z-fab-label);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
  white-space: nowrap;
  max-width: calc(100% - 32px);
}
.updated-indicator.updated-indicator-show {
  opacity: 0.96;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .updated-indicator { transition: opacity var(--transition-base) ease; }
  .updated-indicator.updated-indicator-show { transform: translateX(-50%) translateY(0); }
}

/* ── NPS Survey Modal ──────────────────────────────────────────────────────── */
.modal-nps {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-nps.hidden { display: none; }
.modal-nps-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.modal-nps-card {
  position: relative;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: nps-pop 0.25s ease;
}
@keyframes nps-pop {
  from { opacity: 0; transform: scale(0.93) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-nps-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  color: var(--text-muted, #6b7280);
  font-size: 16px; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; line-height: 1;
  transition: background var(--transition-fast);
}
.modal-nps-close:hover { background: var(--surface-2, rgba(255,255,255,0.06)); }
.nps-icon { font-size: 32px; text-align: center; margin-bottom: 10px; }
.nps-title {
  font-size: 17px; font-weight: 700; text-align: center;
  color: var(--color-text, #f1f5f9); margin: 0 0 6px;
}
.nps-subtitle {
  font-size: 13px; text-align: center;
  color: var(--text-muted, #9ca3af); margin: 0 0 18px;
}
.nps-scale-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted, #9ca3af);
  margin-bottom: 6px;
}
.nps-buttons {
  display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap;
}
.nps-score-btn {
  flex: 1; min-width: 0;
  aspect-ratio: 1;
  border: 1.5px solid var(--color-border);
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: var(--color-text, #f1f5f9);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.12s;
}
.nps-score-btn:hover { border-color: var(--color-primary, #9B67F5); background: rgba(155,103,245,0.12); }
.nps-score-btn.selected.promoter  { background: rgba(34,197,94,0.2);  border-color: #22c55e; color: #22c55e; }
.nps-score-btn.selected.passive   { background: rgba(234,179,8,0.2);  border-color: #eab308; color: #eab308; }
.nps-score-btn.selected.detractor { background: rgba(239,68,68,0.2);  border-color: #ef4444; color: #ef4444; }
.nps-reason-wrap { margin-top: 16px; }
.nps-reason-wrap.hidden { display: none; }
.nps-reason-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.nps-optional { font-weight: 400; color: var(--text-muted, #9ca3af); }
.nps-reason-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1.5px solid var(--color-border);
  border-radius: 10px; padding: 10px 12px;
  color: var(--color-text); font-size: 14px; resize: vertical;
  font-family: inherit; min-height: 72px;
}
.nps-reason-input:focus { outline: none; border-color: var(--color-primary, #9B67F5); }
.nps-submit-btn { width: 100%; margin-top: 12px; }
.nps-privacy { font-size: 11px; text-align: center; color: var(--text-muted, #9ca3af); margin: 12px 0 0; }
.nps-thankyou-toast {
  position: fixed; bottom: 88px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--color-border);
  color: var(--color-text); padding: 10px 20px;
  border-radius: 20px; font-size: 14px;
  z-index: 1200; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: nps-pop 0.2s ease;
}

/* ── Churn Win-back Notice (NudgeUP-61p) ──────────────────────────────────── */
/* ── My Access trial progress bar (NudgeUP-yud) ─────────────────────────────── */
.trial-progress-wrap { margin-top: 10px; }
.trial-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.trial-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9B67F5, #D4604A);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.trial-progress-caption {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Share-a-win bar (NudgeUP-ig4k) ─────────────────────────────────────────── */
.share-win-bar {
  position: fixed;
  bottom: 80px; /* above nav bar */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1.5px solid #D4604A;
  border-radius: 30px;
  padding: 10px 20px 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
  z-index: 3000;
  white-space: nowrap;
  user-select: none;
}
.share-win-bar--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.share-win-emoji { font-size: 20px; }
.share-win-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #D4604A;
}
.share-win-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 0 0 0 6px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
}
.share-win-close:hover { opacity: 1; }

/* ── Notification pre-prompt bar (NudgeUP-32rzl) ────────────────────────────── */
/* Shown after first task completion in a session to explain value before
   triggering the browser permission dialog. Slides up from the bottom. */
.notif-preprompt-bar {
  position: fixed;
  bottom: 80px; /* above nav bar */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary, #9B67F5);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
  z-index: 3000;
  max-width: min(380px, calc(100vw - 32px));
  user-select: none;
}
.notif-preprompt-bar--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.notif-preprompt-icon { font-size: 22px; flex-shrink: 0; }
.notif-preprompt-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  line-height: 1.35;
}
.notif-preprompt-allow {
  background: var(--color-primary, #9B67F5);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-preprompt-allow:hover { opacity: 0.88; }
.notif-preprompt-later {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 0 0 0 4px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
  flex-shrink: 0;
}
.notif-preprompt-later:hover { opacity: 1; }

/* ── Offer banner (NudgeUP-iti) ────────────────────────────────────────────── */
/* NudgeUP-h4hw: floating bubble (same treatment as .signup-bonus-banner) so it is
   never clipped on desktop. Keeps its own gradient. Stacked at top: 182px below
   the bonus (70px) and trial (126px) bubbles so they never overlap. */
.offer-banner {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #D4604A, #9B67F5);
  color: #fff; font-size: 13px;
  position: fixed; top: 182px; left: 50%; transform: translateX(-50%);
  z-index: 250; width: max-content; max-width: min(92vw, 480px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(212, 96, 74, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  flex-wrap: wrap;
}
.offer-banner.hidden { display: none; }
.offer-banner-icon { font-size: 20px; flex-shrink: 0; }
.offer-banner-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offer-banner-headline { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-banner-text { font-size: 12px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-banner-cta {
  flex-shrink: 0; background: rgba(255,255,255,0.2); color: #fff;
  text-decoration: none; border-radius: 9999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.35); transition: background var(--transition-fast);
}
.offer-banner-cta:hover { background: rgba(255,255,255,0.32); }
.offer-banner-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.75); font-size: 16px;
  padding: 4px 6px; line-height: 1; border-radius: 50%; flex-shrink: 0;
}
.offer-banner-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* NudgeUP-h4hw: floating bubble (same treatment as .signup-bonus-banner) so it is
   never clipped on desktop. Keeps its own translucent violet background. Stacked
   at top: 238px below the bonus/trial/offer bubbles so they never overlap. */
.churn-notice {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background:
    linear-gradient(135deg, rgba(155,103,245,0.15), rgba(99,102,241,0.12)),
    var(--color-surface);
  border: 1px solid rgba(155,103,245,0.35);
  font-size: 13px; color: var(--color-text);
  position: fixed; top: 238px; left: 50%; transform: translateX(-50%);
  z-index: 250; width: max-content; max-width: min(92vw, 480px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
}
.churn-notice.hidden { display: none; }
.churn-notice-icon { font-size: 22px; flex-shrink: 0; }
.churn-notice-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.churn-notice-body strong { font-size: 14px; }
.churn-notice-body span { color: var(--text-muted, #9ca3af); }
.churn-notice-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #9ca3af); font-size: 18px;
  padding: 4px 6px; line-height: 1; border-radius: 50%;
  flex-shrink: 0;
}
.churn-notice-dismiss:hover { background: rgba(255,255,255,0.08); }

/* ── Session Management (NudgeUP-bzf) ─────────────────────────────────────── */
.sessions-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.session-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--color-surface-2, #f8f7ff); border-radius: 12px; border: 1px solid var(--color-border, #e8e4ff); gap: 12px; }
.session-card.current-session { border-color: #9B67F5; background: rgba(155,103,245,0.08); }
.session-info { flex: 1; min-width: 0; }
.session-device { font-weight: 600; font-size: 14px; color: var(--color-text, #1a1a2e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-meta { font-size: 12px; color: var(--color-text-muted, #888); margin-top: 3px; }
.session-badge { font-size: 11px; font-weight: 700; color: #9B67F5; background: rgba(155,103,245,0.15); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.btn-revoke { font-size: 12px; font-weight: 600; color: #ef4444; background: rgba(239,68,68,0.1); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); }
.btn-revoke:hover { background: rgba(239,68,68,0.2); }
.sessions-empty { text-align: center; color: var(--color-text-muted, #888); font-size: 14px; padding: 16px; }
.btn-revoke-all { width: 100%; padding: 12px; margin-top: 8px; background: none; border: 1.5px solid #ef4444; color: #ef4444; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 14px; transition: all var(--transition-fast); }
.btn-revoke-all:hover { background: rgba(239,68,68,0.08); }

/* ── Bug report FAB (NudgeUP-8tfc) ─────────────────────────────────────────── */
.bug-report-fab {
  position: fixed;
  /* Slot above the quick-add FAB so the two never overlap (NudgeUP-42cpq).
     40px wide vs the 52px quick-add column → nudge right by (52-40)/2 = 6px
     past the 18px column edge to centre it over the stack. */
  bottom: var(--fab-stack-2);
  right: 24px;
  width: 44px;   /* NudgeUP-iyte6: >=44px tap target */
  height: 44px;  /* NudgeUP-iyte6: >=44px tap target */
  background: var(--accent, #9B67F5);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 150;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bug-report-fab:hover  { opacity: 0.88; transform: scale(1.07); }
.bug-report-fab:active { transform: scale(0.95); }
.bug-report-fab:focus-visible { outline: 2px solid var(--accent, #9B67F5); outline-offset: 3px; }

/* ── Beta survey card (NudgeUP-dvz) ────────────────────────────────────────── */
.survey-card {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px); /* NudgeUP-iyte6: notch-safe */
  left: 16px;
  right: 16px;
  max-width: 400px;
  margin: 0 auto;
  background: var(--color-surface, #1C1B29);
  border: 1px solid var(--color-primary, #7C3AED);
  border-radius: 14px;
  padding: 14px 16px;
  z-index: 99;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slide-up-in 0.3s ease;
}
@keyframes slide-up-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.survey-card-text { flex: 1; font-size: 13px; color: var(--color-text, #E8E8F0); margin: 0; line-height: 1.4; }
.survey-card-btn  { font-size: 12px; padding: 6px 14px; white-space: nowrap; text-decoration: none; }
.survey-card-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #8E8EA0);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
/* On mobile the bottom-right FAB column (quick-add + bug-report) sits at the
   same band as these full-width cards; lift them clear of the stack so the
   FABs never overlap the card (NudgeUP-42cpq). */
@media (max-width: 767px) {
  .survey-card,
  .beta-pulse-card { bottom: var(--fab-stack-top); }
}

/* ── Beta feedback pulse (NudgeUP-dw9n) ────────────────────────────────── */
.beta-pulse-card {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px); /* NudgeUP-iyte6: notch-safe */
  left: 16px;
  right: 16px;
  max-width: 400px;
  /* NudgeUP-5ucmh: cap card height so it never overflows the viewport */
  max-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 48px);
  margin: 0 auto;
  background: var(--color-surface, #1C1B29);
  border: 1px solid var(--color-primary, #7C3AED);
  border-radius: 16px;
  padding: 0; /* NudgeUP-5ucmh: padding moved to inner children for scroll layout */
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: slide-up-in 0.3s ease;
  /* NudgeUP-5ucmh: flex column — header+body scroll, actions+privacy sticky */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.beta-pulse-card.hidden { display: none; }
/* NudgeUP-5ucmh: non-scrolling top section — padding restored here */
.beta-pulse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 16px 18px 0;
  flex-shrink: 0;
}
.beta-pulse-icon { font-size: 20px; flex-shrink: 0; }
.beta-pulse-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #E8E8F0);
  margin: 0;
}
.beta-pulse-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #8E8EA0);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.beta-pulse-close:hover { background: var(--color-surface-2, rgba(255,255,255,0.06)); }
.beta-pulse-subtitle {
  font-size: 13px;
  color: var(--color-text-muted, #8E8EA0);
  margin: 0 0 12px;
  padding: 0 18px; /* NudgeUP-5ucmh: horizontal padding since card padding removed */
  flex-shrink: 0;
}
/* NudgeUP-5ucmh: scrollable body — grows + scrolls between header and sticky footer */
.beta-pulse-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 18px 4px;
  -webkit-overflow-scrolling: touch;
}
.beta-pulse-step { margin-bottom: 4px; }
.beta-pulse-step.hidden { display: none; }
.beta-pulse-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #E8E8F0);
  margin: 0 0 8px;
}
.bp-optional { font-weight: 400; color: var(--color-text-muted, #8E8EA0); }
.beta-pulse-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 0 8px;
}
.bp-star {
  background: none;
  border: none;
  font-size: 34px;
  cursor: pointer;
  /* Unselected stars: clearly visible outline, not a near-invisible border tint.
     Was var(--border, rgba(255,255,255,0.12)) which rendered ~transparent and
     made the rating widget look empty/unselectable (NudgeUP-pvyz / mvye regression). */
  color: var(--color-text-muted, #8E8EA0);
  opacity: 0.55;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.1s, transform 0.1s, opacity 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.bp-star:hover,
.bp-star.active { color: #f59e0b; opacity: 1; }
.bp-star:hover  { transform: scale(1.15); }
.bp-star:focus-visible { outline: 2px solid var(--color-primary, #9B67F5); outline-offset: 2px; border-radius: 4px; }
.bp-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border: 1.5px solid var(--color-border, #2E2D42);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  min-height: 58px;
}
.bp-textarea:focus { outline: none; border-color: var(--color-primary, #9B67F5); }
/* NudgeUP-5ucmh: sticky footer — actions + privacy pin at bottom of card */
.beta-pulse-footer {
  flex-shrink: 0;
  padding: 0 18px 14px;
  background: var(--color-surface, #1C1B29);
}
.beta-pulse-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.bp-btn-back { flex-shrink: 0; }
.bp-btn-back.hidden { display: none; }
.bp-btn-next-wrap { flex: 1; display: block; }
.bp-btn-next { width: 100%; }
/* Unmistakable disabled state — muted grey fill, not faded purple (NudgeUP-mvye) */
.bp-btn-next:disabled,
.bp-btn-next[disabled] {
  background: var(--color-surface-2, #2a2a35) !important;
  color: var(--color-text-muted, #8E8EA0) !important;
  opacity: 0.85;
  box-shadow: none;
  cursor: not-allowed;
}
/* Helper hint under the stars — hidden once a rating is picked (NudgeUP-mvye) */
.bp-star-hint {
  font-size: 12px;
  text-align: center;
  color: var(--color-text-muted, #8E8EA0);
  margin: 0 0 4px;
  transition: opacity var(--transition-base);
}
.bp-star-hint.bp-hint-hidden { opacity: 0; visibility: hidden; }
.bp-star-hint.bp-hint-nudge { color: var(--color-primary, #9B67F5); font-weight: 600; }
/* Shake the star row when a disabled Next is tapped (NudgeUP-mvye) */
@keyframes bp-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.beta-pulse-stars.bp-shake { animation: bp-shake 0.4s ease; }
.beta-pulse-privacy {
  font-size: 11px;
  text-align: center;
  color: var(--color-text-muted, #8E8EA0);
  margin: 8px 0 0;
}

/* ── Announcement bar (NudgeUP-2u3) ─────────────────────────────────────── */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  gap: 12px;
}
.announcement-bar.hidden { display: none; }
.announcement-bar.info     { background: #1e3a5f; color: #93c5fd; }
.announcement-bar.warning  { background: #451a03; color: #fbbf24; }
.announcement-bar.critical { background: linear-gradient(90deg, #7f1d1d, #991b1b); color: white; }
.announcement-bar #announcement-dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  opacity: 0.7;
  flex-shrink: 0;
}
/* NudgeUP-n06hj: subtle hover when bar is clickable (has a link) */
.announcement-bar[data-link]:hover { opacity: 0.9; }

/* ── Sprint C: Skeleton loaders (NudgeUP-juir) ─────────────────────────── */
.skeleton-card { display:flex; align-items:center; gap:12px; padding:12px; }
.skeleton-avatar { width:40px; height:40px; border-radius:50%; background:var(--color-border); flex-shrink:0; }
.skeleton-lines { flex:1; display:flex; flex-direction:column; gap:6px; }
.skeleton-line { height:12px; border-radius:6px; background:var(--color-border);
  animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-line-wide { width:70%; }
.skeleton-line-narrow { width:40%; animation-delay:0.2s; }
@keyframes skeleton-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Sprint C: Avatar upload (NudgeUP-lr8) ──────────────────────────────── */
.profile-avatar-wrap { position:relative; cursor:pointer; display:inline-block; }
.profile-avatar-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }

/* NudgeUP-buo1: Camera icon tap-to-edit overlay */
.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
  pointer-events: none;
  color: #fff;
}
.profile-avatar-wrap:hover .avatar-edit-overlay,
.profile-avatar-wrap:focus-within .avatar-edit-overlay { opacity: 1; }

/* NudgeUP-buo1: SVG upload progress ring */
.avatar-upload-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.avatar-upload-ring.visible { opacity: 1; }
.avatar-ring-track {
  fill: none;
  stroke: rgba(155,103,245,0.2);
  stroke-width: 3;
}
.avatar-ring-fill {
  fill: none;
  stroke: var(--color-primary-lt, #9B67F5);
  stroke-width: 3;
  stroke-linecap: round;
  /* circumference = 2π×38 ≈ 238.76; start at top */
  stroke-dasharray: 238.76;
  stroke-dashoffset: 238.76;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.1s linear;
}
.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; }

/* ── Anti-bot: honeypot + Turnstile CAPTCHA (NudgeUP-8hhdq) ──────────────── */
/* Honeypot — pushed far off-screen rather than display:none so naive bots that
   skip hidden fields still autofill it. Never visible to humans. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
/* Turnstile widget wrapper — centred, with breathing room above the submit button.
   NudgeUP-4puxk (CLS): reserve the Cloudflare Turnstile iframe's rendered height
   (standard widget = 65px; verified rendered box ≈71px with the managed-mode
   wrapper) BEFORE it loads so resolving the iframe shifts nothing below it.
   align-items:center keeps the widget vertically centred in the reserve. */
.cf-turnstile-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
}
.cf-turnstile-wrap:not(:empty) {
  margin: 4px 0 14px;
}

/* ── Sprint C: Version badge (NudgeUP-4dz1) ─────────────────────────────── */
.profile-version-badge {
  font-size:10px;
  background:rgba(155,103,245,0.12);
  color:var(--color-accent-text, #9B67F5); /* NudgeUP-qbc2h a11y */
  border:1px solid rgba(155,103,245,0.25);
  border-radius:99px;
  padding:2px 8px;
  cursor:pointer;
  font-weight:600;
  margin-left:6px;
  display:inline-block;
  margin-top:4px;
}
.profile-version-badge:hover { background:rgba(155,103,245,0.2); }

/* ── Sprint C: Shutdown ritual (NudgeUP-hm3y) ───────────────────────────── */
#shutdown-modal {
  position:fixed; inset:0; z-index:300;
  background:var(--color-overlay);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#shutdown-modal.hidden { display:none; }
.shutdown-card { max-width:360px; width:100%; text-align:center; position:relative; }
.shutdown-card .modal-close {
  position:absolute; top:12px; right:12px;
  background:none; border:none; color:var(--color-text-muted);
  font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.shutdown-card .modal-close:hover { color:var(--color-text); }
.shutdown-card h2 { font-size:1.25rem; margin-bottom:4px; }
.shutdown-sub { color:var(--color-text-muted); font-size:0.875rem; margin-bottom:8px; }
.shutdown-rating { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:20px 0; }
.shutdown-btn {
  padding:10px 14px; border-radius:var(--radius-md); font-size:0.9rem;
  background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text); cursor:pointer; font-weight:600; transition:all var(--transition-fast);
}
.shutdown-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.shutdown-btn.selected { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.shutdown-note-wrap { display:flex; flex-direction:column; gap:10px; }
.shutdown-textarea {
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text); font-size:0.9rem; resize:vertical;
  font-family:var(--font);
}
.shutdown-textarea:focus { outline:none; border-color:var(--color-primary); }

/* NudgeUP-szz2s (§9.1): end-of-day reckoning block inside the shutdown modal. */
.shutdown-reckoning {
  text-align:left; background:var(--color-surface-2);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:12px 14px; margin:12px 0 4px;
}
.shutdown-reckoning.hidden { display:none; }
.reckoning-line { color:var(--color-text); font-size:0.9rem; line-height:1.45; margin:0; }
.reckoning-leftover-label { color:var(--color-text-muted); font-size:0.8rem; margin:10px 0 6px; }
.reckoning-leftover-list { display:flex; flex-wrap:wrap; gap:6px; }
.reckoning-leftover-chip {
  padding:6px 10px; border-radius:var(--radius-sm); font-size:0.8rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  color:var(--color-text); cursor:pointer; font-weight:600; transition:all var(--transition-fast);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reckoning-leftover-chip:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* NudgeUP-szz2s (§9.3): reschedule-mirror gentle prompt (coach voice, no shame). */
.reschedule-mirror-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  display:flex; justify-content:center; padding:12px;
  transform:translateY(120%); transition:transform var(--transition-base) ease; pointer-events:none;
}
.reschedule-mirror-sheet.reschedule-mirror-show { transform:translateY(0); pointer-events:auto; }
.reschedule-mirror-card {
  width:100%; max-width:440px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:0 8px 30px rgba(0,0,0,0.18); padding:16px;
}
.reschedule-mirror-msg { color:var(--color-text); font-size:0.92rem; line-height:1.5; margin:0 0 12px; }
.reschedule-mirror-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.reschedule-mirror-actions .btn-primary,
.reschedule-mirror-actions .btn-secondary { flex:1 1 auto; min-width:120px; }
.reschedule-mirror-dismiss {
  background:none; border:none; color:var(--color-text-muted);
  font-size:0.85rem; cursor:pointer; padding:8px; font-weight:600;
}
.reschedule-mirror-dismiss:hover { color:var(--color-text); }
@media (prefers-reduced-motion: reduce) {
  .reschedule-mirror-sheet { transition:none; }
}

/* ── Sprint C: End day button (NudgeUP-hm3y) ────────────────────────────── */
.tasks-header-btns { display:flex; align-items:center; gap:8px; }
.btn-end-day {
  font-size:0.75rem; padding:6px 10px; border-radius:var(--radius-sm);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text-muted); cursor:pointer; font-weight:600;
  white-space:nowrap; transition:all var(--transition-fast);
}
.btn-end-day:hover { color:var(--color-text); border-color:var(--color-text-muted); }

/* ── NudgeUP-mrv8q: Mobile Tasks header overflow fix ──────────────────────
   On narrow phones (≤560px) the "My Tasks" h2 + 4 labeled header buttons
   (Focus / 🌙 End day / Add many / Brain Dump) exceed the viewport width and
   cause horizontal page scroll.
   NudgeUP-deh8c: keep the PRIMARY CAPTURE buttons (Brain Dump + Add many)
   LABELED on mobile for discoverability — they're must-have capture features.
   Collapse ONLY the secondary actions (Focus / 🌙 End day) to icon-only here:
   the SVG/emoji icon stays, the trailing text labels are hidden (aria-label /
   title stay intact for a11y). Touch targets stay ≥40px. The labeled capture
   buttons WRAP below the h2 via the flex-wrap safety net rather than clipping.
   Desktop is unchanged (all four labeled). */
@media (max-width: 560px) {
  /* Safety net: let the header row wrap if labeled buttons + h2 don't fit */
  .view-header { flex-wrap: wrap; gap: 8px; }
  .tasks-header-btns { flex-wrap: wrap; gap: 6px; }

  /* Collapse only the secondary SVG-icon button (Focus) to icon-only.
     font-size:0 hides the trailing text node; the SVG keeps its width/height. */
  .tasks-header-btns .btn-focus-today {
    font-size: 0;
    gap: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    justify-content: center;
  }
  .tasks-header-btns .btn-focus-today svg {
    width: 18px;
    height: 18px;
  }

  /* #btn-end-day is a plain "🌙 End day" text node — hide the text, render the
     moon via a pseudo-element at full size so the icon survives font-size:0. */
  .tasks-header-btns .btn-end-day {
    font-size: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tasks-header-btns .btn-end-day::before {
    content: "🌙";
    font-size: 18px;
    line-height: 1;
  }
}

/* ── NudgeUP-rzraf: Mobile Buds header — icon-only Add-Bud button ─────────
   Mirrors the mrv8q Tasks-header treatment for consistency. The Buds view
   header is the "NudgeBuds" h2 + .buds-header-btns containing two already-
   compact emoji icon buttons (🔒 privacy, 📲 share) + a labeled "+ Add Bud"
   text button. On narrow phones the labeled button makes the row tight; the
   global .view-header { flex-wrap } (mrv8q) lets it wrap rather than clip, but
   for a tidy single line we collapse #btn-add-bud to an icon-only ➕ here.
   #btn-add-bud is a plain text node (no SVG) — same case as mrv8q's #btn-end-day:
   font-size:0 hides the label, a ::before pseudo renders the glyph at full size.
   aria-label="Add bud" keeps it accessible (it had only visible text before).
   The two emoji icon buttons stay as-is. Desktop is unchanged (label visible). */
@media (max-width: 560px) {
  .buds-header-btns { flex-wrap: wrap; gap: 6px; }

  .buds-header-btns .btn-add {
    font-size: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .buds-header-btns .btn-add::before {
    content: "➕";
    font-size: 18px;
    line-height: 1;
  }
}

/* ── Sprint C: Task-complete confetti (NudgeUP-fo1j) ────────────────────── */
/* Uses .task-confetti-particle to avoid conflicting with broadcast .confetti-particle */
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(-80px) rotate(720deg) scale(0); opacity: 0; }
}
.task-confetti-particle {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 8px; height: 8px; border-radius: 2px;
  animation: confetti-fall 0.7s ease-out forwards;
}
.announcement-bar #announcement-dismiss:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   NudgeUP-aehc — Futuristic motion layer (Cycle 15)
   All durations 150-250ms, spring easing. Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Button press micro-feedback ──────────────────────────────────────── */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-upgrade:active,
.btn-trial-upgrade:active,
.btn-danger:active,
.filter-btn:active,
.nav-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-upgrade,
.btn-trial-upgrade,
.btn-danger,
.filter-btn {
  transition: transform var(--transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

/* ── 2. Task card enter — slide in from bottom with stagger ──────────────── */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.task-card.card-entering {
  animation: card-enter 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: calc(var(--card-i, 0) * 40ms);
}

/* ── 3. Enhanced task-done shrink (extend existing fading-done) ──────────── */
.task-card.fading-done {
  opacity: 0.45;
  transform: scale(0.98);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
}

/* ── 4. Vibe emoji bounce on select ─────────────────────────────────────── */
@keyframes emoji-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  65%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
.vibe-emoji.bounce-once {
  animation: emoji-bounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 5. Nav active indicator — slide transition ───────────────────────────── */
.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 0 0 3px 3px;
  transition: transform var(--transition-base) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--transition-base);
  opacity: 0;
}
.nav-btn.active::before {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* ── 6. Broadcast send ripple ────────────────────────────────────────────── */
@keyframes btn-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.btn-ripple-once {
  animation: btn-ripple 0.55s ease-out;
}

/* ── 7. Streak count pulse when updated ──────────────────────────────────── */
@keyframes streak-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); color: var(--color-primary-lt); }
  100% { transform: scale(1); }
}
.streak-count.pop-once,
#header-streak-count.pop-once {
  animation: streak-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 8. Glassmorphism overlay enhancement ────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 9. prefers-reduced-motion — disable all custom animations ───────────── */
@media (prefers-reduced-motion: reduce) {
  .task-card.card-entering,
  .vibe-emoji.bounce-once,
  .btn-ripple-once,
  .streak-count.pop-once,
  #header-streak-count.pop-once,
  .btn-primary, .btn-secondary, .btn-ghost,
  .btn-upgrade, .btn-trial-upgrade, .btn-danger,
  .filter-btn, .nav-btn {
    animation: none !important;
    transition: none !important;
  }
  .nav-btn::before { transition: none !important; }
}

/* ── PWA Add-to-Home-Screen banner (NudgeUP-7m3k) ───────────────────────────── */
.pwa-install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 1200;
  width: min(420px, calc(100% - 24px)); /* NudgeUP-uuq3: 100% not 100vw (vw includes scrollbar → overflow) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface, #1e1e2e);
  color: var(--color-text, #fff);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: pwaBannerUp 0.3s ease;
}
.pwa-install-banner.hidden { display: none; }
@keyframes pwaBannerUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pwa-install-icon { font-size: 1.5rem; flex-shrink: 0; }
.pwa-install-text { flex: 1; font-size: 0.9rem; line-height: 1.35; margin: 0; }
.pwa-install-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pwa-install-yes {
  background: var(--color-accent, #9B67F5);
  color: #fff; border: none;
  padding: 8px 14px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.pwa-install-no {
  background: transparent;
  color: var(--color-text-muted, rgba(255,255,255,0.6));
  border: none; padding: 8px 10px; font-size: 0.82rem; cursor: pointer;
}

/* iOS manual-install modal */
.pwa-ios-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 20px;
}
.pwa-ios-modal.hidden { display: none; }
.pwa-ios-card {
  background: var(--color-surface, #1e1e2e);
  color: var(--color-text, #fff);
  border-radius: 16px; padding: 24px;
  width: min(360px, 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.pwa-ios-card h3 { margin: 0 0 14px; font-size: 1.15rem; }
.pwa-ios-share-icon { display: flex; justify-content: center; margin: 0 0 14px; }
.pwa-ios-steps { margin: 0 0 18px; padding-left: 20px; }
.pwa-ios-steps li { font-size: 0.92rem; line-height: 1.5; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .pwa-install-banner { animation: none; }
}

/* ── NudgeUP-7p98 additions ──────────────────────────────────────────────── */

/* Priority text chips (replaces color dot) */
.task-priority-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.task-priority-chip.priority-high   { background: rgba(239,68,68,0.15);  color: #EF4444; }
.task-priority-chip.priority-medium { background: rgba(245,158,11,0.15); color: #F59E0B; }
.task-priority-chip.priority-low    { background: rgba(107,114,128,0.15);color: #9CA3AF; }

/* Skeleton loader — NudgeUP-u7lc9: content-shaped placeholders matching .task-card */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
/* Shared shimmer fill used by task-skeleton pieces */
.task-card-skeleton .skeleton-line,
.skeleton-circle,
.skeleton-chip,
.skeleton-btn {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 4px;
}
/* Card wrapper — mirrors .task-card layout */
.task-card-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  box-shadow: var(--shadow-card);
}
/* Left column: check-circle placeholder */
.task-skel-left { flex-shrink: 0; }
.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* Body: title + meta rows */
.task-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.skeleton-title { height: 15px; margin-bottom: 0; }
.skeleton-meta  { height: 11px; }
/* Right: priority chip + 2 action btn placeholders */
.task-skel-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.skeleton-chip {
  width: 36px;
  height: 22px;
  border-radius: 9999px;
}
.skeleton-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
/* Stagger shimmer so cards don't all pulse in lockstep */
.task-card-skeleton:nth-child(2) .skeleton-line,
.task-card-skeleton:nth-child(2) .skeleton-circle,
.task-card-skeleton:nth-child(2) .skeleton-chip,
.task-card-skeleton:nth-child(2) .skeleton-btn { animation-delay: 0.18s; }
.task-card-skeleton:nth-child(3) .skeleton-line,
.task-card-skeleton:nth-child(3) .skeleton-circle,
.task-card-skeleton:nth-child(3) .skeleton-chip,
.task-card-skeleton:nth-child(3) .skeleton-btn { animation-delay: 0.36s; }
.task-card-skeleton:nth-child(4) .skeleton-line,
.task-card-skeleton:nth-child(4) .skeleton-circle,
.task-card-skeleton:nth-child(4) .skeleton-chip,
.task-card-skeleton:nth-child(4) .skeleton-btn { animation-delay: 0.54s; }
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .task-card-skeleton .skeleton-line,
  .skeleton-circle,
  .skeleton-chip,
  .skeleton-btn { animation: none; }
}

/* Error state */
.task-error-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
}
.task-error-state p { margin-bottom: 12px; }

/* Undo toast */
.undo-toast {
  position: fixed;
  bottom: var(--toast-slot-2); /* NudgeUP-iyte6: shared bottom-center toast stack */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  z-index: 5000;
  box-shadow: var(--shadow-elevated);
  white-space: nowrap;
}
.undo-toast-btn {
  background: none;
  border: none;
  color: var(--color-primary-lt);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.875rem;
}
.undo-toast-btn:hover { text-decoration: underline; }

/* 7-day streak dot row */
.streak-dot-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 6px 0 2px;
  cursor: pointer;
}
.streak-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  text-transform: uppercase;
  transition: background var(--transition-base);
}
.streak-dot-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* NudgeUP-c8y6: Quick-start block for new users */
.quick-start-block {
  padding: 16px 0 8px;
  text-align: center;
}
.qs-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}
.qs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0 4px;
}
.qs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s;
}
.qs-chip:hover,
.qs-chip:focus-visible {
  background: var(--accent, var(--color-primary));
  color: #fff;
  border-color: var(--accent, var(--color-primary));
  transform: translateY(-1px);
  outline: none;
}
.qs-chip:active {
  transform: translateY(0);
}
.qs-tagline {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* NudgeUP-c8y6: Returning user progress strip */
.task-progress-strip {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: 4px 0 2px;
  letter-spacing: 0.01em;
}

/* Profile section group labels */
.profile-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 20px 0 6px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}
/* First zone label — no top border/margin (NudgeUP-2jcv) */
.profile-section-label--first {
  border-top: none;
  margin-top: 4px;
  padding-top: 8px;
}
/* Settings zone hint text (NudgeUP-2jcv) */
.profile-settings-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  line-height: 1.4;
}
/* Quick-action full-width button in Me main view (NudgeUP-2jcv) */
.profile-quick-action-btn {
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  padding: 11px 14px;
  font-size: 0.9rem;
}

/* Empty state CTA */
.empty-state-cta {
  margin-top: 16px;
  padding: 10px 24px;
  font-size: 0.95rem;
}

/* NudgeUP-wvfyr: one-tap starter-task chips in the empty task list. Gentle,
   secondary affordance under the primary "Add your first task" CTA. */
.empty-starter-label {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.empty-starter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.empty-starter-chip {
  appearance: none;
  border: 1px solid var(--color-border, rgba(155,103,245,0.3));
  background: var(--color-surface-2, rgba(155,103,245,0.06));
  color: var(--color-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.empty-starter-chip:hover {
  background: rgba(155,103,245,0.14);
  border-color: var(--color-primary, #9B67F5);
}
.empty-starter-chip:active { transform: scale(0.97); }
.empty-starter-chip:focus-visible {
  outline: 2px solid var(--color-primary, #9B67F5);
  outline-offset: 2px;
}

/* Plan option pricing — total billed primary, per-month secondary */
.plan-option-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}
.plan-option-permonth {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.plan-popular-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Payment-failed badge (NudgeUP-fkzb) ───────────────────────────────────── */
.payment-failed-badge {
  background: #C8482E;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  animation: payBadgePulse 2s ease-in-out infinite;
}
.payment-failed-badge.hidden { display: none; }
@keyframes payBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,72,46,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(200,72,46,0); }
}
@media (prefers-reduced-motion: reduce) {
  .payment-failed-badge { animation: none; }
}

/* ── NudgeUP-2hp9: Vibe Check + AI Coach UX Polish ─────────────────────────── */

/* (1) Coach identity strip */
.vibe-coach-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.vibe-coach-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vibe-coach-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vibe-coach-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vibe-coach-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}
/* NudgeUP-sz6ha: Memory active badge */
.coach-memory-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-success, #10b981);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  padding: 1px 6px;
  cursor: default;
  user-select: none;
}
.coach-memory-active-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-success, #10b981);
  flex-shrink: 0;
}
.vibe-coach-tagline {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.vibe-coach-customize-btn {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.vibe-coach-customize-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* (2) Loading pulse on vibe-response.loading */
@keyframes vibe-loading-breathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 0.45; }
}
.vibe-response.loading {
  animation: vibe-loading-breathe 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vibe-response.loading { animation: none; }
}

/* (NudgeUP-f5zi) 'Your coach is thinking…' label above typing dots */
.coach-thinking-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 4px;
}

/* NudgeUP-wo5w: badge shown when a stream is interrupted mid-response */
.coach-incomplete-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-warning, #f59e0b);
  border: 1px solid var(--color-warning, #f59e0b);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
}

/* NudgeUP-pn2v: friendly error state for a slow/unavailable /api/ai call.
   Replaces the old dead-spinner / "AI service unavailable" jargon with a
   warm message + a Retry button. */
.vibe-response--error {
  border: 1px solid var(--color-warning, #f59e0b);
  background: var(--color-surface, #fff);
}
.vibe-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}
.vibe-error-msg {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text, #1f2937);
}
.vibe-error-retry {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #7c3aed);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity var(--transition-fast) ease;
}
.vibe-error-retry:hover { opacity: 0.9; }
.vibe-error-retry:active { transform: translateY(1px); }

/* (NudgeUP-s5e5) Coach confidence badge — subtle low/med/high conviction pill.
   Sits inline with the mode label; intentionally quiet so it informs without
   shouting. Colour-coded but with a text label so it reads without colour. */
.coach-confidence-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid currentColor;
  opacity: 0.9;
}
.coach-confidence-badge--high {
  color: var(--color-success, #10b981);
  background: rgba(16, 185, 129, 0.1);
}
.coach-confidence-badge--med {
  color: var(--color-primary-lt, #9b67f5);
  background: rgba(155, 103, 245, 0.1);
}
.coach-confidence-badge--low {
  color: var(--color-text-muted, #94a3b8);
  background: rgba(148, 163, 184, 0.12);
}

/* (NudgeUP-yw6x) Typing indicator — animated dots while Gemini responds */
@keyframes typingBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0 8px;
}
.typing-indicator span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: typingBounce 0.9s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .typing-indicator span { animation: none; opacity: 0.5; }
}

/* (3) Emoji range labels */
.vibe-emoji-labels {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 0;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  user-select: none;
}

/* (4) Mode button descriptors */
.vibe-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.vibe-mode-desc {
  font-size: 0.625rem;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* NudgeUP a11y-contrast: the Drill-Sergeant descriptor ("No excuses, soldier")
   inherited the button's mid-olive #6b7c3a and then the generic 0.7 fade above
   blended it toward the light drill-button surface (~#dcdae6 on theme-white),
   landing at ~#8d986e = 2.22:1 (well under AA). The generic descs are fine
   because they inherit high-contrast --color-text; only this olive one fails.
   Fix it in isolation: drop the fade and set an explicit olive per light/dark.
   BASE = light olive for the DARK themes (a dark olive would vanish on the dark
   drill bg). LIGHT themes override to a dark olive. Both verified ≥4.5:1. */
.vibe-mode-drill .vibe-mode-desc {
  opacity: 1;
  color: #9bb05f; /* light olive — ≥7.3:1 on every dark drill-button surface */
}
html.light-mode .vibe-mode-drill .vibe-mode-desc,
html.theme-white .vibe-mode-drill .vibe-mode-desc,
html.theme-warm  .vibe-mode-drill .vibe-mode-desc {
  color: #3f4a1f; /* dark olive — ≥6.8:1 on every light drill-button surface */
}

/* (5) Response max-height + fade on mobile */
.vibe-response {
  position: relative;
  max-height: 42vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.vibe-response::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
  margin-top: -32px;
}
/* Don't clip stuck card (it's short) */
.vibe-response.vibe-response--stuck { max-height: none; }

/* (6) First-time intro card */
.vibe-first-intro {
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(124,58,237,0.02) 100%);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vibe-intro-text {
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.5;
}
.vibe-intro-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
  opacity: 0.8;
}

/* ── Daily reflection question chip (NudgeUP-917e) ───────────────────────── */
.vibe-reflection-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(124,58,237,0.07));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.vibe-reflection-chip-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.vibe-reflection-chip-text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text);
  font-style: italic;
}
.vibe-reflection-chip-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.vibe-reflection-chip-dismiss:hover { opacity: 1; }

/* (8) Day plan task preview */
.vibe-dayplan-preview {
  padding: 10px 12px 10px;
  margin-bottom: 10px;
  background: rgba(124,58,237,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(124,58,237,0.12);
}
.vibe-dp-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-lt);
  margin: 0 0 6px;
}
.vibe-dp-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.6;
}
.vibe-dp-list li { margin-bottom: 2px; }

/* NudgeUP-4cqqa: inline "View plan →" button in the Vibe day-plan response —
   the working path to the ordered list (navigates to Tasks + applies order). */
.vibe-view-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.vibe-view-plan-btn:hover { background: var(--color-primary-lt, var(--color-primary)); }
.vibe-view-plan-btn:active { transform: scale(0.97); }
.vibe-view-plan-btn svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .vibe-view-plan-btn { transition: none; }
  .vibe-view-plan-btn:active { transform: none; }
}

/* (10) Share button as footer inside response — already has border-top via .vibe-share-row */
.btn-vibe-share {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

/* Responsive: remove max-height constraint on larger screens */
@media (min-height: 700px) {
  .vibe-response { max-height: 50vh; }
}
@media (min-height: 900px) {
  .vibe-response { max-height: none; overflow-y: visible; }
  .vibe-response::after { display: none; }
}

/* ── Weekly goal card (NudgeUP-yj2c) ──────────────────────────────────────── */
.weekly-goal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 12px;
}

.weekly-goal-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.weekly-goal-icon {
  font-size: 1.125rem;
  line-height: 1;
}

.weekly-goal-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  flex: 1;
}

.weekly-goal-complete-btn {
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.weekly-goal-complete-btn:hover:not(:disabled) {
  background: #22c55e18;
  border-color: #22c55e;
  color: #22c55e;
}
.weekly-goal-complete-btn:disabled {
  background: #22c55e18;
  border-color: #22c55e;
  color: #22c55e;
  cursor: default;
}

.weekly-goal-text {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
  line-height: 1.4;
}

.weekly-goal-nudge {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 8px 0 0;
}

/* Completed state */
.weekly-goal-card--done .weekly-goal-text {
  text-decoration: line-through;
  opacity: 0.55;
}

/* ── Weekly goal modal content (NudgeUP-yj2c) ─────────────────────────────── */
.weekly-goal-suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.weekly-goal-suggest-btn {
  font-size: 0.8125rem;
  padding: 6px 12px;
}

.weekly-goal-cf-prev {
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 10px 14px;
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: 0 0 4px;
  color: var(--color-text);
  line-height: 1.4;
}

.weekly-goal-cf-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.weekly-goal-cf-actions button {
  flex: 1;
}

/* ── Weekly goal modal positioning fix (NudgeUP-y5vy) ─────────────────────── */
/* The outer divs use class="modal-overlay hidden" but .modal-overlay has
   position:absolute — override to match .modal (fixed + z-index + flex) */
#weekly-goal-modal,
#weekly-goal-cf-modal {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#weekly-goal-modal.hidden,
#weekly-goal-cf-modal.hidden {
  display: none;
}

/* ── Welcome to Pro celebration modal (NudgeUP-pxlt) ──────────────────────── */
/* .modal-overlay is position:absolute with no layout — override to fixed/flex
   so the sheet anchors to the bottom of the viewport (matches weekly-goal fix). */
#pro-welcome-modal {
  position: fixed;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#pro-welcome-modal.hidden { display: none; }

.pro-welcome-sheet { text-align: center; }
.pro-welcome-burst {
  font-size: 3rem;
  line-height: 1;
  margin: 4px 0 8px;
  animation: pro-welcome-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pro-welcome-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.pro-welcome-heading {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.pro-welcome-sub {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.pro-welcome-features {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 10px;
}
.pro-welcome-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
}
.pro-welcome-features li span { font-size: 1.1rem; flex: 0 0 auto; }

.pro-tour-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 10px;
}
.pro-tour-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2, var(--color-surface));
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, transform 0.1s ease;
}
.pro-tour-item:hover,
.pro-tour-item:focus-visible {
  border-color: var(--color-primary, #9B67F5);
}
.pro-tour-item:active { transform: scale(0.99); }
.pro-tour-check {
  font-size: 1.15rem;
  flex: 0 0 auto;
  color: var(--color-primary, #9B67F5);
  font-weight: 700;
}
.pro-tour-text { font-size: 0.92rem; line-height: 1.35; }
.pro-tour-hint {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .pro-welcome-burst { animation: none !important; }
}

/* ── 7-day vibe mood strip (NudgeUP-elb2) ─────────────────────────────────── */
.mood-history-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.mood-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mood-history-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.mood-history-avg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.mood-history-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mood-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: default;
  transition: background var(--transition-fast);
}

/* Improvement #3 — color tints by mood score */
.mood-tint--high {
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 13%, transparent);
}
.mood-tint--low {
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 13%, transparent);
}

.mood-day-label {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.mood-day-emoji {
  font-size: 1.25rem;
  line-height: 1;
}

.mood-day-empty {
  font-size: 1rem;
  color: var(--color-border);
}

.mood-day-count {
  font-size: 0.5625rem;
  /* NudgeUP a11y-contrast: dropped `opacity: 0.7` — it faded --color-text-muted
     toward the light mint calendar surface (#f1fbf7) on theme-white, blending to
     ~#888bab and failing 4.5:1 (3.14:1). The full token clears AA on every theme
     (e.g. theme-white #5B5B8A on #f1fbf7 = 6.0:1); removing the fade only ever
     raises contrast, so no theme regresses. */
  color: var(--color-text-muted);
}

.mood-history-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 18px;
}

.mood-history-streak,
.mood-history-best {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.mood-empty-cta {
  width: 100%;
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 0.8125rem;
  color: var(--color-primary);
  cursor: pointer;
  text-align: center;
}
.mood-empty-cta:hover { background: var(--color-surface-raised, var(--color-surface)); }

/* ── Smart Nudge Hour (NudgeUP-2p80) ──────────────────────────────────────── */
.smart-nudge-section {
  margin-top: 10px;
}
.smart-nudge-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  padding: 10px 12px;
}
[data-theme="dark"] .smart-nudge-pill {
  background: linear-gradient(135deg, #2d1d5c 0%, #1e1b33 100%);
  border-color: #6d28d9;
}
.smart-nudge-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.smart-nudge-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.smart-nudge-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.smart-nudge-label strong {
  color: #7c3aed;
  font-weight: 700;
}
[data-theme="dark"] .smart-nudge-label strong {
  color: #a78bfa;
}
.smart-nudge-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.smart-nudge-reset {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.smart-nudge-reset:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* ── Shared fade-in keyframe (NudgeUP-4ghgb) ──────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── AI mood insight bubble (NudgeUP-je9y) ──────────────────────────────────── */
.mood-insight-wrap {
  padding: 2px 0 6px;
}
.mood-insight-bubble {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  padding: 10px 12px;
  animation: fadeIn 0.3s ease;
}
.mood-insight-avatar {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.mood-insight-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text);
  flex: 1;
}

/* ── Weekly coach digest card (NudgeUP-n5r7) ────────────────────────────────── */
.vibe-digest-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  animation: digestSlideIn 0.3s ease;
}
@keyframes digestSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vibe-digest-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.vibe-digest-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vibe-digest-coach-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  flex: 1;
}
.vibe-digest-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.vibe-digest-dismiss:hover { opacity: 1; }
.vibe-digest-text {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text);
}
.vibe-digest-opt-out {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  padding: 0;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.vibe-digest-opt-out:hover { opacity: 1; }

/* ── AI task prioritizer — 'Where to start?' (NudgeUP-o9a2) ─────────────────── */
.task-prioritizer-wrap {
  margin-bottom: 10px;
}
.task-prioritizer-btn {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform 0.1s;
}
.task-prioritizer-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.task-prioritizer-btn:active { transform: translateY(0); }
.task-prioritizer-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.task-prioritizer-bubble {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid #7c3aed;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  animation: fadeIn 0.3s ease;
}
.task-prioritizer-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.task-prioritizer-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text);
  flex: 1;
}
.task-prioritizer-reprioritize {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  padding: 0;
  text-decoration: underline;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  display: block;
}
.task-prioritizer-reprioritize:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP LAYOUT — Sidebar Navigation  (≥768px)
   Mobile layout (bottom-nav, app-main padding) untouched
═══════════════════════════════════════════════════════════ */

/* Sidebar hidden by default (mobile-first) */
.sidebar-desktop {
  display: none;
}

@media (min-width: 768px) {
  /* Hide bottom nav */
  .bottom-nav { display: none !important; }

  /* ── NudgeUP-5cmta cleanup: hide the redundant top app-header as soon as the
     sidebar appears (≥768px), not at 1024px. The sidebar already provides the
     logo/wordmark "NudgeUP", Beta, Theme, the account card, and Vibe/Me nav, so
     the header only duplicated them — and at 768–1023px the header's branding
     collided with the fixed z-index:200 sidebar (the "NudgeUP" overlap). Sign-out
     stays reachable on the Me page; the streak shows in the task progress strip.
     (The header was already hidden at ≥1024px — this just closes the 768–1023 gap
     that left both visible.) */
  .app-header { display: none; }

  /* ── Sidebar ── */
  .sidebar-desktop {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* --top-banner-h is set by updateTopBannerOffset() in app.js to the summed
       height of all visible top-of-body banners (announcement / offline / birthday
       / streak), so the fixed sidebar always clears them at any window width. */
    top: var(--top-banner-h, 0px); left: 0; bottom: 0;
    width: 210px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    z-index: var(--z-modal);
    overflow: hidden;
    transition: top var(--transition-base) ease;
  }

  .sidebar-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .sidebar-logo-mark {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .sidebar-logo-mark svg { display: block; width: 32px; height: 32px; }

  .sidebar-wordmark {
    font-size: 17px; font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary-lt), #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
  }

  .sidebar-nav-items {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
  }

  .sidebar-nav-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    line-height: 1.2;
    min-height: unset;
    flex: none;
  }

  .sidebar-nav-btn:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
  }

  .sidebar-nav-btn.active {
    background: rgba(124, 58, 237, 0.15);
    /* NudgeUP-hoe24 a11y (WCAG 1.4.3): --color-primary-lt (#9B67F5) on the
       active tint (#2a2046) is only 4.05:1. Route the active label to
       --color-link, the qbc2h AA-tuned link token (#A98AF8 dark, darker on the
       light themes) that already clears 4.5:1 on these surfaces. */
    color: var(--color-link);
  }

  .sidebar-nav-btn.active .sidebar-nav-icon svg {
    stroke: var(--color-link);
  }

  .sidebar-nav-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }

  .sidebar-nav-icon svg {
    stroke: var(--color-text-muted);
    transition: stroke 0.12s;
  }

  .sidebar-nav-btn:hover .sidebar-nav-icon svg {
    stroke: var(--color-text);
  }

  .sidebar-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Sidebar user card (footer) — NudgeUP-awz2t: container is a plain wrap;
     the profile tap-target is a full-bleed overlay button (.sidebar-user-card-hit)
     so it no longer nests the help (?) button (nested-interactive a11y fix). */
  .sidebar-user-card-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .sidebar-user-card-hit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 0; /* sits behind the avatar/details + help button */
  }

  .sidebar-user-card-wrap:hover { background: var(--color-surface-2); }

  /* avatar + details render above the overlay tap-target */
  .sidebar-user-card-wrap > .sidebar-user-avatar-sm,
  .sidebar-user-card-wrap > .sidebar-user-details {
    position: relative;
    z-index: 1;
    pointer-events: none; /* let taps fall through to the overlay button */
  }
  /* …except the nested help button, which is its own target */
  .sidebar-user-card-wrap .sidebar-nudge-id-help { pointer-events: auto; }

  .sidebar-user-avatar-sm {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-lt), #06B6D4);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
  }

  .sidebar-user-details { flex: 1; min-width: 0; }

  .sidebar-user-name {
    font-size: 12.5px; font-weight: 600;
    color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* NudgeUP-6b3ql: Nudge ID label row + tooltip */
  .sidebar-nudge-id-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 1px;
  }

  .sidebar-nudge-id-label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .sidebar-nudge-id-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }

  .sidebar-nudge-id-help:hover,
  .sidebar-nudge-id-help:focus-visible {
    background: var(--color-primary-lt);
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
  }

  .sidebar-nudge-id {
    font-size: 10.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* ── Main content shift ── */
  .app-main {
    margin-left: 210px;
    padding-bottom: 32px;
    max-width: none;
  }

  /* Give views comfortable desktop width with max-width */
  .view {
    max-width: 740px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Profile view gets a bit more room */
  #view-profile {
    max-width: 820px;
  }

  /* View headers at desktop */
  .view-header {
    padding-top: 28px;
  }

  .view-header h2 {
    font-size: 1.6rem;
  }
}

/* ── Test voice preview button (NudgeUP-rxbk) ───────────────────────────────── */
.btn-test-voice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 14px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.btn-test-voice:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.btn-test-voice:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Deepgram Aura voice picker (NudgeUP-czsx) ──────────────────────────────── */
.coach-aura-wrap {
  margin-top: 12px;
}
.coach-aura-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-pro {
  font-size: 0.65rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}
.coach-aura-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.coach-aura-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}
.coach-aura-tile:hover  { border-color: var(--color-primary); }
.coach-aura-tile.active {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.10);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.coach-aura-name {
  font-size: 0.82rem;
  color: var(--color-text);
}
.coach-aura-preview {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding: 0 2px;
  line-height: 1;
  transition: color var(--transition-fast);
}
.coach-aura-preview:hover { color: var(--color-primary); }
.coach-aura-preview:disabled { opacity: 0.4; cursor: not-allowed; }

/* Tile body: name + desc stacked (NudgeUP-ezdo) */
.coach-aura-tile-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.coach-aura-desc {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Locked tile for free-tier voice cards */
.coach-aura-tile.voice-locked {
  opacity: 0.55;
  cursor: pointer;
  position: relative;
}
.coach-aura-tile.voice-locked:hover {
  border-color: var(--color-primary);
  opacity: 0.75;
}
.voice-lock-icon {
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Aura TTS stop bar (shown while response is playing) */
.aura-tts-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
/* NudgeUP-mze6l: "Preparing voice…" status shown the instant the TTS request fires,
   so the ~1-3s Gemini round-trip after the text streams in no longer feels like dead air. */
.aura-tts-status {
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  animation: aura-tts-status-pulse 1.2s ease-in-out infinite;
}
.aura-tts-status.hidden { display: none; }
@keyframes aura-tts-status-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.aura-tts-stop-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.aura-tts-stop-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Avatar upload — NudgeUP-e6uu / NudgeUP-buo1 ───────────────────────────── */
.profile-avatar-wrap.uploading {
  pointer-events: none;
}

/* Wrapper keeps remove button anchored to avatar */
.profile-avatar-container {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Remove avatar button */
.avatar-remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  border: 2px solid var(--color-bg);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.avatar-remove-btn:hover { background: #b91c1c; }

/* Avatar action sheet (NudgeUP-8f8n) */
.avatar-action-title {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 16px;
}
.avatar-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avatar-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-2, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.avatar-action-item:active { opacity: 0.7; }
.avatar-action-item:hover { background: var(--color-surface-hover, rgba(155,103,245,0.08)); }
.avatar-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}
.avatar-action-danger { color: var(--color-danger, #ef4444); }
.avatar-action-danger .avatar-action-icon { color: var(--color-danger, #ef4444); }
.avatar-action-cancel {
  justify-content: center;
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  font-weight: 600;
  margin-top: 4px;
}
.avatar-action-cancel:hover { background: var(--color-surface-2, rgba(255,255,255,0.05)); }
/* Long-press feedback on avatar */
.profile-avatar-wrap.long-press-active {
  opacity: 0.75;
  transform: scale(0.95);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Bud avatar with photo */
.bud-avatar-photo {
  border-radius: 50%;
  background-color: var(--color-surface-2);
  flex-shrink: 0;
}

/* ── Coach personality picker (NudgeUP-4bca) ──────────────────────────────── */
.coach-personality-wrap { margin-top: 12px; }
.coach-personality-heading {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 2px;
}
.coach-personality-subheading {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.coach-style-vibe-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-border);
  padding-left: 8px;
  margin-top: 10px;
  line-height: 1.4;
}
.coach-personality-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coach-personality-tile {
  flex: 1 1 30%;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}
.coach-personality-tile:hover { border-color: var(--color-primary); }
.coach-personality-tile.active {
  border-color: var(--color-primary);
  background: rgba(124,58,237,0.10);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.coach-personality-tile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.coach-personality-icon { font-size: 1.1rem; line-height: 1; }
.coach-personality-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.coach-personality-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.coach-personality-sample {
  font-size: 0.67rem;
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.75;
  line-height: 1.3;
  margin-top: 3px;
  display: block;
}
.coach-personality-preview {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  min-height: 1.1em;
}

/* ── Coach style picker (NudgeUP-966g) ─────────────────────────────────── */
.coach-style-wrap {
  margin-top: 16px;
}
.coach-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Profile completeness setup card (NudgeUP-9ozc) ─────────────────────── */
.setup-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 12px;
}

.setup-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.setup-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.setup-card-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}

.setup-progress-bar {
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.setup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-lt), #06B6D4);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.setup-progress-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setup-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}

.setup-step:hover:not([disabled]) { background: var(--color-surface-2); }
.setup-step[data-done="true"] { cursor: default; opacity: 0.65; }

.setup-step-check { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.setup-step-text  { flex: 1; font-size: 13.5px; color: var(--color-text); }
.setup-step-arrow { font-size: 16px; color: var(--color-text-muted); flex-shrink: 0; }

/* ── Quick-add FAB (NudgeUP-fz3r) ───────────────────────────────────────────── */
.fab-add {
  position: fixed;
  bottom: var(--fab-stack-1); /* primary slot — clears bottom-nav (NudgeUP-42cpq) */
  right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-lt), #06B6D4);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124,58,237,0.45);
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition-base), opacity var(--transition-base), bottom var(--transition-base);
}

.fab-add:hover { transform: scale(1.08); }
.fab-add.fab-hidden { opacity: 0; pointer-events: none; transform: translateY(16px); }

/* NudgeUP-j0z13: on mobile the FAB shows on Tasks / Projects / Calendar (each has a
   contextual add action — see the click router). Hide it on views with no add so it
   isn't a confusing no-op. Desktop is already Tasks-only via the rule below. */
@media (max-width: 767px) {
  body[data-view="buds"] .fab-add,
  body[data-view="vibe"] .fab-add,
  body[data-view="profile"] .fab-add { display: none; }
}

/* Desktop FAB (NudgeUP-y48uv): the sidebar handles nav, but the Tasks view still
   needs an always-reachable add affordance (the inline quick-add bar scrolls away
   in-flow on desktop). Show the canonical #fab-add-task FAB on the Tasks view only —
   it focuses the inline quick-add input via _focusInlineQuickAdd(), the one canonical
   path. This replaces the removed desktop-only #smart-daily-fab. Off-Tasks desktop
   views have no inline input to focus, so keep it hidden there. */
@media (min-width: 768px) {
  .fab-add { display: none !important; }
  body:has(#view-tasks.active) .fab-add { display: flex !important; }
}

/* One-shot pulse ring */
@keyframes fab-ring {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.6); }
  70%  { box-shadow: 0 0 0 16px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.fab-pulse { animation: fab-ring 0.9s ease-out 1; }

/* NudgeUP-uus5v: the .modal-quick-add sheet and its quick-add-* styles were
   removed — every add-task entry point routes to the inline quick-add input. */

/* ── App update UI (NudgeUP-ntca) ───────────────────────────────────────────── */

/* Blocking screen */
.update-blocking {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.update-blocking-card {
  text-align: center;
  max-width: 320px;
}

.update-blocking-icon {
  font-size: 52px;
  margin-bottom: 16px;
}

.update-blocking-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px;
}

.update-blocking-body {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Soft banner */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: linear-gradient(90deg, var(--color-primary-lt), #06B6D4);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.update-banner span { flex: 1; font-weight: 600; }

.update-banner-btn {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.update-banner-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  flex-shrink: 0;
}

/* ── What's New modal (NudgeUP-fr61) ────────────────────────────────────── */
.whats-new-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.whats-new-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.whats-new-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.whats-new-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.whats-new-list li {
  font-size: 0.9rem;
  color: var(--color-text-secondary, var(--color-text));
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.whats-new-list li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 10px;
  top: 3px;
}
.whats-new-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ── All-done celebration overlay (NudgeUP-unid) ─────────────────────────── */
.all-done-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
.all-done-overlay.hidden { display: none; }

.all-done-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-elevated);
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.all-done-emoji { font-size: 3.5rem; margin-bottom: 12px; line-height: 1; }
.all-done-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.all-done-streak { font-size: 1rem; color: var(--color-primary-lt); font-weight: 600; min-height: 1.4em; margin-bottom: 24px; }
.all-done-btn { width: 100%; }

/* ── Streak-risk nudge banner (NudgeUP-xit5) ─────────────────────────────── */
.streak-nudge-banner {
  /* Inline in the body flex column — pushes layout down instead of overlaying */
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(90deg, #92400e, #b45309);
  color: #fff;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  box-sizing: border-box;
  animation: slideDown 0.25s ease;
  z-index: 60;
}
.streak-nudge-banner.hidden { display: none; }

/* NudgeUP-9j7km: founding member trial-expiry warning banner (7 days before trial_ends_at) */
.founding-expiry-banner {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-lt, var(--color-primary)));
  color: #fff;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  box-sizing: border-box;
  animation: slideDown 0.25s ease;
  z-index: 60;
}
.founding-expiry-banner.hidden { display: none; }
.founding-expiry-text { flex: 1; min-width: 0; }
.founding-expiry-cta {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 14px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.founding-expiry-cta:hover { background: rgba(255,255,255,0.32); }

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.streak-nudge-text { flex: 1; }

.streak-nudge-add {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.streak-nudge-add:hover { background: rgba(255,255,255,0.3); }

.streak-nudge-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Streak-recovery banner (NudgeUP-wy5b) ──────────────────────────────── */
.streak-recovery-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(251,191,36,0.07));
  border: 1px solid rgba(245,158,11,0.40);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.streak-recovery-banner.hidden { display: none; }
.streak-recovery-icon { font-size: 1.2rem; flex-shrink: 0; }
.streak-recovery-msg  { flex: 1; font-size: 0.88rem; line-height: 1.4; margin: 0; color: var(--color-text); }
.streak-recovery-cta {
  flex-shrink: 0;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.45);
  color: var(--color-amber-dark, #b45309);
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.streak-recovery-cta:hover { background: rgba(245,158,11,0.28); }
.streak-recovery-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.streak-recovery-dismiss:hover { color: var(--color-text); }

/* ── Streak-break recovery modal (NudgeUP-k7vmb) ────────────────────────── */
.streak-break-modal-card {
  text-align: center;
  padding: 28px 24px 24px;
}
.streak-break-icon-wrap {
  font-size: 2.8rem;
  margin-bottom: 12px;
  line-height: 1;
}
.streak-break-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}
.streak-break-body {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.streak-break-recovery-note {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}
/* AI reflection question (NudgeUP-e0uiz) — appears async after modal opens */
.streak-break-reflection {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
  animation: fadeIn 0.3s ease;
}

/* Shame-free restart (NudgeUP-kan44) — when ADHD Mode is on the streak-break
   modal is reframed as a warm "off days happen" moment. Swap the amber/loss
   palette for a calm, growth-green note and a softer card edge. */
.streak-break-modal-card.adhd-soft {
  border: 1px solid rgba(34,197,94,0.30);
}
.streak-break-modal-card.adhd-soft .streak-break-recovery-note {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.30);
}

/* ── Due-date quick-chips (NudgeUP-8zr6) ────────────────────────────────── */
.due-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.due-chip {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.due-chip:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.due-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Victory broadcast bar (NudgeUP-w9ny) ───────────────────────────────── */
.victory-bud-bar {
  position: fixed;
  bottom: var(--toast-slot-4); /* NudgeUP-iyte6: shared bottom-center toast stack */
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-primary);
  color: #fff;
  border-radius: 100px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3500;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(124,58,237,0.5);
  transition: transform var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--transition-slow);
  opacity: 0;
  white-space: nowrap;
}
.victory-bud-bar.hidden { display: none; }
.victory-bud-bar--visible { transform: translateX(-50%) translateY(0); opacity: 1; }

.victory-bud-btn {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}
.victory-bud-btn:hover { background: rgba(255,255,255,0.35); }

.victory-bud-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}

/* ── Profile completeness bar (NudgeUP-6ceh) ────────────────────────────── */
.profile-completeness-wrap {
  padding: 12px 16px 0;
}
.profile-completeness-wrap.hidden { display: none; }

.profile-completeness-bar-track {
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

.profile-completeness-bar-fill {
  height: 100%;
  background: var(--color-primary-lt);
  border-radius: 100px;
  transition: width 0.6s ease;
}

.profile-completeness-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.profile-completeness-pct {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-lt);
}

.profile-completeness-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 600;
  flex: 1;
}

.profile-completeness-list {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-completeness-list li {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

/* Clickable undone step button */
.completeness-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: left;
  transition: background var(--transition-fast);
}
.completeness-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.completeness-btn:active {
  opacity: 0.7;
}

/* Done item — static, struck-through.
   NudgeUP-hoe24 a11y: dropped `opacity: 0.55` on the row — multiplying the muted
   text by 0.55 pushed it below 4.5:1 on every theme. The "done" state is already
   conveyed by the line-through + ✓; de-emphasis now comes from the AA-passing
   --color-text-muted token (each theme tunes it ≥4.5:1) instead of opacity. */
.completeness-item--done {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}
.completeness-item--done .completeness-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.completeness-check { font-size: 0.78rem; flex-shrink: 0; width: 16px; text-align: center; }
.completeness-text  { flex: 1; }
.completeness-arrow { font-size: 14px; color: var(--color-text-muted); flex-shrink: 0; }

/* NudgeUP-4u29: slim 100%-complete banner */
.profile-completeness-wrap--slim {
  padding: 8px 16px 4px;
}
.profile-completeness-slim-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.profile-completeness-slim-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.profile-completeness-dismiss-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 2px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.profile-completeness-dismiss-btn:hover {
  color: var(--color-text);
}

/* ── Feedback & Support modal tab bar (NudgeUP-2i82) ────────────────────── */
.fs-tab-bar {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 16px;
  gap: 4px;
}
.fs-tab {
  flex: 1;
  font-size: 0.85rem;
}

/* ── Onboarding go-to-app link (NudgeUP-aksf) ───────────────────────────── */
.ob-goto-app-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 10px;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: block;
}

/* ── Settings sub-view (NudgeUP-4rhq) ───────────────────────────────────────
   Nested settings panel revealed by the Settings button; #profile-main-view
   is hidden while this is visible. ──────────────────────────────────────── */
#profile-settings-view {
  /* fills the scroll body; no extra padding needed */
}

/* ── Settings accordion (NudgeUP-qjec) ──────────────────────────────────────
   Each section label becomes a tap-to-expand accordion panel. ─────────────── */
#settings-accordion { margin-top: 8px; }
.settings-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0 8px;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font: 600 0.72rem/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.settings-accordion-header:first-of-type { border-top: none; }
.accordion-chevron {
  font-size: 1rem;
  transition: transform var(--transition-base) ease;
  display: inline-block;
  color: var(--color-text-muted);
}
.settings-accordion-header[aria-expanded="true"] .accordion-chevron {
  transform: rotate(90deg);
}
.settings-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow) ease;
}
.settings-accordion-body.open {
  max-height: 9999px;
}

/* ── Focus-visible accessibility (NudgeUP-luq1) ────────────────────────────
   Global :focus-visible ring on all interactive controls — WCAG 2.4.7.
   Uses :focus:not(:focus-visible) to suppress the ring for mouse/touch users
   so we don't regress existing click UX. ─────────────────────────────────── */
:is(button, [role="button"], a[href], select):focus-visible,
:is(input, textarea):not([type="checkbox"]):not([type="radio"]):focus-visible {
  outline: 2px solid var(--color-primary-lt, #9B67F5);
  outline-offset: 2px;
}
/* Suppress default ring on mouse/touch (keep it for keyboard) */
:is(button, [role="button"], a[href], select):focus:not(:focus-visible),
:is(input, textarea):not([type="checkbox"]):not([type="radio"]):focus:not(:focus-visible) {
  outline: none;
}
/* NudgeUP-qa9wg: prefers-reduced-motion — collapse timing without clearing fill-mode.
   WCAG-recommended: set duration to near-zero so animations snap to their end-state
   immediately while preserving animation-fill-mode:forwards (banner + cat-row fix).
   scroll-behavior is also forced to auto so anchor jumps don't animate.            */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Narrow-viewport reflow (NudgeUP-ufie) — 320px/360px devices ────────────
   Use flex-wrap / single-column where layouts overflow at ≤360px. ──────────── */
@media (max-width: 360px) {
  .pause-duration-cards {
    grid-template-columns: 1fr;
  }
  .referral-link-row {
    flex-wrap: wrap;
  }
  .referral-link-row .btn-sm {
    flex: 1 0 auto;
  }
  .trial-stats {
    flex-wrap: wrap;
  }
  .trial-stat {
    flex: 1 1 40%;
  }
  .plan-option {
    min-width: 0;
  }
  .coach-name-chips button {
    font-size: 0.78rem;
    padding: 4px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   3-COLUMN DESKTOP LAYOUT — NudgeUP-7slt  (≥1024px)
   Below 1024px: existing mobile/tablet layout untouched.
   1024–1280px: icon-only sidebar rail (64px wide).
   >1280px: sidebar shows full labels (240px wide).
   Uses fixed positioning for sidebar + right panel so
   in-flow banners (sticky) still work correctly.
═══════════════════════════════════════════════════════════ */

/* Right panel hidden on mobile/tablet */
.desktop-right-panel {
  display: none;
}

@media (min-width: 1024px) {
  /* ── Cancel the narrow 640px PWA frame ── */
  .app-body {
    max-width: none;
    margin: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  /* ── Sidebar: fixed, icon-only rail (1024–1280px) ── */
  .sidebar-desktop {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* Clears the top banner stack — see --top-banner-h note on the 768px rule */
    top: var(--top-banner-h, 0px); left: 0; bottom: 0;
    width: 64px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    z-index: var(--z-modal);
    overflow: hidden;
    align-items: center;
    transition: top var(--transition-base) ease;
  }

  .sidebar-logo-row {
    justify-content: center;
    padding: 18px 0 14px;
  }

  .sidebar-wordmark {
    display: none;
  }

  .sidebar-nav-items {
    padding: 10px 0;
    align-items: center;
  }

  .sidebar-nav-btn {
    justify-content: center;
    padding: 12px;
    width: 44px;
  }

  .sidebar-nav-label {
    display: none;
  }

  .sidebar-user-details {
    display: none;
  }

  .sidebar-user-card-wrap {
    justify-content: center;
    padding: 12px;
  }

  /* ── Right panel: fixed, right column ── */
  .desktop-right-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* Clears the top banner stack — see --top-banner-h note on .sidebar-desktop */
    top: var(--top-banner-h, 0px); right: 0; bottom: 0;
    width: 280px;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 20px 16px;
    gap: 24px;
    z-index: 150;
    transition: top var(--transition-base) ease;
  }

  /* ── Main content: offset from both fixed panels ── */
  .app-main {
    margin-left: 64px;
    margin-right: 280px;
    max-width: none;
    padding-bottom: 32px;
  }

  .view {
    max-width: 720px;
    padding-left: 32px;
    padding-right: 32px;
  }

  #view-profile {
    max-width: 800px;
  }

  /* ── Bottom nav stays hidden ── */
  .bottom-nav { display: none !important; }

  /* ── Top app-header is redundant on desktop (NudgeUP-h4hw) ──
     The fixed left sidebar + right panel provide branding, nav, streak
     (#drp-streak-count) and theme/profile access, so hide the mobile
     app-header to remove the dark navy band above the content. */
  .app-header { display: none; }

  /* ── Theme picker on desktop (NudgeUP-h4hw) ──
     The mobile header 🎨 button is hidden with .app-header, so surface a Theme
     button in the sidebar footer and anchor the floating panel just above it,
     beside the fixed left rail (64px wide at 1024–1280px). */
  .sidebar-theme-btn { display: flex; flex-shrink: 0; }
  #theme-quick-panel {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 84px;
    left: 72px;
  }
}

/* Sidebar theme button is desktop-only (mobile uses the header 🎨 button) */
.sidebar-theme-btn { display: none; }

/* ── Full labels at >1280px ── */
@media (min-width: 1280px) {
  .sidebar-desktop {
    width: 240px;
    align-items: stretch;
  }

  .sidebar-logo-row {
    justify-content: flex-start;
    padding: 22px 18px 16px;
  }

  .sidebar-wordmark {
    display: block;
  }

  .sidebar-nav-items {
    padding: 10px 8px;
    align-items: stretch;
  }

  .sidebar-nav-btn {
    justify-content: flex-start;
    padding: 10px 12px;
    width: 100%;
  }

  .sidebar-nav-label {
    display: block;
  }

  .sidebar-user-details {
    display: block;
  }

  .sidebar-user-card-wrap {
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .app-main {
    margin-left: 240px;
  }

  /* NudgeUP-h4hw: wider sidebar (240px) at >=1280px — shift the theme panel
     to clear the rail and sit beside the Theme button. */
  #theme-quick-panel {
    left: 248px;
  }
}

/* ── Right panel widget styles ── */
.drp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drp-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.drp-streak-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.drp-streak-flame {
  font-size: 1.4rem;
  line-height: 1;
}

.drp-streak-count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.drp-streak-unit {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.drp-progress-bar-wrap {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.drp-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary-lt), var(--color-accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.drp-progress-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.drp-buds-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drp-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* NudgeUP-savw: desktop right-panel bud list items */
.drp-bud-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.drp-bud-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-2);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}
.drp-bud-name {
  font-size: 0.82rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Combined bud streak milestone card (NudgeUP-jbr2) ───────────────────── */
.combined-milestone-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(251,191,36,0.10) 100%);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(245,158,11,0.15);
  animation: milestone-slide-in 0.35s ease;
  position: relative;
}
.combined-milestone-card__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.combined-milestone-card__body {
  flex: 1;
  min-width: 0;
}
.combined-milestone-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-warning, #d97706);
  margin: 0 0 2px;
  line-height: 1.3;
}
.combined-milestone-card__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.combined-milestone-card__dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.combined-milestone-card__dismiss:hover {
  color: var(--color-text);
  background: rgba(0,0,0,0.06);
}
@keyframes milestone-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bud invite nudge banner (NudgeUP-dmbw) ─────────────────────────────────── */
.bud-invite-nudge {
  background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(139,92,246,0.10) 100%);
  border: 1px solid rgba(139,92,246,0.35);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: milestone-slide-in 0.35s ease;
}
.bud-invite-nudge__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.bud-invite-nudge__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.bud-invite-nudge__text {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
}
.bud-invite-nudge__text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9375rem;
  color: var(--color-primary, #9B67F5);
}
.bud-invite-nudge__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Invite expiry nudge banner (NudgeUP-pyyn) ────────────────────────────────── */
.invite-expiry-banner {
  background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(251,191,36,0.10) 100%);
  border: 1px solid rgba(245,158,11,0.40);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: milestone-slide-in 0.35s ease;
}
.invite-expiry-banner__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.invite-expiry-banner__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.invite-expiry-banner__text {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
}
.invite-expiry-banner__text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9375rem;
  color: var(--color-warning, #f59e0b);
}
.invite-expiry-banner__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Suggested Buds section (NudgeUP-q3h1) ──────────────────────────────────── */
.bud-suggestions {
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(6,182,212,0.08) 100%);
  border: 1px solid rgba(99,102,241,0.30);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: milestone-slide-in 0.35s ease;
}
.bud-suggestions-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.bud-suggestions-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-primary, #9B67F5);
}
.bud-suggestions-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9CA3AF);
}
.bud-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggestion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.suggestion-card:hover,
.suggestion-card:focus-visible {
  background: rgba(99,102,241,0.10);
  outline: none;
}
.suggestion-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.suggestion-info {
  flex: 1;
  min-width: 0;
}
.suggestion-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.suggestion-streak {
  font-size: 0.8125rem;
  color: var(--color-warning, #f59e0b);
}
.suggestion-cat-tag {
  font-size: 0.75rem;
  background: rgba(6,182,212,0.15);
  color: var(--color-accent-text, #06B6D4); /* NudgeUP-qbc2h a11y */
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Recently Deleted section (NudgeUP-ygv1) ─────────────────────────────────── */
.recently-deleted-section {
  margin-top: 12px;
}
.recently-deleted-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 6px 4px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}
.recently-deleted-header:hover { opacity: 0.75; }
.recently-deleted-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.recently-deleted-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.recently-deleted-list.hidden { display: none; }
.deleted-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
}
.deleted-task-title {
  flex: 1;
  text-decoration: line-through;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deleted-task-days {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.deleted-task-undo {
  background: none;
  border: none;
  color: var(--color-primary-lt);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.875rem;
  border-radius: 4px;
  white-space: nowrap;
  min-height: 32px;
  min-width: 44px;
}
.deleted-task-undo:hover { text-decoration: underline; }
.deleted-task-undo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Archive section (NudgeUP-w0b0f) ──────────────────────────────────────── */

/* -- Someday section (NudgeUP-g75w1) ------------------------------------------ */
.someday-section {
  margin-top: 12px;
}
.someday-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 6px 4px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}
.someday-section-header:hover { opacity: 0.75; }
.someday-section-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.someday-section-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.someday-section-list.hidden { display: none; }
.someday-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
}
.someday-task-cat {
  font-size: 1rem;
  flex-shrink: 0;
}
.someday-task-title {
  flex: 1;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.someday-task-btn {
  background: none;
  border: none;
  color: var(--color-primary-lt);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  min-height: 32px;
  min-width: 44px;
  flex-shrink: 0;
}
.someday-task-btn:hover { text-decoration: underline; }
.someday-task-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* NudgeUP-5cmta (§3): "Needs a date" — the one-tap "Today" action reads as the
   recommended path (filled primary chip); "Pick date" stays a quiet text button.
   The nudge subtext gently pushes captures toward a date (no permanent backlog). */
.someday-task-btn--today {
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  padding: 4px 12px;
}
.someday-task-btn--today:hover { text-decoration: none; opacity: 0.92; }
.needs-date-nudge {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
/* NudgeUP-vmh0j: "Keep all" bulk action in the Needs-a-date header.
   Sits inline with the section label; must not trigger the collapse toggle
   (stopPropagation in JS). Uses margin-left:auto to push to the right edge,
   before the chevron. Normal-case so it reads as an action, not a label. */
.triage-keep-all-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-primary-lt);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 0.72rem;
  border-radius: 4px;
  white-space: nowrap;
  min-height: 26px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
  flex-shrink: 0;
}
.triage-keep-all-btn:hover { background: var(--color-surface-2); }
.triage-keep-all-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.archived-section {
  margin-top: 12px;
}
.archived-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 6px 4px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}
.archived-section-header:hover { opacity: 0.75; }
.archived-section-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.archived-section-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.archived-section-list.hidden { display: none; }
.archived-empty-msg {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 8px 4px;
  margin: 0;
}
.archived-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
}
.archived-task-title {
  flex: 1;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archived-task-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.archived-task-btn {
  background: none;
  border: none;
  color: var(--color-primary-lt);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  min-height: 32px;
  min-width: 44px;
  flex-shrink: 0;
}
.archived-task-btn:hover { text-decoration: underline; }
.archived-task-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Offline banner (NudgeUP-q5cy) ──────────────────────────────────────────── */
/* Fixed bottom-center amber toast; z-index above modals (200) and drawers.      */
.offline-banner {
  position: fixed;
  bottom: 80px;    /* clear the bottom nav bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;   /* above modals (200) and drawers (999/1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-warning);   /* amber — visible on all themes */
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  white-space: nowrap;
  max-width: calc(100% - 32px); /* NudgeUP-uuq3: 100% not 100vw (vw includes scrollbar → overflow) */
  animation: offlineBannerSlideUp 0.25s ease;
  pointer-events: none;
}
.offline-banner-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.offline-banner-fadeout {
  animation: offlineBannerFadeOut 0.4s ease forwards;
}
@keyframes offlineBannerSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes offlineBannerFadeOut {
  from { transform: translateX(-50%) translateY(0);    opacity: 1; }
  to   { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

/* ── Error toast variant (NudgeUP-6nra) ─────────────────────────────────────── */
.app-toast.app-toast-error {
  background: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
  color: #fff;
}

/* ── Retry button inside error toast (NudgeUP-1eeef) ────────────────────────── */
/* When the toast carries a retry callback, pointer-events must be enabled so    */
/* the button is clickable. The button is styled as a pill within the toast.     */
.app-toast.app-toast-has-retry {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: normal;
}
.app-toast-retry-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1.4;
}
.app-toast-retry-btn:hover,
.app-toast-retry-btn:focus-visible {
  background: rgba(255, 255, 255, 0.38);
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 1px;
}

/* ── Mic-blocked help sheet (NudgeUP-a9fwi) ─────────────────────────────────── */
/* Bottom sheet with platform-specific "how to enable the microphone" steps,     */
/* opened from the blocked-mic toast's "How to enable" action button.            */
.mic-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: micHelpFade var(--transition-fast, 0.15s) ease;
}
@keyframes micHelpFade { from { opacity: 0 } to { opacity: 1 } }
.mic-help-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a202c);
  border-radius: 18px 18px 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
  max-height: 82vh;
  overflow-y: auto;
  animation: micHelpSlideUp var(--transition-base, 0.22s) ease;
}
@keyframes micHelpSlideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
.mic-help-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
.mic-help-lede {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--color-text-muted, #4a5568);
  line-height: 1.45;
}
.mic-help-subtitle {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
}
.mic-help-steps {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.mic-help-steps li { margin-bottom: 5px; }
.mic-help-close-btn {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-accent, #4299e1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast, 0.15s);
}
.mic-help-close-btn:hover,
.mic-help-close-btn:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid var(--color-accent, #4299e1);
  outline-offset: 2px;
}

/* ── Boot failed overlay (NudgeUP-ijyj / gkp2) ──────────────────────────────── */
/* Full-screen overlay shown when app.js init stalls for >5s.                    */
.boot-failed-overlay,
.boot-error-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
}
.boot-failed-overlay.hidden,
.boot-error-overlay.hidden {
  display: none;
}
.boot-error-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px 24px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: bootErrorCardIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bootErrorCardIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.boot-error-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}
.boot-error-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text, #e8e8f0);
  margin: 0 0 8px;
}
.boot-error-msg {
  font-size: 0.9rem;
  color: var(--color-text-muted, #9ca3af);
  margin: 0 0 20px;
  line-height: 1.5;
}
.boot-error-reload {
  width: 100%;
}

/* ── AI Task Breakdown (NudgeUP-3czy) ──────────────────────────────────────── */
.btn-breakdown {
  background: none;
  border: none;
  font-size: 0.75rem;
  padding: 6px 8px;
  min-height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-primary, #7c6cfc);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, opacity 0.1s;
  line-height: 1;
}
.btn-breakdown:hover { background: var(--color-surface-2); }
.btn-breakdown:disabled { opacity: 0.4; cursor: default; }

/* NudgeUP-3c2wl: "Suggest more" inline button next to steps toggle */
.task-steps-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-suggest-steps {
  background: none;
  border: none;
  font-size: 0.7rem;
  padding: 3px 7px;
  min-height: 24px;
  border-radius: var(--radius-sm);
  color: var(--color-primary, #7c6cfc);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, opacity 0.1s;
  line-height: 1;
  opacity: 0.85;
}
.btn-suggest-steps:hover { background: var(--color-surface-2); opacity: 1; }
.btn-suggest-steps:disabled { opacity: 0.4; cursor: default; }

/* NudgeUP-3c2wl: suggest-more-steps sheet list */
.suggest-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 16px;
}
.suggest-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2, #1e1e2e);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
.suggest-step-item:hover { background: var(--color-surface-3, #252535); }
.suggest-step-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.suggest-step-selected {
  border-color: var(--color-primary, #7c6cfc);
  background: var(--color-primary-soft, rgba(124,108,252,0.12));
}
.suggest-step-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #7c6cfc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-inverse, #fff);
  background: transparent;
  transition: background 0.12s;
}
.suggest-step-selected .suggest-step-check {
  background: var(--color-primary, #7c6cfc);
}
.suggest-step-text { flex: 1; }

.breakdown-sheet-task-name {
  font-size: 0.85rem;
  margin: 0 0 12px;
  padding: 0 4px;
}

.breakdown-subtask-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 16px;
}

.breakdown-subtask-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2, #1e1e2e);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--color-text);
}
.breakdown-subtask-item::before {
  content: '\2022';
  color: var(--color-primary, #7c6cfc);
  font-weight: 700;
  flex-shrink: 0;
}

/* NudgeUP-we4cx: warm reframe + "start here" first-step highlight */
.breakdown-reframe {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text, #e5e5f0);
  background: var(--color-primary-soft, rgba(124, 108, 252, 0.12));
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 4px 0 14px;
}
.breakdown-start-here {
  border: 1px solid var(--color-primary, #7c6cfc);
  background: var(--color-primary-soft, rgba(124, 108, 252, 0.14));
}
/* Suppress the generic bullet on the start-here item — the badge leads instead */
.breakdown-start-here::before {
  content: none;
}
.breakdown-start-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-primary, #7c6cfc);
  border-radius: 999px;
  padding: 2px 8px;
}
.breakdown-subtask-text {
  flex: 1;
}

.breakdown-error {
  font-size: 0.875rem;
  color: var(--color-danger, #f87171);
  padding: 8px 4px;
}

.breakdown-loading {
  padding: 12px 4px;
}

/* ── Bud mini-profile bottom sheet (NudgeUP-dzf0) ────────────────────────── */
.bud-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  outline-offset: 2px;
}
.bud-avatar-btn:focus-visible { outline: 2px solid var(--color-primary); }

.bud-mini-profile-sheet {
  max-height: 60vh;
  text-align: center;
  padding-top: 12px;
}

.bmp-avatar-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.bmp-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.bmp-avatar-photo {
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2, #1e1e2e);
}
.bmp-avatar-initial {
  background: linear-gradient(135deg, var(--color-primary, #7c6cfc), var(--color-accent, #a78bfa));
}

.bmp-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.bmp-nudge-id {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

.bmp-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: var(--color-surface-2, rgba(255,255,255,0.05));
  border-radius: var(--radius-md, 12px);
  padding: 16px 0;
  margin-bottom: 20px;
}

.bmp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bmp-stat-divider {
  width: 1px;
  background: var(--color-border, rgba(255,255,255,0.1));
  margin: 4px 0;
}

.bmp-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.bmp-stat-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bmp-nudge-btn {
  margin-top: 0;
}

/* ── Bud Events Feed (NudgeUP-8q1a) ──────────────────────────────────────── */
.feed-section { margin-top: 16px; }

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.06));
}

.feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary, #7c6cfc), var(--color-accent, #a78bfa));
  background-size: cover;
  background-position: center;
}

.feed-event {
  flex: 1;
  min-width: 0;
}

.feed-event-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 0 4px;
}

.feed-event-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.feed-empty {
  text-align: center;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── Cheer button on feed cards (NudgeUP-orc6) ──────────────────────────── */
.cheer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 12px;
  background: rgba(124,108,252,0.12);
  color: var(--color-primary, #7c6cfc);
  border: 1px solid var(--color-primary, #7c6cfc);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s, opacity var(--transition-fast);
  animation: cheer-pulse 2s ease-in-out 1;
}
.cheer-btn:hover:not(:disabled) { background: rgba(124,108,252,0.22); }
.cheer-btn:active:not(:disabled) { transform: scale(0.96); }
.cheer-btn--sent {
  background: rgba(124,108,252,0.06);
  opacity: 0.55;
  cursor: default;
}
.cheer-btn:disabled { cursor: default; }

@keyframes cheer-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,108,252,0.45); }
  50%  { box-shadow: 0 0 0 6px rgba(124,108,252,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,108,252,0); }
}

/* ── "I completed this too" button on feed cards (NudgeUP-pp6m) ─────────── */
.completed-too-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  margin-right: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
  transition: background var(--transition-fast), transform 0.1s, opacity var(--transition-fast);
}
.completed-too-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-success) 26%, transparent); }
.completed-too-btn:active:not(:disabled) { transform: scale(0.96); }
.completed-too-btn--done {
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
  opacity: 0.55;
  cursor: default;
}
.completed-too-btn:disabled { cursor: default; }

/* ── Power Hour auto-suggest banner (NudgeUP-5rxh) ──────────────────────── */
.power-hour-suggest-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.08));
  border: 1px solid rgba(245,158,11,0.45);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.power-hour-suggest-banner.hidden { display: none; }
.power-hour-suggest-icon { font-size: 1.25rem; flex-shrink: 0; }
.power-hour-suggest-msg {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
  color: var(--color-text);
}
.power-hour-suggest-cta {
  flex-shrink: 0;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.50);
  color: var(--color-amber-dark, #b45309);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.power-hour-suggest-cta:hover { background: rgba(245,158,11,0.30); }
.power-hour-suggest-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.power-hour-suggest-dismiss:hover { color: var(--color-text); }

/* ── Duration suggestion ghost chip (NudgeUP-j8ri) ──────────────────────── */
.duration-suggestion-wrap {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.duration-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1.5px dashed var(--accent, #9b67f5);
  background: transparent;
  color: var(--accent, #9b67f5);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  opacity: 0.85;
  white-space: nowrap;
}
.duration-suggestion-chip:hover { background: var(--accent, #9b67f5); color: #fff; opacity: 1; }
.duration-suggestion-chip .ai-badge { font-size: 0.65rem; opacity: 0.7; }

/* NudgeUP-s3vb5: actionable calibration chip — personalized from the user's own
   estimate-vs-actual history. Solid border (vs the AI ghost chip's dashed) to
   read as "this is from your data", not a generic guess. */
.calib-suggestion-chip { border-style: solid; opacity: 1; }
.calib-suggestion-chip .calib-chip-icon { display: inline-flex; align-items: center; }

/* ── Task suggestions after vibe check (NudgeUP-crhm) ───────────────────── */
.vibe-suggest-section {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: var(--radius-sm);
}
.vibe-suggest-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-lt);
  margin: 0 0 6px;
}
.vibe-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.6;
}
.vibe-suggest-list li {
  padding: 2px 0 2px 14px;
  position: relative;
}
.vibe-suggest-list li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--color-primary-lt);
  font-size: 0.75rem;
  top: 3px;
}

/* Subtle ring on task cards picked by AI suggestion */
.task-card--ai-pick {
  outline: 2px solid rgba(124,58,237,0.45);
  outline-offset: -2px;
  background: rgba(124,58,237,0.04) !important;
}
.task-card--ai-pick .task-title::after {
  content: ' \2728';
  font-size: 0.7em;
  opacity: 0.75;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Smart Daily UI redesign (NudgeUP-q01a)
   Visual-only layer for the tasks screen. Scoped to .smart-* classes so it
   never touches existing task-card / theme / dark-mode styling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme-aware Smart Daily tokens (NudgeUP-bd4q) ──────────────────────────────
   The Smart Daily redesign keeps the SAME layout on every theme but recolors its
   surfaces per theme so it stays cohesive. Defaults below target the DARK theme
   (and inherit into cosmos/terminal/aurora unless overridden). The warm cocoa/
   cream palette is restored under html.light-mode (covers warm/light/white).
   ────────────────────────────────────────────────────────────────────────────── */
:root {
  --sd-header-bg:     linear-gradient(150deg, var(--color-surface-2), var(--color-surface));
  --sd-header-text:   var(--color-text);
  --sd-header-name:   var(--color-text);
  --sd-header-streak: var(--color-primary-lt);
  --sd-bubble-bg:     var(--color-surface-2);
  --sd-bubble-text:   var(--color-text-muted);
  --sd-avatar:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-app-bg:        transparent;
  --sd-surface:       var(--color-surface);
  --sd-surface-text:  var(--color-text);
  --sd-surface-muted: var(--color-text-muted);
  --sd-surface-border: var(--color-border);
  --sd-card-shadow:   var(--shadow-card);
  --sd-stat-done:     var(--color-primary-lt);
  --sd-section-label: var(--color-text-muted);
  --sd-hero-bg:       linear-gradient(150deg, var(--color-primary), var(--color-surface-2));
  --sd-hero-text:     #ffffff;
  --sd-hero-muted:    rgba(255,255,255,0.72);
  --sd-hero-pill-bg:  rgba(255,255,255,0.14);
  --sd-hero-ai-bg:    rgba(255,255,255,0.18);
  --sd-hero-ai-text:  #ffffff;
  --sd-hero-ring-inner: var(--color-surface);
  --sd-ring-fill:     var(--color-accent);
  --sd-ring-track:    rgba(255,255,255,0.14);
  --sd-mini-bg:       var(--color-surface);
  --sd-mini-shadow:   var(--shadow-card);
  --sd-mini-title:    var(--color-text);
  --sd-mini-cat:      var(--color-text-muted);
  --sd-mini-time:     var(--color-primary-lt);
  --sd-mini-check-border: var(--color-border);
  --sd-fab-bg:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-fab-shadow:    0 6px 24px rgba(0,0,0,0.4);
  --sd-fab-text:      #ffffff;
}

/* Generic light-mode SD overrides — applies to light + white + warm themes.
   Uses CSS vars so each named light theme can override further below. */
html.light-mode {
  --sd-header-bg:     linear-gradient(150deg, var(--color-surface-2), var(--color-surface));
  --sd-header-text:   var(--color-text);
  --sd-header-name:   var(--color-text);
  --sd-header-streak: var(--color-primary);
  --sd-bubble-bg:     var(--color-surface-2);
  --sd-bubble-text:   var(--color-text-muted);
  --sd-avatar:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-app-bg:        var(--color-bg);
  --sd-surface:       var(--color-surface);
  --sd-surface-text:  var(--color-text);
  --sd-surface-muted: var(--color-text-muted);
  --sd-surface-border: var(--color-border);
  --sd-card-shadow:   var(--shadow-card);
  --sd-stat-done:     var(--color-primary);
  --sd-section-label: var(--color-text-muted);
  --sd-hero-bg:       linear-gradient(150deg, var(--color-primary), var(--color-surface-2));
  --sd-hero-text:     #ffffff;
  --sd-hero-muted:    rgba(255,255,255,0.72);
  --sd-hero-pill-bg:  rgba(255,255,255,0.14);
  --sd-hero-ai-bg:    rgba(255,255,255,0.18);
  --sd-hero-ai-text:  #ffffff;
  --sd-hero-ring-inner: var(--color-surface);
  --sd-ring-fill:     var(--color-accent);
  --sd-ring-track:    rgba(0,0,0,0.1);
  --sd-mini-bg:       var(--color-surface);
  --sd-mini-shadow:   var(--shadow-card);
  --sd-mini-title:    var(--color-text);
  --sd-mini-cat:      var(--color-text-muted);
  --sd-mini-time:     var(--color-primary);
  --sd-mini-check-border: var(--color-border);
  --sd-fab-bg:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-fab-shadow:    0 6px 24px rgba(0,0,0,0.2);
  --sd-fab-text:      #ffffff;
}

/* White Bold — high-contrast purple SD palette */
html.theme-white {
  --sd-header-bg:     linear-gradient(150deg, rgba(91,33,182,0.15), var(--color-surface));
  --sd-hero-bg:       linear-gradient(150deg, var(--color-primary), var(--color-surface-2));
  --sd-hero-ring-inner: #EEE9FF;
  --sd-stat-done:     var(--color-primary);
  --sd-mini-time:     var(--color-primary);
  --sd-fab-bg:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-fab-shadow:    0 6px 24px rgba(91,33,182,0.3);
  --sd-ring-fill:     var(--color-primary);
  --sd-ring-track:    rgba(91,33,182,0.12);
}

/* Warm Hug — dark cocoa SD palette (persimmon + cream on deep brown) */
html.theme-warm {
  --sd-header-bg:     linear-gradient(150deg, #1e0d06, #3d1f0a, #281408);
  --sd-header-text:   var(--cream);
  --sd-header-name:   var(--cream);
  --sd-header-streak: var(--honey);
  --sd-bubble-bg:     rgba(255,255,255,0.09);
  --sd-bubble-text:   rgba(251,241,222,0.75);
  --sd-avatar:        linear-gradient(135deg, var(--persimmon), var(--honey));
  --sd-app-bg:        #faf7f4;
  --sd-surface:       #ffffff;
  --sd-surface-text:  var(--cocoa);
  --sd-surface-muted: #a89a8c;
  --sd-surface-border: #f5ede6;
  --sd-card-shadow:   0 1px 8px rgba(40,20,8,0.06);
  --sd-stat-done:     #d4604a;
  --sd-section-label: #c0b0a0;
  --sd-hero-bg:       #281408;
  --sd-hero-text:     var(--cream);
  --sd-hero-muted:    rgba(251,241,222,0.7);
  --sd-hero-pill-bg:  rgba(251,241,222,0.1);
  --sd-hero-ai-bg:    rgba(212,96,74,0.15);
  --sd-hero-ai-text:  #f08070;
  --sd-hero-ring-inner: #281408;
  --sd-ring-fill:     var(--persimmon);
  --sd-ring-track:    rgba(251,241,222,0.14);
  --sd-mini-bg:       #ffffff;
  --sd-mini-shadow:   0 1px 6px rgba(40,20,8,0.05);
  --sd-mini-title:    var(--cocoa);
  /* NudgeUP-hoe24 a11y (WCAG 1.4.3): #a89a8c warm-grey on the white mini-row
     (#ffffff) is 2.73:1. Route to --color-text-muted (#6F5440 → ~6.5:1 on white)
     like the other themes instead of a hardcoded sub-AA grey. */
  --sd-mini-cat:      var(--color-text-muted);
  --sd-mini-time:     #d4604a;
  --sd-mini-check-border: #d8cabb;
  --sd-fab-bg:        linear-gradient(135deg, #281408, #d4604a);
  --sd-fab-shadow:    0 6px 24px rgba(212,96,74,0.4);
  --sd-fab-text:      #ffffff;
}

/* Cosmos — glassy violet surfaces, cyan/violet accents */
html.theme-cosmos {
  --sd-header-bg:     linear-gradient(150deg, rgba(124,58,237,0.35), var(--color-surface));
  --sd-hero-bg:       linear-gradient(150deg, rgba(124,58,237,0.55), var(--color-surface-2));
  --sd-hero-ring-inner: #0b0820;
  --sd-ring-fill:     var(--color-accent);
  --sd-ring-track:    rgba(255,255,255,0.12);
}

/* Terminal — flat green-on-black, square corners already via radius vars */
html.theme-terminal {
  --sd-header-bg:     var(--color-surface);
  --sd-header-text:   var(--color-primary);
  --sd-header-name:   var(--color-primary);
  --sd-header-streak: var(--color-primary-lt);
  --sd-bubble-bg:     #0F180F;
  --sd-bubble-text:   var(--color-text-muted);
  --sd-avatar:        var(--color-primary);
  --sd-hero-bg:       var(--color-surface-2);
  --sd-hero-text:     var(--color-primary);
  --sd-hero-muted:    var(--color-text-muted);
  --sd-hero-pill-bg:  rgba(0,255,65,0.12);
  --sd-hero-ai-bg:    rgba(0,255,65,0.12);
  --sd-hero-ai-text:  var(--color-accent);
  --sd-hero-ring-inner: #0A0F0A;
  --sd-mini-time:     var(--color-primary);
  --sd-stat-done:     var(--color-primary);
  --sd-fab-bg:        var(--color-primary);
  --sd-fab-text:      #000000;
  --sd-fab-shadow:    0 0 24px rgba(0,255,65,0.4);
  --sd-ring-fill:     var(--color-primary);
  --sd-ring-track:    rgba(0,255,65,0.15);
}

/* Aurora — violet/pink soft surfaces */
html.theme-aurora {
  --sd-header-bg:     linear-gradient(150deg, rgba(167,139,250,0.30), var(--color-surface));
  --sd-hero-bg:       linear-gradient(150deg, var(--color-primary), var(--color-surface-2));
  --sd-hero-ring-inner: #100D1E;
  --sd-stat-done:     var(--color-accent);
  --sd-mini-time:     var(--color-accent);
  --sd-fab-bg:        linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --sd-ring-fill:     var(--color-accent);
  --sd-ring-track:    rgba(255,255,255,0.12);
}

/* Warm off-white app background under the tasks view (light/warm contexts only) */
html.light-mode #view-tasks { background: var(--sd-app-bg); }

/* ── Coach header ──────────────────────────────────────────────────────────── */
.smart-daily-header {
  background: var(--sd-header-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 16px 16px 18px;
  margin: -8px -4px 14px;
  color: var(--sd-header-text);
}
.smart-daily-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.smart-daily-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sd-header-name);
}
.smart-daily-streak {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sd-header-streak);
}

/* NudgeUP-xs66a: daily progress ring relocated from hero card to header streak line */
.daily-progress-ring {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--sd-ring-fill) var(--daily-ring-deg, 0deg), var(--sd-ring-track) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  /* inner cutout via box-shadow inset trick */
}
.daily-progress-ring::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sd-header-bg);
  pointer-events: none;
}
.daily-ring-label {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--sd-header-text);
  pointer-events: none;
}
.daily-progress-ring.daily-ring--pulse {
  animation: daily-ring-pulse 1s ease-in-out 3;
}
@keyframes daily-ring-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
/* Popover shown on tap (mobile) */
.daily-ring-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: var(--shadow-elevated);
  z-index: var(--z-modal);
  pointer-events: none;
}

.smart-daily-coach {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.smart-daily-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sd-avatar);
  margin-top: 2px;
}
.smart-daily-bubble {
  flex: 1;
  min-width: 0;
  background: var(--sd-bubble-bg);
  border-radius: 4px 14px 14px 14px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--sd-bubble-text);
}

/* ── NudgeUP-t5a8w: single adaptive "Today" card ─────────────────────────────
   Passive load line + one adaptive CTA + inline focus input + pinned focus,
   all living inside #smart-daily-header. Consolidates the old banner stack
   (#task-daily-total, #day-plan-banner, #morning-focus-card/pin, #for-you-chip,
   #task-progress-strip). Legacy elements are force-hidden below — their JS
   handlers/state are preserved and reused; only their standalone visuals go. */
.today-card-load {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-header-text);
  opacity: 0.92;
}
.today-card-load.hidden { display: none; }

.today-card-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  background: var(--sd-bubble-bg);
  border-radius: 12px;
  padding: 11px 12px;
}
.today-card-cta.hidden { display: none; }
.today-card-cta-msg {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sd-bubble-text);
}
.today-card-cta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.today-card-cta-btn {
  flex: 1;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
}
.today-card-cta-btn:hover { opacity: 0.9; }
.today-card-dismiss {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sd-bubble-text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.today-card-dismiss:hover { opacity: 1; }
.today-card-dismiss.hidden { display: none; }

.today-card-focus-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.today-card-focus-input-row.hidden { display: none; }
.today-card-focus-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.today-card-focus-set {
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
}
.today-card-focus-set:hover { opacity: 0.9; }

.today-card-focus {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  background: var(--sd-bubble-bg);
  border-radius: 10px;
  padding: 8px 11px;
}
.today-card-focus.hidden { display: none; }
.today-card-focus-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sd-bubble-text);
  opacity: 0.8;
  flex-shrink: 0;
}
.today-card-focus-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sd-bubble-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-card-focus-clear {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--sd-bubble-text);
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.6;
  padding: 2px 4px;
}
.today-card-focus-clear:hover { opacity: 1; }

/* NudgeUP-t5a8w: retire the standalone banner-stack visuals — all of their
   content/actions now route through the single Today card above. The elements
   stay in the DOM (handlers + state preserved and reused) but never paint as
   separate banners. The 7-day streak DOT row (#streak-dot-row) is intentionally
   NOT hidden — it's the kept Tasks streak display (y48uv). */
#task-daily-total,
#day-plan-banner,
#morning-focus-card,
#morning-focus-pin,
#for-you-chip,
#task-progress-strip { display: none !important; }

/* ── 4-stat strip ──────────────────────────────────────────────────────────── */
.smart-stats-strip {
  display: flex;
  background: var(--sd-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--sd-card-shadow);
  padding: 12px 4px;
  margin-bottom: 16px;
}
.smart-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  border-right: 1px solid var(--sd-surface-border);
}
.smart-stat:last-child { border-right: none; }
.smart-stat-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sd-surface-text);
  line-height: 1.1;
}
.smart-stat-done-val { color: var(--sd-stat-done); }
.smart-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sd-surface-muted);
}

/* ── Section labels ────────────────────────────────────────────────────────── */
.smart-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--sd-section-label);
  margin: 4px 2px 8px;
}
.smart-section-start { margin-top: 2px; }
/* NudgeUP-7pjfw: count pill on the active "Start here (N)" / "Remaining (N)"
   headings — mirrors the completed-section pill, theme-safe via vars. */
.smart-section-label .section-count {
  background: var(--color-surface-2);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* ── Hero focus card ───────────────────────────────────────────────────────── */
/* NudgeUP-xs66a: reduced padding — ring removed, so less vertical height needed */
.smart-hero-card {
  position: relative;
  background: var(--sd-hero-bg);
  border-radius: var(--radius-md);
  padding: 12px 14px 14px;
  margin-bottom: 18px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
/* NudgeUP-sasqs: when wrapped for swipe, the card's own bottom margin would
   leave an 18px strip where the inset:0 amber Snooze panel leaks through at
   rest. Move the spacing onto the wrap so the card box matches the action
   panels exactly (no colored bar visible until an actual swipe). */
.task-swipe-wrap--hero > .smart-hero-card {
  margin-bottom: 0;
}
.smart-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  /* NudgeUP-0a4wj: reserve room on the right so the AI Pick badge clears the
     absolutely-positioned ⋯ menu (.row-actions) pinned top-right (right:12px,
     30px wide). Without this the two stack on top of each other. */
  padding-right: 40px;
}
.hero-cat-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sd-hero-text);
  background: var(--sd-hero-pill-bg);
  padding: 4px 10px;
  border-radius: 999px;
}
.hero-ai-pick {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--sd-hero-ai-text);
  background: var(--sd-hero-ai-bg);
  padding: 4px 9px;
  border-radius: 999px;
}
.smart-hero-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sd-hero-text);
  margin-bottom: 8px;
  padding-right: 44px;
}
.smart-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-chip {
  font-size: 0.74rem;
  color: var(--sd-hero-muted);
  background: var(--sd-hero-pill-bg);
  padding: 3px 9px;
  border-radius: 8px;
}
.smart-hero-ring {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smart-hero-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--sd-hero-ring-inner);
}
.smart-hero-ring-label {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sd-hero-text);
}

/* ── Mini task list ────────────────────────────────────────────────────────── */
.smart-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.smart-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sd-mini-bg);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: var(--sd-mini-shadow);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.smart-mini-row:active { transform: scale(0.99); }
.smart-mini-row.mini-done { opacity: 0.5; }
.mini-row-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.mini-row-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--sd-mini-check-border);
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.smart-mini-row.mini-done .mini-row-check {
  background: #50c878;
  border-color: #50c878;
}
.mini-row-body {
  flex: 1;
  min-width: 0;
}
.mini-row-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sd-mini-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smart-mini-row.mini-done .mini-row-title { text-decoration: line-through; }
.mini-row-cat {
  font-size: 0.7rem;
  color: var(--sd-mini-cat);
  margin-top: 1px;
}
.mini-row-time {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sd-mini-time);
  white-space: nowrap;
}

/* NudgeUP-jmtl6: make the per-task estimate read louder on hero/mini cards so
   the time cost is impossible to miss (ADHD time-blindness cue). */
.task-est-chip {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* NudgeUP-f3wz: one-tap save-estimate chip (shown when a task has no estimate) */
.est-add-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.est-add-chip {
  border: 1px dashed var(--color-border, rgba(128, 128, 128, 0.45));
  background: transparent;
  color: var(--sd-mini-time, var(--color-text-muted, #888));
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.12s, border-color 0.12s;
}
.est-add-chip:hover,
.est-add-chip:focus-visible {
  border-style: solid;
  border-color: var(--color-primary, #7c5cff);
  color: var(--color-primary, #7c5cff);
  outline: none;
}
.est-add-opts {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.35));
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.est-add-opts.hidden { display: none; }
.est-add-opt {
  border: none;
  background: var(--color-bg-subtle, rgba(124, 92, 255, 0.1));
  color: var(--color-text, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.est-add-opt:hover,
.est-add-opt:focus-visible {
  background: var(--color-primary, #7c5cff);
  color: #fff;
  outline: none;
}

/* NudgeUP-y48uv: the .smart-daily-fab ruleset was removed along with its element.
   The desktop add-task FAB is now the canonical .fab-add (see its desktop rule
   above), which routes through _focusInlineQuickAdd() like every other entry point.
   (Its --sd-fab-* theme vars are left defined but unused — harmless.) */

/* ── Custom categories (NudgeUP-q5r3) ─────────────────────────────────────── */
.custom-categories-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.custom-cat-empty {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.custom-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, rgba(0,0,0,0.1));
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.custom-cat-emoji {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}
.custom-cat-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* NudgeUP-kizm2: trash-can icon button */
.custom-cat-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.custom-cat-delete svg {
  display: block;
  pointer-events: none;
}
.custom-cat-delete:hover {
  color: var(--color-danger, #e53e3e);
  background: rgba(229, 62, 62, 0.08);
}
/* NudgeUP-kizm2: flash green when a new row lands */
@keyframes custom-cat-added-flash {
  0%   { background: rgba(56, 161, 105, 0.22); }
  80%  { background: rgba(56, 161, 105, 0.10); }
  100% { background: transparent; }
}
.custom-cat-row--added {
  animation: custom-cat-added-flash 1.8s ease-out forwards;
}
.custom-category-add-form {
  margin-bottom: 10px;
}
.custom-cat-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.custom-cat-emoji-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border, rgba(0,0,0,0.15));
  background: var(--color-surface);
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}
.custom-cat-emoji-btn:hover {
  border-color: var(--color-primary);
}
.custom-cat-name-input {
  flex: 1;
  min-width: 0;
}
.custom-cat-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.custom-cat-emoji-option {
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.custom-cat-emoji-option:hover {
  background: rgba(0,0,0,0.05);
}
.custom-cat-emoji-option.selected {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 99, 179, 237), 0.1);
}
.custom-cat-add-btn {
  margin-bottom: 6px;
}
.custom-cat-limit-msg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-style: italic;
}

/* ── Keyboard shortcuts — NudgeUP-kcst ─────────────────────────────────────── */
/* Focus ring on keyboard-selected task card */
.task-card.kb-focused {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(155, 103, 245, 0.18), var(--shadow-card);
}

/* NudgeUP-o4vv: visible keyboard focus ring for the focusable task rows
   (role="button" hero card + mini-rows) so keyboard/screen-reader users can
   see which task is focused. :focus-visible only shows for keyboard nav. */
.smart-hero-card:focus-visible,
.smart-mini-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(155, 103, 245, 0.18);
}

/* Shortcuts help chip shown below the task list */
.task-kb-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.73rem;
  color: var(--color-text-muted);
  user-select: none;
  pointer-events: none;
}
.task-kb-hint.hidden { display: none; }
.task-kb-hint-icon { font-size: 0.85rem; opacity: 0.65; }
.task-kb-sep { opacity: 0.4; }
/* '? more' button inside the hint chip — styled inline, pointer-events enabled */
.task-kb-hint-legend-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.73rem;
  line-height: 1;
  padding: 2px 6px;
  pointer-events: auto;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.task-kb-hint-legend-btn:hover,
.task-kb-hint-legend-btn:focus-visible {
  background: var(--color-surface-hover, var(--color-surface-2));
  color: var(--color-text);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Keyboard legend overlay (NudgeUP-v6hl3) ────────────────────────────────── */
.kb-legend-sheet {
  max-width: 420px;
  width: calc(100% - 32px);
  margin: auto;
  border-radius: var(--radius-lg);
  padding: 20px;
}
/* Center the sheet vertically inside the overlay */
#modal-kb-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 600;
}
#modal-kb-legend.hidden { display: none; }
.kb-legend-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}
.kb-legend-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-legend-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 2px;
}
.kb-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--color-text);
}
.kb-legend-row span { flex: 1; }
.kb-legend-body kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--color-text);
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1;
  min-width: 28px;
  padding: 3px 6px;
  white-space: nowrap;
}
.kb-legend-body kbd.kb-legend-modifier { min-width: auto; font-size: 0.72rem; }

/* ── Nav pip (Smart Daily dot variant) ─────────────────────────────────────── */
.bottom-nav .nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #281408;
}
html:not(.light-mode):not(.theme-white) .bottom-nav .nav-btn.active::after {
  background: var(--color-primary-lt);
}

/* ── Theme onboarding overlay (NudgeUP-vj9n) ─────────────────────────────────
   Full-screen overlay shown on first login. Guard: localStorage 'nudgeup-theme-chosen'.
   Wired by initThemeOnboarding() in /js/modules/theme.js.                        */
.theme-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}
.theme-onboarding-overlay.hidden { display: none; }

.theme-onboarding-sheet {
  width: 100%;
  max-width: 480px;
  background: #16161e;
  border-radius: 24px;
  padding: 28px 20px 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
}

.theme-onboarding-header { text-align: center; margin-bottom: 24px; }
.theme-onboarding-emoji  { font-size: 2rem; margin-bottom: 8px; }
.theme-onboarding-title  { font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.3px; margin-bottom: 6px; }
.theme-onboarding-subtitle { font-size: 0.85rem; color: #888; line-height: 1.45; }

/* 2-column grid; Warm Hug card spans full width */
.theme-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* Each card is a <button> */
.theme-onboarding-card {
  border-radius: 14px;
  padding: 12px 12px 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  outline: none;
}
.theme-onboarding-card:focus-visible { box-shadow: 0 0 0 3px rgba(167,139,250,0.5); }
.theme-onboarding-card:hover  { transform: translateY(-2px); }

.theme-onboarding-card.toc-selected {
  border-color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 4px 20px rgba(167,139,250,0.18);
}

/* Checkmark badge — visible only on selected card */
.toc-check {
  display: none;
  position: absolute;
  top: 7px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #a78bfa;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.toc-selected .toc-check { display: block; }

/* Mini app preview inside each card */
.toc-preview {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  height: 68px;
  display: flex;
  flex-direction: column;
}
.toc-mini-nav {
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  gap: 5px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.toc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.toc-mini-content {
  flex: 1;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toc-task   { height: 9px; border-radius: 3px; opacity: 0.75; }
.toc-w-full { width: 100%; }
.toc-w-70   { width: 70%; }
.toc-w-50   { width: 50%; }

/* Card text */
.toc-name { font-size: 0.78rem; font-weight: 600; color: #e2e8f0; margin-bottom: 1px; }
.toc-desc { font-size: 0.68rem; color: #94a3b8; }

/* Warm Hug full-width card */
.toc-full-width {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.toc-full-width .toc-preview {
  margin-bottom: 0;
  height: 50px;
  width: 90px;
  flex-shrink: 0;
}
.toc-full-width .toc-mini-content { padding: 4px 7px; }
.toc-card-info { flex: 1; }

/* ── Per-theme mini-preview colors ── */
/* Dark */
.toc-dark                 { background: #1a1a24; }
.toc-dark .toc-preview    { background: #0e0e14; }
.toc-dark .toc-mini-nav   { background: #1a1a24; color: #a78bfa; }
.toc-dark .toc-dot        { background: #a78bfa; }
.toc-dark .toc-task       { background: #2a2a3e; }
.toc-dark .toc-task.toc-accent { background: #7c3aed; }

/* Light */
.toc-light                { background: #f0f0f8; }
.toc-light .toc-preview   { background: #f8f8ff; }
.toc-light .toc-mini-nav  { background: #f0f0f8; color: #6d28d9; }
.toc-light .toc-dot       { background: #7c3aed; }
.toc-light .toc-task      { background: #ddddf0; }
.toc-light .toc-task.toc-accent { background: #7c3aed; }
.toc-light .toc-name      { color: #1e1e2e; }
.toc-light .toc-desc      { color: #64748b; }

/* Cosmos */
.toc-cosmos                { background: #0a0a1a; }
.toc-cosmos .toc-preview   { background: linear-gradient(135deg, #0d0d2b 0%, #1a0a2e 100%); }
.toc-cosmos .toc-mini-nav  { background: rgba(255,255,255,0.05); color: #c084fc; }
.toc-cosmos .toc-dot       { background: #c084fc; }
.toc-cosmos .toc-task      { background: rgba(255,255,255,0.07); border: 1px solid rgba(192,132,252,0.15); }
.toc-cosmos .toc-task.toc-accent { background: rgba(192,132,252,0.28); }

/* Terminal */
.toc-terminal                { background: #001200; }
.toc-terminal .toc-preview   { background: #000; }
.toc-terminal .toc-mini-nav  { background: #001200; color: #00ff41; font-family: 'Courier New', monospace; }
.toc-terminal .toc-dot       { background: #00ff41; }
.toc-terminal .toc-task      { background: rgba(0,255,65,0.08); border: 1px solid rgba(0,255,65,0.14); }
.toc-terminal .toc-task.toc-accent { background: rgba(0,255,65,0.24); }
.toc-terminal .toc-name      { color: #00ff41; font-family: 'Courier New', monospace; }

/* Aurora */
.toc-aurora                { background: #0f0a1e; }
.toc-aurora .toc-preview   { background: linear-gradient(135deg, #1a0a2e, #0a1a2e, #0a2e1a); }
.toc-aurora .toc-mini-nav  { background: rgba(255,255,255,0.05); color: #34d399; }
.toc-aurora .toc-dot       { background: #34d399; }
.toc-aurora .toc-task      { background: rgba(255,255,255,0.07); }
.toc-aurora .toc-task.toc-accent { background: linear-gradient(90deg, #7c3aed, #34d399); }

/* White Bold */
.toc-white                { background: #ffffff; border-color: #e2e8f0 !important; }
.toc-white.toc-selected   { border-color: #a78bfa !important; }
.toc-white .toc-preview   { background: #f8fafc; }
.toc-white .toc-mini-nav  { background: #ffffff; color: #334155; border-bottom: 1px solid #e2e8f0; }
.toc-white .toc-dot       { background: #334155; }
.toc-white .toc-task      { background: #e2e8f0; }
.toc-white .toc-task.toc-accent { background: #334155; }
.toc-white .toc-name      { color: #0f172a; }
.toc-white .toc-desc      { color: #475569; }

/* Warm Hug */
.toc-warm                { background: #2a1508; }
.toc-warm .toc-preview   { background: #1c0e04; }
.toc-warm .toc-mini-nav  { background: #281408; color: #f59e0b; }
.toc-warm .toc-dot       { background: #f59e0b; }
.toc-warm .toc-task      { background: rgba(245,158,11,0.1); }
.toc-warm .toc-task.toc-accent { background: #d4604a; }

/* CTA button */
.theme-onboarding-cta {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: opacity var(--transition-fast);
  font-family: inherit;
}
.theme-onboarding-cta:hover   { opacity: 0.9; }
.theme-onboarding-cta:active  { opacity: 0.82; }
.theme-onboarding-cta:focus-visible { outline: 3px solid rgba(167,139,250,0.5); outline-offset: 2px; }

/* Skip / dismiss link — NudgeUP-g6rf */
.theme-onboarding-skip {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: none;
  border: none;
  color: #666;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: color var(--transition-fast);
}
.theme-onboarding-skip:hover { color: #aaa; }
.theme-onboarding-skip:focus-visible { outline: 2px solid rgba(167,139,250,0.5); outline-offset: 2px; border-radius: 4px; }

/* Hint text below CTA */
.theme-onboarding-hint {
  text-align: center;
  margin-top: 12px;
  font-size: 0.72rem;
  color: #555;
  line-height: 1.4;
}

/* ── Energy-sort chip (NudgeUP-ntp3) ────────────────────────────────────── */
.energy-sort-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08));
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 10px;
  animation: slideDown 0.25s ease;
}
.energy-sort-chip.hidden { display: none; }
.energy-sort-icon { font-size: 1rem; flex-shrink: 0; }
.energy-sort-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.energy-sort-reset {
  flex-shrink: 0;
  background: rgba(124,58,237,0.14);
  border: 1px solid rgba(124,58,237,0.40);
  color: var(--color-accent-text, #7c3aed); /* NudgeUP-qbc2h a11y */
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  font-family: inherit;
}
.energy-sort-reset:hover { background: rgba(124,58,237,0.25); }
.energy-sort-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}

/* ── "Right now, do this one" best-task CTA (NudgeUP-xdwc6) ──────────────── */
.best-task-cta {
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(6,182,212,0.10));
  border: 1px solid rgba(124,58,237,0.42);
  border-radius: var(--radius-lg, 14px);
  padding: 14px 16px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.best-task-cta.hidden { display: none; }
.best-task-cta-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.best-task-cta-icon { font-size: 1rem; flex-shrink: 0; }
.best-task-cta-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text, #7c3aed); /* NudgeUP-qbc2h a11y */
}
.best-task-cta-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 5px;
}
.best-task-cta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.best-task-cta-meta:empty { display: none; }
.best-task-cta-chip {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(124,58,237,0.10);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 999px;
  padding: 2px 9px;
}
.best-task-cta-reason {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
}
.best-task-cta-reason.hidden { display: none; }
.best-task-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, var(--color-accent, #7c3aed), #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, filter var(--transition-fast) ease;
}
.best-task-cta-btn:hover { filter: brightness(1.07); }
.best-task-cta-btn:active { transform: scale(0.98); }

/* ── Overload warning card (NudgeUP-29z9) ───────────────────────────────── */
.overload-warning-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(251,191,36,0.09));
  border: 1px solid rgba(245,158,11,0.38);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.25s ease;
}
.overload-warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.overload-warning-icon { font-size: 1.1rem; flex-shrink: 0; }
.overload-warning-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(245,158,11,0.95);
}
.overload-warning-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.overload-warning-dismiss:hover { color: var(--color-text); }
.overload-warning-summary {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 8px;
}
.overload-warning-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.overload-top3-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.overload-top3-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
}
.overload-top3-rank {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(245,158,11,0.85);
  min-width: 16px;
}
.overload-show-all {
  background: none;
  border: 1px solid rgba(245,158,11,0.35);
  color: rgba(245,158,11,0.90);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: inherit;
  width: 100%;
}
.overload-show-all:hover { background: rgba(245,158,11,0.10); }
.energy-sort-dismiss:hover { color: var(--color-text); }

/* ── Goal Decomposition (NudgeUP-ia3b) ─────────────────────────────────────── */
.task-decompose-row {
  margin-bottom: 12px;
}

.btn-break-this-down {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--color-primary, #7c6cfc);
  color: var(--color-primary, #7c6cfc);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}
.btn-break-this-down:hover {
  background: rgba(124,108,252,0.10);
}
.btn-break-this-down:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 'Stuck on this task?' proactive nudge (NudgeUP-ik2v) */
.stuck-nudge {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(124, 108, 252, 0.08);
  border: 1px solid rgba(124, 108, 252, 0.25);
  animation: stuckNudgeIn 0.25s ease;
}
@keyframes stuckNudgeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stuck-nudge-text {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-text, #1a1a2e);
}
.stuck-nudge-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stuck-nudge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary, #7c6cfc);
  border: none;
  color: #fff;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: filter var(--transition-fast);
}
.stuck-nudge-btn:hover { filter: brightness(1.06); }
.stuck-nudge-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted, #6b6b80);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 4px;
}
.stuck-nudge-dismiss:hover { text-decoration: underline; }

/* NudgeUP-7ljv6: "Where was I?" resume banner — shown at the top of the task
   edit modal (ADHD Mode) to recap the last step + notes snippet on re-entry. */
.task-resume-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(124, 108, 252, 0.08);
  border: 1px solid rgba(124, 108, 252, 0.25);
  animation: stuckNudgeIn 0.25s ease;
}
.task-resume-banner-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary, #7c6cfc);
  margin-bottom: 6px;
}
.task-resume-banner-head .task-resume-banner-icon { display: inline-flex; align-items: center; }
.task-resume-banner-line {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text, #1a1a2e);
}
.task-resume-banner-line + .task-resume-banner-line { margin-top: 4px; }
.task-resume-banner-line .task-resume-banner-label {
  color: var(--color-text-muted, #6b6b80);
  font-weight: 600;
}

/* Subtask sheet (NudgeUP-ia3b) */
.subtask-sheet-goal-name {
  font-size: 0.85rem;
  margin: 0 0 12px;
  padding: 0 4px;
}

.subtask-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 16px;
}

.subtask-sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2, #1e1e2e);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.subtask-sheet-item:hover {
  background: var(--color-surface-3, #26263a);
}
.subtask-sheet-item input[type="checkbox"] {
  accent-color: var(--color-primary, #7c6cfc);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.subtask-sheet-item.pick-mode input[type="checkbox"] {
  display: inline-block;
}
.subtask-sheet-item .subtask-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.subtask-sheet-item .subtask-title {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.3;
}
.subtask-sheet-item .subtask-duration {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

/* NudgeUP-vo7k: inline check-off toggle so users mark subtasks done in the sheet */
.subtask-done-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #3a3a4f);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.subtask-done-toggle .subtask-done-check {
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 700;
}
.subtask-done-toggle:hover {
  border-color: var(--color-primary, #7c6cfc);
}
.subtask-sheet-item.subtask-done .subtask-done-toggle {
  background: var(--color-primary, #7c6cfc);
  border-color: var(--color-primary, #7c6cfc);
  color: #fff;
}
.subtask-sheet-item.subtask-done .subtask-title {
  text-decoration: line-through;
  color: var(--color-text-muted, #888);
}

.subtask-sheet-progress {
  font-size: 0.78rem;
  color: var(--color-text-muted, #888);
  margin: 0 0 10px;
  padding: 0 4px;
  font-weight: 600;
}
.subtask-sheet-progress.subtask-progress-complete {
  color: var(--color-primary, #7c6cfc);
}

.subtask-sheet-actions {
  flex-direction: column;
  gap: 8px;
}
.subtask-sheet-actions.pick-mode-active #btn-subtask-pick {
  display: none;
}

.subtask-sheet-loading {
  padding: 12px 4px;
}

.subtask-sheet-error {
  font-size: 0.875rem;
  color: var(--color-danger, #f87171);
  padding: 8px 4px;
}

/* Paywall prompt inside subtask sheet for free users */
.subtask-paywall-gate {
  text-align: center;
  padding: 16px 8px;
}
.subtask-paywall-gate p {
  font-size: 0.9rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 12px;
}
.subtask-paywall-gate .btn-primary {
  width: 100%;
}

/* ── Weekly top-bud emoji summary card (NudgeUP-im6p) ───────────────────────── */
.weekly-top-bud-card {
  background: linear-gradient(135deg, rgba(251,191,36,0.14) 0%, rgba(245,158,11,0.10) 100%);
  border: 1px solid rgba(245,158,11,0.40);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 14px;
  animation: milestone-slide-in 0.35s ease;
}
.weekly-top-bud-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.weekly-top-bud-card__icon {
  font-size: 1.1rem;
  line-height: 1;
}
.weekly-top-bud-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-warning, #f59e0b);
  letter-spacing: 0.01em;
}
.weekly-top-bud-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.weekly-top-bud-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-text);
}
.weekly-top-bud-item__emoji {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.weekly-top-bud-item__name {
  font-weight: 600;
}
.weekly-top-bud-item__count {
  color: var(--color-text-muted, #888);
  font-size: 0.8125rem;
}

/* ── Clarity mode TL;DR chip (NudgeUP-sul4) ─────────────────────────────── */
.coach-tldr-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-tldr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1.5px dashed var(--accent, #9b67f5);
  background: transparent;
  color: var(--accent, #9b67f5);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  align-self: flex-start;
}
.coach-tldr-chip::before { content: '\2726'; font-size: 0.65rem; opacity: 0.75; }
.coach-tldr-chip:hover:not(:disabled) { background: var(--accent, #9b67f5); color: #fff; }
.coach-tldr-chip:disabled { opacity: 0.65; cursor: default; }
.coach-tldr-summary {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text, #222);
  background: rgba(124, 58, 237, 0.07);
  border-left: 3px solid var(--accent, #9b67f5);
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  margin: 0;
  line-height: 1.4;
}
.coach-tldr-summary.hidden { display: none; }

/* ── Copy-to-clipboard button on coach responses (NudgeUP-lpyl) ─────────────── */
.coach-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--accent, #9b67f5);
  background: transparent;
  color: var(--accent, #9b67f5);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.coach-copy-btn::before { content: '\29C9'; font-size: 0.85rem; opacity: 0.85; }
.coach-copy-btn:hover { background: var(--accent, #9b67f5); color: #fff; }
.coach-copy-btn.copied {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}
.coach-copy-btn.copied::before { content: '\2713'; }
.coach-copy-btn.copied:hover { background: rgba(16, 185, 129, 0.12); color: #10b981; }

/* ── Remembered truths: pin button + sidebar widget (NudgeUP-yqtz) ─────────── */
.coach-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  margin-left: 8px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--accent, #9b67f5);
  background: transparent;
  color: var(--accent, #9b67f5);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.coach-pin-btn::before { content: '\2606'; font-size: 0.9rem; opacity: 0.9; }
.coach-pin-btn:hover { background: var(--accent, #9b67f5); color: #fff; }
.coach-pin-btn.pinned {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  cursor: default;
}
.coach-pin-btn.pinned::before { content: '\2605'; }
.coach-pin-btn.pinned:hover { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

.remembered-truths-widget {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--card-bg, rgba(245, 158, 11, 0.04));
}
.remembered-truths-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.remembered-truths-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text, inherit);
  letter-spacing: 0.01em;
}
.remembered-truths-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remembered-truth-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
}
.remembered-truth-text {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text, inherit);
  white-space: pre-wrap;
  word-break: break-word;
}
.remembered-truth-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.remembered-truth-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ── Personal best milestone card (NudgeUP-yvmi) ─────────────────────────────── */
.personal-best-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(5,150,105,0.09) 100%);
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(16,185,129,0.15);
  animation: personal-best-slide-in 0.35s ease;
  position: relative;
}
.personal-best-card.hidden { display: none; }
.personal-best-card__emoji {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.personal-best-card__body {
  flex: 1;
  min-width: 0;
}
.personal-best-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-success, #059669);
  margin: 0 0 2px;
  line-height: 1.3;
}
.personal-best-card__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.personal-best-card__dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.personal-best-card__dismiss:hover {
  color: var(--color-text);
  background: rgba(0,0,0,0.06);
}
@keyframes personal-best-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   A11Y FOCUS BASELINE (NudgeUP-pbhb)
   Appended at the END so it wins by cascade (napkin Frontend #4). Guarantees a
   visible, theme-tokened focus ring for keyboard users on every interactive
   control — including ones that previously set `outline:none` on :focus. Scoped
   to :focus-visible so pointer users don't see rings. Uses --focus-ring, which
   resolves to --color-primary per theme (contrast holds across all 7 themes).
   ───────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
.nav-btn:focus-visible,
.icon-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-link:focus-visible,
.tab-btn:focus-visible,
.modal-close:focus-visible,
.pw-toggle:focus-visible,
.task-search-input:focus-visible,
.otp-input:focus-visible {
  outline: 2px solid var(--focus-ring, #7C3AED);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

/* Inputs already carry their own border/radius — keep the ring tight to them. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
}

/* NudgeUP-pbhb: inline links inside body/legal text must be distinguishable by
   more than colour (axe link-in-text-block). Underline the Terms/Privacy links
   in the auth footer and any inline link sitting in a muted paragraph. */
.auth-container p a,
.legal-text a,
p.muted a {
  text-decoration: underline;
}

/* ── Brain Dump (NudgeUP-ikpxk) ─────────────────────────────────────────────── */

/* Entry button in task header */
.btn-brain-dump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--accent, #7C3AED);
  color: var(--accent, #7C3AED);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-brain-dump:hover,
.btn-brain-dump:focus-visible {
  background: var(--accent, #7C3AED);
  color: #fff;
}
.btn-brain-dump svg { flex-shrink: 0; }

/* Modal sheet — taller than default to show full review list */
.brain-dump-sheet {
  max-height: 95vh;
}

.brain-dump-subtitle {
  margin: -8px 0 16px;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Input step */
.brain-dump-input-row {
  position: relative;
}
.brain-dump-textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  padding: 12px 44px 12px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-input-bg, var(--color-surface));
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.5;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.brain-dump-textarea:focus {
  outline: none;
  border-color: var(--accent, #7C3AED);
}
.brain-dump-mic {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.brain-dump-mic:hover { color: var(--accent, #7C3AED); background: var(--color-hover, rgba(0,0,0,0.05)); }
.brain-dump-mic.recording { color: var(--color-danger, #ef4444); }

.brain-dump-char-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 4px;
  min-height: 16px;
}

/* Parsing indicator — 3-step progress (NudgeUP-0zp83) */
.brain-dump-parsing {
  padding: 16px 0 8px;
}

/* Step list */
.bd-parse-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-parse-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.35;
  transition: opacity var(--transition-slow) ease;
}

/* Active step */
.bd-parse-step.bd-step-active {
  opacity: 1;
}

/* Done step */
.bd-parse-step.bd-step-done {
  opacity: 0.65;
}

/* Step icon circle */
.bd-parse-step-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #e5e7eb);
  background: transparent;
  position: relative;
  transition: border-color var(--transition-slow) ease, background var(--transition-slow) ease;
}

/* Active: spinning ring */
.bd-parse-step.bd-step-active .bd-parse-step-icon {
  border-color: var(--accent, #7C3AED);
  border-top-color: transparent;
  animation: bdStepSpin 0.75s linear infinite;
}

/* Done: filled circle with checkmark */
.bd-parse-step.bd-step-done .bd-parse-step-icon {
  background: var(--accent, #7C3AED);
  border-color: var(--accent, #7C3AED);
  animation: none;
}
.bd-parse-step.bd-step-done .bd-parse-step-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 6px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Step label */
.bd-parse-step-label {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  transition: color var(--transition-slow) ease, font-weight var(--transition-slow) ease;
}
.bd-parse-step.bd-step-active .bd-parse-step-label {
  color: var(--color-text);
  font-weight: 600;
}
.bd-parse-step.bd-step-done .bd-parse-step-label {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Spin keyframe */
@keyframes bdStepSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-parse-step.bd-step-active .bd-parse-step-icon {
    animation: none;
    border-color: var(--accent, #7C3AED);
    border-top-color: var(--accent, #7C3AED);
  }
}

/* Review step */
.brain-dump-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.brain-dump-review-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.brain-dump-select-all-btn {
  background: none;
  border: none;
  color: var(--accent, #7C3AED);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 2px 0;
  font-weight: 600;
}
.brain-dump-select-all-btn:hover { text-decoration: underline; }

/* Parsed task list */
.brain-dump-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 38vh;
  overflow-y: auto;
}
.brain-dump-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.brain-dump-task-item.brain-dump-task-unchecked {
  opacity: 0.45;
}
.brain-dump-task-cb {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent, #7C3AED);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.brain-dump-task-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.brain-dump-task-title {
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
  border-radius: 3px;
  padding: 1px 3px;
  outline: none;
  cursor: text;
}
.brain-dump-task-title:focus {
  background: var(--color-hover, rgba(124,58,237,0.07));
  box-shadow: 0 0 0 1.5px var(--accent, #7C3AED);
}
.brain-dump-task-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Coach guidance card */
.brain-dump-coach {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-coach-bg, rgba(124,58,237,0.07));
  border-radius: var(--radius-sm, 8px);
  border-left: 3px solid var(--accent, #7C3AED);
  margin-bottom: 12px;
}
.brain-dump-coach-icon {
  flex-shrink: 0;
  color: var(--accent, #7C3AED);
  margin-top: 1px;
}
.brain-dump-coach-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
/* NudgeUP-vjtnj: Retry affordance shown when coach guidance fails to load.
   flex-basis 100% forces it onto its own line below the coach text. */
.brain-dump-coach-retry {
  flex: 0 0 100%;
  margin-top: 8px;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent, #7C3AED);
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 7px 14px;
  cursor: pointer;
  transition: opacity var(--transition-fast) ease;
}
.brain-dump-coach-retry:hover { opacity: 0.9; }
.brain-dump-coach-retry:active { transform: translateY(1px); }

/* Start here pick */
.brain-dump-start-pick {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--color-success-bg, rgba(16,185,129,0.08));
  border-radius: var(--radius-sm, 8px);
  border-left: 3px solid var(--color-success, #10b981);
}
.brain-dump-start-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 600;
}
.brain-dump-start-task {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
  word-break: break-word;
}

/* Refinement chat row (NudgeUP-oiipn) */
.brain-dump-refine-wrap {
  margin-bottom: 12px;
}
.brain-dump-refine-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.brain-dump-refine-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.85rem;
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.brain-dump-refine-input::placeholder { color: var(--color-text-muted); }
.brain-dump-refine-input:focus {
  border-color: var(--accent, #7C3AED);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
}
.brain-dump-refine-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--accent, #7C3AED);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.brain-dump-refine-send:hover:not(:disabled) { background: var(--accent-hover, #6d28d9); }
.brain-dump-refine-send:disabled { opacity: 0.45; cursor: not-allowed; }
.brain-dump-refine-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.brain-dump-refine-status-label { font-size: 0.8rem; color: var(--color-text-muted); }

/* Done step */
.brain-dump-done-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0 8px;
  text-align: center;
}
.brain-dump-done-icon {
  color: var(--color-success, #10b981);
}
.brain-dump-done-msg {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 300px;
  margin: 0;
}

/* ── Add many / Import paste (NudgeUP-nwr1s) ─────────────────────────────────── */

.btn-import-paste {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-import-paste:hover,
.btn-import-paste:focus-visible {
  border-color: var(--accent, #7C3AED);
  color: var(--accent, #7C3AED);
  background: var(--color-surface);
}
.btn-import-paste svg { flex-shrink: 0; }

.import-paste-sheet {
  max-height: 90vh;
}
.import-paste-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.import-paste-subtitle {
  margin: -8px 0 4px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.import-paste-textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.import-paste-textarea:focus {
  outline: none;
  border-color: var(--accent, #7C3AED);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.import-paste-textarea::placeholder { color: var(--color-text-muted); }
.import-paste-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.import-paste-actions .btn-primary,
.import-paste-actions .btn-secondary { flex: 1; min-width: 120px; }
.import-paste-coach-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Preview list */
.import-paste-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.import-paste-count {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.import-paste-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}
.import-paste-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
}
.import-paste-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
}
.import-paste-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.import-paste-date-chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(124,58,237,0.1);
  color: var(--accent, #7C3AED);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.import-paste-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.import-paste-remove:hover { color: var(--color-danger, #ef4444); background: rgba(239,68,68,0.08); }

/* Done step */
.import-paste-done-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 0 8px;
  text-align: center;
}
.import-paste-done-icon { color: var(--color-success, #10b981); }
.import-paste-done-msg {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 300px;
  margin: 0;
}

/* ── Magic Import (NudgeUP-2amms) ──────────────────────────────────────────── */
.import-magic-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin: 2px 0;
}
.import-magic-divider::before,
.import-magic-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border, #e5e7eb);
}

/* Paywall gate card */
.import-magic-gate {
  border: 1.5px dashed var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  padding: 14px 16px;
  background: var(--color-surface);
}
.import-magic-gate-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.import-magic-gate-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.import-magic-gate-desc {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}
.import-magic-gate .btn-primary {
  align-self: flex-start;
  margin-top: 4px;
}

/* PRO badge — used in gate card and inline button */
.import-magic-pro-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent, #7C3AED);
  color: #fff;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.import-magic-pro-badge-inline {
  display: inline-block;
  padding: 1px 5px;
  background: var(--accent, #7C3AED);
  color: #fff;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Magic Import button (PRO path) */
.import-magic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  font-weight: 600;
  font-size: 0.88rem;
}
.import-magic-btn svg { flex-shrink: 0; }

/* Loading step */
.import-magic-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0 16px;
  text-align: center;
}
.import-magic-loading-msg {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}
.import-magic-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border, #e5e7eb);
  border-top-color: var(--accent, #7C3AED);
  border-radius: 50%;
  animation: import-magic-spin 0.7s linear infinite;
}
@keyframes import-magic-spin {
  to { transform: rotate(360deg); }
}

/* Category chip in preview */
.import-magic-cat-chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(124,58,237,0.08);
  color: var(--accent, #7C3AED);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Time estimate chip in preview */
.import-magic-time-chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(16,185,129,0.1);
  color: var(--color-success, #10b981);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Honour reduced-motion: never let the focus baseline animate. */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    transition: none !important;
  }
  .import-magic-spinner { animation: none; border-top-color: var(--accent, #7C3AED); }
}

/* ── Birthday theme (NudgeUP-xmchn) ──────────────────────────────────────── */

/* Body BG radial gradient — only when .bday-active is on body */
body.bday-active {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(244,114,182,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 5%, rgba(196,181,253,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(165,243,252,.10) 0%, transparent 60%),
    var(--color-bg, #0F0E17);
  box-shadow: inset 0 0 0 2px rgba(139,92,246,.38);
}

/* Birthday header strip */
.bday-header-strip {
  position: relative;
  background: linear-gradient(135deg, #fde68a 0%, #fbcfe8 45%, #ddd6fe 100%);
  flex-shrink: 0;
  overflow: hidden;
  z-index: 60;
}
.bday-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.bday-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bday-strip-balloons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.bday-strip-msg {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #581c87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bday-strip-dismiss {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.bday-strip-dismiss:hover {
  background: rgba(255,255,255,0.75);
}

/* Falling confetti pieces */
.bday-strip-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bday-confetti-piece {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  opacity: 0;
  animation: bday-fall var(--fall-dur, 3s) var(--fall-delay, 0s) linear infinite;
}
@keyframes bday-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(46px) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bday-confetti-piece { animation: none; opacity: 0.4; }
}

/* Birthday grace pill (below streak dots) */
.bday-grace-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
  margin: 4px 0 0 0;
}

/* Birthday hero card */
.bday-hero-card {
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(135deg, rgba(244,114,182,0.12) 0%, rgba(196,181,253,0.12) 50%, rgba(165,243,252,0.08) 100%);
  border: 1px solid rgba(196,181,253,0.3);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.bday-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(244,114,182,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.bday-hero-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.bday-hero-cake {
  flex-shrink: 0;
}
.bday-hero-text {
  flex: 1;
  min-width: 0;
}
.bday-hero-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #E8E8F0);
  margin-bottom: 3px;
}
.bday-hero-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #8E8EA0);
  margin-bottom: 10px;
}
.bday-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bday-hero-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(244,114,182,0.2), rgba(196,181,253,0.2));
  border: 1px solid rgba(196,181,253,0.35);
  color: var(--color-text, #E8E8F0);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.bday-hero-chip:hover {
  background: linear-gradient(90deg, rgba(244,114,182,0.32), rgba(196,181,253,0.32));
}

/* Birthday badge on Me/Profile nav */
.nav-bday-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Light mode adjustments for birthday strip */
html.light-mode .bday-strip-msg {
  color: #4c1d95;
}
html.light-mode .bday-strip-dismiss {
  color: #6d28d9;
  border-color: rgba(109,40,217,0.25);
}

/* NudgeUP-xi45w: Birthday feed card — highlighted variation of .feed-card */
.bday-feed-card {
  border-color: rgba(251, 191, 36, 0.35);
  background: color-mix(in srgb, var(--color-surface-2, rgba(255,255,255,0.04)) 80%, rgba(251,191,36,0.12) 20%);
}

/* NudgeUP-xi45w: Send Birthday Nudge CTA button */
.btn-birthday-nudge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.btn-birthday-nudge:hover {
  opacity: 0.88;
}
.btn-birthday-nudge:active {
  opacity: 0.75;
}

/* ── Birthday coach greeting card (NudgeUP-fabhp) ─────────────────────────── */
.bday-coach-card {
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, rgba(244,114,182,0.14) 0%, rgba(196,181,253,0.14) 50%, rgba(165,243,252,0.10) 100%);
  border: 1px solid rgba(196,181,253,0.35);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
  animation: slideDown 0.25s ease;
}
.bday-coach-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bday-coach-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1;
}
.bday-coach-label {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  min-width: 0;
}
.bday-coach-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.bday-coach-dismiss:hover { color: var(--color-text); }
.bday-coach-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 12px 0;
}
.bday-coach-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: var(--radius-md, 12px);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.bday-coach-cta:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.bday-coach-cta:active { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
  .bday-coach-card { animation: none; }
}

/* ── NudgeUP-k0w9t: Streak milestone feed card (3/7/14/30 day) ─────────────── */
.streak-milestone-feed-card {
  border-color: rgba(245, 158, 11, 0.35);
  background: color-mix(in srgb, var(--color-surface-2, rgba(255,255,255,0.04)) 80%, rgba(245,158,11,0.12) 20%);
}
.streak-milestone-feed-card .feed-event-text strong {
  color: var(--color-warning, #d97706);
}

/* ── NudgeUP-8oadh: Help & FAQ bottom sheet ─────────────────────────────────── */
.help-faq-sheet {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.help-faq-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 4px 24px;
  -webkit-overflow-scrolling: touch;
}

/* FAQ accordion sections */
.faq-section {
  border-bottom: 1px solid var(--color-border);
}
.faq-section:last-child { border-bottom: none; }
.faq-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.faq-chevron {
  font-size: 1rem;
  transition: transform var(--transition-base) ease;
  display: inline-block;
  color: var(--color-text-muted);
  margin-left: 8px;
  flex-shrink: 0;
}
.faq-section-header[aria-expanded="true"] .faq-chevron {
  transform: rotate(90deg);
}
.faq-section-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow) ease;
}
.faq-section-body.open {
  max-height: 600px;
}
.faq-item {
  padding: 0 0 14px;
}
.faq-item + .faq-item {
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.faq-q {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 5px;
}
.faq-a {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.faq-link {
  color: var(--color-primary);
  text-decoration: none;
}
.faq-link:hover { text-decoration: underline; }

/* ── NudgeUP-8oadh: First-use contextual hint banners ───────────────────────── */
.ctx-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin: 8px 0;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: 10px;
  animation: ctx-hint-in 0.25s ease;
}
@keyframes ctx-hint-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ctx-hint-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.ctx-hint-text {
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text);
}
.ctx-hint-dismiss {
  background: none;
  border: none;
  padding: 0 0 0 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Mobile touch targets (NudgeUP-4f9k7) ────────────────────────────────────
   Apple HIG and Material Design both require interactive elements to have a
   minimum 44×44 px tap area. We apply this as a non-breaking additive layer:
   visual size is unchanged where possible; only the interactive hit area grows.
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Remove the default blue tap flash on all interactive elements globally. */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* 2. .btn-sm — bump to minimum 44px height while keeping compact visual style.
      display:inline-flex + align-items:center lets padding be vertical-centred
      without changing the surrounding layout (flex/inline contexts both work). */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* 3. Icon-only buttons — enforce 44×44 minimum tap square. */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4. Password-visibility toggle — already fills the field height, but the
      field can be short on some screens; floor at 44px so taps never miss. */
.pw-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* 5. Checkboxes — the visual 18px box stays the same size; we expand the hit
      area by making the wrapping label a positioned block whose ::before
      pseudo-element stretches the tap target to 44×44 around the checkbox.
      NOTE: input[type="checkbox"] is a replaced element — ::before never renders
      on it, so the pseudo-element must stay on the wrapper label.
      left:50% (9em1h) centred the hit area on the row midpoint, missing the
      left-aligned checkbox on wide rows. Fix (emf5d): pin left to the checkbox
      centre so the 44px hit area is always centred on the checkbox.
      .field-check: no padding, 18px checkbox → centre at left:9px
      .vibe-export-tags-label: no padding, 14px checkbox → centre at left:7px
      .subtask-sheet-item: padding-left:12px, 16px checkbox → centre at left:20px */
.field-check,
.vibe-export-tags-label,
.subtask-sheet-item {
  position: relative;
}
.field-check::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.vibe-export-tags-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.subtask-sheet-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* 6. Bottom-nav buttons — already flex-fill but can collapse below 44px on
      narrow phones; guard the height. */
.nav-btn {
  min-height: 44px;
}
.ctx-hint-dismiss:hover { opacity: 1; }

/* ── iOS auto-zoom prevention — all <select> elements need font-size >= 16px ── */
select {
  font-size: 16px;
}

/* ── Bottom sheet drawers — slide-up on mobile (NudgeUP-6piwq) ──────────────
   On mobile (≤767px) modals slide up from the bottom instead of appearing
   instantly. The .hidden class is overridden for .modal: instead of
   display:none we use transform+visibility so the exit can animate.
   Desktop (≥768px) keeps the centered-dialog behaviour unchanged.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Keep the modal in the render tree so the slide-out transition works */
  .modal.hidden {
    display: flex !important;       /* override global .hidden {display:none} */
    visibility: hidden;
    pointer-events: none;
  }

  /* Slide the backdrop in/out */
  .modal .modal-overlay {
    transition: opacity 0.28s ease;
    opacity: 1;
  }
  .modal.hidden .modal-overlay {
    opacity: 0;
  }

  /* Slide the sheet up on open, down on close */
  .modal .modal-sheet {
    /* Replace the one-shot spring animation with a reversible transition */
    animation: none;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0.32s;
    transform: translateY(0);
    will-change: transform;
  }
  .modal.hidden .modal-sheet {
    transform: translateY(110%);
  }

  /* Drag handle is always shown on mobile */
  .modal-handle { display: block; }
}

/* NudgeUP-ggsmv: prefers-reduced-motion — bottom sheet opens instantly (no slide) */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .modal .modal-sheet {
    transition: none;
  }
  .modal .modal-overlay {
    transition: none;
  }
}

/* ── Landscape / compact mode for short viewports (e.g. phone rotated) ─────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Collapse the fixed bottom nav to a slim icon-only strip */
  .bottom-nav {
    height: 40px;
    padding-bottom: 0;
  }
  .nav-btn {
    min-height: 40px;
    font-size: 0;          /* hide labels */
  }
  .nav-btn .nav-label {
    display: none;
  }
  .nav-btn svg {
    width: 20px;
    height: 20px;
  }
  /* Give back the vertical space the shrunken nav freed up */
  .app-main {
    padding-bottom: 40px;
  }
}

/* ── NudgeUP-i6fjm: Swipe gesture reveal — task cards ───────────────────── */
/* Wrap sits in the list flow; action panels sit behind the draggable child.   */
.task-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;  /* matches .smart-mini-row border-radius */
  /* Inherit gap / margin from parent list — no extra spacing added */
}

/* Hero card variant — match .smart-hero-card border-radius */
.task-swipe-wrap--hero {
  border-radius: 18px;
  /* NudgeUP-sasqs: own the bottom spacing here (relocated off the card) so the
     wrap height equals the card height — the inset:0 action panels can no
     longer peek out below the card at rest. */
  margin-bottom: 18px;
}

/* The child card element slides on top of these panels */
.swipe-action-left,
.swipe-action-right {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 0.9rem;
  pointer-events: none;
  transition: opacity 0.1s;
  /* NudgeUP-sasqs: hidden at rest so no colored bar can leak under any swipe
     wrap; .swipe-action-active (set by JS once a drag passes threshold)
     reveals it. */
  opacity: 0;
}

/* Right-swipe → complete → green on the left side */
.swipe-action-left {
  background: linear-gradient(90deg, var(--color-success, #10B981) 0%, color-mix(in srgb, var(--color-success, #10B981) 75%, #fff) 100%);
  color: #fff;
  justify-content: flex-start;
}

/* Left-swipe → snooze → amber on the right side */
.swipe-action-right {
  background: linear-gradient(270deg, var(--color-warning, #F59E0B) 0%, color-mix(in srgb, var(--color-warning, #F59E0B) 75%, #fff) 100%);
  color: #fff;
  justify-content: flex-end;
}

.swipe-action-active {
  opacity: 1;
}

.swipe-action-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.swipe-action-label {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The draggable card child: let JS set transform; restore with transition on release */
.task-swipe-wrap > .smart-mini-row,
.task-swipe-wrap > .smart-hero-card {
  position: relative;   /* stays above the action panels */
  will-change: transform;
  transition: transform var(--transition-base) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Suppress scale-on-active during a swipe (JS removes transition inline during drag) */
.task-swipe-wrap > .smart-mini-row:active {
  transform: none;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── NudgeUP-s0c3n: Long-press context menu on task cards ─────────────────── */
.task-ctx-menu {
  position: fixed;
  z-index: 10500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  min-width: 180px;
  overflow: hidden;
  outline: none;
  animation: task-ctx-in 0.12s ease;
}
@keyframes task-ctx-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.task-ctx-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 0.95rem;
  padding: 13px 18px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.task-ctx-menu button:hover,
.task-ctx-menu button:focus-visible {
  background: var(--color-surface-2);
  outline: none;
}
.task-ctx-menu button + button {
  border-top: 1px solid var(--color-border);
}
.task-ctx-menu .ctx-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.task-ctx-menu .ctx-btn-delete {
  color: var(--color-danger);
}
/* NudgeUP-xs66a: header label inside the estimate chooser */
.task-ctx-menu .ctx-menu-header {
  padding: 8px 14px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.task-ctx-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10499;
  background: transparent;
}
/* NudgeUP-evnq0: "Pick a date" inline input inside the snooze chooser */
.task-ctx-menu .snooze-date-input {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  padding: 8px 10px;
  font-size: 16px;   /* >=16px → no iOS zoom-on-focus */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.task-ctx-menu .snooze-date-input.hidden { display: none; }
/* NudgeUP-exexc: recurrence picker — active selection highlight + save button */
.task-ctx-menu button.recur-active {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 99,102,241), 0.12);
}
.task-ctx-menu .recur-save-btn {
  font-weight: 600;
  color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .task-ctx-menu { animation: none; }
}

/* ── NudgeUP-evnq0: per-row action layer (hover quick-buttons + ⋯ menu) ───── */
/* Sits at the right edge of hero/mini rows. The ✓/💤 quick-buttons are desktop-
   only (hidden where the primary pointer can't hover); ⋯ shows everywhere.     */
.row-actions {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  /* NudgeUP-8rtt9: the wrapper div spans all 3 buttons (incl. invisible ✓/💤) and
     was blocking clicks on underlying card content in that area. Pass events through
     the container — only the individual visible buttons capture events. */
  pointer-events: none;
}
.smart-hero-card { position: relative; }   /* anchor for .row-actions */
.smart-mini-row  { position: relative; padding-right: 44px; }  /* reserve space for ⋯ */

/* ── NudgeUP-awz2t: full-bleed "Open task" overlay button ─────────────────────
   The card is no longer role="button" (it nested the check / + Add time / ⋯
   buttons → SR nested-interactive). This transparent button covers the whole
   card so the large tap area still opens edit, while the nested action buttons
   (z-index ≥ 2) sit above it and keep their own handlers. */
.card-open-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1; /* above the card background, below the action controls */
}
/* Lift the real interactive controls above the overlay so they stay clickable.
   Covers both the legacy app.js builder and the nu-* redesign builder
   (tasks-redesign.js): check, est chips, the hero "Start focus" play button, and
   the mini-row Today/Today? reschedule chips. .row-actions is already z-index 3. */
.smart-hero-card > .mini-row-check,
.smart-mini-row  > .mini-row-check,
.smart-hero-card .est-add-wrap,
.smart-mini-row  .est-add-wrap,
.smart-hero-card .nu-hero-play,
.smart-mini-row  .nu-today-chip { position: relative; z-index: 2; }
/* On the hero card, pin actions to the top-right so they clear the % ring (bottom-right) */
.smart-hero-card > .row-actions {
  top: 12px;
  right: 12px;
  transform: none;
}
.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--color-surface-2, rgba(0,0,0,0.06));
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, opacity 0.12s, transform 0.12s;
  pointer-events: auto; /* NudgeUP-8rtt9: re-enable on each button (parent has none) */
}
.row-action-btn:hover,
.row-action-btn:focus-visible {
  background: var(--color-surface-3, rgba(0,0,0,0.12));
  outline: none;
}
.row-action-done:hover   { background: var(--color-success, #10B981); color: #fff; }
.row-action-snooze:hover { background: var(--color-warning, #F59E0B); color: #fff; }

/* Desktop hover quick-buttons: hidden by default, slide in on row hover.
   Touch / coarse-pointer devices never see them (swipe + ⋯ menu serve there). */
.row-action-done,
.row-action-snooze {
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .smart-hero-card:hover .row-action-done,
  .smart-hero-card:hover .row-action-snooze,
  .smart-mini-row:hover  .row-action-done,
  .smart-mini-row:hover  .row-action-snooze,
  .row-action-done:focus-visible,
  .row-action-snooze:focus-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  /* NudgeUP-67ici: when the hover quick-buttons (✓/💤) slide in, the absolutely
     positioned .row-actions overlay expands leftward and covers the in-flow
     right-rail content (the '+ Add time' chip / time pill). Fade that in-flow
     content out on hover so the two no longer visually collide — the quick-
     buttons are the primary affordance while hovering. */
  .smart-mini-row:hover  > .mini-row-time,
  .smart-mini-row:hover  > .est-add-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
  }
  /* NudgeUP-0a4wj: same collision on the hero card — when the ✓/💤 quick-buttons
     slide in, .row-actions widens leftward over the top-row AI Pick badge. Fade
     the badge out on hover so the buttons own that corner. */
  .smart-hero-card:hover .hero-ai-pick {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
  }
}
/* Touch devices: hide the hover quick-buttons entirely (⋯ menu + swipe remain) */
@media (hover: none) {
  .row-action-done,
  .row-action-snooze { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .row-action-done,
  .row-action-snooze { transition: opacity 0.12s; transform: none; }
}

/* ── NudgeUP-cf6g9: Calendar month grid ──────────────────────────────────── */

/* Header row: < Month Year > + Today button */
.cal-header {
  margin-bottom: 12px;
}
.cal-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cal-month-label {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}
.cal-today-btn {
  padding: 6px 14px;
  min-height: 36px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.cal-today-btn:hover,
.cal-today-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Day-of-week header row */
.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted, var(--muted));
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  padding: 0 2px;
}
.cal-dow-row span {
  padding: 4px 0;
}

/* Month grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

/* Individual day cell */
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 4px 2px 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.cal-day:hover,
.cal-day:focus-visible {
  background: var(--color-surface-2, var(--color-surface));
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.cal-day.cal-day--outside {
  opacity: 0.35;
  pointer-events: none;
}
/* Today highlight ring on the day number */
.cal-day--today .cal-day-num {
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Day number */
.cal-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── §5 increment 4: Project span ribbons + legend ───────────────────────────
   Thin colored bars across the days a project's steps live on. Painted into each
   .cal-day cell by applyCalendarProjectSpans() (projects flag only). The host is
   anchored at the cell's bottom edge; each segment is absolutely positioned by a
   per-lane `bottom` offset so the same project sits at the same height every day. */
.cal-project-spans {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;            /* zero-height anchor — segments position themselves */
  pointer-events: none;
}
.cal-project-span {
  position: absolute;
  height: 3px;
  /* Default (mid-span): bleed into the 3px grid gap on both sides so a week row
     reads as one continuous bar. Start/end caps inset + round below. */
  left: -2px;
  right: -2px;
  border-radius: 1px;
}
.cal-project-span--start {
  left: 2px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cal-project-span--end {
  right: 2px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* Legend above the grid: color swatch + project name. Hidden when no spans. */
.cal-project-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin: 0 0 8px;
  padding: 0 2px;
}
.cal-project-legend.hidden { display: none; }
.cal-project-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted, var(--color-text));
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-project-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Dot strip — holds up to 3 colored markers */
.cal-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  margin-top: 3px;
  justify-content: center;
}

/* Created dot: green filled circle */
.cal-dot--created {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
/* Scheduled dot: blue filled circle */
.cal-dot--scheduled {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
/* Due dot: red hollow ring */
.cal-dot--due {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-danger);
  flex-shrink: 0;
}
/* Overflow count +N */
.cal-dot--overflow {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--color-text-muted, var(--muted));
  line-height: 1;
  white-space: nowrap;
}

/* NudgeUP-4hmbr (§4 C1): day-cell mark legend. Redesign-only, flat, mobile-safe.
   Swatches mirror the actual .cal-dot--* / heat styles so the key reads true. */
.cal-legend { display: none; }
body.nu-redesign .cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  margin: 2px 2px 8px;
  font-size: 0.72rem;
  color: var(--color-text-muted, var(--muted));
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: opacity var(--transition-fast) ease;
}
.cal-legend-item.is-off { opacity: 0.3; }
.cal-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-legend-swatch--created   { background: var(--color-success); }
.cal-legend-swatch--scheduled { background: var(--color-accent); }
.cal-legend-swatch--due       { background: transparent; border: 1.5px solid var(--color-danger); }
/* "Done" shades the cell (heatmap), not a dot — show a filled, rounded chip. */
.cal-legend-swatch--done      { border-radius: 3px; background: var(--color-success); opacity: 0.4; }

/* NudgeUP-4hmbr (§4 C4 consolidation): the filter chips now carry their grid-mark
   color dot, so the chips ARE the legend (the standalone legend row was removed).
   Redesign-only so flag-off chips stay text-only. Same encodings as the old legend
   swatches: created/scheduled = filled dot, due = ring, done = faded rounded square. */
.cal-chip-dot { display: none; }
body.nu-redesign .cal-filter-chip .cal-chip-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 7px;
}
.cal-chip-dot--created   { background: var(--color-success); }
.cal-chip-dot--scheduled { background: var(--color-accent); }
.cal-chip-dot--due       { background: transparent; border: 1.5px solid var(--color-danger); }
.cal-chip-dot--done      { border-radius: 3px; background: var(--color-success); opacity: 0.4; }
/* NudgeUP-3t9ch §Cal Increment B: Monthly filter dot (warm amber, like the bell). */
.cal-chip-dot--monthly   { background: var(--color-warning, #F59E0B); }

/* ── NudgeUP-3t9ch §Cal Increment B: Monthly recurring dates ─────────────────── */
/* "+ Monthly reminder" button — sits in the Filters dropdown footer. */
.cal-filter-dropdown-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.cal-monthly-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--color-accent-text); /* NudgeUP-qbc2h a11y */
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.cal-monthly-add-btn:hover,
.cal-monthly-add-btn:focus-visible { background: var(--color-surface-2, rgba(127,127,127,0.08)); }

/* Grid bell marker — bottom-left of the day cell. */
.cal-monthly-bell {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warning, #F59E0B);
  pointer-events: auto;
  line-height: 0;
}
.cal-monthly-bell--done { color: var(--color-success); opacity: 0.85; }

/* "Coming up" strip — monthly bills/reports inside their lead window. */
.cal-monthly-comingup {
  margin: 4px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-2, rgba(127,127,127,0.05));
}
.cal-monthly-comingup-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.cal-monthly-comingup-list { display: flex; flex-direction: column; gap: 6px; }
.cal-monthly-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
}
.cal-monthly-item:hover,
.cal-monthly-item:focus-visible { border-color: var(--color-accent); }
.cal-monthly-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-warning, #F59E0B);
}
.cal-monthly-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cal-monthly-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-monthly-note-flag { color: var(--color-accent); margin-left: 4px; }
.cal-monthly-item-due { font-size: 0.78rem; color: var(--color-text-muted); }

/* Monthly modals — intro + due line + Done checkbox. */
.nu-monthly-intro,
.nu-monthly-log-due {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.nu-monthly-log-due { font-weight: 600; color: var(--color-text); }
.nu-monthly-day-hint { font-size: 0.72rem; color: var(--color-text-muted); margin: 4px 0 0; }
.nu-monthly-log-done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  margin-top: 4px;
}
.nu-monthly-delete { margin-right: auto; }

/* NudgeUP-98ly8: ✨ "Add several from a list" — coach affordance in the Monthly modal. */
.nu-monthly-bulk { margin: 0 0 14px; }
.nu-coach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border, rgba(127,127,127,0.25));
  border-radius: 999px;
  background: var(--color-surface-2, rgba(127,127,127,0.06));
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.nu-coach-chip:hover,
.nu-coach-chip:focus-visible {
  background: var(--color-surface-3, rgba(127,127,127,0.12));
  border-color: var(--color-primary, #6c5ce7);
}
.nu-monthly-bulk-panel { margin-top: 12px; }
.nu-monthly-bulk-panel label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.nu-monthly-bulk-panel textarea {
  width: 100%;
  resize: vertical;
}
.nu-monthly-bulk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.nu-monthly-bulk-status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 8px 0 0;
}
.nu-monthly-bulk-status--error { color: var(--color-danger, #e25563); }
.nu-monthly-bulk-review { margin-top: 14px; }
.nu-monthly-bulk-review-head {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.nu-monthly-bulk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nu-monthly-bulk-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0;
  cursor: pointer;
}
.nu-monthly-bulk-item-name { color: var(--color-text); flex: 1; }
.nu-monthly-bulk-item-day {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* On an active (filled) chip, ring the dot so it stays legible on the primary fill. */
body.nu-redesign .cal-filter-chip.active .cal-chip-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65); }

/* Lightning ⚡ chip: created+due on same day */
.cal-lightning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  background: var(--color-danger);
  color: #fff;
  border-radius: 4px;
  padding: 1px 3px;
  margin-top: 3px;
  pointer-events: none;
}

/* Overdue badge — red pill in top-right corner of cell */
.cal-overdue-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-danger);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  pointer-events: none;
  white-space: nowrap;
}

/* Mobile: enlarge min-height to ensure 44px touch targets */
@media (max-width: 767px) {
  .cal-day {
    min-height: 60px;
  }
}

/* NudgeUP-ojwug: Completion heatmap tints — --color-success at graduated opacity */
/* Tier 1: 1 completion → 10% */
.cal-day--heat-1 {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
/* Tier 2: 2 completions → 20% */
.cal-day--heat-2 {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
}
/* Tier 3: 3–4 completions → 30% */
.cal-day--heat-3 {
  background: color-mix(in srgb, var(--color-success) 30%, transparent);
}
/* Tier 4: 5+ completions → 40% */
.cal-day--heat-4 {
  background: color-mix(in srgb, var(--color-success) 40%, transparent);
}
/* Keep hover/focus state readable on top of heatmap */
.cal-day--heat-1:hover,
.cal-day--heat-2:hover,
.cal-day--heat-3:hover,
.cal-day--heat-4:hover,
.cal-day--heat-1:focus-visible,
.cal-day--heat-2:focus-visible,
.cal-day--heat-3:focus-visible,
.cal-day--heat-4:focus-visible {
  background: var(--color-surface-2, var(--color-surface));
}

/* NudgeUP-ojwug: Streak-run highlight — subtle inner border on active streak days */
.cal-day--streak-run {
  box-shadow: inset 0 0 0 1.5px var(--color-success);
}
/* Combine: heatmap tint + streak border */
.cal-day--streak-run.cal-day--heat-1,
.cal-day--streak-run.cal-day--heat-2,
.cal-day--streak-run.cal-day--heat-3,
.cal-day--streak-run.cal-day--heat-4 {
  box-shadow: inset 0 0 0 1.5px var(--color-success);
}
/* Today with streak: use primary color border to avoid competing with today-ring */
.cal-day--today.cal-day--streak-run {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

/* reduced-motion: no transitions on calendar cells */
@media (prefers-reduced-motion: reduce) {
  .cal-day,
  .cal-nav-btn,
  .cal-today-btn { transition: none; }
}

/* ── NudgeUP-gpi24: Calendar day-detail sheet ──────────────────────────────── */
.cal-day-sheet-body {
  overflow-y: auto;
  max-height: 60vh;
  padding-bottom: 4px;
}

.cal-day-sheet-section {
  margin-bottom: 16px;
}

.cal-day-sheet-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 6px;
  padding: 0;
}

.cal-day-sheet-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.cal-day-sheet-task:hover,
.cal-day-sheet-task:focus-visible {
  background: var(--color-bg);
}

.cal-day-sheet-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-day-sheet-status-dot--active   { background: var(--color-accent); }
.cal-day-sheet-status-dot--done     { background: var(--color-success); }
.cal-day-sheet-status-dot--overdue  { background: var(--color-danger); }

.cal-day-sheet-task-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day-sheet-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

.cal-day-sheet-actions {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .cal-day-sheet-task { transition: none; }
}

/* ── NudgeUP-sy65t: Calendar filter chips ──────────────────────────────────── */
/* NudgeUP-xuj3d: second controls row (keeps the nav row from overflowing) + the
   Filters dropdown that collapses the old always-expanded chip band. */
.cal-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.cal-controls-row .cal-view-toggle { margin-left: 0; }   /* override the nav-row right-push */
.cal-controls-pushright { margin-left: auto; }            /* float ★ + ✨ to the right */
.cal-nav-row .cal-today-btn { margin-left: auto; }        /* Today sits right of the month nav */

/* NudgeUP-5pn5d: '+ Add ▾' pill + popover ─────────────────────────────── */
.cal-add-pill-wrap {
  position: relative;
  display: inline-flex;
}
.cal-add-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--transition-fast);
}
.cal-add-pill:hover,
.cal-add-pill:focus-visible { opacity: 0.88; }
.cal-add-pill[aria-expanded="true"] { opacity: 0.92; }
.cal-add-pill-caret { transition: transform var(--transition-fast); flex-shrink: 0; }
.cal-add-pill[aria-expanded="true"] .cal-add-pill-caret { transform: rotate(180deg); }

.cal-add-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-modal, 200);
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-surface), var(--color-surface));
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.cal-add-popover.hidden { display: none; }
.cal-add-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--color-text);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.cal-add-popover-item:hover,
.cal-add-popover-item:focus-visible { background: var(--color-surface-2, rgba(127,127,127,0.08)); }
.cal-add-popover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}
.cal-add-popover-item:nth-child(2) .cal-add-popover-icon { background: var(--color-accent); }
.cal-add-popover-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cal-add-popover-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.cal-add-popover-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* NudgeUP-5pn5d: day-sheet special-day action — smaller ghost style */
.cal-day-sheet-special-btn {
  font-size: 0.78rem;
  opacity: 0.8;
}
.cal-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cal-filter-trigger[aria-expanded="true"] { border-color: var(--color-primary); }
.cal-filter-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.cal-filter-caret { transition: transform var(--transition-fast); }
.cal-filter-trigger[aria-expanded="true"] .cal-filter-caret { transform: rotate(180deg); }
.cal-filter-dropdown {
  margin: 8px 0 10px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-bg);                                              /* opaque base */
  background-image: linear-gradient(var(--color-surface), var(--color-surface));  /* keep surface tint on glass themes */
}
.cal-filter-dropdown.hidden { display: none; }
.cal-filter-dropdown .cal-filter-chips { flex-direction: column; gap: 4px; margin-bottom: 0; }
.cal-filter-dropdown .cal-filter-chip { width: 100%; justify-content: flex-start; min-height: 40px; border-radius: 8px; }

.cal-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cal-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.cal-filter-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cal-filter-chip:hover:not(.active),
.cal-filter-chip:focus-visible:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cal-filter-chip.active:hover,
.cal-filter-chip.active:focus-visible {
  opacity: 0.85;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cal-filter-chip { transition: none; }
}

/* ── NudgeUP-sy65t: Unscheduled tray ──────────────────────────────────────── */
.cal-tray {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}

.cal-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.cal-tray-header:hover,
.cal-tray-header:focus-visible {
  background: var(--color-bg);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.cal-tray-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.cal-tray-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-text-muted, var(--muted));
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 700;
}

.cal-tray-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.cal-tray-header[aria-expanded="true"] .cal-tray-chevron {
  transform: rotate(180deg);
}

.cal-tray-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--color-border);
}

.cal-tray-body.hidden {
  display: none;
}

.cal-tray-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
}

/* Tray task cards: reuse .task-card but strip drag handle on mobile for clarity */
.cal-tray-body .task-card {
  margin-bottom: 8px;
}
.cal-tray-body .task-card:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cal-tray-chevron { transition: none; }
}

/* ── NudgeUP-k4t4v: Vibe "History & insights" drawer ──────────────────────────
   Groups low-traffic history/insight cards into ONE collapsible (collapsed by
   default). Visual language mirrors the calendar Unscheduled tray (.cal-tray)
   for consistency; theme-safe via design tokens. */
.vibe-history-drawer {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}

.vibe-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.vibe-history-header:hover,
.vibe-history-header:focus-visible {
  background: var(--color-bg);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.vibe-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.vibe-history-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.vibe-history-header[aria-expanded="true"] .vibe-history-chevron {
  transform: rotate(180deg);
}

.vibe-history-body {
  padding: 12px;
  border-top: 1px solid var(--color-border);
}

.vibe-history-body.hidden {
  display: none;
}

/* Moved cards already carry their own margins; add breathing room between any
   two that are simultaneously visible inside the drawer. */
.vibe-history-body > * + * {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .vibe-history-chevron { transition: none; }
}

/* ── NudgeUP-u5en0: Drag-to-reschedule ────────────────────────────────────── */

/* Drop-target highlight on calendar day cells */
.cal-day--drop-target {
  background: var(--color-accent);
  color: #fff;
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  transform: scale(1.06);
  transition: transform 0.1s ease, background 0.1s ease;
  z-index: 1;
}

/* Card being dragged via HTML5 DnD (desktop, from cal view / day-detail sheet) */
.task-card.cal-dragging {
  opacity: 0.5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Card being lifted in mobile touch-drag mode */
.task-card.cal-touch-dragging,
.cal-day-sheet-task.cal-touch-dragging {
  opacity: 0.6;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  position: relative;
  z-index: 10;
}

/* Context menu separator (used between Edit/Duplicate and Move to… and Delete) */
.ctx-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

/* "Move to…" date-picker popover */
.cal-move-to-picker {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 10100;
  animation: sheet-slide-up 0.2s ease;
}

.cal-move-to-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
}

.cal-move-to-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.cal-move-to-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.cal-move-to-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .cal-day--drop-target { transform: none; transition: none; }
  .task-card.cal-touch-dragging,
  .cal-day-sheet-task.cal-touch-dragging { transform: none; transition: none; }
  .cal-move-to-picker { animation: none; }
}

/* ── NudgeUP-4dopl: Month / Agenda view toggle ─────────────────────────────── */

.cal-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-border);
  border-radius: 8px;
  padding: 2px;
  margin-left: auto;
}

.cal-view-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
  min-height: 28px;
  line-height: 1;
}

.cal-view-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.cal-view-btn:hover:not(.active) {
  color: var(--color-text);
}

/* NudgeUP-4hmbr (§4 C4 consolidation): standalone icon buttons in the calendar nav
   row — Special days (star) + the merged AI button (sparkle). */
.cal-special-icon-btn,
.cal-ai-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.cal-special-icon-btn:hover,
.cal-special-icon-btn:focus-visible,
.cal-ai-icon-btn:hover,
.cal-ai-icon-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* Special days icon lights up when its sub-view is active (set by _setCalViewMode). */
.cal-special-icon-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .cal-special-icon-btn, .cal-ai-icon-btn { transition: none; }
}
/* Legacy Plan/Summarize buttons stay in the DOM (wired) but never show — the single
   #cal-btn-ai delegates to them by view mode. !important overrides the code's .hidden toggles. */
.cal-ai-legacy-hidden { display: none !important; }

/* ── NudgeUP-4dopl: Vibe mood dot on calendar cells ──────────────────────── */

/* Tiny 4px dot bottom-right corner of a day cell (.cal-day already position:relative) */
.cal-vibe-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── NudgeUP-us6nf: Special Days sub-view ─────────────────────────────────── */

.cal-special {
  padding: 4px 0 16px;
}

.cal-special-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cal-special-intro {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}

.cal-special-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-special-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 0.875rem;
}

.cal-special-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.cal-special-row:hover,
.cal-special-row:focus-visible {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

.cal-special-row-glyph {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.cal-special-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cal-special-row-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.cal-special-row-meta {
  font-size: 0.78rem;
  color: var(--color-primary);
  font-weight: 600;
}

.cal-special-row-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-special-row-chevron {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── NudgeUP-z7a32: Special-day calendar badge + Upcoming card + day-sheet pin ─ */

/* Emoji badge stamped in the top-left corner of a calendar day cell. */
.cal-special-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

/* "Coming up" countdown card at the top of the Special Days sub-view. */
.cal-special-upcoming {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.cal-special-upcoming-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0;
}

.cal-special-upcoming-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 6px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition-fast) ease;
}

.cal-special-upcoming-row:hover,
.cal-special-upcoming-row:focus-visible {
  background: var(--color-bg);
}

.cal-special-upcoming-glyph {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.cal-special-upcoming-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cal-special-upcoming-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.cal-special-upcoming-sub {
  font-size: 0.78rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* Special day pinned at the top of the day-detail sheet. */
.cal-day-sheet-special-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition-fast) ease;
}

.cal-day-sheet-special-row:hover,
.cal-day-sheet-special-row:focus-visible {
  background: var(--color-bg);
}

.cal-day-sheet-special-glyph {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.cal-day-sheet-special-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cal-day-sheet-special-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.cal-day-sheet-special-sub {
  font-size: 0.76rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* ── NudgeUP-4dopl: Agenda list view ──────────────────────────────────────── */

.cal-agenda {
  padding: 4px 0 16px;
}

.cal-agenda-day {
  margin-bottom: 8px;
}

.cal-agenda-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
}

.cal-agenda-day-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
  margin-left: 4px;
}

.cal-agenda-day-header:hover {
  color: var(--color-primary);
}

.cal-agenda-day-today .cal-agenda-day-header {
  color: var(--color-primary);
}

.cal-agenda-day-date {
  white-space: nowrap;
}

.cal-agenda-day-vibe {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-agenda-task-list {
  padding: 0 0 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-agenda-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: 0.875rem;
  color: var(--color-text);
  transition: background var(--transition-fast) ease;
  min-height: 36px;
}

.cal-agenda-task:hover,
.cal-agenda-task:focus-visible {
  background: var(--color-bg);
}

.cal-agenda-task-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-agenda-task-dot--scheduled { background: var(--color-accent); }
.cal-agenda-task-dot--due       { background: var(--color-danger); }
.cal-agenda-task-dot--created   { background: var(--color-success); }
.cal-agenda-task-dot--done      { background: var(--color-success); }
.cal-agenda-task-dot--overdue   { background: var(--color-danger); }

.cal-agenda-task-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-agenda-task--done .cal-agenda-task-title {
  text-decoration: line-through;
  opacity: 0.6;
}

.cal-agenda-empty-day {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 2px 0 4px 12px;
  font-style: italic;
}

.cal-agenda-loading {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 24px 0;
}

@media (prefers-reduced-motion: reduce) {
  .cal-view-btn { transition: none; }
  .cal-agenda-task { transition: none; }
}

/* ── NudgeUP-il94e: Calendar AI intelligence layer ── */

/* "Plan my week" button in the calendar header nav row */
.cal-plan-week-btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  min-height: 30px;
}
.cal-plan-week-btn:hover,
.cal-plan-week-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* Overdue recovery banner */
.cal-ai-banner {
  background: var(--color-danger, #ef4444);
  color: #fff;
  border-radius: 10px;
  margin: 8px 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-ai-banner-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-ai-banner-summary {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.cal-ai-banner-tasks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-ai-banner-task-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  opacity: 0.92;
}
.cal-ai-banner-task-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ai-banner-task-date {
  font-weight: 600;
  flex-shrink: 0;
}
.cal-ai-banner-actions {
  display: flex;
  gap: 8px;
}

/* Vibe insight Coach card */
.cal-ai-coach-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0 2px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: opacity var(--transition-base);
}
.cal-ai-coach-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-ai-coach-card-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  color: var(--color-text);
}
.cal-ai-coach-card-rec {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}
.cal-ai-coach-card-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-ai-coach-card-dismiss:hover,
.cal-ai-coach-card-dismiss:focus-visible { color: var(--color-text); }

/* "What's my pattern?" AI chip */
.cal-ai-chip {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent, #06b6d4)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cal-ai-chip:hover,
.cal-ai-chip:focus-visible {
  opacity: 0.9;
}
/* NudgeUP-4hmbr (§4 C4): drop the loud gradient on the "What's my pattern?" pill
   so the calendar control row reads as one cohesive flat toolbar (Plan-week /
   Summarize are already flat-outlined). Redesign-only; flag-off keeps the legacy
   gradient for clean rollback. */
body.nu-redesign .cal-ai-chip {
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
body.nu-redesign .cal-ai-chip:hover,
body.nu-redesign .cal-ai-chip:focus-visible {
  background: var(--color-primary) !important;
  color: #fff !important;
  opacity: 1;
}

/* At-risk ⚠️ overlay icon on day cells */
.cal-at-risk-icon {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.6rem;
  color: var(--color-warning, #f59e0b);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* Workload 🔴 load bar along the bottom of a day cell */
.cal-workload-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-danger, #ef4444);
  border-radius: 0 0 4px 4px;
  display: block;
  pointer-events: none;
  z-index: 2;
  min-width: 8px;
}

/* Cluster suggestion card in unscheduled tray */
.cal-ai-cluster-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-ai-cluster-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-ai-cluster-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.cal-ai-cluster-row {
  font-size: 0.85rem;
  line-height: 1.4;
}
.cal-ai-cluster-label {
  color: var(--color-primary);
}
.cal-ai-cluster-reason {
  color: var(--color-text-muted);
}
.cal-ai-cluster-dismiss {
  align-self: flex-start;
  font-size: 0.8rem;
}

/* Plan my week modal */
.cal-plan-week-sheet {
  max-height: 85vh;
  overflow-y: auto;
}
.cal-plan-week-body {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-plan-week-loading {
  text-align: center;
  padding: 24px 0;
  font-size: 0.9rem;
}
.cal-plan-week-actions {
  padding-top: 8px;
}
.cal-plan-week-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-plan-week-day-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.cal-plan-week-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  padding: 6px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cal-plan-week-chip-row.cal-plan-chip-row--over {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cal-plan-week-chip {
  background: var(--color-primary);
  color: #fff;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  user-select: none;
  transition: opacity var(--transition-fast), transform 0.1s;
}
.cal-plan-week-chip:active,
.cal-plan-week-chip.cal-plan-chip--dragging {
  opacity: 0.55;
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .cal-plan-week-btn,
  .cal-ai-coach-card,
  .cal-plan-week-chip,
  .cal-plan-week-chip-row { transition: none; }
}

/* ── NudgeUP-w326w: Natural language scheduling ─────────────────────────── */

.cal-nl-reschedule-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

.cal-nl-input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg, var(--color-surface));
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
}
.cal-nl-input:focus {
  border-color: var(--color-primary);
}
.cal-nl-input::placeholder {
  color: var(--color-text-muted);
}

.cal-nl-preview {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-nl-preview-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.cal-nl-preview-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cal-nl-preview-row {
  font-size: 0.85rem;
  line-height: 1.4;
}

.cal-nl-preview-task {
  font-weight: 600;
  color: var(--color-text);
}

.cal-nl-preview-arrow {
  color: var(--color-text-muted);
}

.cal-nl-preview-date {
  font-weight: 600;
  color: var(--color-accent-text, #06b6d4); /* NudgeUP-qbc2h a11y */
}

.cal-nl-preview-reason {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cal-nl-preview-actions {
  display: flex;
  gap: 8px;
}

/* ── NudgeUP-w326w: Summarize my week button ─────────────────────────────── */

.cal-summarize-btn {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: 32px;
}
.cal-summarize-btn:hover,
.cal-summarize-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* ── NudgeUP-w326w: Monthly retrospective card ───────────────────────────── */

.cal-retro-card {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 6px 0 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.cal-retro-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cal-retro-headline {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}

.cal-retro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.cal-retro-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-retro-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.cal-retro-stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.cal-retro-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-retro-dismiss:hover,
.cal-retro-dismiss:focus-visible { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .cal-summarize-btn,
  .cal-nl-input,
  .cal-retro-card { transition: none; }
}

/* ── NudgeUP-ynmze: Breakdown mode toggle ─────────────────────────────────── */
.breakdown-mode-row {
  display: flex;
  gap: 8px;
  padding: 0 0 12px;
}
.breakdown-mode-row.hidden { display: none; }
.breakdown-mode-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border, rgba(0,0,0,0.12));
  background: transparent;
  color: var(--color-text-muted, var(--color-text-muted));
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
}
.breakdown-mode-btn.active {
  background: var(--color-primary, #7c3aed);
  color: #fff;
  border-color: var(--color-primary, #7c3aed);
}
.breakdown-mode-btn:not(.active):hover {
  background: var(--color-surface-2, rgba(0,0,0,0.05));
  border-color: var(--color-primary, #7c3aed);
  color: var(--color-primary, #7c3aed);
}

/* ── NudgeUP-ynmze: Calendar subtask items with scheduled date ─────────────── */
.breakdown-cal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-surface-1, rgba(0,0,0,0.03));
  margin-bottom: 6px;
}
.breakdown-cal-item-title {
  flex: 1;
  font-size: 0.85rem;
  color: var(--color-text, var(--color-text));
}
.breakdown-cal-item-date {
  font-size: 0.75rem;
  color: var(--color-accent-text, #6d50fa); /* NudgeUP-qbc2h a11y */
  font-weight: 600;
  white-space: nowrap;
}
.breakdown-cal-item-mins {
  font-size: 0.72rem;
  color: var(--color-text-muted, var(--color-text-muted));
  white-space: nowrap;
}

/* ── NudgeUP-ynmze: Smart scheduling chip in task modal ───────────────────── */
.smart-schedule-chip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.smart-schedule-chip-wrap.hidden { display: none; }
.smart-schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1.5px dashed var(--color-accent, #6d50fa);
  background: transparent;
  color: var(--color-accent-text, #6d50fa); /* NudgeUP-qbc2h a11y */
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: left;
  min-height: 36px;
}
.smart-schedule-chip:hover {
  background: var(--color-accent, #6d50fa);
  color: #fff;
}
.smart-schedule-chip-dismiss {
  background: transparent;
  border: none;
  color: var(--color-text-muted, var(--color-text-muted));
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  min-height: 36px;
}
.smart-schedule-chip-dismiss:hover { color: var(--color-text, var(--color-text)); }

/* ── NudgeUP-ynmze: Streak protection card ─────────────────────────────────── */
.cal-streak-protect-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(251,146,60,0.08) 100%);
  border: 1.5px solid rgba(239,68,68,0.25);
  animation: slideDown 0.2s ease;
}
.cal-streak-protect-card.hidden { display: none; }
.cal-streak-protect-body { flex: 1; min-width: 0; }
.cal-streak-protect-msg {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-danger, #ef4444);
  margin: 0 0 6px;
}
.cal-streak-protect-task {
  font-size: 0.82rem;
  color: var(--color-text, var(--color-text));
  background: var(--color-surface-1, rgba(0,0,0,0.04));
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-streak-protect-task.hidden { display: none; }
.cal-streak-protect-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
@media (min-width: 400px) {
  .cal-streak-protect-card { align-items: center; }
  .cal-streak-protect-actions { flex-direction: row; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .breakdown-mode-btn,
  .smart-schedule-chip,
  .cal-streak-protect-card { transition: none; animation: none; }
}

/* ── NudgeUP-7pjfw: Task screen polish + a11y ────────────────────────────────
   Final pass over the redesigned task screen (esfml/evnq0/9vdjy rows):
   - WCAG 2.5.5 minimum 44px tap targets on every row control
   - Theme-safe via --color-* vars only (no hardcoded colours)
   - prefers-reduced-motion already handled globally; reinforced for new pieces
   ──────────────────────────────────────────────────────────────────────────── */

/* The primary check circle grows from 40→44px so it clears the WCAG floor;
   visual ring scales with it (no layout shift — it was already flex-centred). */
.task-check {
  width: 44px;
  height: 44px;
}

/* Edit / delete icon buttons: had min-height:36px and no min-width — give them a
   full 44×44 hit square while keeping the icon visually centred. */
.task-action-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The completed-card "↺ Undo" pill is short by design; expand its hit area to
   44px tall without inflating the visible pill (padding stays compact). */
.btn-task-undo {
  min-height: 44px;
}

.empty-state-cta {
  min-height: 44px;
}

/* Row-action (✓/💤/⋯) buttons. On a fine pointer (mouse) the 30px visual size is
   precise enough; on touch we floor the hit box at 44px so the ⋯ menu — the only
   row-action shown on touch — is comfortably tappable. Mini-row reserved gutter
   is widened to match so the larger ⋯ never overlaps the title. */
@media (hover: none), (pointer: coarse) {
  .row-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .smart-mini-row { padding-right: 52px; }
  .smart-mini-row > .row-actions { right: 4px; }
}
/* Mini-row check stays a compact 24px ring by design: the whole mini-row is
   tappable (opens edit) and the 44px hero/all-view .task-check is the primary
   complete affordance, so the small ring is a secondary control inside a large
   target — left visually compact to keep the dense list readable. */

/* Reduced-motion: the just-added flash + check-complete pulse should not animate
   for motion-sensitive users (row stagger is already guarded in JS). */
@media (prefers-reduced-motion: reduce) {
  .task-card.card-entering,
  .task-card--just-added,
  .task-check.just-completed {
    animation: none !important;
  }
}

/* ── NudgeUP-8knih: Empty-state invite QR + share row ─────────────────────── */
.empty-invite-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-invite-qr {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  padding: 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.empty-invite-qr img,
.empty-invite-qr canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── NudgeUP-8knih: Personal streak milestone card ───────────────────────── */
.personal-streak-milestone-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(155,103,245,0.15) 0%, rgba(6,182,212,0.10) 100%);
  border: 1px solid rgba(155,103,245,0.4);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(155,103,245,0.15);
  animation: milestone-slide-in 0.35s ease;
  position: relative;
  cursor: pointer;
}
.personal-streak-milestone-card__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.personal-streak-milestone-card__body {
  flex: 1;
  min-width: 0;
}
.personal-streak-milestone-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary, #9B67F5);
  margin: 0 0 2px;
  line-height: 1.3;
}
.personal-streak-milestone-card__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.personal-streak-milestone-card__dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.personal-streak-milestone-card__dismiss:hover {
  color: var(--color-text);
  background: rgba(0,0,0,0.06);
}

/* ── NudgeUP-zqe26: Inline task steps section ──────────────────────────────── */
.task-steps-section {
  margin-top: 6px;
  width: 100%;
}

.task-steps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 4px;
}
.task-steps-toggle:hover { color: var(--color-text); }
.task-steps-toggle-chevron { font-size: 0.7rem; }
.task-steps-toggle-label   { font-size: 0.75rem; }

.task-steps-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 400px;
  transition: max-height var(--transition-base) ease, opacity var(--transition-fast) ease;
}
.task-steps-collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .task-steps-list { transition: none; }
}

.task-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-radius: 4px;
}
.task-step-item.task-step-done .task-step-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* NudgeUP-i0ewj: drag handle for reordering steps */
.task-step-handle {
  flex: none;
  width: 16px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-text-muted);
  cursor: grab;
  display: grid;
  place-items: center;
  opacity: 0;
  touch-action: none;
  transition: opacity 0.12s, color 0.12s;
}
.task-step-item:hover .task-step-handle,
.task-step-item:focus-within .task-step-handle,
.task-step-item.task-step-dragging .task-step-handle {
  opacity: 0.55;
}
.task-step-handle:hover { color: var(--color-text); opacity: 0.9; }
.task-step-handle:active { cursor: grabbing; }

.task-step-item.task-step-dragging {
  position: relative;
  z-index: 5;
  background: var(--color-surface-2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  cursor: grabbing;
}
.task-steps-list.task-steps-reordering { user-select: none; }

.task-step-check {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, border-color 0.12s;
}
.task-step-check.checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.task-step-check-mark {
  font-size: 0.6rem;
  color: #fff;
  line-height: 1;
}

.task-step-title {
  flex: 1;
  font-size: 0.83rem;
  color: var(--color-text);
  word-break: break-word;
  cursor: text;
  border-radius: 4px;
}
.task-step-title:hover { background: var(--color-surface-2); }
.task-step-title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* NudgeUP-b60a0: inline edit input for renaming a step in place */
.task-step-title-edit {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px solid var(--color-primary);
  background: none;
  color: var(--color-text);
  padding: 2px 2px;
  outline: none;
  min-width: 0;
}

.task-step-delete {
  flex: none;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.1s;
  line-height: 1;
}
.task-step-item:hover .task-step-delete,
.task-step-item:focus-within .task-step-delete {
  opacity: 1;
}
.task-step-delete:hover { color: var(--color-danger); background: rgba(239,68,68,0.1); }

.task-step-add-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.task-step-add-input {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  padding: 3px 2px;
  outline: none;
  min-width: 0;
}
.task-step-add-input:focus { border-bottom-color: var(--color-primary); }
.task-step-add-btn {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  color: var(--color-primary);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
}
.task-step-add-btn:hover { background: rgba(var(--color-primary-rgb, 99,102,241), 0.1); }

/* ── NudgeUP-8knih: Optimistic activity feed item (pending server confirm) ── */
.activity-item--optimistic {
  opacity: 0.75;
  animation: optimistic-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes optimistic-pulse {
  from { opacity: 0.65; }
  to   { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-streak-milestone-card,
  .activity-item--optimistic {
    animation: none !important;
  }
}

/* ── NudgeUP-2iwo6: Task templates ──────────────────────────────────────────── */

/* "Use a template" trigger row inside the task modal */
.task-template-trigger-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.task-template-trigger-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.task-template-trigger-btn:hover { opacity: 0.75; }

/* Badge shown when a template is applied in the modal */
.task-template-applied-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(var(--color-primary-rgb, 99,102,241), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb, 99,102,241), 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.task-template-badge-text { flex: 1; }
.task-template-badge-clear {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  line-height: 1;
}
.task-template-badge-clear:hover { color: var(--color-text); }

/* Template picker bottom-sheet (same width/shadow pattern as task-ctx-menu) */
.task-template-picker {
  position: fixed;
  z-index: 1200;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 100vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  outline: none;
}
.task-template-picker-header {
  padding: 14px 16px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.task-template-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 env(safe-area-inset-bottom, 0);
}
.task-template-loading {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.task-template-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.task-template-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--color-border);
}
.task-template-row:last-child { border-bottom: none; }
.task-template-apply-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text);
}
.task-template-apply-btn:hover { background: rgba(var(--color-primary-rgb, 99,102,241), 0.06); }
.task-template-row-title {
  font-size: 0.9rem;
  font-weight: 600;
}
.task-template-row-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.task-template-delete-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 6px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.task-template-delete-btn:hover { color: var(--color-danger, #ef4444); background: rgba(239,68,68,0.08); }

/* ── v1.1 redesign primitives (NudgeUP-yf5ht) ─────────────────────────────────
   docs/REDESIGN_SPEC.md §1 — six primitives ALL new (v1.1) views compose from.
   ADDITIVE ONLY (spec §0): every selector below is a brand-new `nu-` class that
   no existing markup uses, so with flag `redesign-v11` OFF these rules affect
   nothing. Existing theme tokens only — zero hardcoded colors. All 7 themes
   (dark/light/cosmos/terminal/aurora/white/warm) inherit automatically;
   Terminal keeps its 2px radius + monospace via --radius-* / --font tokens.

   Tinted surfaces: --color-surface-2 fallbacks are declared FIRST, then a
   @supports (color: color-mix(...)) block upgrades them to 16% primary/accent/
   success (14% danger) mixes. Browsers without color-mix get surface-2. */

/* nu-card — surface card: surface-2 bg, 1px border, radius-md, 10–12px pad.
   NOTE: deliberately NO content-visibility here — cards may host popovers
   (spec §1 containment decision; see js/modules/popover-portal.js). */
.nu-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  color: var(--color-text);
  font-family: var(--font);
}

/* nu-chip — pill: 11–12px text, 999px radius. Variants tint the SURFACE;
   label text stays var(--color-text) so AA contrast holds on every theme
   (muted text only on the neutral variant). */
.nu-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.nu-chip--neutral { color: var(--color-text-muted); }
/* Fallback tints (no color-mix support): surface-2 bg, token text */
.nu-chip--primary,
.nu-chip--accent,
.nu-chip--success,
.nu-chip--danger { background: var(--color-surface-2); }
@supports (color: color-mix(in srgb, red, blue)) {
  .nu-chip--primary {
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  }
  .nu-chip--accent {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border));
  }
  .nu-chip--success {
    background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border));
  }
  .nu-chip--danger {
    background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
  }
}

/* nu-section-label — 11px/600 uppercase letterspaced group header,
   optional right-aligned meta via .nu-section-label__meta. */
.nu-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.nu-section-label__meta {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* nu-list-row — settings/agenda row: leading icon, label, trailing meta or
   chevron, 1px divider between consecutive rows. */
.nu-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.nu-list-row + .nu-list-row { border-top: 1px solid var(--color-border); }
.nu-list-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}
.nu-list-row__label { flex: 1 1 auto; min-width: 0; }
.nu-list-row__meta {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* nu-quick-add — pill-shaped input bar: plus icon, NL placeholder, trailing
   mic + brain-dump icon buttons. */
.nu-quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-family: var(--font);
}
.nu-quick-add:focus-within { border-color: var(--color-primary); }
.nu-quick-add__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font);
  /* 16px floor — iOS zooms inputs below 16px (lint:input-font-size) */
  font-size: 16px;
  color: var(--color-text);
}
.nu-quick-add__input::placeholder { color: var(--color-text-muted); }
.nu-quick-add__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.nu-quick-add__btn:hover { color: var(--color-primary-lt); }

/* nu-ring — SVG progress ring (stroke-dasharray driven), sizes 44/64/180.
   Markup: <svg class="nu-ring nu-ring--64"><circle class="nu-ring__track"/>
           <circle class="nu-ring__fill"/></svg> */
.nu-ring { display: inline-block; transform: rotate(-90deg); }
.nu-ring--44  { width: 44px;  height: 44px;  }
.nu-ring--64  { width: 64px;  height: 64px;  }
.nu-ring--180 { width: 180px; height: 180px; }
.nu-ring__track { fill: none; stroke: var(--color-border); }
.nu-ring__fill  {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow) ease;
}
@media (prefers-reduced-motion: reduce) {
  .nu-ring__fill { transition: none; }
}

/* ── Containment + popover portal rules (spec §1, settled in NudgeUP-yf5ht) ──
   .nu-popover-portal — applied by js/modules/popover-portal.js when a popover
   is portaled to document.body. position:fixed at body level means NO ancestor
   content-visibility/overflow/transform can clip it (the recurring
   content-visibility-clips-popovers bug class).
   .nu-cv-auto — scroll-perf containment utility for NEW list rows. ONLY apply
   it to elements that NEVER host popovers/context menus; popover hosts must
   stay un-contained and portal their overlays to body instead. Existing
   .task-card containment (and its .overlay-open lift) is intentionally
   untouched. */
.nu-popover-portal {
  position: fixed;
  z-index: var(--z-top);
  margin: 0;
}
.nu-cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 72px;
}
/* ── end v1.1 redesign primitives (NudgeUP-yf5ht) ── */

/* ── v1.1 Tasks view redesign (NudgeUP-44eqn) ────────────────────────────────
   All rules below are flag-gated: they only take visual effect when the
   redesign flag is on (body.nu-redesign), OR they style elements that only the
   redesign render path emits (.nu-group-label, .nu-hero-card, .nu-done-collapse,
   …) which are never present with the flag off. Tokens only — no new colors. */

/* Time-of-day group labels (Overdue / Morning / Afternoon / Evening). */
.nu-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 2px 8px;
}
.nu-group-label--overdue { color: var(--color-danger); }
.nu-hero-label { margin: 4px 2px 8px; }
.nu-peak-chip { font-size: 10px; padding: 1px 8px; }

/* Hero card additions: focus play button, bud avatars, steps + Broadcast chips.
   The base .smart-hero-card styling is inherited from the legacy layout. */
.nu-hero-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.12s ease, background 0.12s ease;
}
.nu-hero-play:hover { background: var(--color-primary-lt); transform: scale(1.06); }
.nu-hero-play:active { transform: scale(0.96); }
/* NudgeUP-5cmta (§3): single hero — "Right now, do this one" kicker + coach
   reason now live ON the list hero card. The standalone #best-task-cta is hidden
   under the redesign flag, so there is exactly one hero and its task is pulled
   FROM the list (never rendered twice). Hero tokens keep it theme-safe (7 themes). */
.nu-hero-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sd-hero-ai-text, var(--sd-hero-text));
}
.nu-hero-card .hero-cat-pill {
  display: inline-block;
  margin-bottom: 8px;
}
.nu-hero-reason {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--sd-hero-muted);
  margin: 2px 0 10px;
  padding-right: 44px;
}
.nu-hero-buds {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  flex-wrap: wrap;
}
.nu-hero-bud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  margin-left: -8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.nu-hero-bud:first-child { margin-left: 0; }
.nu-hero-bud img { width: 100%; height: 100%; object-fit: cover; }
.nu-hero-broadcast { margin-left: 4px; }
.nu-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* Overdue "Today?" reschedule chip — danger-tint, looks tappable. */
.nu-today-chip {
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  font-weight: 600;
}
.nu-today-chip:hover { filter: brightness(1.06); }

/* Done collapses to ONE success-tint row. */
.nu-done-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.nu-done-collapse__chevron { color: var(--color-text-muted); font-size: 11px; }
.nu-done-list.task-done-collapsed { display: none; }

/* Quick-add bar mic + brain-dump + capture icons — hidden unless the redesign flag is on. */
.inline-quick-add-mic,
.inline-quick-add-braindump,
.inline-quick-add-capture { display: none; }  /* NudgeUP-1txkf: capture icon */
body.nu-redesign .inline-quick-add-mic,
body.nu-redesign .inline-quick-add-braindump,
body.nu-redesign .inline-quick-add-capture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex: 0 0 auto;
}
body.nu-redesign .inline-quick-add-mic:hover,
body.nu-redesign .inline-quick-add-braindump:hover,
body.nu-redesign .inline-quick-add-capture:hover { color: var(--color-primary); }

/* Filter-chip counts — hidden unless the redesign flag is on. */
.filter-count { display: none; }
body.nu-redesign .filter-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
body.nu-redesign .filter-btn.active .filter-count {
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
}
body.nu-redesign .filter-count.hidden { display: none; }

/* ── NudgeUP-5cmta (§3): anchor the quick-add bar as a bottom composer ────────
   It used to float mid-page (in flow, between the strip and the list). Now, on
   mobile under the redesign flag, it's pinned just above the bottom nav on the
   Tasks view so it's always available — a calm, persistent capture surface. The
   #fab-add-task FAB only focuses this same input, so it's redundant here and is
   hidden. The list gets bottom padding so the last card clears the composer.
   Mobile-only: desktop has no bottom nav and a multi-column layout, so the bar
   stays inline there. */
@media (max-width: 767px) {
  body.nu-redesign #view-tasks.active #inline-quick-add {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    margin: 0;
    padding: 8px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  /* The quick-add FAB just focuses this input — redundant once it's always on
     screen. Hide it on the Tasks view (kept on other views). */
  body.nu-redesign[data-view="tasks"] #fab-add-task { display: none !important; }
  /* Clear the fixed composer so the last task card isn't hidden behind it. */
  body.nu-redesign #view-tasks.active #task-list { padding-bottom: 72px; }
  /* The view-enter fade animates transform, which would briefly make .view the
     containing block for the fixed composer (mis-pinning it for ~0.2s). Use an
     opacity-only fade on the Tasks view so the composer stays viewport-fixed. */
  body.nu-redesign #view-tasks.active { animation: nu-view-fade-opacity 0.2s ease; }
}
@keyframes nu-view-fade-opacity { from { opacity: 0; } to { opacity: 1; } }

/* Banner lanes: coach slot + system strip. */
.nu-coach-slot,
.nu-system-strip { margin: 0 0 10px; }
.nu-coach-slot.hidden,
.nu-system-strip.hidden { display: none; }
/* NudgeUP-5cmta (§3): dedupe the "AI day plan ready" banner. Under the redesign
   flag the coach slot already renders a "Your AI day plan is ready" card; the
   legacy #day-plan-banner was ALSO showing the same message (two identical
   banners). Hide the legacy one — its .hidden toggle still drives the coach-slot
   signal (_refreshBannerLanes reads it), and the coach card's "View plan" clicks
   #btn-view-plan programmatically, so it keeps working while hidden. */
body.nu-redesign #day-plan-banner { display: none !important; }
.nu-system-strip__bar {
  padding: 6px 12px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}
.nu-coach-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nu-coach-card__msg {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  color: var(--color-text);
}
.nu-coach-card__cta {
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  font-weight: 600;
}
.nu-coach-card__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.nu-coach-card__close:hover { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .nu-hero-play { transition: none; }
}
/* ── end v1.1 Tasks view redesign (NudgeUP-44eqn) ── */

/* ── v1.1 Today header + Me view + Focus mode (NudgeUP-jobwk) ─────────────────
   Tokens only — no new colors. All rules are flag-gated: the hosts below only
   carry content when body.nu-redesign is set, and several rules are scoped to
   body.nu-redesign so the legacy layout is byte-for-byte unchanged with the
   flag off (spec §0). */

/* ── Today header momentum strip (spec §3) ── */
.nu-momentum-strip { margin: 0 0 10px; }
.nu-momentum-strip.hidden { display: none; }
.nu-today-head { margin-bottom: 8px; }
.nu-today-greeting { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.nu-today-date { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.nu-momentum-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nu-momentum-chip { font-weight: 600; }
.nu-momentum-flame { font-size: 12px; }
.nu-momentum-of { opacity: 0.7; }
/* With the redesign flag ON, the legacy Smart Daily header band is superseded by
   the momentum strip; hide its name line + stats strip to avoid duplication. */
body.nu-redesign #smart-daily-header,
body.nu-redesign .smart-stats-strip { display: none; }

/* ── Me view (spec §3) ── */
.nu-me-redesign { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.nu-me-redesign.hidden { display: none; }
/* Flag ON: the redesign Me panel replaces the legacy main view. The sticky
   header card (avatar uploader + name + tier + version) is KEPT — it is the
   identity surface + the only place avatar upload lives, so hiding it would make
   that setting unreachable (spec §3 "ALL existing settings reachable"). The
   Settings sub-view panel is likewise untouched. */
body.nu-redesign #profile-main-view { display: none; }
/* NudgeUP-gavmo: the legacy sticky-header profile-card STAYS visible — it is the
   only place avatar upload lives. The redesign augments it (theme swatch chip
   injected by JS into #profile-card; see _renderRedesignMe) rather than
   duplicating it, so avatar upload + name/email/nudge are never orphaned. */
/* But when the Settings sub-view is open, hide the redesign Me panel and let the
   legacy settings panel show (relocation target). */
body.nu-redesign .profile-scroll-body.settings-open #nu-me-redesign { display: none; }

/* The identity surface (avatar / name / tier / nudge) is the kept legacy sticky
   header card; the redesign panel adds an "Edit profile" affordance below it. */
.nu-me-edit-row { display: flex; justify-content: flex-end; }
.nu-me-edit {
  flex: 0 0 auto; border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text); border-radius: 999px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.nu-me-edit:hover { background: var(--color-surface-2); }

.nu-me-streak-card { display: flex; gap: 14px; align-items: center; padding: 14px; }
.nu-me-streak-ring { position: relative; flex: 0 0 auto; width: 64px; height: 64px; }
.nu-me-streak-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--color-text);
}
.nu-me-streak-body { flex: 1 1 auto; min-width: 0; }
.nu-me-streak-milestone { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; }
.nu-me-stats { display: flex; gap: 16px; margin-bottom: 10px; }
.nu-me-stat { display: flex; flex-direction: column; }
.nu-me-stat__val { font-size: 15px; font-weight: 700; color: var(--color-text); }
.nu-me-stat__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.nu-me-streak-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nu-me-streak-btn { border: none; cursor: pointer; font-weight: 600; }
.nu-me-streak-btn:hover { filter: brightness(1.05); }

.nu-me-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.nu-me-badge { font-weight: 600; }

.nu-me-section { margin: 4px 2px 0; }
.nu-me-settings { padding: 0; overflow: hidden; }
.nu-me-row {
  width: 100%; background: transparent; border: none; cursor: pointer;
  text-align: left; color: var(--color-text); font: inherit;
}
.nu-me-row:hover { background: var(--color-surface); }
.nu-list-row__chevron { color: var(--color-text-muted); display: inline-flex; flex: 0 0 auto; }

.nu-me-signout {
  align-self: center; background: transparent; border: none; cursor: pointer;
  color: var(--color-danger); font-size: 14px; font-weight: 600; padding: 8px;
  margin-top: 4px;
}
.nu-me-signout:hover { text-decoration: underline; }

/* ── NudgeUP-gavmo: theme swatch chip injected into the legacy #profile-card,
   + the card made tappable into Account & profile (relocation only). ── */
.nu-me-theme-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.nu-me-theme-chip__dot { color: var(--color-primary); }
body.nu-redesign #profile-card { cursor: pointer; }

/* ── NudgeUP-3lb7d: toggle SWITCH component ──────────────────────────────────
   The `label.toggle > input[type=checkbox] + .toggle-slider` markup is used in
   ~18 places (index.html settings rows, the ADHD Mode opt-ins, and the redesign
   Me page) but the base switch styling was never defined — so the control fell
   back to a raw browser checkbox plus an inert empty span (owner device-test:
   "ADHD Mode shows as a checkbox"). Defining it here turns every one of those
   into a real sliding switch. 44px tap target; the visual hides the native box
   while keeping it focusable/checkable (accessibility intact). */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 44px;            /* 44px tap target */
  cursor: pointer;
}
.toggle > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 46px;
  height: 28px;
  margin: 0;
  cursor: pointer;
}
.toggle-slider {
  position: relative;
  display: block;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-surface-2, #252438);
  border: 1px solid var(--color-border, #2E2D42);
  transition: background var(--transition-fast, 0.18s ease),
              border-color var(--transition-fast, 0.18s ease);
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast, 0.18s ease);
}
.toggle > input[type="checkbox"]:checked + .toggle-slider {
  background: var(--color-primary, #7C3AED);
  border-color: var(--color-primary, #7C3AED);
}
.toggle > input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.toggle > input[type="checkbox"]:focus-visible + .toggle-slider {
  outline: 2px solid var(--color-primary, #7C3AED);
  outline-offset: 2px;
}

/* ── NudgeUP-gavmo: top-level ADHD Mode toggle row ── */
.nu-me-adhd { display: flex; align-items: center; gap: 12px; padding: 14px; }
.nu-me-adhd__icon { width: 22px; height: 22px; color: var(--color-success, #3ba776); }
.nu-me-adhd__text { flex: 1 1 auto; min-width: 0; }
.nu-me-adhd__title { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); }
.nu-me-adhd__sub { display: block; font-size: 11px; color: var(--color-text-muted); }
.nu-me-adhd__toggle { flex: 0 0 auto; }

/* ── NudgeUP-gavmo: in-place single-open settings accordion ── */
.nu-me-acc-list { display: block; }
.nu-me-acc + .nu-me-acc { border-top: 1px solid var(--color-border); }
.nu-me-acc__header { min-height: 44px; }
.nu-me-acc__chevron {
  transition: transform var(--transition, 0.2s ease);
}
.nu-me-acc--open .nu-me-acc__chevron { transform: rotate(90deg); }
.nu-me-acc__body {
  overflow: hidden; max-height: 0;
  transition: max-height var(--transition-slow, 0.3s) ease;
  background: var(--color-surface-2);
}
.nu-me-acc__body[hidden] { display: none; }
.nu-me-acc--open .nu-me-acc__body { /* max-height set inline by JS for animation */ }
/* The re-parented legacy body keeps its own padding; ensure it shows fully. */
.nu-me-acc__body > .settings-accordion-body.open { max-height: none; padding: 0 14px 12px; }
.nu-me-version { text-align: center; font-size: 11px; color: var(--color-text-muted); margin: 0 0 8px; cursor: pointer; }

/* ── Full-screen Focus mode (spec §3) ── */
.nu-focus-root.hidden { display: none; }
body.nu-focus-open { overflow: hidden; }
.nu-focus-screen {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background: var(--color-bg);
  text-align: center;
}
.nu-focus-close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 22px; line-height: 1; padding: 6px;
}
.nu-focus-close:hover { color: var(--color-text); }
.nu-focus-meta { display: flex; gap: 8px; }
.nu-focus-ringwrap { position: relative; width: 180px; height: 180px; }
.nu-focus-time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums;
}
.nu-focus-title { font-size: 18px; font-weight: 700; color: var(--color-text); max-width: 22ch; }
.nu-focus-presence { display: flex; align-items: center; gap: 8px; }
.nu-focus-buds { display: flex; }
.nu-focus-bud {
  width: 26px; height: 26px; border-radius: 999px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  margin-left: -8px; font-size: 11px; font-weight: 700; color: var(--color-text-muted);
}
.nu-focus-bud:first-child { margin-left: 0; }
.nu-focus-bud img { width: 100%; height: 100%; object-fit: cover; }
.nu-focus-presence__txt { font-size: 12px; color: var(--color-text-muted); }
.nu-focus-coachline {
  min-height: 20px; font-size: 14px; color: var(--color-primary); max-width: 28ch;
  opacity: 0; transition: opacity var(--transition-slow) ease;
}
.nu-focus-coachline--show { opacity: 1; }
.nu-focus-controls { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.nu-focus-btn {
  cursor: pointer; font-weight: 700; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.nu-focus-btn--pause {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--color-primary); color: var(--color-text-inverse, #fff);
}
.nu-focus-btn--pause:hover { background: var(--color-primary-lt); }
.nu-focus-btn--done {
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 12px 20px; font-size: 14px;
}
.nu-focus-btn--done:hover { background: var(--color-surface); }
/* NudgeUP-7e2bj: Document PiP pop-out button — small icon button in the controls row. */
.nu-focus-btn--pip {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
}
.nu-focus-btn--pip:hover { background: var(--color-surface); color: var(--color-text); }
.nu-focus-btn--pip[aria-pressed="true"] {
  background: var(--color-primary); color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary);
}
/* NudgeUP-gm6p4: Focus soundscape (Pro — ADHD feature).
   A small sound toggle + mode row beneath the main controls.
   Shows only for Pro users (rendered conditionally in me-focus-redesign.js). */
.nu-focus-soundscape {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 2px;
}
.nu-focus-btn--sound {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base) ease, color var(--transition-base) ease;
}
.nu-focus-btn--sound:hover { background: var(--color-surface); color: var(--color-text); }
.nu-focus-btn--sound[aria-pressed="true"] {
  background: var(--color-primary); color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary);
}
/* NudgeUP-vj2gb: track selector row — lo-fi tracks (Chill/Rainy/Focus) + Brown noise. */
.nu-focus-sound-modes {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: 280px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base) ease;
}
/* Show mode pills whenever the sound button exists (always visible for discoverability). */
.nu-focus-soundscape:hover .nu-focus-sound-modes,
.nu-focus-soundscape:focus-within .nu-focus-sound-modes,
[data-focus-sound][aria-pressed="true"] ~ .nu-focus-sound-modes {
  opacity: 1; pointer-events: auto;
}
/* Also always show on touch/mobile where hover doesn't apply. */
@media (hover: none) {
  .nu-focus-sound-modes { opacity: 1; pointer-events: auto; }
}
.nu-focus-sound-mode {
  padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px; cursor: pointer;
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.nu-focus-sound-mode:hover { background: var(--color-surface); color: var(--color-text); }
.nu-focus-sound-mode--active {
  background: var(--color-primary); color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .nu-focus-coachline { transition: none; }
}
/* ── end v1.1 Today header + Me view + Focus mode (NudgeUP-jobwk) ── */

/* ── v1.1 Vibe Check spine + Calendar density/rebalance (NudgeUP-odajb) ───────
   Spec §3 "Vibe Check" + "Calendar". All built on existing theme tokens; tints
   reuse the same color-mix(16%/14%) + @supports fallback as the nu-chip
   primitive. Hosts are hidden until JS populates them (flag-gated). */

/* Spine host — stacks the energy selector, pattern card, coach card, matched
   task. Hidden by the .hidden class until renderVibeSpine() fills it. */
.nu-vibe-spine { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.nu-vibe-spine.hidden { display: none; }

/* Energy selector — 5 levels as ascending bars + caption. */
.nu-vibe-energy { display: flex; flex-direction: column; gap: 8px; }
.nu-vibe-energy-row { display: flex; gap: 8px; }
.nu-vibe-energy-btn {
  /* min-width:0 lets the 5 buttons share the row width evenly instead of being
     pushed wider than the container by their fixed-width star glyphs (which has
     min-width:auto by default), which on narrow phones clipped the 5th ("Awful")
     button off the right edge. overflow:hidden keeps the stars within bounds. */
  flex: 1 1 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 6px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface-2);
  color: var(--color-text-muted); font-family: var(--font); cursor: pointer;
  transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
.nu-vibe-energy-btn:hover { color: var(--color-text); }
.nu-vibe-energy-btn.is-selected { border-color: var(--color-primary); color: var(--color-text); }
/* NudgeUP-zjwcg: selected-state border + tint use the level's green→red color
   (set via the inline --nu-energy-color custom prop on the selected button). */
.nu-vibe-energy-btn.is-selected[style*="--nu-energy-color"] {
  border-color: var(--nu-energy-color);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .nu-vibe-energy-btn.is-selected[style*="--nu-energy-color"] {
    background: color-mix(in srgb, var(--nu-energy-color) 14%, var(--color-surface-2));
  }
}
/* NudgeUP-zjwcg: 1–5 star indicators replace the old ascending bars. Filled
   stars are colored inline (green→red) per level; empty stars stay faded. */
.nu-vibe-energy-bar {
  display: block; width: 60%; border-radius: 3px; background: var(--color-border);
  transition: background var(--transition-fast) ease;
}
.nu-vibe-energy-bar[data-level="1"] { height: 6px; }
.nu-vibe-energy-bar[data-level="2"] { height: 10px; }
.nu-vibe-energy-bar[data-level="3"] { height: 14px; }
.nu-vibe-energy-bar[data-level="4"] { height: 18px; }
.nu-vibe-energy-bar[data-level="5"] { height: 22px; }
.nu-vibe-energy-btn.is-selected .nu-vibe-energy-bar { background: var(--color-primary); }
.nu-vibe-stars { display: inline-flex; gap: 1px; align-items: center; height: 14px; max-width: 100%; }
.nu-vibe-star { flex: 0 0 auto; color: var(--color-border); opacity: 0.55; }
/* Narrow phones: the 5-button energy row + 5-star glyphs are ~410px wide, which
   overflowed a ~340px content column and clipped the last button. Shrink the star
   glyphs + gap so all five rating buttons fit fully on screen. (Desktop unchanged.) */
@media (max-width: 430px) {
  .nu-vibe-energy-row { gap: 6px; }
  .nu-vibe-star { width: 10px; height: 10px; }
  .nu-vibe-stars { gap: 0; }
}
.nu-vibe-star.is-filled { opacity: 1; }
.nu-vibe-energy-cap { font-size: 11px; font-weight: 600; }
.nu-vibe-energy-emoji { display: block; font-size: 24px; line-height: 26px; height: 22px; }
/* NudgeUP-yv8i6 stateful-day: the redesign spine + daily-locked coach replace these
   legacy surfaces. Hide them (buttons stay in the DOM — the spine forwards clicks to
   .vibe-emoji[data-vibe] and #btn-customize-coach). */
body.nu-redesign #vibe-first-intro,
body.nu-redesign #vibe-coach-strip,
body.nu-redesign .vibe-section { display: none !important; }
/* Post-check-in cue: gently compact the spine energy selector once a rating exists. */
body.nu-redesign .nu-vibe-energy.is-rated .nu-vibe-energy-row { transform: scale(0.93); transform-origin: left center; opacity: 0.85; }

/* NudgeUP-siqhp (Concept 1): collapse the triple plan render. The standalone
   "Today's Plan" card (#day-plan-card) and the raw Drew reply (#vibe-response)
   duplicated the day plan that the single "Your coach" card now carries. Hide both
   under the redesign flag — the plan/reply text still flows into the coach card via
   _renderRedesignVibe (it reads #vibe-response's text), and the legacy controls keep
   working (the spine's regenerate/read-aloud forward to runVibeMode + #vibe-tts-toggle,
   the day-plan card's regen/dismiss state is mirrored by the coach card). */
body.nu-redesign #day-plan-card,
body.nu-redesign #vibe-response { display: none !important; }
/* Tools row → a compact 3-button row (spec: condense). */
body.nu-redesign .vibe-mode-grid { gap: 8px; }
body.nu-redesign .vibe-mode-grid .vibe-modes-sublabel { margin: 0 0 2px; font-size: 12px; }
body.nu-redesign .vibe-mode-grid .vibe-mode-btn { padding: 10px 8px; }
body.nu-redesign .vibe-mode-grid .vibe-mode-btn .vibe-mode-desc { font-size: 11px; opacity: 0.75; }
/* AI counter + read-aloud → one small utility line. */
body.nu-redesign #ai-rl-meta,
body.nu-redesign #vibe-tts-controls {
  font-size: 11px; color: var(--color-text-muted); margin-top: 4px;
}
body.nu-redesign #vibe-tts-controls .vibe-tts-btn {
  font-size: 11px; padding: 4px 10px;
}

/* Pattern card — sparkline + trend + best window. */
.nu-vibe-pattern { display: flex; flex-direction: column; gap: 8px; }
.nu-vibe-pattern-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nu-vibe-spark { width: 100%; height: 40px; display: block; }
.nu-vibe-spark__line { stroke: var(--color-primary); stroke-linecap: round; stroke-linejoin: round; }
.nu-vibe-best { margin: 0; font-size: 12px; color: var(--color-text-muted); }

/* NudgeUP-siqhp (Concept 1): single "Your coach" result card — header chip +
   memory-grounded message / day plan + matched task (folded in) + an action row
   (regenerate + read-aloud). Collapses the old triple plan render into one card. */
.nu-vibe-coachcard { display: flex; flex-direction: column; gap: 10px; position: relative; }
.nu-vibe-coachchip { display: flex; align-items: center; gap: 6px; }
.nu-vibe-coach-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.nu-vibe-coach-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--color-success);
  flex: 0 0 auto;
}
.nu-vibe-coach-dot.is-off { background: var(--color-border); }
.nu-vibe-coach-gear {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.nu-vibe-coach-gear:hover { color: var(--color-primary); background: var(--color-surface); }
.nu-vibe-coach-msg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text); }

/* Action row inside the coach card — compact regenerate + read-aloud. */
.nu-vibe-coach-actions { display: flex; gap: 8px; }
.nu-vibe-coach-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface-2);
  color: var(--color-text); font-family: var(--font); font-size: 12px;
  font-weight: 600; cursor: pointer;
  transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
.nu-vibe-coach-action:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nu-vibe-coach-action svg { flex: 0 0 auto; }

/* NudgeUP-0pidv (app-native coach): I'm-stuck / Power Hour focus task + in-app
   action buttons folded inside the coach card. A tinted box names the real task,
   then a wrapping row of buttons drives existing features (timer / breakdown /
   open task). The primary button is filled to draw the eye to the first move. */
.nu-vibe-coach-focus {
  border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 2px;
  display: flex; flex-direction: column; gap: 4px;
}
.nu-vibe-coach-focus-title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-vibe-coach-actions--focus { flex-wrap: wrap; margin-top: 6px; }
.nu-vibe-coach-action--primary {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse, #fff);
}
.nu-vibe-coach-action--primary:hover {
  background: var(--color-primary-lt); border-color: var(--color-primary-lt);
  color: var(--color-text-inverse, #fff);
}

/* NudgeUP-0pidv (Plan-my-day fix): the flat ordered "Today's plan" list rendered
   when the user opens their AI day plan. Reuses the existing mini-list chrome; the
   label just reads "Today's plan" so the order is unmistakably the plan order. */
body.nu-redesign .nu-group-label--plan { color: var(--color-primary); }

/* Matched task folded INSIDE the coach card — a tinted inline row, not a card. */
.nu-vibe-coachcard .nu-vibe-matched {
  border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 0;
}

/* Matched-to-your-vibe task card with play button. */
.nu-vibe-matched { display: flex; align-items: center; gap: 12px; }
.nu-vibe-matched-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nu-vibe-matched-title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-vibe-matched-play {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: var(--color-primary); color: var(--color-text-inverse, #fff); cursor: pointer;
}
.nu-vibe-matched-play:hover { background: var(--color-primary-lt); }

/* Calendar density dots + overload tint — additive on the existing grid, keyed
   on body.nu-redesign so the legacy grid is untouched with the flag off. */
/* Density read = a thin load bar pinned to the cell's bottom edge, so it never
   collides with the centered category dots (.cal-dots) or the corner badges. */
body.nu-redesign .cal-day[data-nu-density]::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 2px;
  height: 3px; border-radius: 999px; background: var(--color-primary); pointer-events: none;
}
body.nu-redesign .cal-day[data-nu-density="1"]::after { opacity: 0.4; }
body.nu-redesign .cal-day[data-nu-density="2"]::after { opacity: 0.7; }
body.nu-redesign .cal-day[data-nu-density="3"]::after { opacity: 1; }
body.nu-redesign .cal-day.nu-cal-overload { background: var(--color-surface-2); }
@supports (color: color-mix(in srgb, red, blue)) {
  body.nu-redesign .cal-day.nu-cal-overload {
    background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  }
}

/* Proactive rebalance banner — wraps the existing Plan-week flow. */
.nu-cal-rebalance-host { margin-bottom: 12px; }
.nu-cal-rebalance-host.hidden { display: none; }
.nu-cal-rebalance { display: flex; align-items: center; gap: 12px; }
.nu-cal-rebalance-body { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nu-cal-rebalance-icon { flex: 0 0 auto; }
.nu-cal-rebalance-text { margin: 0; font-size: 13px; color: var(--color-text); }
.nu-cal-rebalance-cta { flex: 0 0 auto; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .nu-vibe-energy-btn, .nu-vibe-energy-bar, .nu-vibe-spark__line { transition: none; }
}
/* ── end v1.1 Vibe Check spine + Calendar density/rebalance (NudgeUP-odajb) ── */

/* ══════════════════════════════════════════════════════════════════════════
   v1.1 Ctrl+K command palette + per-view empty states + desktop kbd hints
   (NudgeUP-6m93j). All against existing theme tokens only — no hardcoded
   colors, so all 7 themes inherit. Portaled to body (position:fixed) so no
   ancestor containment can clip the overlay (spec §1).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Command palette overlay ── */
.nu-cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;               /* above modals + portaled popovers */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--font);
}
.nu-cmdk-overlay.hidden { display: none; }

.nu-cmdk-panel {
  width: min(560px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: nu-cmdk-pop 0.14s ease-out;
}
@keyframes nu-cmdk-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nu-cmdk-panel { animation: none; }
}

.nu-cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.nu-cmdk-input-icon { flex: 0 0 auto; color: var(--color-text-muted); display: inline-flex; }
.nu-cmdk-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font);
  font-size: 16px;           /* 16px floor — avoid iOS zoom */
  color: var(--color-text);
}
.nu-cmdk-input::placeholder { color: var(--color-text-muted); }

.nu-cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.nu-cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  color: var(--color-text);
}
.nu-cmdk-item.is-active { background: var(--color-surface-2); }
@supports (color: color-mix(in srgb, red, blue)) {
  .nu-cmdk-item.is-active { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); }
}
.nu-cmdk-item-icon { flex: 0 0 auto; display: inline-flex; color: var(--color-text-muted); }
.nu-cmdk-item.is-active .nu-cmdk-item-icon { color: var(--color-primary); }
.nu-cmdk-item-label { flex: 1 1 auto; font-size: 14px; }
.nu-cmdk-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}
.nu-cmdk-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ── Per-view empty states (redesign only) ── */
.nu-view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--color-text-muted);
}
.nu-view-empty.hidden { display: none; }
.nu-view-empty__icon { color: var(--color-text-muted); opacity: 0.7; margin-bottom: 4px; }
.nu-view-empty__headline { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.nu-view-empty__subtext { margin: 0; font-size: 13px; max-width: 320px; }
.nu-view-empty__cta {
  margin-top: 8px;
  cursor: pointer;
}

/* ── Desktop keyboard-hints footer (visible at >=1024px only) ── */
.nu-kbd-hints { display: none; }
@media (min-width: 1024px) {
  body.nu-redesign .nu-kbd-hints {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 24px 0 8px;
    font-size: 11px;
    color: var(--color-text-muted);
  }
}
.nu-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface-2);
  font-family: var(--font);
  font-size: 11px;
  color: var(--color-text);
}
/* ── end v1.1 command palette + empty states + kbd hints (NudgeUP-6m93j) ── */

/* ════════════════════════════════════════════════════════════════════════════
   v1.1 REDESIGN — Buds rail: podium + "Happening now" feed + Groups (NudgeUP-6qkm8)
   docs/REDESIGN_SPEC.md §3 "Buds". ADDITIVE: every selector is a new `nu-buds-*`
   class on the #nu-buds-redesign host, which is .hidden + emptied unless the flag
   is on. Existing theme tokens only — zero hardcoded colors; all 7 themes inherit.
   color-mix tints have a surface-2 fallback for browsers without color-mix.
   ════════════════════════════════════════════════════════════════════════════ */
.nu-buds-redesign {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 14px;
}
.nu-buds-redesign.hidden { display: none; }

/* Shared avatar (podium + feed + rescue rows) */
.nu-buds-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  color: var(--color-text);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--color-border);
}
.nu-buds-avatar--sm { width: 30px; height: 30px; font-size: 13px; }

/* ── "This week" momentum strip (NudgeUP-52kro) ──
   Compact horizontal-scroll row that replaces the old vertical podium. Each cell
   is a fixed-width avatar + name + flame+streak; the row scrolls sideways on
   narrow screens so it never overflows (mobile-first; verified at 360px). */
.nu-buds-strip {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox: hide the scrollbar, swipe to scroll */
  padding-bottom: 2px;
}
.nu-buds-strip::-webkit-scrollbar { display: none; }  /* WebKit: hide */
.nu-buds-strip-cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 60px;
  padding: 6px 2px;
  border-radius: var(--radius-md);
}
.nu-buds-strip-cell.is-self { background: var(--color-surface-2); }
@supports (color: color-mix(in srgb, red, blue)) {
  .nu-buds-strip-cell.is-self {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  }
}
.nu-buds-strip-avatarwrap { position: relative; display: inline-flex; }
.nu-buds-strip-crown {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  color: var(--color-accent, var(--color-primary));
  line-height: 0;
}
.nu-buds-strip-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-text);
}
.nu-buds-strip-streak {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}
.nu-buds-strip-flame { display: inline-flex; color: var(--color-warning, var(--color-accent, var(--color-primary))); line-height: 0; }

/* ── Streak-rescue card (warning/danger tint) ── */
.nu-buds-rescue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .nu-buds-rescue {
    background: color-mix(in srgb, var(--color-warning, #d97706) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warning, #d97706) 30%, var(--color-border));
  }
}
.nu-buds-rescue-main { display: flex; align-items: center; gap: 10px; }
.nu-buds-rescue-text { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--color-text); }
.nu-buds-rescue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nu-buds-rescue-nudge, .nu-buds-rescue-voice { cursor: pointer; }

/* ── Groups (slim entry rows) — NudgeUP-52kro ──
   The old "Happening now" feed block + the Groups CTA chips were removed; the
   Activity tab now covers live bud activity and the burst/challenge create
   buttons live in their own sections. Groups is now just two tappable list rows. */
.nu-buds-groups-rows { margin-top: 0; }
.nu-buds-group-row { cursor: pointer; }
.nu-buds-group-sub {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nu-buds-rescue-nudge, .nu-buds-rescue-voice { transition: none; }
}
/* ── end v1.1 redesign Buds rail (NudgeUP-6qkm8 + 52kro declutter) ── */

/* ── NudgeUP-25beh: Focus mode — today's top 3 tasks view ────────────────────
   A stripped single-panel overlay opened from the Tasks header "Focus" button.
   No sidebar, no nav — full-bleed calm. Distinct from .nu-focus-screen (timer). */
.btn-focus-today {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--accent, #7C3AED);
  color: var(--accent, #7C3AED);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-focus-today:hover,
.btn-focus-today:focus-visible {
  background: var(--accent, #7C3AED);
  color: #fff;
}
.btn-focus-today svg { flex-shrink: 0; }

.focus-today-overlay { position: fixed; inset: 0; z-index: var(--z-overlay, 9000); }
.focus-today-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 24px;
  background: var(--color-bg);
  text-align: center;
  overflow-y: auto;
}
.focus-today-close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-muted); line-height: 1; padding: 6px;
  display: inline-flex;
}
.focus-today-close:hover,
.focus-today-close:focus-visible { color: var(--color-text); }
.focus-today-head { max-width: 32ch; }
.focus-today-eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px;
}
.focus-today-title { font-size: 26px; font-weight: 800; color: var(--color-text); margin: 0; }
.focus-today-subtitle { font-size: 14px; color: var(--color-text-muted); margin: 8px 0 0; }
.focus-today-list {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 12px;
}
.focus-today-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
}
.focus-today-row--done { opacity: 0.45; transform: scale(0.98); }
.focus-today-check {
  flex-shrink: 0; cursor: pointer; padding: 0; background: transparent; border: none;
}
.focus-today-check__box {
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.focus-today-check:hover .focus-today-check__box,
.focus-today-check:focus-visible .focus-today-check__box {
  border-color: var(--color-primary); color: var(--color-primary);
}
.focus-today-row--done .focus-today-check__box {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse, #fff);
}
.focus-today-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.focus-today-row__title {
  font-size: 16px; font-weight: 600; color: var(--color-text); line-height: 1.3;
}
.focus-today-row--done .focus-today-row__title { text-decoration: line-through; }
.focus-today-row__meta { font-size: 12px; color: var(--color-text-muted); }
.focus-today-empty { padding: 24px; }
.focus-today-empty__title { font-size: 18px; font-weight: 700; color: var(--color-text); margin: 0; }
.focus-today-empty__sub { font-size: 14px; color: var(--color-text-muted); margin: 6px 0 0; }
.focus-today-exit-btn {
  margin-top: 4px;
  background: var(--color-surface-2, var(--color-surface)); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast);
}
.focus-today-exit-btn:hover,
.focus-today-exit-btn:focus-visible { background: var(--color-surface); }
@media (prefers-reduced-motion: reduce) {
  .focus-today-row { transition: none; }
}
/* ── end NudgeUP-25beh Focus mode ── */

/* ── NudgeUP-vng8f: Bulk task actions (multi-select) ───────────────────────── */
/* "Select" toggle pill in the filter row */
.filter-btn-select.active,
.filter-btn-select[aria-pressed="true"] {
  background: var(--color-primary, #7C3AED);
  color: #fff;
  border-color: var(--color-primary, #7C3AED);
}

/* While select mode is active, every task card/row becomes a selector. The
   container gets .bulk-select-mode so cards show a selection affordance and
   suppress the normal open-edit click (handled in JS). */
.task-list.bulk-select-mode .task-swipe-wrap,
.task-list.bulk-select-mode .task-card,
.task-list.bulk-select-mode .smart-hero-card,
.task-list.bulk-select-mode .smart-mini-row {
  cursor: pointer;
}
.task-list.bulk-select-mode [data-id].bulk-selected,
.task-list.bulk-select-mode .bulk-selected {
  outline: 2px solid var(--color-primary, #7C3AED);
  outline-offset: -2px;
  border-radius: var(--radius-md, 14px);
  background: color-mix(in srgb, var(--color-primary, #7C3AED) 10%, transparent);
}

/* Floating bulk-action bar */
.bulk-action-bar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  transform: translateX(-50%);
  z-index: 10600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 24px);
  background: var(--color-surface, #1b1b22);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding: 8px 12px;
  animation: bulk-bar-in 0.16s ease;
}
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-bar-close {
  background: none; border: none; color: var(--color-text-muted, #999);
  font-size: 1rem; cursor: pointer; padding: 4px 6px; line-height: 1;
}
.bulk-bar-close:hover, .bulk-bar-close:focus-visible { color: var(--color-text); outline: none; }
.bulk-bar-count {
  font-size: 0.85rem; font-weight: 700; color: var(--color-text);
  white-space: nowrap; padding: 0 4px;
}
.bulk-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-bar-btn {
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.12s, opacity 0.12s;
}
.bulk-bar-btn:hover:not(:disabled),
.bulk-bar-btn:focus-visible { background: var(--color-surface); outline: none; }
.bulk-bar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bulk-bar-btn-danger { color: var(--color-danger, #ef4444); }
.bulk-bar-date {
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px; padding: 6px 10px; font-size: 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
  .bulk-action-bar { animation: none; }
}
/* ── end NudgeUP-vng8f ── */

/* ══ §5 Projects (NudgeUP-ggzpd) ════════════════════════════════════════════
   Projects view: a list of multi-day project cards (steps-as-tasks model).
   Reuses .nu-card / .nu-chip chrome + design tokens so it matches the redesign
   on every theme. Gated behind the projects flag (default off). */

/* Compact, auto-width primary action — the full-width .btn-primary is wrong for
   an inline view-header / empty-state CTA. */
.nu-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.nu-btn-primary:hover:not(:disabled) { opacity: 0.92; }
.nu-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.projects-header-btns { display: flex; align-items: center; gap: 8px; }

.nu-project-intro {
  margin: 4px 0 14px;
  color: var(--color-text-muted);
  font-family: var(--font);
  font-size: 0.85rem;
  line-height: 1.5;
}

.nu-projects-list { display: flex; flex-direction: column; gap: 10px; }

/* Project card — extends .nu-card with a tap affordance + hover lift. */
.nu-project-card {
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform 0.05s;
}
.nu-project-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  box-shadow: 0 2px 14px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.nu-project-card:active { transform: scale(0.995); }
.nu-project-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nu-project-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.nu-project-title {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  word-break: break-word;
}
.nu-project-actions { display: flex; gap: 2px; flex-shrink: 0; }
.nu-project-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nu-project-action:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.nu-project-action--danger:hover { color: var(--color-danger); }

.nu-project-notes {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font);
  font-size: 0.85rem;
  line-height: 1.45;
  /* clamp to 2 lines so long notes don't blow out the card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nu-project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* Progress bar (increment 3) — derived done/total over the project's step-tasks */
.nu-project-progress { margin-top: 10px; }
.nu-project-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.nu-project-progress-label {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.nu-project-progress-pct {
  font-family: var(--font);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.nu-project-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-border);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .nu-project-progress-track { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
}
.nu-project-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-lt));
  transition: width var(--transition-slow) ease;
}
.nu-project-progress--complete .nu-project-progress-fill { background: var(--color-success); }
.nu-project-progress--complete .nu-project-progress-label { color: var(--color-success); }

/* Empty state */
.nu-project-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 40px 20px;
  color: var(--color-text-muted);
}
.nu-project-empty-icon { color: var(--color-text-muted); opacity: 0.6; margin-bottom: 4px; }
.nu-project-empty-title {
  margin: 0;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}
.nu-project-empty-sub {
  margin: 0 0 8px;
  max-width: 38ch;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ── §5 inc5: Project detail sheet ───────────────────────────────────────── */
.nu-project-detail-progress { margin: 4px 0 12px; }
.nu-project-detail-progress:empty { display: none; }
/* NudgeUP-putfm: "Where am I?" ✨Coach insight slot + result. */
.nu-project-detail-coach-slot { margin: 0 0 8px; }
.nu-project-detail-coach-slot:empty { display: none; }
.nu-project-detail-coach-result {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ai-accent, #7c5cff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ai-accent, #7c5cff) 22%, transparent);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text, #1f2330);
}
.nu-project-detail-coach-result--err {
  background: none;
  border-color: transparent;
  color: var(--color-danger, #e0556e);
}
.nu-project-coach-insight { margin: 0; }
.nu-project-detail-body {
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nu-project-steps { display: flex; flex-direction: column; gap: 8px; }
.nu-project-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--color-text-muted);
}
.nu-project-detail-empty-title {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.nu-project-detail-empty-sub {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* Delete sits apart from the primary/edit actions. */
.nu-project-detail-actions { flex-wrap: wrap; }
.nu-project-detail-delete { color: var(--color-danger, #ef4444); margin-left: auto; }
/* §5 ku9q2: "Done" is a full-width primary on its own row; the secondary actions
   (Add step / Edit / Delete) wrap to the row below. Two-class selector beats the
   generic .modal-actions .btn-primary { flex:2 } so Done spans the full width. */
.nu-project-detail-actions .nu-project-detail-done { flex: 1 0 100%; }
.nu-project-detail-review-hint {
  margin: -4px 0 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* §5 inc5b: a step row = reorder controls (up/down + drag handle) + the shared
   mini-row + an inline reschedule date input. */
.nu-project-step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.nu-project-step--dragging { opacity: 0.9; }
.nu-project-steps--reordering .nu-project-step { transition: transform 0.12s ease; }
.nu-project-step-ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
  flex-shrink: 0;
}
.nu-step-move {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  font-size: 0.7rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nu-step-move:disabled { opacity: 0.3; cursor: default; }
.nu-step-move:not(:disabled):hover { background: var(--color-primary); color: #fff; }
.nu-step-drag {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.nu-project-step--dragging .nu-step-drag { cursor: grabbing; }
.nu-project-step-main { flex: 1; min-width: 0; }
.nu-project-step-day {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 2px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.nu-step-date {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--color-text);
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 6px;
}

/* §5 24v36: per-step notes preview + the explicit "Edit / notes" affordance. */
.nu-step-notes-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding-left: 2px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-width: 0;
}
.nu-step-notes-preview svg { flex-shrink: 0; }
.nu-step-notes-preview__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nu-step-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 4px;
  border: none;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nu-step-edit-link:hover { text-decoration: underline; }

/* §5 24v36: focused step-edit sheet — "Mark done" toggle + actions. */
.nu-step-edit-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}
.nu-step-edit-done input { width: 18px; height: 18px; }
.nu-step-edit-actions { margin-top: 14px; }
.nu-step-edit-delete { color: var(--color-danger, #e0556e); }

/* NudgeUP-p4h3z: ✨Coach "Draft this list" affordance in the step-edit notes. */
.step-edit-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.step-edit-notes-head label { margin-bottom: 0; }
.step-edit-coach-slot { flex-shrink: 0; }
.step-edit-coach-status {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #6b7280);
}
.step-edit-coach-status--err { color: var(--color-danger, #e0556e); }

/* NudgeUP-oqkcw: task-initiation helpers ("Stuck?" + "Realistic time?"). */
.nu-step-help-field { margin-top: -4px; }
.step-edit-help-slot { display: flex; flex-wrap: wrap; gap: 8px; }
.step-edit-help-result {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--color-text, #1f2330);
}
.step-edit-help-result--err { color: var(--color-danger, #e0556e); }
.step-edit-help-result .step-help-lead { margin: 0 0 6px; font-weight: 600; }
.step-edit-help-result .step-help-list {
  margin: 0 0 8px;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-edit-help-result .step-help-list li { line-height: 1.35; }
.step-help-apply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--ai-accent, #7c5cff);
  border-radius: 999px;
  background: transparent;
  color: var(--ai-accent, #7c5cff);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  cursor: pointer;
}
.step-help-apply:hover { background: color-mix(in srgb, var(--ai-accent, #7c5cff) 12%, transparent); }

/* NudgeUP-jsx5f: ✨Coach "Suggest steps" affordance in the New Project form. */
.nu-project-suggest-field { margin-top: -4px; }
.project-suggest-coach-slot { display: inline-flex; }
.project-suggest-status {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #6b7280);
}
.project-suggest-status--err { color: var(--color-danger, #e0556e); }

/* §5 ei8ui: project color — card dot + modal swatch picker. */
.nu-project-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}
.nu-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nu-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, border-color 0.1s;
}
.nu-color-swatch:hover { transform: scale(1.08); }
.nu-color-swatch--sel {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-bg) inset;
}
.nu-color-swatch--auto {
  width: auto;
  padding: 0 10px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
}
.nu-color-swatch--auto.nu-color-swatch--sel { border-color: var(--color-text); }

/* §5 xi05d: starter-template chips in the New Project modal. */
/* §5 ku9q2: single "Start from a template" trigger (below the name field) that
   opens the bottom-sheet picker. Replaces the old always-expanded chip stack. */
.nu-template-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.1s;
}
.nu-template-trigger:hover { border-color: var(--color-primary); }
.nu-template-trigger > span { flex: 1; }
.nu-template-trigger svg { flex-shrink: 0; color: var(--color-text-muted); }
/* §5 ku9q2: dim backdrop + SOLID sheet for the project starter picker. The shared
   --color-surface is translucent on glass themes (e.g. rgba(18,10,40,0.75)), so the
   sheet must composite over an opaque base or the modal text behind bleeds through.
   z above --z-modal(200)/--z-modal-hint(8800)/--z-overlay(9000) so it sits on top. */
.nu-proj-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.5);
}
.nu-proj-template-picker {
  z-index: 9101;
  background-color: var(--color-bg);                                  /* opaque base */
  background-image: linear-gradient(var(--color-surface), var(--color-surface)); /* keep surface tint */
}
/* color dot inside a picker row title (inline, before the template name) */
.nu-template-dot {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 7px;
}

/* "(optional)" hint in modal labels */
.field-optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85em;
}

/* §5 step tag on the shared task mini-row / hero: "part of: <project> · step N of M".
   Attached only when the projects flag is on (t._proj set by loadTasks). */
.nu-step-tag {
  margin-top: 3px;
  font-family: var(--font);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nu-step-tag__label { color: var(--color-primary); font-weight: 600; }
/* Hero card sits on a dark gradient — lift the tag to a light tone for contrast. */
.nu-hero-card .nu-step-tag { font-size: 12.5px; margin-top: 4px; color: rgba(255,255,255,0.85); }
.nu-hero-card .nu-step-tag__label { color: #fff; }
/* ── end NudgeUP-ggzpd ── */

/* ── NudgeUP-1ftp4: Body-doubling / focus rooms (PAID) ──────────────────────── */
/* "Buds also focusing → Join" card on the Buds tab. */
.focus-room-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(99,102,241,0.10) 100%);
  border: 1px solid rgba(16,185,129,0.32);
  border-radius: var(--radius-lg, 14px);
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: milestone-slide-in 0.35s ease;
}
.focus-room__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.focus-room__icon { font-size: 1.25rem; line-height: 1; }
.focus-room__header strong {
  font-size: 0.9375rem;
  color: var(--color-text, #fff);
}
.focus-room__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.45;
  margin: 0 0 10px;
}
.focus-room__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.focus-room__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-success, #10b981);
  flex-shrink: 0;
  animation: focus-room-pulse 1.6s ease-in-out infinite;
}
.focus-room__who {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text, #e5e7eb);
  line-height: 1.4;
}
.focus-room__who strong { color: var(--color-text, #fff); }
.focus-room__task {
  display: block;
  font-size: 0.78125rem;
  color: var(--color-text-muted, #9ca3af);
}
.focus-room__hostrow { margin-top: 10px; }
.focus-room__host { width: 100%; }

/* Body-level live presence bar shown while co-working. */
.focus-room-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, 64px) + 12px);
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid rgba(16,185,129,0.45);
  box-shadow: 0 6px 24px rgba(0,0,0,0.30);
  font-size: 0.8125rem;
  color: var(--color-text, #e5e7eb);
}
.focus-room-bar__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-success, #10b981);
  flex-shrink: 0;
  animation: focus-room-pulse 1.6s ease-in-out infinite;
}
.focus-room-bar__avs { display: flex; }
.focus-room-bar__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary, #9B67F5);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
  border: 2px solid var(--color-surface-elevated, #1f2937);
}
.focus-room-bar__av:first-child { margin-left: 0; }
.focus-room-bar__av--more { background: var(--color-text-muted, #6b7280); }
.focus-room-bar__txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-room-bar__leave {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,0.2));
  color: var(--color-text, #e5e7eb);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.focus-room-bar__leave:hover { background: var(--color-surface, rgba(255,255,255,0.06)); }

@keyframes focus-room-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .focus-room__dot, .focus-room-bar__dot { animation: none; }
  .focus-room-card { animation: none; }
}
/* ── end NudgeUP-1ftp4 ── */

/* ═══════════════════════════════════════════════════════════════════════════
   Coach affordance + EXPLAIN layer (NudgeUP-qtrrq)
   The ONE signature "✨ Coach" look shared by every AI affordance. Uses the
   theme-independent --ai-accent tokens so the sheen is identical on all themes.
   Label text stays var(--color-text) for contrast; only the border/sparkle use
   the accent. NO modal/coachmark/tour — see the one-time shimmer below (respects
   zwh94: a gentle first-appearance shimmer, then never again).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared Coach button — DO affordances (draft / suggest / breakdown / stuck). */
.coach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ai-accent-border);
  background: var(--ai-accent-soft);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.coach-btn:hover { background: rgba(139, 92, 246, 0.18); border-color: var(--ai-accent); }
.coach-btn:active { transform: scale(0.97); }
.coach-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.coach-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* The sparkle glyph — rendered as an SVG by app.js; the accent gradient is
   applied via the .coach-btn__spark wrapper so it reads as "AI" on any theme. */
.coach-btn__spark {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--ai-accent);
  flex: 0 0 auto;
}
.coach-btn__spark svg { width: 100%; height: 100%; }

/* Smaller inline variant for use inside sheets / notes rows. */
.coach-btn--sm { padding: 5px 10px; font-size: var(--text-xs, 0.75rem); }
.coach-btn--sm .coach-btn__spark { width: 13px; height: 13px; }

/* ── One-time first-appearance shimmer (NudgeUP-qtrrq) ──
   A single, gentle sheen sweep the FIRST time a Coach button appears in a given
   context (localStorage flag set by app.js → class removed after one play).
   Then NEVER again. NOT a coachmark/tour. */
.coach-btn--shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(34, 211, 238, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: coach-shimmer 1.15s ease-out 0.25s 1 forwards;
  pointer-events: none;
}
@keyframes coach-shimmer {
  to { transform: translateX(120%); }
}

/* ── Empty-state hint (NudgeUP-qtrrq) ──
   "jot your list… or let Coach draft it" — a soft prompt that lives in an empty
   input/list area and is removed by app.js once content exists. */
.coach-empty-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--color-text-muted);
}
.coach-empty-hint .coach-empty-hint__spark { color: var(--ai-accent); display: inline-flex; width: 14px; height: 14px; }
.coach-empty-hint .coach-empty-hint__spark svg { width: 100%; height: 100%; }

/* ── EXPLAIN affordance: the tiny "what does this do?" trigger (NudgeUP-qtrrq) ──
   A small, quiet question-mark chip next to a Coach feature. Tapping it shows a
   CACHED description popover (zero AI, unlimited). Visually lighter than a
   .coach-btn so EXPLAIN reads as passive vs the active DO buttons. */
.coach-explain-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ai-accent-border);
  background: transparent;
  color: var(--ai-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.coach-explain-btn:hover { background: var(--ai-accent-soft); }
.coach-explain-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Cached-explainer popover bubble (rendered + positioned by app.js). */
.coach-explain-pop {
  position: fixed;
  z-index: var(--z-top);
  max-width: 280px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ai-accent-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-elevated);
}
.coach-explain-pop__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base, 0.9375rem);
  font-weight: 700;
  margin-bottom: 4px;
}
.coach-explain-pop__title .coach-btn__spark { width: 14px; height: 14px; }
.coach-explain-pop__body { font-size: var(--text-sm, 0.8125rem); color: var(--color-text-muted); line-height: 1.45; }
.coach-explain-pop__free {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-success);
}

/* ── Passive "What can Coach do?" reference (NudgeUP-qtrrq) ──
   Lives in Me / Coach & AI settings. Served entirely from the cached map. */
.coach-caps {
  margin-top: 14px;
  border: 1px solid var(--ai-accent-border);
  border-radius: var(--radius-md);
  background: var(--ai-accent-soft);
  padding: 14px;
}
.coach-caps__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-base, 0.9375rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.coach-caps__head .coach-btn__spark { width: 15px; height: 15px; }
.coach-caps__sub { font-size: var(--text-xs, 0.75rem); color: var(--color-success); font-weight: 600; margin-bottom: 10px; }
.coach-caps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.coach-caps__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; }
.coach-caps__title { font-size: var(--text-sm, 0.8125rem); font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.coach-caps__body { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted); line-height: 1.45; }

/* ADHD "First physical action" banner (NudgeUP-6x6re) — shows the single literal
   first move the user needs to make to start a task; ADHD Mode only, task modal. */
.task-first-action-banner {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary, #9B67F5) 8%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-primary, #9B67F5) 25%, transparent);
  animation: stuckNudgeIn 0.25s ease;
}
.task-first-action-banner.hidden { display: none; }
.task-first-action-banner-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary, #9B67F5);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-first-action-banner-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text, #f5f5f5);
  font-weight: 500;
}
.task-first-action-banner-loading {
  font-size: 0.82rem;
  color: var(--color-text-muted, #a8a8a8);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .coach-btn--shimmer::after { animation: none; opacity: 0; }
}
/* ── end NudgeUP-qtrrq ── */

/* ── NudgeUP-sgapn: Implementation intention prompt ─────────────────────── */
.task-intent-wrap {
  margin: 0 0 14px;
  padding: 13px 14px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent, #f5a623) 8%, var(--card-bg, rgba(255,255,255,0.04)));
  border: 1px solid color-mix(in srgb, var(--color-accent, #f5a623) 28%, transparent);
  animation: stuckNudgeIn 0.25s ease;
}
.task-intent-wrap.hidden { display: none; }
.task-intent-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.task-intent-icon {
  color: var(--color-accent, #f5a623);
  flex-shrink: 0;
}
.task-intent-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-text, #f5a623); /* NudgeUP-qbc2h a11y */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}
.task-intent-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 0.75rem;
  color: var(--color-text-muted, #a8a8a8);
  cursor: pointer;
  line-height: 1;
}
.task-intent-dismiss:hover { color: var(--color-text, #f5f5f5); }
.task-intent-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted, #a8a8a8);
  margin: 0 0 10px;
  line-height: 1.45;
}
.task-intent-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.task-intent-field {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.task-intent-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #a8a8a8);
}
.task-intent-input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--input-border, rgba(255,255,255,0.15));
  background: var(--input-bg, rgba(255,255,255,0.06));
  color: var(--color-text, #f5f5f5);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.task-intent-input:focus {
  border-color: var(--color-accent, #f5a623);
}
.task-intent-input::placeholder { color: var(--color-text-muted, #a8a8a8); }
/* ── end NudgeUP-sgapn ── */

/* ══════════════════════════════════════════════════════════════════════════
   Crisis safety card (NudgeUP-cui1w)
   A calm, full-screen overlay shown when /api/ai returns { type:'crisis' }.
   Deliberately understated — no alarm-red, no shouting. Theme-token driven so
   it reads correctly on every theme + light/dark. SVG icons only.
   ══════════════════════════════════════════════════════════════════════════ */
.crisis-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;            /* above modals/sheets/toasts */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 8, 16, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  animation: crisisFadeIn 0.18s ease-out;
}
@keyframes crisisFadeIn { from { opacity: 0; } to { opacity: 1; } }
.crisis-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: var(--color-surface, #1C1B29);
  border: 1px solid var(--color-border, #2E2D42);
  border-radius: var(--radius-lg, 20px);
  padding: 28px 22px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: crisisRise 0.22s ease-out;
}
@keyframes crisisRise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.crisis-card-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-surface-2, #252438);
  color: var(--color-accent, #f5a623);
}
.crisis-card-title {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #E8E8F0);
}
.crisis-card-body {
  margin: 0 0 20px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-muted, #8E8EA0);
}
.crisis-resources {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  text-align: left;
}
.crisis-resource {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--color-border, #2E2D42);
  border-radius: var(--radius-md, 14px);
  background: var(--color-surface-2, #252438);
  color: var(--color-text, #E8E8F0);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.1s;
}
.crisis-resource:hover,
.crisis-resource:focus-visible {
  border-color: var(--color-accent, #f5a623);
  outline: none;
}
.crisis-resource:active { transform: scale(0.99); }
.crisis-resource-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface, #1C1B29);
  color: var(--color-accent, #f5a623);
}
.crisis-resource-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.crisis-resource-label {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-text, #E8E8F0);
}
.crisis-resource-note {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text-muted, #8E8EA0);
}
.crisis-card-exit {
  display: inline-block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--radius-md, 14px);
  background: var(--color-surface-2, #252438);
  color: var(--color-text, #E8E8F0);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.crisis-card-exit:hover,
.crisis-card-exit:focus-visible {
  background: var(--color-border, #2E2D42);
  outline: none;
}
/* ── end NudgeUP-cui1w ── */

/* ── NudgeUP-70jdw: bud-card overflow (⋯) menu ──────────────────────────────
   Redesign-only secondary-action popover. Mirrors the .cal-add-popover pattern.
   Anchored to a position:relative wrapper inside .bud-info; .bud-card has no
   overflow/contain/content-visibility, so the absolute popover is never clipped. */
.bud-overflow {
  position: relative;
  display: inline-flex;
}
.bud-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  background: var(--color-surface-2, rgba(127,127,127,0.08));
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), transform 0.1s;
}
.bud-overflow-btn:hover,
.bud-overflow-btn:focus-visible { background: var(--color-surface-2, rgba(127,127,127,0.14)); color: var(--color-text); }
.bud-overflow-btn:active { transform: scale(0.97); }
.bud-overflow-btn[aria-expanded="true"] { background: var(--color-surface-2, rgba(127,127,127,0.16)); color: var(--color-text); }

.bud-overflow-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-modal, 200);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-surface), var(--color-surface));
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.bud-overflow-popover.hidden { display: none; }
/* Items reuse the existing .btn-send-motivation / .btn-bud-commit styles; just
   make them full-width menu rows with comfortable tap targets. */
.bud-overflow-popover .btn-send-motivation,
.bud-overflow-popover .btn-bud-commit {
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .bud-overflow-btn { transition: none; }
  .bud-overflow-btn:active { transform: none; }
}