/* ============================================================
   Tasktracker V2 — Edgy Cockpit Design System
   ============================================================ */

/* ─── Custom Properties ──────────────────────────────────── */
:root {
    /* Base palette — dark mode (default) */
    --bg-root: #0B1120;
    --bg-surface: #151C2C;
    --bg-elevated: #1A2235;
    --bg-input: #0F1629;
    --border-subtle: rgba(255,255,255,0.1);
    --border-focus: #FF6B2C;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #475569;

    /* Accent colours */
    --accent-orange: #FF6B2C;
    --accent-coral: #FF6B6B;
    --accent-green: #AAFF00;
    --accent-gold: #FBBF24;
    --accent-blue: #60A5FA;
    --accent-pink: #F472B6;
    --accent-lavender: #A78BFA;

    /* Computed */
    --btn-primary-bg: #FF6B2C;
    --gradient-brand: linear-gradient(135deg, #FF6B2C 0%, #AAFF00 100%);
    --shadow-glow: 0 0 30px rgba(255, 107, 44, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);

    /* Radii — sharp corners */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-pill: 28px;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-med: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Type scale */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Theme 2: Mission Control ───────────────────────────── */
[data-theme="mission-control"] {
    --bg-root: #0a0a0a;
    --bg-surface: #0f0f1a;
    --bg-elevated: #1a1a2e;
    --bg-input: #050505;
    --border-subtle: #33ff33;
    --border-focus: #ffb000;
    --text-primary: #33ff33;
    --text-secondary: #22aa22;
    --text-muted: #116611;
    --accent-orange: #ffb000;
    --accent-coral: #ff3333;
    --accent-green: #33ff33;
    --accent-gold: #ffb000;
    --accent-blue: #33ff33;
    --accent-pink: #ffb000;
    --accent-lavender: #116611;
    --btn-primary-bg: #ffb000;
    --gradient-brand: linear-gradient(135deg, #ffb000 0%, #33ff33 100%);
    --shadow-glow: 0 0 30px rgba(51, 255, 51, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px;
    --font-theme: 'Courier New', monospace;
}

/* ─── Theme 3: Neon Rapture ─────────────────────────────── */
[data-theme="neon-rapture"] {
    --bg-root: #0a0812;
    --bg-surface: #110e1a;
    --bg-elevated: #1a1528;
    --bg-input: #08060e;
    --border-subtle: #2a1a3a;
    --border-focus: #ff2d6f;
    --text-primary: #e0d4f5;
    --text-secondary: #9b8ec4;
    --text-muted: #5a4d7a;
    --accent-orange: #ff2d6f;
    --accent-coral: #ff1744;
    --accent-green: #00e5ff;
    --accent-gold: #ffc400;
    --accent-blue: #00e5ff;
    --accent-pink: #ff2d6f;
    --accent-lavender: #9b8ec4;
    --btn-primary-bg: #ff2d6f;
    --gradient-brand: linear-gradient(135deg, #ff2d6f 0%, #00e5ff 100%);
    --shadow-glow: 0 0 30px rgba(255, 45, 111, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px; --radius-pill: 4px;
}

/* ─── Theme 4: Sunset Cove ──────────────────────────────── */
[data-theme="sunset-cove"] {
    --bg-root: #1a0e1e;
    --bg-surface: #241530;
    --bg-elevated: #2e1a3a;
    --bg-input: #150a1a;
    --border-subtle: rgba(255,170,100,0.25);
    --border-focus: #ff6b9d;
    --text-primary: #ffeedd;
    --text-secondary: #e8b89a;
    --text-muted: #8a6a5a;
    --accent-orange: #ff6b9d;
    --accent-coral: #ff5555;
    --accent-green: #ffaa44;
    --accent-gold: #ffcc00;
    --accent-blue: #e8b89a;
    --accent-pink: #ff6b9d;
    --accent-lavender: #d4a0c0;
    --btn-primary-bg: #ff6b9d;
    --gradient-brand: linear-gradient(135deg, #ff6b9d 0%, #ffaa44 100%);
    --shadow-glow: 0 0 30px rgba(255, 107, 157, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 28px;
}

/* ─── Theme 5: Interphase ───────────────────────────────── */
[data-theme="interphase"] {
    --bg-root: #06070c;
    --bg-surface: #0a0c14;
    --bg-elevated: #111320;
    --bg-input: #0e1020;
    --border-subtle: rgba(255,255,255,.06);
    --border-focus: #6366f1;
    --text-primary: #c8cad8;
    --text-secondary: #8a8da0;
    --text-muted: #565870;
    --accent-orange: #6366f1;
    --accent-coral: #f87171;
    --accent-green: #34d399;
    --accent-gold: #f59e0b;
    --accent-blue: #6366f1;
    --accent-pink: #a78bfa;
    --accent-lavender: #818cf8;
    --btn-primary-bg: #6366f1;
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #34d399 100%);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 14px; --radius-pill: 28px;
    --font-theme: 'Quicksand', sans-serif;
}

/* ─── Theme 6: Inferno ──────────────────────────────────── */
[data-theme="inferno"] {
    --bg-root: #0c0404;
    --bg-surface: #1a0808;
    --bg-elevated: #261010;
    --bg-input: #0a0202;
    --border-subtle: rgba(255, 120, 20, 0.3);
    --border-focus: #ff4400;
    --text-primary: #ffe8d0;
    --text-secondary: #e8a87c;
    --text-muted: #7a4a30;
    --accent-orange: #ff4400;
    --accent-coral: #ff2222;
    --accent-green: #ffcc00;
    --accent-gold: #ffaa00;
    --accent-blue: #ffcc00;
    --accent-pink: #ff4400;
    --accent-lavender: #cc3300;
    --btn-primary-bg: #ff4400;
    --gradient-brand: linear-gradient(135deg, #ff4400 0%, #ffcc00 100%);
    --shadow-glow: 0 0 30px rgba(255, 68, 0, 0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 2px; --radius-md: 3px; --radius-lg: 6px; --radius-pill: 28px;
    --ember: #ff6600;
    --flame-orange: #ff8800;
    --flame-yellow: #ffdd44;
    --flame-red: #dd2200;
    --ash: #4a3828;
}

/* ─── Theme 7: Snow Storm (Light) ───────────────────────── */
[data-theme="snow-storm"] {
    --bg-root: #e8eef4;
    --bg-surface: #f0f4f8;
    --bg-elevated: #ffffff;
    --bg-input: #f5f8fb;
    --border-subtle: rgba(100,140,180,.2);
    --border-focus: #3b82f6;
    --text-primary: #1a2a3a;
    --text-secondary: #4a6070;
    --text-muted: #8a9aaa;
    --accent-orange: #3b82f6;
    --accent-coral: #ef4444;
    --accent-green: #06b6d4;
    --accent-gold: #f59e0b;
    --accent-blue: #3b82f6;
    --accent-pink: #ec4899;
    --accent-lavender: #8b5cf6;
    --btn-primary-bg: #3b82f6;
    --gradient-brand: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.1);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.12);
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 28px;
    --font-theme: 'Quicksand', sans-serif;
}

/* ─── Theme 8: Winamp ───────────────────────────────────── */
[data-theme="winamp"] {
    --bg-root: #1a1a2e;
    --bg-surface: #222240;
    --bg-elevated: #2a2a48;
    --bg-input: #16162a;
    --border-subtle: rgba(80,80,120,.4);
    --border-focus: #00ff00;
    --text-primary: #c8d8c0;
    --text-secondary: #88a080;
    --text-muted: #556050;
    --accent-orange: #00ff00;
    --accent-coral: #ff3333;
    --accent-green: #ffcc00;
    --accent-gold: #ffaa00;
    --accent-blue: #ffcc00;
    --accent-pink: #00ff00;
    --accent-lavender: #33cc33;
    --btn-primary-bg: #00ff00;
    --gradient-brand: linear-gradient(135deg, #00ff00 0%, #ffcc00 100%);
    --shadow-glow: 0 0 30px rgba(0, 255, 0, 0.12);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.5);
    --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px; --radius-pill: 4px;
    --font-theme: 'Courier New', monospace;
}

/* ─── Theme 9: Forest Walk (Light) ─────────────────────── */
[data-theme="forest-walk"] {
    --bg-root: #f5f0e8;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #f8f5ef;
    --border-subtle: rgba(120, 160, 80, 0.2);
    --border-focus: #7cb342;
    --text-primary: #1a2e1a;
    --text-secondary: #4a6040;
    --text-muted: #7a8a6a;
    --accent-orange: #7cb342;
    --accent-coral: #ef5350;
    --accent-green: #a5d6a7;
    --accent-gold: #c8a951;
    --accent-blue: #4db6ac;
    --accent-pink: #ef5350;
    --accent-lavender: #8bc34a;
    --btn-primary-bg: #7cb342;
    --gradient-brand: linear-gradient(135deg, #7cb342 0%, #a5d6a7 100%);
    --shadow-glow: 0 0 30px rgba(124, 179, 66, 0.08);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.12);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 28px;
    --font-theme: 'Quicksand', sans-serif;
}

/* ─── Theme 10: Autumn Picnic (Light) ──────────────────── */
[data-theme="autumn-picnic"] {
    --bg-root: #faf5ef;
    --bg-surface: #fffdf8;
    --bg-elevated: #ffffff;
    --bg-input: #f8f3eb;
    --border-subtle: rgba(200, 140, 60, 0.2);
    --border-focus: #e65100;
    --text-primary: #3a2a1a;
    --text-secondary: #6a5540;
    --text-muted: #9a8a7a;
    --accent-orange: #e65100;
    --accent-coral: #d32f2f;
    --accent-green: #ff8f00;
    --accent-gold: #d4a037;
    --accent-blue: #8d6e63;
    --accent-pink: #e65100;
    --accent-lavender: #8d6e63;
    --btn-primary-bg: #e65100;
    --gradient-brand: linear-gradient(135deg, #e65100 0%, #d4a037 100%);
    --shadow-glow: 0 0 30px rgba(230, 81, 0, 0.08);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.12);
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 28px;
    --font-theme: 'Quicksand', sans-serif;
}

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

body {
    font-family: var(--font-theme, var(--font-sans));
    background: var(--bg-root);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── Noise + Scanline Texture ───────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.008) 2px,
            rgba(255,255,255,0.008) 3px
        ),
        repeating-radial-gradient(
            circle at 47% 53%,
            rgba(255,255,255,0.015) 0px,
            transparent 1px,
            transparent 3px,
            rgba(255,255,255,0.01) 4px
        );
}

/* ─── Theme Effects: body::before overrides ─────────────── */

/* Mission Control: CRT scanlines */
[data-theme="mission-control"] body::before {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px),
        radial-gradient(circle, rgba(51,255,51,0.03) 1px, transparent 1px);
    background-size: 100% 3px, 4px 4px;
    animation: crt-flicker 0.08s infinite;
}
[data-theme="mission-control"] { animation: boot-glow 0.8s ease-out; }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.97; } }
@keyframes boot-glow { from { filter: brightness(2); } to { filter: brightness(1); } }
[data-theme="mission-control"] .nav-brand-text {
    text-shadow: 0 0 8px rgba(51,255,51,0.6), 0 0 20px rgba(51,255,51,0.3);
    animation: mc-text-glow 2s ease-in-out infinite;
}
@keyframes mc-text-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(51,255,51,0.6), 0 0 20px rgba(51,255,51,0.3); }
    50% { text-shadow: 0 0 12px rgba(51,255,51,0.8), 0 0 30px rgba(51,255,51,0.5); }
}

/* Neon Rapture: art deco pinstripe + neon glow */
[data-theme="neon-rapture"] body::before {
    background:
        repeating-linear-gradient(0deg,
            rgba(201,164,78,0.06) 0px, rgba(201,164,78,0.06) 1px,
            transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg,
            rgba(201,164,78,0.02) 0px, rgba(201,164,78,0.02) 1px,
            transparent 1px, transparent 60px);
    animation: neon-flicker 4s ease-in-out infinite;
}
@keyframes neon-flicker {
    0%, 100% { opacity: 0.8; }
    10% { opacity: 0.85; }
    12% { opacity: 0.4; }
    14% { opacity: 0.9; }
    50% { opacity: 0.8; }
    72% { opacity: 0.6; }
    74% { opacity: 0.9; }
}
[data-theme="neon-rapture"] .nav-brand-text {
    text-shadow: 0 0 10px rgba(255,45,111,0.6), 0 0 30px rgba(255,45,111,0.3);
    animation: neon-brand-pulse 3s ease-in-out infinite;
}
@keyframes neon-brand-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(255,45,111,0.6), 0 0 30px rgba(255,45,111,0.3); }
    50% { text-shadow: 0 0 15px rgba(255,45,111,0.8), 0 0 40px rgba(255,45,111,0.5), 0 0 60px rgba(0,229,255,0.2); }
}
[data-theme="neon-rapture"] .nav-bar {
    border-bottom: none;
    box-shadow: 0 2px 0 0 #ffc400, 0 3px 0 0 #ff2d6f, 0 4px 0 0 #00e5ff, 0 4px 15px rgba(255,45,111,0.3);
}

/* Sunset Cove: warm sky gradient + lens flare + shimmer text */
[data-theme="sunset-cove"] body::before {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,107,157,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 10%, rgba(255,170,68,0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 5%, rgba(255,204,0,0.08) 0%, transparent 45%);
}
[data-theme="sunset-cove"] .nav-brand-text {
    background: linear-gradient(90deg, #ff6b9d, #ffaa44, #ffcc00, #ff6b9d);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 4s linear infinite;
}
@keyframes shimmer-text { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes wave-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
[data-theme="sunset-cove"] .logo-mark { animation: wave-bob 3s ease-in-out infinite; }

/* Sunset Cove lens flare system */
.sunset-flare { display: none; }
[data-theme="sunset-cove"] .sunset-flare {
    display: block;
    position: fixed;
    top: 5%;
    left: 15%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,204,0,0.5) 0%, rgba(255,170,68,0.2) 40%, transparent 70%);
    box-shadow:
        0 0 60px 30px rgba(255,204,0,0.2),
        0 0 120px 60px rgba(255,170,68,0.12),
        0 0 180px 90px rgba(255,107,157,0.06);
    pointer-events: none;
    z-index: 0;
    animation: flare-drift 8s ease-in-out infinite;
}
@keyframes flare-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(-20px, 10px) scale(1.1); opacity: 1; }
}

/* Interphase: deep space + starfield + nebula */
[data-theme="interphase"] body {
    background-image: linear-gradient(135deg, #06070c 0%, #0d0f1a 25%, #06070c 50%, #0a0e1c 75%, #06070c 100%);
    background-size: 400% 400%;
    animation: nebulaShift 30s ease-in-out infinite;
}
@keyframes nebulaShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
[data-theme="interphase"] body::before {
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 65%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 90%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 95%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 5%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 5% 70%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,0.6) 0%, transparent 100%);
    animation: twinkle 8s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
[data-theme="interphase"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        /* Milky way diagonal band */
        linear-gradient(
            135deg,
            transparent 30%,
            rgba(99,102,241,0.04) 38%,
            rgba(150,140,200,0.06) 45%,
            rgba(200,190,230,0.05) 50%,
            rgba(150,140,200,0.06) 55%,
            rgba(52,211,153,0.04) 62%,
            transparent 70%
        ),
        /* Existing nebula blobs */
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(52,211,153,0.06) 0%, transparent 50%);
    animation: blobDrift 25s ease-in-out infinite;
}
@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -20px); }
    66% { transform: translate(-20px, 15px); }
}

/* Inferno: fire glow + flame effects */
[data-theme="inferno"] body::before {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255,68,0,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 95%, rgba(221,34,0,0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 100%, rgba(255,136,0,0.12) 0%, transparent 45%);
    animation: heatDistortion 6s ease-in-out infinite;
}
@keyframes heatDistortion {
    0%, 100% { filter: blur(0px); opacity: 1; }
    50% { filter: blur(0.5px); opacity: 0.9; }
}
[data-theme="inferno"] { animation: boot-ignite 0.8s ease-out; }
@keyframes boot-ignite { from { filter: brightness(2) saturate(2); } to { filter: brightness(1) saturate(1); } }
[data-theme="inferno"] .nav-brand-text {
    background: linear-gradient(90deg, #ff4400, #ffcc00, #ff8800, #ff4400);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-fire 3s linear infinite;
}
@keyframes shimmer-fire { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fire-text-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(255,68,0,0.6), 0 0 20px rgba(255,68,0,0.3); }
    50% { text-shadow: 0 0 12px rgba(255,68,0,0.8), 0 0 30px rgba(221,34,0,0.5); }
}
[data-theme="inferno"] .nav-bar {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #dd2200, #ff4400, #ff8800, #ffdd44, #ff8800, #ff4400, #dd2200) 1;
    animation: flame-flicker 2s ease-in-out infinite;
}
@keyframes flame-flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.92; }
    50% { opacity: 1; }
    75% { opacity: 0.95; }
}
[data-theme="inferno"] .card,
[data-theme="inferno"] .list-card,
[data-theme="inferno"] .task-card {
    border: 1px solid rgba(255,68,0,0.15);
    animation: fire-glow-edge 4s ease-in-out infinite;
}
@keyframes fire-glow-edge {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255,68,0,0.05), 0 4px 12px rgba(255,68,0,0.08);
        border-color: rgba(255,68,0,0.15);
    }
    50% {
        box-shadow: 0 0 15px rgba(255,68,0,0.12), 0 4px 20px rgba(255,68,0,0.18), 0 0 4px rgba(255,204,0,0.06);
        border-color: rgba(255,68,0,0.25);
    }
}

/* Snow Storm: falling snow + frost + ice shimmer */
[data-theme="snow-storm"] body::before {
    background:
        radial-gradient(3px 3px at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 25% 45%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(3px 3px at 40% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(3px 3px at 70% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(3px 3px at 90% 10%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(3px 3px at 50% 90%, rgba(255,255,255,0.8) 0%, transparent 100%);
    background-size: 100% 200%;
    animation: snowDrift 20s linear infinite;
}
@keyframes snowDrift { from { background-position: 0 0; } to { background-position: 0 200%; } }
[data-theme="snow-storm"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(59,130,246,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(6,182,212,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(59,130,246,0.04) 0%, transparent 35%);
    animation: frostPulse 6s ease-in-out infinite;
}
@keyframes frostPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } }
[data-theme="snow-storm"] .nav-brand-text {
    background: linear-gradient(90deg, #3b82f6, #93c5fd, #06b6d4, #3b82f6);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: iceShimmer 5s linear infinite;
}
@keyframes iceShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Winamp: ridged metallic + VU meter + LCD scroll */
[data-theme="winamp"] body::before {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
        linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.15) 100%);
}
[data-theme="winamp"] .nav-bar {
    background: linear-gradient(180deg, #3a3a5e, #2a2a48, #222240);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #003300, #00ff00, #00ff00, #003300) 1;
}
[data-theme="winamp"] .nav-brand-text {
    text-shadow: 0 0 8px rgba(0,255,0,0.6), 0 0 20px rgba(0,255,0,0.3);
    animation: lcdScroll 8s linear infinite;
}
@keyframes lcdScroll {
    0% { transform: translateX(0); }
    45% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
    55% { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@keyframes vuMeter {
    0%, 100% { background-size: 100% 100%; }
    50% { background-size: 100% 80%; }
}

/* Forest Walk: dappled sunlight + leaf shadows + gentle breathe */
[data-theme="forest-walk"] body::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(200,180,100,0.12) 0%, transparent 25%),
        radial-gradient(circle at 60% 15%, rgba(180,200,80,0.08) 0%, transparent 20%),
        radial-gradient(circle at 80% 45%, rgba(200,180,100,0.10) 0%, transparent 30%),
        radial-gradient(circle at 40% 70%, rgba(160,190,80,0.08) 0%, transparent 25%),
        radial-gradient(circle at 10% 80%, rgba(200,180,100,0.06) 0%, transparent 20%),
        radial-gradient(circle at 90% 20%, rgba(180,200,80,0.10) 0%, transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(200,180,100,0.14) 0%, transparent 35%);
    animation: dappled-sway 25s ease-in-out infinite;
}
@keyframes dappled-sway {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 30px -20px; }
}
[data-theme="forest-walk"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(8px 12px at 15% 10%, rgba(60,80,30,0.06) 0%, transparent 100%),
        radial-gradient(10px 8px at 35% 25%, rgba(60,80,30,0.05) 0%, transparent 100%),
        radial-gradient(8px 12px at 55% 5%, rgba(80,100,40,0.04) 0%, transparent 100%),
        radial-gradient(10px 8px at 75% 20%, rgba(60,80,30,0.06) 0%, transparent 100%),
        radial-gradient(8px 12px at 90% 15%, rgba(80,100,40,0.05) 0%, transparent 100%),
        radial-gradient(10px 8px at 50% 30%, rgba(60,80,30,0.04) 0%, transparent 100%);
    background-size: 100% 200%;
    animation: leaf-shadow-drift 30s linear infinite;
}
@keyframes leaf-shadow-drift { from { background-position: 0 0; } to { background-position: 50px 200%; } }
[data-theme="forest-walk"] .nav-brand-text {
    color: #1a2e1a;
    text-shadow: 0 1px 2px rgba(124,179,66,0.2);
    -webkit-text-fill-color: initial;
    background: none;
    animation: none;
}
[data-theme="forest-walk"] .card,
[data-theme="forest-walk"] .list-card {
    animation: forest-breathe 6s ease-in-out infinite;
}
@keyframes forest-breathe {
    0%, 100% { box-shadow: 0 4px 16px rgba(124,179,66,0.04); }
    50% { box-shadow: 0 4px 20px rgba(124,179,66,0.08); }
}

/* Autumn Picnic: golden hour + floating leaves + warm glow */
[data-theme="autumn-picnic"] body {
    background: var(--bg-root);
}
[data-theme="autumn-picnic"] body::before {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(230,160,50,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 10%, rgba(210,140,40,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 5%, rgba(230,160,50,0.06) 0%, transparent 45%);
    animation: golden-hour 20s ease-in-out infinite;
}
@keyframes golden-hour {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
[data-theme="autumn-picnic"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(6px 8px at 12% 15%, rgba(180,80,0,0.08) 0%, transparent 100%),
        radial-gradient(8px 6px at 28% 30%, rgba(200,140,30,0.06) 0%, transparent 100%),
        radial-gradient(5px 7px at 48% 10%, rgba(160,60,0,0.05) 0%, transparent 100%),
        radial-gradient(7px 5px at 62% 25%, rgba(180,80,0,0.07) 0%, transparent 100%),
        radial-gradient(6px 8px at 78% 8%, rgba(200,140,30,0.06) 0%, transparent 100%),
        radial-gradient(8px 6px at 88% 22%, rgba(160,90,30,0.05) 0%, transparent 100%);
    background-size: 100% 200%;
    animation: autumn-leaf-float 35s linear infinite;
}
@keyframes autumn-leaf-float { from { background-position: 0 0; } to { background-position: 40px 200%; } }
[data-theme="autumn-picnic"] .nav-brand-text {
    color: #3a2a1a;
    text-shadow: 0 1px 2px rgba(230,81,0,0.2);
    -webkit-text-fill-color: initial;
    background: none;
    animation: none;
}
[data-theme="autumn-picnic"] .card,
[data-theme="autumn-picnic"] .list-card {
    animation: autumn-warmth 5s ease-in-out infinite;
}
@keyframes autumn-warmth {
    0%, 100% { box-shadow: 0 4px 16px rgba(230,81,0,0.04); }
    50% { box-shadow: 0 4px 20px rgba(230,81,0,0.08); }
}

/* ═══════════════════════════════════════════════════════════
   Midnight Veil (Dark Art Deco)
   ═══════════════════════════════════════════════════════════ */
[data-theme="midnight-veil"] {
    --bg-root: #0d0b10;
    --bg-surface: #13101a;
    --bg-elevated: #1a1522;
    --bg-input: #0a080e;
    --border-subtle: rgba(212, 165, 116, 0.15);
    --border-focus: #d4a574;
    --text-primary: #f5efe6;
    --text-secondary: #c8b8a0;
    --text-muted: #6a5a4a;
    --accent-orange: #d4a574;
    --accent-coral: #8b3d5e;
    --accent-green: #c9a96e;
    --accent-gold: #e8c87a;
    --accent-blue: #b8766a;
    --accent-pink: #6b2d3e;
    --accent-lavender: #6a3080;
    --btn-primary-bg: #d4a574;
    --gradient-brand: linear-gradient(135deg, #d4a574 0%, #6b2d3e 100%);
    --shadow-glow: 0 0 30px rgba(212, 165, 116, 0.12);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.6);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-pill: 28px;
    --font-theme: 'Cormorant Garamond', Georgia, serif;

    /* Art Deco custom tokens */
    --deco-gold: #d4a574;
    --deco-gold-bright: #e8c87a;
    --deco-burgundy: #6b2d3e;
    --deco-amethyst: #4a2060;
    --deco-rose: #b8766a;
    --deco-display: 'Poiret One', 'Century Gothic', sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   Gilded Veil (Light Art Deco)
   ═══════════════════════════════════════════════════════════ */
[data-theme="gilded-veil"] {
    --bg-root: #f5f0e8;
    --bg-surface: #faf5ef;
    --bg-elevated: #ffffff;
    --bg-input: #ebe3d5;
    --border-subtle: rgba(201, 169, 110, 0.3);
    --border-focus: #b8935a;
    --text-primary: #1a1520;
    --text-secondary: #4a3a30;
    --text-muted: #8a7a6a;
    --accent-orange: #b8935a;
    --accent-coral: #7a2040;
    --accent-green: #c9a96e;
    --accent-gold: #d4a574;
    --accent-blue: #8b4060;
    --accent-pink: #6a3080;
    --accent-lavender: #5a2070;
    --btn-primary-bg: #b8935a;
    --gradient-brand: linear-gradient(135deg, #b8935a 0%, #7a2040 100%);
    --shadow-glow: 0 0 30px rgba(184, 147, 90, 0.1);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-overlay: 0 25px 60px rgba(0,0,0,0.15);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-pill: 28px;
    --font-theme: 'Cormorant Garamond', Georgia, serif;

    /* Art Deco custom tokens */
    --deco-gold: #c9a96e;
    --deco-gold-bright: #d4a574;
    --deco-burgundy: #7a2040;
    --deco-amethyst: #5a2070;
    --deco-rose: #e8d0d0;
    --deco-display: 'Poiret One', 'Century Gothic', sans-serif;
}

/* ─── Art Deco Atmospheric Effects ──────────────────────── */

/* Midnight Veil: dense chevron texture + gold dust */
[data-theme="midnight-veil"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            60deg, transparent, transparent 30px,
            rgba(212, 165, 116, 0.025) 30px, rgba(212, 165, 116, 0.025) 31px
        ),
        repeating-linear-gradient(
            -60deg, transparent, transparent 30px,
            rgba(212, 165, 116, 0.025) 30px, rgba(212, 165, 116, 0.025) 31px
        ),
        repeating-linear-gradient(
            90deg, transparent, transparent 120px,
            rgba(212, 165, 116, 0.015) 120px, rgba(212, 165, 116, 0.015) 121px
        ),
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 116, 0.08) 0%, transparent 50%);
}

[data-theme="midnight-veil"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        conic-gradient(
            from 250deg at 50% -5%,
            transparent 0deg, rgba(212,165,116,0.04) 3deg,
            transparent 6deg, rgba(212,165,116,0.03) 9deg,
            transparent 12deg, rgba(212,165,116,0.04) 15deg,
            transparent 18deg, rgba(212,165,116,0.03) 21deg,
            transparent 24deg, rgba(212,165,116,0.04) 27deg,
            transparent 30deg, rgba(212,165,116,0.03) 33deg,
            transparent 36deg, rgba(212,165,116,0.04) 39deg,
            transparent 42deg, rgba(212,165,116,0.03) 45deg,
            transparent 48deg, rgba(212,165,116,0.04) 51deg,
            transparent 54deg, rgba(212,165,116,0.03) 57deg,
            transparent 60deg, rgba(107,45,62,0.04) 63deg,
            transparent 66deg, rgba(74,32,96,0.03) 69deg,
            transparent 72deg
        ),
        radial-gradient(ellipse at 0% 100%, rgba(74, 32, 96, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(107, 45, 62, 0.08) 0%, transparent 40%);
    animation: decoRayPulse 12s ease-in-out infinite;
}

@keyframes decoRayPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Gilded Veil: warm ivory with gold geometric accents */
[data-theme="gilded-veil"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            60deg, transparent, transparent 40px,
            rgba(201, 169, 110, 0.04) 40px, rgba(201, 169, 110, 0.04) 41px
        ),
        repeating-linear-gradient(
            -60deg, transparent, transparent 40px,
            rgba(201, 169, 110, 0.04) 40px, rgba(201, 169, 110, 0.04) 41px
        ),
        repeating-linear-gradient(
            90deg, transparent, transparent 120px,
            rgba(201, 169, 110, 0.025) 120px, rgba(201, 169, 110, 0.025) 121px
        );
}

[data-theme="gilded-veil"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        conic-gradient(
            from 250deg at 50% -5%,
            transparent 0deg, rgba(201,169,110,0.05) 3deg,
            transparent 6deg, rgba(201,169,110,0.04) 9deg,
            transparent 12deg, rgba(201,169,110,0.05) 15deg,
            transparent 18deg, rgba(201,169,110,0.04) 21deg,
            transparent 24deg, rgba(201,169,110,0.05) 27deg,
            transparent 30deg, rgba(201,169,110,0.04) 33deg,
            transparent 36deg, rgba(201,169,110,0.05) 39deg,
            transparent 42deg, rgba(201,169,110,0.04) 45deg,
            transparent 48deg, rgba(201,169,110,0.05) 51deg,
            transparent 54deg, rgba(201,169,110,0.04) 57deg,
            transparent 60deg, rgba(122,32,64,0.04) 63deg,
            transparent 66deg
        ),
        radial-gradient(ellipse at 0% 100%, rgba(232, 208, 208, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 40%);
    animation: decoRayPulseLight 12s ease-in-out infinite;
}

@keyframes decoRayPulseLight {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Nav brand shimmer — Midnight Veil */
[data-theme="midnight-veil"] .nav-brand-text {
    background: linear-gradient(90deg, #d4a574, #e8c87a, #f5efe6, #e8c87a, #d4a574);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 5s linear infinite;
}

/* Nav brand shimmer — Gilded Veil */
[data-theme="gilded-veil"] .nav-brand-text {
    background: linear-gradient(90deg, #7a2040, #b8935a, #d4a574, #b8935a, #7a2040);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 5s linear infinite;
}

@keyframes goldShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Card gold glow on hover */
[data-theme="midnight-veil"] .card:hover,
[data-theme="midnight-veil"] .list-card:hover,
[data-theme="midnight-veil"] .task-card:hover {
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.15), 0 4px 20px rgba(0,0,0,0.3);
    border-color: rgba(212, 165, 116, 0.3);
}

/* Nav bar Art Deco gold accent line */
[data-theme="midnight-veil"] .nav-bar {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent 5%, #4a2060, #6b2d3e, #d4a574, #e8c87a, #d4a574, #6b2d3e, #4a2060, transparent 95%) 1;
}

[data-theme="gilded-veil"] .nav-bar {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent 5%, #e8d0d0, #7a2040, #b8935a, #c9a96e, #b8935a, #7a2040, #e8d0d0, transparent 95%) 1;
}

/* Art Deco display font for headings */
[data-theme="midnight-veil"] h1,
[data-theme="midnight-veil"] h2,
[data-theme="midnight-veil"] .nav-brand-text,
[data-theme="midnight-veil"] .dashboard-greeting,
[data-theme="midnight-veil"] .modal-title,
[data-theme="midnight-veil"] .welcome-hero h1,
[data-theme="midnight-veil"] .welcome-hero h2 {
    font-family: var(--deco-display);
    letter-spacing: 3px;
}

[data-theme="gilded-veil"] h1,
[data-theme="gilded-veil"] h2,
[data-theme="gilded-veil"] .nav-brand-text,
[data-theme="gilded-veil"] .dashboard-greeting,
[data-theme="gilded-veil"] .modal-title,
[data-theme="gilded-veil"] .welcome-hero h1,
[data-theme="gilded-veil"] .welcome-hero h2 {
    font-family: var(--deco-display);
    letter-spacing: 3px;
}

/* ─── Art Deco Geometric Treatments (Midnight & Gilded Veil) ─── */

/* 1. Stepped pyramid corner ornaments on cards */
[data-theme="midnight-veil"] .stat-card,
[data-theme="midnight-veil"] .list-card,
[data-theme="midnight-veil"] .dash-note-card,
[data-theme="midnight-veil"] .modal-card {
    position: relative;
}
[data-theme="midnight-veil"] .stat-card::before,
[data-theme="midnight-veil"] .list-card::before,
[data-theme="midnight-veil"] .dash-note-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px;
    border-top: 1px solid rgba(212,165,116,0.35); border-left: 1px solid rgba(212,165,116,0.35);
    pointer-events: none; z-index: 2;
}
[data-theme="midnight-veil"] .stat-card::after,
[data-theme="midnight-veil"] .list-card::after,
[data-theme="midnight-veil"] .dash-note-card::after {
    content: ''; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px;
    border-bottom: 1px solid rgba(212,165,116,0.35); border-right: 1px solid rgba(212,165,116,0.35);
    pointer-events: none; z-index: 2;
}
[data-theme="gilded-veil"] .stat-card::before,
[data-theme="gilded-veil"] .list-card::before,
[data-theme="gilded-veil"] .dash-note-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px;
    border-top: 1px solid rgba(201,169,110,0.4); border-left: 1px solid rgba(201,169,110,0.4);
    pointer-events: none; z-index: 2;
}
[data-theme="gilded-veil"] .stat-card::after,
[data-theme="gilded-veil"] .list-card::after,
[data-theme="gilded-veil"] .dash-note-card::after {
    content: ''; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px;
    border-bottom: 1px solid rgba(201,169,110,0.4); border-right: 1px solid rgba(201,169,110,0.4);
    pointer-events: none; z-index: 2;
}

/* 2. Diamond-shaped checkboxes */
[data-theme="midnight-veil"] .task-checkbox,
[data-theme="gilded-veil"] .task-checkbox {
    border-radius: 0;
    transform: rotate(45deg);
    width: 16px; height: 16px;
}
[data-theme="midnight-veil"] .task-checkbox.done::after,
[data-theme="gilded-veil"] .task-checkbox.done::after {
    transform: rotate(-45deg) translate(1px, -1px);
}
[data-theme="midnight-veil"] .task-checkbox { border-color: rgba(212,165,116,0.4); }
[data-theme="midnight-veil"] .task-checkbox:hover { border-color: var(--deco-gold); box-shadow: 0 0 8px rgba(212,165,116,0.2); }
[data-theme="midnight-veil"] .task-checkbox.done { background: var(--deco-gold); border-color: var(--deco-gold); }
[data-theme="gilded-veil"] .task-checkbox { border-color: rgba(201,169,110,0.5); }
[data-theme="gilded-veil"] .task-checkbox:hover { border-color: var(--deco-gold); box-shadow: 0 0 8px rgba(201,169,110,0.2); }
[data-theme="gilded-veil"] .task-checkbox.done { background: var(--deco-gold); border-color: var(--deco-gold); }

/* 3. Gold line framing on card tops */
[data-theme="midnight-veil"] .stat-card,
[data-theme="midnight-veil"] .list-card,
[data-theme="midnight-veil"] .dash-note-card {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 5%, var(--deco-amethyst), var(--deco-gold), var(--deco-amethyst), transparent 95%) 1;
    border-image-slice: 1 0 0 0;
}
[data-theme="gilded-veil"] .stat-card,
[data-theme="gilded-veil"] .list-card,
[data-theme="gilded-veil"] .dash-note-card {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 5%, var(--deco-rose), var(--deco-gold), var(--deco-rose), transparent 95%) 1;
    border-image-slice: 1 0 0 0;
}

/* 4. Chevron pattern on nav bar */
[data-theme="midnight-veil"] .nav-bar::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        repeating-linear-gradient(60deg, transparent, transparent 20px, rgba(212,165,116,0.015) 20px, rgba(212,165,116,0.015) 21px),
        repeating-linear-gradient(-60deg, transparent, transparent 20px, rgba(212,165,116,0.015) 20px, rgba(212,165,116,0.015) 21px);
}
[data-theme="gilded-veil"] .nav-bar::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        repeating-linear-gradient(60deg, transparent, transparent 25px, rgba(201,169,110,0.025) 25px, rgba(201,169,110,0.025) 26px),
        repeating-linear-gradient(-60deg, transparent, transparent 25px, rgba(201,169,110,0.025) 25px, rgba(201,169,110,0.025) 26px);
}
[data-theme="midnight-veil"] .nav-bar,
[data-theme="gilded-veil"] .nav-bar { position: relative; }

/* 5. Stepped corner flourish on task row hover */
[data-theme="midnight-veil"] .task-row::before,
[data-theme="midnight-veil"] .task-row::after {
    content: ''; position: absolute; width: 0; height: 0; opacity: 0;
    transition: all 0.25s ease; pointer-events: none;
}
[data-theme="midnight-veil"] .task-row::before { top: 2px; left: 2px; border-top: 1px solid rgba(212,165,116,0.4); border-left: 1px solid rgba(212,165,116,0.4); }
[data-theme="midnight-veil"] .task-row::after { bottom: 2px; right: 2px; border-bottom: 1px solid rgba(212,165,116,0.4); border-right: 1px solid rgba(212,165,116,0.4); }
[data-theme="midnight-veil"] .task-row:hover::before,
[data-theme="midnight-veil"] .task-row:hover::after { opacity: 1; width: 14px; height: 14px; }

[data-theme="gilded-veil"] .task-row::before,
[data-theme="gilded-veil"] .task-row::after {
    content: ''; position: absolute; width: 0; height: 0; opacity: 0;
    transition: all 0.25s ease; pointer-events: none;
}
[data-theme="gilded-veil"] .task-row::before { top: 2px; left: 2px; border-top: 1px solid rgba(201,169,110,0.5); border-left: 1px solid rgba(201,169,110,0.5); }
[data-theme="gilded-veil"] .task-row::after { bottom: 2px; right: 2px; border-bottom: 1px solid rgba(201,169,110,0.5); border-right: 1px solid rgba(201,169,110,0.5); }
[data-theme="gilded-veil"] .task-row:hover::before,
[data-theme="gilded-veil"] .task-row:hover::after { opacity: 1; width: 14px; height: 14px; }

/* 6. Geometric stepped buttons */
[data-theme="midnight-veil"] .btn-primary,
[data-theme="gilded-veil"] .btn-primary {
    position: relative; border-radius: 0;
    font-family: var(--deco-display); letter-spacing: 2px; text-transform: uppercase;
}
[data-theme="midnight-veil"] .btn-primary::before {
    content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; width: 6px;
    background: rgba(212,165,116,0.3); z-index: -1;
}
[data-theme="gilded-veil"] .btn-primary::before {
    content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; width: 6px;
    background: rgba(201,169,110,0.3); z-index: -1;
}

/* 7. Art Deco diamond dividers for app-sidebar */
[data-theme="midnight-veil"] .app-sidebar-divider,
[data-theme="midnight-veil"] .drawer-divider {
    position: relative; height: 20px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
}
[data-theme="midnight-veil"] .app-sidebar-divider::before,
[data-theme="midnight-veil"] .drawer-divider::before {
    content: ''; width: 8px; height: 8px; transform: rotate(45deg);
    border: 1px solid rgba(212,165,116,0.3); background: rgba(212,165,116,0.08);
}
[data-theme="midnight-veil"] .app-sidebar-divider::after,
[data-theme="midnight-veil"] .drawer-divider::after {
    content: ''; position: absolute; left: 8px; right: 8px; height: 1px; top: 50%;
    background: linear-gradient(90deg, transparent, rgba(212,165,116,0.15), transparent);
}
[data-theme="gilded-veil"] .app-sidebar-divider,
[data-theme="gilded-veil"] .drawer-divider {
    position: relative; height: 20px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
}
[data-theme="gilded-veil"] .app-sidebar-divider::before,
[data-theme="gilded-veil"] .drawer-divider::before {
    content: ''; width: 8px; height: 8px; transform: rotate(45deg);
    border: 1px solid rgba(201,169,110,0.4); background: rgba(201,169,110,0.1);
}
[data-theme="gilded-veil"] .app-sidebar-divider::after,
[data-theme="gilded-veil"] .drawer-divider::after {
    content: ''; position: absolute; left: 8px; right: 8px; height: 1px; top: 50%;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.2), transparent);
}

/* 8. Art Deco font for more elements */
[data-theme="midnight-veil"] .page-header h1,
[data-theme="midnight-veil"] .stat-label,
[data-theme="midnight-veil"] .app-sidebar-heading,
[data-theme="midnight-veil"] .drawer-heading,
[data-theme="midnight-veil"] .filter-chip,
[data-theme="midnight-veil"] .list-header h1 {
    font-family: var(--deco-display); letter-spacing: 2px; text-transform: uppercase;
}
[data-theme="gilded-veil"] .page-header h1,
[data-theme="gilded-veil"] .stat-label,
[data-theme="gilded-veil"] .app-sidebar-heading,
[data-theme="gilded-veil"] .drawer-heading,
[data-theme="gilded-veil"] .filter-chip,
[data-theme="gilded-veil"] .list-header h1 {
    font-family: var(--deco-display); letter-spacing: 2px; text-transform: uppercase;
}

/* 9. Body text uses Cormorant Garamond */
[data-theme="midnight-veil"] body,
[data-theme="gilded-veil"] body {
    font-family: var(--font-theme);
}

/* ─── Keyframe Animations ────────────────────────────────── */
@keyframes checkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); background: var(--accent-orange); border-color: var(--accent-orange); }
    100% { transform: scale(1); }
}

@keyframes strikeThrough {
    from { text-decoration-color: transparent; }
    to { text-decoration-color: var(--text-muted); }
}

@keyframes completedFlash {
    0% { box-shadow: 0 0 0 0 rgba(170,255,0,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(170,255,0,0.2); }
    100% { box-shadow: 0 0 0 0 rgba(170,255,0,0); }
}

@keyframes overdueGlow {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(255,107,107,0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(255,107,107,0.5); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes activitySlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ─── Typography ─────────────────────────────────────────── */
h1 { font-weight: 900; letter-spacing: -0.03em; }
h2 { font-weight: 800; letter-spacing: -0.03em; }
h3 { font-weight: 700; }
a { color: var(--accent-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Navigation ─────────────────────────────────────────── */
.nav-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.nav-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-brand:hover { text-decoration: none; }

.nav-brand-text {
    font-size: var(--font-size-lg);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.nav-brand-accent {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
    z-index: 1;
}

.nav-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.nav-link-accent {
    color: var(--accent-orange);
    font-weight: 600;
}

.nav-link-accent:hover {
    color: var(--accent-orange);
    opacity: 0.85;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
    position: relative;
    z-index: 1;
}

.nav-user:hover {
    opacity: 0.85;
    text-decoration: none;
}

.nav-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--transition-fast);
    z-index: 1;
}

.nav-icon-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.nav-icon-btn.has-new { color: var(--accent-orange); }

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-orange);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.nav-notification-wrap { position: relative; }

.avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #0B1120;
    flex-shrink: 0;
}

.avatar-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
}

/* Logo mark */
.logo-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.logo-mark::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 2.5px;
    background: #0B1120;
    border-radius: var(--radius-sm);
    top: 11px;
    left: 10px;
}

.logo-mark::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2.5px;
    background: #0B1120;
    border-radius: var(--radius-sm);
    top: 17px;
    left: 10px;
}

.logo-check {
    position: absolute;
    bottom: 7px;
    right: 6px;
    width: 10px;
    height: 6px;
    border-left: 2px solid #0B1120;
    border-bottom: 2px solid #0B1120;
    transform: rotate(-45deg);
}

.logo-wordmark {
    font-size: var(--font-size-xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.logo-wordmark span {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme toggle */
.theme-toggle {
    font-size: 16px;
    line-height: 1;
}

/* ─── Notification Dropdown ──────────────────────────────── */
.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    margin-top: 8px;
    overflow: hidden;
}

.notification-dropdown.open { display: flex; }

.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.notification-dropdown-header h4 { margin: 0; font-size: 0.9rem; }

.btn-text-sm {
    background: none;
    border: none;
    color: var(--accent-orange);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    font-family: inherit;
}

.btn-text-sm:hover { text-decoration: underline; }

.notification-list {
    overflow-y: auto;
    max-height: 340px;
}

.notification-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.notification-item:hover { background: rgba(255,255,255,0.03); }

.notification-item--unread {
    background: rgba(255,107,44,0.06);
    border-left: 3px solid var(--accent-orange);
}

.notification-item-content { flex: 1; font-size: 0.85rem; line-height: 1.3; }
.notification-item-time { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }

.notification-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ─── Theme Selector Dropdown ───────────────────────────── */
.theme-selector-wrap { position: relative; z-index: 1; }

.theme-selector-trigger {
    font-size: 0;
}

.theme-selector-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    margin-top: 8px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.theme-selector-dropdown.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.theme-selector-header {
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-align: left;
    width: 100%;
}

.theme-option:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.theme-option.active {
    color: var(--accent-orange);
    font-weight: 600;
}

.theme-option.active::after {
    content: '\2713';
    margin-left: auto;
    font-size: 0.8rem;
}

.theme-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Mobile: wider dropdown */
@media (max-width: 640px) {
    .theme-selector-dropdown {
        width: 180px;
        right: -8px;
    }
}

/* ─── Main Content ───────────────────────────────────────── */
.main-content {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
    background: var(--bg-root);
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 1rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Auth Pages ─────────────────────────────────────────── */
.auth-container {
    width: 100%;
    max-width: 440px;
    margin: 2rem auto;
    animation: fadeInUp 0.6s ease both;
    position: relative;
    z-index: 1;
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 40px 36px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-med);
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-brand);
}

.auth-card:hover {
    box-shadow: var(--shadow-glow), var(--shadow-card);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.auth-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.auth-header p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover { text-decoration: underline; }

/* Avatar picker */
.avatar-picker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.avatar-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #0B1120;
    flex-shrink: 0;
}

.avatar-colors { display: flex; gap: 8px; }

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.color-dot:hover { transform: scale(1.15); }

.color-dot.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Password strength */
.password-strength { display: flex; gap: 4px; margin-top: 8px; }

.strength-bar {
    flex: 1;
    height: 3px;
    border-radius: var(--radius-sm);
    background: var(--border-subtle);
    transition: background var(--transition-fast);
}

.strength-bar.active { background: var(--accent-coral); }
.strength-bar.active.medium { background: var(--accent-gold); }
.strength-bar.active.strong { background: var(--accent-green); }

.strength-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Profile */
.profile-container {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.profile-card { margin-top: 1rem; }

.profile-heading {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.profile-meta {
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 0;
}

/* ─── Form Elements ──────────────────────────────────────── */
.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input::placeholder { color: var(--text-muted); opacity: 0.6; }

.form-input:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255,107,44,0.1);
}

.form-input:hover:not(:focus) { border-color: rgba(255,255,255,0.15); }
.form-input:disabled { opacity: 0.5; cursor: not-allowed; }

.form-input-sm {
    padding: 8px 12px;
    font-size: 0.85rem;
    max-width: 200px;
}

input, select, textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(255, 107, 44, 0.15);
}

.input-with-icon { position: relative; }

.input-with-icon .form-input { padding-left: 44px; }

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
    opacity: 0.5;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    font-family: inherit;
    transition: color var(--transition-fast);
}

.password-toggle:hover { color: var(--text-primary); }

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.checkbox-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    background: var(--bg-input);
}

.checkbox-custom.checked {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

.checkbox-custom.checked::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #0B1120;
    border-bottom: 2px solid #0B1120;
    transform: rotate(-45deg) translateY(-1px);
}

.form-link {
    font-size: 13px;
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--transition-fast);
}

.form-link:hover { opacity: 0.8; text-decoration: none; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    font-family: inherit;
    position: relative;
    z-index: 1;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--btn-primary-bg);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transform: skewX(-2deg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
    font-family: inherit;
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    z-index: 1;
}

.btn-primary-text {
    display: inline-block;
    transform: skewX(2deg);
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background var(--transition-fast);
}

.btn-primary:hover::after { background: rgba(255,255,255,0.15); }
.btn-primary:hover { text-decoration: none; }
.btn-primary:active { transform: skewX(-2deg) scale(0.98); }

.auth-card .btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    letter-spacing: 0.3px;
    display: block;
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.btn-secondary:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    text-decoration: none;
}

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

.btn-xs {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color var(--transition-fast);
    position: relative;
    z-index: 1;
}

.btn-link:hover { color: var(--accent-orange); }

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1;
    position: relative;
    z-index: 1;
}

.btn-icon:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.btn-card-menu {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.btn-card-menu:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

/* ─── Alerts ─────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    position: relative;
    line-height: 1.5;
    z-index: 1;
}

.alert-dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.alert-dismiss:hover { opacity: 1; }

.alert-error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.25);
    color: var(--accent-coral);
}

.alert-success {
    background: rgba(170, 255, 0, 0.08);
    border: 1px solid rgba(170, 255, 0, 0.2);
    color: var(--accent-green);
}

/* ─── Card ───────────────────────────────────────────────── */
.card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

/* ─── Dashboard Layout ───────────────────────────────────── */
.main-content:has(.dashboard-layout) {
    max-width: none;
    padding: 0;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0;
    min-height: calc(100vh - 64px - 60px);
}

.dashboard-main {
    padding: 28px 32px;
    overflow-y: auto;
}

/* Dashboard activity sidebar (inline, not slide-out) */
.dashboard-layout > .activity-sidebar {
    position: static;
    width: auto;
    height: auto;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    padding: 24px 20px;
    overflow-y: auto;
    box-shadow: none;
    right: auto;
    display: block;
    flex-direction: column;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
}

.page-header h1 { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; }
.page-header .greeting { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.date-display { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Quick add */
.quick-add {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    transition: border var(--transition-fast), box-shadow var(--transition-fast);
}

.quick-add:focus-within {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255,107,44,0.08);
}

.quick-add .add-icon {
    display: none;
}

.quick-add input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    padding: 0;
}

.quick-add input::placeholder { color: var(--text-muted); }

.quick-add-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.quick-add-action {
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.quick-add-action:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.quick-add-select {
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    max-width: 140px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}
.quick-add-select:focus { border-color: var(--accent-orange); outline: none; color: var(--text-primary); }

.quick-add-extras {
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}
.quick-add-extras-inner { display: flex; align-items: center; gap: 10px; }
.quick-add-extras-label { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.quick-add-date-input {
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}
.quick-add-date-input:focus { border-color: var(--accent-orange); outline: none; }
.quick-add-extras-clear {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 18px; padding: 2px 6px; line-height: 1;
}
.quick-add-extras-clear:hover { color: var(--accent-coral); }

/* ─── Dashboard Tab Bar ────────────────────────────────── */
.dash-tab-bar {
    display: flex;
    gap: 8px;
    margin: 20px 0 24px;
}

.dash-tab-btn {
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dash-tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-orange);
}

.dash-tab-btn.active {
    background: var(--accent-orange);
    color: #0B1120;
    border-color: var(--accent-orange);
    font-weight: 700;
}

.dash-tab-content {
    display: none;
}

.dash-tab-content.active {
    display: block;
}

/* ─── Dashboard Tag Filter ─────────────────────────────── */
.dash-tag-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dash-tag-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-tag-pill {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--tag-colour) 30%, transparent);
    background: color-mix(in srgb, var(--tag-colour) 10%, transparent);
    color: var(--tag-colour);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dash-tag-pill:hover {
    background: color-mix(in srgb, var(--tag-colour) 20%, transparent);
    border-color: var(--tag-colour);
}

.dash-tag-pill.active {
    background: var(--tag-colour);
    color: #0B1120;
    border-color: var(--tag-colour);
}

.dash-tag-clear {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dash-tag-clear:hover {
    color: var(--accent-coral);
    border-color: var(--accent-coral);
}

/* ─── Dashboard Notes Grid ─────────────────────────────── */
.dash-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.dash-note-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 18px;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    transition: all var(--transition-fast);
}

.dash-note-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
}

.dash-note-pin {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    opacity: 0.6;
}

.dash-note-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.dash-note-title {
    font-size: 15px;
    font-weight: 700;
    flex: 1;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.dash-note-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.dash-note-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-note-category {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--cat-colour) 15%, transparent);
    color: var(--cat-colour);
    margin-bottom: 6px;
}

.dash-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.dash-note-tag {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    background: color-mix(in srgb, var(--tag-colour) 15%, transparent);
    color: var(--tag-colour);
}

.dash-note-tag-more {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-elevated);
}

.dash-note-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.dash-note-date {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
    font-weight: 500;
}

/* ─── Dashboard All Feed ───────────────────────────────── */
.dash-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: all var(--transition-fast);
}

.dash-feed-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.dash-feed-badge {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.dash-feed-task {
    background: rgba(255,107,44,0.15);
    color: var(--accent-orange);
}

.dash-feed-note {
    background: rgba(167,139,250,0.15);
    color: var(--accent-lavender);
}

.dash-feed-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-feed-title:hover {
    color: var(--accent-orange);
}

.dash-feed-excerpt {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 1;
}

.dash-feed-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--cat-colour) 15%, transparent);
    color: var(--cat-colour);
    flex-shrink: 0;
    white-space: nowrap;
}

.dash-feed-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-weight: 500;
    white-space: nowrap;
}

/* ─── Dashboard Tabs Responsive ────────────────────────── */
@media (max-width: 768px) {
    .dash-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .dash-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .dash-notes-grid {
        grid-template-columns: 1fr;
    }
    .dash-feed-excerpt {
        display: none;
    }
    .dash-tag-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

/* Stats row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1;
}

.stat-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.stat-card-link {
    text-decoration: none; color: inherit; cursor: pointer; display: block;
}
.stat-card-link:hover .stat-value { text-decoration: underline; }
.stat-card-link:hover { box-shadow: var(--shadow-glow); }

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.stat-value { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; }

.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Section heading */
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.section-heading h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }

.see-all,
.section-heading .see-all {
    font-size: var(--font-size-sm);
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.see-all:hover,
.section-heading .see-all:hover { text-decoration: underline; }

.section-heading-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dash-notes-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}

.dash-new-btn { text-decoration: none; }

/* Dashboard task items */
.today-tasks { margin-bottom: var(--space-7); }

.task-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1;
}

.task-item:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateX(4px);
}

.task-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-check:hover {
    border-color: var(--accent-orange);
    background: rgba(255,107,44,0.1);
}

.task-check.checked {
    background: var(--accent-green);
    border-color: var(--accent-green);
    animation: checkPop 0.3s ease-out, completedFlash 0.6s ease-out;
}

.task-check.checked::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #0B1120;
    border-bottom: 2px solid #0B1120;
    transform: rotate(-45deg) translateY(-1px);
}

.task-info { flex: 1; min-width: 0; }

.task-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-title.completed {
    text-decoration: line-through;
    color: var(--text-muted);
    animation: strikeThrough 0.3s;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.task-list-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 11px;
    font-weight: 500;
}

.task-list-tag .dot { width: 6px; height: 6px; border-radius: 50%; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.task-due.overdue {
    color: var(--accent-coral);
    animation: overdueGlow 2s ease-in-out infinite;
}

.task-due.today { color: var(--accent-orange); }

/* Priority badges */
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.priority-badge.urgent { background: rgba(255,107,107,0.12); color: var(--accent-coral); }
.priority-badge.high { background: rgba(251,191,36,0.12); color: var(--accent-gold); }
.priority-badge.normal { background: rgba(96,165,250,0.12); color: var(--accent-blue); }
.priority-badge.low { background: rgba(148,163,184,0.12); color: var(--text-muted); }

/* Priority dots */
.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-dot.urgent { background: var(--accent-coral); }
.priority-dot.high { background: var(--accent-gold); }
.priority-dot.normal { background: var(--accent-blue); }
.priority-dot.low { background: var(--text-muted); }

/* Task assignee */
.task-assignee {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Dashboard lists */
.dash-lists-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: var(--space-7);
}

.dash-list-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.dash-list-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.dash-list-card .list-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dash-list-card .list-card-header h3 { font-size: var(--font-size-md); font-weight: 700; }
.dash-list-card .list-progress-text { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.list-card-header { display: flex; align-items: flex-start; justify-content: space-between; }
.list-progress-text { font-size: 12px; color: var(--text-muted); }

.progress-bar {
    height: 4px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-med);
}

/* Completed items */
.completed-list { margin-bottom: var(--space-7); }

.completed-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.completed-item:last-child { border-bottom: none; }
.completed-item .task-title { font-size: 14px; flex: 1; min-width: 0; }
.completed-meta { flex-shrink: 0; }
.completed-time { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ─── Activity Sidebar (slide-out panel) ─────────────────── */
aside.activity-sidebar {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100vh;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-subtle);
    z-index: var(--z-overlay);
    transition: right var(--transition-med);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    padding: 0;
    overflow: visible;
}

aside.activity-sidebar.open { right: 0; }

.activity-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.activity-sidebar-header h3 { margin: 0; font-size: 1rem; }

.activity-feed {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

aside.activity-sidebar .activity-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border-bottom: none;
    transition: background var(--transition-fast);
}

aside.activity-sidebar .activity-item:hover { background: rgba(255,255,255,0.05); }

/* Dashboard-inline activity sidebar */
.activity-sidebar h2 {
    font-size: var(--font-size-lg);
    font-weight: 800;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: -0.03em;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: pulse 2s ease-in-out infinite;
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.activity-item:last-child { border-bottom: none; }

.activity-item--new {
    animation: activitySlideIn 0.3s ease;
    background: rgba(255,107,44,0.08);
}

.activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.activity-content { flex: 1; min-width: 0; }
.activity-text { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }
.activity-text strong { color: var(--text-primary); font-weight: 600; }
.action-highlight { color: var(--accent-orange); font-weight: 500; }
.activity-time { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px; }

.activity-task-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    cursor: pointer;
}

.activity-task-ref:hover { color: var(--accent-orange); }

.activity-item-content { flex: 1; font-size: 0.85rem; line-height: 1.3; }
.activity-item-text { color: var(--text-secondary); }
.activity-item-time { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }

/* Activity dot (task detail sidebar) */
.activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    margin-top: 5px;
    flex-shrink: 0;
}

/* Burndown mini chart */
.burndown-mini {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 20px;
}

.burndown-mini h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ─── Lists Page ─────────────────────────────────────────── */
.lists-page {
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

.lists-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.lists-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lists-header-actions { display: flex; gap: 0.5rem; }

/* Category sections */
.category-section { margin-bottom: 2rem; }

.category-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 1rem;
    position: relative;
    padding-right: 1rem;
    cursor: pointer;
    user-select: none;
}
.category-section-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.category-section-header-left::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
    margin-left: 12px;
}
.category-collapse-icon {
    font-size: 8px;
    transition: transform 0.2s;
}
.category-section-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.btn-add-list-in-cat {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.category-section-header:hover .btn-add-list-in-cat { opacity: 1; }

.category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.category-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--cat-colour) 12%, transparent);
    color: var(--cat-colour);
    margin-top: 4px;
}

/* Lists grid */
.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* List card */
.list-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-orange);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: var(--shadow-card);
    z-index: 1;
}

.list-card:hover {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.15);
    border-left-color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card), 0 0 20px rgba(0,0,0,0.2);
}

.list-card-body { flex: 1; }

.list-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.list-card-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.list-card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.list-card-menu-wrap { position: relative; flex-shrink: 0; }

.list-card-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.list-card-progress { display: flex; align-items: center; gap: 10px; }

.progress-track {
    flex: 1;
    height: 6px;
    background: var(--bg-root);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-med);
    min-width: 0;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.lists-archive-link { margin-top: 2rem; text-align: center; }

.lists-archive-link a {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.lists-archive-link a:hover {
    color: var(--accent-orange);
    text-decoration: none;
}

/* Card dropdown */
.card-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    min-width: 120px;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-dropdown.open { display: block; }

/* Category manager */
.category-manager-toggle { margin-bottom: 1.5rem; }

.category-manager {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.category-manager-header { margin-bottom: 1rem; }

.category-manager-header h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.category-manager-list { }

.category-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.category-row:last-child { border-bottom: none; }

.category-row-name { flex: 1; font-size: 0.9rem; }

.category-add-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

/* Colour picker */
.colour-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.colour-picker-sm { margin-top: 0; }

.colour-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
}

.colour-swatch:hover { transform: scale(1.15); }

.colour-swatch.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

/* ─── List Detail Page ───────────────────────────────────── */
.list-detail-page {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.breadcrumb a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--accent-orange);
    text-decoration: none;
}

.breadcrumb-sep { margin: 0 8px; opacity: 0.5; }

.list-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.list-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.list-header-info { flex: 1; }

.list-header h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.list-header-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.list-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.list-progress-bar { margin-bottom: 1.5rem; }

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.collab-avatars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
}

.collab-count {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Filter bar */
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.filter-chips { display: flex; gap: 6px; }

.filter-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--accent-orange);
    color: var(--text-primary);
}

.filter-chip.active {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: rgba(255, 107, 44, 0.08);
}

/* Task area */
.task-area { min-height: 200px; margin-bottom: 1rem; }

/* Add task bar */
.add-task-bar { margin-top: 1rem; }

.add-task-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 0.95rem;
}

/* ─── Task Rows (list view) ──────────────────────────────── */
.task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1;
}

/* Mobile touch: disable double-tap-to-zoom for drag-and-drop */
#task-area { touch-action: manipulation; }
.task-row { touch-action: manipulation; }

/* Mobile touch: disable double-tap-to-zoom for drawer elements */
.drawer-link,
.drawer-theme-trigger,
.drawer-theme-item,
.drawer-cat-item,
.app-sidebar-theme-item { touch-action: manipulation; }

.task-row:hover {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.15);
}

.task-row.selected {
    border-color: var(--accent-orange);
    background: rgba(255,107,44,0.04);
}

.drag-handle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: grab;
    touch-action: none;
}

.drag-handle span {
    width: 12px;
    height: 2px;
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}

.task-row:hover .drag-handle { opacity: 1; }
.task-row.dragging { opacity: 0.8; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-radius: var(--radius-md); background: var(--bg-elevated); }
.drag-handle:active { cursor: grabbing; }
.drag-placeholder { background: rgba(255,107,44,0.08); border: 2px dashed rgba(255,107,44,0.3); border-radius: var(--radius-md); margin-bottom: 2px; }

/* SortableJS drag states */
.sortable-ghost { opacity: 0.4; background: var(--accent-orange) !important; border: 2px dashed var(--accent-orange); border-radius: var(--radius-md); }
.sortable-chosen { box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.sortable-drag { opacity: 0.9; }

@media (hover: none), (pointer: coarse) {
    .task-row .drag-handle { opacity: 0.6 !important; min-width: 48px; min-height: 48px; justify-content: center; align-items: center; touch-action: none; -webkit-touch-callout: none; cursor: grab; padding: 8px; }
    .task-row .drag-handle span { width: 16px; height: 3px; }
    .task-row .drag-handle:active { opacity: 1; }
}

/* Completed sort toggle */
.completed-sort-toggle { padding: 4px 8px !important; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.completed-sort-toggle.active { background: var(--accent-orange); color: var(--bg-root); }
.completed-sort-toggle svg { display: block; }

/* Completed separator */
.completed-separator {
    display: flex; align-items: center; gap: 12px; padding: 8px 0; margin: 4px 0;
    font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.completed-separator::before, .completed-separator::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

/* Group-by headers */
.group-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-secondary); margin-top: 8px;
}
.group-header:first-child { margin-top: 0; }
.group-header-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.group-by-select { max-width: 140px; font-size: 12px; padding: 4px 8px; }

/* Priority row styling */
.task-row.priority-urgent { background: rgba(255, 107, 107, 0.08); border-left: 3px solid var(--accent-coral); }
.task-row.priority-high { background: rgba(251, 191, 36, 0.06); border-left: 3px solid var(--accent-gold); }
.task-row.priority-urgent:hover { background: rgba(255, 107, 107, 0.12); }
.task-row.priority-high:hover { background: rgba(251, 191, 36, 0.10); }

/* Priority pill badge in task row */
.priority-pill {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px;
    border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
}
.priority-pill.urgent { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }
.priority-pill.high { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.priority-pill.low { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }

.task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-checkbox:hover {
    border-color: var(--accent-orange);
    background: rgba(255,107,44,0.1);
}

.task-checkbox.done {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

.task-checkbox.done::after {
    content: '';
    width: 7px;
    height: 4px;
    border-left: 2px solid #0B1120;
    border-bottom: 2px solid #0B1120;
    transform: rotate(-45deg) translateY(-1px);
}

.task-checkbox.check-pop {
    animation: checkPop 0.3s ease;
}

.task-checkbox.urgent-ring { border-color: var(--accent-coral); }
.task-checkbox.high-ring { border-color: var(--accent-gold); }

.task-body { flex: 1; min-width: 0; }

.task-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-name.struck {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.6;
}

.task-tags { display: flex; gap: 6px; align-items: center; margin-top: 3px; }

.tag-subtasks {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.tag-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    white-space: nowrap;
}

.due-badge {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-muted);
}

.due-badge.overdue {
    color: var(--accent-coral);
    animation: overdueGlow 2s ease-in-out infinite;
}

.due-badge.today { color: var(--accent-gold); }
.due-badge.upcoming { color: var(--text-secondary); }

.assignee-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.subtask-container { margin-left: 48px; }

.subtask-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    cursor: pointer;
}

/* ─── Task Detail Panel ──────────────────────────────────── */
.task-detail {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    animation: slideUp 0.35s ease both;
    position: relative;
    z-index: 1;
    padding: 2rem;
}

.task-detail-breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.task-detail-breadcrumb a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.task-detail-breadcrumb a:hover {
    color: var(--accent-orange);
    text-decoration: none;
}

.task-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
}

.task-detail-main { min-width: 0; }

.task-detail-sidebar {
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-subtle);
    padding: 1.5rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.task-detail-priority-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.priority-label-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-detail-title {
    width: 100%;
    font-size: 22px;
    font-weight: 800;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-primary);
    padding: 4px 0;
    margin-bottom: 1.5rem;
    outline: none;
    transition: border-color var(--transition-fast);
    font-family: inherit;
}

.task-detail-title:focus {
    border-bottom-color: var(--accent-orange);
}

.task-detail-title-readonly {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.task-detail-section { margin-bottom: 2rem; }

.task-detail-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-detail-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    min-height: 60px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.task-detail-description:focus {
    background: var(--bg-input);
    outline: none;
}

.task-detail-description[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.6;
}

/* Subtask progress */
.subtask-counter {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.subtask-progress {
    height: 4px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.subtask-progress-bar {
    height: 100%;
    background: var(--accent-orange);
    border-radius: var(--radius-sm);
    transition: width var(--transition-med);
}

.subtask-list { margin-bottom: 12px; }

.subtask-title {
    font-size: 0.85rem;
    flex: 1;
}

.subtask-title.struck {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.6;
}

.subtask-add { margin-top: 8px; }

.subtask-add-btn {
    font-size: 0.85rem;
    color: var(--accent-orange);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
}

.subtask-add-btn:hover { text-decoration: underline; }

.subtask-add-form { margin-top: 8px; }

.subtask-add-input { font-size: 0.85rem; }

/* Sidebar blocks */
.sidebar-block { margin-bottom: 1.5rem; }

.sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.sidebar-assignee {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.assignee-select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.assignee-select:focus { border-color: var(--accent-orange); outline: none; }

.sidebar-due-date {
    position: relative;
}

.due-date-picker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.priority-selector {
    display: flex;
    gap: 6px;
}

.priority-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.priority-btn:hover { border-color: var(--accent-orange); color: var(--text-primary); }

.priority-btn.active {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: rgba(255,107,44,0.08);
}

.activity-log {
    max-height: 300px;
    overflow-y: auto;
}

.comment-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.btn-delete-task {
    width: 100%;
    background: rgba(255,107,107,0.1);
    color: var(--accent-coral);
    border: 1px solid rgba(255,107,107,0.25);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.btn-delete-task:hover {
    background: rgba(255,107,107,0.2);
}

/* ─── Comments ───────────────────────────────────────────── */
.comment-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.comment-item:last-child { border-bottom: none; }

.comment-body { flex: 1; min-width: 0; }

.comment-header-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.comment-author { font-size: 0.85rem; font-weight: 600; }
.comment-time { font-size: 0.75rem; color: var(--text-muted); }

.comment-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.comment-actions { display: flex; gap: 12px; margin-top: 4px; }

.comment-action-btn {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: color var(--transition-fast);
}

.comment-action-btn:hover { color: var(--accent-orange); }

.comment-input-area {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 12px;
}

.comment-input {
    flex: 1;
    min-height: 40px;
    resize: vertical;
}

.mention { color: var(--accent-orange); font-weight: 500; }

.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 40px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
}

.mention-item:hover { background: rgba(255,255,255,0.05); }

/* ─── Agent / Bot Comments ──────────────────────────────── */
.comment-agent {
    background: rgba(96, 165, 250, 0.06);
    border-radius: var(--radius);
    padding: 12px;
    margin: 4px -12px;
}

.comment-avatar-agent {
    background: rgba(96, 165, 250, 0.2);
    color: #60A5FA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-bot-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(96, 165, 250, 0.15);
    color: #60A5FA;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
}

.comment-text-mono {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-image {
    margin-top: 8px;
}

.comment-image img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: opacity 0.15s;
}

.comment-image img:hover { opacity: 0.85; }

.comment-inline-img {
    max-width: 100%;
    border-radius: 6px;
    cursor: pointer;
    margin: 8px 0;
    display: block;
    border: 1px solid rgba(255,255,255,0.1);
}
.comment-inline-img:hover {
    border-color: rgba(255,255,255,0.3);
}

.comment-poll-indicator {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    padding: 4px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.comment-poll-indicator.visible { opacity: 1; }

/* ─── Search Page ────────────────────────────────────────── */
.search-header { margin-bottom: 1.5rem; }
.search-header h1 { font-size: 1.5rem; }

.search-bar { margin-bottom: 1rem; }

.search-bar input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    outline: none;
}

.search-bar input:focus { border-color: var(--accent-orange); }
.search-bar input::placeholder { color: var(--text-muted); }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.filter-row select {
    padding: 0.4rem 0.6rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}

.filter-row select:focus { border-color: var(--accent-orange); }

.saved-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.saved-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.remove-filter {
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.remove-filter:hover { color: var(--accent-coral); }

.bulk-bar {
    position: sticky;
    top: 64px;
    z-index: 10;
    margin-bottom: 1rem;
}

.bulk-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(255,107,44,0.06);
    border: 1px solid rgba(255,107,44,0.15);
    border-radius: var(--radius-md);
}

.selected-count {
    color: var(--accent-orange);
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: auto;
}

.btn-sm.primary {
    background: var(--accent-orange);
    color: #fff;
    border-color: var(--accent-orange);
}

.bulk-btn {
    padding: 0.35rem 0.7rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.bulk-btn:hover {
    border-color: var(--accent-orange);
    color: var(--text-primary);
}

.bulk-btn.danger:hover {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
}

.search-results { min-height: 200px; }

.search-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.search-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.search-task-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    position: relative;
    z-index: 1;
}

.search-task-row:hover { background: var(--bg-elevated); }

.search-task-row.selected {
    border-color: var(--accent-orange);
    background: rgba(255,107,44,0.04);
}

.select-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    transition: all var(--transition-fast);
}

.select-checkbox.checked {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.search-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-task-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.search-task-title.struck {
    text-decoration: line-through;
    opacity: 0.5;
}

.task-due-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.task-due-badge.overdue { color: var(--accent-coral); }
.task-due-badge.today { color: var(--accent-gold); }

.search-task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.assignee-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #fff;
    font-weight: 600;
}

.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.search-pagination button {
    padding: 0.3rem 0.6rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
}

.search-pagination button.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Search modals */
.modal-list-picker {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.modal-list-option {
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.modal-list-option:hover { border-color: var(--accent-orange); }

/* ─── Modals ─────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.modal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-overlay);
    position: relative;
    animation: modalIn 0.3s ease both;
}

.modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-brand);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.modal-card h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.modal-card input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    margin-bottom: 1rem;
    outline: none;
    font-family: inherit;
}

.modal-card input[type="text"]:focus { border-color: var(--accent-orange); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2,
.modal-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-fast);
}

.modal-close:hover { color: var(--text-primary); }

.modal-body { }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ─── Sharing Modal ──────────────────────────────────────── */
.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.member-row:last-child { border-bottom: none; }

.member-row:hover { background: var(--bg-elevated); border-radius: var(--radius-sm); }

.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 0.9rem; font-weight: 600; }
.member-email { font-size: 0.8rem; color: var(--text-muted); }

.member-perm-select {
    width: 110px;
    font-size: 0.85rem;
}

.btn-remove-member {
    color: var(--text-muted);
    font-size: 1.25rem;
}

.btn-remove-member:hover { color: var(--accent-coral); }

.badge {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-owner {
    background: rgba(255,107,44,0.1);
    color: var(--accent-orange);
}

/* ─── Dropdowns ──────────────────────────────────────────── */
.dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    min-width: 140px;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.dropdown-menu.open { display: block; }

.dropdown-form { display: contents; }

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-primary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover { background: rgba(255,255,255,0.06); }

.dropdown-item-danger { color: var(--accent-coral); }
.dropdown-item-danger:hover { background: rgba(255, 107, 107, 0.1); }

/* ─── Empty States ───────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p { font-size: 0.95rem; }

/* ─── Welcome Page (see end of file for W6-A redesign) ─── */

/* ─── 404 Page ───────────────────────────────────────────── */
.error-page {
    text-align: center;
    padding: 4rem 1rem;
    position: relative;
    z-index: 1;
}

.error-page h1 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.error-page p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* ─── Dashboard Sidebar ─────────────────────────────────── */
.dash-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    padding: 20px 0;
    overflow-y: auto;
    display: none; /* shown at 1200px+ */
}

.dash-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.dash-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dash-sidebar-link:hover { background: var(--bg-elevated); color: var(--text-primary); }
.dash-sidebar-link.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.dash-sidebar-link svg { flex-shrink: 0; opacity: 0.7; }
.dash-sidebar-link:hover svg, .dash-sidebar-link.active svg { opacity: 1; }

.dash-sidebar-badge {
    margin-left: auto; background: var(--accent-orange);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--radius-pill);
    min-width: 20px; text-align: center;
}

.dash-sidebar-divider { height: 1px; background: var(--border-subtle); margin: 12px 16px; }

.dash-sidebar-section { padding: 0 12px; }
.dash-sidebar-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    padding: 4px 12px 8px; margin: 0;
}

.dash-sidebar-list-tree { display: flex; flex-direction: column; gap: 1px; }

.dash-sidebar-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none; font-size: 13px;
    transition: background var(--transition-fast);
}
.dash-sidebar-list-item:hover { background: var(--bg-elevated); color: var(--text-primary); }

.dash-sidebar-list-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dash-sidebar-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sidebar-list-count {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    background: var(--bg-elevated); padding: 1px 6px; border-radius: var(--radius-pill);
}
.dash-sidebar-empty { padding: 8px 12px; color: var(--text-muted); font-size: 12px; font-style: italic; }

/* ─── Category Sidebar Items ──────────────────────────── */
.dash-sidebar-cat-tree { display: flex; flex-direction: column; gap: 1px; }

.dash-sidebar-cat-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 13px;
    transition: background var(--transition-fast);
    cursor: default;
}
.dash-sidebar-cat-item:hover { background: var(--bg-elevated); }
.dash-sidebar-cat-item.pinned { color: var(--text-primary); }

.dash-sidebar-cat-drag {
    cursor: grab; opacity: 0; font-size: 12px; color: var(--text-muted);
    transition: opacity var(--transition-fast);
    user-select: none; flex-shrink: 0; width: 14px; text-align: center;
}
.dash-sidebar-cat-item:hover .dash-sidebar-cat-drag { opacity: 0.6; }
.dash-sidebar-cat-drag:active { cursor: grabbing; }

.dash-sidebar-cat-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.dash-sidebar-cat-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dash-sidebar-cat-counts {
    display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}

.dash-sidebar-count-tasks,
.dash-sidebar-count-notes {
    font-size: 10px; font-weight: 600;
    padding: 1px 5px; border-radius: var(--radius-pill);
    background: var(--bg-elevated); color: var(--text-muted);
}
.dash-sidebar-count-notes {
    background: rgba(96, 165, 250, 0.15); color: var(--accent-blue, #60A5FA);
}

.dash-sidebar-cat-pin {
    background: none; border: none; cursor: pointer;
    font-size: 12px; opacity: 0; padding: 2px;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
.dash-sidebar-cat-item:hover .dash-sidebar-cat-pin { opacity: 0.4; }
.dash-sidebar-cat-pin:hover { opacity: 0.8 !important; }
.dash-sidebar-cat-pin.active { opacity: 0.7; }

.dash-sidebar-cat-item.dragging {
    opacity: 0.5; background: var(--bg-elevated);
}

.dash-sidebar-cat-placeholder {
    height: 32px;
    background: rgba(255, 107, 44, 0.08);
    border: 2px dashed rgba(255, 107, 44, 0.3);
    border-radius: var(--radius-sm);
    margin: 1px 0;
}

/* ─── Mobile Bottom Tab Bar + FAB ───────────────────────── */
.mobile-tab-bar {
    display: none; /* shown at < 768px for authenticated users */
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    z-index: var(--z-sticky);
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-tab-bar-inner {
    display: flex; align-items: center; justify-content: space-around;
    height: 56px; max-width: 500px; margin: 0 auto;
}
.mobile-tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 12px; text-decoration: none;
    color: var(--text-muted); font-size: 10px; font-weight: 600;
    transition: color var(--transition-fast);
    position: relative;
}
.mobile-tab svg { width: 22px; height: 22px; }
.mobile-tab:hover, .mobile-tab.active { color: var(--accent-orange); }

.mobile-fab {
    position: fixed; bottom: 76px; right: 20px;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff; border: none; cursor: pointer;
    font-size: 26px; line-height: 1;
    display: none; /* shown at < 768px */
    align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 107, 44, 0.4);
    z-index: calc(var(--z-sticky) + 1);
    transition: transform var(--transition-fast);
}
.mobile-fab:active { transform: scale(0.92); }

/* ─── Utility Classes ────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-orange { color: var(--accent-orange); }
.text-coral { color: var(--accent-coral); }
.text-green { color: var(--accent-green); }
.text-gold { color: var(--accent-gold); }
.text-blue { color: var(--accent-blue); }
.text-muted { color: var(--text-muted); }
.up { color: var(--accent-green); }
.down { color: var(--accent-coral); }

/* ─── Responsive — Mobile First ──────────────────────────── */

/* Mobile defaults (< 768px) */
@media (max-width: 767px) {
    .nav-bar { height: 56px; padding: 0 16px; }
    .nav-user span:not(.avatar-sm) { display: none; }
    .nav-links { gap: 0.5rem; }
    .nav-link:not(.nav-link-accent) { display: none; } /* hide logout text, keep register */

    .main-content { padding: 1.5rem 1rem; padding-bottom: 80px; } /* room for tab bar */

    .auth-card { padding: 28px 24px; }
    .auth-header h1 { font-size: 22px; }

    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-layout > .activity-sidebar { display: none; }
    aside.activity-sidebar { display: none; }
    aside.activity-sidebar.open { display: flex; right: 0; }
    .dashboard-layout > .dash-sidebar { display: none; }
    .dashboard-main { padding: 20px 16px; padding-bottom: 80px; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-lists-grid { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    .lists-grid { grid-template-columns: 1fr; }
    .lists-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }

    .list-header { flex-wrap: wrap; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-search { max-width: 100%; }

    .task-detail-grid { grid-template-columns: 1fr; }
    .task-detail-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .modal-card { margin: 1rem; max-width: calc(100% - 2rem); }

    .search-task-title { max-width: 180px; }

    .quick-add-actions { display: none; }
    .quick-add .quick-add-submit { display: none; }

    /* Show mobile bottom tab bar + FAB */
    .mobile-tab-bar { display: block; }
    .mobile-fab { display: flex; }
    .footer { padding-bottom: 56px; } /* push footer above tab bar */
}

/* Stats grid collapse for tablet */
@media (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet — 768px */
@media (min-width: 768px) {
    .stats-row { grid-template-columns: repeat(4, 1fr); }
    .lists-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Desktop — 1024px */
@media (min-width: 1024px) {
    .dashboard-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .dashboard-layout > .activity-sidebar { display: block; }
    .dash-lists-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large desktop — 1200px: show sidebar for 3-column dashboard */
@media (min-width: 1200px) {
    .main-content { max-width: 1200px; }
    .app-layout .main-content { max-width: none; }
    .main-content:has(.dashboard-layout) { max-width: none; }
    .dashboard-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .dashboard-main { padding: 28px 32px; }
}

/* ============================================================
   Notes — Editor, Card Grid, View Page
   N2-A owns this section. N5-A and N7-A must not modify.
   ============================================================ */

/* ─── Breadcrumb (notes context) ────────────────────────── */
.note-editor-page .breadcrumb,
.note-view-page .breadcrumb,
.notes-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.note-editor-page .breadcrumb a,
.note-view-page .breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.note-editor-page .breadcrumb a:hover,
.note-view-page .breadcrumb a:hover { color: var(--text-secondary); }

.note-editor-page .breadcrumb .sep,
.note-view-page .breadcrumb .sep { opacity: 0.5; }

.note-editor-page .breadcrumb .current,
.note-view-page .breadcrumb .current { color: var(--text-secondary); font-weight: 500; }

/* ─── Editor Card ───────────────────────────────────────── */
.editor-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 2rem;
}

/* ─── Title Input ───────────────────────────────────────── */
.title-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    margin-bottom: 20px;
}
.title-input::placeholder { color: var(--text-muted); }
.title-input:focus { background: var(--bg-input); }

/* ─── Toolbar + Toggle Row ──────────────────────────────── */
.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.md-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    flex-wrap: wrap;
}

.md-toolbar .sep {
    width: 1px;
    height: 20px;
    background: var(--border-subtle);
    margin: 0 4px;
}

.tb-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-family: var(--font-sans);
}
.tb-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tb-btn.active { background: var(--accent-orange); color: #0B1120; }

.tb-btn .tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.tb-btn:hover .tooltip { opacity: 1; }

.tb-btn-mono { font-family: var(--font-mono); font-size: 12px; }
.tb-btn-italic { font-style: italic; }
.tb-btn-bold { font-weight: 700; }

/* ─── Edit / Preview Toggle ─────────────────────────────── */
.mode-toggle {
    display: flex;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.mode-toggle button {
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.mode-toggle button.active {
    background: var(--accent-orange);
    color: #0B1120;
}

/* ─── Textarea ──────────────────────────────────────────── */
.editor-textarea {
    width: 100%;
    min-height: 400px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: border-color var(--transition-fast);
}
.editor-textarea:focus { border-color: var(--border-focus); }

/* ─── Preview Pane ──────────────────────────────────────── */
.editor-preview {
    display: none;
    min-height: 400px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 24px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* ─── Markdown Rendered Content ────────────────────────── */
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 700;
    margin: 1.5em 0 0.5em 0;
    line-height: 1.3;
}

.editor-preview h1, .markdown-rendered h1 { font-size: 1.75em; }
.editor-preview h2, .markdown-rendered h2 { font-size: 1.4em; }
.editor-preview h3, .markdown-rendered h3 { font-size: 1.15em; }
.editor-preview h4, .markdown-rendered h4 { font-size: 1em; font-weight: 600; }

.editor-preview h1:first-child,
.markdown-rendered h1:first-child,
.editor-preview h2:first-child,
.markdown-rendered h2:first-child { margin-top: 0; }

.editor-preview p, .markdown-rendered p {
    margin: 0 0 1em 0;
}

.editor-preview strong, .markdown-rendered strong { font-weight: 700; color: var(--text-primary); }
.editor-preview em, .markdown-rendered em { font-style: italic; }

.editor-preview a, .markdown-rendered a {
    color: var(--accent-orange);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.editor-preview a:hover, .markdown-rendered a:hover {
    border-bottom-color: var(--accent-orange);
}

.editor-preview ul, .editor-preview ol,
.markdown-rendered ul, .markdown-rendered ol {
    padding-left: 1.5em;
    margin: 0 0 1em 0;
}
.editor-preview li, .markdown-rendered li {
    margin-bottom: 0.25em;
}
.editor-preview ul li, .markdown-rendered ul li { list-style: disc; }
.editor-preview ol li, .markdown-rendered ol li { list-style: decimal; }

.editor-preview blockquote, .markdown-rendered blockquote {
    border-left: 3px solid var(--accent-orange);
    padding: 0.5em 1em;
    margin: 0 0 1em 0;
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    font-style: italic;
}
.editor-preview blockquote p:last-child,
.markdown-rendered blockquote p:last-child { margin-bottom: 0; }

.editor-preview code, .markdown-rendered code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
    color: var(--accent-orange);
}

.editor-preview pre, .markdown-rendered pre {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1em;
    margin: 0 0 1em 0;
    overflow-x: auto;
    line-height: 1.5;
}
.editor-preview pre code, .markdown-rendered pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--text-primary);
}

.editor-preview hr, .markdown-rendered hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5em 0;
}

.editor-preview table, .markdown-rendered table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em 0;
    font-size: 13px;
}
.editor-preview th, .markdown-rendered th {
    text-align: left;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-subtle);
    color: var(--text-primary);
}
.editor-preview td, .markdown-rendered td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.editor-preview tr:last-child td, .markdown-rendered tr:last-child td {
    border-bottom: none;
}

.editor-preview img, .markdown-rendered img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 0.5em 0;
}

.editor-preview input[type="checkbox"],
.markdown-rendered input[type="checkbox"] {
    margin-right: 0.5em;
    accent-color: var(--accent-orange);
}

/* ─── Meta Section ──────────────────────────────────────── */
.meta-section {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.meta-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ─── Category Selector ─────────────────────────────────── */
.category-select {
    appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 36px 10px 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    max-width: 280px;
    transition: border-color var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.category-select:focus { border-color: var(--border-focus); }

/* ─── Tags Placeholder ──────────────────────────────────── */
.tags-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

/* ─── Attachments ───────────────────────────────────────── */
.attachment-section { margin-top: 4px; }

.upload-zone {
    position: relative;
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-7);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: hidden;
}
.upload-zone:hover { border-color: var(--accent-orange); background: rgba(255,107,44,0.03); }
.upload-zone.drag-over {
    border-color: var(--accent-orange);
    background: rgba(255,107,44,0.08);
    border-style: solid;
}
.upload-zone-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.upload-zone-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
.upload-zone-text { font-size: 13px; color: var(--text-muted); }
.upload-zone-text span { color: var(--accent-orange); font-weight: 600; cursor: pointer; }
.upload-zone-hint { font-size: 11px; color: var(--text-muted); opacity: 0.6; margin-top: 4px; }

/* Upload progress */
.upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,0.05);
    display: none;
}
.upload-progress.active { display: block; }
.upload-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent-orange);
    border-radius: 0 2px 2px 0;
    transition: width 0.15s ease;
}

/* Upload error */
.upload-error {
    display: none;
    color: var(--accent-coral, #ff6b6b);
    font-size: 12px;
    margin-top: 8px;
    font-weight: 500;
}
.upload-error.visible { display: block; }

/* Attachment list */
.attachment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Attachment item (thumbnail card) */
.attachment-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: border-color var(--transition-fast);
}
.attachment-item:hover { border-color: var(--accent-orange); }

.attachment-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: rgba(0,0,0,0.2);
}

.attachment-info {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.attachment-name {
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.attachment-size {
    font-size: 10px;
    color: var(--text-muted);
}

.attachment-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    backdrop-filter: blur(4px);
}
.attachment-item:hover .attachment-remove { opacity: 1; }
.attachment-remove:hover { background: var(--accent-coral, #ff6b6b); }

/* Note view page — inline images */
.note-view-attachments {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}
.note-view-attachments h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.note-view-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.note-view-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}
.note-view-image img {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
    transition: transform var(--transition-med);
}
.note-view-image:hover img { transform: scale(1.02); }

/* ─── File type icons (doc cards in editor + view) ───── */
.attachment-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--bg-elevated);
}
.file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.file-icon-pdf { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.file-icon-doc { background: rgba(43, 87, 151, 0.15); color: #5b9bd5; }
.file-icon-xls { background: rgba(33, 115, 70, 0.15); color: #21a366; }
.file-icon-md  { background: rgba(255, 107, 44, 0.15); color: var(--accent-orange); }
.file-icon-generic { background: rgba(108, 117, 125, 0.15); color: var(--text-muted); }

/* ─── PDF preview on view page ─────────────────────────── */
.note-view-pdfs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}
.note-view-pdf-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
}
.pdf-preview {
    width: 100%;
    height: 400px;
    background: var(--bg-root);
}
.pdf-embed {
    width: 100%;
    height: 100%;
    border: none;
}
.pdf-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
}
.pdf-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Document download cards on view page ─────────────── */
.note-view-docs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.note-view-doc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: border-color var(--transition-fast);
}
.note-view-doc-card:hover {
    border-color: var(--accent-orange);
}
.doc-icon {
    flex-shrink: 0;
}
.doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-size {
    font-size: 11px;
    color: var(--text-muted);
}

/* ─── Gallery Lightbox ─────────────────────────────────── */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-med), visibility var(--transition-med);
}
.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.lightbox-content {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    user-select: none;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 2;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 2;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}
.lightbox-caption {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 600px) {
    .attachment-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .upload-zone { padding: 20px 16px; }
    .note-view-images {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .pdf-preview { height: 250px; }
    .lightbox-prev,
    .lightbox-next { width: 36px; height: 36px; font-size: 16px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: 8px; right: 8px; width: 36px; height: 36px; }
    .lightbox-img { max-width: 95vw; max-height: 85vh; }
    .note-view-doc-card { padding: 10px 12px; }
}

/* ─── Editor Footer ─────────────────────────────────────── */
.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 12px;
}

.editor-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: color var(--transition-fast);
}
.version-btn:hover { color: var(--text-primary); }

.version-count {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
}

.footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ─── Save Indicator ────────────────────────────────────── */
.save-indicator {
    font-size: 12px;
    font-weight: 500;
    transition: color var(--transition-fast);
}
.save-indicator.unsaved { color: var(--accent-gold); }
.save-indicator.saved { color: var(--accent-green); }

/* ─── Notes Page (index) ────────────────────────────────── */
.notes-page {
    position: relative;
    z-index: 1;
}

.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.notes-header h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ─── Notes Grid ────────────────────────────────────────── */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.note-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    transition: all var(--transition-fast);
}
.note-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    text-decoration: none;
}

.note-card-pin {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    opacity: 0.6;
}

.note-card-title {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
    padding-right: 24px;
}

.note-card-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.note-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    gap: 8px;
}

.note-card-category {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--cat-colour) 15%, transparent);
    color: var(--cat-colour);
}

.note-card-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Note Pin + Reorder ──────────────────────────────────── */
.note-card {
    cursor: default;
}

.note-card.pinned {
    border-color: var(--accent-orange);
    background: color-mix(in srgb, var(--accent-orange) 3%, var(--bg-surface));
}

.note-pin-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    padding: 4px;
    z-index: 2;
}
.note-pin-btn:hover {
    opacity: 0.8;
    transform: scale(1.15);
}
.note-pin-btn.pinned {
    opacity: 0.9;
}

.note-drag-handle {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: grab;
    padding: 4px;
    z-index: 2;
}
.note-drag-handle span {
    width: 12px;
    height: 2px;
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}
.note-card:hover .note-drag-handle {
    opacity: 0.6;
}
.note-drag-handle:active {
    cursor: grabbing;
}

.note-card.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.note-drag-placeholder {
    background: rgba(255,107,44,0.08);
    border: 2px dashed rgba(255,107,44,0.3);
    border-radius: var(--radius-md);
    min-height: 120px;
}

.note-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.note-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ─── Note View Page ────────────────────────────────────── */
.note-view-page {
    position: relative;
    z-index: 1;
}

.note-view-header {
    margin-bottom: 28px;
}

.note-view-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.note-view-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.note-view-category-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--cat-colour) 15%, transparent);
    color: var(--cat-colour);
}

.note-view-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.note-view-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 720px;
}

/* ─── Notes Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .editor-card { padding: 1.25rem; }
    .title-input { font-size: 20px; }
    .toolbar-row { flex-direction: column; align-items: flex-start; }
    .md-toolbar { flex-wrap: wrap; }
    .editor-textarea { min-height: 300px; font-size: 13px; }
    .editor-preview { min-height: 300px; padding: 16px; }
    .notes-grid { grid-template-columns: 1fr; }
    .note-drag-handle { display: none; }
    .editor-footer { flex-direction: column; align-items: stretch; }
    .footer-actions { justify-content: flex-end; }
    .note-view-actions { flex-direction: column; }
    .note-view-actions .btn { text-align: center; }
    .markdown-rendered pre { font-size: 12px; }
    .markdown-rendered table { font-size: 12px; }
    .note-view-page { padding-bottom: 80px; }
    .note-editor-page { padding-bottom: 80px; }
}

/* ========================================
   Unified Search — Type Tabs, Tag Chips, Result Cards
   ======================================== */

.search-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.search-type-tab {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: -1px;
}

.search-type-tab:hover { color: var(--text-secondary); }

.search-type-tab.active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

.search-tag-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

@media (max-width: 767px) {
    .search-tag-chips { flex-wrap: nowrap; }
}

.search-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border-subtle);
    white-space: nowrap;
    transition: all var(--transition-fast);
    background: transparent;
    font-family: var(--font-sans);
    color: var(--text-muted);
}

.search-tag-chip:hover { transform: translateY(-1px); }

.search-tag-chip.active {
    background: var(--accent-orange);
    color: #fff;
    border-color: var(--accent-orange);
}

.search-result-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.search-result-card:hover {
    border-color: rgba(255,255,255,0.18);
    transform: translateX(4px);
}

.search-result-card .result-content {
    flex: 1;
    min-width: 0;
}

.result-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    flex-shrink: 0;
}

.type-badge.type-note { background: var(--accent-lavender); }
.type-badge.type-task { background: var(--accent-green); color: #000; }

.result-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.result-title.completed {
    text-decoration: line-through;
    opacity: 0.6;
}

.result-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 6px 0 10px;
}

.highlight {
    background: rgba(255,107,44,0.2);
    color: var(--accent-orange);
    padding: 1px 3px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cat-pill {
    font-size: 12px;
    font-weight: 600;
}

.result-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.result-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid;
}

.result-info {
    font-size: 11px;
    color: var(--text-muted);
}

.pin-icon {
    font-size: 12px;
}

.search-results-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.priority-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.5px; }
.priority-pill.priority-urgent { background: rgba(255,107,107,0.15); color: var(--accent-coral); }
.priority-pill.priority-high { background: rgba(251,191,36,0.15); color: var(--accent-gold); }

.due-label { font-size: 12px; color: var(--text-secondary); }
.due-label.overdue { color: var(--accent-coral); font-weight: 600; }

/* ─── Quick-Add Submit + More Buttons ──────────────────── */
.quick-add-submit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-brand);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-add-submit:active {
    transform: scale(0.9);
}
.quick-add-submit svg {
    width: 18px;
    height: 18px;
}

.quick-add-more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.quick-add-more:hover {
    background: var(--bg-surface);
    border-color: var(--accent-orange);
}
.quick-add-more svg {
    width: 16px;
    height: 16px;
}

/* ─── Bottom Sheet ─────────────────────────────────────── */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition-med), visibility 0s var(--transition-med);
}
.sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: calc(var(--z-overlay) + 1);
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--transition-med), visibility 0s var(--transition-med);
    padding: 12px 20px 24px;
    visibility: hidden;
}
.bottom-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--transition-med), visibility 0s;
}

.sheet-drag-handle {
    width: 40px;
    height: 4px;
    background: var(--text-muted);
    border-radius: var(--radius-sm);
    margin: 0 auto 20px;
}

.sheet-field {
    margin-bottom: 20px;
}
.sheet-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sheet-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.sheet-select option { background: var(--bg-surface); }

.sheet-date-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
    margin-bottom: 8px;
    box-sizing: border-box;
}
.sheet-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.7);
}

.sheet-quick-dates {
    display: flex;
    gap: 8px;
}
.sheet-quick-date-btn {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    min-height: 32px;
}
.sheet-quick-date-btn:hover,
.sheet-quick-date-btn.active {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.sheet-priority-pills {
    display: flex;
    gap: 8px;
}
.sheet-priority-pill {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    min-height: 36px;
}
.sheet-priority-pill[data-priority="urgent"] { border-color: var(--accent-coral); color: var(--accent-coral); }
.sheet-priority-pill[data-priority="high"] { border-color: var(--accent-gold); color: var(--accent-gold); }
.sheet-priority-pill[data-priority="normal"] { border-color: var(--accent-blue); color: var(--accent-blue); }
.sheet-priority-pill[data-priority="low"] { border-color: var(--text-muted); color: var(--text-muted); }

.sheet-priority-pill.selected[data-priority="urgent"] { background: var(--accent-coral); color: #0B1120; }
.sheet-priority-pill.selected[data-priority="high"] { background: var(--accent-gold); color: #0B1120; }
.sheet-priority-pill.selected[data-priority="normal"] { background: var(--accent-blue); color: #0B1120; }
.sheet-priority-pill.selected[data-priority="low"] { background: var(--text-muted); color: #0B1120; }

.sheet-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.sheet-tag-pill {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(96,165,250,0.15);
    color: var(--accent-blue);
}
.sheet-tag-pill .sheet-tag-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 13px;
    line-height: 1;
}
.sheet-tag-pill .sheet-tag-remove:hover { opacity: 1; }
.sheet-tag-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-sans);
    width: 80px;
    min-height: 28px;
}
.sheet-tag-input::placeholder { color: var(--text-muted); }

.sheet-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: #0B1120;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    margin-top: 4px;
}
.sheet-submit-btn:active {
    transform: scale(0.98);
}

/* Enhanced mobile note editor — touch-friendly */
@media (max-width: 768px) {
    .md-toolbar .tb-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 8px;
    }
    .mode-toggle button {
        min-height: 36px;
        padding: 6px 12px;
    }
    .meta-section {
        gap: 16px;
    }
    .upload-zone {
        padding: 20px 16px;
    }
    .editor-footer .btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* ─── Touch Target Minimums ────────────────────────────── */
@media (max-width: 768px) {
    .sheet-quick-date-btn,
    .sheet-priority-pill,
    .sheet-submit-btn,
    .quick-add-submit,
    .quick-add-more {
        min-height: 44px;
    }
    .quick-add-submit,
    .quick-add-more {
        width: 40px;
        height: 40px;
    }
}

/* ─── Offline Note Indicator ──────────────────────────── */
.note-offline-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent-orange);
    color: #fff;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
}

.offline-indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: offline-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.offline-indicator-text {
    flex: 1;
}

.offline-indicator-badge {
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* Upload zone disabled state when offline */
.upload-zone-offline {
    opacity: 0.5;
    pointer-events: none;
    border-color: var(--text-muted) !important;
    background: transparent !important;
}

.upload-zone-offline:hover {
    border-color: var(--text-muted) !important;
}

/* Save indicator offline state */
.save-indicator.offline-saved {
    color: var(--accent-orange);
    font-weight: 600;
}

/* Sync progress animation for note list cards */
.note-card.syncing {
    opacity: 0.7;
    position: relative;
}

.note-card.syncing::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-orange);
    animation: sync-progress 1.5s ease-in-out infinite;
}

@keyframes sync-progress {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    51% { transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* Mobile responsive offline indicator */
@media (max-width: 768px) {
    .note-offline-indicator {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 0;
    }
}

/* ── Shared Items Sidebar ─────────────────────────────── */
.dash-sidebar-shared {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shared-sharer-group {
    margin-bottom: 0.25rem;
}

.shared-sharer-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.shared-sharer-header:hover {
    background: var(--bg-hover);
}

.shared-sharer-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.shared-sharer-name {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-sharer-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 0.1rem 0.375rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.shared-sharer-items {
    display: flex;
    flex-direction: column;
    padding-left: 2rem;
    overflow: hidden;
    transition: max-height var(--transition-med);
}

.shared-sharer-group.collapsed .shared-sharer-items {
    display: none;
}

.shared-item-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.375rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.shared-item-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.shared-item-type-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.shared-item-task {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue, #60A5FA);
}

.shared-item-note {
    background: rgba(168, 85, 247, 0.15);
    color: var(--accent-purple, #A855F7);
}

.shared-item-list {
    background: rgba(255, 107, 44, 0.15);
    color: var(--accent-orange);
}

.shared-item-category {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent-green, #34D399);
}

.shared-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.shared-item-more {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    font-style: italic;
}

/* ── Tag Picker — Note Editor Context ─────────────────── */
.note-editor-page .tags-area .tag-picker {
    margin: 0;
}

.note-editor-page .tags-area .tag-picker-input {
    background: var(--bg-root);
}

/* ── Tag Picker — Task Detail Sidebar Context ─────────── */
.task-detail-sidebar .tag-picker {
    margin: 0.25rem 0 0;
}

.task-detail-sidebar .tag-picker-input {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

.task-detail-sidebar .tag-picker-pills {
    margin-bottom: 0.25rem;
}

.task-detail-sidebar .tag-pill {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
}

/* ── Shared Badge in Sidebar Heading ──────────────────── */
.dash-sidebar-heading .dash-sidebar-badge {
    margin-left: auto;
}

/* ── FIX: Activity sidebar bleed at mobile viewports ──── */
@media (max-width: 768px) {
    aside.activity-sidebar {
        right: -100%;
        width: 100%;
        overflow: hidden;
    }
    aside.activity-sidebar.open {
        right: 0;
    }
}

/* ── FIX: Hide PWA install button at mobile — use browser banner ── */
@media (max-width: 480px) {
    #pwa-install-btn {
        display: none !important;
    }
}

/* ── FIX: Touch targets min 44px on mobile ──────────── */
@media (max-width: 768px) {
    .nav-icon-btn,
    .nav-link,
    .nav-link-accent,
    .btn,
    .btn-sm,
    .btn-secondary,
    .btn-primary,
    .btn-danger,
    .btn-text-sm,
    .tb-btn,
    .dash-tab-btn,
    .quick-add-action,
    .quick-add-submit,
    .quick-add-more,
    .sheet-priority-pill,
    .sheet-quick-date-btn,
    .sheet-submit-btn,
    .dash-tag-pill,
    .dash-tag-clear,
    .back-link,
    .subtask-add-btn,
    .comment-submit-btn,
    .version-btn,
    .theme-option,
    .filter-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ─── W6-A: Welcome Page Redesign ──────────────────────── */

.welcome-page {
    width: 100%;
}

/* ─── HOTFIX-9: Welcome + Auth animations ──────────────── */

@keyframes heroMesh {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    35% { transform: translate(16px, -20px) scale(1.06); }
    65% { transform: translate(-10px, 12px) scale(0.96); }
}

@keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-18px, 14px) scale(1.08); }
    70% { transform: translate(12px, -8px) scale(0.94); }
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.6); }
}

@keyframes taskSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes featureSlideIn {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes authPanelShift {
    0% { background-position: 0% 60%; }
    50% { background-position: 100% 40%; }
    100% { background-position: 0% 60%; }
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.welcome-hero {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg,
        var(--bg-root),
        rgba(255,107,44,0.06),
        rgba(170,255,0,0.04),
        var(--bg-root)
    );
    background-size: 400% 400%;
    animation: heroMesh 14s ease infinite;
}

.welcome-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(255,107,44,0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 65%, rgba(170,255,0,0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(96,165,250,0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.welcome-hero > * { position: relative; z-index: 1; }

/* Floating blobs */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-blob-1 {
    top: -80px; right: -60px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255,107,44,0.12) 0%, transparent 70%);
    animation: blobDrift1 18s ease-in-out infinite;
}

.hero-blob-2 {
    bottom: -100px; left: -40px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(170,255,0,0.08) 0%, transparent 70%);
    animation: blobDrift2 22s ease-in-out infinite;
}

.hero-blob-3 {
    top: 40%; left: 50%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(96,165,250,0.06) 0%, transparent 70%);
    animation: blobDrift1 20s ease-in-out infinite 2s;
}

/* Pulsing dots */
.hero-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-orange);
    pointer-events: none;
    z-index: 0;
}

.hero-dot-1 { width: 8px; height: 8px; top: 20%; right: 15%; animation: dotPulse 3s ease-in-out infinite; }
.hero-dot-2 { width: 6px; height: 6px; top: 50%; right: 30%; animation: dotPulse 3s ease-in-out infinite 0.7s; }
.hero-dot-3 { width: 10px; height: 10px; bottom: 25%; right: 12%; animation: dotPulse 3s ease-in-out infinite 1.4s; }
.hero-dot-4 { width: 5px; height: 5px; top: 15%; left: 25%; animation: dotPulse 3s ease-in-out infinite 0.3s; }

/* Gradient text */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-hero-content {
    flex: 1;
    max-width: 560px;
    animation: welcomeSlideUp 0.6s ease-out both;
}

.welcome-hero-content h1 {
    font-size: 3.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.welcome-hero-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.welcome-login-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

.welcome-login-link:hover {
    text-decoration: underline;
}

.welcome-hero-visual {
    flex: 1;
    max-width: 500px;
    animation: welcomeSlideUp 0.8s ease-out 0.3s both;
}

/* Browser frame wrapper */
.browser-frame {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.browser-frame-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.browser-dot--red { background: #FF5F57; }
.browser-dot--yellow { background: #FFBD2E; }
.browser-dot--green { background: #28C840; }

.browser-url {
    flex: 1;
    margin-left: 8px;
    padding: 4px 12px;
    background: var(--bg-root);
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-mock-dashboard {
    background: var(--bg-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 1.5rem;
    border-top: none;
}

.mock-greeting {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.mock-task {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: taskSlideIn 0.4s ease both;
}
.mock-task:nth-child(2) { animation-delay: 0.6s; }
.mock-task:nth-child(3) { animation-delay: 0.9s; }
.mock-task:nth-child(4) { animation-delay: 1.2s; }

.mock-task-indicator {
    width: 4px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.mock-task-text {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.mock-activity {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0;
    animation: taskSlideIn 0.4s ease both 1.6s;
}

/* Trust strip */
.welcome-trust-strip {
    background: var(--bg-elevated);
    padding: 2.5rem 2rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.welcome-trust-inner {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.welcome-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.welcome-trust-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,107,44,0.1);
    color: var(--accent-orange);
    flex-shrink: 0;
}

.welcome-trust-icon svg {
    width: 18px;
    height: 18px;
}

.welcome-trust-icon .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: dotPulse 2s ease-in-out infinite;
}

.welcome-features {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.welcome-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.welcome-feature-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    animation: welcomeSlideUp 0.5s ease-out both;
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-card);
    border-top: 3px solid;
    border-image: var(--gradient-brand) 1;
    transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
    cursor: default;
}

.welcome-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card), 0 0 30px rgba(255,107,44,0.1);
}

.welcome-feature-card:nth-child(1) { animation-delay: 0.1s; }
.welcome-feature-card:nth-child(2) { animation-delay: 0.2s; }
.welcome-feature-card:nth-child(3) { animation-delay: 0.3s; }
.welcome-feature-card:nth-child(4) { animation-delay: 0.4s; }

.welcome-feature-icon {
    width: 48px;
    height: 48px;
    color: var(--accent-orange);
    margin-bottom: 1.25rem;
}

.welcome-feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.welcome-feature-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.welcome-themes {
    padding: 4rem 2rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-elevated);
}

.welcome-themes h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.welcome-themes > p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-theme-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.welcome-theme-swatches {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    max-width: 320px;
}

.welcome-theme-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 2px solid var(--border-subtle);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.welcome-theme-swatch:hover,
.welcome-theme-swatch.active {
    transform: scale(1.2);
    border-color: var(--accent-orange);
    box-shadow: 0 0 12px rgba(255,107,44,0.3);
}

.welcome-theme-swatch-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Theme mini-preview card */
.theme-preview-card {
    width: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    transition: background var(--transition-med), border-color var(--transition-med);
}

.theme-preview-header {
    padding: 12px 14px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: color var(--transition-med), background var(--transition-med);
}

.theme-preview-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    transition: color var(--transition-med), background var(--transition-med);
}

.theme-preview-indicator {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    transition: background var(--transition-med);
}

.theme-preview-footer {
    padding: 8px 14px;
    font-size: 0.65rem;
    border-top: 1px solid;
    transition: color var(--transition-med), background var(--transition-med), border-color var(--transition-med);
}

.welcome-stats {
    padding: 2rem;
    overflow: hidden;
    background: var(--bg-surface);
}

.welcome-stats:hover .welcome-stats-inner {
    animation-play-state: paused;
}

.welcome-stats-inner {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

.welcome-stat-badge {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    white-space: nowrap;
    font-weight: 500;
}

.welcome-cta {
    text-align: center;
    padding: 5rem 2rem;
    background: var(--bg-elevated);
    position: relative;
}

.welcome-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,107,44,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.welcome-cta h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.welcome-cta-reassurance {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@keyframes welcomeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .welcome-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .welcome-hero {
        flex-direction: column;
        padding: 3rem 1.5rem 2rem;
        text-align: center;
        gap: 2rem;
    }
    .welcome-hero-content { max-width: 100%; }
    .welcome-hero-content h1 { font-size: 2.25rem; }
    .welcome-hero-visual { max-width: 100%; }
    .welcome-trust-inner { gap: 1.5rem; }
    .welcome-trust-inner { display: grid; grid-template-columns: 1fr 1fr; }
    .welcome-features { padding: 2.5rem 1.5rem; }
    .welcome-features-grid { grid-template-columns: 1fr; }
    .welcome-themes { padding: 2.5rem 1.5rem; }
    .welcome-theme-showcase { flex-direction: column; gap: 1.5rem; }
    .welcome-theme-swatch { width: 36px; height: 36px; }
    .theme-preview-card { width: 100%; max-width: 280px; }
    .welcome-stats { padding: 1.5rem 1rem; }
    .welcome-cta { padding: 3rem 1.5rem; }
    .welcome-cta h2 { font-size: 1.75rem; }
    .btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-hero-content,
    .welcome-hero-visual,
    .welcome-feature-card,
    .welcome-hero,
    .mock-task,
    .mock-activity,
    .hero-blob,
    .hero-dot,
    .welcome-stats-inner {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .welcome-theme-swatch:hover {
        transform: none;
    }
    .welcome-feature-card:hover {
        transform: none;
    }
}

/* ─── W1-A: Reduced-motion accessibility ──────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Kill ALL animations globally */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── W4-A: App Layout — Universal Sidebar + Slim Navbar ─── */

/* App layout — flex container wrapping sidebar + main + activity */
.app-layout {
    display: flex;
    min-height: calc(100vh - 64px);
}

/* Universal left sidebar */
.app-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    padding: 16px 0;
    overflow-y: auto;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    display: none;
    flex-shrink: 0;
    z-index: var(--z-base);
}

/* Sidebar nav links */
.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.app-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.app-sidebar-link:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-link.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.app-sidebar-link svg { flex-shrink: 0; opacity: 0.7; }
.app-sidebar-link:hover svg, .app-sidebar-link.active svg { opacity: 1; }

.app-sidebar-badge {
    margin-left: auto; background: var(--accent-orange); color: #fff;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
    border-radius: var(--radius-pill); min-width: 20px; text-align: center;
}

.app-sidebar-divider { height: 1px; background: var(--border-subtle); margin: 12px 16px; }

.app-sidebar-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    padding: 8px 12px 4px; margin: 0;
}

.app-sidebar-section { padding: 0 12px; }

/* List items in sidebar */
.app-sidebar-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px; transition: all var(--transition-fast);
}
.app-sidebar-list-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-list-item.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }

.app-sidebar-list-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.app-sidebar-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar-list-count {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
}

/* Category items in sidebar */
.app-sidebar-cat-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.app-sidebar-cat-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-cat-item.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.app-sidebar-cat-all {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.app-sidebar-cat-all:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-cat-all.active { color: var(--accent-orange);
}
.app-sidebar-cat-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.app-sidebar-cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar-cat-counts { font-size: 11px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.cat-count-tasks { font-weight: 600; }
.cat-count-notes { font-size: 10px; opacity: 0.7; }
.cat-count-notes::before { content: '\00b7 '; }
.cat-count-tasks::after { content: 't'; font-size: 9px; opacity: 0.6; margin-left: 1px; }
.cat-count-notes::after { content: 'n'; font-size: 9px; opacity: 0.6; margin-left: 1px; }

/* Sidebar theme picker */
.app-sidebar-theme-trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    background: none; border: none; cursor: pointer; width: 100%;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.app-sidebar-theme-trigger:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-theme-trigger svg { flex-shrink: 0; opacity: 0.7; }

.app-sidebar-theme-picker {
    display: none; padding: 4px 0;
    flex-direction: column; gap: 1px;
}
.app-sidebar-theme-picker.open { display: flex; }

.app-sidebar-theme-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; font-size: 12px; color: var(--text-secondary);
    background: none; border: none; cursor: pointer; width: 100%;
    text-align: left; border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.app-sidebar-theme-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.app-sidebar-theme-item.active { color: var(--accent-orange); background: rgba(255,107,44,0.08); }
.app-sidebar-theme-item.active::after { content: '\2713'; margin-left: auto; font-size: 11px; }

.theme-swatch-mini {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--border-subtle); display: inline-block;
}
.theme-name { flex: 1; }
.theme-group-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); padding: 6px 8px 2px; font-weight: 600;
}

/* Avatar dropdown in navbar */
.nav-avatar-wrap { position: relative; }

.nav-avatar-trigger {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    color: var(--text-primary); font-size: 0.9rem; font-weight: 500;
    padding: 4px 8px; border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.nav-avatar-trigger:hover { background: var(--bg-elevated); }

.nav-avatar-caret {
    width: 12px; height: 12px; opacity: 0.5;
    transition: transform var(--transition-fast);
}
.nav-avatar-wrap.open .nav-avatar-caret { transform: rotate(180deg); }

.nav-avatar-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); min-width: 160px;
    box-shadow: var(--shadow-card); z-index: var(--z-dropdown);
    overflow: hidden;
}
.nav-avatar-wrap.open .nav-avatar-dropdown { display: block; }

.nav-avatar-item {
    display: block; padding: 10px 16px; color: var(--text-secondary);
    text-decoration: none; font-size: 0.85rem; font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-avatar-item:hover { background: var(--bg-surface); color: var(--text-primary); }

.nav-avatar-logout { color: var(--accent-coral); }
.nav-avatar-logout:hover { color: var(--accent-coral); background: var(--bg-surface); }

/* Main content inside app-layout */
.app-layout .main-content {
    flex: 1;
    min-width: 0;
    max-width: none;
}

/* Dashboard layout — now 2-column (sidebar moved to app-layout) */
.app-layout .dashboard-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
}

/* Show sidebar at desktop widths */
@media (min-width: 1025px) {
    .app-sidebar { display: flex; flex-direction: column; }
}

/* Below 1024px — sidebar hidden (default), dashboard single column */
@media (max-width: 1024px) {
    .app-layout .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .app-layout .dashboard-layout > .activity-sidebar {
        display: none;
    }
}

/* Touch targets for future mobile drawer (W4-C) */
@media (max-width: 1024px) {
    .app-sidebar-link,
    .app-sidebar-list-item,
    .app-sidebar-theme-trigger {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ─── W4-B: Mobile Hamburger Drawer, 4-Tab Bar, Install Banner ─── */

/* Drawer backdrop */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease, visibility 250ms;
}
.drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Drawer menu panel */
.drawer-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    z-index: calc(var(--z-overlay) + 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    padding: 16px 0;
    padding-top: env(safe-area-inset-top, 16px);
    visibility: hidden;
}
.drawer-menu.open {
    transform: translateX(0);
    visibility: visible;
}

/* Drawer user card */
.drawer-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.drawer-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.drawer-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drawer-user-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer nav links */
.drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-link:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-link.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.drawer-link svg { flex-shrink: 0; opacity: 0.7; width: 18px; height: 18px; }
.drawer-link:hover svg, .drawer-link.active svg { opacity: 1; }
.drawer-link-static { cursor: default; }
.drawer-link-logout { color: var(--accent-coral); }
.drawer-link-logout:hover { color: var(--accent-coral); }

/* Drawer badge, divider, heading, section */
.drawer-badge {
    margin-left: auto;
    background: var(--accent-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    min-width: 20px;
    text-align: center;
}
.drawer-divider { height: 1px; background: var(--border-subtle); margin: 8px 16px; }
.drawer-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    padding: 8px 12px 4px; margin: 0;
}
.drawer-section { padding: 0 12px; }

/* Drawer list/category items */
.drawer-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; min-height: 44px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px; transition: all var(--transition-fast);
}
.drawer-list-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-list-item.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.drawer-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drawer-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-list-count { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.drawer-cat-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; min-height: 44px; font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.drawer-cat-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-cat-item.active { background: rgba(255, 107, 44, 0.1); color: var(--accent-orange); }
.drawer-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drawer-cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-cat-counts { font-size: 11px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }

/* Drawer theme picker */
.drawer-theme-trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; min-height: 44px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 14px; font-weight: 500;
    background: none; border: none; cursor: pointer; width: 100%;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-theme-trigger:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-theme-trigger svg { flex-shrink: 0; opacity: 0.7; width: 18px; height: 18px; }

.drawer-theme-picker { display: none; padding: 4px 0; flex-direction: column; gap: 1px; }
.drawer-theme-picker.open { display: flex; }

.drawer-theme-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; min-height: 40px; font-size: 13px;
    color: var(--text-secondary); background: none; border: none;
    cursor: pointer; width: 100%; text-align: left;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-theme-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-theme-item.active { color: var(--accent-orange); background: rgba(255,107,44,0.08); }
.drawer-theme-item.active::after { content: '\2713'; margin-left: auto; font-size: 12px; }

/* Hamburger button (visible on mobile/tablet only) */
.drawer-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: calc(var(--z-overlay) + 2);
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.drawer-hamburger:hover { background: var(--bg-surface); }
.drawer-hamburger svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
    .drawer-hamburger { display: flex; }
    .nav-bar .nav-container { padding-left: 56px; }
}

/* Install App banner — positioned fixed so it never eats flex space in .app-layout */
.install-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text-secondary);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
    .install-banner { bottom: 56px; }
}
.install-banner-text { flex: 1; }
.install-banner-btn {
    background: var(--accent-orange);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.install-banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

/* Desktop: force-hide drawer components */
@media (min-width: 1025px) {
    .drawer-hamburger { display: none !important; }
    .drawer-menu { display: none !important; }
    .drawer-backdrop { display: none !important; }
    .nav-bar .nav-container { padding-left: initial; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .drawer-menu { transition: none; }
    .drawer-backdrop { transition: none; }
}

/* ─── W4-C: Tablet Icon-Rail Sidebar ─── */

/* Smooth sidebar width transition at desktop */
@media (min-width: 1025px) {
    .app-sidebar {
        transition: width 200ms ease, min-width 200ms ease;
    }
}

/* Tablet icon-rail: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Show sidebar as narrow icon rail */
    .app-sidebar {
        display: flex;
        flex-direction: column;
        width: 48px;
        min-width: 48px;
        padding: 12px 0;
        overflow: visible;
        transition: width 200ms ease, min-width 200ms ease;
    }

    /* Hide text labels, centre icons */
    .app-sidebar-label { display: none; }

    .app-sidebar-link {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
        position: relative;
    }

    .app-sidebar-badge { display: none; }
    .app-sidebar-heading { display: none; }
    .app-sidebar-divider { margin: 6px 8px; }

    /* Hide category and list sections — available via drawer */
    .app-sidebar-section { display: none; }
    .app-sidebar-list-item { display: none; }
    .app-sidebar-cat-item { display: none; }

    /* Show theme section only (last sidebar-section) */
    .app-sidebar > .app-sidebar-section:last-of-type {
        display: block;
        position: relative;
        padding: 0;
    }

    /* Theme trigger in icon rail */
    .app-sidebar-theme-trigger {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
        position: relative;
    }

    /* Theme picker flyout */
    .app-sidebar-theme-picker {
        position: absolute;
        left: 48px;
        top: 0;
        background: var(--bg-elevated);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        z-index: var(--z-dropdown);
        padding: 8px;
        width: auto;
    }

    /* Sidebar nav padding reset for icon rail */
    .app-sidebar-nav { padding: 0 4px; }

    /* Hide hamburger — icon rail provides navigation */
    .drawer-hamburger { display: none; }
    .nav-bar .nav-container { padding-left: 16px; }

    /* Tooltips on hover via data-tooltip */
    .app-sidebar-link::after,
    .app-sidebar-theme-trigger::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-elevated);
        color: var(--text-primary);
        border: 1px solid var(--border-subtle);
        padding: 4px 10px;
        border-radius: var(--radius-sm);
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 150ms ease, visibility 150ms;
        z-index: var(--z-dropdown);
        box-shadow: var(--shadow-card);
    }
    .app-sidebar-link:hover::after,
    .app-sidebar-theme-trigger:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

/* Reduced motion for icon-rail transitions and tooltips */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
    .app-sidebar-link::after,
    .app-sidebar-theme-trigger::after { transition: none; }
}

/* ─── W6-B: Login & Register Split Layout ──────────────── */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
}

.auth-split {
    display: flex;
    min-height: calc(100vh - 120px);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.auth-left-panel {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(-45deg, var(--bg-root), var(--bg-elevated), rgba(255,107,44,0.07), var(--bg-root));
    background-size: 400% 400%;
    animation: authPanelShift 14s ease infinite;
    border-right: 3px solid;
    border-image: var(--gradient-brand) 1;
    position: relative;
    overflow: hidden;
}

.auth-left-panel .auth-logo {
    justify-content: flex-start;
}

.auth-left-tagline {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.auth-left-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.auth-left-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
    opacity: 0;
    animation: featureSlideIn 0.45s ease both;
}
.auth-left-feature:nth-child(1) { animation-delay: 0.2s; }
.auth-left-feature:nth-child(2) { animation-delay: 0.35s; }
.auth-left-feature:nth-child(3) { animation-delay: 0.5s; }
.auth-left-feature:nth-child(4) { animation-delay: 0.65s; }

.auth-left-feature svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent-orange);
    margin-top: 2px;
    padding: 7px;
    box-sizing: content-box;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.auth-left-reassurance {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 1rem;
}

.auth-right-panel {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-root);
}

.auth-right-panel .auth-card {
    max-width: 420px;
    width: 100%;
    margin: 0;
}

.input-error {
    border-color: var(--accent-coral) !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.auth-card-shake {
    animation: authShake 0.5s ease;
}

.btn-primary.loading {
    opacity: 0.8;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .auth-split {
        flex-direction: column;
        min-height: auto;
    }
    .auth-left-panel {
        display: none;
    }
    .auth-right-panel {
        flex: 1;
        padding: 1rem;
    }
    .auth-right-panel .auth-card {
        max-width: 440px;
        margin: 1rem auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .auth-left-panel {
        flex: 0 0 45%;
        padding: 2rem;
    }
    .auth-right-panel {
        flex: 0 0 55%;
    }
    .auth-left-tagline {
        font-size: 1.5rem;
    }
}

/* Auth blobs + dots (reuse hero classes inside auth panel) */
.auth-left-panel .hero-blob { z-index: 0; }
.auth-left-panel .hero-dot { z-index: 0; }
.auth-left-panel > .auth-logo,
.auth-left-panel > .auth-left-tagline,
.auth-left-panel > .auth-left-features,
.auth-left-panel > .auth-left-reassurance {
    position: relative;
    z-index: 1;
}

/* Auth submit button upgrade */
.auth-card .btn-primary {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-coral));
    box-shadow: 0 4px 14px rgba(255,107,44,0.35);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.auth-card .btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,107,44,0.45);
}

/* Auth form card stripe bump 3px → 4px */
.auth-card::before {
    height: 4px !important;
}

/* Mobile brand strip (replaces hidden left panel) */
.auth-mobile-brand {
    display: none;
    background: linear-gradient(135deg, var(--bg-root), rgba(255,107,44,0.08), var(--bg-root));
    padding: 1.25rem 1.5rem;
    text-align: center;
    border-bottom: 2px solid;
    border-image: var(--gradient-brand) 1;
}

.auth-mobile-brand .auth-logo {
    justify-content: center;
    margin-bottom: 0.25rem;
}

.auth-mobile-brand .auth-mobile-tagline {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Password criteria checklist */
.password-criteria {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.password-criterion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

.password-criterion.met {
    color: var(--accent-green);
}

.password-criterion-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .auth-mobile-brand {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card-shake { animation: none; }
    .auth-left-feature { animation: none !important; opacity: 1; }
    .auth-left-panel { animation: none !important; }
    .hero-blob, .hero-dot { animation: none !important; }
    .mock-task, .mock-activity { animation: none !important; opacity: 1; }
    .welcome-stats-inner { animation: none !important; }
    .welcome-feature-card:hover { transform: none; }
}

/* ─── W5-A: Keyboard shortcuts manager ──────────────── */

/* Keyboard help overlay */
.keyboard-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
}

.keyboard-help-overlay[style*="display: flex"],
.keyboard-help-overlay[style*="display:flex"] {
    display: flex;
}

.keyboard-help-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.keyboard-help-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1;
}

.keyboard-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.keyboard-help-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.keyboard-help-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.keyboard-help-close:hover {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.keyboard-help-body {
    padding: 16px 24px;
}

.keyboard-help-section {
    margin-bottom: 20px;
}

.keyboard-help-section:last-child {
    margin-bottom: 0;
}

.keyboard-help-section h3 {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.keyboard-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.keyboard-help-keys {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.keyboard-help-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.keyboard-help-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* kbd element styling — raised beveled look */
kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Chord tooltip */
.chord-tooltip {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    box-shadow: var(--shadow-card);
    z-index: calc(var(--z-modal) - 1);
    white-space: nowrap;
    pointer-events: none;
    animation: chordTooltipIn 150ms ease;
}

@keyframes chordTooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile responsive for keyboard help */
@media (max-width: 767px) {
    .keyboard-help-content {
        width: 94%;
        max-height: 75vh;
        margin: 0 auto;
    }

    .keyboard-help-header {
        padding: 16px 16px 10px;
    }

    .keyboard-help-body {
        padding: 12px 16px;
    }

    .keyboard-help-footer {
        padding: 10px 16px;
    }

    .chord-tooltip {
        bottom: 100px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chord-tooltip {
        animation: none;
    }
}

/* ─── W8-A: Theme atmospherics — Mission Control, Neon Rapture, Sunset Cove ─── */

/* Mission Control: CRT curvature vignette on cards */
[data-theme="mission-control"] .card,
[data-theme="mission-control"] .list-card,
[data-theme="mission-control"] .task-card {
    box-shadow: inset 0 0 30px rgba(0,0,0,0.3), 0 0 8px rgba(51,255,51,0.05);
    border: 1px solid rgba(51,255,51,0.15);
}

/* Neon Rapture: neon glow borders on cards */
[data-theme="neon-rapture"] .card,
[data-theme="neon-rapture"] .list-card,
[data-theme="neon-rapture"] .task-card {
    border: 1px solid rgba(255,45,111,0.2);
    box-shadow: 0 0 8px rgba(255,45,111,0.08), inset 0 0 8px rgba(0,229,255,0.04);
    transition: box-shadow var(--transition-med);
}
[data-theme="neon-rapture"] .card:hover,
[data-theme="neon-rapture"] .list-card:hover,
[data-theme="neon-rapture"] .task-card:hover {
    box-shadow: 0 0 12px rgba(255,45,111,0.15), 0 0 20px rgba(0,229,255,0.08), inset 0 0 8px rgba(0,229,255,0.06);
}

/* Neon Rapture: art deco font for headings */
[data-theme="neon-rapture"] h1,
[data-theme="neon-rapture"] h2,
[data-theme="neon-rapture"] h3,
[data-theme="neon-rapture"] .nav-brand-text,
[data-theme="neon-rapture"] .modal-title,
[data-theme="neon-rapture"] .card-title {
    font-family: 'Poiret One', var(--font-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Neon Rapture: rain/moisture streaks */
[data-theme="neon-rapture"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(
        95deg,
        transparent 0%,
        transparent 98%,
        rgba(0,229,255,0.03) 98.5%,
        transparent 99%
    );
    background-size: 120px 100%;
    animation: nr-rain-drift 8s linear infinite;
}
@keyframes nr-rain-drift {
    from { background-position: 0 0; }
    to { background-position: 120px 100%; }
}
@media (max-width: 768px) {
    [data-theme="neon-rapture"] body::after {
        display: none;
    }
}

/* Sunset Cove: warm card surfaces */
[data-theme="sunset-cove"] .card,
[data-theme="sunset-cove"] .list-card,
[data-theme="sunset-cove"] .task-card {
    background: linear-gradient(135deg, var(--bg-surface), #2a1835);
    box-shadow: 0 4px 16px rgba(255,107,157,0.06), inset 0 1px 0 rgba(255,170,68,0.06);
}

/* Sunset Cove: warm sidebar gradient */
[data-theme="sunset-cove"] .app-sidebar {
    background: linear-gradient(180deg, var(--bg-surface) 0%, #2a1530 50%, #1e1025 100%);
}

/* Sunset Cove: warm edge vignette */
[data-theme="sunset-cove"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(255,107,157,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(255,170,68,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255,107,157,0.04) 0%, transparent 40%);
}

/* Sunset Cove: mobile flare sizing */
@media (max-width: 768px) {
    [data-theme="sunset-cove"] .sunset-flare {
        width: 80px;
        height: 80px;
        left: 10%;
        top: 3%;
        box-shadow: 0 0 40px 20px rgba(255,204,0,0.15);
    }
}

/* ─── W7-A: Z-Index Tier System ──────────────────────── */
:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* ─── W7-A: Global Focus Indicators ─────────────────── */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Buttons and interactive elements — themed focus ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="checkbox"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Cards and larger interactive elements — subtle shadow instead */
.task-card:focus-visible,
.note-card:focus-visible,
.list-card-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Mobile tab bar items */
.mobile-tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

/* Skip to main content (accessibility) */
.skip-to-main:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: var(--z-toast);
    padding: 8px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 2px solid var(--border-focus);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    text-decoration: none;
}

/* ─── W7-A: Toast Notification System ────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100% - 32px);
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    animation: toastIn 250ms ease forwards;
}

.toast.toast-dismissing {
    animation: toastOut 200ms ease forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.toast-icon svg {
    width: 20px;
    height: 20px;
}

.toast-success .toast-icon { color: #22c55e; }
.toast-error .toast-icon { color: #ef4444; }
.toast-info .toast-icon { color: var(--accent-orange); }

.toast-message {
    flex: 1;
    min-width: 0;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

/* Reduced motion — instant show/hide */
@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .toast.toast-dismissing {
        animation: none;
        opacity: 0;
    }
}

/* Mobile — position above tab bar (56px bar + 14px gap) */
@media (max-width: 767px) {
    .toast-container {
        bottom: 70px;
    }
}

/* ─── W7-B: ARIA + Accessibility — btn-danger, confirmation, tooltips ──────────────── */

/* Danger button — for destructive actions (delete) */
.btn-danger {
    background: transparent;
    border: 1px solid var(--accent-coral);
    color: var(--accent-coral);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-danger:hover {
    background: var(--accent-coral);
    color: #fff;
}

.btn-danger:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

/* btn-danger sizing with btn-sm */
.btn-danger.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
}

/* ─── W8-B: Theme atmospherics — Interphase, Inferno, Winamp ─── */

/* Interphase: shooting star */
[data-theme="interphase"] .app-layout::after {
    content: '';
    position: fixed;
    top: 8%;
    left: 70%;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: rotate(-35deg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: shootingStar 12s ease-in-out infinite;
    animation-delay: 5s;
}
@keyframes shootingStar {
    0%, 90% { opacity: 0; transform: rotate(-35deg) translateX(0); }
    93% { opacity: 1; }
    96% { opacity: 0.8; transform: rotate(-35deg) translateX(200px); }
    97%, 100% { opacity: 0; transform: rotate(-35deg) translateX(250px); }
}

/* Interphase: second shooting star (offset timing) */
[data-theme="interphase"] .main-content::after {
    content: '';
    position: fixed;
    top: 15%;
    left: 40%;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,210,255,0.6), transparent);
    transform: rotate(-25deg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: shootingStar2 18s ease-in-out infinite;
    animation-delay: 11s;
}
@keyframes shootingStar2 {
    0%, 92% { opacity: 0; transform: rotate(-25deg) translateX(0); }
    94% { opacity: 0.7; }
    97% { opacity: 0.5; transform: rotate(-25deg) translateX(150px); }
    98%, 100% { opacity: 0; transform: rotate(-25deg) translateX(180px); }
}

/* Interphase: planet decoration */
[data-theme="interphase"] .app-sidebar::after {
    content: '';
    position: fixed;
    bottom: 12%;
    right: 5%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(99,102,241,0.3), rgba(52,211,153,0.1) 60%, transparent 100%);
    box-shadow: 0 0 20px 5px rgba(99,102,241,0.08);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    [data-theme="interphase"] .app-layout::after,
    [data-theme="interphase"] .main-content::after,
    [data-theme="interphase"] .app-sidebar::after {
        display: none;
    }
}

/* Inferno: flame shapes at viewport bottom */
[data-theme="inferno"] body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    background:
        /* Flame layer 1 — tall, slow */
        radial-gradient(ellipse at 20% 100%, rgba(255,68,0,0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(221,34,0,0.2) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(255,136,0,0.22) 0%, transparent 60%),
        /* Flame layer 2 — shorter, faster */
        radial-gradient(ellipse at 35% 100%, rgba(255,204,0,0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 65% 100%, rgba(255,68,0,0.18) 0%, transparent 50%);
    animation: flameWave 3s ease-in-out infinite alternate;
}
@keyframes flameWave {
    0% {
        height: 120px;
        opacity: 0.8;
        background-position: 0% 0%;
    }
    50% {
        height: 140px;
        opacity: 1;
        background-position: 5% 0%;
    }
    100% {
        height: 110px;
        opacity: 0.85;
        background-position: -3% 0%;
    }
}

/* Inferno: ember particles */
[data-theme="inferno"] .main-content::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(2px 2px at 15% 85%, rgba(255,68,0,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 90%, rgba(255,204,0,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 80%, rgba(255,136,0,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 95%, rgba(255,68,0,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 88%, rgba(255,204,0,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 82%, rgba(255,136,0,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 8% 92%, rgba(255,68,0,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 75%, rgba(255,204,0,0.5) 0%, transparent 100%);
    background-size: 100% 300%;
    animation: emberRise 8s linear infinite;
}
@keyframes emberRise {
    from { background-position: 0 100%; }
    to { background-position: 0 -200%; }
}

@media (max-width: 768px) {
    [data-theme="inferno"] body::after {
        height: 60px;
        animation: none;
        opacity: 0.5;
    }
    [data-theme="inferno"] .main-content::before {
        display: none;
    }
}

/* Winamp: beveled panel cards */
[data-theme="winamp"] .card,
[data-theme="winamp"] .list-card,
[data-theme="winamp"] .task-card {
    border: 1px solid #444466;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.1),
        inset -1px -1px 0 rgba(0,0,0,0.3),
        2px 2px 4px rgba(0,0,0,0.4);
    border-radius: 0 !important;
    background: linear-gradient(180deg, #2a2a48 0%, #222240 100%);
}

/* Winamp: LCD display panel for brand text */
[data-theme="winamp"] .nav-brand {
    background: #0a0a12;
    border: 1px solid #333355;
    box-shadow:
        inset 2px 2px 4px rgba(0,0,0,0.5),
        inset -1px -1px 0 rgba(80,80,120,0.15);
    padding: 4px 12px;
    border-radius: 0;
    margin: 4px 0;
}
[data-theme="winamp"] .nav-brand-text {
    text-shadow: 0 0 8px rgba(0,255,0,0.6), 0 0 20px rgba(0,255,0,0.3);
    animation: lcdScroll 8s linear infinite;
    color: #00ff00;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

/* Winamp: classic raised button style */
[data-theme="winamp"] .btn-primary {
    background: linear-gradient(180deg, #4a4a6e, #3a3a5e, #2a2a48);
    border: 1px solid #555577;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset -1px -1px 0 rgba(0,0,0,0.25);
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: #00ff00;
    text-shadow: 0 0 4px rgba(0,255,0,0.4);
    transform: none;
}
[data-theme="winamp"] .btn-primary:hover {
    background: linear-gradient(180deg, #5a5a7e, #4a4a6e, #3a3a58);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.15),
        inset -1px -1px 0 rgba(0,0,0,0.2);
}
[data-theme="winamp"] .btn-primary:active {
    background: linear-gradient(180deg, #2a2a48, #3a3a5e, #4a4a6e);
    box-shadow:
        inset -1px -1px 0 rgba(255,255,255,0.1),
        inset 1px 1px 0 rgba(0,0,0,0.3);
}

/* Winamp: VU meter stats display */
[data-theme="winamp"] .stats-row {
    background: #0a0a12;
    border: 1px solid #333355;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5);
    border-radius: 0 !important;
    padding: 8px;
}
[data-theme="winamp"] .stat-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-right: 1px solid rgba(0,255,0,0.15);
}
[data-theme="winamp"] .stat-card:last-child {
    border-right: none;
}
[data-theme="winamp"] .stat-value {
    color: #00ff00;
    text-shadow: 0 0 6px rgba(0,255,0,0.4);
    font-family: 'Courier New', monospace;
}
[data-theme="winamp"] .stat-label {
    color: #ffcc00;
    text-shadow: 0 0 4px rgba(255,204,0,0.3);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Winamp: ridged texture on modals and elevated surfaces */
[data-theme="winamp"] .modal-content,
[data-theme="winamp"] .dropdown-menu {
    border: 1px solid #555577;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.08),
        inset -1px -1px 0 rgba(0,0,0,0.3),
        4px 4px 8px rgba(0,0,0,0.5);
    border-radius: 0 !important;
    background: linear-gradient(180deg, #2a2a48, #222240);
}

/* Winamp: sunken input fields */
[data-theme="winamp"] input[type="text"],
[data-theme="winamp"] input[type="email"],
[data-theme="winamp"] input[type="password"],
[data-theme="winamp"] input[type="search"],
[data-theme="winamp"] textarea,
[data-theme="winamp"] select {
    background: #0a0a12;
    border: 1px solid #333355;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5);
    border-radius: 0 !important;
    color: #00ff00;
    font-family: 'Courier New', monospace;
}
[data-theme="winamp"] input::placeholder,
[data-theme="winamp"] textarea::placeholder {
    color: rgba(0,255,0,0.3);
}

/* ─── W9-A: Skeleton loading ──────────────────────────── */

.skeleton {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.skeleton-stat-card {
    flex: 1;
    min-height: 80px;
    padding: 16px;
}

.skeleton-task-item {
    height: 56px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-list-card {
    min-height: 120px;
}

.skeleton-lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.skeleton-row {
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.skeleton-row--short { width: 40%; }
.skeleton-row--medium { width: 65%; }
.skeleton-row--full { width: 100%; }

.skeleton-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
}

@media (max-width: 767px) {
    .skeleton-stats-row {
        flex-direction: column;
    }
}

/* ─── W9-A: Task animations ──────────────────────────── */

@keyframes task-fade-out {
    0%   { opacity: 1; transform: translateX(0); max-height: 80px; }
    100% { opacity: 0; transform: translateX(30px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

.task-removing {
    animation: task-fade-out 0.25s ease forwards;
    pointer-events: none;
}

@keyframes task-highlight-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0.4); }
    50%  { box-shadow: 0 0 12px 4px rgba(255, 107, 44, 0.25); }
    100% { box-shadow: none; }
}

.task-just-added {
    animation: task-highlight-glow 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .task-removing { animation: none; display: none; }
    .task-just-added { animation: none; }
}

/* ─── W9-A: Theme crossfade ──────────────────────────── */

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-transitioning,
    .theme-transitioning *,
    .theme-transitioning *::before,
    .theme-transitioning *::after {
        transition: none !important;
    }
}

/* ─── W9-A: 404 page ────────────────────────────────── */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.error-page-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

.error-page-content {
    position: relative;
    z-index: 1;
}

.error-page-code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.error-page-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.error-page-message {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
    max-width: 400px;
}

.error-page-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.error-page-btn {
    text-decoration: none;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
}

.error-page-btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.error-page-btn-secondary:hover {
    background: var(--bg-surface);
}

.error-page-suggestions {
    margin-top: 1rem;
}
.error-page-suggestions-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.error-page-suggestions ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.error-page-suggestions a {
    color: var(--accent-orange);
    text-decoration: none;
    font-size: 0.9rem;
}
.error-page-suggestions a:hover {
    text-decoration: underline;
}

/* Snow Storm: falling snow particles */
[data-theme="snow-storm"] .error-page-atmosphere {
    background: radial-gradient(2px 2px at 20% 30%, white 50%, transparent 50%),
                radial-gradient(2px 2px at 40% 70%, white 50%, transparent 50%),
                radial-gradient(1px 1px at 60% 20%, white 50%, transparent 50%),
                radial-gradient(2px 2px at 80% 50%, white 50%, transparent 50%),
                radial-gradient(1px 1px at 10% 80%, white 50%, transparent 50%);
    background-size: 200px 200px;
    animation: snow-fall 8s linear infinite;
    opacity: 0.4;
}
@keyframes snow-fall {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 200px, 30px 200px, -20px 200px, 10px 200px, -10px 200px; }
}

/* Mission Control: green scanlines */
[data-theme="mission-control"] .error-page-atmosphere {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(51, 255, 51, 0.03) 2px,
        rgba(51, 255, 51, 0.03) 4px
    );
    opacity: 1;
}

/* Inferno: warm ember glow */
[data-theme="inferno"] .error-page-atmosphere {
    background: radial-gradient(ellipse at 50% 100%, rgba(255,80,0,0.2) 0%, transparent 70%);
    opacity: 1;
}

/* Neon Rapture: neon haze */
[data-theme="neon-rapture"] .error-page-atmosphere {
    background: radial-gradient(ellipse at 30% 50%, rgba(255,45,111,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 50%, rgba(0,229,255,0.1) 0%, transparent 50%);
    opacity: 1;
}

/* Ocean Floor: deep water caustics */
[data-theme="ocean-floor"] .error-page-atmosphere {
    background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,0.1) 0%, transparent 60%);
    opacity: 1;
}

/* Sakura: petal hint */
[data-theme="sakura"] .error-page-atmosphere {
    background: radial-gradient(ellipse at 50% 30%, rgba(244,114,182,0.08) 0%, transparent 60%);
    opacity: 1;
}

/* Winamp: VU meter glow */
[data-theme="winamp"] .error-page-atmosphere {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,255,0,0.02) 3px,
        rgba(0,255,0,0.02) 6px
    );
    opacity: 1;
}
[data-theme="winamp"] .error-page-code {
    font-family: 'Courier New', monospace;
    -webkit-text-fill-color: #00ff00;
    text-shadow: 0 0 10px rgba(0,255,0,0.5);
}

/* Responsive 404 */
@media (max-width: 767px) {
    .error-page { padding: 1.5rem; min-height: 50vh; }
    .error-page-suggestions ul { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="snow-storm"] .error-page-atmosphere { animation: none; }
}

/* ─── W9-B: CSS spacing/type scale, breadcrumbs ───────────── */

/* Search + Profile breadcrumbs (matches notes breadcrumb pattern) */
.search-page-breadcrumb,
.profile-container > .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.search-page-breadcrumb a,
.profile-container > .breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.search-page-breadcrumb a:hover,
.profile-container > .breadcrumb a:hover {
    color: var(--text-secondary);
}

.search-page-breadcrumb .sep,
.profile-container > .breadcrumb .sep {
    opacity: 0.5;
}

.search-page-breadcrumb .current,
.profile-container > .breadcrumb .current {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ─── W9-C: Password change, notification prefs, note filters ──── */

/* Profile section cards */
.profile-section-card {
    margin-top: var(--space-5, 1.25rem);
}

.profile-section-heading {
    font-size: var(--font-size-lg, 18px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4, 1rem);
    padding-bottom: var(--space-2, 0.5rem);
    border-bottom: 1px solid var(--border-subtle);
}

.form-hint {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted);
    margin-top: var(--space-1, 0.25rem);
}

/* Toggle rows for notification preferences */
.notification-pref-group {
    margin-bottom: var(--space-5, 1.25rem);
}

.notification-pref-subheading {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) 0;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    min-height: 44px; /* touch target */
}

.toggle-row:last-child {
    border-bottom: none;
}

.toggle-row input[type="checkbox"] {
    position: relative;
    width: 44px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill, 12px);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast, 0.15s);
}

.toggle-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
}

.toggle-row input[type="checkbox"]:checked {
    background: var(--accent-green, #AAFF00);
    border-color: var(--accent-green, #AAFF00);
}

.toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(20px);
    background: var(--bg-root);
}

.toggle-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.toggle-label {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-primary);
}

/* Notes filter bar */
.notes-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
    margin-bottom: var(--space-5, 1.25rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
}

.notes-filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.notes-filter-label {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.notes-filter-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 4px);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 14px);
    cursor: pointer;
    min-height: 36px;
}

.notes-filter-select:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.notes-filter-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 14px);
    cursor: pointer;
    padding: var(--space-2, 0.5rem);
    transition: color var(--transition-fast, 0.15s);
}

.notes-filter-clear:hover {
    color: var(--text-primary);
}

/* Responsive: profile password/notification sections */
@media (max-width: 767px) {
    .notes-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-filter-label {
        margin-bottom: var(--space-1, 0.25rem);
    }

    .toggle-row {
        padding: var(--space-3, 0.75rem) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toggle-row input[type="checkbox"]::after {
        transition: none;
    }
    .toggle-row input[type="checkbox"] {
        transition: none;
    }
}

/* ========================================
   Help Page
   ======================================== */
.help-page { max-width: 900px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.help-header { text-align: center; margin-bottom: var(--space-5); }
.help-title { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-1); }
.help-subtitle { font-size: var(--font-size-base); color: var(--text-muted); margin: 0; }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.help-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); }
.help-card-wide { grid-column: 1 / -1; }
.help-card h2 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-2); }
.help-card p { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-2); }
.help-card ul { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.8; margin: 0 0 var(--space-2); padding-left: var(--space-3); }
.help-card-icon { margin-bottom: var(--space-2); color: var(--accent-orange); }

.help-hierarchy { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }
.help-hierarchy-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.help-hierarchy-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.help-inline-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }

.help-tip { background: rgba(255,107,44,0.06); border: 1px solid rgba(255,107,44,0.15); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); margin: var(--space-2) 0; }

.help-priorities { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.help-priority-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.help-priority-normal { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 500; min-width: 60px; }
.help-priority-low { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 500; min-width: 60px; opacity: 0.7; }

.help-tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.help-tip-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.help-tip-item kbd { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2px 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); min-width: 24px; text-align: center; flex-shrink: 0; }
.help-tip-icon { font-size: 16px; min-width: 24px; text-align: center; flex-shrink: 0; }

@media (max-width: 767px) {
    .help-grid { grid-template-columns: 1fr; }
    .help-tips-grid { grid-template-columns: 1fr; }
    .help-page { padding: var(--space-3) var(--space-2); }
}

/* ========================================
   Category & Tag Management (sidebar inline)
   ======================================== */
.sidebar-manage-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; opacity: 0.5; transition: opacity var(--transition-fast); }
.sidebar-manage-btn:hover { opacity: 1; color: var(--accent-orange); }
.app-sidebar-heading { display: flex; align-items: center; justify-content: space-between; }

.manage-panel { display: none; padding: var(--space-1) var(--space-2); }
.manage-panel.open { display: block; }
.manage-item { display: flex; align-items: center; gap: var(--space-1); padding: 4px 0; font-size: var(--font-size-sm); }
.manage-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.manage-item-name { flex: 1; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-item-count { color: var(--text-muted); font-size: var(--font-size-xs); flex-shrink: 0; }
.manage-item-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity var(--transition-fast); }
.manage-item:hover .manage-item-actions { opacity: 1; }
.manage-action-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px 4px; font-size: 12px; border-radius: var(--radius-sm); }
.manage-action-btn:hover { color: var(--accent-orange); background: rgba(255,107,44,0.1); }
.manage-action-btn.danger:hover { color: var(--accent-red, #EF4444); background: rgba(239,68,68,0.1); }

.manage-add-row { display: flex; align-items: center; gap: var(--space-1); padding: 4px 0; margin-top: var(--space-1); }
.manage-add-input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 8px; font-size: var(--font-size-sm); color: var(--text-primary); outline: none; }
.manage-add-input:focus { border-color: var(--border-focus); }
.manage-add-input::placeholder { color: var(--text-muted); }
.manage-colour-input { width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 0; background: none; }

.manage-edit-input { background: var(--bg-elevated); border: 1px solid var(--border-focus); border-radius: var(--radius-sm); padding: 2px 6px; font-size: var(--font-size-sm); color: var(--text-primary); outline: none; width: 100%; }

/* Drawer manage panels */
.drawer-heading { display: flex; align-items: center; justify-content: space-between; }

/* ── API Key Section ─────────────────────── */
.api-key-display { padding: 4px 0; }
.api-key-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-key-label { color: var(--text-muted); font-size: var(--font-size-sm, 14px); }
.api-key-value { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm, 4px); padding: 4px 10px; font-family: 'Courier New', Courier, monospace; font-size: var(--font-size-sm, 14px); color: var(--text-primary); }
.api-key-meta { margin-top: 8px; font-size: var(--font-size-xs, 12px); color: var(--text-muted); }
.api-key-full { display: block; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm, 4px); padding: 10px 14px; font-family: 'Courier New', Courier, monospace; font-size: var(--font-size-sm, 14px); color: var(--accent-primary, #FF6B2C); word-break: break-all; user-select: all; }
.api-key-reveal { padding: 4px 0; }
.btn-danger-outline { border: 1px solid var(--status-error, #ef4444); color: var(--status-error, #ef4444); background: transparent; }
.btn-danger-outline:hover { background: var(--status-error, #ef4444); color: #fff; }