:root {
            /* Typography - Font Family */
            --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;

            /* Typography - Semantic Font Scale (preferred for new code)
               Use these for consistent sizing across the app:
               2xs=10px, xs=11px, sm=13px, base=15px, md=17px, lg=20px, xl=24px, 2xl=32px, 3xl=40px */
            --font-size-2xs: 10px;
            --font-size-xs: 11px;
            --font-size-sm: 13px;
            --font-size-base: 15px;
            --font-size-md: 17px;
            --font-size-lg: 20px;
            --font-size-xl: 24px;
            --font-size-2xl: 32px;
            --font-size-3xl: 40px;

            /* Typography - Numeric Font Scale (legacy, fills gaps in semantic scale)
               These exist for intermediate sizes not covered by semantic scale.
               For new code, prefer the semantic scale above. */
            --font-size-10: 10px;  /* Same as --font-size-2xs */
            --font-size-12: 12px;  /* Between xs (11px) and sm (13px) */
            --font-size-14: 14px;  /* Between sm (13px) and base (15px) */
            --font-size-16: 16px;  /* Between base (15px) and md (17px) */
            --font-size-18: 18px;  /* Between md (17px) and lg (20px) */
            --font-size-22: 22px;  /* Between lg (20px) and xl (24px) */
            --font-size-26: 26px;  /* Between xl (24px) and 2xl (32px) */
            --line-height-tight: 1.2;
            --line-height-normal: 1.5;
            --line-height-relaxed: 1.7;

            /* Spacing Scale */
            --space-0: 0px;
            --space-half: 2px;
            --space-1: 4px;
            --space-1-5: 6px;
            --space-2: 8px;
            --space-2-5: 10px;
            --space-3: 12px;
            --space-3-5: 14px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-7: 28px;
            --space-8: 32px;
            --space-10: 40px;
            --space-12: 48px;
            --space-16: 64px;

            /* Colors - Backgrounds */
            --bg-primary: #FFFFFF;
            --bg-main: #FFFFFF;
            --bg-sidebar: #F8F8F8;
            --bg-secondary: #F8F8F8;
            --bg-tertiary: #F5F5F5;
            --bg-light: #F8F9FB;
            --bg-elevated: #FFFFFF;
            --bg-card: #FFFFFF;
            --bg-hover: rgba(0, 0, 0, 0.04);

            /* Colors - Text (WCAG AA compliant contrast ratios) */
            --text-primary: #1A1A1A;
            --text-secondary: #595959;  /* 7.0:1 contrast - AA compliant */
            --text-tertiary: #737373;   /* 4.7:1 contrast - AA compliant */
            --text-quaternary: #A6A6A6; /* For decorative/non-essential text only */

            /* Colors - Accent */
            --accent-blue: #4A90D9;
            --accent-blue-light: rgba(74, 144, 217, 0.08);
            --accent-blue-hover: rgba(74, 144, 217, 0.12);
            --accent-blue-focus: rgba(74, 144, 217, 0.15);
            --accent-blue-bg: rgba(74, 144, 217, 0.04);
            --accent-blue-border: rgba(74, 144, 217, 0.3);
            --accent-blue-dark: #3a7bc8;
            --accent-blue-gradient-end: #6BA8E5;

            /* Colors - Primary (alias for accent-blue) */
            --primary: #357ABD;
            --primary-hover: #2d6aa3;

            /* Colors - Semantic */
            --color-danger: #DC3545;
            --color-danger-light: rgba(220, 53, 69, 0.08);
            --color-success: var(--badge-repeat);
            --color-success-light: rgba(69, 160, 73, 0.08);
            --color-warning: #F5A623;
            --color-warning-hover: #d4891a;
            --color-warning-light: rgba(245, 166, 35, 0.08);
            --color-error: #EF4444;
            --color-error-light: rgba(239, 68, 68, 0.08);

            /* Colors - Badge Specific */
            --badge-schedule: #357ABD;
            --badge-deadline: #C84038;
            --badge-duration: #0097A7;
            --badge-tags: #8B5CAF;
            --badge-repeat: #45A049;
            --badge-notes: #607D8B;
            --badge-project: #F57C00;
            --badge-area: #00897B;
            --badge-priority-p1: #EF4444;
            --badge-priority-p2: #D97706;
            --badge-priority-p3: #616161;

            /* Colors - Borders & Surfaces */
            --border-light: rgba(0, 0, 0, 0.08);
            --border-medium: rgba(0, 0, 0, 0.12);
            --border-subtle: 0.5px solid var(--border-light);
            --surface-hover: rgba(0, 0, 0, 0.04);
            --surface-active: rgba(0, 0, 0, 0.08);
            --surface-elevated: #FFFFFF;
            --surface-base: #FFFFFF;

            /* Shadows - Premium Elevation System */
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
            --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
            --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
            --shadow-focus: 0 0 0 3px var(--accent-blue-focus);

            /* Border Radius */
            --radius-none: 0;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;

            /* Icon Sizes */
            --icon-xs: 12px;
            --icon-sm: 16px;
            --icon-md: 20px;
            --icon-lg: 24px;
            --icon-xl: 32px;
            --icon-2xl: 48px;

            /* Button Sizes */
            --btn-sm: 28px;
            --btn-md: 32px;
            --btn-lg: 40px;
            --btn-padding-sm: var(--space-1) var(--space-3);
            --btn-padding-md: var(--space-2) var(--space-4);
            --btn-padding-lg: var(--space-3) var(--space-6);

            /* Transitions - Premium timing functions */
            --transition-xs: 100ms ease;
            --transition-fast: 150ms ease;
            --transition-normal: 250ms ease;
            --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
            --ease-in: cubic-bezier(0.4, 0, 1, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

            /* Layout Breakpoints */
            --breakpoint-compact: 768px;
            --breakpoint-regular: 1024px;
            --breakpoint-wide: 1440px;

            /* Z-Index Scale - Organized layer system */
            --z-base: 1;
            --z-dropdown: 100;
            --z-sticky: 150;
            --z-popover: 200;
            --z-modal: 400;
            --z-modal-dropdown: 450;
            --z-overlay: 500;
            --z-command-bar: 700;

            /* Colors - Additional Accents (P0 fix: previously undefined) */
            --accent-red: #DC3545;
            --accent-red-light: rgba(220, 53, 69, 0.08);
            --accent-red-hover: rgba(220, 53, 69, 0.12);
            --accent-green: #45A049;
            --accent-green-light: rgba(69, 160, 73, 0.08);
            --accent-green-hover: rgba(69, 160, 73, 0.12);
            --accent-orange: #F57C00;
            --accent-orange-light: rgba(245, 124, 0, 0.08);
            --accent-orange-hover: rgba(245, 124, 0, 0.12);

            /* Colors - Accent Blue Opacity Scale (P1 fix: reduces hardcoded RGBA) */
            --accent-blue-opacity-3: rgba(74, 144, 217, 0.03);
            --accent-blue-opacity-5: rgba(74, 144, 217, 0.05);
            --accent-blue-opacity-8: rgba(74, 144, 217, 0.08);
            --accent-blue-opacity-10: rgba(74, 144, 217, 0.10);
            --accent-blue-opacity-12: rgba(74, 144, 217, 0.12);
            --accent-blue-opacity-15: rgba(74, 144, 217, 0.15);
            --accent-blue-opacity-20: rgba(74, 144, 217, 0.20);

            /* Border - Primary (P0 fix: previously undefined) */
            --border-primary: var(--border-medium);

            /* Border Radius - Additional tokens */
            --radius-circle: 50%;
            --radius-2xl: 24px;

            /* Hover States - Standardized */
            --hover-light: rgba(0, 0, 0, 0.04);
            --hover-accent: var(--accent-blue-opacity-8);

            /* Focus States - Unified (P0 fix: accessibility) */
            --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
            --focus-ring-inset: inset 0 0 0 2px var(--accent-blue);
        }

        /* Dark Mode Theme */
        [data-theme="dark"] {
            /* Colors - Backgrounds */
            --bg-primary: #1A1A1A;
            --bg-main: #121212;
            --bg-sidebar: #1E1E1E;
            --bg-secondary: #1E1E1E;
            --bg-tertiary: #252525;
            --bg-light: #1F1F1F;
            --bg-elevated: #2A2A2A;
            --bg-card: #242424;
            --bg-hover: rgba(255, 255, 255, 0.06);

            /* Colors - Text */
            --text-primary: #F5F5F5;
            --text-secondary: #B3B3B3;
            --text-tertiary: #8A8A8A;
            --text-quaternary: #666666;

            /* Colors - Accent (slightly brighter for dark mode) */
            --accent-blue: #5B9FE3;
            --accent-blue-light: rgba(91, 159, 227, 0.12);
            --accent-blue-hover: rgba(91, 159, 227, 0.18);
            --accent-blue-focus: rgba(91, 159, 227, 0.2);
            --accent-blue-bg: rgba(91, 159, 227, 0.08);
            --accent-blue-border: rgba(91, 159, 227, 0.4);
            --accent-blue-dark: #4A90D9;
            --accent-blue-gradient-end: #7BB3EA;

            /* Colors - Borders & Surfaces */
            --border-light: rgba(255, 255, 255, 0.08);
            --border-medium: rgba(255, 255, 255, 0.12);
            --surface-hover: rgba(255, 255, 255, 0.04);
            --surface-active: rgba(255, 255, 255, 0.08);
            --surface-elevated: #2A2A2A;
            --surface-base: #1E1E1E;

            /* Shadows - Adjusted for dark mode */
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
            --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
            --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
            --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);

            /* Priority badge colours - slightly lighter for dark backgrounds */
            --badge-priority-p1: #F87171;
            --badge-priority-p2: #FBB040;
            --badge-priority-p3: #8A8A8A;

            /* Accent Opacity Scale - Dark mode */
            --accent-blue-opacity-3: rgba(91, 159, 227, 0.05);
            --accent-blue-opacity-5: rgba(91, 159, 227, 0.08);
            --accent-blue-opacity-8: rgba(91, 159, 227, 0.12);
            --accent-blue-opacity-10: rgba(91, 159, 227, 0.15);
            --accent-blue-opacity-12: rgba(91, 159, 227, 0.18);
            --accent-blue-opacity-15: rgba(91, 159, 227, 0.2);
            --accent-blue-opacity-20: rgba(91, 159, 227, 0.25);

            /* Hover States - Dark mode */
            --hover-light: rgba(255, 255, 255, 0.04);
            --hover-accent: var(--accent-blue-opacity-8);

            /* Focus States - Dark mode */
            --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
        }

        /* System preference dark mode (when no explicit theme is set) */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                /* Colors - Backgrounds */
                --bg-primary: #1A1A1A;
                --bg-main: #121212;
                --bg-sidebar: #1E1E1E;
                --bg-secondary: #1E1E1E;
                --bg-tertiary: #252525;
                --bg-light: #1F1F1F;
                --bg-elevated: #2A2A2A;
                --bg-card: #242424;
                --bg-hover: rgba(255, 255, 255, 0.06);

                /* Colors - Text */
                --text-primary: #F5F5F5;
                --text-secondary: #B3B3B3;
                --text-tertiary: #8A8A8A;
                --text-quaternary: #666666;

                /* Colors - Accent */
                --accent-blue: #5B9FE3;
                --accent-blue-light: rgba(91, 159, 227, 0.12);
                --accent-blue-hover: rgba(91, 159, 227, 0.18);
                --accent-blue-focus: rgba(91, 159, 227, 0.2);
                --accent-blue-bg: rgba(91, 159, 227, 0.08);
                --accent-blue-border: rgba(91, 159, 227, 0.4);
                --accent-blue-dark: #4A90D9;
                --accent-blue-gradient-end: #7BB3EA;

                /* Colors - Borders & Surfaces */
                --border-light: rgba(255, 255, 255, 0.08);
                --border-medium: rgba(255, 255, 255, 0.12);
                --surface-hover: rgba(255, 255, 255, 0.04);
                --surface-active: rgba(255, 255, 255, 0.08);
                --surface-elevated: #2A2A2A;

                /* Shadows */
                --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
                --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
                --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
                --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
                --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
                --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
                --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
                --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
                --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);

                /* Accent Opacity Scale */
                --accent-blue-opacity-3: rgba(91, 159, 227, 0.05);
                --accent-blue-opacity-5: rgba(91, 159, 227, 0.08);
                --accent-blue-opacity-8: rgba(91, 159, 227, 0.12);
                --accent-blue-opacity-10: rgba(91, 159, 227, 0.15);
                --accent-blue-opacity-12: rgba(91, 159, 227, 0.18);
                --accent-blue-opacity-15: rgba(91, 159, 227, 0.2);
                --accent-blue-opacity-20: rgba(91, 159, 227, 0.25);

                /* Hover States */
                --hover-light: rgba(255, 255, 255, 0.04);
                --hover-accent: var(--accent-blue-opacity-8);

                /* Focus States */
                --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background: var(--bg-main);
            color: var(--text-primary);
            line-height: 1.6;
            overflow: hidden;
            height: 100vh;
        }

        /* Skip Link for Keyboard Navigation */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--primary);
            color: white;
            padding: 8px 16px;
            z-index: 100000;
            text-decoration: none;
            font-weight: 500;
            border-radius: 0 0 4px 0;
            transition: top 0.2s ease;
        }

        .skip-link:focus {
            top: 0;
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-main);
            z-index: 99999;
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        .loading-message {
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            margin: 0;
            text-align: center;
            min-height: 20px;
            animation: fadeInOut 2s ease-in-out infinite;
        }

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

        .loading-circles {
            position: relative;
            width: 100px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading-circle {
            position: absolute;
            border-radius: 50%;
            background: #357ABD;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Large circle - centered anchor with subtle breathing */
        .loading-circle.circle-3 {
            width: 44px;
            height: 44px;
            opacity: 1;
            z-index: 1;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: breathe 2.4s ease-in-out infinite;
        }

        /* Medium circle - bounces in from center to left */
        .loading-circle.circle-2 {
            width: 32px;
            height: 32px;
            opacity: 0;
            z-index: 2;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: bounceInMedium 2.4s ease-out infinite;
        }

        /* Small circle - bounces in furthest left */
        .loading-circle.circle-1 {
            width: 22px;
            height: 22px;
            opacity: 0;
            z-index: 3;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: bounceInSmall 2.4s ease-out infinite;
        }

        /* Subtle breathing pulse for main circle */
        @keyframes breathe {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(0.92);
            }
        }

        /* Medium circle bounces in and settles to the left, then instantly resets */
        @keyframes bounceInMedium {
            0%, 8% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            15% {
                opacity: 0.75;
                transform: translate(-130%, -50%) scale(1.1);
            }
            22% {
                opacity: 0.7;
                transform: translate(-115%, -50%) scale(0.95);
            }
            30%, 84.9% {
                opacity: 0.7;
                transform: translate(-120%, -50%) scale(1);
            }
            85%, 100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }

        /* Small circle bounces in last and settles furthest left, then instantly resets */
        @keyframes bounceInSmall {
            0%, 20% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            28% {
                opacity: 0.45;
                transform: translate(-240%, -50%) scale(1.15);
            }
            36% {
                opacity: 0.4;
                transform: translate(-220%, -50%) scale(0.9);
            }
            44%, 84.9% {
                opacity: 0.4;
                transform: translate(-230%, -50%) scale(1);
            }
            85%, 100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }

        /* Session Expired Overlay */
        .session-expired-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(245, 247, 250, 0.95) 0%, rgba(237, 241, 247, 0.95) 100%);
            backdrop-filter: blur(8px);
            z-index: 100000;
        }

        [data-theme="dark"] .session-expired-overlay {
            background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.95) 100%);
        }

        .session-expired-overlay.visible {
            display: flex;
        }

        .session-expired-card {
            width: 100%;
            max-width: 420px;
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--border-light);
            padding: var(--space-8);
            text-align: center;
            animation: sessionExpiredFadeIn 0.3s ease-out;
        }

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

        /* Logo */
        .session-expired-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-3);
            margin-bottom: var(--space-6);
        }

        .session-expired-logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.5px;
        }

        /* Icon container with subtle background */
        .session-expired-icon-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-5);
        }

        .session-expired-icon {
            width: 72px;
            height: 72px;
            padding: 16px;
            background: linear-gradient(135deg, rgba(53, 122, 189, 0.08) 0%, rgba(53, 122, 189, 0.04) 100%);
            border-radius: 50%;
            color: var(--primary);
        }

        [data-theme="dark"] .session-expired-icon {
            background: linear-gradient(135deg, rgba(53, 122, 189, 0.15) 0%, rgba(53, 122, 189, 0.08) 100%);
        }

        .session-expired-icon svg {
            width: 100%;
            height: 100%;
        }

        /* Title */
        .session-expired-title {
            margin: 0 0 var(--space-2);
            font-size: 22px;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Text */
        .session-expired-text {
            margin: 0 0 var(--space-6);
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Actions */
        .session-expired-actions {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .session-expired-btn-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            width: 100%;
            padding: 12px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius-lg);
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .session-expired-btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(53, 122, 189, 0.3);
        }

        .session-expired-btn-primary:active {
            transform: translateY(0);
        }

        .session-expired-btn-primary svg {
            width: 18px;
            height: 18px;
        }

        .session-expired-btn-secondary {
            padding: var(--space-3) var(--space-6);
            background: transparent;
            color: var(--text-secondary);
            border: none;
            border-radius: var(--radius-lg);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .session-expired-btn-secondary:hover {
            color: var(--primary);
            background: rgba(53, 122, 189, 0.06);
        }

        /* Typography Hierarchy - Consistent heading styles */
        h1, .h1 {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.3px;
        }

        h2, .h2 {
            font-size: var(--font-size-xl);
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.2px;
        }

        h3, .h3 {
            font-size: var(--font-size-lg);
            font-weight: 600;
            line-height: 1.3;
        }

        h4, .h4 {
            font-size: var(--font-size-md);
            font-weight: 600;
            line-height: 1.4;
        }

        h5, .h5 {
            font-size: var(--font-size-base);
            font-weight: 600;
            line-height: 1.4;
        }

        h6, .h6 {
            font-size: var(--font-size-sm);
            font-weight: 600;
            line-height: 1.4;
        }

        /* Global Focus States - Subtle border indicator */
        input:focus-visible,
        textarea:focus-visible,
        [contenteditable]:focus-visible {
            outline: none;
            border-color: rgba(74, 144, 217, 0.6) !important;
            border-width: 1px;
            box-shadow: none;
            transition: border-color var(--transition-fast), border-width var(--transition-fast);
        }

        /* For non-keyboard focus (mouse clicks), same subtle indicator */
        input:focus:not(:focus-visible),
        textarea:focus:not(:focus-visible),
        [contenteditable]:focus:not(:focus-visible) {
            outline: none;
            border-color: rgba(74, 144, 217, 0.6) !important;
            border-width: 1px;
            box-shadow: none;
        }

        input,
        textarea,
        [contenteditable] {
            transition: border-color var(--transition-fast);
            caret-color: var(--text-primary) !important;
            caret-shape: bar;
        }

        /* Enhanced caret visibility for note editors */
        .event-note-editor,
        .note-editor,
        [contenteditable="true"] {
            caret-color: var(--text-primary) !important;
        }

        /* Animation Keyframes */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

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

        @keyframes modalBounceIn {
            0% {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.02);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes taskMoveIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes taskMoveOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.9);
            }
        }

        @keyframes calendarEventLand {
            0% {
                opacity: 0.6;
                transform: scale(0.97);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Task Move Animations */
        .task-just-moved {
            animation: taskMoveIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .timeline-event.task-just-moved,
        .backlog-task-item.task-just-moved {
            animation: taskMoveIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* Calendar events settle into place — subtler than task arrival */
        .calendar-event.task-just-moved,
        .week-timeline-event.task-just-moved {
            animation: calendarEventLand 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @media (prefers-reduced-motion: reduce) {
            .task-just-moved,
            .timeline-event.task-just-moved,
            .backlog-task-item.task-just-moved,
            .calendar-event.task-just-moved,
            .week-timeline-event.task-just-moved {
                animation: none;
            }
        }

        /* Button Loading States */

        .btn.loading,
        button.loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }

        .btn.loading::after,
        button.loading::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            color: var(--accent-blue);
        }

        /* App Container */
        .app {
            display: none; /* Hidden by default, shown after auth check */
            height: 100vh;
            position: relative;
        }

        /* Sidebar */
        .sidebar {
            width: 68px;
            background: var(--bg-main);
            padding: var(--space-4) 0 var(--space-4);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            border-right: 1px solid var(--border-medium);
            position: relative;
            z-index: 100;
        }

        .sidebar-logo {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }

        .sidebar-logo svg {
            width: 38px;
            height: 19px;
        }

        .sidebar-icon {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .sidebar-icon:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .sidebar-icon.active {
            background: var(--bg-card);
            color: var(--text-primary);
            box-shadow: var(--shadow-sm);
        }

        .sidebar-icon svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.5;
        }

        /* Sidebar Inbox Count Badge */
        .sidebar-icon {
            position: relative;
        }

        .sidebar-inbox-badge {
            position: absolute;
            top: 4px;
            right: 2px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            font-size: 10px;
            font-weight: 600;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
            color: white;
            background: var(--accent-blue);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            letter-spacing: -0.2px;
            pointer-events: none;
            box-shadow: 0 0 0 2px var(--bg-main);
            transform-origin: center;
            animation: badgeAppear 0.2s ease-out;
            -webkit-app-region: no-drag;
        }

        @keyframes badgeAppear {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            60% {
                transform: scale(1.15);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes badgePulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .sidebar-inbox-badge.badge-updated {
            animation: badgePulse 0.3s ease-in-out;
        }

        /* Sidebar Inbox Notification Dot (unread notifications) */
        .sidebar-notification-dot {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 8px;
            height: 8px;
            background: var(--accent-blue);
            border-radius: 50%;
            pointer-events: none;
            animation: dotAppear 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @keyframes dotAppear {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .sidebar-spacer {
            flex: 1;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            padding: 24px 32px;
            overflow-y: auto;
            position: relative;
        }

        /* Remove padding when Upcoming view is active */

        /* Inbox — panel fills to viewport edge, column handles its own padding */
        .main-content.inbox-active {
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
        }

        /* Notes view needs internal scrolling, not outer scrolling */
        .main-content.notes-active {
            overflow: hidden;
            height: calc(100vh - 24px); /* viewport minus top padding */
            padding-left: 0;
            padding-right: 0;
        }

        .main-content.notes-active .notes-page {
            height: 100%;
            max-height: 100%;
        }

        .main-content.notes-active .notes-page-content {
            height: calc(100% - 60px); /* minus header height */
            max-height: calc(100% - 60px);
        }

        .main-content.notes-active .notes-main-content {
            height: 100%;
            max-height: 100%;
            overflow-y: auto !important;
        }

        /* Tasks — only the main content scrolls, header + left panel stay fixed */
        .main-content.tasks-active {
            overflow: hidden;
            height: calc(100vh - 24px);
            padding-left: 0;
            padding-right: 0;
        }

        .main-content.tasks-active .tasks-page-content {
            height: calc(100% - 60px);
            max-height: calc(100% - 60px);
        }

        .main-content.tasks-active .tasks-main-content {
            height: 100%;
            max-height: 100%;
            overflow-y: auto !important;
        }

        /* Projects — reduce padding so panels fill the width */
        .main-content.projects-active {
            padding-left: 0;
            padding-right: 0;
        }

        /* Planner — reduce padding so backlog sits closer to nav */
        .main-content.planner-active {
            padding-left: 0;
            padding-right: 0;
        }

        /* Archive — only the content scrolls, header stays fixed */
        .main-content.archive-active {
            overflow: hidden;
            height: calc(100vh - 24px);
        }

        .main-content.archive-active .archive-content-wrapper {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        /* ============================================================================ */
        /* RESPONSIVE LAYOUT CENTERING (1440px+ screens)                                */
        /* ============================================================================ */

        /* Inbox task wrapper - full width within column layout */
        .inbox-task-wrapper {
            width: 100%;
        }

        /* Archive content wrapper - constrained width, always centered */
        .archive-content-wrapper {
            width: 100%;
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Center content wrappers on large screens */
        @media (min-width: 1440px) {
            /* Settings tabs and content - center the 900px container */
            .settings-tabs,
            .settings-content {
                margin-left: auto;
                margin-right: auto;
            }

            /* Inbox task wrapper - left-aligned with max-width */
            .inbox-task-wrapper {
            }

            /* Archive content wrapper - center 1100px content */
            .archive-content-wrapper {
                margin-left: auto;
                margin-right: auto;
            }

            /* Today view - center the main task area */
            .today-view-content .main-content-area {
                margin-left: auto;
                margin-right: auto;
            }
        }

        .page-title {
            font-family: var(--font-family);
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.3px;
            margin-bottom: 24px;
        }

        /* Calendar Disconnected Banner */
        .calendar-disconnected-banner {
            background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
            border: 1px solid #FFB74D;
            border-radius: var(--radius-md);
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-4);
        }

        .calendar-disconnected-banner .banner-content {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .calendar-disconnected-banner svg {
            width: 20px;
            height: 20px;
            color: #E65100;
            flex-shrink: 0;
        }

        .calendar-disconnected-banner span {
            flex: 1;
            font-size: var(--font-size-sm);
            color: #E65100;
            font-weight: 500;
        }

        .reconnect-calendar-btn {
            background: #E65100;
            color: white;
            border: none;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .reconnect-calendar-btn:hover {
            background: #BF360C;
        }

        /* Planner Page Header — two-zone layout */
        .planner-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px 12px 32px;
            background: var(--bg-primary);
            flex-shrink: 0;
            position: relative;
        }

        .planner-header-left {
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        /* Align Tasks/Daily Note toggle with right edge of backlog panel */
        .planner-header-left .today-view-toggle {
            position: absolute;
            left: 220px;
        }

        .planner-page-header .page-title {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.5px;
            color: var(--text-primary);
            margin: 0;
        }

        .planner-header-right {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .planner-header-right .week-number {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        /* Week-view-controls: hidden in Today scope, animated reveal in Week scope */
        .week-view-controls {
            display: flex;
            align-items: center;
            overflow: hidden;
            max-width: 0;
            opacity: 0;
            transition: max-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .today-view.week-scope .week-view-controls {
            max-width: 120px;
            opacity: 1;
        }

        /* Hide Tasks/Daily Note toggle in week view */
        .today-view.week-scope .today-view-toggle {
            display: none !important;
        }

        /* Date header — no longer used */
        .date-header {
            display: none !important;
        }

        /* Week view: hide Today view elements and show week-planner full width */
        .today-view.week-scope .main-content-area,
        .today-view.week-scope .today-calendar {
            display: none !important;
        }

        .today-view.week-scope .week-planner {
            display: flex !important;
            flex: 1;
            flex-direction: column;
        }

        .week-number {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            opacity: 0.6;
        }

        .planner-scope-toggle {
            display: flex;
            gap: 0;
            background: #E8ECF0;
            border-radius: var(--radius-md);
            padding: 3px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
            box-sizing: border-box;
        }

        .scope-toggle-btn {
            padding: var(--space-1-5) var(--space-4);
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-spring);
            line-height: 1;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scope-toggle-btn:hover:not(.active) {
            color: var(--text-secondary);
            background: rgba(0, 0, 0, 0.03);
        }

        .scope-toggle-btn:active {
            transform: scale(0.97);
        }

        .scope-toggle-btn.active {
            background: #FFFFFF;
            color: var(--text-primary);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                        0 1px 2px rgba(0, 0, 0, 0.06),
                        0 0 0 1px rgba(0, 0, 0, 0.03);
        }

        .scope-toggle-btn:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
            border-radius: var(--radius-sm);
        }

        .date-nav {
            display: flex;
            align-items: center;
            gap: 0;
            height: 24px;
        }

        .date-nav-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            transition: all var(--transition-fast);
            padding: 0;
        }

        .date-nav-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .date-nav-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .date-nav-btn:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        .current-date {
            font-family: var(--font-family);
            font-size: var(--font-size-md);
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.3px;
            min-width: 100px;
            text-align: center;
            line-height: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .planner-title-section {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            width: 100%;
            margin-top: 4px;
        }

        .today-label {
            font-family: var(--font-family);
            font-size: var(--font-size-2xl);
            font-weight: 700;
            letter-spacing: -0.3px;
            color: var(--text-primary);
        }

        .today-label.is-today {
            color: var(--text-primary);
        }

        .planner-count-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 10px;
            background: var(--accent-blue);
            color: white;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-16);
            font-weight: 600;
        }

        /* Today View Layout */
        .today-view {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 120px);
            gap: 0;
            overflow: hidden;
            position: relative;
        }

        .today-view-content {
            display: flex;
            flex: 1;
            gap: 0;
            overflow: hidden;
            box-sizing: border-box;
        }

        /* Main Content Area - wraps tasks/notes and their toggle */
        .main-content-area {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            box-sizing: border-box;
            max-width: 1100px;
            width: 100%;
        }

        /* Backlog Drawer */
        .backlog-drawer {
            width: 220px;
            flex-shrink: 0;
            background: var(--bg-primary);
            border-right: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            transition: width var(--transition-normal);
        }

        .backlog-drawer.collapsed {
            width: 40px;
        }

        .backlog-drawer.collapsed .backlog-drawer-content,
        .backlog-drawer.collapsed .backlog-drawer-title {
            display: none;
        }

        .backlog-drawer.collapsed .backlog-drawer-header {
            justify-content: center;
            padding: 12px 8px;
        }

        .backlog-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-light);
            height: 48px;
            box-sizing: border-box;
        }

        .backlog-drawer-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-secondary);
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex: 1;
        }

        .backlog-expand-all {
            background: none;
            border: none;
            padding: var(--space-1);
            cursor: pointer;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            margin-right: 4px;
        }

        .backlog-expand-all:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .backlog-expand-all svg {
            width: 16px;
            height: 16px;
        }

        .backlog-drawer.collapsed .backlog-expand-all {
            display: none;
        }

        .backlog-drawer-toggle {
            background: none;
            border: none;
            padding: var(--space-1);
            cursor: pointer;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .backlog-drawer-toggle:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .backlog-drawer-toggle:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .backlog-drawer-toggle svg {
            width: 16px;
            height: 16px;
        }

        .backlog-drawer.collapsed .backlog-drawer-toggle svg {
            transform: rotate(180deg);
        }

        .backlog-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-3);
            transition: background var(--transition-fast);
        }

        .backlog-drawer-content.drag-over {
            background: var(--accent-blue-opacity-5);
        }

        .backlog-drawer.drop-target {
            background: var(--bg-hover);
            outline: 2px dashed var(--accent-blue);
            outline-offset: -2px;
        }

        .backlog-drawer.drop-target .backlog-drawer-content {
            pointer-events: none;
        }

        .backlog-section {
            margin-bottom: 20px;
        }

        .backlog-section.section-collapsed {
            margin-bottom: 4px;
        }

        .backlog-section.section-collapsed .backlog-section-header-collapsible {
            margin-bottom: 0;
        }

        /* Smooth height transitions for collapsible content */
        .backlog-section .backlog-tasks {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
            opacity: 1;
        }

        .backlog-section.section-collapsed .backlog-tasks {
            max-height: 0;
            opacity: 0;
        }

        .backlog-section-header {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            padding: 0;
        }

        .backlog-section-header-collapsible {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            cursor: pointer;
            padding: var(--space-1-5) var(--space-1);
            margin: 0 -4px 8px -4px;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .backlog-section-header-collapsible:hover {
            background: var(--bg-hover);
        }

        .backlog-section-arrow {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            transition: transform var(--transition-normal);
        }

        .backlog-section.section-collapsed .backlog-section-arrow {
            transform: rotate(-90deg);
        }

        .backlog-section-title {
            flex: 1;
        }

        .backlog-section-count {
            font-size: var(--font-size-2xs);
            font-weight: 500;
            color: var(--text-tertiary);
            background: var(--bg-tertiary);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-md);
            min-width: 18px;
            text-align: center;
        }

        .backlog-section-groups {
            margin-left: 4px;
        }

        .backlog-task-item {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-2-5);
            margin-bottom: 4px;
            cursor: grab;
            transition: all var(--transition-fast);
        }

        .backlog-task-item:hover {
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        .backlog-task-item.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .backlog-task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .backlog-task-meta {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .backlog-task-meta .overdue-text {
            color: #EF4444;
            font-weight: 500;
        }

        .backlog-group-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 8px 0;
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background var(--transition-fast);
            border-radius: var(--radius-sm);
            margin: 0;
        }

        .backlog-group-header:hover {
            background: var(--bg-hover);
        }

        .backlog-group-arrow {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            transition: transform var(--transition-normal);
        }

        .backlog-group.collapsed .backlog-group-arrow {
            transform: rotate(-90deg);
        }

        .backlog-group-header .area-icon {
            width: 20px;
            height: 20px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .backlog-group-header .area-icon svg {
            color: white;
        }

        .backlog-group-name {
            flex: 1;
        }

        .backlog-group-count {
            font-weight: normal;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            min-width: 18px;
            text-align: right;
            margin-right: var(--space-1);
        }

        .backlog-group-tasks {
            padding-left: 0;
        }

        .today-view * {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .today-view *::-webkit-scrollbar {
            display: none;
        }

        .today-tasks {
            flex: 1;
            overflow-y: auto;
            position: relative;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        .today-tasks::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera */
        }


        .today-tasks.drag-over {
            background: var(--accent-blue-opacity-3);
        }

        /* Pointer-based drag system (for Tauri WebKit compatibility) */
        .pointer-drop-highlight {
            outline: none !important;
            background: var(--accent-blue-opacity-3) !important;
            box-shadow: inset 0 0 0 2px var(--accent-blue-opacity-20) !important;
            border-radius: var(--radius-md) !important;
        }

        .pointer-drag-source {
            cursor: grabbing !important;
        }

        .pointer-drag-preview {
            cursor: grabbing;
            font-weight: 500;
            color: var(--text-primary);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .pointer-drag-preview .preview-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
            display: block;
        }

        .task-row.dragging {
            opacity: 0.4;
            transform: scale(0.98);
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        }

        .backlog-task-item.dragging {
            opacity: 0.4;
            transform: scale(0.98);
        }

        .today-tasks-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: var(--space-2);
            height: 48px;
            box-sizing: border-box;
            padding: 0 var(--space-4);
        }

        .today-tasks-header .new-task-row {
            flex: 1;
            border-bottom: none;
            margin-bottom: 0;
            padding-left: 18px !important; /* Match card left padding */
        }

        .today-tasks-header .sort-dropdown-container {
            flex-shrink: 0;
        }

        /* Empty State */
        .empty-state {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-16) var(--space-10);
            text-align: center;
        }

        .empty-state.visible {
            display: flex;
        }

        .empty-state-art {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 800px;
            margin-bottom: 1rem;
        }

        .empty-state-art svg {
            width: 100%;
            height: 100%;
            max-height: 220px;
        }

        .empty-state-image {
            display: block;
            width: 100%;
            max-width: 320px;
            height: auto;
            opacity: 0.5;
        }

        .empty-state-text {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-tertiary);
            line-height: 1.6;
            max-width: 280px;
            font-style: italic;
            text-align: center;
            margin-top: 0.5rem;
        }

        /* Today-specific empty state */
        #todayEmptyState {
            justify-content: center;
            padding: var(--space-10) var(--space-5);
            height: 100%;
        }

        #todayEmptyState .empty-state-image {
            max-width: 280px;
        }

        /* Tasks View */
        .tasks-view {
            display: none;
            flex-direction: column;
        }

        .tasks-view.active {
            display: flex;
        }

        .tasks-header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-4);
            margin-bottom: 24px;
        }

        .tasks-filter {
            display: flex;
            gap: var(--space-1);
            background: var(--bg-secondary);
            padding: var(--space-1);
            border-radius: var(--radius-md);
        }

        .tasks-filter-btn {
            padding: var(--space-1-5) var(--space-3-5);
            border: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .tasks-filter-btn:hover {
            color: var(--text-primary);
        }

        .tasks-filter-btn.active {
            background: white;
            color: var(--text-primary);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .tasks-content {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Archive View */
        .archive-view {
            display: none;
            flex-direction: column;
        }

        .archive-view.active {
            display: flex;
        }

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

        .archive-select-all {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            cursor: pointer;
            font-size: var(--font-size-14);
            color: var(--text-secondary);
            user-select: none;
        }

        .archive-select-all input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent-blue);
        }

        [data-theme="dark"] .archive-select-all input[type="checkbox"] {
            color-scheme: dark;
        }

        @media (prefers-color-scheme: dark) {
            .archive-select-all input[type="checkbox"] {
                color-scheme: dark;
            }
        }

        .archive-select-all:hover {
            color: var(--text-primary);
        }

        .archive-select-all:hover .select-all-label {
            color: var(--text-primary);
        }

        .archive-search-wrapper {
            position: relative;
        }

        .archive-search-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            transition: all var(--transition-fast);
        }

        .archive-search-btn:hover {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }

        .archive-search-btn.active {
            background: var(--bg-secondary);
            color: var(--accent-blue);
        }

        .archive-search-btn svg {
            width: 18px;
            height: 18px;
        }

        .archive-search-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 280px;
            background: white;
            border-radius: var(--radius-md);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            border: 1px solid var(--border-light);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.95);
            transition: all var(--transition-normal);
            z-index: 100;
            overflow: hidden;
        }

        .archive-search-dropdown.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .archive-search-input {
            width: 100%;
            padding: var(--space-3) var(--space-3-5);
            border: none;
            border-bottom: 1px solid var(--border-light);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            outline: none;
            box-sizing: border-box;
        }

        .archive-search-input::placeholder {
            color: var(--text-tertiary);
        }

        .archive-search-results {
            max-height: 240px;
            overflow-y: auto;
        }

        .archive-search-item {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-3) var(--space-4);
            cursor: pointer;
            transition: background-color var(--transition-fast);
        }

        .archive-search-item:hover {
            background: var(--bg-hover);
        }

        .archive-search-item-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
        }

        .archive-search-item-icon svg {
            width: 16px;
            height: 16px;
        }

        .archive-search-item-label {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }

        .archive-search-item-type {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-left: auto;
        }

        .archive-search-empty {
            padding: 16px 14px;
            text-align: center;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .archive-active-filter {
            display: none;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: 12px;
        }

        .archive-active-filter.visible {
            display: flex;
        }

        .archive-filter-tag {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-1) var(--space-2-5);
            background: var(--accent-blue);
            color: white;
            border-radius: var(--radius-lg);
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
        }

        .archive-filter-tag-close {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0.8;
            transition: opacity var(--transition-fast);
        }

        .archive-filter-tag-close:hover {
            opacity: 1;
        }

        .archive-filter-tag-close svg {
            width: 10px;
            height: 10px;
        }

        .archive-content {
            flex: 1;
            padding-top: 8px;
        }

        .archive-group {
            margin-bottom: 24px;
        }

        .archive-group-header {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-primary);
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 8px;
        }

        .archive-task-row {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-2);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background-color var(--transition-fast);
        }

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

        .archive-checkbox-wrapper {
            flex-shrink: 0;
        }

        .archive-checkbox {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            background: var(--accent-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .archive-checkbox svg {
            width: 12px;
            height: 12px;
            stroke: white;
            stroke-width: 2.5;
        }

        .archive-checkbox:hover {
            transform: scale(1.05);
            box-shadow: 0 0 0 3px var(--accent-blue-opacity-20);
        }

        .archive-task-date {
            width: 60px;
            flex-shrink: 0;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--accent-blue);
        }

        .archive-task-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-half);
        }

        .archive-task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 400;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .archive-task-title.has-notes::after {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-left: 6px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
            background-size: contain;
            vertical-align: middle;
            opacity: 0.5;
        }

        .archive-task-project {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
        }

        /* Archive task uncomplete animation */
        .archive-task-row.uncompleting {
            opacity: 0.6;
        }

        .archive-task-row.uncompleting .archive-checkbox {
            background: transparent;
            border-color: var(--border-medium);
        }

        .archive-task-row.uncompleting .archive-checkbox svg {
            opacity: 0;
        }

        .archive-task-row.uncompleted {
            animation: taskComplete 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .archive-task-row.collapsing {
            transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.1s ease;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
        }

        .archive-task-row.collapsed {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
        }

        /* Flat Table Header */
        .tasks-table-header {
            display: grid;
            grid-template-columns: 32px 1fr 104px 160px 120px 100px;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 4px;
        }

        .tasks-table-header span {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }

        .tasks-table-header span:first-child {
            /* Checkbox column - no label */
        }

        /* Flat Task Row */
        .flat-task-row {
            display: grid;
            grid-template-columns: 32px 1fr 104px 160px 120px 100px;
            gap: var(--space-2);
            padding: 12px 16px;
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-task-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-task-row .task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flat-task-row .task-project,
        .flat-task-row .task-area,
        .flat-task-row .task-when {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flat-task-row .task-project:hover,
        .flat-task-row .task-area:hover {
            color: var(--accent-blue);
            text-decoration: underline;
        }

        .flat-task-row .task-unassigned {
            color: var(--text-tertiary);
        }

        .flat-task-row.someday {
            opacity: 0.6;
        }

        .flat-task-row.someday:hover {
            opacity: 0.8;
        }

        .flat-task-row .flat-quick-actions {
            display: flex;
            gap: var(--space-half);
            opacity: 0;
            transition: opacity var(--transition-fast);
            min-width: 104px;
        }

        .flat-task-row:hover .flat-quick-actions {
            opacity: 1;
        }

        /* Flat Project Row */
        .flat-project-row {
            display: grid;
            grid-template-columns: 36px 1fr 140px 80px 100px;
            gap: var(--space-2);
            padding: var(--space-3);
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-project-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-project-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, #4A90D9 0%, #6BA8E5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .flat-project-icon svg {
            width: 16px;
            height: 16px;
        }

        .flat-project-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
        }

        .flat-project-area {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .flat-project-area:hover {
            color: var(--accent-blue);
            text-decoration: underline;
        }

        .flat-project-progress {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .flat-project-deadline {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        /* Flat Area Row */
        .flat-area-row {
            display: grid;
            grid-template-columns: 36px 1fr 120px 100px;
            gap: var(--space-2);
            padding: var(--space-3);
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-area-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-area-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-16);
        }

        .flat-area-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
        }

        .flat-area-projects,
        .flat-area-tasks {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        /* Projects Table Header */
        .projects-table-header {
            display: grid;
            grid-template-columns: 36px 1fr 140px 80px 100px;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 4px;
        }

        .projects-table-header span {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }


        /* Add New Row */
        .add-new-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3);
            margin-top: 8px;
            border: 1px dashed var(--border-medium);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
        }

        .add-new-row:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .add-new-row svg {
            width: 16px;
            height: 16px;
        }

        /* Inline Project/Area creation row in table format */
        .inline-add-project-row,
        .inline-add-area-row {
            display: grid;
            align-items: center;
            padding: var(--space-2-5) var(--space-3);
            margin-bottom: 4px;
            border-bottom: 1px solid var(--border-light);
            background: transparent;
            gap: var(--space-3);
            opacity: 0.6;
            transition: opacity var(--transition-fast);
        }

        .inline-add-project-row:hover,
        .inline-add-area-row:hover,
        .inline-add-project-row:focus-within,
        .inline-add-area-row:focus-within {
            opacity: 1;
        }

        .inline-add-project-row {
            grid-template-columns: 32px 1fr auto;
        }

        .inline-add-area-row {
            grid-template-columns: 32px 1fr auto;
        }

        .inline-add-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
        }

        .inline-add-project-row .inline-add-icon svg {
            width: 18px;
            height: 18px;
        }

        .inline-add-area-row .inline-add-icon {
            background: #F5F5F5;
            color: var(--text-tertiary);
        }

        .inline-add-area-row .inline-add-icon svg {
            width: 16px;
            height: 16px;
        }

        .inline-add-input {
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            width: 100%;
        }

        .inline-add-input::placeholder {
            color: var(--text-tertiary);
        }

        .inline-add-hint {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            text-align: right;
        }

        /* Active Filter Badge */
        .active-filter-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-1) var(--space-2-5);
            background: var(--accent-blue-light);
            color: var(--accent-blue);
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
            margin-left: 12px;
        }

        .active-filter-badge button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: var(--accent-blue);
            display: flex;
            align-items: center;
        }

        .active-filter-badge button:hover {
            color: var(--text-primary);
        }

        .active-filter-badge svg {
            width: 14px;
            height: 14px;
        }

        /* Project Modal - matches task modal */
        .project-modal {
            display: none;
            position: fixed;
            background: var(--bg-card);
            z-index: 101;
            flex-direction: column;
            overflow: hidden;
        }

        .project-modal.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .project-modal.fullscreen {
            left: 68px;
            right: 0;
            top: 0;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            transform: none;
        }

        .project-modal.fullscreen.visible {
            transform: none;
        }

        /* Expanded mode - shows projects column on left */
        /* Position: 68px sidebar + 220px projects panel = 288px */
        .project-modal.expanded {
            left: 288px;
            right: 0;
            top: 0;
            height: 100vh;
            max-height: 100vh;
            max-width: none;
            border-radius: 0;
            transform: none;
            box-shadow: none;
            border: none;
            border-left: 1px solid var(--border-light);
            transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity var(--transition-smooth);
        }

        .project-modal.expanded.visible {
            transform: none;
        }

        /* Add top padding to align with page title */
        .project-modal.expanded .project-modal-header {
            padding-top: 35px;
        }

        .project-modal-header {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-7) var(--space-7) var(--space-5);
        }

        .project-modal-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #4A90D9 0%, #6BA8E5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .project-modal-icon:hover {
            transform: scale(1.02);
        }

        .project-modal-icon svg {
            width: 18px;
            height: 18px;
        }

        .project-modal-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            border: none;
            outline: none;
            background: transparent;
        }

        .project-modal-actions {
            display: flex;
            gap: var(--space-1);
        }

        /* Project Modal Tabs */
        .project-modal-tabs {
            display: flex;
            gap: var(--space-1);
            padding: 0 28px;
            border-bottom: 1px solid var(--border-light);
        }

        .project-tab {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-3) var(--space-4);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-bottom: -1px;
        }

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

        .project-tab.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
        }

        .project-tab svg {
            width: 16px;
            height: 16px;
        }

        /* Project Tab Content */
        .project-tab-content {
            display: none;
        }

        .project-tab-content.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .project-tasks-container {
            flex: 1;
            overflow-y: auto;
            padding-top: var(--space-2);
        }

        .project-tasks-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-light);
            padding-bottom: var(--space-2);
            padding-top: 16px;
            padding-left: var(--space-4);
            padding-right: var(--space-4);
            background: var(--bg-primary);
            flex-shrink: 0;
        }

        .project-tasks-header .project-add-task {
            flex: 1;
            border-bottom: none;
            margin-bottom: 0;
            padding-left: 18px; /* Match card left padding for checkbox alignment */
        }

        .project-tasks-header .sort-dropdown-container {
            flex-shrink: 0;
        }

        /* Sort dropdowns use fixed positioning to escape overflow:hidden parents */
        #projectSortDropdown,
        #sortDropdown,
        #todaySortDropdown {
            z-index: 10000;
        }

        .project-add-task,
        .area-add-task {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 8px 0;
            position: relative;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: var(--space-2);
        }

        .project-add-task .new-task-input,
        .area-add-task .new-task-input {
            flex: 1;
            border: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            outline: none;
            min-height: 1.4em;
            line-height: 1.4;
        }

        .project-add-task .new-task-input:empty::before,
        .area-add-task .new-task-input:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Project View Toggle (List/Board) */
        .project-view-toggle {
            display: flex;
            align-items: center;
            gap: 2px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-sm);
            padding: 2px;
            margin-left: auto;
        }

        .view-toggle-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            border-radius: calc(var(--radius-sm) - 2px);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .view-toggle-btn:hover {
            color: var(--text-secondary);
            background: var(--bg-secondary);
        }

        .view-toggle-btn.active {
            background: var(--bg-primary);
            color: var(--accent-blue);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .view-toggle-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Project Board View (Kanban) */
        .project-board-view {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 16px;
            flex: 1;
            min-height: 0;
            align-items: stretch;
        }

        .project-board-view::-webkit-scrollbar {
            height: 8px;
        }

        .project-board-view::-webkit-scrollbar-track {
            background: var(--bg-tertiary);
            border-radius: 4px;
        }

        .project-board-view::-webkit-scrollbar-thumb {
            background: var(--border-medium);
            border-radius: 4px;
        }

        .project-board-view::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }

        /* Board Column */
        .board-column {
            flex: 0 0 280px;
            min-width: 280px;
            max-width: 280px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .board-column-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            border-bottom: 1px solid var(--border-light);
            cursor: grab;
        }

        .board-column-header:active {
            cursor: grabbing;
        }

        .board-column-header.dragging {
            opacity: 0.5;
        }

        .board-column-title {
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
            cursor: text;
        }

        .board-column-title:focus {
            outline: none;
            background: var(--bg-primary);
            padding: 2px 6px;
            margin: -2px -6px;
            border-radius: var(--radius-sm);
        }

        .board-column-count {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            margin-left: 8px;
        }

        .board-column-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .board-column:hover .board-column-actions {
            opacity: 1;
        }

        .board-column-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .board-column-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .board-column-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Board Column Cards Container */
        .board-column-cards {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 100px;
        }

        .board-column-cards::-webkit-scrollbar {
            width: 4px;
        }

        .board-column-cards::-webkit-scrollbar-track {
            background: transparent;
        }

        .board-column-cards::-webkit-scrollbar-thumb {
            background: var(--border-light);
            border-radius: 2px;
        }

        /* Board Card */
        .board-card {
            position: relative;
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            padding: 12px;
            cursor: pointer;
            transition: all var(--transition-fast);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--border-light);
        }

        .board-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transform: translateY(-1px);
        }

        .board-card:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: 1px;
        }

        .board-card.dragging {
            opacity: 0.5;
            transform: rotate(2deg);
        }

        .board-card.completed {
            opacity: 0.6;
        }

        .board-card.completed .board-card-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        /* Board card completion animation */
        .board-card-completing {
            pointer-events: none;
        }

        .board-card-completing .board-card-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
            transition: all 0.2s ease-out;
        }

        .board-card-completed {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.2s ease-out, transform 0.2s ease-out, height 0.25s ease-out, margin 0.25s ease-out, padding 0.25s ease-out;
        }

        /* Premium settle animation for dropped cards */
        .board-card-settling {
            animation: cardSettle 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        @keyframes cardSettle {
            0% {
                transform: scale(1.02) translateY(-2px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            }
            50% {
                transform: scale(0.98) translateY(1px);
            }
            100% {
                transform: scale(1) translateY(0);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            }
        }

        .board-card-header {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 8px;
        }

        .board-card-checkbox {
            flex-shrink: 0;
            margin-top: 2px;
        }

        .board-card-title {
            flex: 1;
            min-width: 0;
            font-size: var(--font-size-14);
            color: var(--text-primary);
            line-height: 1.4;
            word-break: break-word;
        }

        .board-card-title-meta {
            float: right;
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: 6px;
            height: 19px;
        }

        .board-card-title .task-note-icon {
            display: inline;
            vertical-align: middle;
            margin-left: 4px;
        }

        .board-card-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .board-card-priority {
            display: inline-flex;
            align-items: center;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 4px;
            border-radius: 2px;
            white-space: nowrap;
        }

        .board-card-priority.p1 {
            background: rgba(239, 68, 68, 0.1);
            color: #EF4444;
        }

        .board-card-priority.p2 {
            background: rgba(97, 97, 97, 0.1);
            color: var(--text-tertiary);
        }

        .board-card-priority.p3 {
            background: rgba(97, 97, 97, 0.1);
            color: var(--text-tertiary);
        }

        /* Priority is now text-only (P1/P2/P3), no SVG icon */

        .board-card-due {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .board-card-due.overdue {
            color: #EF4444;
        }

        .board-card-due.today {
            color: #D97706;
        }

        .board-card-due svg {
            width: 12px;
            height: 12px;
        }

        .board-card-area {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }

        /* Board Card Input */
        .board-card-input {
            cursor: default;
        }

        .board-card-input:hover {
            transform: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .board-card-input-field {
            width: 100%;
            border: none;
            background: transparent;
            font-size: var(--font-size-14);
            color: var(--text-primary);
            font-family: var(--font-family);
            outline: none;
            padding: 0;
        }

        .board-card-input-field::placeholder {
            color: var(--text-tertiary);
        }

        .board-card-input-field:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Board Add Task Button */
        .board-column-add {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            margin: 0 8px 8px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .board-column-add:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .board-column-add svg {
            width: 14px;
            height: 14px;
        }

        /* Add Column Button */
        .board-add-column {
            flex: 0 0 280px;
            min-width: 280px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--bg-tertiary);
            border: 2px dashed var(--border-medium);
            border-radius: var(--radius-md);
            color: var(--text-tertiary);
            font-size: var(--font-size-14);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .board-add-column:hover {
            background: var(--bg-secondary);
            border-color: var(--text-tertiary);
            color: var(--text-secondary);
        }

        .board-add-column svg {
            width: 16px;
            height: 16px;
        }

        .section-menu-header {
            padding: 8px 12px 4px;
            font-size: var(--font-size-11);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Board Settings Button */
        .board-settings-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            border-radius: calc(var(--radius-sm) - 2px);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-left: 4px;
        }

        .board-settings-btn:hover {
            color: var(--text-secondary);
            background: var(--bg-secondary);
        }

        .board-settings-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Board Settings Popover */
        .board-settings-popover {
            position: fixed;
            width: 280px;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
            z-index: 1000;
            overflow: hidden;
        }

        .board-settings-section {
            padding: 12px;
        }

        .board-settings-section + .board-settings-section {
            border-top: 1px solid var(--border-light);
        }

        .board-settings-section-title {
            font-size: var(--font-size-11);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: -0.01em;
            margin-bottom: 8px;
        }

        .board-settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 0;
        }

        .board-settings-row label {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            cursor: pointer;
            user-select: none;
        }

        /* iOS-style toggle switch */
        .board-settings-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .board-settings-toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 14px;
            height: 14px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease;
        }

        .board-settings-toggle.active {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        .board-settings-toggle.active::after {
            transform: translateX(16px);
        }

        /* Hidden section row in popover */
        .board-settings-hidden-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0;
        }

        .board-settings-hidden-row span {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .board-settings-show-btn {
            font-size: var(--font-size-xs);
            color: var(--accent-blue);
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }

        .board-settings-show-btn:hover {
            background: var(--accent-blue-opacity-8);
        }

        .board-settings-hidden-section {
            margin-top: 8px;
        }

        .board-settings-empty {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            font-style: italic;
            padding: 4px 0;
        }

        /* New Board Card Elements */
        .board-card-task-id {
            font-size: 10px;
            color: var(--text-tertiary);
            font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
            white-space: nowrap;
        }

        .board-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }

        .board-card-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: var(--radius-sm);
            line-height: 1.4;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: transparent;
            border: 1px solid var(--border-light);
            color: var(--text-tertiary);
        }

        .board-card-tag-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
            background: var(--text-tertiary) !important;
        }

        .board-card-assignee {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-blue);
            color: white;
            font-size: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Reserve right space for avatar on the last child row */
        .board-card.has-assignee > :last-child:not(.board-card-assignee) {
            padding-right: 28px;
        }

        .board-card-someday {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }

        .board-card-schedule {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .board-card-schedule.today {
            color: var(--accent-blue);
        }

        .board-card-schedule svg {
            width: 12px;
            height: 12px;
        }

        .board-card-duration {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .board-card-duration svg {
            width: 12px;
            height: 12px;
        }

        /* Board Column Drop States */
        .board-column.column-dragging {
            opacity: 0.5;
            border: 2px dashed var(--accent-blue);
        }

        .board-column.drop-target {
            background: var(--accent-blue-light);
            border: 2px dashed var(--accent-blue);
        }

        .board-column-cards.drop-highlight {
            background: var(--accent-blue-opacity-3);
        }

        .board-card.drop-above::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-blue);
            border-radius: 1px;
        }

        .board-card.drop-below::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-blue);
            border-radius: 1px;
        }

        /* Unsectioned Tasks Column */
        .board-column.unsectioned {
            background: transparent;
            border: 1px solid var(--border-light);
        }

        .board-column.unsectioned .board-column-header {
            border-bottom-color: var(--border-light);
        }

        /* Project Notes Tab */
        .project-notes-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            margin-bottom: 16px;
        }

        .project-note-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-3);
            background: transparent;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .project-note-item:hover {
            background: var(--hover-light);
        }

        .project-note-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: var(--accent-blue-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-blue);
            flex-shrink: 0;
        }

        .project-note-icon svg {
            width: 16px;
            height: 16px;
        }

        .project-note-content {
            flex: 1;
            min-width: 0;
        }

        .project-note-title {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-note-preview {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-add-note-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2-5) var(--space-4);
            margin-top: 16px;
            margin-bottom: 16px;
            background: transparent;
            border: 1px dashed var(--border-light);
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            width: 100%;
        }

        .project-add-note-btn:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .project-add-note-btn svg {
            width: 16px;
            height: 16px;
        }

        .project-add-task-btn {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: 8px 0;
            margin-bottom: 12px;
            background: transparent;
            border: none;
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .project-add-task-btn:hover {
            color: var(--accent-blue);
            background: var(--accent-blue-opacity-8);
        }

        .project-add-task-btn svg {
            width: 14px;
            height: 14px;
        }

        .project-notes-empty {
            padding: 32px 16px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: var(--font-size-14);
        }

        .project-modal-content {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .project-modal-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .project-modal-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .project-modal-main {
            flex: 1;
            padding: 0 28px 16px 28px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        /* Project Description - Above Tabs */
        .project-description-header {
            padding: 0 28px 12px 28px;
            border-bottom: 1px solid var(--border-light);
        }

        .project-description-editor {
            min-height: 1.4em;
            max-height: 60px;
            overflow-y: auto;
            font-size: var(--font-size-sm);
            line-height: 1.4;
            color: var(--text-secondary);
            outline: none;
        }

        .project-description-editor:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        .project-description-editor:focus {
            outline: none;
            color: var(--text-primary);
        }

        .project-modal-sidebar {
            width: 280px;
            background: var(--bg-secondary);
            padding: var(--space-6) var(--space-5);
            border-left: 1px solid var(--border-light);
            overflow-y: auto;
        }

        /* Project Notes */
        .project-notes-section {
            margin-bottom: 24px;
        }

        .project-section-label {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .project-notes-editor {
            min-height: 60px;
            padding: 0;
            background: transparent;
            border-radius: 0;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-primary);
            outline: none;
        }

        .project-notes-editor:empty:before {
            content: "Add project notes...";
            color: var(--text-tertiary);
        }

        .project-notes-editor p {
            margin-bottom: 8px;
        }

        .project-notes-editor ul, .project-notes-editor ol {
            margin-bottom: 8px;
            padding-left: 24px;
        }

        .project-notes-editor ul {
            list-style-type: disc;
        }

        .project-notes-editor ul ul {
            list-style-type: circle;
        }

        .project-notes-editor ul ul ul {
            list-style-type: square;
        }

        .project-notes-editor ol {
            list-style-type: decimal;
        }

        .project-notes-editor ol ol {
            list-style-type: lower-alpha;
        }

        .project-notes-editor ol ol ol {
            list-style-type: lower-roman;
        }

        .project-notes-editor li {
            margin-bottom: 4px;
        }

        .project-notes-editor blockquote {
            border-left: 3px solid var(--accent-blue);
            padding-left: 16px;
            margin: 12px 0;
            color: var(--text-secondary);
            font-style: italic;
        }

        .project-notes-editor h1, .project-notes-editor h2, .project-notes-editor h3 {
            font-weight: 600;
            margin: 16px 0 8px 0;
        }

        .project-notes-editor h1 { font-size: var(--font-size-xl); }
        .project-notes-editor h2 { font-size: var(--font-size-lg); }
        .project-notes-editor h3 { font-size: var(--font-size-16); }

        .project-notes-editor code {
            background: var(--bg-main);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
            font-family: 'SF Mono', 'Consolas', monospace;
            font-size: var(--font-size-sm);
        }

        /* Project task input alignment */
        .project-modal-main .area-new-task {
            padding-left: 0;
            margin-left: 0;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        .project-modal-main .unsectioned-tasks {
            padding-left: 0;
        }

        .project-modal-main .task-row {
            margin: 0;
            gap: var(--space-2);
        }

        .project-modal-main .task-row .task-drag-handle {
            display: none;
        }

        .project-modal-main .project-task-section {
            margin-left: 0;
        }

        .project-modal-main .project-task-section-header {
            padding-left: 0;
        }

        .project-modal-main .section-inline-input {
            padding: 4px 0;
        }

        /* Deadline picker in sidebar */
        .project-deadline-picker {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .project-deadline-picker:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .project-deadline-picker svg {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
        }

        .project-deadline-picker span {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }

        .project-deadline-picker.empty span {
            color: var(--text-tertiary);
        }

        .project-deadline-picker input[type="date"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            left: 0;
            top: 0;
        }

        [data-theme="dark"] #projectDeadlineInput,
        [data-theme="dark"] .project-deadline-picker input[type="date"] {
            color-scheme: dark;
        }

        @media (prefers-color-scheme: dark) {
            #projectDeadlineInput,
            .project-deadline-picker input[type="date"] {
                color-scheme: dark;
            }
        }

        .project-deadline-picker-wrapper {
            position: relative;
        }

        .project-deadline-clear {
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            margin-left: auto;
            opacity: 0;
            transition: all var(--transition-fast);
        }

        .project-deadline-picker:hover .project-deadline-clear {
            opacity: 1;
        }

        .project-deadline-clear:hover {
            background: rgba(0,0,0,0.1);
            color: var(--text-primary);
        }

        .project-deadline-clear svg {
            width: 12px;
            height: 12px;
        }

        /* Project Sections (task groups) - Things 3 style */
        .project-task-section {
            margin-bottom: 16px;
        }

        .project-task-section-header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-1-5);
            padding: 8px 0;
            cursor: default;
            user-select: none;
        }

        .project-task-section-header:hover {
            opacity: 0.9;
        }

        .project-task-section-header:hover .section-add-btn {
            opacity: 1;
        }

        .section-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--accent-blue);
            cursor: inherit;
            padding: var(--space-half) var(--space-1);
            margin: -2px -4px;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .section-name.editing {
            outline: none;
            background: var(--accent-blue-opacity-10);
            cursor: text;
        }

        .section-count {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 400;
            color: var(--text-tertiary);
            margin-left: 4px;
        }

        .section-add-btn {
            width: 20px;
            height: 20px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

        .section-add-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .section-add-btn svg {
            width: 14px;
            height: 14px;
        }

        .section-tasks {
            padding: 0 16px;
            margin: 0 -16px;
            overflow: visible;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 2000px;
            opacity: 1;
        }

        .project-task-section.collapsed .section-tasks {
            overflow: hidden;
        }

        .project-task-section.collapsed .section-tasks {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        /* Section inline task input */
        .section-inline-input {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: 8px 0;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .section-inline-input.visible {
            max-height: 50px;
            opacity: 1;
            padding: 8px 0;
        }

        .section-inline-input .checkbox {
            opacity: 0.4;
        }

        /* Fix checkbox alignment in inline input rows */
        .section-inline-input .checkbox-wrapper,
        .inline-task-input-row .checkbox-wrapper,
        .unsectioned-drop-zone > .section-inline-input .checkbox-wrapper {
            align-self: center;
            margin-top: 0;
        }

        .section-inline-input input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .section-inline-input input::placeholder {
            color: var(--text-tertiary);
        }

        /* Task row animations - Things style */
        .task-row, .flat-task-row, .flat-project-row, .flat-area-row {
            overflow: hidden;
        }

        /* Staggered list entrance animation */
        .task-row.stagger-enter, .flat-task-row.stagger-enter, .flat-project-row.stagger-enter, .flat-area-row.stagger-enter {
            opacity: 0;
            transform: translateY(8px);
        }

        .task-row.stagger-animate, .flat-task-row.stagger-animate, .flat-project-row.stagger-animate, .flat-area-row.stagger-animate {
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0);
        }

        /* Activity item slide-in (matches task-entering/task-animate for inbox) */
        .activity-item.activity-entering {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin: 0;
            transform: translateY(-4px);
            overflow: hidden;
        }

        .activity-item.activity-animate {
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 120px;
            opacity: 1;
            padding-top: 10px;
            padding-bottom: 10px;
            transform: translateY(0);
            overflow: visible;
        }

        /* Single task entrance animation (for new tasks) */
        .task-row.task-entering, .flat-task-row.task-entering {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin: 0;
            border-color: transparent;
            transform: translateY(-4px);
            overflow: hidden;
        }

        .task-row.task-animate, .flat-task-row.task-animate {
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 80px;
            opacity: 1;
            padding-top: 16px;
            padding-bottom: 16px;
            transform: translateY(0);
            overflow: visible;
        }

        .task-row.completing, .flat-task-row.completing {
            opacity: 0.6;
        }

        .task-row.completing .task-title, .flat-task-row.completing .task-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        .task-row.completed, .flat-task-row.completed {
            animation: taskComplete 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes taskComplete {
            0% {
                opacity: 0.6;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.98);
            }
        }

        /* Smooth collapse animation for completed tasks */
        .task-row.collapsing, .flat-task-row.collapsing {
            transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.1s ease,
                        box-shadow 0.2s ease,
                        border-radius 0.2s ease;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
        }

        .task-row.collapsed, .flat-task-row.collapsed {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
            border-width: 0 !important;
        }

        /* Drag and drop styles for sections */
        .project-task-section[draggable="true"] {
            cursor: default;
        }

        .project-task-section.dragging {
            opacity: 0.5;
            background: var(--accent-blue-light);
        }

        .project-task-section.drag-over {
            border-top: 2px solid var(--accent-blue);
            margin-top: -2px;
        }

        /* Section heading - draggable */
        .project-task-section-header {
            cursor: grab;
            transition: background var(--transition-normal);
            position: relative;
            padding: 8px 0;
            margin: 0;
        }

        .project-task-section-header:hover {
            background: var(--hover-light);
            border-radius: var(--radius-md);
        }

        /* Section drag-ready highlight */
        .project-task-section-header.drag-ready {
            background: rgba(59, 130, 246, 0.12) !important;
            border-radius: var(--radius-md);
        }

        /* Section dragging state */
        .project-task-section-header.dragging {
            opacity: 0.3;
            cursor: grabbing;
        }

        /* Section drop indicator line - above */
        .project-task-section-header.drop-above::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: #4A90D9;
            border-radius: var(--radius-sm);
            z-index: 10;
        }

        /* Section drop indicator line - below */
        .project-task-section-header.drop-below::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: #4A90D9;
            border-radius: var(--radius-sm);
            z-index: 10;
        }

        /* Entire section container */
        .project-task-section {
            border-radius: var(--radius-md);
        }

        /* Section tasks drop zone - minimal styling, indicators handle visual feedback */
        .section-tasks {
            min-height: 8px;
            border-radius: var(--radius-md);
            transition: background var(--transition-fast), min-height 0.15s ease;
        }

        /* Empty section shows a drop zone when dragging */
        body.is-dragging .section-tasks:empty {
            min-height: 40px;
            background: var(--accent-blue-opacity-5);
            border: 2px dashed var(--accent-blue-border);
        }

        body.is-dragging .section-tasks:empty:hover {
            background: var(--accent-blue-opacity-12);
            border-color: var(--accent-blue);
        }

        /* Unsectioned tasks drop zone */
        .unsectioned-drop-zone {
            min-height: 8px;
            border-radius: var(--radius-md);
            padding: 0 16px;
            margin: 0 -16px;
            overflow: visible;
        }

        /* Task row transitions for smooth reordering */
        /* Base task-row transition for smooth FLIP animations */
        .task-row {
            transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease;
        }

        /* Dropped task animation - subtle highlight pulse that works with FLIP */
        .task-row.just-dropped {
            animation: dropHighlight 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        @keyframes dropHighlight {
            0% {
                background: var(--accent-blue-opacity-12);
                box-shadow: 0 0 0 1px var(--accent-blue-opacity-20);
            }
            100% {
                background: transparent;
                box-shadow: none;
            }
        }

        /* Premium settle animation for dropped task rows */
        .task-row-settling {
            animation: taskRowSettle 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
            transition: none !important;
            opacity: 1 !important;
        }

        @keyframes taskRowSettle {
            0% {
                transform: scale(1.02) translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            50% {
                transform: scale(0.99) translateY(1px);
            }
            100% {
                transform: scale(1) translateY(0);
                box-shadow: none;
            }
        }

        /* Premium settle animation for timeline tasks */
        .timeline-task-settling {
            animation: timelineTaskSettle 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
            transition: none !important;
            opacity: 1 !important;
        }

        @keyframes timelineTaskSettle {
            0% {
                transform: scale(1.02);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            }
            50% {
                transform: scale(0.98);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }
        }

        /* Section header smooth transitions */
        .project-task-section-header {
            transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.2s ease, opacity 0.2s ease;
        }

        .project-task-section-header.just-dropped {
            animation: dropHighlight 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        /* Section container for FLIP animations */
        .project-task-section {
            transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        .project-task-section.flip-animate {
            transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        }


        /* Drop zone styling when dragging */
        .section-tasks,
        .unsectioned-drop-zone {
            min-height: 20px;
        }

        /* Section heading content wrapper */
        .section-heading-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-half);
            flex: 1;
            min-width: 0;
        }

        /* Section menu button (three dots) */
        .section-menu-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

        .project-task-section-header:hover .section-menu-btn {
            opacity: 1;
        }

        .section-menu-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .section-menu-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Section actions container */
        .section-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            margin-left: auto;
            flex-shrink: 0;
        }

        /* Section add task button */
        .section-add-task-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

        .project-task-section-header:hover .section-add-task-btn {
            opacity: 1;
        }

        .section-add-task-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .section-add-task-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Inline task input row (section + button) */
        .inline-task-input-row {
            display: flex;
            align-items: center;
            padding: var(--space-2-5) var(--space-3);
            gap: var(--space-3);
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            border: 1px dashed var(--border-medium);
            margin-bottom: var(--space-1);
            animation: fadeInUp 0.2s ease;
        }

        .inline-task-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            min-height: 20px;
        }

        .inline-task-title:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Section description */
        .section-description {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            padding: 4px 0 0 0;
            line-height: 1.4;
        }

        .section-description.editing {
            outline: none;
            background: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-2);
            min-width: 200px;
        }

        .section-description.editing:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            opacity: 0.6;
        }

        /* Section dropdown menu */
        .section-dropdown-menu {
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            padding: var(--space-1-5);
            min-width: 180px;
            z-index: 1001;
        }

        .section-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            transition: background var(--transition-fast);
        }

        .section-menu-item:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        .section-menu-item svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .section-menu-item.danger {
            color: var(--accent-red);
        }

        .section-menu-item.danger:hover {
            background: rgba(220, 53, 69, 0.08);
        }

        .section-menu-divider {
            height: 1px;
            background: var(--border-primary);
            margin: 6px 0;
        }

        /* Add Section button */
        .add-section-btn {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: 8px 0;
            margin-top: 12px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 400;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .add-section-btn:hover {
            color: var(--accent-blue);
            background: var(--accent-blue-opacity-8);
        }

        .add-section-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Completed Tasks Section (List View) */
        .completed-tasks-section {
            margin-top: 16px;
        }

        .completed-tasks-divider {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 4px;
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
            user-select: none;
        }

        .completed-tasks-divider:hover {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        .completed-chevron {
            width: 14px;
            height: 14px;
            transition: transform var(--transition-fast);
        }

        .completed-section-collapsed .completed-chevron {
            transform: rotate(0deg);
        }

        .completed-tasks-section:not(.completed-section-collapsed) .completed-chevron,
        .board-completed-group:not(.completed-section-collapsed) .completed-chevron {
            transform: rotate(90deg);
        }

        .completed-section-collapsed .completed-tasks-group,
        .board-completed-group.completed-section-collapsed .completed-tasks-group {
            display: none;
        }

        .completed-task-row {
            opacity: 0.5;
        }

        .completed-task-row .task-title {
            text-decoration: line-through;
        }

        /* Board Completed Group */
        .board-completed-group {
            margin-top: 8px;
            border-top: 1px solid var(--border-light);
            padding-top: 8px;
        }

        .board-completed-group .completed-tasks-divider {
            padding: 4px 8px;
            font-size: 11px;
        }

        .board-completed-group .completed-tasks-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 6px;
        }

        /* ========================================
           AREA MODAL STYLES
           ======================================== */
        .area-modal {
            display: none;
            position: fixed;
            background: var(--bg-card);
            z-index: 101;
            flex-direction: column;
            overflow: hidden;
        }

        .area-modal-header {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-7) var(--space-7) var(--space-5);
        }

        .area-modal-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .area-modal-icon:hover {
            transform: scale(1.02);
        }

        .area-modal-icon svg {
            width: 18px;
            height: 18px;
        }

        .area-modal-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            border: none;
            outline: none;
            background: transparent;
            padding: 0;
        }

        .area-modal-title::placeholder {
            color: var(--text-tertiary);
        }

        .area-modal-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .area-modal-actions .modal-close {
            width: var(--btn-sm);
            height: var(--btn-sm);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            transition: all var(--transition-fast);
        }

        .area-modal-actions .modal-close:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .area-modal-actions .modal-close.active {
            color: var(--accent-blue);
        }

        .area-modal-actions .modal-close svg {
            width: 18px;
            height: 18px;
        }

        /* Area Description - Above Tabs */
        .area-description-header {
            padding: 0 28px 12px 28px;
            border-bottom: 1px solid var(--border-light);
        }

        .area-description-editor {
            min-height: 1.4em;
            max-height: 60px;
            overflow-y: auto;
            font-size: var(--font-size-sm);
            line-height: 1.4;
            color: var(--text-secondary);
            outline: none;
        }

        .area-description-editor:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        .area-description-editor:focus {
            outline: none;
            color: var(--text-primary);
        }

        /* Area Modal Tabs */
        .area-modal-tabs {
            display: flex;
            gap: var(--space-1);
            padding: 0 28px;
            border-bottom: 1px solid var(--border-light);
        }

        .area-tab {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-3) var(--space-4);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-bottom: -1px;
        }

        .area-tab:hover {
            color: var(--text-primary);
        }

        .area-tab.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
        }

        .area-tab svg {
            width: 16px;
            height: 16px;
        }

        /* Area Modal Content */
        .area-modal-content {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .area-modal-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .area-modal-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .area-modal-main {
            flex: 1;
            padding: 16px 28px;
            overflow-y: auto;
        }

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

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

        /* Area Modal Sidebar */
        .area-modal-sidebar {
            width: 280px;
            background: var(--bg-secondary);
            padding: var(--space-6) var(--space-5);
            border-left: 1px solid var(--border-light);
            overflow-y: auto;
        }

        .area-detail-item {
            margin-bottom: var(--space-5);
        }

        .area-detail-label {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .area-detail-value {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .area-stats {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .area-stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .area-stat-label {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .area-stat-value {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Area Add Buttons */
        .area-add-project-btn,
        .area-add-task-btn,
        .area-add-note-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2-5) var(--space-4);
            margin-bottom: 16px;
            background: transparent;
            border: 1px dashed var(--border-light);
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            width: 100%;
        }

        .area-add-project-btn:hover,
        .area-add-task-btn:hover,
        .area-add-note-btn:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .area-add-project-btn svg,
        .area-add-task-btn svg,
        .area-add-note-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Area Empty State */
        .area-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 24px;
            text-align: center;
        }

        .area-empty-state svg {
            width: 48px;
            height: 48px;
            color: var(--text-tertiary);
            opacity: 0.5;
            margin-bottom: 16px;
        }

        .area-empty-state p {
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }

        .area-empty-state span {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        /* Area Project Card */
        .area-project-card {
            display: flex;
            align-items: center;
            gap: var(--space-3-5);
            padding: 16px 18px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-bottom: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .area-project-card:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
            box-shadow: 0 2px 8px var(--accent-blue-opacity-12);
        }

        .area-project-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }

        .area-project-icon svg {
            width: 20px;
            height: 20px;
        }

        .area-project-content {
            flex: 1;
            min-width: 0;
        }

        .area-project-name {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .area-project-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
        }

        .area-project-deadline {
            color: var(--accent-orange);
        }

        .area-project-progress {
            height: 6px;
            background: rgba(0, 0, 0, 0.06);
            border-radius: var(--radius-sm);
            margin-top: 10px;
            overflow: hidden;
        }

        .area-project-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-blue), #5BA3E0);
            border-radius: var(--radius-sm);
            transition: width 0.3s ease;
        }

        .area-project-chevron {
            color: var(--text-tertiary);
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .area-project-card:hover .area-project-chevron {
            opacity: 1;
        }

        .area-project-chevron svg {
            width: 16px;
            height: 16px;
        }

        /* Area Note Item */
        .area-note-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-3);
            background: transparent;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
            margin-bottom: 4px;
        }

        .area-note-item:hover {
            background: var(--hover-light);
        }

        .area-note-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: var(--accent-blue-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-blue);
            flex-shrink: 0;
        }

        .area-note-icon svg {
            width: 16px;
            height: 16px;
        }

        .area-note-content {
            flex: 1;
            min-width: 0;
        }

        .area-note-title {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .area-note-preview {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .area-note-date {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        /* Area Tasks Container — card styles applied globally */

        /* Drag and drop styles for tasks */
        .task-row[draggable="true"] {
            cursor: default;
        }

        .task-row.drag-over-above {
            border-top: 2px solid var(--accent-blue);
            margin-top: -2px;
        }

        .task-row.drag-over-below {
            border-bottom: 2px solid var(--accent-blue);
            margin-bottom: -2px;
        }

        .section-tasks.drag-over {
            background: var(--accent-blue-opacity-5);
            border-radius: var(--radius-sm);
        }

        .task-drag-handle {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            color: var(--text-tertiary);
            opacity: 0;
            transition: opacity var(--transition-fast);
            flex-shrink: 0;
            margin-right: 4px;
        }

        .task-drag-handle:active {
            cursor: grabbing;
        }

        .task-row:hover .task-drag-handle {
            opacity: 1;
        }

        /* Unsectioned tasks drop zone */
        .unsectioned-tasks-zone {
            min-height: 8px;
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        min-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .unsectioned-tasks-zone.drag-over {
            background: var(--accent-blue-opacity-5);
            border-radius: var(--radius-sm);
            min-height: 40px;
        }

        .unsectioned-tasks {
            min-height: 8px;
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        min-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .unsectioned-tasks.drag-over {
            background: var(--accent-blue-opacity-5);
            border-radius: var(--radius-sm);
            min-height: 40px;
        }

        /* Add section button */
        .add-section-btn {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: 8px 0;
            margin-top: 12px;
            border: 1px dashed var(--border-medium);
            border-radius: var(--radius-md);
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .add-section-btn:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .add-section-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Inline section input */
        .inline-add-section {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-2) var(--space-3);
            margin-top: 12px;
            border-bottom: 1px solid var(--border-light);
            background: transparent;
            cursor: text;
            opacity: 0.6;
            transition: opacity var(--transition-fast);
        }

        .inline-add-section:hover,
        .inline-add-section:focus-within {
            opacity: 1;
        }

        .inline-add-section input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .inline-add-section input::placeholder {
            color: var(--text-tertiary);
        }

        .inline-add-section .hint {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        /* Project sidebar details */
        .project-detail-item {
            margin-bottom: 20px;
            position: relative;
        }

        .project-detail-label {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .project-detail-value {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .project-area-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-1) var(--space-2-5);
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
        }

        .project-area-badge:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .project-area-badge.empty {
            color: var(--text-tertiary);
        }

        /* Area selector dropdown */
        .area-selector-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 4px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            min-width: 180px;
            max-height: 250px;
            overflow-y: auto;
            z-index: 200;
            display: none;
        }

        .area-selector-dropdown.visible {
            display: block;
        }

        .area-selector-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .area-selector-item:hover {
            background: var(--accent-blue-light);
        }

        .area-selector-item.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .area-selector-item .area-icon {
            width: 24px;
            height: 24px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-12);
        }

        .area-selector-item .area-icon svg {
            color: white;
        }

        .area-selector-item .area-icon.no-area {
            background: var(--bg-tertiary);
        }

        .area-selector-item .area-icon.no-area svg {
            color: var(--text-tertiary);
        }

        .area-selector-item .area-name,
        .area-selector-item > span {
            font-size: var(--font-size-14);
        }

        .area-selector-divider {
            height: 1px;
            background: var(--border-light);
            margin: 4px 0;
        }

        /* Icon Picker */
        .icon-picker-trigger {
            cursor: pointer;
            transition: box-shadow var(--transition-fast);
            position: relative;
        }

        .icon-picker-trigger:hover {
            box-shadow: 0 0 0 2px var(--accent-blue-light);
        }

        .icon-picker-dropdown {
            position: fixed;
            width: 240px;
            max-height: 280px;
            overflow-y: auto;
            overflow-x: hidden;
            background: #FFFFFF;
            border-radius: var(--radius-lg);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
            z-index: 10000;
            padding: var(--space-2-5);
            opacity: 0;
            visibility: hidden;
            transform: scale(0.95) translateY(-4px);
            transform-origin: top left;
            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.2s;
            pointer-events: none;
        }

        .icon-picker-dropdown::-webkit-scrollbar {
            width: 6px;
        }

        .icon-picker-dropdown::-webkit-scrollbar-track {
            background: transparent;
        }

        .icon-picker-dropdown::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: var(--radius-sm);
        }

        .icon-picker-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.25);
        }

        .icon-picker-dropdown.visible {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translateY(0);
            pointer-events: auto;
        }

        .icon-picker-section {
            margin-bottom: 8px;
        }

        .icon-picker-section:last-child {
            margin-bottom: 0;
        }

        .icon-picker-section-title {
            font-family: var(--font-family);
            font-size: var(--font-size-2xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
            padding: 0 2px;
        }

        .icon-picker-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: var(--space-half);
        }

        .icon-picker-item {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease;
            color: var(--text-secondary);
        }

        .icon-picker-item:hover:not(.selected) {
            background: rgba(0, 0, 0, 0.06);
            color: var(--text-primary);
        }

        .icon-picker-item:active {
            opacity: 0.8;
        }

        .icon-picker-item.selected {
            /* Background color set dynamically via inline style */
            color: white;
        }

        .icon-picker-item svg {
            width: 14px;
            height: 14px;
            pointer-events: none;
        }

        .icon-picker-colors {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: var(--space-1-5);
            padding: var(--space-3) var(--space-half) var(--space-1);
            border-top: 1px solid var(--border-light);
            margin-top: var(--space-1-5);
        }

        .icon-picker-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            transition: box-shadow 0.15s ease, border-color 0.15s ease;
            border: 2px solid transparent;
            box-sizing: border-box;
        }

        .icon-picker-color:hover {
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }

        .icon-picker-color:active {
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
        }

        .icon-picker-color.selected {
            border-color: var(--text-primary);
            box-shadow: 0 0 0 2px white inset;
        }

        .project-deadline {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            color: var(--text-secondary);
        }

        .project-deadline svg {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
        }

        /* Add New Area/Project Buttons */
        .add-area-btn,
        .add-project-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2-5) var(--space-3);
            margin: 8px 0;
            border: 1px dashed var(--border-medium);
            border-radius: var(--radius-md);
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            width: 100%;
        }

        .add-area-btn:hover,
        .add-project-btn:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .add-area-btn svg,
        .add-project-btn svg {
            width: 16px;
            height: 16px;
        }

        /* New task input in areas/projects */
        .area-new-task,
        .project-new-task {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-2) var(--space-3);
            margin: 4px 0;
        }

        .area-new-task input,
        .project-new-task input {
            flex: 1;
            border: none;
            outline: none;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            background: transparent;
        }

        .area-new-task input::placeholder,
        .project-new-task input::placeholder {
            color: var(--text-tertiary);
        }

        /* Task row move indicator */
        .task-move-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-fast);
        }

        .task-row:hover .task-move-btn {
            opacity: 1;
        }

        .task-move-btn:hover {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }

        .task-move-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Move dropdown */
        .move-dropdown {
            position: absolute;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-dropdown);
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 100;
            display: none;
        }

        .move-dropdown.visible {
            display: block;
        }

        .move-dropdown-header {
            padding: var(--space-2) var(--space-3);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border-light);
        }

        .move-dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .move-dropdown-item:hover {
            background: var(--bg-hover);
        }

        .move-dropdown-item.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .move-dropdown-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-12);
        }

        .move-dropdown-icon svg {
            width: 16px;
            height: 16px;
        }

        .move-dropdown-label {
            font-size: var(--font-size-sm);
        }

        .move-dropdown-section {
            padding: 4px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .move-dropdown-section:last-child {
            border-bottom: none;
        }

        .today-calendar {
            flex: 0 0 330px;
            width: 330px;
            max-width: 330px;
            overflow-y: auto;
            padding: 0 var(--space-3) var(--space-4);
            position: relative;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
            background: var(--bg-card);
            border-left: 1px solid var(--border-light);
            box-sizing: border-box;
            isolation: isolate; /* Create stacking context for proper z-index behavior */
        }

        .today-calendar::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera */
        }

        .timeline-header {
            position: sticky;
            top: 0;
            background: var(--bg-card);
            padding: 12px 0;
            margin-bottom: 8px;
            z-index: 100;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }

        .timeline-header-left {
            flex: 1;
        }

        .timeline-duration {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-secondary);
        }

        .timeline-duration.over-limit {
            color: #D32F2F;
        }

        .timeline-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 4px 0;
        }

        .timeline-subtitle {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 400;
            color: var(--text-tertiary);
            margin: 0;
        }

        /* Week Planner - Plan Mode */
        .week-planner {
            flex: 1;
            overflow: hidden;
            padding: var(--space-4) var(--space-3);
            background: linear-gradient(180deg, #F8F9FB 0%, #F3F5F8 100%);
            box-sizing: border-box;
        }

        /* Week controls bar - groups with gaps */
        .week-controls-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            background: transparent;
        }

        /* Segmented control group */
        .control-segment {
            display: flex;
            background: #FFFFFF;
            border-radius: var(--radius-md);
            padding: 4px;
            gap: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .week-control-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
        }

        .week-control-btn svg {
            width: 20px;
            height: 20px;
        }

        .week-control-btn:hover {
            background: var(--hover-light);
            color: var(--text-secondary);
        }

        .week-control-btn.active {
            background: rgba(74, 144, 217, 0.12);
            color: var(--accent-blue);
        }

        .week-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--space-3);
            flex: 1;
            min-height: 0; /* Allow grid to shrink within flex container */
        }

        .week-day-column {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: none;
            box-shadow: var(--shadow-card);
            padding: var(--space-2) var(--space-2) var(--space-3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            transition: box-shadow var(--transition-fast);
        }

        .week-day-column:hover {
            box-shadow: var(--shadow-card-hover);
        }

        .week-day-header {
            flex-shrink: 0;
            height: 56px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
            overflow: hidden;
        }

        .week-day-name {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .week-day-date-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }

        .week-day-date {
            font-family: var(--font-family);
            font-size: var(--font-size-18);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
        }

        /* Add task button in day header */
        .week-day-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            opacity: 0;
        }

        .week-day-date-row:hover .week-day-add-btn {
            opacity: 1;
        }

        .week-day-add-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
            transform: scale(1.1);
        }

        .week-day-add-btn:active {
            transform: scale(0.95);
        }

        .week-day-add-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Always show on touch devices */
        @media (hover: none) {
            .week-day-add-btn {
                opacity: 1;
            }
        }

        .week-day-header .day-duration-total {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-secondary);
            margin-left: 0;
            margin-top: 0;
            background: none;
            border-radius: 0;
            padding: 0;
            height: auto;
            min-width: auto;
            white-space: nowrap;
        }

        .week-day-header .day-duration-total.over-limit {
            color: #D32F2F;
            background: none;
        }

        .week-day-column.is-today {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 1px var(--accent-blue);
        }

        .week-day-column.is-today .week-day-date {
            color: var(--accent-blue);
        }

        /* All-Day Events Section - Week View */
        .week-day-all-day {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 8px;
            min-height: 32px; /* Consistent height for timeline alignment */
            box-sizing: border-box;
        }

        /* Empty state - hide border but keep height for alignment */
        .week-day-all-day.empty {
            border-bottom-color: transparent;
        }

        /* All-Day Events Section - Today Timeline */
        .timeline-all-day {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 8px 44px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }

        .all-day-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            white-space: nowrap;
        }

        .all-day-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        /* All-Day Event Chip */
        .all-day-chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-left: 3px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            color: var(--text-primary);
            cursor: pointer;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all 0.15s ease;
        }

        .all-day-chip:hover {
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        /* Calendar color variants for all-day chips */
        .all-day-chip.calendar-blue { border-left-color: #007AFF; }
        .all-day-chip.calendar-purple { border-left-color: #AF52DE; }
        .all-day-chip.calendar-green { border-left-color: #34C759; }
        .all-day-chip.calendar-red { border-left-color: #FF3B30; }
        .all-day-chip.calendar-orange { border-left-color: #FF9500; }
        .all-day-chip.calendar-yellow { border-left-color: #FFCC00; }
        .all-day-chip.calendar-pink { border-left-color: #FF2D55; }
        .all-day-chip.calendar-teal { border-left-color: #5AC8FA; }

        .week-day-events {
            display: flex;
            flex-direction: column;
            gap: var(--space-1-5);
            margin-bottom: 12px;
        }

        .week-event-item {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-left: 3px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-2-5);
            cursor: pointer;
            transition: all var(--transition-fast);
            overflow: hidden;
        }

        .week-event-item:hover {
            border-top-color: var(--border-medium);
            border-right-color: var(--border-medium);
            border-bottom-color: var(--border-medium);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        /* Calendar color variations for week list events */
        .week-event-item.calendar-blue {
            border-left-color: #007AFF;
        }

        .week-event-item.calendar-purple {
            border-left-color: #AF52DE;
        }

        .week-event-item.calendar-green {
            border-left-color: #34C759;
        }

        .week-event-item.calendar-red {
            border-left-color: #FF3B30;
        }

        .week-event-item.calendar-orange {
            border-left-color: #FF9500;
        }

        .week-event-item.calendar-yellow {
            border-left-color: #FFCC00;
        }

        /* Multi-calendar stacked color bars */
        .calendar-bars {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            display: flex;
            flex-direction: column;
            border-radius: 2px 0 0 2px;
            overflow: hidden;
        }

        .calendar-bar {
            flex: 1;
            min-height: 3px;
        }

        /* Week event item with calendar bars */
        .week-event-item {
            position: relative;
        }

        /* Week timeline event with calendar bars */
        .week-timeline-event {
            position: relative;
        }

        /* All-day chip with calendar bars */
        .all-day-chip {
            position: relative;
        }

        .all-day-chip .calendar-bars {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
        }

        /* Event card multi-calendar styling */
        .event-card.multi-calendar {
            border-left: none;
            padding-left: 13px;
        }

        .event-card .calendar-bars {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: 4px 0 0 4px;
        }

        .week-event-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .week-event-meta {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .week-day-tasks {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1-5);
        }

        .week-day-column.drag-over {
            background: rgba(74, 144, 217, 0.08);
            border-color: var(--accent-blue);
        }

        .week-task-item {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-2-5);
            cursor: pointer;
            transition: all var(--transition-fast);
            overflow: hidden;
        }

        .week-task-item:hover {
            border-color: var(--border-medium);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .week-task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .week-task-meta {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        /* Week Timeline View */
        .week-day-timeline {
            flex: 1;
            min-height: 0; /* Required for flex item to scroll */
            position: relative;
            overflow-y: auto;
            padding: var(--space-1);
        }

        /* Week Timeline Grid - Hour rows */
        .week-day-timeline-grid {
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow-y: auto;
        }

        /* Allow scrolling to see last hours without ugly gap */
        .week-day-timeline-grid::after {
            content: '';
            display: block;
            height: 150px;
            flex-shrink: 0;
        }

        .week-hour-row {
            position: relative;
            border-top: 1px solid var(--border-light);
            box-sizing: border-box;
            flex-shrink: 0;
            pointer-events: none;
        }

        .week-hour-row:last-child {
            border-bottom: 1px solid var(--border-light);
        }

        .week-hour-label {
            position: absolute;
            top: 2px;
            left: 4px;
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            pointer-events: none;
            opacity: 0.7;
        }

        /* Events overlay - sits on top of grid */
        .week-events-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .week-events-overlay > * {
            pointer-events: auto;
        }

        .week-timeline-event,
        .week-timeline-task {
            position: absolute;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            padding: var(--space-1-5) var(--space-2);
            cursor: pointer;
            transition: all var(--transition-fast);
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            z-index: 1;
        }

        .week-timeline-event {
            border-left: 3px solid var(--accent-blue);
        }

        .week-timeline-task {
            cursor: grab;
        }

        .week-timeline-task:active {
            cursor: grabbing;
        }

        /* Calendar color variations for week timeline events */
        .week-timeline-event.calendar-blue {
            border-left-color: #007AFF;
        }

        .week-timeline-event.calendar-purple {
            border-left-color: #AF52DE;
        }

        .week-timeline-event.calendar-green {
            border-left-color: #34C759;
        }

        .week-timeline-event.calendar-red {
            border-left-color: #FF3B30;
        }

        .week-timeline-event.calendar-orange {
            border-left-color: #FF9500;
        }

        .week-timeline-event.calendar-yellow {
            border-left-color: #FFCC00;
        }

        .week-timeline-event:hover,
        .week-timeline-task:hover {
            border-top-color: var(--border-medium);
            border-right-color: var(--border-medium);
            border-bottom-color: var(--border-medium);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            z-index: 10;
        }

        /* Midnight-spanning event segments */
        .week-timeline-event.midnight-segment-start {
            border-bottom: 2px dashed var(--border-color);
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .week-timeline-event.midnight-segment-end {
            border-top: 2px dashed var(--border-color);
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .week-timeline-title {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 4px;
            overflow: hidden;
            margin-bottom: 2px;
        }

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

        .week-timeline-time-label {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        /* Drop highlight - shows exact area where task will land */
        .drop-highlight {
            position: absolute;
            left: 0;
            right: 0;
            background: rgba(59, 130, 246, 0.12);
            border-radius: var(--radius-sm);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.1s ease;
            z-index: 1;
        }

        .drop-highlight.visible {
            opacity: 1;
        }

        .drop-highlight.conflict {
            background: rgba(239, 68, 68, 0.15);
        }

        /* Drag preview time display */
        .timeline-drag-preview .preview-time {
            color: var(--accent-blue);
            font-weight: 600;
            margin-right: 8px;
            min-width: 60px;
        }

        .timeline-drag-preview .preview-time:empty {
            display: none;
        }

        .timeline-drag-preview .preview-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .timeline-drag-preview .preview-duration {
            color: var(--text-secondary);
            margin-left: 8px;
            flex-shrink: 0;
        }

        /* ============================================
           TASK RESIZE HANDLE
           ============================================ */

        /* Resize handle - positioned at bottom of task cards */
        .task-resize-handle {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 16px;
            cursor: row-resize !important;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity var(--transition-fast);
            z-index: 10;
        }

        /* Ensure resize cursor shows for task resize handles in all contexts */
        .calendar-event .task-resize-handle,
        .week-timeline-task .task-resize-handle,
        .event-card .task-resize-handle {
            cursor: row-resize !important;
        }

        /* Show resize handle on hover */
        .calendar-event:hover .task-resize-handle,
        .week-timeline-task:hover .task-resize-handle,
        .task-resize-handle:hover {
            opacity: 1;
        }

        /* Visual indicator bar */
        .resize-handle-bar {
            width: 32px;
            height: 3px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
            transition: background var(--transition-fast), width 0.15s ease;
        }

        .task-resize-handle:hover .resize-handle-bar {
            background: var(--accent-blue);
            width: 40px;
        }

        /* Active resize state - applied to card during resize */
        .calendar-event.resizing,
        .week-timeline-task.resizing {
            z-index: 100;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .calendar-event.resizing .event-card {
            border-color: var(--accent-blue);
        }

        .week-timeline-task.resizing {
            border-color: var(--accent-blue);
        }

        /* Duration preview tooltip during resize */
        .resize-duration-preview {
            position: fixed;
            background: rgba(53, 122, 189, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(53, 122, 189, 0.3);
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-2);
            font-size: 12px;
            font-weight: 600;
            color: var(--accent-blue);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            pointer-events: none;
            z-index: 99999;
            white-space: nowrap;
        }

        .resize-duration-preview.conflict {
            border-color: rgba(239, 68, 68, 0.5);
            background: rgba(239, 68, 68, 0.15);
            color: var(--color-error);
        }

        /* Prevent text selection during resize */
        body.is-resizing {
            user-select: none;
            cursor: row-resize !important;
        }

        body.is-resizing * {
            cursor: row-resize !important;
        }

        /* Force resize cursor when hovering over resize handle (WebKit/Tauri fix) */
        body.resize-cursor-active,
        body.resize-cursor-active * {
            cursor: row-resize !important;
        }

        /* Calendar Timeline - Time-based absolute positioning */
        .calendar-timeline {
            position: relative;
            width: 100%;
            /* Height must cover full 24-hour grid (24 * 70px = 1680px) for clicks to register */
            min-height: 1680px;
            height: auto;
            padding: 0 0 40px 0;
            margin: 0;
            background: transparent;
            z-index: 1; /* Below timeline-header (z-index: 10) so header stays on top when scrolling */
        }

        /* Timeline Event Preview Highlight - shown when create modal is open */
        .timeline-event-preview {
            position: absolute;
            left: 80px;
            right: 12px;
            background: rgba(66, 133, 244, 0.15);
            border: 2px dashed var(--accent-blue);
            border-radius: var(--radius-md);
            pointer-events: none;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-blue);
            font-size: var(--font-size-sm);
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .timeline-event-preview.visible {
            opacity: 1;
        }

        /* Week view timeline preview */
        .week-day-timeline .timeline-event-preview {
            left: 4px;
            right: 4px;
        }

        /* Current Time Marker */
        .current-time-marker {
            position: absolute;
            left: 44px; /* Align with event content, past hour labels */
            right: 8px;
            height: 0;
            display: flex;
            align-items: center;
            pointer-events: none;
            z-index: 10;
        }

        .current-time-marker-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--color-error);
            flex-shrink: 0;
            margin-left: -4px; /* Center dot on left edge */
        }

        .current-time-marker-line {
            flex: 1;
            height: 1.5px;
            background-color: var(--color-error);
        }

        /* Week view current time marker */
        .week-day-timeline .current-time-marker {
            left: 0;
            right: 0;
        }

        .week-day-timeline .current-time-marker-dot {
            margin-left: 0;
        }

        /* Calendar Timeline Grid */
        .calendar-timeline-grid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            pointer-events: none;
        }

        .calendar-hour-row {
            position: relative;
            border-top: 1px solid var(--border-light);
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .calendar-hour-row:last-child {
            border-bottom: 1px solid var(--border-light);
        }

        .calendar-hour-label {
            position: absolute;
            top: 2px;
            left: 0;
            width: 36px;
            text-align: right;
            font-family: var(--font-family);
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            z-index: 0;
            pointer-events: none;
        }

        .calendar-event {
            position: absolute;
            left: 44px;
            right: 8px;
            cursor: pointer;
            transition: transform var(--transition-fast);
            box-sizing: border-box;
            z-index: 2;
            overflow: hidden;
        }

        .calendar-event:hover {
            /* No transform to prevent blurry text - card shadow handles the hover effect */
        }

        .event-card {
            position: relative;
            width: 100%;
            height: 100%;
            min-width: 0;
            background: #FFFFFF;
            border-radius: var(--radius-sm);
            border: 1px solid #E5E5E5;
            border-left: 3px solid var(--calendar-color, var(--accent-blue));
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            padding: 4px 10px 5px 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
            min-height: 32px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Minimal padding on overlapping event cards for maximum content width */
        .calendar-event.overlapping .event-card {
            padding-left: 4px;
            padding-right: 3px;
        }

        .calendar-event.overlapping .event-card > .event-duration {
            right: 3px;
            font-size: 11px;
        }

        .calendar-event.overlapping .event-card:not(.is-task) > .event-content {
            padding-right: 26px;
        }

        /* Duration - top right for all cards */
        .event-card > .event-duration {
            position: absolute;
            top: 6px;
            right: 10px;
        }

        /* Content area avoids duration */
        .event-card:not(.is-task) > .event-content {
            padding-right: 40px;
        }

        .event-content {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 2px;
            text-align: left;
        }

        .event-details {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .event-time-inline {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
            color: var(--text-secondary);
        }

        .event-icons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-1-5);
        }

        .event-icons svg {
            width: 14px;
            height: 14px;
            vertical-align: middle;
        }

        .event-icons .event-meeting-type svg {
            width: 14px;
            height: 14px;
        }

        .apple-calendar-badge {
            display: inline-block;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.6;
        }

        .status-connected {
            color: #10B981;
            font-weight: 600;
            font-size: 13px;
        }

        .status-warning {
            color: #92400E; /* 7.4:1 on white — WCAG AA compliant amber */
            font-weight: 600;
            font-size: 13px;
        }

        .btn-danger-text {
            color: #EF4444;
        }

        .btn-danger-text:hover {
            color: #DC2626;
            background: rgba(239, 68, 68, 0.08);
        }

        /* Dark mode overrides for Apple Calendar styles */
        [data-theme="dark"] .status-warning {
            color: #FBBF24;
        }

        [data-theme="dark"] .btn-danger-text {
            color: #F87171;
        }

        [data-theme="dark"] .btn-danger-text:hover {
            color: #FCA5A5;
            background: rgba(239, 68, 68, 0.15);
        }

        [data-theme="dark"] .apple-calendar-badge {
            opacity: 0.8;
        }

        .calendar-event:hover .event-card {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            border-color: #D0D5DD;
        }

        /* Midnight-spanning event segments (today view) */
        .event-card.midnight-segment-start {
            border-bottom: 2px dashed var(--border-color);
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .event-card.midnight-segment-end {
            border-top: 2px dashed var(--border-color);
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .event-card-header {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-3) var(--space-4);
        }

        .event-meeting-type {
            width: 4px;
            align-self: stretch;
            border-radius: var(--radius-sm) 0 0 2px;
            flex-shrink: 0;
        }

        .event-meeting-type.video-call {
            background: #45B854;
        }

        .event-meeting-type.in-person {
            background: #9B6DB8;
        }

        .event-meeting-type.location {
            background: #FF9500;
        }

        .event-meeting-type.task {
            background: #4A90D9;
        }

        .event-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        .event-title {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            white-space: normal;
        }

        /* Free time gap between events */
        .free-time-gap {
            position: absolute;
            left: 0;
            right: 0;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .free-time-text {
            background: transparent;
            padding: 4px 12px;
            font-size: var(--font-size-12);
            font-weight: 400;
            color: var(--text-tertiary);
        }

        .calendar-event.dragging {
            opacity: 0.5;
            transform: scale(0.98);
        }

        /* Hide the inline time when dragging (drag preview shows the position instead) */
        .calendar-event.dragging .event-time-inline {
            opacity: 0;
        }

        /* Week timeline task dragging */
        .week-timeline-task.dragging {
            opacity: 0.3;
        }

        .week-timeline-task.dragging .week-timeline-time-label {
            opacity: 0;
        }

        /* Week timeline event dragging */
        .week-timeline-event.dragging {
            opacity: 0.3;
        }

        .week-timeline-event {
            cursor: grab;
        }

        .week-timeline-event:active {
            cursor: grabbing;
        }

        .event-time-label {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-secondary);
            flex-shrink: 0;
            width: 45px;
        }

        .event-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            min-width: 0;
        }

        .event-card.is-task {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: var(--space-2);
            padding: 6px 10px;
        }

        .task-left-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2-5);
            flex-shrink: 0;
        }

        .task-right-col {
            flex: 1;
            min-width: 0;
            padding-right: 35px;
            display: flex;
            align-items: flex-start;
            padding-top: 1px;
        }

        .task-left-col .event-time-inline {
            font-size: var(--font-size-12);
        }

        .timeline-checkbox-wrapper {
            flex-shrink: 0;
            padding-top: 1px;
        }

        .timeline-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-medium);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            background: var(--bg-card);
        }

        .timeline-checkbox:hover {
            border-color: var(--accent-blue);
        }

        .timeline-checkbox svg {
            width: 10px;
            height: 10px;
            stroke: white;
            stroke-width: 2.5;
            opacity: 0;
            transform: scale(0.5);
            transition: all var(--transition-fast);
        }

        .timeline-checkbox.completing {
            border-color: var(--accent-blue);
            background: var(--accent-blue);
            animation: checkPulse 400ms ease;
        }

        .timeline-checkbox.completing svg {
            opacity: 1;
            transform: scale(1);
        }

        .calendar-event.completing {
            opacity: 0.6;
        }

        .calendar-event.completing .event-title {
            text-decoration: line-through;
            color: var(--text-tertiary);
        }

        .calendar-event.completed {
            animation: taskComplete 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Calendar color classes */
        .event-card.calendar-green {
            border-left-color: #34C759;
        }

        .event-card.calendar-blue {
            border-left-color: #007AFF;
        }

        .event-card.calendar-purple {
            border-left-color: #AF52DE;
        }

        .event-card.calendar-orange {
            border-left-color: #FF9500;
        }

        .event-card.calendar-red {
            border-left-color: #FF3B30;
        }

        /* Drag time pill indicator */
        .drag-time-pill {
            position: fixed;
            padding: 6px 12px;
            background: var(--accent-blue);
            color: white;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 600;
            border-radius: var(--radius-xl);
            pointer-events: none;
            z-index: 10000;
            display: none;
            box-shadow: 0 4px 12px var(--accent-blue-border);
            transform: translate(-50%, -50%);
        }

        .drag-time-pill.visible {
            display: block;
            letter-spacing: 0.3px;
        }

        /* Event duration gap indicator */
        .event-duration-gap {
            text-align: center;
            padding: 16px 0;
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            font-weight: 500;
            margin: 0;
        }

        .event-duration {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            font-weight: 400;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .event-icons .event-meeting-type {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity var(--transition-fast);
        }

        .event-icons .event-meeting-type:hover {
            opacity: 0.8;
        }

        .event-icons .event-meeting-type svg {
            width: 14px;
            height: 14px;
        }

        .event-notes-icon {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
        }

        .event-notes-icon svg {
            width: 14px;
            height: 14px;
        }

        .event-attendees {
            display: flex;
            align-items: center;
            gap: var(--space-half);
        }

        .attendee-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .attendee-dot:first-child {
            margin-left: 0;
        }

        .attendee-extra {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-left: 4px;
        }

        .event-attendees {
            display: flex;
            align-items: center;
            gap: var(--space-half);
        }

        .attendee-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1px solid white;
        }

        .attendee-dot.green { background: #34C759; }
        .attendee-dot.yellow { background: #FFCC00; }
        .attendee-dot.red { background: #FF3B30; }
        .attendee-dot.blue { background: #007AFF; }
        .attendee-dot.purple { background: #AF52DE; }
        .attendee-dot.orange { background: #FF9500; }

        .event-duration {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            white-space: nowrap;
            min-width: 32px;
            text-align: right;
        }

        /* Short duration meetings - title row with icons */
        .event-card.duration-15:not(.is-task),
        .event-card.duration-30:not(.is-task) {
            padding: 6px 10px;
            display: flex;
            flex-direction: column;
            gap: var(--space-half);
        }

        .event-title-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
        }

        .event-title-row .event-title {
            flex: 1;
            min-width: 0;
            font-size: var(--font-size-sm);
        }

        .event-title-row .event-icons {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            flex-shrink: 0;
        }

        .event-title-row .event-duration {
            position: static;
            flex-shrink: 0;
            font-size: var(--font-size-xs);
        }

        .event-card.duration-15:not(.is-task) > .event-time-inline,
        .event-card.duration-30:not(.is-task) > .event-time-inline {
            font-size: var(--font-size-xs);
        }

        /* Ultra-short (15min): strip to title-only, preserving proportional timeline height.
           Root fix: override min-height:32px from .event-card base so card fits in ~17.5px wrapper. */
        .event-card.duration-15:not(.is-task) {
            min-height: 0;
            padding: 2px 8px;
        }

        .event-card.duration-15:not(.is-task) .event-title {
            font-size: var(--font-size-xs);
            line-height: 1.2;
            white-space: nowrap;
        }

        .event-card.duration-15:not(.is-task) .event-icons,
        .event-card.duration-15:not(.is-task) .event-duration {
            display: none;
        }

        .event-card.duration-15:not(.is-task):hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
            border-color: #B0BAC9;
        }

        .event-card.duration-60 {
        }

        .event-card.duration-90 {
        }

        .event-card.duration-120 {
        }

        /* Task cards - compact styling for short durations */
        .event-card.is-task.duration-15,
        .event-card.is-task.duration-30 {
            padding: var(--space-1) var(--space-2);
            gap: var(--space-1-5);
            align-items: center;
        }

        .event-card.is-task.duration-15 > .event-duration,
        .event-card.is-task.duration-30 > .event-duration {
            top: 4px;
            right: 8px;
        }

        .event-card.is-task.duration-15 .event-title,
        .event-card.is-task.duration-30 .event-title {
            font-size: var(--font-size-12);
            line-height: 1.3;
        }

        .event-card.is-task.duration-15 .task-left-col .event-time-inline,
        .event-card.is-task.duration-30 .task-left-col .event-time-inline {
            font-size: var(--font-size-xs);
        }

        .event-card.is-task.duration-15 .task-left-col,
        .event-card.is-task.duration-30 .task-left-col {
            gap: var(--space-half);
        }


        .task-row[draggable="true"] {
            cursor: grab;
        }

        .task-row[draggable="true"]:active {
            cursor: grabbing;
        }


        /* Hidden drag preview element */
        .drag-preview-hidden {
            position: fixed;
            top: -1000px;
            left: -1000px;
            width: 280px;
            pointer-events: none;
            opacity: 0.95;
        }

        .drag-preview-content {
            background: white;
            border-left: 3px solid var(--accent-blue);
            padding: var(--space-3) var(--space-3-5);
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .drag-preview-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: #1F2937;
            line-height: 1.4;
            display: block;
        }

        /* Timeline drag styles */
        .calendar-timeline.drag-over {
            background: var(--accent-blue-bg);
        }

        .today-calendar.drag-over {
            background: #EEF4FB;
        }


        /* Draggable event cards */
        .event-card.is-task {
            cursor: grab;
            border-left: 1px solid #E5E5E5;
        }

        .event-card.is-task:active {
            cursor: grabbing;
        }

        /* Resize handle cursor must override parent grab cursor */
        .event-card.is-task .task-resize-handle {
            cursor: row-resize !important;
        }

        .calendar-event.dragging {
            opacity: 0.4;
        }

        .calendar-event[draggable="true"] {
            cursor: grab;
        }

        .calendar-event[draggable="true"]:active {
            cursor: grabbing;
        }

        .drop-indicator {
            display: none;
        }

        .drop-zone-indicator {
            display: none;
        }

        .drop-zone {
            display: none;
        }

        /* View switching with smooth transitions */
        .view-container {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 250ms ease, transform 250ms ease;
            /* Ensure inactive views don't affect layout */
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }

        .view-container.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            height: auto;
            overflow: visible;
        }

        .inbox-view.active {
            display: flex;
            flex-direction: row;
            height: 100%;
            overflow: hidden;
        }

        .today-view.active {
            display: flex;
            height: 100%;
            overflow: hidden;
        }

        /* Tasks view needs flex column for internal scrolling */
        .tasks-view.active {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Archive view needs flex column for internal scrolling */
        .archive-view.active {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Notes view needs proper height containment for internal scrolling */
        .tasks-view.active:has(.notes-page) {
            height: 100%;
            overflow: hidden;
        }

        .view-container.active .notes-page {
            height: 100%;
            overflow: hidden;
        }

        /* ============================================================================
           INBOX VIEW
           ============================================================================ */

        /* Inbox Top Bar */
        .inbox-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px 16px 32px;
            margin-bottom: 0;
            border-bottom: 1px solid var(--border-light);
        }

        .inbox-title-section {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .header-workspace-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: var(--space-1) var(--space-2);
            background: none;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            transition: background 0.15s, color 0.15s;
        }

        .header-workspace-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .header-workspace-name {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .header-workspace-chevron {
            width: 14px;
            height: 14px;
            stroke-width: 2;
            opacity: 0.6;
        }

        .header-separator {
            color: var(--text-tertiary);
            font-size: 18px;
            font-weight: 300;
        }

        .inbox-top-bar .page-title {
            margin-bottom: 0;
        }

        .inbox-top-bar .inbox-count-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            padding: 0 8px;
            background: var(--accent-blue);
            color: white;
            border-radius: var(--radius-lg);
            font-size: var(--font-size-14);
            font-weight: 600;
        }

        .inbox-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .toolbar-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .toolbar-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: scale(1.05);
        }

        .toolbar-btn svg {
            width: 20px;
            height: 20px;
        }

        .toolbar-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--accent-blue);
        }

        /* Bulk Actions */
        .bulk-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding-left: 16px;
            border-left: 1px solid var(--border-light);
        }

        .bulk-selection-count {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-secondary);
            margin-right: 4px;
        }

        /* Inbox Main Canvas */
        .inbox-main-canvas {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            background: var(--bg-secondary);
            padding: 0 32px;
        }

        /* Hide drag handle in inbox, today/planner, tasks, and area views */
        .inbox-view .task-drag-handle,
        .today-view .task-drag-handle,
        .tasks-view .task-drag-handle,
        .area-view .task-drag-handle {
            display: none;
        }

        /* Content View Header - no longer used, toggle moved to main header */

        /* Task List */
        .task-list {
            display: flex;
            flex-direction: column;
        }

        /* New Task Input */
        .new-task-row {
            display: flex;
            align-items: center;
            padding: 12px 16px;  /* Match backlog-drawer-header vertical padding */
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-light);
            opacity: 0.6;
            transition: opacity var(--transition-fast);
            position: relative; /* Required for NLP preview positioning */
        }

        .new-task-row:hover {
            opacity: 1;
        }

        .new-task-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            min-height: 1.4em;
            line-height: 1.4;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* Placeholder for contenteditable */
        .new-task-input:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Prevent placeholder from showing when focused with content */
        .new-task-input:focus:empty::before {
            color: var(--text-quaternary);
        }

        /* NLP Inline Highlight - highlights parsed date/time text */
        /* Click to dismiss - removes highlight and prevents date extraction */
        .nlp-highlight {
            color: var(--accent-blue);
            background: rgba(53, 122, 189, 0.12);
            border-radius: 3px;
            padding: 0 2px;
            margin: 0 -2px;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .nlp-highlight:hover {
            background: rgba(53, 122, 189, 0.25);
        }

        /* Task Row */
        .task-row {
            display: flex;
            align-items: flex-start;
            padding: var(--space-3) var(--space-4);
            gap: var(--space-2);
            border-bottom: var(--border-subtle);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
            opacity: 1;
        }

        /* Staggered animation delays for task rows - only when view is switching */
        .view-container.animating .task-row {
            animation: fadeInUp 0.3s ease forwards;
            opacity: 0;
        }

        .view-container.animating .task-row:nth-child(1) { animation-delay: 0ms; }
        .view-container.animating .task-row:nth-child(2) { animation-delay: 30ms; }
        .view-container.animating .task-row:nth-child(3) { animation-delay: 60ms; }
        .view-container.animating .task-row:nth-child(4) { animation-delay: 90ms; }
        .view-container.animating .task-row:nth-child(5) { animation-delay: 120ms; }
        .view-container.animating .task-row:nth-child(6) { animation-delay: 150ms; }
        .view-container.animating .task-row:nth-child(7) { animation-delay: 180ms; }
        .view-container.animating .task-row:nth-child(8) { animation-delay: 210ms; }
        .view-container.animating .task-row:nth-child(9) { animation-delay: 240ms; }
        .view-container.animating .task-row:nth-child(10) { animation-delay: 270ms; }
        .view-container.animating .task-row:nth-child(11) { animation-delay: 300ms; }
        .view-container.animating .task-row:nth-child(12) { animation-delay: 330ms; }
        .view-container.animating .task-row:nth-child(13) { animation-delay: 360ms; }
        .view-container.animating .task-row:nth-child(14) { animation-delay: 390ms; }
        .view-container.animating .task-row:nth-child(15) { animation-delay: 420ms; }
        .view-container.animating .task-row:nth-child(n+16) { animation-delay: 450ms; }

        .task-row {
            transition: all var(--transition-fast);
        }

        .task-row:hover,
        .task-row.dropdown-active {
            background: var(--bg-hover);
            border-radius: var(--radius-md);
            transform: translateY(-1px) scale(1.002);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        /* Disable hover effects while dragging */
        body.is-dragging .task-row:hover {
            background: transparent;
            transform: none;
            box-shadow: none;
        }

        body.is-dragging .task-row:hover .task-quick-actions {
            visibility: hidden;
            opacity: 0;
        }

        .task-row.selected {
            background: var(--accent-blue-hover);
        }

        .timeline-hour.drag-over {
            background: var(--accent-blue-light);
            border: 2px dashed var(--accent-blue);
        }

        /* Checkbox */
        .checkbox-wrapper {
            position: relative;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            /* Align to top to match first line of task title */
            align-self: flex-start;
        }

        .checkbox {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .checkbox:hover {
            border-color: var(--accent-blue);
        }

        .checkbox.completing {
            border-color: var(--accent-blue);
            background: var(--accent-blue);
            animation: checkPulse 400ms ease;
        }

        .checkbox svg {
            width: 12px;
            height: 12px;
            stroke: white;
            stroke-width: 2.5;
            opacity: 0;
            transform: scale(0.5);
            transition: all 200ms ease;
        }

        .checkbox.completing svg {
            opacity: 1;
            transform: scale(1);
        }

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

        .checkbox.checked svg {
            opacity: 1;
            transform: scale(1);
        }

        @keyframes checkPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* Task Content */
        .task-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        .task-metadata {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1-5);
            align-items: center;
        }

        /* Limit visible badges to reduce clutter - max 4 visible */
        .task-metadata .task-meta-badge:nth-child(n+5) {
            display: none;
        }

        /* Show all badges when task row is expanded */
        .task-row.expanded .task-metadata .task-meta-badge {
            display: inline-flex;
        }

        .task-meta-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0.85;
            transition: opacity var(--transition-fast);
        }

        .task-row:hover .task-meta-badge {
            opacity: 1;
        }

        .task-meta-badge svg {
            width: var(--icon-xs);
            height: var(--icon-xs);
            flex-shrink: 0;
            display: inline-block;
        }

        .meta-schedule {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-schedule svg {
            stroke: var(--text-tertiary);
        }

        .meta-schedule.overdue {
            background: transparent;
            color: #EF4444;
            font-size: 12px;
            font-weight: 600;
        }

        .meta-schedule.overdue svg {
            stroke: #EF4444;
        }

        .meta-deadline {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-deadline svg {
            stroke: var(--text-tertiary);
        }

        .meta-deadline.overdue {
            background: transparent;
            color: #EF4444;
            font-size: 12px;
            font-weight: 600;
        }

        .meta-deadline.overdue svg {
            stroke: #EF4444;
        }

        .meta-deadline.due-today {
            background: transparent;
            color: #D97706;
            font-size: 12px;
            font-weight: 600;
        }

        .meta-deadline.due-today svg {
            stroke: #D97706;
        }

        .meta-duration {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-duration svg {
            stroke: var(--text-tertiary);
        }

        .meta-tags {
            display: inline-flex;
            gap: 4px;
            align-items: center;
            flex-wrap: nowrap;
            overflow: hidden;
            background: none;
            padding: 0;
        }

        .tag-pill {
            display: inline-flex;
            align-items: center;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.3;
            white-space: nowrap;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            background: transparent;
            border: 1px solid var(--border-medium);
            color: var(--text-tertiary);
        }

        .tag-overflow {
            display: inline-flex;
            align-items: center;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 10px;
            font-weight: 600;
            background: var(--surface-hover, rgba(107, 114, 128, 0.12));
            color: var(--text-secondary, #6B7280);
        }

        .meta-repeat {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-repeat svg {
            stroke: var(--text-tertiary);
        }

        .meta-notes {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-notes svg {
            stroke: var(--text-tertiary);
        }

        .meta-project {
            background: transparent;
            border: none;
            color: var(--accent-blue);
            font-size: 12px;
            font-weight: 600;
        }

        .meta-project svg {
            stroke: var(--accent-blue);
        }

        .meta-area {
            background: transparent;
            border: none;
            color: var(--text-tertiary);
        }

        .meta-area svg {
            stroke: var(--text-tertiary);
        }

        /* Meeting source badge */
        .meta-meeting {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-meeting svg {
            stroke: var(--text-tertiary);
        }

        .meta-meeting.clickable {
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .meta-meeting.clickable:hover {
            background: var(--surface-hover);
            border-radius: var(--radius-sm);
        }

        /* Task source badge (email, slack, teams) */
        .task-meta-badge.meta-source {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: transparent;
            color: var(--text-tertiary);
        }

        .task-meta-badge.meta-source svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            stroke: var(--text-tertiary);
        }

        /* ========================================
           UNIFIED BADGE COMPONENT SYSTEM
           Base .badge class to replace .task-meta-badge
           with consistent styling
           ======================================== */

        /* Base badge component - works with .meta-* variant classes */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            font-weight: 500;
            white-space: nowrap;
            transition: filter var(--transition-fast);
        }

        .badge svg {
            width: var(--icon-xs);
            height: var(--icon-xs);
            flex-shrink: 0;
        }

        .badge:hover {
            filter: brightness(0.95);
            cursor: pointer;
        }

        /* Badge size variants */
        .badge-sm {
            padding: 2px 6px;
            font-size: 10px;
        }

        .badge-lg {
            padding: 4px 10px;
            font-size: var(--font-size-sm);
        }

        /* Make existing .task-meta-badge compatible with unified system */
        .task-meta-badge {
            /* Inherits from base styles above */
        }

        /* .modal-meta-item removed — toolbar active states replace info display */

        /* ========================================
           UNIFIED BUTTON COMPONENT SYSTEM
           Standard button sizes and padding for consistency
           ======================================== */

        /* Icon button base */
        .btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-icon:hover {
            background: var(--surface-hover);
            color: var(--text-secondary);
        }

        .btn-icon:active {
            background: var(--surface-active);
            transform: scale(0.95);
        }

        /* Icon button size variants */
        .btn-icon-sm {
            width: var(--btn-sm);
            height: var(--btn-sm);
        }

        .btn-icon-md {
            width: var(--btn-md);
            height: var(--btn-md);
        }

        .btn-icon-lg {
            width: var(--btn-lg);
            height: var(--btn-lg);
        }

        /* Text button base */
        .btn-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            font-family: var(--font-family);
            font-weight: 500;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }

        /* Text button size variants */
        .btn-text-sm {
            padding: var(--btn-padding-sm);
            font-size: var(--font-size-sm);
        }

        .btn-text-md {
            padding: var(--btn-padding-md);
            font-size: var(--font-size-base);
        }

        .btn-text-lg {
            padding: var(--btn-padding-lg);
            font-size: var(--font-size-lg);
        }

        /* Button color variants removed - consolidated definition exists at line 9855 */

        .btn-primary:active,
        .btn-secondary:active,
        .btn-danger:active {
            transform: scale(0.97);
        }

        .btn-secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: var(--bg-tertiary);
        }

        .btn-danger {
            background: var(--color-danger);
            color: white;
            border: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-md);
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-danger:hover {
            background: #c82333;
        }

        [data-theme="dark"] .btn-danger {
            background: #DC3545;
        }

        [data-theme="dark"] .btn-danger:hover {
            background: #E04555;
        }

        /* ========================================
           UNIFIED CARD COMPONENT SYSTEM
           Base card structure with variant classes for
           different card types (project, area, note)
           ======================================== */

        /* Base card component */
        .card {
            background: var(--bg-card);
            border: var(--border-subtle);
            border-radius: var(--radius-md);
            padding: var(--space-6);
            cursor: pointer;
            transition: all var(--transition-fast);
            box-shadow: var(--shadow-xs);
        }

        .card:hover {
            border-color: var(--accent-blue);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px) scale(1.005);
        }

        /* Card with icon (project/area cards) */
        .card.card-with-icon .card-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-3);
            flex-shrink: 0;
        }

        /* Compact card variant (smaller padding, smaller icon) */
        .card.card-compact {
            padding: 16px 18px;
        }

        .card.card-compact .card-icon {
            width: 36px;
            height: 36px;
            margin-bottom: 0;
        }

        /* Card title */
        .card-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }

        /* Card subtitle/description */
        .card-snippet {
            font-size: var(--font-size-base);
            color: var(--text-secondary);
            line-height: var(--line-height-normal);
            margin-bottom: var(--space-3);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Card metadata row */
        .card-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            flex-wrap: wrap;
        }

        /* Card progress indicator */
        .card-progress {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .card-progress-bar {
            width: 100%;
            height: 4px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-sm);
            overflow: hidden;
            margin-top: var(--space-2);
        }

        .card-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-blue), #5BA3E0);
            border-radius: var(--radius-sm);
            transition: width 0.3s ease;
        }

        /* Card decorative elements */
        .card-accent-border {
            border-left: 3px solid var(--accent-blue);
        }

        .card-indicator {
            position: absolute;
            top: var(--space-3);
            right: var(--space-3);
            width: 20px;
            height: 20px;
        }

        /* ========================================
           UNIFIED TIMELINE ITEM COMPONENT SYSTEM
           Base structure for timeline tasks and events
           with consistent padding, sizing, and typography
           ======================================== */

        /* Base timeline item (used by both tasks and events) */
        .timeline-item-base {
            position: absolute;
            left: 4px;
            right: 4px;
            border-radius: var(--radius-sm);
            padding: var(--space-half) var(--space-1-5);
            font-size: var(--font-size-xs);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 1px;
            transition: all var(--transition-fast);
        }

        /* Timeline item time label */
        .timeline-item-time {
            font-size: var(--font-size-2xs);
            font-weight: 600;
        }

        /* Timeline item title */
        .timeline-item-title {
            font-size: var(--font-size-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Timeline task variant (interactive, white background) */
        .timeline-item.interactive {
            background: white;
            border: 1px solid var(--border-medium);
            border-left: 3px solid var(--accent-blue);
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            z-index: 2;
        }

        .timeline-item.interactive:hover {
            box-shadow: var(--shadow-md);
        }

        .timeline-item.interactive .timeline-item-time {
            color: var(--accent-blue);
        }

        /* Timeline event variant (display-only, colored background) */
        .timeline-item.display-only {
            background: var(--accent-blue-focus);
            border-left: 3px solid var(--accent-blue);
            z-index: 1;
        }

        .timeline-item.display-only .timeline-item-time {
            opacity: 0.7;
        }

        /* Dragging state */
        .timeline-item.dragging {
            opacity: 0.5;
        }

        .timeline-item.dragging .timeline-item-time {
            opacity: 0;
        }

        /* Week view timeline items (compact variant) */
        .timeline-item.week-view {
            padding: var(--space-1-5) var(--space-2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .timeline-item.week-view:hover {
            border-color: #D0D5DD;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            z-index: 10;
        }

        /* Color variants for calendar events */
        .timeline-item.calendar-blue { border-left-color: #007AFF; background: rgba(0, 122, 255, 0.15); }
        .timeline-item.calendar-purple { border-left-color: #AF52DE; background: rgba(175, 82, 222, 0.15); }
        .timeline-item.calendar-green { border-left-color: #34C759; background: rgba(52, 199, 89, 0.15); }
        .timeline-item.calendar-red { border-left-color: #FF3B30; background: rgba(255, 59, 48, 0.15); }
        .timeline-item.calendar-orange { border-left-color: #FF9500; background: rgba(255, 149, 0, 0.15); }
        .timeline-item.calendar-yellow { border-left-color: #FFCC00; background: rgba(255, 204, 0, 0.15); }

        .task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: var(--space-1-5);
            max-width: 100%;
            min-width: 0;
            line-height: 20px; /* Match checkbox height for vertical alignment */
        }

        .task-title-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            flex-shrink: 1;
        }

        .task-note-icon {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
            flex-shrink: 0;
            opacity: 0.6;
            margin-left: 6px;
        }

        /* Priority Badge */
        .task-priority-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-2xs);
            font-weight: 700;
            padding: 2px 5px;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            flex-shrink: 0;
        }

        .priority-p1,
        .badge.priority-p1 {
            background: transparent;
            color: var(--badge-priority-p1);
        }

        .priority-p2,
        .badge.priority-p2 {
            background: transparent;
            color: var(--badge-priority-p2);
        }

        .week-timeline-title .task-priority-badge,
        .task-right-col .task-priority-badge {
            font-size: 10px;
            padding: 1px 4px;
            margin-left: 4px;
            align-self: center;
        }

        .priority-p3,
        .badge.priority-p3 {
            background: transparent;
            color: var(--badge-priority-p3);
        }

        /* Task Actions Area - Always visible, contains both meta and quick actions */
        .task-actions-area {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: auto;
        }

        /* Task Meta (visible when set) */
        .task-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .task-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.04);
        }

        .task-meta-item svg {
            width: 12px;
            height: 12px;
        }

        .task-meta-item.tag {
            background: var(--accent-blue-opacity-10);
            color: var(--accent-blue);
        }

        .task-meta-item.deadline {
            background: rgba(255, 149, 0, 0.1);
            color: #FF9500;
        }

        .task-meta-item.repeat {
            background: rgba(88, 86, 214, 0.1);
            color: #5856D6;
        }

        /* Quick Actions - Only visible on hover */
        .quick-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .task-row:hover .quick-actions {
            opacity: 1;
        }

        .quick-action-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
        }

        .quick-action-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-secondary);
        }

        .quick-action-btn.has-value {
            color: var(--accent-blue);
            background: var(--accent-blue-opacity-12);
        }

        .quick-action-btn.has-value:hover {
            background: var(--accent-blue-opacity-20);
            color: var(--accent-blue);
        }

        .quick-action-btn.has-value svg {
            stroke-width: 2;
        }

        .quick-action-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Hide less common quick actions to reduce clutter */
        /* Keep only: Schedule, Project, Priority visible */
        /* Hide: Duration, Deadline, Tags, Repeat, Area */
        .quick-action-btn[data-action="duration"],
        .quick-action-btn[data-action="deadline"],
        .quick-action-btn[data-action="tags"],
        .quick-action-btn[data-action="repeat"],
        .quick-action-btn[data-action="area"] {
            display: none;
        }

        /* Show hidden actions when task row is focused or being edited */
        .task-row.expanded .quick-action-btn[data-action="duration"],
        .task-row.expanded .quick-action-btn[data-action="deadline"],
        .task-row.expanded .quick-action-btn[data-action="tags"],
        .task-row.expanded .quick-action-btn[data-action="repeat"],
        .task-row.expanded .quick-action-btn[data-action="area"] {
            display: flex;
        }

        /* Quick actions: flex sibling of .task-content in .task-row.
         * Always in layout (visibility:hidden) so they reserve space and
         * chips/title never extend into the button zone. No size jump on hover. */
        .task-quick-actions {
            display: inline-flex;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            align-items: center;
            gap: var(--space-half);
            flex-shrink: 0;
            align-self: center;
            border-radius: var(--radius-sm);
            transition: opacity 0.15s ease, visibility 0.15s linear;
        }

        .task-row:hover .task-quick-actions,
        .task-row.dropdown-active .task-quick-actions {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }


        /* Dropdown Menu */
        .dropdown {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-lg);
            padding: var(--space-1-5);
            min-width: 180px;
            z-index: 150;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: all var(--transition-fast);
        }

        .dropdown.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-2-5) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .dropdown-item:hover {
            background: var(--accent-blue-light);
        }

        .dropdown-item svg {
            width: 16px;
            height: 16px;
            color: var(--text-secondary);
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-light);
            margin: 6px 0;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: transparent;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-smooth);
        }

        .modal-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* Task Modal */
        .task-modal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 796px;
            height: 522px;
            max-height: 85vh;
            overflow: hidden;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-2xl);
            z-index: 1003;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .task-modal.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .task-modal.fullscreen {
            width: calc(100vw - 68px);
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            left: 68px;
            top: 0;
            transition: opacity var(--transition-smooth);
        }

        .task-modal.fullscreen.visible {
            transform: none;
        }

        /* Modal Header */
        .modal-header {
            display: flex;
            align-items: flex-start;
            padding: var(--space-7) var(--space-7) var(--space-5);
            gap: var(--space-4);
            border-bottom: 1px solid var(--border-light);
        }

        .modal-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        /* Status indicator in modal header (Typing.../Saving) */
        .modal-save-status {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            margin-right: var(--space-2);
            min-width: 50px;
            text-align: right;
        }

        .modal-save-status:empty {
            display: none;
        }

        .modal-checkbox {
            margin-top: 4px;
        }

        .modal-title-input {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            border: none;
            background: transparent;
            outline: none;
            color: var(--text-primary);
        }

        .modal-title-input:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        .modal-title-input[contenteditable] {
            white-space: nowrap;
            overflow: hidden;
            min-height: 1.4em;
        }

        .modal-close {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-secondary);
        }

        .modal-close.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .modal-close svg {
            width: 16px;
            height: 16px;
        }

        /* Modal saving state - shows spinner while save is in progress */
        .modal-close.saving {
            pointer-events: none;
            opacity: 0.7;
        }

        .modal-close.saving svg {
            display: none;
        }

        .modal-close.saving::after {
            content: '';
            width: 14px;
            height: 14px;
            border: 2px solid var(--border-light);
            border-top-color: var(--accent-blue);
            border-radius: 50%;
            animation: modal-spinner 0.6s linear infinite;
        }

        @keyframes modal-spinner {
            to { transform: rotate(360deg); }
        }

        /* Modal saving overlay - prevents interaction during save */
        .modal-saving-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-fast);
        }

        .modal-saving-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* ========================================
           UNIFIED MODAL HEADER COMPONENT SYSTEM
           Base structure with variant classes for
           different modal types (task, note, project, etc.)
           ======================================== */

        /* Modal header left element - for checkbox, icon, or empty */
        .modal-header-left {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        /* Modal header center - title area */
        .modal-header-center {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Unified title input styling */
        .modal-title-input,
        .project-modal-title,
        .area-modal-title,
        .note-modal-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            border: none;
            background: transparent;
            outline: none;
            color: var(--text-primary);
        }

        /* Variant: Modal with checkbox (Task Modal) */
        .modal-header.has-checkbox {
            align-items: flex-start;
        }

        .modal-header.has-checkbox .modal-header-left {
            margin-top: 4px;
        }

        /* Variant: Modal with icon picker (Project/Area Modal) */
        .modal-header.has-icon {
            align-items: center;
        }

        .modal-header.has-icon .modal-header-left {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .modal-header.has-icon .modal-header-left:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .modal-header.has-icon .modal-header-left svg {
            width: 20px;
            height: 20px;
        }

        /* Variant: Modal with meta display (Event Modal, Note Modal) */
        .modal-header.has-meta .modal-header-center {
            gap: var(--space-2);
        }

        /* Modal meta styling (for dates, calendar info, etc.) */
        .modal-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        /* Standardize all modal action buttons to 28px */
        .modal-header-actions .modal-close,
        .project-modal-actions .modal-close,
        .area-modal-actions .modal-close,
        .note-modal-header-actions .modal-close,
        .event-modal-header-actions .modal-close {
            width: var(--btn-sm);
            height: var(--btn-sm);
        }

        /* Modal Body */
        .modal-body {
            flex: 1;
            padding: var(--space-8);
            overflow-y: auto;
            min-height: 390px;
            position: relative;
        }

        .task-modal:not(.fullscreen) .modal-body {
            min-height: unset;
        }

        .task-modal.fullscreen .modal-body {
            padding: 32px 48px;
            display: flex;
            flex-direction: column;
        }

        .task-modal.fullscreen .task-note-editor {
            min-height: unset;
            flex: 1;
        }

        /* Event Modal (Calendar Events) */
        .event-modal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 884px;
            min-height: 580px;
            max-height: 85vh;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-medium);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            z-index: 101;
            opacity: 0;
            pointer-events: none;
            transition: all var(--transition-smooth);
            display: flex;
            flex-direction: column;
        }

        .event-modal.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .event-modal.fullscreen {
            width: calc(100vw - 68px);
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            left: 68px;
            top: 0;
            transition: opacity var(--transition-smooth);
        }

        .event-modal.fullscreen.visible {
            transform: none;
        }

        /* Expand centered modal when action items are present */
        .event-modal.has-action-items:not(.fullscreen) {
            min-height: 580px;
        }

        /* Previous Meeting Navigation Bar */
        .event-nav-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 28px;
            background: var(--accent-blue-opacity-5);
            border-bottom: 1px solid var(--border-light);
        }

        .event-nav-back {
            display: flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--accent-blue);
            cursor: pointer;
            padding: 2px 0;
            transition: opacity var(--transition-fast);
        }

        .event-nav-back:hover {
            opacity: 0.7;
        }

        .event-nav-back svg {
            flex-shrink: 0;
        }

        .event-nav-viewing {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            font-weight: 500;
        }

        .event-modal-header {
            display: flex;
            align-items: flex-start;
            padding: var(--space-7) var(--space-7) var(--space-5);
            gap: var(--space-4);
            border-bottom: 1px solid var(--border-light);
        }

        .event-modal-title-area {
            flex: 1;
        }

        .event-modal-title {
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .event-modal-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: 8px;
        }

        .event-modal-calendar-dot {
            width: 10px;
            height: 10px;
            border-radius: var(--radius-sm);
            background: var(--accent-blue);
        }

        .event-modal-datetime {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .event-note-meta {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            margin-left: var(--space-2);
        }

        .event-modal-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .event-modal-action-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .event-modal-action-btn.active {
            color: var(--accent-blue);
        }

        .event-modal-action-btn svg {
            width: 18px;
            height: 18px;
        }

        .event-modal-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .event-modal-content {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            position: relative;
        }

        .event-modal-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 24px 28px 24px 28px;
            overflow-y: auto;
        }

        .event-modal.fullscreen .event-modal-main {
            padding: 32px 48px 32px 48px;
        }

        .event-note-editor {
            flex: 1 1 0;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-primary);
            outline: none;
            min-height: 80px;
            overflow-y: auto;
        }

        .event-note-editor:empty::before {
            content: 'Add notes...';
            color: var(--text-tertiary);
        }

        .event-note-editor p {
            margin-bottom: 8px;
        }

        .event-note-editor ul, .event-note-editor ol {
            margin-bottom: 8px;
            padding-left: 24px;
        }

        .event-note-editor ul {
            list-style-type: disc;
        }

        .event-note-editor ul ul {
            list-style-type: circle;
        }

        .event-note-editor ul ul ul {
            list-style-type: square;
        }

        .event-note-editor ol {
            list-style-type: decimal;
        }

        .event-note-editor ol ol {
            list-style-type: lower-alpha;
        }

        .event-note-editor ol ol ol {
            list-style-type: lower-roman;
        }

        .event-note-editor li {
            margin-bottom: 4px;
        }

        .event-note-editor blockquote {
            border-left: 3px solid var(--accent-blue);
            padding-left: 16px;
            margin: 12px 0;
            color: var(--text-secondary);
            font-style: italic;
        }

        .event-note-editor h1, .event-note-editor h2, .event-note-editor h3 {
            font-weight: 600;
            margin: 16px 0 8px 0;
        }

        .event-note-editor h1 { font-size: var(--font-size-xl); }
        .event-note-editor h2 { font-size: var(--font-size-lg); }
        .event-note-editor h3 { font-size: var(--font-size-16); }

        .event-note-editor code {
            background: var(--bg-main);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
            font-family: 'SF Mono', 'Consolas', monospace;
            font-size: var(--font-size-sm);
        }

        /* Markdown tables */
        .markdown-table,
        .event-note-editor table,
        .note-editor table,
        .task-note-editor table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0;
            font-size: var(--font-size-sm);
        }

        .markdown-table th,
        .markdown-table td,
        .event-note-editor table th,
        .event-note-editor table td,
        .note-editor table th,
        .note-editor table td,
        .task-note-editor table th,
        .task-note-editor table td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            text-align: left;
            vertical-align: top;
        }

        .markdown-table th,
        .event-note-editor table th,
        .note-editor table th,
        .task-note-editor table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary);
        }

        .markdown-table tr:hover,
        .event-note-editor table tr:hover,
        .note-editor table tr:hover,
        .task-note-editor table tr:hover {
            background: var(--bg-hover);
        }

        .event-notes-hint {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            opacity: 0.7;
            padding: 12px 28px;
            text-align: right;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 280px;
            background: linear-gradient(transparent, var(--bg-card) 50%);
            pointer-events: none;
        }

        .event-modal.fullscreen .event-notes-hint {
            right: 320px;
            padding: 12px 48px;
        }

        /* Hide hint when action items are present */
        .event-modal.has-action-items .event-notes-hint {
            display: none;
        }

        /* Meeting Content Tabs */
        .meeting-content-tabs {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            padding: 0 28px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: var(--space-4);
        }

        .event-modal.fullscreen .meeting-content-tabs {
            padding: 0 48px;
        }

        .meeting-tab {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-2-5) var(--space-3);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-bottom: -1px;
        }

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

        .meeting-tab.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
        }

        .meeting-tab:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: -2px;
            border-radius: var(--radius-sm);
        }

        /* Meeting Tab Panels */
        .meeting-tab-panel {
            display: none;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .meeting-tab-panel.active {
            display: flex;
            flex-direction: column;
        }

        /* AI Content Container (for Summary tab) */
        .ai-content-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
            padding: 0 28px;
        }

        .event-modal.fullscreen .ai-content-container {
            padding: 0 48px;
        }

        .ai-content-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }

        .ai-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            font-size: var(--font-size-11);
            font-weight: 500;
            color: var(--text-tertiary);
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .ai-badge svg {
            width: 12px;
            height: 12px;
            color: var(--accent-purple, #8b5cf6);
            opacity: 0.7;
        }

        .ai-regenerate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            opacity: 0.5;
        }

        .ai-content-header:hover .ai-regenerate-btn {
            opacity: 1;
        }

        .ai-regenerate-btn:hover {
            background: var(--bg-hover);
            color: var(--accent-purple, #8b5cf6);
        }

        .ai-regenerate-btn.loading {
            opacity: 1;
            color: var(--accent-purple, #8b5cf6);
        }

        .ai-regenerate-btn.loading svg {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .ai-regenerate-btn svg {
            width: 14px;
            height: 14px;
        }

        /* AI Summary Section */
        .ai-summary-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .ai-summary-section h3 {
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .ai-summary-text {
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--text-secondary);
        }

        /* Summary Content Container */
        .ai-summary-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
        }

        .ai-summary-overview {
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-primary);
        }

        .ai-summary-overview p {
            margin: 0 0 var(--space-3) 0;
        }

        .ai-summary-overview p:last-child {
            margin-bottom: 0;
        }

        /* Section Titles (Key Points, Action Items) */
        .ai-section-title {
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 var(--space-3) 0;
        }

        /* Key Points Section */
        .ai-key-points {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .ai-key-points-list {
            list-style: disc;
            padding-left: 20px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .ai-key-points-list li {
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--text-secondary);
        }

        /* AI Action Items */
        .ai-action-items {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .ai-action-items-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .ai-action-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--bg-main);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-light);
        }

        .ai-action-item-checkbox {
            width: 18px;
            height: 18px;
            border-radius: var(--radius-full);
            border: 2px solid var(--border-medium);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .ai-action-item-content {
            flex: 1;
            min-width: 0;
        }

        .ai-action-item-text {
            font-size: var(--font-size-base);
            line-height: 1.5;
            color: var(--text-primary);
        }

        .ai-action-item-add-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-1) var(--space-2);
            background: var(--accent-blue);
            border: none;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-12);
            font-weight: 500;
            color: white;
            cursor: pointer;
            transition: all var(--transition-fast);
            flex-shrink: 0;
        }

        .ai-action-item-add-btn:hover {
            background: var(--accent-blue-dark);
        }

        .ai-action-item-add-btn.added {
            background: var(--accent-green);
            cursor: default;
        }

        .ai-action-item-add-btn svg {
            width: 12px;
            height: 12px;
        }

        /* Transcript Full View (for Transcript tab) */
        .transcript-full-view {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            padding: 0 28px;
        }

        .event-modal.fullscreen .transcript-full-view {
            padding: 0 48px;
        }

        .transcript-full-header,
        .transcript-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            border-bottom: none;
            margin-bottom: var(--space-3);
        }

        .transcript-search {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1-5) var(--space-3);
            background: var(--bg-main);
            border: none;
            border-radius: var(--radius-full);
        }

        .transcript-search input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-14);
            color: var(--text-primary);
            outline: none;
        }

        .transcript-search input::placeholder {
            color: var(--text-tertiary);
        }

        .transcript-search svg {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
        }

        .transcript-copy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            flex-shrink: 0;
        }

        .transcript-copy-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .transcript-copy-btn svg {
            width: 16px;
            height: 16px;
        }

        .transcript-download-container {
            position: relative;
            flex-shrink: 0;
        }

        .transcript-download-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 100;
            min-width: 140px;
            overflow: hidden;
        }

        .transcript-download-dropdown.visible {
            display: block;
        }

        .transcript-download-option {
            display: block;
            width: 100%;
            padding: 8px 12px;
            background: none;
            border: none;
            text-align: left;
            font-size: 13px;
            color: var(--text-primary);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .transcript-download-option:hover {
            background: var(--bg-hover);
        }

        .transcript-full-segments {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .transcript-full-segment {
            display: flex;
            flex-direction: column;
            gap: var(--space-1-5);
            padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
            background: transparent;
            border-radius: 0;
            border-left: 2px solid var(--accent-blue);
            cursor: pointer;
            transition: background var(--transition-fast);
            position: relative;
        }

        .transcript-full-segment + .transcript-full-segment {
            margin-top: var(--space-1);
        }

        .transcript-full-segment:hover {
            background: var(--bg-hover);
        }

        .transcript-full-segment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }

        .transcript-full-speaker {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            border-radius: var(--radius-sm);
            padding: 2px 6px 2px 0;
            transition: background var(--transition-fast);
        }

        .transcript-full-speaker:hover {
            background: var(--bg-hover);
        }

        .speaker-edit-icon {
            opacity: 0;
            transition: opacity var(--transition-fast);
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .transcript-full-speaker:hover .speaker-edit-icon {
            opacity: 0.6;
        }

        /* Speaker-to-Attendee Matcher Card */
        .speaker-matcher-card {
            background: var(--bg-secondary, #F8FAFC);
            border: 1px solid var(--border-color, #E2E8F0);
            border-radius: var(--radius-md, 8px);
            padding: var(--space-3, 16px);
            margin-bottom: var(--space-3, 16px);
        }

        .speaker-matcher-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-1, 4px);
        }

        .speaker-matcher-title {
            display: flex;
            align-items: center;
            gap: var(--space-1, 6px);
            font-family: var(--font-primary);
            font-size: var(--font-size-14, 14px);
            font-weight: 600;
            color: var(--text-primary);
        }

        .speaker-matcher-title svg {
            color: var(--accent-blue, #4A90D9);
            flex-shrink: 0;
        }

        .speaker-matcher-dismiss {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm, 4px);
            cursor: pointer;
            transition: background var(--transition-fast, 0.1s), color var(--transition-fast, 0.1s);
        }

        .speaker-matcher-dismiss:hover {
            background: var(--bg-tertiary, #EDF2F7);
            color: var(--text-primary);
        }

        .speaker-matcher-subtitle {
            font-family: var(--font-primary);
            font-size: var(--font-size-12, 12px);
            color: var(--text-secondary);
            margin-bottom: var(--space-3, 12px);
        }

        .speaker-matcher-rows {
            display: flex;
            flex-direction: column;
            gap: var(--space-2, 8px);
            margin-bottom: var(--space-3, 12px);
        }

        .speaker-matcher-row {
            display: flex;
            align-items: center;
            gap: var(--space-2, 8px);
        }

        .speaker-matcher-label {
            font-family: var(--font-primary);
            font-size: var(--font-size-13, 13px);
            font-weight: 500;
            color: var(--text-primary);
            min-width: 80px;
            flex-shrink: 0;
        }

        .speaker-matcher-arrow {
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .speaker-matcher-select {
            font-family: var(--font-primary);
            font-size: var(--font-size-13, 13px);
            padding: var(--space-1, 4px) var(--space-2, 8px);
            border: 1px solid var(--border-medium, #CBD5E0);
            border-radius: var(--radius-sm, 4px);
            background: var(--bg-primary, #FFFFFF);
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
            cursor: pointer;
            outline: none;
            transition: border-color var(--transition-fast, 0.1s);
        }

        .speaker-matcher-select:focus {
            border-color: var(--accent-blue, #4A90D9);
        }

        .speaker-matcher-footer {
            display: flex;
            justify-content: flex-end;
            gap: var(--space-2, 8px);
        }

        .speaker-matcher-cancel {
            font-family: var(--font-primary);
            font-size: var(--font-size-13, 13px);
            padding: var(--space-1, 6px) var(--space-3, 12px);
            border: 1px solid var(--border-medium, #CBD5E0);
            border-radius: var(--radius-sm, 4px);
            background: var(--bg-primary, #FFFFFF);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background var(--transition-fast, 0.1s);
        }

        .speaker-matcher-cancel:hover {
            background: var(--bg-secondary, #F7FAFC);
        }

        .speaker-matcher-apply {
            font-family: var(--font-primary);
            font-size: var(--font-size-13, 13px);
            font-weight: 600;
            padding: var(--space-1, 6px) var(--space-3, 12px);
            border: none;
            border-radius: var(--radius-sm, 4px);
            background: var(--accent-blue, #4A90D9);
            color: white;
            cursor: pointer;
            transition: background var(--transition-fast, 0.1s);
        }

        .speaker-matcher-apply:hover {
            background: var(--accent-blue-hover, #357ABD);
        }

        .speaker-matcher-apply:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .speaker-rename-popover {
            position: absolute;
            display: flex;
            align-items: flex-start;
            gap: var(--space-1);
            padding: var(--space-1);
            background: var(--bg-card);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 100;
        }

        .speaker-rename-fields {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        .speaker-rename-input {
            font-family: var(--font-primary);
            font-size: var(--font-size-14);
            font-weight: 600;
            padding: var(--space-1) var(--space-2);
            border: 1.5px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            outline: none;
            width: 200px;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .speaker-rename-email {
            font-family: var(--font-primary);
            font-size: var(--font-size-12);
            font-weight: 400;
            padding: var(--space-1) var(--space-2);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            outline: none;
            width: 200px;
            background: var(--bg-primary);
            color: var(--text-secondary);
        }

        .speaker-rename-email:focus {
            border-color: var(--accent-blue);
            color: var(--text-primary);
        }

        .speaker-rename-confirm {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: none;
            background: var(--accent-blue);
            color: white;
            border-radius: var(--radius-sm);
            cursor: pointer;
            flex-shrink: 0;
            transition: background var(--transition-fast);
        }

        .speaker-rename-confirm:hover {
            background: var(--accent-blue-hover);
        }

        .transcript-full-speaker-avatar {
            width: 24px;
            height: 24px;
            border-radius: var(--radius-full);
            background: var(--accent-blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-11);
            font-weight: 600;
            flex-shrink: 0;
        }

        /* Speaker color variants */
        .transcript-full-segment[data-speaker-color="0"] { border-left-color: #4A90D9; }
        .transcript-full-segment[data-speaker-color="0"] .transcript-full-speaker-avatar { background: #4A90D9; }
        .transcript-full-segment[data-speaker-color="1"] { border-left-color: #8b5cf6; }
        .transcript-full-segment[data-speaker-color="1"] .transcript-full-speaker-avatar { background: #8b5cf6; }
        .transcript-full-segment[data-speaker-color="2"] { border-left-color: #10B981; }
        .transcript-full-segment[data-speaker-color="2"] .transcript-full-speaker-avatar { background: #10B981; }
        .transcript-full-segment[data-speaker-color="3"] { border-left-color: #F59E0B; }
        .transcript-full-segment[data-speaker-color="3"] .transcript-full-speaker-avatar { background: #F59E0B; }
        .transcript-full-segment[data-speaker-color="4"] { border-left-color: #EF4444; }
        .transcript-full-segment[data-speaker-color="4"] .transcript-full-speaker-avatar { background: #EF4444; }
        .transcript-full-segment[data-speaker-color="5"] { border-left-color: #06B6D4; }
        .transcript-full-segment[data-speaker-color="5"] .transcript-full-speaker-avatar { background: #06B6D4; }

        .transcript-full-timestamp {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            font-weight: 500;
            cursor: pointer;
            padding: var(--space-1) var(--space-1-5);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            font-variant-numeric: tabular-nums;
        }

        .transcript-full-timestamp:hover {
            background: var(--bg-hover);
            color: var(--accent-blue);
        }

        .transcript-full-text {
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-secondary);
            padding-left: 32px;
        }

        /* Empty state for tabs */
        .meeting-tab-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-3);
            padding: var(--space-8);
            text-align: center;
            color: var(--text-tertiary);
        }

        .meeting-tab-empty svg {
            width: 48px;
            height: 48px;
            opacity: 0.5;
        }

        .meeting-tab-empty p {
            font-size: var(--font-size-14);
            margin: 0;
        }

        /* ============================
           Transcript Q&A / Ask AI Tab
           ============================ */

        .meeting-tab-panel[data-tab="ask-ai"] {
            overflow: hidden;
        }

        .transcript-qa-container {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            position: relative;
        }

        .qa-sync-indicator {
            position: absolute;
            top: 10px;
            right: 16px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-family: 'Avenir Next', -apple-system, sans-serif;
            letter-spacing: 0.02em;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .qa-sync-indicator:not(:empty) { opacity: 1; }

        .qa-sync-indicator--loading,
        .qa-sync-indicator--local { color: #8A8A8E; }

        .qa-sync-indicator--success { color: #10B981; }

        .qa-sync-indicator--fade {
            opacity: 0 !important;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @keyframes qa-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .qa-sync-spinner {
            display: inline-block;
            vertical-align: middle;
            animation: qa-spin 0.8s linear infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .qa-sync-spinner { animation: none; }
        }

        @keyframes qa-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .qa-skeleton-row {
            display: flex;
            align-items: center;
            padding: 8px 16px;
        }

        .qa-skeleton-row--user { justify-content: flex-end; }

        .qa-skeleton-body {
            height: 48px;
            border-radius: 12px;
            width: 72%;
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.05) 25%,
                rgba(0, 0, 0, 0.1) 50%,
                rgba(0, 0, 0, 0.05) 75%
            );
            background-size: 200% 100%;
            animation: qa-shimmer 1.5s ease-in-out infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .qa-skeleton-body { animation: none; }
        }

        .qa-messages {
            flex: 1;
            height: 0;
            overflow-y: auto;
            padding: 0 var(--space-4) var(--space-3);
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .qa-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-3);
            padding: var(--space-8);
            text-align: center;
            color: var(--text-tertiary);
            flex: 1;
        }

        .qa-empty-state svg {
            opacity: 0.4;
        }

        .qa-empty-state p {
            font-size: var(--font-size-14);
            margin: 0;
        }

        .qa-message {
            padding: var(--space-2-5) var(--space-3);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-14);
            line-height: 1.5;
            word-wrap: break-word;
        }

        .qa-message-user {
            align-self: flex-end;
            max-width: 85%;
            background: rgba(74, 144, 217, 0.12);
            color: var(--text-primary);
            border-bottom-right-radius: var(--radius-xs);
        }

        .qa-message-assistant {
            align-self: stretch;
            background: var(--bg-hover);
            color: var(--text-primary);
            border-bottom-left-radius: var(--radius-xs);
        }

        .qa-message-user .qa-message-text {
            white-space: pre-wrap;
        }

        .qa-message-text p { margin: 0 0 0.5em 0; }
        .qa-message-text p:last-child { margin-bottom: 0; }
        .qa-message-text ul { margin: 0.25em 0; padding-left: 1.5em; list-style-type: disc; }
        .qa-message-text ol { margin: 0.25em 0; padding-left: 1.5em; list-style-type: decimal; }
        .qa-message-text li { margin: 0.15em 0; display: list-item; }
        .qa-message-text strong { font-weight: 600; }
        .qa-message-text code {
            background: rgba(0,0,0,0.06);
            padding: 0.1em 0.35em;
            border-radius: 3px;
            font-size: 0.9em;
            font-family: 'SF Mono', 'Menlo', monospace;
        }
        .qa-message-text pre {
            background: rgba(0,0,0,0.06);
            padding: 0.5em 0.75em;
            border-radius: 6px;
            overflow-x: auto;
            margin: 0.4em 0;
        }
        .qa-message-text pre code {
            background: none;
            padding: 0;
        }
        .qa-message-text h1, .qa-message-text h2, .qa-message-text h3 {
            font-weight: 600;
            margin: 0.5em 0 0.25em;
        }
        .qa-message-text h1 { font-size: 1.15em; }
        .qa-message-text h2 { font-size: 1.08em; }
        .qa-message-text h3 { font-size: 1em; }

        .qa-typing-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: var(--space-3) var(--space-3);
        }

        .qa-typing-indicator span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--text-tertiary);
            animation: qa-dot-bounce 1.4s ease-in-out infinite;
        }

        .qa-typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .qa-typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes qa-dot-bounce {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-4px); }
        }

        /* AI processing status steps */
        .qa-status-steps {
            padding: var(--space-3) var(--space-4);
        }

        .qa-status-step {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1) 0;
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            transition: color 0.3s ease, opacity 0.3s ease;
            opacity: 0;
            transform: translateY(4px);
            animation: qa-step-appear 0.3s ease forwards;
        }

        .qa-status-step.active {
            color: var(--text-secondary);
        }

        .qa-status-step.completed {
            color: var(--text-tertiary);
        }

        .qa-status-step-icon {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .qa-status-step.active .qa-status-step-icon {
            animation: qa-spinner 1s linear infinite;
        }

        .qa-status-step.completed .qa-status-step-icon svg {
            color: #10B981;
        }

        @keyframes qa-step-appear {
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes qa-spinner {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Thinking Display (DeepSeek R1) */
        .qa-thinking {
            border-left: 2px solid var(--border-medium);
            margin-bottom: var(--space-2);
            padding-left: var(--space-3);
        }

        .qa-thinking-toggle {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            background: none;
            border: none;
            padding: var(--space-3) 0;
            min-height: 44px;
            cursor: pointer;
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            font-family: inherit;
            transition: color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .qa-thinking-toggle:hover {
            color: var(--text-secondary);
        }

        .qa-thinking-toggle .qa-thinking-spinner {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            animation: qa-spinner 1s linear infinite;
        }

        .qa-thinking[data-state="done"] .qa-thinking-toggle .qa-thinking-spinner {
            animation: none;
        }

        .qa-thinking-toggle .qa-thinking-chevron {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .qa-thinking[data-collapsed="true"] .qa-thinking-toggle .qa-thinking-chevron {
            transform: rotate(-90deg);
        }

        .qa-thinking-content {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            font-style: italic;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow: hidden;
            max-height: 300px;
            overflow-y: auto;
            transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            padding: var(--space-1) 0;
        }

        .qa-thinking[data-collapsed="true"] .qa-thinking-content {
            max-height: 0;
            opacity: 0;
            padding: 0;
        }

        /* Processing / Response Timers */
        .qa-processing {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            padding: var(--space-2) 0;
        }

        .qa-processing-spinner {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            animation: qa-spinner 1s linear infinite;
        }

        .qa-processing-label {
            color: var(--text-tertiary);
        }

        .qa-processing-timer {
            color: var(--text-tertiary);
            font-variant-numeric: tabular-nums;
        }

        .qa-response-timer {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            padding: var(--space-1) 0;
        }

        .qa-response-timer .qa-processing-spinner {
            width: 14px;
            height: 14px;
        }

        .qa-response-timer-value {
            font-variant-numeric: tabular-nums;
        }

        .qa-thinking-timer {
            font-variant-numeric: tabular-nums;
        }

        .qa-status-bar {
            padding: 0 var(--space-4);
            min-height: 0;
        }

        .qa-status-bar:empty {
            display: none;
        }

        .qa-suggestions {
            display: flex;
            gap: var(--space-2);
            padding: 0 var(--space-4) var(--space-2);
            flex-wrap: wrap;
        }

        .qa-suggestion-chip {
            font-family: var(--font-primary);
            font-size: var(--font-size-12);
            padding: var(--space-1-5) var(--space-3);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-full);
            background: var(--bg-card);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }

        .qa-suggestion-chip:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: rgba(74, 144, 217, 0.06);
        }

        .qa-input-area {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-4);
            border-top: 1px solid var(--border-light);
        }

        .qa-input {
            flex: 1;
            box-sizing: border-box;
            font-family: var(--font-primary);
            font-size: var(--font-size-14);
            padding: var(--space-2) var(--space-3);
            border: 1.5px solid var(--border-medium);
            border-radius: var(--radius-lg);
            outline: none;
            resize: none;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.4;
            min-height: 36px;
            max-height: 120px;
            transition: border-color var(--transition-fast);
        }

        .qa-input:focus {
            border-color: var(--accent-blue);
        }

        .qa-input::placeholder {
            color: var(--text-tertiary);
        }

        .qa-send-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: var(--radius-full);
            background: var(--accent-blue);
            color: white;
            cursor: pointer;
            flex-shrink: 0;
            transition: background var(--transition-fast);
        }

        .qa-send-btn:hover {
            background: var(--accent-blue-hover);
        }

        .qa-send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Event Modal Sidebar */
        .event-modal-sidebar {
            width: 224px;
            padding: var(--space-5);
            background: var(--bg-main);
            border-left: 1px solid var(--border-light);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
        }

        .event-modal.fullscreen .event-modal-sidebar {
            width: 256px;
        }

        .event-sidebar-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        /* Smooth fade-in for recording section to avoid jarring transitions */
        #eventRecordingSection {
            transition: opacity 0.15s ease-in-out;
        }

        .event-sidebar-label {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }

        .event-meeting-join-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-3) var(--space-4);
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .event-meeting-join-btn:hover {
            background: var(--bg-hover);
            border-color: var(--accent-blue);
        }

        .meeting-btn-icon {
            width: 16px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .meeting-btn-icon svg {
            width: 16px;
            height: 16px;
        }
        
        .meeting-btn-text {
            line-height: 1;
        }

        /* Record Meeting Button */
        .event-record-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-3) var(--space-4);
            background: #dc3545;
            border-radius: var(--radius-md);
            border: none;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: white;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .event-record-btn:hover {
            background: #c82333;
            transform: translateY(-1px);
        }

        .event-record-btn:active {
            transform: translateY(0);
        }

        .record-btn-icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .record-btn-icon svg {
            width: 18px;
            height: 18px;
        }

        .record-btn-text {
            line-height: 1;
        }

        .event-attendees-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .event-attendee {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 6px 0;
            position: relative;
        }

        /* Copy button visibility controlled by JavaScript hover handlers */

        .attendee-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-family);
            font-size: 9px;
            font-weight: 600;
            flex-shrink: 0;
        }

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

        .attendee-name {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .organizer-badge {
            font-size: 9px;
            font-weight: 400;
            color: var(--text-tertiary);
            background: var(--bg-tertiary);
            padding: 1px 4px;
            border-radius: 3px;
        }

        .copy-email-btn {
            display: flex;
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            color: var(--text-tertiary);
            transition: color 0.15s, opacity 0.15s;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }

        .event-attendee:hover .copy-email-btn {
            opacity: 1;
        }

        .copy-email-btn:hover {
            color: var(--accent-blue);
        }

        .copy-email-btn svg {
            width: 14px;
            height: 14px;
        }

        .attendee-email {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .attendee-rsvp {
            display: flex;
            gap: var(--space-half);
        }

        .rsvp-btn {
            padding: 2px 5px;
            border: 1px solid var(--border-medium);
            background: transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: 10px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .rsvp-btn:hover {
            background: var(--bg-hover);
        }

        .rsvp-btn.active {
            background: #E8F5E9;
            border-color: #4CAF50;
            color: #2E7D32;
        }

        .rsvp-btn.active[data-rsvp="no"] {
            background: #FFEBEE;
            border-color: #EF5350;
            color: #C62828;
        }

        .rsvp-btn.active[data-rsvp="maybe"] {
            background: #FFF3E0;
            border-color: #FFB74D;
            color: #E65100;
        }

        .add-participant {
            padding: 8px 0;
            cursor: pointer;
        }

        .add-participant-text {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .add-participant:hover .add-participant-text {
            color: var(--accent-blue);
        }

        .add-participant-input {
            width: 100%;
            padding: var(--space-1-5) var(--space-2);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-primary);
            color: var(--text-primary);
            outline: none;
        }

        .add-participant-input:focus {
            border-color: var(--accent-blue);
        }

        /* Event Description in Sidebar */
        .event-description-text {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .event-description-text:hover {
            color: var(--text-primary);
        }

        .event-description-text.expanded {
            display: block;
            -webkit-line-clamp: unset;
            max-height: 300px;
            overflow-y: auto;
        }

        .event-description-text.editing {
            display: block;
            -webkit-line-clamp: unset;
            max-height: 300px;
            overflow-y: auto;
            background: var(--bg-secondary);
            border-radius: var(--radius-sm);
            padding: 8px;
            margin: 4px -8px -8px -8px;
            outline: none;
            cursor: text;
            white-space: pre-wrap;
        }

        .event-description-text.editing:focus {
            background: var(--bg-primary);
            box-shadow: 0 0 0 2px var(--accent-blue);
        }

        .event-description-text ul,
        .event-description-text ol {
            margin: 4px 0;
            padding-left: 20px;
        }

        .event-description-text ol {
            list-style-type: decimal;
        }

        .event-description-text ol ol,
        .event-description-text ol li ol,
        .event-description-text ol li > ol {
            list-style-type: lower-alpha !important;
        }

        .event-description-text ol ol ol,
        .event-description-text ol li ol li ol,
        .event-description-text ol li > ol li > ol {
            list-style-type: lower-roman !important;
        }

        .event-description-text li {
            margin: 2px 0;
        }

        .event-description-text li > ul,
        .event-description-text li > ol {
            margin-top: 2px;
            margin-bottom: 0;
        }

        .event-description-text .description-bullet-line {
            display: flex;
            gap: 6px;
            padding: 2px 0;
        }

        .event-description-text .description-bullet,
        .event-description-text .description-number {
            color: var(--accent-blue);
            font-weight: 600;
            flex-shrink: 0;
        }

        /* Event Location in Sidebar */
        .event-location-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 11px;
            transition: all var(--transition-fast);
        }

        .event-location-item:hover {
            color: var(--accent-blue);
        }

        .event-location-item svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            opacity: 0.6;
        }

        .event-location-text {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Action Items in Event Modal */
        .action-items-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-height: 130px;
            overflow-y: auto;
        }

        /* More compact action items in centered modal */
        .event-modal:not(.fullscreen) .action-items-list {
            max-height: 100px;
        }

        .event-modal:not(.fullscreen) .event-action-items {
            padding: var(--space-2) 28px;
        }

        .action-items-empty {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            font-style: italic;
            padding: var(--space-1) 0;
        }

        .action-item-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1) 0;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
        }

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

        .action-item-checkbox {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-medium);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all var(--transition-fast);
            background: transparent;
        }

        .action-item-checkbox:hover {
            border-color: var(--accent-blue);
        }

        .action-item-checkbox.completed {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        .action-item-checkbox.completed svg {
            color: white;
            width: 10px;
            height: 10px;
        }

        .action-item-title {
            flex: 1;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .action-item-row.completed .action-item-title {
            color: var(--text-tertiary);
            text-decoration: line-through;
        }


        .add-action-item {
            margin-top: var(--space-2);
        }

        .action-item-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            outline: none;
            transition: border-color var(--transition-fast);
            background: var(--bg-card);
            color: var(--text-primary);
        }

        .action-item-input:focus {
            border-color: var(--accent-blue);
        }

        .action-item-input::placeholder {
            color: var(--text-tertiary);
        }

        /* Action Items Section pinned to bottom of modal */
        .event-action-items {
            flex: 0 0 auto;
            padding: var(--space-2) 28px var(--space-3);
            border-top: 1px solid var(--border-light);
        }

        .action-items-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .action-items-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            background: rgba(91, 159, 227, 0.15);
            color: #5B9FE3;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;
        }

        /* Inline Task Input in Notes Editor */
        .task-inline-wrapper {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: 6px 10px;
            background: rgba(91, 159, 227, 0.08);
            border: 1px solid #5B9FE3;
            border-radius: var(--radius-sm);
            margin: 4px 0;
        }

        .task-inline-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5B9FE3;
        }

        .task-inline-icon svg {
            width: 16px;
            height: 16px;
        }

        .task-inline-input {
            flex: 1;
            min-width: 200px;
            padding: var(--space-1) var(--space-2);
            border: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            outline: none;
        }

        .task-inline-input::placeholder {
            color: var(--text-tertiary);
        }

        .event-previous-section {
            margin-top: auto;
        }

        .previous-meetings-header {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .previous-meeting-item {
            padding: 6px 0;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

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

        .previous-meeting-item:hover {
            color: var(--accent-blue);
        }

        .previous-meeting-title {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
        }

        .previous-meeting-item:hover .previous-meeting-title {
            color: var(--accent-blue);
        }

        .previous-meeting-date {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .load-more-btn {
            width: 100%;
            padding: var(--space-2);
            background: transparent;
            border: none;
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-top: 4px;
        }

        .load-more-btn:hover {
            color: var(--accent-blue);
        }

        .no-previous-meetings {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            padding: 8px 0;
        }

        .previous-meeting-notes-icon {
            display: inline-block;
            vertical-align: middle;
            color: var(--accent-blue);
            margin-left: 5px;
            flex-shrink: 0;
        }

        /* Future Feature Buttons (Disabled) */
        .event-future-features {
            margin-top: var(--space-4);
        }

        .future-feature-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: none;
            background: transparent;
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .future-feature-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .future-feature-btn:hover:not(.disabled) {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .future-feature-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Editor */
        .task-note-editor {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-primary);
            outline: none;
            min-height: 300px;
            padding-bottom: 40px;
            position: relative;
        }

        /* Ensure there's always clickable space after content */
        .task-note-editor::after {
            content: '';
            display: block;
            height: 40px;
            width: 100%;
        }

        /* Placeholder - shown via class to prevent layout shifts */
        .task-note-editor.show-placeholder::before {
            content: 'Add notes...';
            color: var(--text-tertiary);
            position: absolute;
            pointer-events: none;
        }

        .task-note-editor p {
            margin-bottom: 8px;
        }

        /* When editor has only one empty element (after clicking), don't add margin */
        .task-note-editor > *:first-child:last-child:empty,
        .task-note-editor > br:first-child:last-child {
            margin: 0;
        }

        .task-note-editor ul, .task-note-editor ol {
            margin-bottom: 8px;
            padding-left: 24px;
        }

        .task-note-editor ul {
            list-style-type: disc;
        }

        .task-note-editor ul ul {
            list-style-type: circle;
        }

        .task-note-editor ul ul ul {
            list-style-type: square;
        }

        .task-note-editor ol {
            list-style-type: decimal;
        }

        .task-note-editor ol ol {
            list-style-type: lower-alpha;
        }

        .task-note-editor ol ol ol {
            list-style-type: lower-roman;
        }

        .task-note-editor ol ol ol ol {
            list-style-type: decimal;
        }

        .task-note-editor li {
            margin-bottom: 4px;
        }

        .task-note-editor li > ul, .task-note-editor li > ol {
            margin-top: 4px;
            margin-bottom: 0;
        }

        .task-note-editor h1 {
            font-family: var(--font-family);
            font-size: var(--font-size-26);
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }

        .task-note-editor h2 {
            font-family: var(--font-family);
            font-size: var(--font-size-22);
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: -0.2px;
        }

        .task-note-editor h3 {
            font-family: var(--font-family);
            font-size: var(--font-size-18);
            font-weight: 600;
            margin-bottom: 8px;
        }

        .task-note-editor blockquote {
            border-left: 3px solid var(--accent-blue);
            padding-left: 16px;
            color: var(--text-secondary);
            margin-bottom: 8px;
            font-style: italic;
        }

        .task-note-editor hr {
            border: none;
            border-top: 1px solid var(--border-light);
            margin: 16px 0;
        }

        /* Slash Command Menu - Matches Figma exactly */
        .slash-menu {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: var(--space-2);
            min-width: 240px;
            max-height: 800px;
            overflow-y: auto;
            z-index: 1000;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .slash-menu.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .slash-menu-header {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            padding: 8px 8px 12px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 8px;
        }

        .slash-menu-header button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-size-14);
            font-weight: 500;
            transition: all var(--transition-fast);
        }

        .slash-menu-header button:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .slash-menu-header button.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .slash-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-2-5) var(--space-3);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .slash-menu-item:hover:not(.selected) {
            background: var(--bg-hover);
        }

        .slash-menu-item.selected {
            background: var(--accent-blue-light);
        }

        .slash-menu-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
            font-weight: 500;
        }

        .slash-menu-icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.5;
        }

        .slash-menu-label {
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .slash-menu-no-results {
            padding: var(--space-3);
            text-align: center;
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
        }

        /* Text Formatting Toolbar */
        .format-toolbar {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: var(--space-1-5);
            display: flex;
            align-items: center;
            gap: var(--space-half);
            z-index: 1000;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: all var(--transition-fast);
        }

        .format-toolbar.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .format-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-size-14);
            font-weight: 500;
            transition: all var(--transition-fast);
        }

        .format-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .format-btn.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .format-divider {
            width: 1px;
            height: 20px;
            background: var(--border-light);
            margin: 0 4px;
        }

        /* Turn Into Dropdown Container */
        .format-dropdown-container {
            position: relative;
        }

        .format-dropdown-trigger {
            height: 32px;
            padding: 0 8px;
            gap: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-size-14);
            transition: all var(--transition-fast);
        }

        .format-dropdown-trigger:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .format-dropdown-caret {
            opacity: 0.5;
            transition: transform var(--transition-fast);
        }

        .format-dropdown-trigger.active .format-dropdown-caret {
            transform: rotate(180deg);
        }

        /* Turn Into Dropdown Panel */
        .format-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            min-width: 200px;
            padding: var(--space-1-5);
            visibility: hidden;
            opacity: 0;
            transform: translateY(-4px);
            pointer-events: none;
            transition: opacity var(--transition-fast), transform var(--transition-fast);
            z-index: 1001;
        }

        .format-dropdown.visible {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Dropdown Items */
        .format-dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-2-5);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .format-dropdown-item:hover,
        .format-dropdown-item.selected {
            background: var(--bg-hover);
        }

        .format-dropdown-icon {
            width: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-size: var(--font-size-14);
        }

        .format-dropdown-text {
            flex: 1;
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .format-dropdown-shortcut {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .format-dropdown-divider {
            height: 1px;
            background: var(--border-light);
            margin: var(--space-1-5) 0;
        }

        /* Dropdown Group Labels */
        .format-dropdown-label {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: var(--space-1) var(--space-2-5);
            margin-top: var(--space-1);
        }

        .format-dropdown-label:first-child {
            margin-top: 0;
        }

        /* Modal Footer — single toolbar row */
        .modal-footer {
            border-top: 1px solid var(--border-light);
            position: relative;
        }

        .modal-action-btn {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
        }

        .modal-action-btn:hover {
            background: var(--surface-hover);
            color: var(--text-secondary);
        }

        .modal-action-btn:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
        }

        .modal-action-btn.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .modal-action-btn svg {
            width: 20px;
            height: 20px;
        }

        /* Toolbar — single clean row of action buttons */
        .modal-toolbar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-1);
            padding: var(--space-2) var(--space-5);
        }

        /* Markdown hint */
        .markdown-hint {
            text-align: right;
            padding: 12px 28px;
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            opacity: 0.7;
            pointer-events: none;
            background: var(--bg-card);
            border-top: 1px solid transparent;
        }

        /* Slash Command Menu */
        .slash-menu {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: var(--space-2);
            min-width: 240px;
            max-height: 800px;
            overflow-y: auto;
            z-index: 10010;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: all var(--transition-fast);
        }

        .slash-menu.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .slash-menu-header {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            padding: 8px 8px 12px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 8px;
        }

        .slash-menu-header button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-size-14);
            font-weight: 500;
            transition: all var(--transition-fast);
        }

        .slash-menu-header button:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .slash-menu-header button.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .slash-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-2-5) var(--space-3);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .slash-menu-item:hover:not(.selected) {
            background: var(--bg-hover);
        }

        .slash-menu-item.selected {
            background: var(--accent-blue-light);
        }

        .slash-menu-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
            font-weight: 500;
        }

        .slash-menu-icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.5;
        }

        .slash-menu-label {
            font-size: var(--font-size-14);
            color: var(--text-primary);
        }

        .slash-menu-no-results {
            padding: var(--space-3);
            text-align: center;
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
        }

        /* Text Formatting Toolbar */
        .format-toolbar {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: var(--space-1-5);
            display: flex;
            align-items: center;
            gap: var(--space-half);
            z-index: 10010;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: all var(--transition-fast);
        }

        .format-toolbar.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .format-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-size-14);
            font-weight: 500;
            transition: all var(--transition-fast);
        }

        .format-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .format-btn.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        /* Individual Day Column */
        .day-column {
            min-width: 240px;
            width: 240px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--border-light);
            background: var(--bg-main);
            transition: background var(--transition-fast);
        }

        .day-column:last-child {
            border-right: none;
        }

        .day-column.is-today {
            background: var(--accent-blue-opacity-3);
        }

        .day-column.is-today.drag-over .day-column-content {
            background: var(--accent-blue-opacity-12);
        }

        .day-column-header {
            padding: 16px 16px 12px;
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
            display: flex;
            align-items: baseline;
            gap: var(--space-3);
        }

        .day-column-date {
            display: flex;
            align-items: baseline;
            gap: var(--space-1-5);
        }

        .day-name {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-secondary);
        }

        .day-column.is-today .day-name {
            color: var(--accent-blue);
        }

        .day-number {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
        }

        .day-column.is-today .day-number {
            color: var(--accent-blue);
        }

        .day-duration-summary {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            line-height: 1;
            vertical-align: middle;
        }

        .day-duration-summary svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            display: block;
        }

        .day-column-content {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            scrollbar-width: none;
            min-height: 200px;
        }

        .day-column-content::-webkit-scrollbar {
            display: none;
        }

        .day-column.drag-over .day-column-content {
            background: var(--accent-blue-light);
        }

        /* New Task Input in Day Column */
        .day-new-task {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-3);  /* Match backlog-drawer-header height */
            border-bottom: 1px solid var(--border-light);
            opacity: 0.6;
            transition: opacity var(--transition-fast);
        }

        .day-new-task:hover,
        .day-new-task:focus-within {
            opacity: 1;
        }

        .day-new-task-checkbox {
            width: 16px;
            height: 16px;
            border: 1.5px solid var(--border-medium);
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            opacity: 0.5;
        }

        .day-new-task-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }

        .day-new-task-input::placeholder {
            color: var(--text-tertiary);
        }

        /* Events Section in Day Column (Plan Mode) */
        .day-events {
            padding: var(--space-2) var(--space-3);
            display: flex;
            flex-direction: column;
            gap: var(--space-1-5);
        }

        .day-events:empty {
            display: none;
        }

        .day-events::before {
            content: '';
            display: block;
            height: 1px;
            background: var(--border-light);
            margin-bottom: 4px;
        }

        .day-events:empty::before {
            display: none;
        }

        .day-event-card {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-2-5);
            background: var(--bg-secondary);
            border-radius: var(--radius-sm);
            border-left: 3px solid var(--accent-blue);
        }

        .day-event-card.calendar-green {
            border-left-color: #4CAF50;
        }

        .day-event-card.calendar-purple {
            border-left-color: #9C27B0;
        }

        .day-event-card.calendar-red {
            border-left-color: #E53935;
        }

        .day-event-card.calendar-orange {
            border-left-color: #FF9800;
        }

        .day-event-time {
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-tertiary);
            white-space: nowrap;
        }

        .day-event-title {
            font-size: var(--font-size-12);
            color: var(--text-primary);
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Tasks Section in Day Column */
        .day-tasks {
            flex: 1;
            padding: 8px 0;
            min-height: 100px;
        }

        .day-task {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2-5);
            padding: var(--space-2-5) var(--space-3);
            cursor: pointer;
            transition: all var(--transition-fast);
            border-left: 3px solid transparent;
        }

        .day-task:hover {
            background: var(--accent-blue-light);
        }

        .day-task.dragging {
            opacity: 0.5;
        }

        .day-task-checkbox {
            width: 18px;
            height: 18px;
            border: 1.5px solid var(--border-medium);
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-top: 1px;
        }

        .day-task-checkbox:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .day-task-checkbox svg {
            width: 12px;
            height: 12px;
            stroke: var(--accent-blue);
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .day-task-checkbox:hover svg {
            opacity: 0.5;
        }

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

        .day-task-title {
            font-size: var(--font-size-14);
            color: var(--text-primary);
            line-height: 1.4;
        }

        .day-task-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: 4px;
        }

        .day-task-project {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .day-task-project-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent-blue);
        }

        .day-task-duration {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            background: rgba(0, 0, 0, 0.04);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
        }

        .day-task-notes-icon {
            color: var(--text-tertiary);
        }

        .day-task-notes-icon svg {
            width: 12px;
            height: 12px;
        }

        /* Timebox Mode Styles */
        .day-column.timebox-mode .day-column-content {
            padding: 0;
            overflow-y: auto;
        }

        .day-column.timebox-mode .day-new-task {
            display: none;
        }

        .day-timeline {
            display: none;
            flex-direction: column;
            flex: 1;
            position: relative;
        }

        .day-column.timebox-mode .day-timeline {
            display: flex;
        }

        .day-column.timebox-mode .day-events,
        .day-column.timebox-mode .day-tasks {
            display: none;
        }

        .timeline-hour {
            display: flex;
            min-height: 48px;
            height: 48px;
            border-bottom: 1px solid var(--border-light);
            position: relative;
            flex-shrink: 0;
        }

        .timeline-hour-label {
            width: 44px;
            padding: var(--space-half) var(--space-1-5) 0 0;
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            text-align: right;
            flex-shrink: 0;
        }

        .timeline-hour-content {
            flex: 1;
            position: relative;
            border-left: 1px solid var(--border-light);
            transition: background var(--transition-fast);
        }

        .timeline-hour-content.drag-over {
            background: var(--accent-blue-light);
        }

        /* Timeline items overlay container */
        .timeline-items {
            position: absolute;
            top: 0;
            left: 44px;
            right: 0;
            pointer-events: none;
        }

        .timeline-items > * {
            pointer-events: auto;
        }

        .timeline-event {
            position: absolute;
            left: 4px;
            right: 4px;
            background: var(--accent-blue-focus);
            border-left: 3px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            padding: var(--space-half) var(--space-1-5);
            font-size: var(--font-size-xs);
            overflow: hidden;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .timeline-event-time {
            font-size: var(--font-size-2xs);
            font-weight: 600;
            opacity: 0.7;
        }

        .timeline-event-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .timeline-event.calendar-green {
            background: rgba(76, 175, 80, 0.15);
            border-left-color: #4CAF50;
        }

        .timeline-event.calendar-purple {
            background: rgba(156, 39, 176, 0.15);
            border-left-color: #9C27B0;
        }

        .timeline-event.calendar-red {
            background: rgba(229, 57, 53, 0.15);
            border-left-color: #E53935;
        }

        .timeline-event.calendar-orange {
            background: rgba(255, 152, 0, 0.15);
            border-left-color: #FF9800;
        }

        .timeline-task {
            position: absolute;
            left: 4px;
            right: 4px;
            background: var(--bg-card);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            padding: var(--space-half) var(--space-1-5);
            font-size: var(--font-size-xs);
            cursor: pointer;
            z-index: 2;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            gap: 1px;
            overflow: hidden;
        }

        .timeline-task:hover {
            box-shadow: var(--shadow-md);
        }

        .timeline-task.dragging {
            opacity: 0.5;
        }

        .timeline-task-time {
            font-size: var(--font-size-2xs);
            font-weight: 600;
            color: var(--text-secondary);
        }

        .timeline-task-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Unscheduled tasks section at bottom of timeline */
        .timeline-unscheduled {
            border-top: 2px solid var(--border-medium);
            padding: var(--space-2);
            background: var(--bg-secondary);
            flex-shrink: 0;
        }

        .timeline-unscheduled-header {
            font-size: var(--font-size-2xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            padding-left: 4px;
        }

        .timeline-unscheduled-task {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1-5) var(--space-2);
            background: var(--bg-card);
            border-radius: var(--radius-sm);
            margin-bottom: 4px;
            cursor: grab;
            transition: all var(--transition-fast);
            box-shadow: var(--shadow-sm);
        }

        .timeline-unscheduled-task:hover {
            box-shadow: var(--shadow-md);
        }

        .timeline-unscheduled-task.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .timeline-task-checkbox {
            width: 16px;
            height: 16px;
            border: 1.5px solid var(--border-medium);
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .timeline-task-checkbox:hover {
            border-color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .timeline-task-checkbox svg {
            width: 10px;
            height: 10px;
            stroke: var(--accent-blue);
            opacity: 0;
        }

        .timeline-task-checkbox:hover svg {
            opacity: 0.5;
        }

        .timeline-unscheduled-title {
            flex: 1;
            font-size: var(--font-size-12);
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .timeline-unscheduled-duration {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            background: rgba(0, 0, 0, 0.04);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
        }

        /* Empty Day State */
        .day-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-10) var(--space-5);
            text-align: center;
            color: var(--text-tertiary);
        }

        .day-empty-state svg {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
            opacity: 0.3;
        }

        .day-empty-state-text {
            font-size: var(--font-size-12);
        }

        /* Drop Zone Indicator */
        .drop-zone-indicator {
            position: absolute;
            left: 8px;
            right: 8px;
            height: 2px;
            background: var(--accent-blue);
            border-radius: 1px;
            opacity: 0;
            transition: opacity var(--transition-fast);
            pointer-events: none;
        }

        .drop-zone-indicator.visible {
            opacity: 1;
        }

        /* Animations */
        @keyframes taskSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .task-animate-in {
            animation: taskSlideIn 0.3s ease forwards;
        }


        /* Task completion animation - uses @keyframes taskComplete defined earlier */
        .day-task.completing {
            animation: taskComplete 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .day-task.completing .day-task-checkbox {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        .day-task.completing .day-task-checkbox svg {
            opacity: 1;
            stroke: white;
        }

        /* Smooth collapse for day-task completion */
        .day-task.collapsing {
            transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.1s ease;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
        }

        .day-task.collapsed {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
        }


/* ============================================================================ */
/* COMMAND BAR (CMD+K) */
/* ============================================================================ */

.command-bar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    z-index: 10000;
}

.command-bar {
    width: 600px;
    max-width: 90vw;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: commandBarSlideIn 0.2s var(--ease-out);
}

@keyframes commandBarSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.command-bar-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.command-bar-search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    stroke-width: 2;
}

.command-bar-input {
    flex: 1;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
}

.command-bar-input::placeholder {
    color: var(--text-tertiary);
}

.command-bar-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.command-result-item:hover,
.command-result-item.selected {
    background: var(--accent-blue-light);
}

.command-result-icon {
    font-size: var(--font-size-18);
    width: 24px;
    text-align: center;
}

.command-result-title {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.command-result-type {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: capitalize;
}

.command-bar-footer {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* ============================================================================ */
/* QUICK ADD MODAL */
/* ============================================================================ */

.quick-add-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.quick-add-overlay.visible {
    display: flex;
    opacity: 1;
}

.quick-add-modal {
    width: 480px;
    max-width: 90vw;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: visible;
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
}

.quick-add-overlay.visible .quick-add-modal {
    animation: quickAddSpringIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Premium spring animation for Quick Add modal */
@keyframes quickAddSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Closing animation */
.quick-add-overlay:not(.visible) .quick-add-modal {
    transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}

/* Dark mode */
[data-theme="dark"] .quick-add-modal {
    background: rgba(40, 40, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-add-content {
    padding: var(--space-4) var(--space-5);
}

.quick-add-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.quick-add-input {
    flex: 1;
    font-family: var(--font-family);
    font-size: 17px;
    font-weight: 400;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    padding: 8px 0;
}

/* Contenteditable placeholder using data attribute */
.quick-add-input:empty:before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

[data-theme="dark"] .quick-add-input:empty:before {
    color: rgba(255, 255, 255, 0.4);
}

.quick-add-shortcut-hint {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.quick-add-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-5) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.quick-add-hint {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.quick-add-hint kbd {
    font-family: var(--font-family);
    font-size: 10px;
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid var(--border-light);
}

.quick-add-destination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Expanded state */
.quick-add-expanded {
    padding: 0 var(--space-5) var(--space-4);
    display: none;
}

.quick-add-modal.expanded .quick-add-expanded {
    display: block;
}

.quick-add-notes {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3);
    resize: none;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 60px;
    margin-bottom: 12px;
}

.quick-add-notes:focus {
    border-color: var(--accent-blue);
}

.quick-add-notes::placeholder {
    color: var(--text-tertiary);
}

.quick-add-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.quick-add-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-add-field:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

.quick-add-field.has-value {
    color: var(--text-primary);
    border-color: var(--accent-blue-border);
    background: var(--accent-blue-light);
}

.quick-add-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-add-field-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.quick-add-field.has-value .quick-add-field-icon svg {
    color: var(--accent-blue);
}

.quick-add-actions {
    display: flex;
    justify-content: flex-end;
}

.quick-add-submit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-add-submit:hover {
    background: var(--accent-blue-dark);
}

.quick-add-submit kbd {
    font-family: var(--font-family);
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Date picker dropdown for quick add */
.quick-add-date-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10002;
    min-width: 160px;
    display: none;
}

.quick-add-date-dropdown.visible {
    display: block;
}

.quick-add-date-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.quick-add-date-option:hover {
    background: var(--accent-blue-light);
}

.quick-add-date-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Project icon with colored background */
.quick-add-project-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.quick-add-project-icon svg {
    width: 14px;
    height: 14px;
    color: white;
}

.quick-add-field-icon .quick-add-project-icon {
    width: 18px;
    height: 18px;
}

.quick-add-field-icon .quick-add-project-icon svg {
    width: 12px;
    height: 12px;
}

.quick-add-date-option:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.quick-add-date-option:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Date dropdown structure matching task dropdown */
.quick-add-date-option .dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-add-date-option .dropdown-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.quick-add-date-option .dropdown-label {
    flex: 1;
}

.quick-add-date-option .dropdown-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-left: auto;
}

.quick-add-date-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* Shake animation for empty submit */
@keyframes quickAddShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.quick-add-modal.shake {
    animation: quickAddShake 0.3s ease-in-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .quick-add-overlay,
    .quick-add-modal {
        transition: none;
    }
    .quick-add-modal.shake {
        animation: none;
    }
}

/* ============================================================================ */
/* UNIFIED BAR (CMD+K) */
/* ============================================================================ */

.ub-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.25s var(--ease-out);
}

.ub-overlay.visible {
    opacity: 1;
}

.ub-container {
    width: 560px;
    max-width: 90vw;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 8px 40px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: translateY(-12px) scale(0.97);
    opacity: 0;
    animation: ubSlideIn 0.25s var(--ease-out) forwards;
}

@keyframes ubSlideIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ub-overlay:not(.visible) .ub-container {
    transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}

/* Input wrapper */
.ub-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.ub-search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    stroke-width: 2;
    flex-shrink: 0;
}

.ub-input {
    flex: 1;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    min-height: 24px;
    word-break: break-word;
}

.ub-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

.ub-shortcut-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
    flex-shrink: 0;
}

.ub-shortcut-badge kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-family: var(--font-family);
    font-size: var(--font-size-2xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-tertiary);
}

/* Results */
.ub-results {
    max-height: 340px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.ub-result-group-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-2) var(--space-4) var(--space-1);
    user-select: none;
}

.ub-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-left: 2px solid transparent;
}

.ub-result-item:hover,
.ub-result-item.selected {
    background: var(--accent-blue-light);
    border-left-color: var(--accent-blue);
}

.ub-result-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.ub-result-icon svg {
    width: 16px;
    height: 16px;
}

.ub-result-title {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ub-result-type {
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
    text-transform: capitalize;
    flex-shrink: 0;
}

.ub-empty-hint {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Create task row */
.ub-create-row {
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-1);
    padding-top: var(--space-3);
}

.ub-create-row .ub-result-icon {
    color: var(--accent-blue);
}

.ub-create-row .ub-result-title {
    color: var(--accent-blue);
}

.ub-create-row .ub-result-type {
    display: flex;
    gap: 2px;
}

.ub-create-row .ub-result-type kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-family: var(--font-family);
    font-size: 9px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-tertiary);
}

.ub-create-primary {
    background: var(--accent-blue-light);
}

.ub-create-primary .ub-result-title {
    font-weight: 600;
}

/* Semantic search badge and loading */
.ub-semantic-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4A90D9;
    background: rgba(74, 144, 217, 0.1);
    border-radius: 4px;
    padding: 2px 5px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
}

.ub-semantic-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ub-semantic-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-light);
    border-top-color: #4A90D9;
    border-radius: 50%;
    animation: ub-spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes ub-spin {
    to { transform: rotate(360deg); }
}

.ub-semantic-group-header {
    color: #4A90D9;
}

[data-theme="dark"] .ub-semantic-badge {
    color: #6BB0F0;
    background: rgba(107, 176, 240, 0.15);
}

[data-theme="dark"] .ub-semantic-spinner {
    border-color: var(--border-light);
    border-top-color: #6BB0F0;
}

[data-theme="dark"] .ub-semantic-group-header {
    color: #6BB0F0;
}

.ub-semantic-error {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    opacity: 1;
    transition: opacity 300ms ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ub-semantic-badge {
        color: #6BB0F0;
        background: rgba(107, 176, 240, 0.15);
    }

    :root:not([data-theme="light"]) .ub-semantic-spinner {
        border-color: var(--border-light);
        border-top-color: #6BB0F0;
    }

    :root:not([data-theme="light"]) .ub-semantic-group-header {
        color: #6BB0F0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ub-semantic-spinner {
        animation: none;
        border-top-color: #4A90D9;
        opacity: 0.6;
    }
}

/* Expanded form */
.ub-expanded {
    border-top: 1px solid var(--border-light);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.ub-expanded-notes {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 48px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.ub-expanded-notes:focus {
    border-color: var(--accent-blue);
}

.ub-expanded-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ub-expanded-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    position: relative;
}

.ub-expanded-field:hover {
    border-color: var(--accent-blue-border);
    background: var(--accent-blue-bg);
}

.ub-expanded-field.has-value {
    color: var(--accent-blue);
    border-color: var(--accent-blue-border);
}

.ub-expanded-field-icon {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    color: inherit;
}

.ub-expanded-field-icon svg {
    width: 16px;
    height: 16px;
}

.ub-expanded-field-label {
    flex: 1;
}

.ub-expanded-actions {
    margin-top: var(--space-3);
    display: flex;
    justify-content: flex-end;
}

.ub-expanded-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ub-expanded-submit:hover {
    background: var(--accent-blue-dark);
}

.ub-expanded-submit kbd {
    font-family: var(--font-family);
    font-size: 9px;
    opacity: 0.7;
}

/* Date/project dropdown */
.ub-date-dropdown {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10002;
    padding: var(--space-1) 0;
    min-width: 180px;
}

.ub-date-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    min-height: 44px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ub-date-option:hover {
    background: var(--accent-blue-light);
}

.ub-date-hint {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.ub-date-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) 0;
}

.ub-project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: #fff;
}

/* Footer */
.ub-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-light);
}

.ub-destination {
    font-weight: 500;
}

/* Dark mode overrides */
[data-theme="dark"] .ub-overlay {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ub-container {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ub-overlay,
    .ub-container {
        transition: none;
        animation: none;
    }
    .ub-container {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================================ */
/* PROJECTS & AREAS DIRECTORY */
/* ============================================================================ */

.projects-directory,
.notes-view {
    padding: 0;
}

.directory-header,
.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.directory-header h2,
.notes-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.3px;
}

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

.directory-view-toggle {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-half);
}

/* Card View (default) */
.directory-card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* List View */
.directory-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.directory-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.directory-list-item:first-child {
    border-top: 1px solid var(--border-light);
}

.directory-list-item:hover {
    background: var(--bg-hover);
}

.directory-list-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.directory-list-icon svg {
    color: white;
}

.directory-list-content {
    flex: 1;
    min-width: 0;
}

.directory-list-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.directory-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
}

.directory-list-meta .meta-tag {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.directory-list-stats {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.directory-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12);
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
}

.btn-primary {
    padding: var(--space-2) var(--space-4);
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background: var(--accent-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-blue-border);
}

.projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.project-card,
.area-card {
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 1;
}

/* Staggered animation for cards - only when view is switching */
.view-container.animating .project-card,
.view-container.animating .area-card {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
}

.view-container.animating .project-card:nth-child(1),
.view-container.animating .area-card:nth-child(1) { animation-delay: 0ms; }
.view-container.animating .project-card:nth-child(2),
.view-container.animating .area-card:nth-child(2) { animation-delay: 50ms; }
.view-container.animating .project-card:nth-child(3),
.view-container.animating .area-card:nth-child(3) { animation-delay: 100ms; }
.view-container.animating .project-card:nth-child(4),
.view-container.animating .area-card:nth-child(4) { animation-delay: 150ms; }
.view-container.animating .project-card:nth-child(5),
.view-container.animating .area-card:nth-child(5) { animation-delay: 200ms; }
.view-container.animating .project-card:nth-child(6),
.view-container.animating .area-card:nth-child(6) { animation-delay: 250ms; }
.view-container.animating .project-card:nth-child(7),
.view-container.animating .area-card:nth-child(7) { animation-delay: 300ms; }
.view-container.animating .project-card:nth-child(8),
.view-container.animating .area-card:nth-child(8) { animation-delay: 350ms; }
.view-container.animating .project-card:nth-child(n+9),
.view-container.animating .area-card:nth-child(n+9) { animation-delay: 400ms; }

.project-card:hover,
.area-card:hover {
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px) scale(1.005);
}

.project-card-icon,
.area-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.project-card-title,
.area-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.project-card-meta,
.area-card-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.project-card-progress {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.project-area {
    padding: 2px var(--space-2);
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    margin-right: var(--space-2);
}

.project-deadline {
    color: var(--text-tertiary);
}

/* All Tasks Page Layout - Two column with left panel */
.tasks-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tasks-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 16px 32px;
    background: var(--bg-primary);
}

.tasks-page-header .page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

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

/* Icon button base style */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.icon-btn:active {
    background: var(--bg-quaternary);
}

.icon-btn.icon-btn-accent {
    background: var(--accent-blue);
    color: #FFFFFF;
    border-color: transparent;
}

.icon-btn.icon-btn-accent:hover {
    background: #357ABD;
    color: #FFFFFF;
    border-color: transparent;
}

.icon-btn.icon-btn-accent:active {
    background: #2E6BA3;
    color: #FFFFFF;
}

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

/* Sort dropdown container */
.sort-dropdown-container {
    position: relative;
}

.sort-trigger.active,
.sort-trigger:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Sort active indicator - shows when sort is not manual */
.sort-trigger.sort-active {
    color: var(--accent-blue);
}

.sort-trigger.sort-active svg {
    stroke: var(--accent-blue);
}

/* Sort dropdown menu */
.sort-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.sort-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sort-dropdown-section {
    padding: var(--space-1-5);
}

.sort-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}

.sort-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sort-dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sort-dropdown-item.active {
    background: var(--accent-blue-opacity-10);
    color: var(--accent-blue);
}

.sort-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sort-dropdown-item span {
    flex: 1;
}

/* Note Export Dropdown */
.note-export-container {
    position: relative;
    display: flex;
    align-items: center;
}

.note-export-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    margin-bottom: 4px;
    min-width: 140px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
}

.note-export-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.note-export-dropdown-section {
    padding: var(--space-1-5);
}

.note-export-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.note-export-dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.note-export-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.note-export-dropdown-item span {
    flex: 1;
    text-align: left;
}

.tasks-page-content {
    display: flex;
    flex: 1;
    min-height: 0;
    background: #FBFBFC;
    border-radius: var(--radius-lg) 12px 0 0;
    overflow: hidden;
}

.tasks-left-panel {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    overflow: hidden;
    height: 100%;
    border-right: 1px solid var(--border-light);
    padding: 0 8px;
}

.tasks-filter-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 4px 0;
}

.tasks-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-md);
    margin: 0 0 8px 0;
}

.tasks-panel-header:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.tasks-panel-header.active {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
}

.tasks-panel-title {
    flex: 1;
}

.tasks-total-count {
    margin-left: auto;
    min-width: 20px;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.tasks-panel-header.active .tasks-total-count {
    color: var(--accent-blue);
}

.tasks-panel-section {
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
}

.tasks-panel-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.section-add-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.tasks-panel-section:hover .section-add-btn,
.tasks-panel-section-title:hover .section-add-btn {
    opacity: 1;
}

.section-add-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.tasks-filter-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1px;
}

.tasks-filter-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.tasks-filter-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.tasks-filter-item.drag-over {
    background: var(--accent-blue-opacity-20);
    color: var(--accent-blue);
    outline: 2px dashed var(--accent-blue);
    outline-offset: -2px;
}

.tasks-filter-item.drag-over .tasks-filter-icon {
    color: var(--accent-blue);
}

.tasks-filter-item.someday-filter.drag-over {
    background: rgba(255, 149, 0, 0.2);
    color: #FF9500;
    outline-color: #FF9500;
}

.tasks-filter-item.someday-filter.drag-over .tasks-filter-icon {
    color: #FF9500;
}

.tasks-filter-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.tasks-filter-icon svg {
    width: 16px;
    height: 16px;
}

.tasks-filter-item.active .tasks-filter-icon {
    color: var(--accent-blue);
}

.tasks-filter-name {
    font-size: var(--font-size-14);
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-filter-count {
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
    flex-shrink: 0;
    min-width: 20px;
    text-align: right;
}

.tasks-filter-item.active .tasks-filter-count {
    color: var(--accent-blue);
}

/* Overdue filter - red styling */
.tasks-filter-item.overdue {
    color: #FF3B30;
}

.tasks-filter-item.overdue .tasks-filter-icon {
    color: #FF3B30;
}

.tasks-filter-item.overdue .tasks-filter-count {
    color: #FF3B30;
    font-weight: 600;
}

.tasks-filter-item.overdue.active {
    background: rgba(255, 59, 48, 0.1);
}

/* Someday filter - orange styling */
.tasks-filter-item.someday-filter {
    color: var(--text-tertiary);
}

.tasks-filter-item.someday-filter.active {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

.tasks-filter-item.someday-filter.active .tasks-filter-icon,
.tasks-filter-item.someday-filter.active .tasks-filter-count {
    color: #FF9500;
}

/* No Area filter - gray styling */
.tasks-filter-item.no-area {
    color: var(--text-tertiary);
}

.tasks-filter-item.no-area.active {
    background: rgba(142, 142, 147, 0.15);
    color: #636366;
}

.tasks-filter-item.no-area.active .tasks-filter-icon,
.tasks-filter-item.no-area.active .tasks-filter-count {
    color: #636366;
}

/* Area filter with icon */
.tasks-filter-area-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.tasks-filter-area-icon svg {
    width: 12px;
    height: 12px;
}

/* Tags section collapsible */
.tags-section .tags-section-toggle {
    cursor: pointer;
    user-select: none;
}

.tags-section .tags-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tags-section.expanded .tags-chevron {
    transform: rotate(90deg);
}

.tags-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.2s ease,
                padding 0.3s ease;
}

.tags-section.expanded .tags-chip-container {
    max-height: 200px;
    opacity: 1;
    padding-top: var(--space-1);
    padding-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .tags-section .tags-chevron,
    .tags-chip-container {
        transition: none;
    }
}

/* Sidebar tag chips — Apple Notes style */
.sidebar-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border-radius: 14px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.sidebar-tag-chip:hover {
    background: var(--bg-quaternary, rgba(0, 0, 0, 0.08));
    color: var(--text-primary);
}

.sidebar-tag-chip.active {
    background: var(--accent-blue-opacity-10, rgba(74, 144, 217, 0.1));
    color: var(--accent-blue);
}

.sidebar-tag-chip:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

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

.sidebar-tag-chip-name {
    line-height: 1;
}

.tasks-filter-area-icon {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tasks-filter-area-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Area filter delete button — positioned absolutely so it doesn't shift the count */
.area-filter-delete-btn {
    position: absolute;
    right: var(--space-2);
    opacity: 0;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.area-filter-delete-btn svg {
    width: 12px;
    height: 12px;
}

.tasks-filter-item.area-filter:hover .area-filter-delete-btn {
    opacity: 1;
}

.tasks-filter-item.area-filter:hover .tasks-filter-count {
    visibility: hidden;
}

.area-filter-delete-btn:hover {
    background: var(--bg-hover);
    color: var(--danger);
}

.tasks-panel-empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

/* Inline area creation */
.inline-editing {
    background: var(--accent-blue-opacity-5);
}

.inline-area-icon-btn {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.inline-area-icon-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.inline-area-name-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    padding: 2px 0;
}

.inline-area-name-input::placeholder {
    color: var(--text-tertiary);
}

/* Inline area popover */
.inline-area-popover {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: var(--space-3);
    min-width: 200px;
}

.inline-popover-section {
    margin-bottom: var(--space-3);
}

.inline-popover-section:last-child {
    margin-bottom: 0;
}

.inline-popover-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.inline-popover-icons {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.inline-popover-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.inline-popover-icon:hover {
    background: rgba(0, 0, 0, 0.06);
}

.inline-popover-icon.selected {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.inline-popover-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-popover-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.inline-popover-color.selected {
    box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
}

.inline-popover-color svg {
    width: 14px;
    height: 14px;
    color: white;
}

.tasks-main-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-6);
    background: var(--bg-secondary);
    scrollbar-width: none;
}

.tasks-main-content::-webkit-scrollbar {
    display: none;
}

.tasks-list-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 20px;
}

.tasks-list-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tasks-list-count {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-lg);
}

.tasks-list-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.all-tasks-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-light);
}

.all-tasks-row:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

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

.task-row-title {
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--text-primary);
    display: block;
}

.task-row-title.completed {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.task-row-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 4px;
}

.task-row-area {
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
}

.task-row-date {
    font-size: var(--font-size-12);
    color: var(--accent-blue);
}

.task-row-deadline {
    font-size: var(--font-size-12);
    color: #FF9500;
}

.task-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.all-tasks-row:hover .task-row-actions {
    opacity: 1;
}

.task-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.task-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tasks-list-project-group {
    margin-top: 24px;
}

.tasks-list-project-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.tasks-list-project-header:hover {
    background: var(--bg-secondary);
}

.tasks-list-project-icon {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.tasks-list-project-icon svg {
    width: 10px;
    height: 10px;
}

.tasks-list-project-name {
    flex: 1;
}

.tasks-list-project-count {
    color: var(--text-tertiary);
    font-weight: 500;
}

.tasks-list-project-tasks {
    margin-left: 26px;
    border-left: 2px solid var(--border-light);
    padding-left: 12px;
}

.tasks-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-12);
    text-align: center;
    color: var(--text-tertiary);
}

.tasks-list-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
    color: var(--accent-green);
}

.tasks-list-empty-icon svg {
    width: 100%;
    height: 100%;
}

.tasks-list-empty h3 {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.tasks-list-empty p {
    font-size: var(--font-size-14);
    color: var(--text-tertiary);
    margin: 0;
}

/* Projects Page Layout - Two column with left panel */
.projects-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.projects-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 16px 32px;
    background: var(--bg-primary);
}

.projects-page-header .page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

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

.projects-view-toggle {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-half);
}

.projects-page-content {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.projects-left-panel {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    overflow: hidden;
    transition: width var(--transition-smooth), min-width var(--transition-smooth), margin-left var(--transition-smooth);
    height: 100%;
    padding: 0 8px;
    border-right: 1px solid var(--border-light);
}


.projects-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-md);
    margin: 0 0 8px 0;
}

.projects-panel-header:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.projects-panel-header.active {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
}

.projects-panel-title {
    flex: 1;
}

.projects-expand-all {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.projects-expand-all:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.projects-expand-all svg {
    width: 16px;
    height: 16px;
}

.projects-total-count {
    margin-left: auto;
    min-width: 20px;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.projects-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.projects-panel-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.projects-area-group {
    margin-bottom: var(--space-2);
}

.projects-area-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.projects-area-group.collapsed .projects-area-list {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.projects-area-group.collapsed .area-chevron {
    transform: rotate(-90deg);
}

.projects-area-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-radius: var(--radius-sm);
    margin: 0 4px;
}

.projects-area-header:hover {
    background: var(--bg-hover);
}

.area-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.projects-area-header .area-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.projects-area-header .area-icon svg {
    color: white;
}

.projects-area-header .area-icon.no-area {
    background: var(--bg-tertiary);
}

.projects-area-header .area-icon.no-area svg {
    color: var(--text-tertiary);
}

.projects-area-header .area-icon.pinned-icon {
    background: var(--accent-blue-light);
}

.projects-area-header .area-icon.pinned-icon svg {
    color: var(--accent-blue);
}

.projects-area-header .area-name {
    flex: 1;
}

.projects-area-header .area-count {
    font-weight: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: var(--space-half) var(--space-1-5);
    border-radius: var(--radius-md);
}

.projects-panel-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-4) 6px 38px;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.projects-panel-item:hover,
.projects-panel-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.project-item-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.project-item-icon svg {
    color: white;
}

.project-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    min-width: 20px;
    text-align: right;
}

.projects-panel-item.active .project-item-count {
    color: var(--accent-blue);
}

.project-pinned-icon {
    width: 12px;
    height: 12px;
    color: var(--color-orange, #FF9500);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
}

.projects-main-content {
    flex: 1;
    min-width: 0;
    padding: 16px 24px;
    overflow-y: auto;
    background: var(--bg-secondary);
    scrollbar-width: none;
}

.projects-main-content::-webkit-scrollbar {
    display: none;
}

.projects-main-content .projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.projects-main-content .projects-list.directory-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================================================ */
/* DASHBOARD OVERVIEW (Projects, Areas, Notes) */
/* ============================================================================ */

.dashboard-overview {
    padding: 0 0 var(--space-5);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-header {
    margin-bottom: var(--space-5);
}

.dashboard-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-header-with-back {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dashboard-back-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.dashboard-back-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dashboard-back-btn svg {
    width: 18px;
    height: 18px;
}

.dashboard-count {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-left: auto;
}

.filtered-notes-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.note-meeting-icon {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Stats Row */
.dashboard-stats-row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.dashboard-stat-card {
    flex: 1;
    min-width: 120px;
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-lg);
    text-align: center;
}

.dashboard-stat-card.clickable {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dashboard-stat-card.clickable:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.dashboard-stat-card.clickable:active {
    transform: translateY(0);
}

.dashboard-stat-card.stat-disabled {
    opacity: 0.5;
    cursor: default;
}

.dashboard-stat-card.stat-disabled:hover {
    background: var(--bg-secondary);
    transform: none;
}

.dashboard-stat-card .stat-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.dashboard-stat-card .stat-icon svg {
    width: 24px;
    height: 24px;
}

.dashboard-stat-card .stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.dashboard-stat-card .stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-1);
}

.dashboard-stat-card.stat-warning .stat-value {
    color: var(--color-orange);
}

.dashboard-stat-card.stat-warning .stat-icon {
    color: var(--color-orange);
}

/* Dashboard Sections */
.dashboard-section {
    margin-bottom: var(--space-6);
}

.dashboard-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-3) 0;
}

/* Progress Bar */
.dashboard-progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.dashboard-progress-bar .progress-fill {
    height: 100%;
    background: var(--accent-blue);
    opacity: 0.45;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.dashboard-progress-wrapper .progress-label {
    align-self: flex-end;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Progress List */
.dashboard-progress-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dashboard-progress-item {
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dashboard-progress-item:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

.dashboard-progress-item .progress-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.dashboard-progress-item .progress-item-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-progress-item .progress-item-icon svg {
    color: white;
}

.dashboard-progress-item .progress-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-progress-item .progress-item-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Deadline List */
.dashboard-deadline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-deadline-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dashboard-deadline-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border-default);
}

.dashboard-deadline-item .deadline-item-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-deadline-item .deadline-item-icon svg {
    color: white;
}

.dashboard-deadline-item .deadline-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.dashboard-deadline-item .deadline-item-date {
    font-size: var(--font-size-xs);
    color: var(--color-orange);
    font-weight: 500;
}

/* Recent List */
.dashboard-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-recent-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dashboard-recent-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border-default);
}

.dashboard-recent-item .recent-item-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-recent-item .recent-item-icon svg {
    color: white;
}

.dashboard-recent-item .recent-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.dashboard-recent-item .recent-item-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Notes Dashboard */
.dashboard-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-note-item {
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transform: translateY(0);
    transition: all var(--transition-fast);
}

.dashboard-note-item:hover {
    background: var(--bg-card);
    border-color: #4A90D9;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px) scale(1.005);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-note-item:hover {
        transform: none;
    }
}

.dashboard-note-item .note-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.dashboard-note-item .note-pinned-icon {
    width: 14px;
    height: 14px;
    color: var(--color-orange);
    flex-shrink: 0;
    margin-left: 6px;
}

.dashboard-note-item .note-item-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-note-item .note-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.dashboard-note-item .note-item-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.dashboard-note-item .note-item-location svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.dashboard-note-item .note-item-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-left: auto;
}

/* Dashboard Empty State */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
}

.dashboard-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.dashboard-empty-state p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ============================================================================ */
/* NOTES VIEW */
/* ============================================================================ */

.notes-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 16px 32px;
    background: var(--bg-primary);
}

.notes-page-header .page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

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

.notes-view-toggle {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-half);
}

.notes-page-content {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.notes-left-panel {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    overflow: hidden;
    transition: width var(--transition-normal);
    height: 100%;
    padding: 0 8px;
    border-right: 1px solid var(--border-light);
}

.notes-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-md);
    margin: 0 0 8px 0;
}

.notes-panel-header:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.notes-panel-header.active {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
}

.notes-panel-title {
    flex: 1;
}

.notes-filter-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 4px 0;
}

.notes-expand-all {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.notes-expand-all:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notes-expand-all svg {
    width: 16px;
    height: 16px;
}

.notes-total-count {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ============================================================================
   SMART FOLDERS
   ============================================================================ */

/* Smart folder filter items in sidebar */
.tasks-filter-item.smart-folder-filter .smart-folder-gear-icon {
    color: var(--text-tertiary);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tasks-filter-item.smart-folder-filter:hover .smart-folder-gear-icon {
    opacity: 1;
}

/* Smart Folder Modal Overlay */
.smart-folder-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: sfModalFadeIn 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes sfModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.smart-folder-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl);
    width: 520px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 1px solid var(--border-light);
    animation: sfModalSlideUp 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes sfModalSlideUp {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.smart-folder-modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border-light);
}

.smart-folder-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-base, 15px);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.smart-folder-modal-body {
    padding: 16px 24px;
    overflow: visible;
    flex: 1;
}

.smart-folder-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.smart-folder-name-row label {
    font-size: var(--font-size-sm, 13px);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.smart-folder-name-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    outline: none;
    transition: border-color var(--transition-fast);
}

.smart-folder-name-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-light, rgba(74, 144, 217, 0.12));
}

.smart-folder-match-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--font-size-sm, 13px);
    color: var(--text-secondary);
}

.smart-folder-select {
    padding: 4px 8px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    outline: none;
    cursor: pointer;
}

.smart-folder-select:focus {
    border-color: var(--accent-blue);
}

.smart-folder-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.smart-folder-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.smart-folder-filter-row .sf-type-select,
.smart-folder-filter-row .sf-operator-select {
    min-width: 100px;
}

.sf-value-container {
    flex: 1;
    min-width: 0;
}

.smart-folder-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    outline: none;
    box-sizing: border-box;
}

.smart-folder-input:focus {
    border-color: var(--accent-blue);
}

.sf-remove-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 6px);
    line-height: 1;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.sf-remove-btn:hover {
    background: var(--bg-hover);
    color: var(--error, #EF4444);
}

.smart-folder-add-filter-btn {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 500;
    text-align: left;
}

.smart-folder-add-filter-btn:hover {
    text-decoration: underline;
}

/* Tag picker (Apple Notes-style dropdown) */
.sf-tag-picker {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sf-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.sf-tag-pills:empty {
    margin-bottom: 0;
}

.sf-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    border-radius: 12px;
    background: var(--accent-blue-light, rgba(74, 144, 217, 0.12));
    color: var(--accent-blue);
    font-size: var(--font-size-xs, 12px);
    font-weight: 500;
    white-space: nowrap;
}

.sf-tag-pill .sf-tag-dot {
    width: 6px;
    height: 6px;
}

.sf-tag-pill-remove {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
}

.sf-tag-pill-remove:hover {
    opacity: 1;
}

.sf-tag-search-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    outline: none;
    box-sizing: border-box;
}

.sf-tag-search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-light, rgba(74, 144, 217, 0.12));
}

.sf-tag-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-dropdown);
    padding: 4px;
}

.sf-tag-dropdown.visible {
    display: block;
}

.sf-tag-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm, 13px);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sf-tag-dropdown-item:hover {
    background: var(--bg-hover);
}

.sf-tag-dropdown-item.selected {
    background: var(--accent-blue);
    color: #fff;
}

.sf-tag-dropdown-item.selected:hover {
    background: var(--accent-blue-dark, #357ABD);
}

.sf-tag-dropdown-item.selected .sf-tag-dot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.sf-tag-create-item {
    border-top: 1px solid var(--border-light);
    margin-top: 2px;
    padding-top: 8px;
    color: var(--accent-blue);
    font-weight: 500;
}

.sf-tag-create-item:hover {
    background: var(--accent-blue-light, rgba(74, 144, 217, 0.12));
}

.sf-tag-dropdown-empty {
    padding: 8px 10px;
    font-size: var(--font-size-xs, 12px);
    color: var(--text-tertiary);
    font-style: italic;
}

.sf-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Modal footer */
.smart-folder-modal-footer {
    padding: 12px 24px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-light);
}

.smart-folder-btn {
    padding: 6px 20px;
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 13px);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.smart-folder-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-medium);
}

.smart-folder-btn-cancel:hover {
    background: var(--bg-hover);
}

.smart-folder-btn-save {
    background: var(--accent-blue);
    color: #fff;
}

.smart-folder-btn-save:hover {
    background: var(--accent-blue-dark, #357ABD);
}

/* Smart folder context menu */
.smart-folder-context-menu {
    position: fixed;
    z-index: 1200;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-dropdown);
    padding: 4px;
    min-width: 140px;
}

.smart-folder-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm, 13px);
    color: var(--text-primary);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    transition: background var(--transition-fast);
}

.smart-folder-context-menu-item:hover {
    background: var(--bg-hover);
}

.smart-folder-context-menu-item.destructive {
    color: var(--error, #EF4444);
}

.smart-folder-context-menu-item.destructive:hover {
    background: rgba(239, 68, 68, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .smart-folder-modal-overlay,
    .smart-folder-modal {
        animation: none;
    }
}

.notes-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.notes-panel-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.notes-area-group {
    margin-bottom: var(--space-2);
}

.notes-area-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-area-group.collapsed .notes-area-list {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* Unfiled notes - flat list at bottom without folder wrapper */
.notes-unfiled-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.notes-area-group.collapsed .area-chevron {
    transform: rotate(-90deg);
}

.notes-area-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-radius: var(--radius-sm);
    margin: 0 4px;
}

.notes-area-header:hover {
    background: var(--bg-hover);
}

.notes-area-header .area-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-area-header .area-icon svg {
    color: white;
}

.notes-area-header .area-icon.no-area {
    background: var(--bg-tertiary);
}

.notes-area-header .area-icon.no-area svg {
    color: var(--text-tertiary);
}

.notes-area-header .area-icon.pinned-icon {
    background: var(--accent-blue-light);
}

.notes-area-header .area-icon.pinned-icon svg {
    color: var(--accent-blue);
}

.notes-area-header .area-name {
    flex: 1;
}

.notes-area-header .area-count {
    font-weight: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: var(--space-half) var(--space-1-5);
    border-radius: var(--radius-md);
}

/* Notes sidebar section header (Areas) */
.notes-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.notes-section-header .section-add-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.notes-section-header .section-add-btn:hover {
    background: var(--accent-blue);
    color: white;
}

/* Notes area delete button */
.notes-area-delete-btn {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-left: auto;
}

.notes-area-header:hover .notes-area-delete-btn {
    opacity: 1;
}

.notes-area-delete-btn:hover {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.notes-area-delete-btn svg {
    width: 12px;
    height: 12px;
}

.notes-panel-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px 6px 38px;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.notes-panel-item:hover,
.notes-panel-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.note-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.notes-panel-item:hover .note-icon,
.notes-panel-item.active .note-icon {
    color: var(--accent-blue);
}

.note-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-main-content {
    flex: 1;
    min-width: 0;
    padding: 16px 24px;
    overflow-y: auto;
    background: var(--bg-secondary);
    max-height: calc(100vh - 120px); /* Force scrollable area */
    scrollbar-width: none;
}

.notes-main-content::-webkit-scrollbar {
    display: none;
}

.notes-main-content .notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notes-main-content .notes-list.directory-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Smart Filters */
.notes-smart-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.notes-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

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

.notes-filter-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.notes-filter-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.notes-filter-item span {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.filter-count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    min-width: 20px;
    text-align: right;
}

.notes-filter-item.active .filter-count {
    color: var(--accent-blue);
}

/* Folders Section */
.notes-folders-section {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

.notes-folders-group {
    margin-bottom: var(--space-6);
}

.notes-folders-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.notes-folders-list {
    display: flex;
    flex-direction: column;
}

.notes-folder-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

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

.notes-folder-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    font-weight: 500;
}

.notes-folder-item .folder-arrow {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    width: 12px;
}

.notes-folder-item .folder-name {
    font-size: var(--font-size-sm);
    font-weight: inherit;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-folder-item .folder-count {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    min-width: 20px;
    text-align: right;
}

/* Notes Main Content - no header needed, it's at page level now */

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

.notes-view-toggle {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-half);
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
    color: var(--text-secondary);
}

.view-toggle-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.view-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Card View (default) */
.notes-list.notes-card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* List View */
.notes-list.notes-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.note-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.note-list-item:first-child {
    border-top: 1px solid var(--border-light);
}

.note-list-item:hover {
    background: var(--bg-hover);
}

.note-list-icon {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.note-list-icon svg {
    width: 100%;
    height: 100%;
}

.note-list-item-meeting .note-list-icon {
    color: #AF52DE;
}

.note-list-content {
    flex: 1;
    min-width: 0;
}

.note-list-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-list-pin {
    margin-right: var(--space-1);
}

.note-list-preview {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
}

.note-list-meta .note-area,
.note-list-meta .note-project {
    font-size: 12px;
    padding: 0;
}

.note-list-date {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.notes-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12);
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
}

/* Note Cards */
.note-card {
    position: relative;
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 1;
}

/* Staggered animation for note cards - only when view is switching */
.view-container.animating .note-card {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
}

.view-container.animating .note-card:nth-child(1) { animation-delay: 0ms; }
.view-container.animating .note-card:nth-child(2) { animation-delay: 50ms; }
.view-container.animating .note-card:nth-child(3) { animation-delay: 100ms; }
.view-container.animating .note-card:nth-child(4) { animation-delay: 150ms; }
.view-container.animating .note-card:nth-child(5) { animation-delay: 200ms; }
.view-container.animating .note-card:nth-child(6) { animation-delay: 250ms; }
.view-container.animating .note-card:nth-child(7) { animation-delay: 300ms; }
.view-container.animating .note-card:nth-child(8) { animation-delay: 350ms; }
.view-container.animating .note-card:nth-child(n+9) { animation-delay: 400ms; }

.note-card:hover,
.note-card:focus,
.note-card:focus-visible {
    background: var(--bg-card);
    border: 1px solid #4A90D9 !important;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px) scale(1.005);
    outline: none;
}

.note-card-meeting {
    border-left: 3px solid #AF52DE;
}

.note-pin-indicator {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--font-size-14);
}

.note-meeting-indicator {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 20px;
    height: 20px;
    color: #AF52DE;
}

.note-meeting-indicator svg {
    width: 100%;
    height: 100%;
}

.note-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    padding-right: var(--space-6);
}

.note-card-snippet {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.note-area,
.note-project {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.note-area svg,
.note-project svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.note-date {
    margin-left: auto;
}

/* ============================================================================ */
/* NOTE MODAL */
/* ============================================================================ */

.note-modal {
    display: none;
    position: fixed;
    background: var(--bg-card);
    z-index: 1002;
    flex-direction: column;
}

.note-modal.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.note-modal.fullscreen {
    left: 68px;
    right: 0;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    transform: none;
    transition: opacity var(--transition-smooth);
    box-shadow: none;
}

.note-modal.fullscreen.visible {
    transform: none;
}

/* Expanded mode - shows both left columns (main nav + notes panel) */
/* Position: 68px sidebar + 220px notes panel = 288px */
.note-modal.expanded {
    left: 288px;
    right: 0;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    max-width: none;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 1px solid var(--border-light);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--transition-smooth);
}

.note-modal.expanded.visible {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.note-modal-header {
    display: flex;
    align-items: flex-start;
    padding: var(--space-7) var(--space-7) var(--space-5);
    gap: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.note-modal.expanded .note-modal-header {
    padding-top: 36px;
}

.note-modal-title-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.note-modal-title {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
}

.note-modal-title:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

.note-modal-title br {
    display: none;
}

.note-modal-title * {
    display: inline;
}

.note-modal-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.note-modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Note Modal Content - Two Column Layout for Meeting Notes */
.note-modal-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.note-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    overflow-y: auto;
    min-height: 390px;
}

.note-modal.has-sidebar .note-modal-main {
    /* Main content shrinks when sidebar is visible */
}

/* Note Modal Sidebar (for meeting notes) */
.note-modal-sidebar {
    width: 280px;
    padding: var(--space-5);
    background: var(--bg-main);
    border-left: 1px solid var(--border-light);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: var(--space-5);
}

.note-modal.has-sidebar .note-modal-sidebar {
    display: flex;
}

.note-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.note-sidebar-label {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

/* Meeting Info in Sidebar */
.note-meeting-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.note-meeting-datetime {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* View Event Button in Sidebar */
.note-view-event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.note-view-event-btn:hover {
    background: var(--bg-hover);
    border-color: #357ABD;
    color: #357ABD;
}

.note-view-event-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Attendees in Sidebar */
.note-attendees-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.note-attendee {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

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

.note-attendee .attendee-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Context (Area/Project) in Sidebar */
.note-context-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.note-context-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.note-context-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-tertiary);
    flex-shrink: 0;
}

.note-editor {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    min-height: 300px;
    padding-bottom: 200px;
    outline: none;
}

/* Ensure there's always clickable space after content for cursor placement */
.note-editor::after {
    content: '';
    display: block;
    height: 150px;
    width: 100%;
}

.note-editor ul,
.note-editor ol {
    margin: 0.5em 0;
    padding-left: 30px;
}

.note-editor ul {
    list-style-type: disc;
}

.note-editor ul ul {
    list-style-type: circle;
}

.note-editor ul ul ul {
    list-style-type: square;
}

.note-editor ol {
    list-style-type: decimal;
}

.note-editor ol ol {
    list-style-type: lower-alpha;
}

.note-editor ol ol ol {
    list-style-type: lower-roman;
}

.note-editor ul ul,
.note-editor ul ol,
.note-editor ol ul,
.note-editor ol ol {
    margin: 0.25em 0;
}

.note-editor li {
    margin: 0.25em 0;
}

.note-editor blockquote {
    border-left: 3px solid var(--accent-blue);
    padding-left: 16px;
    margin: 12px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.note-editor h1,
.note-editor h2,
.note-editor h3 {
    font-weight: 600;
    margin: 16px 0 8px 0;
}

.note-editor h1 {
    font-size: 1.75em;
}

.note-editor h2 {
    font-size: 1.5em;
}

.note-editor h3 {
    font-size: 1.25em;
}

.note-editor hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 16px 0;
}

.note-editor:empty::before {
    content: 'Start writing...';
    color: var(--text-tertiary);
}

/* Hide bullets for list items containing checkboxes */
.note-editor li:has(input[type="checkbox"]) {
    list-style: none;
}

/* Table styling */
.note-editor table,
.task-note-editor table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
}

.note-editor table th,
.note-editor table td,
.task-note-editor table th,
.task-note-editor table td {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    border: 1px solid var(--border-light);
}

.note-editor table th,
.task-note-editor table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.note-editor table tbody tr:hover,
.task-note-editor table tbody tr:hover {
    background: var(--bg-hover);
}

/* Table header styling for all editors */
[contenteditable="true"] table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

/* Header row styling - first row when marked as header */
[contenteditable="true"] table.has-header-row tr:first-child td,
[contenteditable="true"] table.has-header-row tr:first-child th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

/* Header column styling - first cell in each row when marked as header */
[contenteditable="true"] table.has-header-column td:first-child,
[contenteditable="true"] table.has-header-column th:first-child {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

/* Checkbox styling - circular checkboxes */
.note-editor input[type="checkbox"],
.task-note-editor input[type="checkbox"],
#projectDescriptionEditor input[type="checkbox"],
#areaDescriptionEditor input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.note-editor input[type="checkbox"]:hover,
.task-note-editor input[type="checkbox"]:hover,
#projectDescriptionEditor input[type="checkbox"]:hover,
#areaDescriptionEditor input[type="checkbox"]:hover {
    border-color: var(--accent-blue);
}

.note-editor input[type="checkbox"]:checked,
.task-note-editor input[type="checkbox"]:checked,
#projectDescriptionEditor input[type="checkbox"]:checked,
#areaDescriptionEditor input[type="checkbox"]:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.note-editor input[type="checkbox"]:checked::after,
.task-note-editor input[type="checkbox"]:checked::after,
#projectDescriptionEditor input[type="checkbox"]:checked::after,
#areaDescriptionEditor input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.note-editor input[type="checkbox"]:disabled,
.task-note-editor input[type="checkbox"]:disabled,
#projectDescriptionEditor input[type="checkbox"]:disabled,
#areaDescriptionEditor input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Completed to-do items styling */
.note-editor li,
.task-note-editor li,
#projectDescriptionEditor li,
#areaDescriptionEditor li,
.daily-note-editor li,
.event-note-editor li {
    cursor: pointer;
}

/* Reduce todo list left padding so circle acts like a marker and text
   aligns visually with bullet list text. The inline style (padding-left: 24px)
   requires !important to override. */
.note-editor ul[style*="list-style: none"],
.task-note-editor ul[style*="list-style: none"],
#projectDescriptionEditor ul[style*="list-style: none"],
#areaDescriptionEditor ul[style*="list-style: none"],
.daily-note-editor ul[style*="list-style: none"],
.event-note-editor ul[style*="list-style: none"] {
    padding-left: 8px !important;
}

/* Style completed to-do items (starting with ●) */
.note-editor ul[style*="list-style: none"] li,
.task-note-editor ul[style*="list-style: none"] li,
#projectDescriptionEditor ul[style*="list-style: none"] li,
#areaDescriptionEditor ul[style*="list-style: none"] li,
.daily-note-editor ul[style*="list-style: none"] li,
.event-note-editor ul[style*="list-style: none"] li {
    display: flex;
    align-items: center;
    transition: opacity 0.15s ease, text-decoration 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .note-editor ul[style*="list-style: none"] li,
    .task-note-editor ul[style*="list-style: none"] li,
    #projectDescriptionEditor ul[style*="list-style: none"] li,
    #areaDescriptionEditor ul[style*="list-style: none"] li,
    .daily-note-editor ul[style*="list-style: none"] li,
    .event-note-editor ul[style*="list-style: none"] li {
        transition: none;
    }
}

/* Keep circle span fixed-width so wrapped text aligns after it.
   user-select:none prevents cursor from entering the span and
   inheriting its blue color when editing adjacent text. */
.note-editor ul[style*="list-style: none"] li > span:first-child,
.task-note-editor ul[style*="list-style: none"] li > span:first-child,
#projectDescriptionEditor ul[style*="list-style: none"] li > span:first-child,
#areaDescriptionEditor ul[style*="list-style: none"] li > span:first-child,
.daily-note-editor ul[style*="list-style: none"] li > span:first-child,
.event-note-editor ul[style*="list-style: none"] li > span:first-child {
    flex-shrink: 0;
    cursor: pointer;
    line-height: inherit;
    -webkit-user-select: none;
    user-select: none;
}

/* Completed to-do circle - blue outline with white gap */
.todo-completed {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    color: transparent !important;
}

.todo-completed::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    background: white;
}

.todo-completed::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-blue);
}

/* Strikethrough text for completed to-dos */
.todo-item-completed {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Don't strikethrough the circle or the gap space between icon and text */
.todo-item-completed .todo-completed,
.todo-item-completed .todo-gap {
    text-decoration: none;
}

/* Horizontal rule styling */
.note-editor hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 1.5em 0;
}

.note-modal.fullscreen .note-editor {
    min-height: unset;
    height: 100%;
}

.note-modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 28px;
    border-top: 1px solid var(--border-light);
}

.note-modal-footer .modal-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.note-modal-footer .modal-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.note-modal-footer .modal-action-btn.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.note-modal-footer .modal-action-btn svg {
    width: 18px;
    height: 18px;
}

.note-modal-footer .note-meta {
    order: -1;
    margin-right: auto;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Note modal delete button */
.note-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.note-delete-btn svg {
    width: 18px;
    height: 18px;
}

.note-delete-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* Note Dropdown (Area/Project selection) */
.note-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 2000;
}

.note-dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.note-dropdown-item:hover {
    background: var(--bg-hover);
}

.note-dropdown-item.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.note-dropdown-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.note-dropdown-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Note tags dropdown — reuses .dropdown-item inside .note-dropdown */
.note-tags-dropdown {
    padding: var(--space-1);
    min-width: 220px;
    max-width: 280px;
    max-height: calc(100vh - 100px);
}

.note-tags-dropdown .dropdown-item {
    margin: 0;
}

.dropdown-check {
    margin-left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.dropdown-check svg {
    width: 16px;
    height: 16px;
}

/* ============================================================================ */
/* ARCHIVE VIEW */
/* ============================================================================ */

.archive-group {
    margin-bottom: var(--space-6);
}

.archive-group-header {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.archive-group-tasks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.archive-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.archive-task-row:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
}

.archive-task-title {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    text-decoration: line-through;
}

.archive-restore-btn {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.archive-restore-btn:hover {
    background: var(--accent-blue);
    color: white;
}

/* ============================================================================ */
/* SETTINGS VIEW */
/* ============================================================================ */

.settings-view {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.settings-view h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-8);
}

.settings-section {
    margin-bottom: var(--space-8);
}

.settings-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.setting-item label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.setting-item select {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    cursor: pointer;
}

.setting-item select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Calendar timeline element styles are defined in the Today View section above */

/* Account Tab - Danger Zone Styling */
.danger-section {
    margin-top: var(--space-8);
}

.danger-heading {
    color: var(--color-danger);
    margin-bottom: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-light);
}

.danger-zone {
    background: rgba(211, 47, 47, 0.05);
    border: 1px solid rgba(211, 47, 47, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.danger-info {
    flex: 1;
}

.danger-info strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.danger-info p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Modal Backdrop for floating modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Password/Delete Confirmation Modal */
.password-modal {
    max-width: 400px;
    width: 90%;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.password-modal .modal-body p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.password-input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--bg-main);
    color: var(--text-primary);
}

.password-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

.password-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    min-height: 20px;
}

/* Spin animation for loading states */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ============================================================================ */
/* RESPONSIVE BREAKPOINTS */
/* ============================================================================ */

/* Compact (Mobile) */
@media (max-width: 768px) {
    .projects-list,
    .notes-list {
        grid-template-columns: 1fr;
    }

    .notes-page-layout {
        flex-direction: column;
    }

    .notes-left-panel {
        width: 100%;
        flex-direction: column;
        overflow-y: auto;
        gap: var(--space-4);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-light);
    }

    .notes-smart-filters {
        flex-direction: row;
        gap: var(--space-2);
    }

    .notes-folders-section {
        display: none;
    }

    .command-bar {
        width: 90vw;
    }

    .projects-directory,
    .notes-view,
    .settings-view {
        padding: 0;
    }

    /* Interactive components - mobile */
    .columns-2,
    .columns-3 {
        grid-template-columns: 1fr;
    }

    .picker-modal {
        width: 95%;
        max-height: 80vh;
    }

    .emoji-grid {
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    }

    .video-embed iframe,
    .web-embed iframe {
        height: 250px;
    }

    .media-upload-modal-content {
        width: 95%;
    }
}

/* Regular (Tablet) */
@media (min-width: 769px) and (max-width: 1023px) {
    .projects-list,
    .notes-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wide (Desktop) - default styles above */


/* ============================================================================ */
/* TASK QUICK ACTIONS (HOVER) */
/* ============================================================================ */

.task-quick-actions {
    gap: var(--space-2);
}

.task-row:hover .task-quick-actions {
    visibility: visible;
    opacity: 1;
}

.quick-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.quick-action-btn:hover {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================================================ */
/* MODAL FULLSCREEN */
/* ============================================================================ */

.task-modal.fullscreen,
.event-modal.fullscreen,
.project-modal.fullscreen {
    position: fixed;
    top: 0;
    left: 68px;
    right: 0;
    bottom: 0;
    width: calc(100vw - 68px);
    height: 100vh;
    max-width: calc(100vw - 68px);
    max-height: 100vh;
    border-radius: 0;
    transform: none;
}

.task-modal.fullscreen .modal-body,
.event-modal.fullscreen .event-modal-content,
.project-modal.fullscreen .project-modal-content {
    max-height: calc(100vh - 120px);
}

/* ============================================================================ */
/* TASK ANIMATE IN - uses @keyframes taskSlideIn defined earlier */
/* ============================================================================ */

.task-animate-in {
    animation: taskSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================ */
/* SLASH MENU & FORMAT TOOLBAR POSITIONING */
/* ============================================================================ */

.slash-menu,
.format-toolbar {
    z-index: 10001;
}

/* ============================================================================ */
/* QUICK ACTION DROPDOWN MENUS */
/* ============================================================================ */

.quick-action-dropdown {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    min-width: 220px;
    max-width: 280px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: var(--space-1-5);
    z-index: 10005;
    animation: dropdownSlideIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.dropdown-item:hover {
    background: var(--surface-hover);
}

.dropdown-item.selected {
    background: var(--accent-blue-light);
}

.dropdown-item.selected:hover {
    background: var(--accent-blue-hover);
}

.dropdown-item.selected .dropdown-label {
    color: var(--accent-blue);
}

.dropdown-item.selected .dropdown-icon {
    color: var(--accent-blue);
}

.dropdown-item:active {
    background: var(--surface-active);
    transform: scale(0.98);
}

.dropdown-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.dropdown-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.dropdown-label {
    flex: 1;
    font-size: var(--font-size-14);
    color: var(--text-primary);
    font-weight: 500;
}

.dropdown-hint {
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
    margin-left: auto;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* Tag color dot in dropdown */
.dropdown-icon.tag-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Tags dropdown: empty hint */
.dropdown-empty-hint {
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Tags dropdown: create tag section */
.dropdown-create-tag {
    padding: 8px;
}

.create-tag-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.create-tag-input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-family);
}

.create-tag-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-opacity-10);
}

.create-tag-btn {
    min-height: 32px;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: var(--accent-blue);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
    transition: opacity var(--transition-fast);
}

.create-tag-btn:hover {
    opacity: 0.9;
}

.create-tag-btn:disabled,
.create-tag-btn[aria-busy="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.create-tag-colors {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dropdown-create-tag .color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    /* 44px touch target via padding */
    padding: 8px;
    background-clip: content-box;
    box-sizing: content-box;
    transition: border-color var(--transition-fast);
}

.dropdown-create-tag .color-swatch.selected {
    border-color: var(--text-primary);
}

.dropdown-create-tag .color-swatch:hover {
    border-color: var(--text-secondary);
}

.dropdown-create-tag .color-swatch.selected:hover {
    border-color: var(--text-primary);
}

/* Tag toggle loading state */
.dropdown-item.tag-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Reduced motion for dropdown animations */
@media (prefers-reduced-motion: reduce) {
    .quick-action-dropdown {
        animation: none;
    }
    .task-quick-actions {
        transition: none;
    }
}

.dropdown-section-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-2-5) var(--space-3) 4px;
    margin-top: 4px;
}

.dropdown-custom-input {
    padding: 6px 10px;
}

.dropdown-custom-input:hover {
    background: transparent;
}

.duration-custom-input {
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-card);
    transition: all var(--transition-fast);
}

.duration-custom-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-opacity-10);
}

.duration-custom-input::placeholder {
    color: var(--text-tertiary);
}

/* Tags dropdown specific styles */
.tags-dropdown {
    min-width: 240px;
}

.dropdown-search {
    padding: var(--space-1);
    margin-bottom: 2px;
}

.dropdown-search-input {
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

.dropdown-search-input:focus {
    border-color: var(--accent-blue);
}

.dropdown-search-input::placeholder {
    color: var(--text-tertiary);
}

/* Date/Time Picker */
.datetime-picker {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    min-width: 280px;
    z-index: 10006;
    animation: dropdownSlideIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datetime-picker-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--surface-base);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-18);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.calendar-month-year {
    font-size: var(--font-size-14);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

.datetime-picker-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3-5);
}

.quick-select-buttons {
    display: flex;
    gap: var(--space-1-5);
    margin-bottom: 4px;
}

.quick-select-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    background: var(--surface-base);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-12);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-select-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
    margin-bottom: 4px;
}

.calendar-weekday {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    padding: var(--space-1);
    text-transform: uppercase;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
    margin-bottom: 12px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
    background: var(--surface-base);
    border: 1px solid transparent;
}

.calendar-day:not(.empty):hover {
    background: var(--surface-hover);
    border-color: var(--border-medium);
}

.calendar-day.empty {
    cursor: default;
    background: transparent;
}

.calendar-day.past {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.calendar-day.today {
    border-color: var(--accent-blue);
    font-weight: 600;
}

.calendar-day.selected {
    background: var(--accent-blue);
    color: white;
    font-weight: 600;
}

.calendar-day.selected:hover {
    background: #3A7BC8;
}

.datetime-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.datetime-label {
    font-size: var(--font-size-12);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.datetime-date-input,
.datetime-time-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    outline: none;
    transition: border-color var(--transition-fast);
    accent-color: var(--accent-blue);
}

.datetime-date-input:focus,
.datetime-time-input:focus {
    border-color: var(--accent-blue);
}

/* Custom time picker (replaces native <input type="time"> for brand consistency) */

.custom-time-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    position: relative;
}

.custom-time-input:hover {
    border-color: var(--accent-blue);
}

.custom-time-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.custom-time-input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.custom-time-value {
    flex: 1;
    font-size: var(--font-size-14);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.custom-time-value.is-placeholder {
    color: var(--text-tertiary);
}

.custom-time-clear {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-16);
    cursor: pointer;
    padding: 4px 6px;
    margin: -4px -2px;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.custom-time-clear:hover {
    color: var(--text-secondary);
    background: var(--surface-hover);
}

.custom-time-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.custom-time-dropdown {
    display: flex;
    gap: 1px;
    background: var(--border-light);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    margin-top: var(--space-1);
    overflow: hidden;
    z-index: 10007;
    animation: dropdownSlideIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .custom-time-dropdown {
        animation: none;
    }
}

.time-col {
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-elevated);
    min-width: 56px;
    scrollbar-width: thin;
}

.time-col::-webkit-scrollbar {
    width: 4px;
}

.time-col::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.time-col-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: center;
    padding: 4px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    z-index: 1;
}

.time-option {
    padding: 10px 12px;
    text-align: center;
    font-size: var(--font-size-14);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.time-option:hover {
    background: var(--surface-hover);
}

.time-option.selected {
    background: var(--accent-blue);
    color: white;
    font-weight: 600;
}

.time-option.selected:hover {
    background: var(--accent-blue-dark);
}

.datetime-picker-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.datetime-btn {
    padding: var(--space-1-5) var(--space-3-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    outline: none;
}

.datetime-btn-cancel {
    background: transparent;
    color: var(--text-secondary);
}

.datetime-btn-cancel:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.datetime-btn-confirm {
    background: var(--accent-blue);
    color: white;
}

.datetime-btn-confirm:hover {
    background: #3A7BC8;
}

.datetime-btn-confirm:active {
    transform: scale(0.98);
}


/* Snackbar Notifications (bottom center, subtle) */
.snackbar-container {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    pointer-events: none;
}

.snackbar {
    background: #ffffff;
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: var(--space-3) var(--space-5);
    border-radius: 24px;
    font-family: var(--font-family);
    font-size: var(--font-size-14);
    line-height: 1.4;
    pointer-events: auto;
    white-space: nowrap;
    animation: snackbarSlideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.snackbar-text {
    color: var(--text-secondary);
}

.snackbar-accent {
    color: var(--accent-blue);
    font-weight: 500;
}

.snackbar-action-btn {
    margin-left: 10px;
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-blue);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.snackbar-action-btn:hover {
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.1));
}

.snackbar.hiding {
    animation: snackbarFadeOut 0.2s ease-out forwards;
}

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

@keyframes snackbarFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Ensure dragging elements dont obscure the time indicator */
.task-row.dragging,
.calendar-event.dragging,
.backlog-task-item.dragging,
.panel-task.dragging,
.day-task.dragging,
.timeline-task.dragging,
.timeline-unscheduled-task.dragging {
    z-index: 9999 !important;
}

/* Task row drag-ready - highlight captured by browser for drag image */
.task-row.drag-ready {
    background: rgba(59, 130, 246, 0.12) !important;
    border-radius: var(--radius-md);
}

/* Task row dragging - smooth fade out */
.task-row.dragging {
    opacity: 0.25 !important;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
}

/* Tasks shift smoothly when making room during drag */
body.is-dragging .task-row:not(.dragging) {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1),
                margin 0.2s cubic-bezier(0.2, 0, 0, 1),
                padding 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Drag handle for task rows */
.task-drag-handle {
    opacity: 0;
    cursor: grab;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: opacity 0.2s;
}

.task-row:hover .task-drag-handle {
    opacity: 1;
}

.task-drag-handle:active {
    cursor: grabbing;
}

/* Drop indicator line for task reordering - premium minimal design */
.task-row.drop-above::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 40px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-gradient-end));
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px var(--accent-blue-opacity-20), 0 0 2px var(--accent-blue);
    animation: dropIndicatorSlideIn 0.15s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.task-row.drop-above::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 36px;
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    z-index: 101;
    box-shadow: 0 0 6px var(--accent-blue-opacity-20);
    animation: dropIndicatorDotIn 0.15s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.task-row.drop-indicator-bottom::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 40px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-gradient-end));
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px var(--accent-blue-opacity-20), 0 0 2px var(--accent-blue);
    animation: dropIndicatorSlideIn 0.15s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.task-row.drop-indicator-bottom::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 36px;
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    z-index: 101;
    box-shadow: 0 0 6px var(--accent-blue-opacity-20);
    animation: dropIndicatorDotIn 0.15s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes dropIndicatorSlideIn {
    from {
        opacity: 0;
        transform: scaleX(0.3);
        transform-origin: left center;
    }
    to {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left center;
    }
}

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

/* Section highlight during drag - subtle and refined */
body.is-dragging .section-tasks,
body.is-dragging .unsectioned-drop-zone {
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

body.is-dragging .section-tasks.pointer-drop-highlight,
body.is-dragging .unsectioned-drop-zone.pointer-drop-highlight {
    background: var(--accent-blue-opacity-3);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--accent-blue-opacity-15);
}

body.is-dragging .projects-panel-item,
body.is-dragging .tasks-filter-item {
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

body.is-dragging .projects-panel-item.pointer-drop-highlight,
body.is-dragging .tasks-filter-item.pointer-drop-highlight {
    background: var(--accent-blue-opacity-3) !important;
    box-shadow: inset 0 0 0 2px var(--accent-blue-opacity-20) !important;
    border-radius: var(--radius-md) !important;
}

/* Column drag (kanban board column reordering) */
body.is-dragging-column {
    cursor: grabbing !important;
    user-select: none;
}

body.is-dragging-column * {
    cursor: grabbing !important;
}

.column-drag-preview {
    font-size: var(--font-size-14);
    color: var(--text-primary);
    white-space: nowrap;
}

/* Column drop target during drag */
.board-column.column-dragging {
    opacity: 0.4;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================================
   ICON & COLOR PICKER
   ============================================================================ */

.icon-color-picker {
    /* position set by inline styles - DO NOT override */
    background: var(--bg-main) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 16px !important;
    width: 320px !important;
    max-height: 450px !important;
    overflow-y: auto !important;
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.picker-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.picker-close-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.picker-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.picker-close-btn svg {
    width: 14px;
    height: 14px;
}

.picker-section {
    margin-bottom: 16px;
}

.picker-section:last-child {
    margin-bottom: 0;
}

.picker-section-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-1);
}

.icon-picker-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

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

.icon-picker-item.selected {
    background: var(--accent-blue-opacity-15);
    color: var(--accent-blue);
}

.icon-picker-item svg {
    width: 16px;
    height: 16px;
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-1-5);
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

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

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

.color-swatch svg {
    width: 12px;
    height: 12px;
    color: white;
}

.color-swatch.custom-color-btn {
    background: var(--bg-secondary);
    border: 2px dashed var(--border-medium);
}

.color-swatch.custom-color-btn:hover {
    border-color: var(--text-tertiary);
}

.color-swatch.custom-color-btn svg {
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
}

/* Make icon triggers clickable */
.icon-picker-trigger {
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.icon-picker-trigger:hover {
    transform: scale(1.05);
}

/* ============================================================================
   TASK ROLLOVER MODAL
   ============================================================================ */

.rollover-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10002;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.rollover-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.rollover-dialog {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rollover-overlay.visible .rollover-dialog {
    transform: scale(1);
}

.rollover-header {
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.rollover-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: var(--accent-blue-light);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rollover-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
}

.rollover-title {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.rollover-subtitle {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.rollover-task-list {
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    flex: 1;
    min-height: 0;
}

.rollover-task-row {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--bg-secondary);
}

.rollover-task-title {
    display: block;
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rollover-task-date {
    display: block;
    font-size: var(--font-size-12);
    color: var(--color-danger);
    margin-bottom: var(--space-2);
}

.rollover-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rollover-option-btn {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-12);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-light);
    background: var(--bg-main);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.rollover-option-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.rollover-option-btn.selected {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.rollover-date-input {
    display: block;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-12);
    color: var(--text-primary);
    background: var(--bg-main);
}

.rollover-footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.rollover-dismiss-btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.rollover-dismiss-btn:hover {
    background: var(--bg-hover);
}

.rollover-apply-btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    color: white;
    transition: all var(--transition-fast);
}

.rollover-apply-btn:hover {
    background: var(--accent-blue-dark);
    border-color: var(--accent-blue-dark);
}

/* ============================================================================
   CONFIRMATION DIALOG
   ============================================================================ */

.confirm-dialog-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.confirm-dialog-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.confirm-dialog {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-dialog-overlay.visible .confirm-dialog {
    transform: scale(1);
}

.confirm-dialog-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: var(--color-danger-light);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-dialog-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-danger);
}

.confirm-dialog-icon.danger {
    background: var(--color-danger-light);
}

.confirm-dialog-icon.danger svg {
    color: var(--color-danger);
}

.confirm-dialog-icon.archive {
    background: var(--accent-green-light);
}

.confirm-dialog-icon.archive svg {
    color: var(--accent-green);
}

.confirm-dialog-title {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.confirm-dialog-message {
    font-size: var(--font-size-14);
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.confirm-dialog-btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 100px;
}

.confirm-dialog-btn.cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.confirm-dialog-btn.cancel:hover {
    background: var(--bg-hover);
}

.confirm-dialog-btn.danger {
    background: var(--color-danger);
    border: 1px solid var(--color-danger);
    color: white;
}

.confirm-dialog-btn.danger:hover {
    background: #C82333;
    border-color: #C82333;
}

.confirm-dialog-btn.archive {
    background: var(--accent-green);
    border: 1px solid var(--accent-green);
    color: white;
}

.confirm-dialog-btn.archive:hover {
    background: #059669;
    border-color: #059669;
}

.confirm-dialog-btn.default {
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    color: white;
}

.confirm-dialog-btn.default:hover {
    background: var(--accent-blue-dark);
    border-color: var(--accent-blue-dark);
}

.confirm-dialog-btn.secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
}

.confirm-dialog-btn.secondary:hover {
    background: var(--accent-blue-light);
}

.confirm-dialog-icon.default {
    background: var(--accent-blue-light);
}

.confirm-dialog-icon.default svg {
    color: var(--accent-blue);
}

/* ============================================================================
   DELETE BUTTONS
   ============================================================================ */

/* Danger button in task modal footer */
.modal-action-btn.danger-btn {
    color: var(--text-tertiary);
}

.modal-action-btn.danger-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* Delete button for project/area sidebars */
.entity-delete-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.entity-delete-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.entity-delete-btn svg {
    width: 16px;
    height: 16px;
}

/* Archive button for project/area sidebars */
.entity-archive-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: 8px;
}

.entity-archive-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.entity-archive-btn svg {
    width: 16px;
    height: 16px;
}

/* Archive button for note modal footer */
.note-archive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.note-archive-btn svg {
    width: 18px;
    height: 18px;
}

.note-archive-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

/* ============================================================================
   ARCHIVE VIEW (Things 3 Style)
   ============================================================================ */

/* Filter Pills */
.archive-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.archive-filter-pills {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
}

.filter-pill {
    padding: var(--space-1-5) var(--space-3-5);
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}

.filter-pill:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.filter-pill.active {
    background: var(--accent-blue);
    color: white;
}

/* Archive Stats */
.archive-stats {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-bottom: 16px;
    padding-left: 2px;
}

/* Search Bar */
.archive-search-bar {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 16px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.archive-search-bar.visible {
    display: flex;
}

.archive-search-bar .archive-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-14);
    outline: none;
    padding: 4px 0;
}

.archive-search-clear {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.archive-search-clear:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.archive-search-clear svg {
    width: 14px;
    height: 14px;
}

/* No Results */
.archive-no-results {
    padding: var(--space-10);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

/* Load More Button */
.archive-load-more {
    display: flex;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
}

.archive-load-more-btn {
    padding: var(--space-3) var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.archive-load-more-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

/* Archive Item - each item on its own row */
.archive-item {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    cursor: pointer;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.archive-item:hover {
    background: var(--bg-hover);
}


.archive-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
}

/* Checkbox (Task) - Square to match active pages */
.archive-item-checkbox {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    background: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.archive-item-checkbox svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 2.5;
}

.archive-item-checkbox:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--accent-blue-opacity-20);
}

.archive-item-checkbox:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
    outline: none;
}

/* Selected item row (Shift/Cmd+Click to select) */
.archive-item.selected {
    background: var(--accent-blue-opacity-8);
}

.archive-item.selected .archive-item-row {
    background: transparent;
}

/* Archive item type differentiation - left border */
.archive-item {
    border-left: 3px solid transparent;
}

.archive-item-project {
    border-left-color: #E6993E;
}

.archive-item-note {
    border-left-color: transparent;
}

/* Archive type labels */
.archive-type-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

.archive-type-project {
    color: #E6993E;
}

.archive-type-note {
    color: var(--text-tertiary);
}

/* Bulk Action Toolbar */
.archive-bulk-toolbar {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: var(--space-3) var(--space-5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-bulk-toolbar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.bulk-toolbar-content {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.bulk-toolbar-count {
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--text-primary);
}

.bulk-toolbar-actions {
    display: flex;
    gap: var(--space-2);
}

.bulk-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.bulk-action-btn svg {
    width: 16px;
    height: 16px;
}

.bulk-restore-btn {
    background: var(--accent-blue);
    color: white;
}

.bulk-restore-btn:hover {
    background: #3a7bc8;
}

.bulk-restore-btn svg {
    stroke: white;
}

.bulk-cancel-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.bulk-cancel-btn:hover {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

/* Delete button - danger styling */
.bulk-delete-btn {
    background: var(--color-danger);
    color: white;
}

.bulk-delete-btn:hover {
    background: #c82333;
}

.bulk-delete-btn svg {
    stroke: white;
}

/* Icon (Project/Note) */
.archive-item-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.archive-item-icon svg {
    width: 14px;
    height: 14px;
    color: white;
}

.archive-item-icon-note {
    background: var(--bg-tertiary);
}

.archive-item-icon-note svg {
    color: var(--text-tertiary);
}

/* Time */
.archive-item-time {
    width: 100px;
    flex-shrink: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--accent-blue);
}

/* Content */
.archive-item-content {
    flex: 1;
    min-width: 0;
}

.archive-item-title {
    font-family: var(--font-family);
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-item-preview {
    font-family: var(--font-family);
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta (Project/Area pills) */
.archive-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.archive-meta-project {
    font-family: var(--font-family);
    font-size: var(--font-size-12);
    color: var(--text-tertiary);
}

.archive-meta-area {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.archive-meta-notes {
    font-size: var(--font-size-12);
    opacity: 0.6;
}

/* Group Items container - force vertical stacking */
.archive-group-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Force all children to be full-width blocks */
.archive-group-items > * {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* ============================================================================
   DAILY NOTE FEATURE
   ============================================================================ */

/* Toggle buttons for Tasks | Daily Note */
.today-view-toggle {
    display: flex;
    gap: 0;
    background: #E8ECF0;
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

.view-toggle-btn {
    padding: var(--space-1-5) var(--space-4);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-spring);
    white-space: nowrap;
    min-width: 80px;
    line-height: 1;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.03);
}

.view-toggle-btn:active {
    transform: scale(0.97);
}

.view-toggle-btn.active {
    background: #FFFFFF;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(0, 0, 0, 0.03);
}

.view-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-blue);
    border-radius: var(--radius-sm);
}

/* Daily note view */
.daily-note-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    overflow-y: auto;
    background: var(--bg-card);
}

.daily-note-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.daily-note-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.daily-note-meta {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.daily-note-editor-container {
    flex: 1;
    position: relative;
}

.daily-note-editor {
    width: 100%;
    min-height: 400px;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    outline: none;
}

.daily-note-editor ul,
.daily-note-editor ol {
    margin: 0.5em 0;
    padding-left: 30px;
}

.daily-note-editor ul {
    list-style-type: disc;
}

.daily-note-editor ul ul {
    list-style-type: circle;
}

.daily-note-editor ul ul ul {
    list-style-type: square;
}

.daily-note-editor ol {
    list-style-type: decimal;
}

.daily-note-editor ol ol {
    list-style-type: lower-alpha;
}

.daily-note-editor ol ol ol {
    list-style-type: lower-roman;
}

.daily-note-editor ul ul,
.daily-note-editor ul ol,
.daily-note-editor ol ul,
.daily-note-editor ol ol {
    margin: 0.25em 0;
}

.daily-note-editor li {
    margin: 0.25em 0;
}

.daily-note-editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: var(--text-tertiary);
    font-style: italic;
}

.daily-note-editor:focus[placeholder]:empty:before {
    content: '';
}

/* Daily notes section in notes panel */
.notes-daily-group .area-icon.daily-icon {
    background: var(--accent-blue-light);
}

.notes-daily-group .area-icon.daily-icon svg {
    color: var(--accent-blue);
}

/* Date display formatting for daily note items */
.notes-daily-group .note-item-name {
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   SETTINGS PAGE
   ============================================================================ */

/* Settings view wrapper */
.settings-view {
    padding: 0;
}

.settings-tabs,
.settings-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Settings page header - matches other pages */
.settings-page-header {
    padding: 0 0 16px 0;
    background: var(--bg-primary);
}

.settings-page-header .page-title,
.settings-view h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
}

/* Settings tabs navigation */
.settings-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0;
}

.settings-tab-btn {
    padding: var(--space-2-5) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    margin-bottom: -1px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.settings-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
}

.settings-tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    font-weight: 600;
    background: transparent;
}

/* Tab content */
.settings-tab-content {
    display: none;
}

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

/* Settings sections */
.settings-section {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    overflow: visible;
}

.settings-section h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.settings-section p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

/* Individual setting item */
.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.setting-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

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

.setting-info {
    flex: 1;
}

.setting-info label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.setting-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.setting-control {
    margin-left: var(--space-4);
}

.setting-control select {
    min-width: 200px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}

.setting-control select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.setting-control input[type="time"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    outline: none;
    transition: border-color var(--transition-fast);
}

.setting-control input[type="time"]:focus {
    border-color: var(--accent-blue);
}

.setting-control input[type="time"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-light);
    transition: var(--transition-normal);
    border-radius: var(--radius-full);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: var(--transition-normal);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-blue);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Coming soon badge */
.coming-soon-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.coming-soon-badge.large {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
}

/* Working hours control - toggle inline with time inputs */
.working-hours-control {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.working-hours-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.working-hours-inputs span {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ============================================
   EMAIL FORWARDING SECTION
   ============================================ */

.email-forwarding-section {
    /* Inherits from .settings-section */
}

.email-forwarding-container {
    margin-top: var(--space-4);
}

.email-forwarding-loading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.email-forwarding-loading .loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.email-forwarding-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.email-address-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.email-address-input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: text;
    user-select: all;
}

.email-address-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.email-forwarding-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.email-forwarding-toggle .toggle-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.email-forwarding-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.email-forwarding-stats .stat-item {
    display: flex;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.email-forwarding-stats .stat-label {
    color: var(--text-secondary);
}

.email-forwarding-stats .stat-value {
    color: var(--text-primary);
    font-weight: 500;
}

.email-forwarding-actions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.email-forwarding-error {
    padding: var(--space-4);
    background: var(--error-bg);
    border-radius: var(--radius-md);
    text-align: center;
}

.email-forwarding-error p {
    color: var(--error-color);
    margin: 0 0 var(--space-3) 0;
}

/* ── Tag Management ─────────────────────────────────────────────── */

.tag-management-section {
    /* Inherits from .settings-section */
}

/* Section header with count badge */
.tag-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.tag-section-header h3 {
    margin: 0;
}

.tag-chip-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* Chip grid */
.tag-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.4;
}

.tag-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tag-chip:active {
    transform: scale(0.95);
}

.tag-chip:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.tag-chip-label {
    white-space: nowrap;
}

/* Filter input (shown when 30+ tags) */
.tag-filter-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: var(--space-3);
}

.tag-filter-input:focus {
    border-color: var(--accent-blue);
}

.tag-filter-input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -1px;
}

.tag-filter-input::placeholder {
    color: var(--text-tertiary);
}

/* ── Tag Detail Modal ───────────────────────────────────────────── */

.tag-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 200ms ease;
    opacity: 0;
    pointer-events: none;
}

.tag-detail-overlay.visible {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    pointer-events: auto;
}

.tag-detail-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: var(--space-6);
    transform: scale(0.95);
    transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tag-detail-overlay.visible .tag-detail-modal {
    transform: scale(1);
}

.tag-detail-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tag-detail-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.tag-detail-close:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Modal header: preview chip + usage */
.tag-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-right: var(--space-6);
}

.tag-detail-preview {
    pointer-events: none;
    font-size: 14px;
}

.tag-detail-usage {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Modal body: name input + color swatches */
.tag-detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.tag-detail-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
}

.tag-detail-name-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.tag-detail-name-input:focus {
    border-color: var(--accent-blue);
}

.tag-detail-name-input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -1px;
}

.tag-detail-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

/* Modal footer: delete + done */
.tag-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.tag-detail-delete-btn {
    background: none;
    border: none;
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.tag-detail-delete-btn:hover {
    background: rgba(239, 68, 68, 0.08);
}

.tag-detail-delete-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.tag-detail-done-btn {
    min-width: 80px;
}

/* Delete confirmation (inline in modal) */
.tag-detail-delete-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    text-align: center;
}

.tag-detail-delete-message {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
}

.tag-detail-delete-actions {
    display: flex;
    gap: var(--space-3);
}

/* Shared styles: swatches */
.tag-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    padding: 3px;
    margin: -3px;
    box-sizing: content-box;
    background-clip: content-box;
}

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

.tag-swatch-selected {
    border-color: var(--text-primary);
}

.tag-swatch:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Create form */
.tag-create-separator {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-4) 0;
}

.tag-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tag-create-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tag-create-preview-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-create-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.tag-create-input:focus {
    border-color: var(--accent-blue);
}

.tag-create-input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -1px;
}

.tag-create-input::placeholder {
    color: var(--text-tertiary);
}

.tag-create-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-left: calc(14px + var(--space-3));
}

/* Empty state */
.tag-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--text-secondary);
    text-align: center;
}

.tag-empty-state svg {
    opacity: 0.4;
}

.tag-empty-state p {
    margin: 0;
    font-size: 14px;
}

.tag-empty-state .tag-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Dark mode overrides */
[data-theme="dark"] .tag-chip:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tag-detail-modal {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .tag-detail-overlay.visible {
    background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .tag-detail-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tag-detail-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Mobile: bottom sheet modal */
@media (max-width: 480px) {
    .tag-detail-overlay {
        align-items: flex-end;
    }

    .tag-detail-modal {
        max-width: 100%;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }

    .tag-detail-footer {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .tag-detail-done-btn,
    .tag-detail-delete-btn {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tag-chip,
    .tag-swatch,
    .tag-detail-overlay,
    .tag-detail-modal,
    .tag-detail-close,
    .tag-detail-delete-btn {
        transition: none;
    }
    .tag-chip:hover {
        transform: none;
    }
    .tag-chip:active {
        transform: none;
    }
    .tag-swatch:hover {
        transform: none;
    }
    .tag-detail-modal {
        transform: scale(1);
    }
}

/* Small button variant */
.btn-small {
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--font-size-sm) !important;
    gap: var(--space-2);
}

.btn-small svg {
    flex-shrink: 0;
}

/* Icon button */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.btn-icon:active {
    transform: scale(0.95);
}

/* ============================================
   BILLING TAB STYLES
   ============================================ */

/* Current Plan Card */
.billing-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.billing-plan-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.billing-plan-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.billing-plan-icon svg {
    width: 20px;
    height: 20px;
}

.billing-plan-icon.plan-plus {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.billing-plan-icon.plan-pro {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.billing-plan-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.billing-plan-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.billing-plan-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.billing-plan-badge {
    padding: var(--space-0-5) var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.billing-plan-badge.plan-plus {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.billing-plan-badge.plan-pro {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.billing-plan-badge.plan-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.billing-plan-description {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.billing-plan-actions {
    display: flex;
    gap: var(--space-3);
}

.billing-period-info {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* Usage Meters */
.usage-meters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.usage-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.usage-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.usage-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.usage-fill.warning {
    background: #f59e0b;
}

.usage-fill.danger {
    background: var(--color-danger);
}

/* Billing Interval Toggle */
.billing-toggle-container {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    width: fit-content;
    margin-bottom: var(--space-5);
}

.billing-interval-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.billing-interval-btn:hover {
    color: var(--text-primary);
}

.billing-interval-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.save-badge {
    padding: var(--space-1) var(--space-3);
    background: #10b981;
    color: white;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Plans Grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.plan-card:hover {
    border-color: var(--border-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.plan-card.featured {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.plan-card.current {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.plan-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-3);
    background: var(--accent-blue);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.plan-header {
    margin-bottom: var(--space-4);
}

.plan-header h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.price-amount {
    font-size: var(--font-size-2xl, 28px);
    font-weight: 700;
    color: var(--text-primary);
}

.price-period {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.plan-billed-text {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    min-height: 16px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    flex: 1;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.plan-features li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.check-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #10b981;
    stroke-width: 2.5;
    fill: none;
    margin-top: 2px;
}

.plan-btn {
    width: 100%;
    justify-content: center;
}

.plan-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--bg-tertiary);
    border-color: transparent;
    color: var(--text-tertiary);
}

.billing-promo-hint {
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* Upgrade Prompt Modal */
.upgrade-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-prompt-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.upgrade-prompt-content {
    position: relative;
    max-width: 380px;
    width: 90%;
    padding: var(--space-6);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

.upgrade-prompt-icon {
    margin-bottom: var(--space-3);
}

.upgrade-prompt-icon svg {
    width: 40px;
    height: 40px;
}

.upgrade-prompt-content h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.upgrade-prompt-content p {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.upgrade-prompt-content p:last-of-type {
    margin-bottom: 0;
}

.upgrade-prompt-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.upgrade-prompt-actions button {
    flex: 1;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

/* Dark Mode Billing Styles */
[data-theme="dark"] .billing-plan-card {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .billing-plan-icon {
    background: var(--bg-secondary);
}

[data-theme="dark"] .plan-card {
    background: var(--bg-secondary);
}

[data-theme="dark"] .plan-card:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .billing-interval-btn.active {
    background: var(--bg-secondary);
}

[data-theme="dark"] .upgrade-prompt-content {
    background: var(--bg-secondary);
}

/* ============================================
   CALENDARS TAB STYLES
   ============================================ */

/* Connected accounts list */
.connected-accounts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.connected-account-card {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-secondary);
}

.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-email {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.account-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Account warning states */
.connected-account-card.needs-reconnect {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.account-warning {
    color: var(--color-warning) !important;
    font-weight: 500;
}

/* Shared base: sizing, font, and transition only — no color */
.reconnect-account-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}

/* Warning state: account needs reconnect — amber to match the card warning */
.btn-small.reconnect-account-btn {
    background: var(--color-warning);
    color: white;
}

.btn-small.reconnect-account-btn:hover {
    background: var(--color-warning-hover);
    color: white;
}

.btn-small.reconnect-account-btn:focus-visible,
.btn-text-small.reconnect-account-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

/* Healthy state: account is connected — ghost/text style, low prominence */
.btn-text-small.reconnect-account-btn {
    padding: var(--space-1) var(--space-2);
    background: none;
    color: var(--text-tertiary);
}

.btn-text-small.reconnect-account-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-account-btn {
        transition: none;
    }
}

/* Calendar list */
.calendars-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.calendar-account-group {
    margin-bottom: var(--space-4);
}

.calendar-account-header {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
}

.calendar-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.calendar-list-item:hover {
    background: var(--bg-secondary);
}

.calendar-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.calendar-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.calendar-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-access-badge {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Calendar-area mappings */
.calendar-area-mapping-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.calendar-area-mapping-item:hover {
    background: var(--bg-secondary);
}

.calendar-area-mapping-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.calendar-area-mapping-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-area-mapping-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.calendar-area-select {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 120px;
}

.calendar-area-select:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* Empty state for calendars */
.empty-state-small {
    padding: var(--space-4);
    text-align: center;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.empty-state-small p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Add account button with icon */
#addGoogleAccountBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

#addGoogleAccountBtn svg {
    flex-shrink: 0;
}

/* Navigation items list */
#navItemsList {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-ultra-light);
    cursor: move;
    transition: all 0.2s;
}

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

.nav-item:hover {
    background: var(--bg-secondary);
}

.nav-item.dragging {
    opacity: 0.5;
    background: var(--accent-blue-light);
}

.drag-handle {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.nav-item-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Keyboard shortcuts table */
.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.shortcuts-table thead {
    background: var(--bg-secondary);
}

.shortcuts-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shortcuts-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-ultra-light);
    font-size: 14px;
    color: var(--text-primary);
}

.shortcuts-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* Shortcut key button */
.shortcut-key-btn {
    padding: var(--space-1-5) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.shortcut-key-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.shortcut-key-btn.capturing {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    animation: pulse 1s infinite;
}

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

/* Reset shortcut button */
.reset-shortcut-btn {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.reset-shortcut-btn:hover {
    color: var(--accent-blue);
}

/* Coming soon section */
.coming-soon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    text-align: center;
}

.coming-soon-icon {
    width: 64px;
    height: 64px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
}

.coming-soon-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.coming-soon-section p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
    margin-bottom: var(--space-4);
}

/* Buttons */
.btn-secondary {
    padding: var(--space-2-5) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.btn-text-small {
    padding: var(--space-1) var(--space-2);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-text-small:hover {
    color: var(--accent-blue);
}

/* ============================================================================
   AUTHENTICATION STYLES
   ============================================================================ */

.auth-container {
    display: none; /* Hidden by default, shown after auth check */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: var(--space-4);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
    padding: var(--space-8);
}

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

.auth-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.auth-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.auth-field input {
    padding: var(--space-3) var(--space-3-5);
    font-size: 15px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(53, 122, 189, 0.15);
}

.auth-field input::placeholder {
    color: var(--text-tertiary);
}

.auth-error {
    font-size: 13px;
    color: var(--color-error);
    min-height: 20px;
    text-align: center;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.4);
}

.auth-btn-primary {
    background: var(--accent-blue);
    color: white;
}

.auth-btn-primary:hover {
    background: var(--accent-blue-dark);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.auth-btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.auth-btn-google {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.auth-btn-google:hover {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

.auth-btn-apple {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.auth-btn-apple:hover {
    background: #1a1a1a;
}

.auth-btn-apple:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.5);
}

[data-theme="dark"] .auth-btn-apple {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

[data-theme="dark"] .auth-btn-apple:hover {
    background: #e8e8e8;
}

.auth-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-btn-loading .spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.auth-btn-loading .spinner circle {
    stroke-dasharray: 30 70;
    stroke-linecap: round;
}

/* Uses @keyframes spin defined earlier */

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-tertiary);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-switch {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

.auth-switch a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

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

.auth-field-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.auth-forgot-link {
    font-size: 13px;
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}

.auth-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.auth-message-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(53, 122, 189, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-message-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent-blue);
}

/* Loading overlay for auth */
.auth-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.auth-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================================================
   USER MENU (Sidebar)
   ============================================================================ */

.sidebar-user {
    margin-top: auto;
    padding: var(--space-2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-user-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.sidebar-user-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.sidebar-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    line-height: 1;
    justify-content: center;
    background: var(--accent-blue);
    color: white;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
}

.sidebar-user-avatar svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-version {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
}

.sidebar-user-menu {
    position: absolute;
    bottom: 100%;
    left: 100%;
    margin-left: var(--space-2);
    margin-bottom: var(--space-2);
    width: 240px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-secondary);
}

.user-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-menu-avatar svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

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

.user-menu-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-divider {
    height: 1px;
    background: var(--border-light);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}

.user-menu-item:hover {
    background: var(--bg-secondary);
}

.user-menu-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-secondary);
}

.user-menu-item:hover svg {
    color: var(--accent-blue);
}

/* User Menu Workspace Section */
.user-menu-workspace-section {
    padding: var(--space-2) var(--space-4);
}

.user-menu-workspace-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.user-menu-workspace-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.user-menu-workspace-btn:hover {
    border-color: var(--border-medium);
}

.user-menu-workspace-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-workspace-dropdown {
    margin-top: var(--space-2);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.user-menu-workspace-list {
    max-height: 150px;
    overflow-y: auto;
}

.user-menu-workspace-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.user-menu-workspace-item:hover {
    background: var(--bg-secondary);
}

.user-menu-workspace-item.active {
    background: rgba(53, 122, 189, 0.1);
    color: var(--accent-blue);
}

.user-menu-workspace-item svg {
    margin-left: auto;
    width: 14px;
    height: 14px;
}

.user-menu-workspace-divider {
    height: 1px;
    background: var(--border-light);
}

.user-menu-workspace-create {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--accent-blue);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.user-menu-workspace-create:hover {
    background: var(--bg-secondary);
}

/* ============================================================================
   WORKSPACE SWITCHER (Legacy - Hidden)
   ============================================================================ */

.workspace-switcher {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    position: relative;
}

.workspace-switcher-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.workspace-switcher-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

.workspace-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--accent-blue);
    color: white;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workspace-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    stroke-width: 2;
    transition: transform 0.2s;
}

.workspace-switcher-btn.open .workspace-chevron {
    transform: rotate(180deg);
}

.workspace-dropdown {
    position: fixed;
    top: 60px;
    left: 76px;
    width: 240px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    overflow: hidden;
}

[data-theme="dark"] .workspace-dropdown {
    background: #1e1e1e;
}

.workspace-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

.workspace-list {
    max-height: 200px;
    overflow-y: auto;
}

.workspace-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.workspace-dropdown-item:hover {
    background: var(--bg-secondary);
}

.workspace-dropdown-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.workspace-dropdown-item.active {
    background: rgba(53, 122, 189, 0.1);
}

.workspace-dropdown-item .workspace-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.workspace-dropdown-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-secondary);
}

.workspace-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) 0;
}

.workspace-create-btn {
    color: var(--accent-blue) !important;
}

.workspace-create-btn svg {
    color: var(--accent-blue) !important;
}

/* ============================================================================
   CREATE WORKSPACE MODAL
   ============================================================================ */

.create-workspace-modal {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--space-4);
    pointer-events: none;
}

.create-workspace-content {
    width: 100%;
    max-width: 400px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

[data-theme="dark"] .create-workspace-content {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .create-workspace-content {
        background: var(--bg-secondary);
        border-color: var(--border-medium);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

.create-workspace-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.create-workspace-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
}

.create-workspace-field {
    margin-bottom: var(--space-5);
}

.create-workspace-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1-5);
}

.create-workspace-field input {
    width: 100%;
    padding: var(--space-3) var(--space-3-5);
    font-size: 15px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.create-workspace-field input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(53, 122, 189, 0.15);
}

.create-workspace-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Duplicate .btn-primary definition removed - consolidated definition exists at line 9855 */

/* ============================================================================
   TEAM SETTINGS TAB
   ============================================================================ */

.section-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.section-description strong {
    color: var(--text-primary);
}

/* Workspace Name Edit */
.workspace-name-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.workspace-name-editable {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
    min-width: 80px;
    max-width: 100%;
}

.workspace-name-editable:not(.readonly):hover {
    background: var(--bg-secondary);
    cursor: text;
}

.workspace-name-editable:focus {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

.workspace-name-editable.readonly {
    cursor: default;
}

.workspace-name-edit-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.workspace-name-header:hover .workspace-name-edit-btn {
    opacity: 1;
}

.workspace-name-edit-btn:hover,
.workspace-name-edit-btn:focus-visible {
    color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.1);
}

.workspace-name-edit-btn:focus-visible {
    opacity: 1;
}

/* Team Members List */
.team-members-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.team-member-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.team-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

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

.team-member-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.team-member-email {
    font-size: 12px;
    color: var(--text-secondary);
}

.team-member-role {
    font-size: 12px;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-transform: capitalize;
}

.team-member-role.owner {
    background: rgba(53, 122, 189, 0.1);
    color: var(--accent-blue);
}

.team-member-role.admin {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.team-member-item {
    position: relative;
    padding-right: 48px;
}

.remove-member-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    z-index: 1;
}

.team-member-item:hover .remove-member-btn {
    opacity: 1;
}

.remove-member-btn:hover {
    color: var(--red);
    background: rgba(239, 68, 68, 0.1);
}

/* Invite Form */
.invite-form {
    display: flex;
    gap: var(--space-2);
}

.invite-input {
    flex: 1;
    padding: var(--space-2-5) var(--space-3);
    font-size: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.invite-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(53, 122, 189, 0.15);
}

.invite-error {
    font-size: 13px;
    color: var(--color-error);
    margin-top: var(--space-2);
    min-height: 20px;
}

.invite-success {
    font-size: 13px;
    color: var(--color-success, #22c55e);
    margin-top: var(--space-2);
}

/* Pending Invitations */
.pending-invitations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pending-invite-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.pending-invite-email {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.pending-invite-status {
    font-size: 12px;
    color: var(--text-tertiary);
}

.pending-invite-actions {
    display: flex;
    gap: var(--space-2);
}

.pending-invite-actions button {
    padding: var(--space-1) var(--space-2);
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.resend-invite-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.resend-invite-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.cancel-invite-btn {
    background: none;
    color: var(--text-secondary);
}

.cancel-invite-btn:hover {
    color: var(--color-error);
}

/* Support Info Section */
.support-info-section {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.support-info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
}

.support-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.support-info-label {
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.support-info-value {
    color: var(--text-primary);
    user-select: all;
    text-align: right;
    word-break: break-all;
}

#copySupportInfoBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#copySupportInfoBtn svg {
    flex-shrink: 0;
}

/* ============================================================================
   TASK ASSIGNMENT UI
   ============================================================================ */

/* Assignee Dropdown */
.assignee-dropdown {
    position: fixed;
    width: min(240px, calc(100vw - 32px));
    max-height: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    z-index: 10005;
    overflow: hidden;
    display: none;
}

.assignee-dropdown.visible {
    display: block;
}

.assignee-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.assignee-list {
    max-height: 250px;
    overflow-y: auto;
}

.assignee-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.assignee-item:hover {
    background: var(--bg-secondary);
}

.assignee-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.assignee-item.selected {
    background: rgba(53, 122, 189, 0.1);
}

.assignee-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.assignee-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignee-item-check {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.assignee-item.unassigned .assignee-item-avatar {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* Active state for assign button */
.modal-action-btn[data-action="assign"].has-assignee {
    color: var(--accent-blue);
    background: rgba(53, 122, 189, 0.1);
}

/* Assignee badge on task cards */
.task-assignee-badge {
    display: inline-flex;
    align-items: center;
    cursor: default;
}

.task-assignee-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.meta-assignee-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
}

/* Task row assignee badge */
.task-meta-badge.meta-assignee {
    display: inline-flex;
    align-items: center;
    background: none;
    padding: 0;
    cursor: default;
}

.task-meta-badge.meta-assignee .badge-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Task row subtask badge */
.task-meta-badge.meta-subtasks {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--text-tertiary);
}

.task-meta-badge.meta-subtasks svg {
    width: 12px;
    height: 12px;
}

/* ============================================================================
   @MENTION SYSTEM
   ============================================================================ */

/* Mention dropdown */
.mention-dropdown {
    position: fixed;
    width: min(280px, calc(100vw - 32px));
    max-height: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10001;
    overflow: hidden;
    display: none;
}

.mention-dropdown.visible {
    display: block;
}

.mention-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.mention-list {
    max-height: 250px;
    overflow-y: auto;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.mention-item:hover {
    background: var(--bg-secondary);
}

.mention-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.mention-item.selected {
    background: rgba(53, 122, 189, 0.1);
}

.mention-item.no-results {
    color: var(--text-tertiary);
    cursor: default;
}

.mention-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.mention-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.mention-item-email {
    font-size: 11px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* Inline mention span in editors */
.mention {
    display: inline;
    background: rgba(53, 122, 189, 0.12);
    color: var(--accent-blue);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    user-select: all;
}

/* Mention access banner — shown when mentioned user lacks access */
.mention-access-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: rgba(74, 144, 217, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    animation: mentionBannerFadeIn 0.2s ease;
}

.mention-access-banner.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mention-access-banner .banner-message {
    flex: 1;
    min-width: 0;
}

.mention-access-banner .banner-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.mention-access-banner .banner-actions button {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity var(--transition-fast);
}

.mention-access-banner .banner-actions button:hover {
    opacity: 0.85;
}

.mention-access-banner .share-btn {
    background: var(--accent-blue);
    color: white;
}

.mention-access-banner .skip-btn {
    background: transparent;
    color: var(--text-tertiary);
}

@keyframes mentionBannerFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mention:hover {
    background: rgba(53, 122, 189, 0.2);
}

/* ============================================================================
   NOTIFICATION SYSTEM
   ============================================================================ */

/* Notification Bell */
/* ============================================================================
   NOTIFICATION PREFERENCES (Settings tab)
   ============================================================================ */

.notif-always-on {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.notif-type-matrix {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notif-matrix-header {
    display: grid;
    grid-template-columns: 1fr 72px 72px 72px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.notif-matrix-header .notif-matrix-col {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.notif-matrix-row {
    display: grid;
    grid-template-columns: 1fr 72px 72px 72px;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-light);
}

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

.notif-matrix-label {
    font-size: 13px;
    color: var(--text-primary);
}

.notif-matrix-col {
    display: flex;
    justify-content: center;
}

.notif-category {
    margin-bottom: 16px;
}

.notif-category:last-child {
    margin-bottom: 0;
}

.notif-category-header {
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--border-light);
}

.notif-category-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notif-category-desc {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

fieldset.notif-category {
    border: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

.toggle-switch-sm {
    width: 36px;
    height: 20px;
}

.toggle-switch-sm .toggle-slider {
    width: 36px;
    height: 20px;
}

.toggle-switch-sm .toggle-slider::before {
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
}

.toggle-switch-sm input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.notif-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-time-range input[type="time"] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.notif-time-separator {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Notification bell/dropdown removed — notifications live in inbox activity panel */

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */

/* Loading spinner */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Uses @keyframes spin defined earlier */

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error state */
.error-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(229, 62, 62, 0.1);
    border: 1px solid rgba(229, 62, 62, 0.2);
    border-radius: var(--radius-md);
    color: var(--accent-red);
    font-size: 13px;
}

.error-message svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Update banner — floating toast pill */
.update-banner {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background: rgba(30, 30, 50, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Avenir Next', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    z-index: 10000;
    opacity: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    pointer-events: none;
}

.update-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.update-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4A90D9;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(74, 144, 217, 0.5);
}

.update-banner-message {
    flex: 0 1 auto;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.update-banner-action {
    background: rgba(74, 144, 217, 0.18);
    color: #6CB0F0;
    border: 1px solid rgba(74, 144, 217, 0.25);
    border-radius: 100px;
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.update-banner-action:hover {
    background: rgba(74, 144, 217, 0.28);
    border-color: rgba(74, 144, 217, 0.4);
}

.update-banner-action:active {
    background: rgba(74, 144, 217, 0.35);
}

.update-banner-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: var(--space-3);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.update-banner-dismiss:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}

.update-banner-dismiss:active {
    background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .update-banner {
        transition: opacity 0.15s;
        transform: translateX(-50%);
    }
    .update-banner.visible {
        transform: translateX(-50%);
    }
}

/* Preview environment indicator */
.preview-indicator {
    position: fixed;
    bottom: 12px;
    left: 12px;
    background: #F59E0B;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    z-index: 10001;
    pointer-events: none;
    letter-spacing: 0.04em;
    font-family: 'SF Mono', 'Menlo', monospace;
}

/* Offline indicator */
.offline-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-orange);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.offline-indicator.visible {
    opacity: 1;
    pointer-events: auto;
}

.offline-indicator svg {
    width: 16px;
    height: 16px;
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Disabled state for dropdowns during loading */
.dropdown-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Loading overlay for workspace switching and major operations */
.loading-overlay {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

button.is-loading {
    cursor: wait;
    opacity: 0.7;
}

/* ============================================================================
   EVENT MODAL DELETE BUTTON
   ============================================================================ */

.event-modal-delete {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.event-modal-delete:hover {
    background: rgba(229, 62, 62, 0.1);
    color: var(--accent-red);
}

.event-modal-delete svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   CREATE EVENT MODAL - Enhanced
   ============================================================================ */

.create-event-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.create-event-modal.visible {
    display: flex;
}

.create-event-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-medium);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.2s ease;
}

.create-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}

.create-event-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.google-calendar-icon {
    flex-shrink: 0;
}

.create-event-header-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.create-event-title-row {
    padding: var(--space-4) var(--space-5) var(--space-2);
}

.create-event-title {
    width: 100%;
    font-size: 22px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 0;
}

.create-event-title:focus {
    outline: none;
}

.create-event-title::placeholder {
    color: var(--text-tertiary);
}

.create-event-body {
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.create-event-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.create-event-section:first-child {
    padding-top: 0;
    align-items: flex-start;
}

.create-event-section:first-child .create-event-section-icon {
    margin-top: var(--space-2);
}

.create-event-section-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}


.create-event-section-content {
    flex: 1;
    min-width: 0;
}

.create-event-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.create-event-datetime input {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.create-event-datetime input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.create-event-datetime span {
    color: var(--text-secondary);
}

.create-event-duration-presets {
    display: flex;
    gap: 8px;
}

.create-event-duration-presets button {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.create-event-duration-presets button:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.create-event-duration-presets button.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.create-event-duration-presets button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent-blue);
}

.create-event-input {
    width: 100%;
    padding: var(--space-2) 0;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.create-event-input:focus {
    outline: none;
    border-bottom-color: var(--accent-blue);
    box-shadow: 0 1px 0 0 var(--accent-blue);
}

.create-event-input::placeholder {
    color: var(--text-tertiary);
}

/* Location input */
.location-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-input-wrapper .create-event-input {
    flex: 1;
}


/* Apple MapKit location search results */
.location-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.location-search-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.location-search-result-item {
    padding: 12px;
    min-height: 44px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.1s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-search-result-item:last-child {
    border-bottom: none;
}

.location-search-result-item:hover,
.location-search-result-item.highlighted {
    background: var(--bg-hover);
}

.location-search-result-item.location-search-no-results {
    color: var(--text-secondary);
    font-size: 13px;
    cursor: default;
    font-style: italic;
}

.location-search-result-item.location-search-no-results:hover {
    background: transparent;
}

.location-search-result-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-search-result-address {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle switch */
.create-event-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.create-event-toggle input {
    display: none;
}

/* Create event toggle - override generic toggle-slider styles */
.create-event-toggle .toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/* Remove the generic ::before circle */
.create-event-toggle .toggle-slider::before {
    display: none;
}

/* Use ::after for the toggle knob */
.create-event-toggle .toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.create-event-toggle input:checked + .toggle-slider {
    background: var(--accent-blue);
}

.create-event-toggle input:checked + .toggle-slider::after {
    transform: translateX(16px);
}

.toggle-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Toggle on/off label states - default: show OFF label, hide ON label */
.create-event-toggle .toggle-label-on {
    display: none !important;
    color: var(--accent-blue);
    font-weight: 500;
}

.create-event-toggle .toggle-label-off {
    display: inline !important;
}

/* Meet toggle section enabled state - swap label visibility */
#meetToggleSection.meet-enabled .toggle-label-off {
    display: none !important;
}

#meetToggleSection.meet-enabled .toggle-label-on {
    display: inline !important;
}

#meetToggleSection.meet-enabled .meet-icon {
    color: var(--accent-blue);
}

/* Attendees */
.create-event-attendees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.create-event-attendees:empty {
    display: none;
    margin-bottom: 0;
}

.attendee-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.attendee-chip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.attendee-chip-remove {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    border-radius: 50%;
}

.attendee-chip-remove:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-danger);
}

.attendee-chip-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent-blue);
}

/* Rich text description */
.create-event-description {
    min-height: 80px;
    padding: 8px 0;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.create-event-description:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
}

.create-event-description:focus {
    outline: none;
}

.create-event-description ul,
.create-event-description ol {
    margin: 4px 0;
    padding-left: 20px;
}

.create-event-description ol {
    list-style-type: decimal;
}

.create-event-description ol ol,
.create-event-description ol li ol,
.create-event-description ol li > ol {
    list-style-type: lower-alpha !important;
}

.create-event-description ol ol ol,
.create-event-description ol li ol li ol,
.create-event-description ol li > ol li > ol {
    list-style-type: lower-roman !important;
}

.create-event-description li {
    margin: 2px 0;
}

.create-event-description li > ul,
.create-event-description li > ol {
    margin-top: 2px;
    margin-bottom: 0;
}

.create-event-section-description {
    align-items: flex-start;
}

.create-event-section-description .create-event-section-icon {
    padding-top: 10px;
}

.create-event-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}

/* ============================================================================
   ACCESSIBILITY - Reduced Motion
   Respects user preference to minimize animations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential feedback animations but make them instant */
    .snackbar,
    .modal,
    .dropdown,
    .tooltip {
        transition: opacity 0.01ms !important;
    }

    /* Disable decorative animations */
    .loading-spinner,
    .pulse-animation,
    .bounce-animation {
        animation: none !important;
    }

    /* Ensure focus states are still visible without animation */
    *:focus-visible {
        outline: 2px solid var(--accent-blue) !important;
        outline-offset: 2px !important;
        transition: none !important;
    }
}

/* ============================================================================
   RICH TEXT EDITOR ENHANCEMENTS
   Comprehensive styling for all new editor components
   ============================================================================ */

/* Slash Menu Categories */
.slash-menu-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    padding: 8px 12px 4px;
    margin-top: 8px;
}

.slash-menu-category:first-child {
    margin-top: 0;
}

/* Table Context Menu */
.table-context-menu {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 10000;
    padding: 4px 0;
}

.table-context-menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.table-context-menu-item:hover,
.table-context-menu-item.selected {
    background: var(--accent-blue-light);
}

.table-context-menu-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.table-context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* ==================================================================
   RICH TEXT EDITOR - TOGGLE BLOCKS
   ================================================================== */
.toggle-block {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin: 12px 0;
    overflow: hidden;
}

.toggle-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
}

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

.toggle-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s ease;
}

.toggle-block[data-collapsed="true"] .toggle-icon {
    transform: rotate(-90deg);
}

.toggle-block[data-collapsed="true"] .toggle-content {
    display: none;
}

.toggle-content {
    padding: 12px;
    border-top: 1px solid var(--border-light);
}

/* Toggle heading span */
.toggle-header span[contenteditable="true"] {
    flex: 1;
    outline: none;
    font-weight: 500;
    min-width: 50px;
}

/* Toggle heading placeholder */
.toggle-header span[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Toggle block selection state */
.toggle-block.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Callout selection state */
.callout.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Code block selection state */
.code-block.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ==================================================================
   RICH TEXT EDITOR - CALLOUT BLOCKS
   ================================================================== */
.callout {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
    border-left: 4px solid;
}

.callout-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.callout-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

.callout-content {
    flex: 1;
}

.callout-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.callout-info .callout-icon svg {
    stroke: #3b82f6;
}

.callout-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.callout-warning .callout-icon svg {
    stroke: #f59e0b;
}

.callout-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.callout-success .callout-icon svg {
    stroke: #10b981;
}

.callout-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.callout-error .callout-icon svg {
    stroke: #ef4444;
}

/* ==================================================================
   RICH TEXT EDITOR - CODE BLOCKS
   ================================================================== */
.code-block,
.mermaid-block {
    margin: 12px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.code-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    gap: 8px;
}

.code-language-select {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    margin-right: auto; /* Push buttons to the right */
}

.code-copy-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-copy-btn:hover {
    background: var(--bg-hover);
}

.code-delete-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 4px;
}

.code-delete-btn:hover {
    background: var(--accent-red, #ef4444);
    border-color: var(--accent-red, #ef4444);
    color: white;
}

.code-block pre,
.mermaid-block pre {
    margin: 0;
    padding: 16px;
    background: #0d1117;
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
}

.code-block code,
.mermaid-block code {
    display: block;
    color: #e6edf3;
}

/* Image Blocks */
.editor-image {
    position: relative;
    margin: var(--space-5) 0;
    max-width: 100%;
    display: inline-block;
}

.editor-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease;
}

.editor-image img:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.editor-image figcaption {
    margin-top: var(--space-2);
    padding: 0 4px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.editor-image figcaption:empty::before {
    content: 'Add a caption...';
    color: var(--text-tertiary);
    font-style: italic;
}

.editor-image figcaption:focus {
    outline: none;
    color: var(--text-primary);
}

/* File Attachments */
.file-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin: 12px 0;
    background: var(--bg-primary);
    transition: all 0.15s ease;
    cursor: pointer;
}

.file-attachment:hover {
    border-color: var(--border-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.file-attachment-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    border-radius: 8px;
}

.file-attachment-icon svg {
    width: 20px;
    height: 20px;
}

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

.file-attachment-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 3px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-attachment-size {
    font-size: 12px;
    color: var(--text-tertiary);
}

.file-attachment-download {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.file-attachment-download:hover {
    background: var(--accent-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==================================================================
   RICH TEXT EDITOR - MEDIA BLOCK SELECTION & DELETE
   ================================================================== */

/* Selected state for media blocks */
.editor-image.media-selected,
.video-embed.media-selected,
.web-embed.media-selected,
.file-attachment.media-selected,
.link-card.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(53, 122, 189, 0.1);
}

/* Delete media: Use right-click menu or select + Delete key */

/* Context menu for media blocks */
.media-context-menu {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 160px;
    z-index: 10000;
    display: none;
}

.media-context-menu.show {
    display: block;
}

.media-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.media-context-menu-item:hover {
    background: var(--bg-hover);
}

.media-context-menu-item.danger {
    color: rgb(220, 38, 38);
}

.media-context-menu-item.danger:hover {
    background: rgba(220, 38, 38, 0.1);
}

.media-context-menu-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ==================================================================
   RICH TEXT EDITOR - BLOCK HANDLES
   ================================================================== */

.block-handle {
    position: absolute;
    left: -48px;
    top: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1000;
    pointer-events: auto;
}

/* Show on block hover, handle hover, or selection */
.editor-block:hover > .block-handle,
.editor-block.selected > .block-handle,
.block-handle:hover {
    opacity: 1;
}

/* Keep visible while hovering over handle or its buttons */
.block-handle:hover,
.block-handle-drag:hover,
.block-handle-delete:hover {
    opacity: 1 !important;
}

.block-handle-drag,
.block-handle-delete {
    width: 20px;
    height: 20px;
    padding: 2px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.block-handle-drag:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: grab;
}

.block-handle-drag:active {
    cursor: grabbing;
}

.block-handle-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Delete button visible on block hover alongside drag handle */
.block-handle-delete {
    display: flex;
}

/* Dragging state */
.editor-block.dragging {
    opacity: 0.4;
}

/* Drop indicator line (Notion-style) */
.block-drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-blue);
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 1001;
}

.block-drop-indicator.visible {
    opacity: 1;
}

/* Indicator endpoints */
.block-drop-indicator::before,
.block-drop-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--accent-blue);
    border-radius: 50%;
    transform: translateY(-50%);
}

.block-drop-indicator::before {
    left: -3px;
}

.block-drop-indicator::after {
    right: -3px;
}

/* Custom drag preview */
.block-drag-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: var(--shadow-dropdown);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 10001;
}

.block-drag-preview .preview-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
}

.block-drag-preview .preview-text {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================================================================
   RICH TEXT EDITOR - MEDIA RESIZE CONTROLS
   ================================================================== */

.editor-image,
.video-embed,
.web-embed {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Link card for non-embeddable sites */
.link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin: 8px 0;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.link-card:hover {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.link-card-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 8px;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    border-radius: 6px;
}

.link-card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.link-card-domain {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.link-card-url {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-card-button {
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    user-select: none;
}

.link-card:hover .link-card-button {
    background: var(--accent-blue-dark);
}

/* Resizing state - show blue outline */
.editor-image.resizing,
.video-embed.resizing,
.web-embed.resizing {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

/* Resize handles - 4 corners */
.media-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid var(--accent-blue);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Position handles at each corner */
.media-resize-handle-nw {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.media-resize-handle-ne {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.media-resize-handle-sw {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.media-resize-handle-se {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}

/* Show handles on hover */
.editor-image:hover .media-resize-handle,
.video-embed:hover .media-resize-handle,
.web-embed:hover .media-resize-handle,
.media-resize-handle:hover {
    opacity: 1;
}

/* Enlarge on hover for better feedback */
.media-resize-handle:hover {
    transform: scale(1.3);
    background: var(--accent-blue);
    border-color: white;
}

/* Video & Web Embeds */
.video-embed,
.web-embed {
    margin: var(--space-5) 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

.video-embed:hover,
.web-embed:hover {
    border-color: var(--border-medium);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.video-embed iframe,
.web-embed iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
    background: var(--bg-secondary);
}

/* Click overlay for video/web embeds - captures right-click for context menu */
.media-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
    background: transparent;
}

/* When activated (double-clicked), allow iframe interaction */
.video-embed.media-active .media-click-overlay,
.web-embed.media-active .media-click-overlay {
    pointer-events: none;
}

/* Column Layouts */
.columns-layout {
    display: grid;
    gap: 16px;
    margin: 16px 0;
}

.columns-2 {
    grid-template-columns: 1fr 1fr;
}

.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.columns-layout .column {
    padding: 12px;
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    min-height: 80px;
}

/* Tabs */
.tabs-block {
    margin: 16px 0;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.tabs-header {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.tab-button {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tab-button:last-child {
    border-right: none;
}

.tab-button:hover {
    background: var(--bg-hover);
}

.tab-button.active {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tabs-content {
    position: relative;
}

.tab-pane {
    display: none;
    padding: 16px;
}

.tab-pane.active {
    display: block;
}

/* Table of Contents */
.toc-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
}

.toc-block h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin: 6px 0;
}

.toc-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.toc-link:hover {
    color: var(--accent-blue-dark);
    text-decoration: underline;
}

/* Math Equations */
.math-inline {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: var(--text-primary);
    background: rgba(var(--accent-blue-rgb, 59, 130, 246), 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.math-block {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align: center;
    padding: 16px;
    margin: 16px 0;
    background: rgba(var(--accent-blue-rgb, 59, 130, 246), 0.05);
    border: 1px solid var(--border-light);
    border-radius: 6px;
}

/* Mentions */
.mention {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mention-task {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mention-project {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.mention:hover {
    filter: brightness(0.95);
}

/* ==================================================================
   RICH TEXT EDITOR - MEDIA UPLOAD MODALS
   ================================================================== */
.media-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.media-upload-modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.media-upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.media-upload-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.media-upload-modal-body {
    padding: var(--space-5);
}

.modal-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.upload-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.upload-tab {
    flex: 1;
    padding: var(--space-1-5) var(--space-3);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.upload-tab:hover {
    background: var(--bg-hover);
}

.upload-tab:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.upload-tab.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

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

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

.upload-dropzone {
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-dropzone:hover {
    border-color: var(--accent-blue);
    background: rgba(var(--accent-blue-rgb, 59, 130, 246), 0.05);
}

.upload-dropzone svg {
    width: 48px;
    height: 48px;
    stroke: var(--text-tertiary);
    fill: none;
    stroke-width: 2;
    margin: 0 auto 12px;
}

.upload-dropzone p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.url-input {
    width: 100%;
    padding: var(--space-2-5) var(--space-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-14);
    color: var(--text-primary);
    background: var(--bg-primary);
    margin-bottom: 12px;
}

.url-input:focus {
    outline: none;
    outline-offset: 2px;
    border-color: var(--accent-blue);
}

/* Duplicate .btn-primary definition removed - consolidated definition exists at line 9855 */

/* ==================================================================
   RICH TEXT EDITOR - PICKER MODALS
   ================================================================== */
.picker-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    width: 90%;
    max-width: 400px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.picker-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.picker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.picker-modal-header h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.picker-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.picker-search:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.picker-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.picker-item {
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-size-14);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.picker-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.picker-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Template Pickers */
.template-picker {
    max-width: 600px;
    max-height: 70vh;
}

.template-picker .picker-modal-body {
    max-height: calc(70vh - 120px); /* Account for header and padding */
    overflow-y: auto;
}

.template-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.template-item,
.table-template-item {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.template-item:hover,
.table-template-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.template-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.template-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--text-secondary);
}

.template-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.template-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.template-item:hover .template-icon svg,
.table-template-item:hover .template-icon svg {
    stroke: var(--accent-blue);
}

/* Emoji Picker */
.emoji-categories {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
}

.emoji-category {
    background: transparent;
    border: none;
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    opacity: 0.5;
}

.emoji-category:hover {
    background: var(--bg-hover);
    opacity: 1;
}

.emoji-category.active {
    background: var(--bg-secondary);
    opacity: 1;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.emoji-item:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

/* Template Picker */
.template-grid {
    display: grid;
    gap: 12px;
}

.template-item,
.table-template-item {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.template-item:hover,
.table-template-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.template-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.template-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 14px;
}

.template-desc {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ============================================================================
   DARK MODE OVERRIDES
   Comprehensive overrides for elements with hardcoded light colors
   ============================================================================ */

/* Helper to apply to both explicit dark theme and system preference */
[data-theme="dark"],
:root:not([data-theme="light"]) {
    /* Only apply system preference overrides when prefers-color-scheme is dark */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* System dark mode - same overrides as explicit dark theme */
    }
}

/* Planner - Today Calendar / Timeline Panel */
[data-theme="dark"] .today-calendar,
[data-theme="dark"] .timeline-header {
    background: var(--bg-secondary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .today-calendar,
    :root:not([data-theme="light"]) .timeline-header {
        background: var(--bg-secondary) !important;
    }
}

/* Planner - Toggle buttons container */
[data-theme="dark"] .planner-scope-toggle,
[data-theme="dark"] .today-view-toggle {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .planner-scope-toggle,
    :root:not([data-theme="light"]) .today-view-toggle {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
    }
}

/* Toggle buttons - active state */
[data-theme="dark"] .scope-toggle-btn.active,
[data-theme="dark"] .view-toggle-btn.active,
[data-theme="dark"] .tasks-filter-btn.active {
    background: var(--bg-elevated) !important;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scope-toggle-btn.active,
    :root:not([data-theme="light"]) .view-toggle-btn.active,
    :root:not([data-theme="light"]) .tasks-filter-btn.active {
        background: var(--bg-elevated) !important;
        color: var(--text-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

/* Toggle button hover */
[data-theme="dark"] .scope-toggle-btn:hover:not(.active),
[data-theme="dark"] .view-toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scope-toggle-btn:hover:not(.active),
    :root:not([data-theme="light"]) .view-toggle-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Tasks View - Main content area */
[data-theme="dark"] .tasks-main-content {
    background: var(--bg-main);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-main-content {
        background: var(--bg-main);
    }
}

/* Task rows in all-tasks view */
[data-theme="dark"] .all-tasks-row {
    background: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme="dark"] .all-tasks-row:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .all-tasks-row {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
    :root:not([data-theme="light"]) .all-tasks-row:hover {
        background: var(--bg-elevated);
        border-color: var(--border-medium);
    }
}

/* Dashboard stat cards */
[data-theme="dark"] .dashboard-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .dashboard-stat-card.clickable:hover {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border-light);
    }
    :root:not([data-theme="light"]) .dashboard-stat-card.clickable:hover {
        background: var(--bg-elevated);
    }
}

/* Week view columns - base styles now use var(--bg-card) */
/* Keep elevated background for today column in dark mode */
[data-theme="dark"] .week-day-column.is-today,
[data-theme="dark"] .day-column.is-today {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-day-column.is-today,
    :root:not([data-theme="light"]) .day-column.is-today {
        background: var(--bg-elevated);
    }
}

/* Timeline events */
[data-theme="dark"] .timeline-event,
[data-theme="dark"] .calendar-event-item {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-event,
    :root:not([data-theme="light"]) .calendar-event-item {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }
}

/* Sidebar panels */
[data-theme="dark"] .directory-panel,
[data-theme="dark"] .tasks-sidebar,
[data-theme="dark"] .notes-sidebar,
[data-theme="dark"] .projects-sidebar {
    background: var(--bg-sidebar);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .directory-panel,
    :root:not([data-theme="light"]) .tasks-sidebar,
    :root:not([data-theme="light"]) .notes-sidebar,
    :root:not([data-theme="light"]) .projects-sidebar {
        background: var(--bg-sidebar);
    }
}

/* Sidebar section styling in dark mode */
[data-theme="dark"] .tasks-panel-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .notes-section-header {
    background: rgba(255, 255, 255, 0.02);
    border-top: none;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-panel-section {
        background: rgba(255, 255, 255, 0.02);
        border-radius: var(--radius-md);
    }

    :root:not([data-theme="light"]) .notes-section-header {
        background: rgba(255, 255, 255, 0.02);
        border-top: none;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
}

/* Account and member cards in dark mode */
[data-theme="dark"] .connected-account-card,
[data-theme="dark"] .team-member-item,
[data-theme="dark"] .pending-invite-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-light);
}

[data-theme="dark"] .connected-account-card:hover,
[data-theme="dark"] .team-member-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .connected-account-card.needs-reconnect {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-warning);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .connected-account-card,
    :root:not([data-theme="light"]) .team-member-item,
    :root:not([data-theme="light"]) .pending-invite-item {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--border-light);
    }

    :root:not([data-theme="light"]) .connected-account-card:hover,
    :root:not([data-theme="light"]) .team-member-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    :root:not([data-theme="light"]) .connected-account-card.needs-reconnect {
        background: rgba(245, 158, 11, 0.1);
        border-color: var(--color-warning);
    }
}

/* Support info grid in dark mode */
[data-theme="dark"] .support-info-grid {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .support-info-grid {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-light);
    }
}

/* Input fields and controls in dark mode */
[data-theme="dark"] .setting-control select,
[data-theme="dark"] .setting-control input[type="time"],
[data-theme="dark"] .setting-control input[type="text"],
[data-theme="dark"] .setting-control input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
}

[data-theme="dark"] .setting-control select:focus,
[data-theme="dark"] .setting-control input[type="time"]:focus,
[data-theme="dark"] .setting-control input[type="text"]:focus,
[data-theme="dark"] .setting-control input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .setting-control select,
    :root:not([data-theme="light"]) .setting-control input[type="time"],
    :root:not([data-theme="light"]) .setting-control input[type="text"],
    :root:not([data-theme="light"]) .setting-control input[type="email"] {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .setting-control select:focus,
    :root:not([data-theme="light"]) .setting-control input[type="time"]:focus,
    :root:not([data-theme="light"]) .setting-control input[type="text"]:focus,
    :root:not([data-theme="light"]) .setting-control input[type="email"]:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-blue);
    }
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-tertiary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-tertiary:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-secondary,
    :root:not([data-theme="light"]) .btn-tertiary {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .btn-secondary:hover,
    :root:not([data-theme="light"]) .btn-tertiary:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Note cards and Project cards */
[data-theme="dark"] .note-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .dashboard-project-row,
[data-theme="dark"] .dashboard-note-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme="dark"] .note-card:hover,
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .dashboard-project-row:hover,
[data-theme="dark"] .dashboard-note-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .note-card,
    :root:not([data-theme="light"]) .project-card,
    :root:not([data-theme="light"]) .dashboard-project-row,
    :root:not([data-theme="light"]) .dashboard-note-card {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
    :root:not([data-theme="light"]) .note-card:hover,
    :root:not([data-theme="light"]) .project-card:hover,
    :root:not([data-theme="light"]) .dashboard-project-row:hover,
    :root:not([data-theme="light"]) .dashboard-note-card:hover {
        background: var(--bg-elevated);
        border-color: var(--border-medium);
    }
}

/* Modals and Dropdowns */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .task-modal-content,
[data-theme="dark"] .note-modal-content,
[data-theme="dark"] .project-modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .context-menu {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-content,
    :root:not([data-theme="light"]) .task-modal-content,
    :root:not([data-theme="light"]) .note-modal-content,
    :root:not([data-theme="light"]) .project-modal-content,
    :root:not([data-theme="light"]) .dropdown-menu,
    :root:not([data-theme="light"]) .context-menu {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }
}

/* Snackbar dark mode */
[data-theme="dark"] .snackbar {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .snackbar {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }
}

/* Input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-quaternary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="text"],
    :root:not([data-theme="light"]) input[type="email"],
    :root:not([data-theme="light"]) input[type="password"],
    :root:not([data-theme="light"]) input[type="search"],
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--text-quaternary);
    }
}

/* Backlog task items */
[data-theme="dark"] .backlog-task-item {
    background: var(--bg-card);
}

[data-theme="dark"] .backlog-task-item:hover {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .backlog-task-item {
        background: var(--bg-card);
    }
    :root:not([data-theme="light"]) .backlog-task-item:hover {
        background: var(--bg-elevated);
    }
}

/* New task input area */
[data-theme="dark"] .new-task-input-wrapper,
[data-theme="dark"] .day-new-task {
    background: var(--bg-card);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .new-task-input-wrapper,
    :root:not([data-theme="light"]) .day-new-task {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
}

/* Search modal */
[data-theme="dark"] .search-modal-content {
    background: var(--bg-elevated);
}

[data-theme="dark"] .search-input-wrapper {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .search-modal-content {
        background: var(--bg-elevated);
    }
    :root:not([data-theme="light"]) .search-input-wrapper {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
    }
}

/* Settings panel */
[data-theme="dark"] .settings-panel {
    background: var(--bg-main);
}

[data-theme="dark"] .settings-section {
    background: var(--bg-card);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .settings-panel {
        background: var(--bg-main);
    }

    :root:not([data-theme="light"]) .settings-section {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
}

/* Drag preview */
[data-theme="dark"] .drag-preview {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .drag-preview {
        background: var(--bg-elevated);
        border-color: var(--border-medium);
    }
}

/* Calendar events in timeline */
[data-theme="dark"] .timeline-slot {
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-slot {
        border-color: var(--border-light);
    }
}

/* Scheduled task slots */
[data-theme="dark"] .scheduled-task-slot {
    background: var(--bg-card);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scheduled-task-slot {
        background: var(--bg-card);
    }
}

/* Empty states */
[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state-image {
    opacity: 0.35;
    filter: brightness(0.85);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .empty-state {
        color: var(--text-secondary);
    }
    :root:not([data-theme="light"]) .empty-state-image {
        opacity: 0.35;
        filter: brightness(0.85);
    }
}

/* Flat task rows */
[data-theme="dark"] .flat-task-row:hover {
    background: var(--accent-blue-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flat-task-row:hover {
        background: var(--accent-blue-light);
    }
}

/* Week planner header */
[data-theme="dark"] .week-planner-header {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-planner-header {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }
}

/* Day column header */
[data-theme="dark"] .day-column-header,
[data-theme="dark"] .week-day-header {
    background: var(--bg-card);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .day-column-header,
    :root:not([data-theme="light"]) .week-day-header {
        background: var(--bg-card);
    }
}

/* Event cards in timeline (calendar events) */
[data-theme="dark"] .event-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .event-card:hover {
    background: var(--bg-elevated) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .event-card {
        background: var(--bg-card) !important;
        border-color: var(--border-light) !important;
    }
    :root:not([data-theme="light"]) .event-card:hover {
        background: var(--bg-elevated) !important;
    }
}

/* Timeline unscheduled tasks */
[data-theme="dark"] .timeline-unscheduled-task {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .timeline-unscheduled-task:hover {
    background: var(--bg-elevated) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-unscheduled-task {
        background: var(--bg-card) !important;
    }
    :root:not([data-theme="light"]) .timeline-unscheduled-task:hover {
        background: var(--bg-elevated) !important;
    }
}

/* Week timeline events */
[data-theme="dark"] .week-timeline-event {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-timeline-event {
        background: var(--bg-card) !important;
        border-color: var(--border-light) !important;
    }
}

/* Week task items - base styles now use var(--bg-card) */

/* Force stat cards dark - stronger specificity */
[data-theme="dark"] .dashboard-stats-row .dashboard-stat-card,
[data-theme="dark"] .notes-stats .dashboard-stat-card,
[data-theme="dark"] .projects-stats .dashboard-stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-stats-row .dashboard-stat-card,
    :root:not([data-theme="light"]) .notes-stats .dashboard-stat-card,
    :root:not([data-theme="light"]) .projects-stats .dashboard-stat-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-light) !important;
    }
}

/* Task list items in tasks view — card styles handle background via .tasks-view .task-row */

/* Task row hover state */
[data-theme="dark"] .task-row:hover,
[data-theme="dark"] .task-row.dropdown-active {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .task-row:hover,
    :root:not([data-theme="light"]) .task-row.dropdown-active {
        background: var(--bg-elevated);
    }
}

/* Timeline header title area */
[data-theme="dark"] .timeline-title-area,
[data-theme="dark"] .timeline-header-left {
    color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-title-area,
    :root:not([data-theme="light"]) .timeline-header-left {
        color: var(--text-primary);
    }
}

/* Timeline grid lines */
[data-theme="dark"] .timeline-grid,
[data-theme="dark"] .timeline-hour-row {
    border-color: var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-grid,
    :root:not([data-theme="light"]) .timeline-hour-row {
        border-color: var(--border-light) !important;
    }
}

/* Event title text color */
[data-theme="dark"] .event-title {
    color: var(--text-primary);
}

[data-theme="dark"] .event-time,
[data-theme="dark"] .event-duration {
    color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .event-title {
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) .event-time,
    :root:not([data-theme="light"]) .event-duration {
        color: var(--text-secondary);
    }
}

/* Today calendar gradient background override */
[data-theme="dark"] .today-calendar {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .today-calendar {
        background: var(--bg-secondary) !important;
        background-image: none !important;
    }
}

/* ============================================================================
   PAGE LAYOUTS - Dark mode backgrounds
   ============================================================================ */

/* Page content containers */
[data-theme="dark"] .tasks-page-content,
[data-theme="dark"] .notes-page-content,
[data-theme="dark"] .projects-page-content {
    background: var(--bg-main) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-page-content,
    :root:not([data-theme="light"]) .notes-page-content,
    :root:not([data-theme="light"]) .projects-page-content {
        background: var(--bg-main) !important;
    }
}

/* Left panels (sidebars) */
[data-theme="dark"] .tasks-left-panel,
[data-theme="dark"] .notes-left-panel,
[data-theme="dark"] .projects-left-panel {
    background: var(--bg-sidebar) !important;
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-left-panel,
    :root:not([data-theme="light"]) .notes-left-panel,
    :root:not([data-theme="light"]) .projects-left-panel {
        background: var(--bg-sidebar) !important;
        border-color: var(--border-light);
    }
}

/* Main content areas */
[data-theme="dark"] .tasks-main-content,
[data-theme="dark"] .notes-main-content,
[data-theme="dark"] .projects-main-content {
    background: var(--bg-main) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-main-content,
    :root:not([data-theme="light"]) .notes-main-content,
    :root:not([data-theme="light"]) .projects-main-content {
        background: var(--bg-main) !important;
    }
}

/* Dashboard overview containers */
[data-theme="dark"] .dashboard-overview {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-overview {
        background: transparent;
    }
}

/* Force all stat cards dark regardless of context */
[data-theme="dark"] .dashboard-stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-stat-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-light) !important;
    }
}

/* Week planner background */
[data-theme="dark"] .week-planner {
    background: var(--bg-main) !important;
}

[data-theme="dark"] .week-planner-container {
    background: var(--bg-secondary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-planner {
        background: var(--bg-main) !important;
    }
    :root:not([data-theme="light"]) .week-planner-container {
        background: var(--bg-secondary) !important;
    }
}

/* Panel headers */
[data-theme="dark"] .tasks-panel-header,
[data-theme="dark"] .notes-panel-header,
[data-theme="dark"] .projects-panel-header {
    background: var(--bg-sidebar);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-panel-header,
    :root:not([data-theme="light"]) .notes-panel-header,
    :root:not([data-theme="light"]) .projects-panel-header {
        background: var(--bg-sidebar);
        border-color: var(--border-light);
    }
}

/* Week view controls */
[data-theme="dark"] .control-segment {
    background: var(--bg-tertiary) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .week-control-btn {
    background: transparent !important;
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .week-control-btn.active {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .week-control-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .control-segment {
        background: var(--bg-tertiary) !important;
        box-shadow: none !important;
    }
    :root:not([data-theme="light"]) .week-control-btn {
        background: transparent !important;
        color: var(--text-tertiary) !important;
    }
    :root:not([data-theme="light"]) .week-control-btn.active {
        background: var(--bg-elevated) !important;
        color: var(--text-primary) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    }
    :root:not([data-theme="light"]) .week-control-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-secondary) !important;
    }
}

/* ============================================================================
   AI TRIAGE
   ============================================================================ */

/* AI button styling */
.modal-action-btn.ai-btn {
    color: var(--accent-purple, #8b5cf6);
}

.modal-action-btn.ai-btn:hover {
    background: rgba(139, 92, 246, 0.1);
}

.modal-action-btn.ai-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

.modal-action-btn.ai-btn.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* AI Triage Dropdown */
.ai-triage-dropdown {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 360px;
    z-index: 10000;
    overflow: hidden;
}

.ai-triage-header {
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-triage-header::before {
    content: '✨';
}

.ai-triage-item {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-light);
}

.ai-triage-item:last-of-type {
    border-bottom: none;
}

.ai-triage-item:hover {
    background: var(--bg-hover);
}

.ai-triage-item.applied {
    background: rgba(34, 197, 94, 0.1);
}

.ai-triage-item.applied::after {
    content: '✓';
    margin-left: auto;
    color: var(--color-green, #22c55e);
    font-weight: 600;
}

.ai-triage-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 60px;
}

.ai-triage-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.ai-triage-reason {
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
    font-style: italic;
}

.ai-triage-actions {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}

.ai-triage-apply-all {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--accent-purple, #8b5cf6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.ai-triage-apply-all:hover {
    background: var(--accent-purple-dark, #7c3aed);
}

.ai-triage-apply-all:active {
    transform: scale(0.98);
}

/* Dark mode adjustments */
[data-theme="dark"] .ai-triage-dropdown {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ai-triage-header,
[data-theme="dark"] .ai-triage-actions {
    background: var(--bg-tertiary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-triage-dropdown {
        background: var(--bg-secondary);
        border-color: var(--border-medium);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    :root:not([data-theme="light"]) .ai-triage-header,
    :root:not([data-theme="light"]) .ai-triage-actions {
        background: var(--bg-tertiary);
    }
}

/* ============================================================================
   AI SETTINGS TAB
   Styles for AI configuration in Settings > AI
   ============================================================================ */

/* AI Status Card */
.ai-status-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}

.ai-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
}

.ai-status-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}

.ai-provider-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-provider-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-provider-icon.cloud {
    background: rgba(74, 144, 217, 0.1);
    color: var(--accent-blue);
}

.ai-provider-icon.local {
    background: rgba(69, 160, 73, 0.1);
    color: var(--color-success);
}

.ai-provider-icon svg {
    width: 20px;
    height: 20px;
}

.ai-provider-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-provider-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.ai-provider-status {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.ai-status-badge {
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.ai-status-badge.active {
    background: rgba(69, 160, 73, 0.1);
    color: var(--color-success);
}

/* AI Usage Stats */
.ai-usage-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ai-usage-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-usage-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-usage-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.usage-bar.local .usage-fill.local {
    background: var(--color-success);
}

/* AI Features List */
.ai-features-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ai-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.ai-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-md);
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-feature-icon svg {
    width: 18px;
    height: 18px;
}

.ai-feature-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ai-feature-info strong {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.ai-feature-info p {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin: 0;
}

/* Ollama Setup Help */
.ollama-setup-help {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.2);
    border-radius: var(--radius-md);
}

.ollama-help-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-warning);
    margin-bottom: var(--space-2);
}

.ollama-setup-help p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}

.ollama-steps {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ollama-steps li {
    margin-bottom: var(--space-2);
}

.ollama-steps code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: var(--font-size-xs);
}

.ollama-steps a {
    color: var(--accent-blue);
    text-decoration: none;
}

.ollama-steps a:hover {
    text-decoration: underline;
}

/* Dark mode adjustments for AI settings */
[data-theme="dark"] .ai-status-card {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ai-feature-item {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ollama-setup-help {
    background: rgba(245, 166, 35, 0.05);
    border-color: rgba(245, 166, 35, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-status-card {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .ai-feature-item {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .ollama-setup-help {
        background: rgba(245, 166, 35, 0.05);
        border-color: rgba(245, 166, 35, 0.15);
    }
}

/* ==========================================
   AI Settings Tab - Redesigned UI
   ========================================== */

/* Status Banner */
.ai-status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.ai-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: background 0.2s;
}

.status-dot.online {
    background: #22C55E;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.status-dot.offline {
    background: var(--text-tertiary);
}

.ai-status-banner .status-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.btn-icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-icon-sm:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Models Section */
.ai-models-section {
    margin-bottom: var(--space-6);
}

.section-header-row {
    margin-bottom: var(--space-4);
}

/* System Info Line */
.ai-system-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-system-info svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* RAM Warning */
.ai-ram-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-warning);
}

/* Model List (replaces model grid) */
.model-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.model-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    flex-wrap: wrap;
}

.model-row:hover {
    border-color: var(--border-medium);
}

.model-row.installed {
    border-color: var(--accent-blue-border);
    background: var(--accent-blue-bg);
}

.model-row.downloading {
    border-color: var(--accent-blue);
}

.model-row-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.model-row-disabled .download-model-btn {
    cursor: not-allowed;
}

.model-row-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.model-row-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.model-row-name strong {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.model-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.model-badge.recommended {
    background: rgba(74, 144, 217, 0.1);
    color: var(--accent-blue);
}

.model-row-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.model-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.model-row-status {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.model-row-status.installed {
    color: #10B981;
    font-weight: 500;
}

.model-row .download-model-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    min-height: 44px;
}

.model-row .btn-delete {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.model-row .btn-delete:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
    border-color: transparent;
}

.model-row .model-progress {
    width: 100%;
    margin-top: var(--space-2);
}

/* Inline Progress on Card */
.model-progress {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.progress-bar-mini {
    flex: 1;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.2s;
}

.progress-text-mini {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--accent-blue);
    min-width: 40px;
    text-align: right;
}

/* Model Settings Row */
.model-settings-row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.setting-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.setting-inline label:not(.toggle-label) {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.setting-inline select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    color: var(--text-primary);
    min-width: 160px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
}

/* Cloud AI Section */
.cloud-ai-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.cloud-ai-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cloud-ai-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue-light);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
}

.cloud-ai-icon svg {
    width: 20px;
    height: 20px;
}

.cloud-ai-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cloud-ai-details strong {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.cloud-ai-usage {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.status-pill {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.status-pill.active {
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
}

/* Usage Meter */
.usage-meter {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.usage-meter-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.usage-meter .usage-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.usage-meter .usage-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 0.3s;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

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

.feature-icon.inbox {
    background: rgba(74, 144, 217, 0.1);
    color: var(--accent-blue);
}

.feature-icon.tasks {
    background: rgba(139, 92, 175, 0.1);
    color: #7C3AED;
}

.feature-icon.focus {
    background: rgba(245, 166, 35, 0.1);
    color: #F59E0B;
}

.feature-content strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.feature-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ============================================
   TRANSCRIPTION OPTIONS
   ============================================ */

.transcription-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.transcription-option {
    position: relative;
    padding: 16px;
    background: var(--bg-main);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.transcription-option:hover {
    border-color: var(--border-medium);
}

.transcription-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(74, 144, 217, 0.3));
}

.transcription-option.selected[data-method="local"] {
    background: rgba(124, 58, 237, 0.05);
    border-color: #7C3AED;
}

.transcription-option.selected[data-method="cloud"] {
    background: rgba(53, 122, 189, 0.05);
    border-color: var(--accent-blue);
}

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

.transcription-option-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.transcription-option-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.transcription-option-icon--local {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

.transcription-option-icon--cloud {
    background: rgba(53, 122, 189, 0.1);
    color: var(--accent-blue);
}

.transcription-option-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
}

.transcription-option-badge--local {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

.transcription-option-badge--cloud {
    background: rgba(53, 122, 189, 0.1);
    color: var(--accent-blue);
}

.transcription-option-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    transition: all var(--transition-fast);
}

.transcription-option-check svg {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.transcription-option.selected[data-method="local"] .transcription-option-check {
    background: #7C3AED;
    border-color: #7C3AED;
}

.transcription-option.selected[data-method="cloud"] .transcription-option-check {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.transcription-option.selected .transcription-option-check svg {
    opacity: 1;
}

.transcription-option-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.transcription-option-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Whisper Model Settings */
.whisper-model-settings {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.whisper-model-settings.hidden {
    display: none;
}

.whisper-model-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.whisper-model-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.whisper-model-select {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-primary);
}

.whisper-model-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* Sherpa Model Status (Desktop transcription) */
.sherpa-model-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.sherpa-model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.sherpa-model-label {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.sherpa-model-badge {
    font-size: 12px;
    font-weight: 500;
}

.sherpa-download-btn {
    font-size: 11px;
    padding: 2px 10px;
}

.sherpa-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 80px;
}

.sherpa-progress-fill {
    height: 4px;
    width: 0%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sherpa-progress-text {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    min-width: 30px;
}

/* Microphone Settings */
.mic-settings {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.mic-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mic-settings-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.mic-settings-controls {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: center;
}

.mic-settings-select {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-primary);
}

.mic-refresh-btn {
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.mic-refresh-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.mic-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mic-status-message {
    font-size: 12px;
    margin: 8px 0 0 0;
    line-height: 1.4;
}

.mic-status-message:empty {
    display: none;
}

.mic-status-message.warning {
    color: var(--color-warning, #e6a700);
}

.mic-status-message.error {
    color: var(--color-error, #dc3545);
}

/* ============================================
   SETTINGS - ACCESSIBILITY
   ============================================ */

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible states for settings */
.settings-tab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
    border-radius: var(--radius-sm);
}

.setting-control select:focus-visible,
.setting-control input:focus-visible {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

/* Button icon styling for Account & Billing */
.btn-icon-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.external-link-icon {
    width: 14px;
    height: 14px;
}

/* ============================================
   SETTINGS - RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .setting-control {
        width: 100%;
        margin-left: 0;
    }

    .setting-control select {
        width: 100%;
        min-width: unset;
    }

    .working-hours-control {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .working-hours-inputs {
        width: 100%;
    }

    .models-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .transcription-options-grid {
        grid-template-columns: 1fr;
    }

    .model-settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .setting-inline {
        width: 100%;
    }

    .setting-inline select {
        width: 100%;
        min-width: unset;
    }

    .billing-plan-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .billing-plan-actions {
        width: 100%;
    }

    .billing-plan-actions button {
        width: 100%;
    }

    .support-info-grid {
        grid-template-columns: 1fr;
    }

    .whisper-model-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .whisper-model-select {
        width: 100%;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .settings-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-2);
    }

    .settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .settings-section {
        padding: var(--space-4);
    }

    .settings-view h2 {
        font-size: var(--font-size-xl);
    }

    .plans-grid {
        gap: var(--space-3);
    }

    .plan-card {
        padding: var(--space-4);
    }

    .invite-form {
        flex-direction: column;
        gap: var(--space-3);
    }

    .invite-form input,
    .invite-form button {
        width: 100%;
    }

    .email-address-display {
        flex-direction: column;
        gap: var(--space-2);
    }

    .email-address-input {
        width: 100%;
    }

    .danger-item {
        flex-direction: column;
        gap: var(--space-3);
    }

    .danger-item button {
        width: 100%;
    }
}

/* Hidden download progress (for JS compatibility) */
.model-download-progress {
    display: none !important;
}

/* ==========================================
   Desktop App - Window Drag Region
   ========================================== */

/* Make the top portion of sidebar draggable for window movement */
.sidebar-logo {
    -webkit-app-region: drag;
    cursor: default;
}

/* Move sidebar logo down in desktop app to avoid window controls */
body.is-desktop .sidebar-logo {
    margin-top: 8px;
}

/* Desktop drag bar - thin strip at very top for window movement */
.desktop-drag-bar {
    position: fixed;
    top: 0;
    left: 68px; /* sidebar width */
    right: 0;
    height: 20px; /* Thin strip that doesn't block content */
    -webkit-app-region: drag;
    z-index: 9999;
    background: transparent;
    cursor: grab;
}

.desktop-drag-bar:active {
    cursor: grabbing;
}

/* Extend sidebar as drag region (logo area) */
.sidebar {
    -webkit-app-region: drag;
}

/* But make sidebar buttons clickable, not draggable */
.sidebar .sidebar-btn,
.sidebar .nav-item,
.sidebar-icons,
.sidebar-bottom {
    -webkit-app-region: no-drag;
}

/* Make page title areas draggable for window movement */
.page-title,
.planner-page-header .page-title,
.tasks-page-header .page-title,
.projects-page-header .page-title,
.notes-page-header .page-title,
.settings-page-header .page-title,
.inbox-header h2,
.date-header {
    -webkit-app-region: drag;
    cursor: default;
}

/* Ensure interactive elements within headers are not draggable for window movement */
button, a, input, select, textarea,
.nav-item, .sidebar-btn, .directory-item,
[role="button"], [onclick], [tabindex],
.header-actions, .tasks-header-actions,
.projects-header-actions, .notes-header-actions,
.planner-controls, .filter-btn, .search-btn {
    -webkit-app-region: no-drag;
}

/* Ensure task/event elements can be dragged (HTML5 drag-drop, not window drag) */
.backlog-task-item,
.task-row,
.flat-task-row,
.timeline-event,
.calendar-event,
.week-task-item,
.week-timeline-task,
[draggable="true"] {
    -webkit-app-region: no-drag;
}

/* ==========================================
   AI Inbox Processing - Process with AI Button
   ========================================== */

.ai-process-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-gradient-end) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.25);
}

.ai-process-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.35);
}

.ai-process-btn:active {
    transform: translateY(0);
}

.ai-process-btn .ai-sparkle-icon {
    width: 16px;
    height: 16px;
}

.ai-process-btn.pulse {
    animation: ai-btn-pulse 2s ease-in-out infinite;
}

@keyframes ai-btn-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(74, 144, 217, 0.25); }
    50% { box-shadow: 0 2px 16px rgba(74, 144, 217, 0.45); }
}

/* Hide when no inbox tasks */
.inbox-view:not(.has-tasks) .ai-process-btn {
    display: none;
}

/* ==========================================
   AI Inbox Processing - Side Panel
   ========================================== */

.ai-processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}

.ai-processing-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.ai-processing-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    box-shadow: none;
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-processing-panel.visible {
    transform: translateX(0);
    box-shadow: var(--shadow-2xl);
}

/* Suppress transition during resize to prevent diagonal animation at breakpoints */
.ai-processing-panel.no-transition {
    transition: none !important;
}

/* Panel Header */
.ai-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--bg-card);
}

.ai-panel-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue-light);
    border-radius: var(--radius-lg);
    color: var(--accent-blue);
}

.ai-panel-icon svg {
    width: 18px;
    height: 18px;
}

.ai-panel-title {
    flex: 1;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--accent-blue);
}

.ai-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-panel-close:hover {
    background: var(--surface-hover);
    color: var(--text-secondary);
}

.ai-panel-close svg {
    width: 18px;
    height: 18px;
}

/* Panel Content Area */
.ai-panel-content {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
}

/* ==========================================
   AI Greeting Phase
   ========================================== */

.ai-greeting-message {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--space-3);
}

.ai-greeting-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--space-8);
}

.ai-greeting-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ai-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-gradient-end) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.25);
}

.ai-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.35);
}

.ai-btn-primary:active {
    transform: translateY(0);
}

.ai-btn-primary svg {
    width: 18px;
    height: 18px;
}

.ai-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-medium);
}

.ai-btn-secondary svg {
    width: 18px;
    height: 18px;
}

/* Tertiary Button - between primary and secondary */
.ai-btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--accent-blue-opacity-10);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue-opacity-20);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-btn-tertiary:hover {
    background: var(--accent-blue-opacity-15);
    border-color: var(--accent-blue);
}

.ai-btn-tertiary svg {
    width: 18px;
    height: 18px;
}

.ai-skip-link {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-3) 0;
    margin-top: var(--space-4);
    transition: color var(--transition-fast);
}

.ai-skip-link:hover {
    color: var(--text-secondary);
}

/* ==========================================
   AI Processing Phase
   ========================================== */

.ai-progress-bar {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.ai-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.ai-streak {
    color: var(--accent-orange);
    font-weight: 500;
    animation: ai-streak-bounce 0.5s ease;
}

@keyframes ai-streak-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.ai-progress-track {
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ai-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue-gradient-end) 100%);
    border-radius: var(--radius-full);
    transition: width var(--transition-smooth);
}

/* Current Task Display */
.ai-current-task {
    margin: var(--space-4) var(--space-5);
    padding: var(--space-5);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

.ai-task-quote {
    position: relative;
}

.ai-task-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ai-task-title::before {
    content: '"';
}

.ai-task-title::after {
    content: '"';
}

.ai-task-notes {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-task-notes:empty {
    display: none;
}

/* Batch Banner - inline Apply All shortcut */
.ai-batch-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-batch-banner-btn {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    transition: background var(--transition-fast);
}

.ai-batch-banner-btn:hover {
    background: var(--accent-blue-opacity-10);
}

/* Suggestions List - 2x2 Grid */
.ai-suggestions-list {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    align-content: start;
}

/* Suggestion Card - Vertical Stack */
.ai-suggestion-card {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: all var(--transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 80px;
}

.ai-suggestion-card:hover {
    border-color: var(--border-medium);
    background: var(--surface-hover);
}

.ai-suggestion-card.picker-open {
    border-color: var(--accent-blue-border);
    z-index: var(--z-dropdown);
}

.ai-suggestion-card.accepted {
    border-color: var(--accent-green);
    background: var(--accent-green-light);
}

.ai-suggestion-card.accepted .ai-suggestion-check {
    opacity: 1;
    transform: scale(1);
}

.ai-suggestion-card.dismissed {
    opacity: 0.5;
}

/* Label - direct child of card in new layout */
.ai-suggestion-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

/* AI reasoning text */
.ai-suggestion-reason {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    flex-basis: 100%;
    order: 10;
    padding-top: var(--space-1);
    margin-top: var(--space-1);
    border-top: 1px solid var(--border-light);
}

/* Inline checkmark indicator */
.ai-suggestion-check {
    width: 16px;
    height: 16px;
    background: var(--accent-green);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.ai-suggestion-check svg {
    width: 10px;
    height: 10px;
}

.ai-suggestion-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.ai-suggestion-value.area {
    color: var(--badge-area);
}

.ai-suggestion-value.schedule {
    color: var(--badge-schedule);
}

.ai-suggestion-value.priority-p1 {
    color: var(--badge-priority-p1);
}

.ai-suggestion-value.priority-p2 {
    color: var(--badge-priority-p2);
}

.ai-suggestion-value.priority-p3 {
    color: var(--badge-priority-p3);
}

.ai-suggestion-value.duration {
    color: var(--badge-duration);
}

.ai-suggestion-value.deadline {
    color: var(--badge-deadline);
}

/* AI Reasoning - Hidden by default, show on hover */
.ai-suggestion-reason {
    display: none;
}

/* Suggestion Card - Editable Value Button */
.ai-suggestion-value-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    max-width: none;
    overflow: hidden;
}

.ai-suggestion-value-btn:hover {
    background: var(--bg-tertiary);
}

.ai-suggestion-card.picker-open .ai-suggestion-value-btn {
    background: var(--accent-blue-opacity-5);
}

.ai-suggestion-value-btn .ai-suggestion-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* All card values use primary text color to match mockup */

.ai-suggestion-chevron {
    width: 12px;
    height: 12px;
    color: var(--text-tertiary);
    stroke: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.ai-suggestion-value-btn:hover .ai-suggestion-chevron {
    stroke: var(--text-secondary);
}

.ai-suggestion-card.picker-open .ai-suggestion-chevron {
    transform: rotate(180deg);
}

/* Clear Button - Show on hover, positioned top-right */
.ai-suggestion-clear {
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

/* Only show clear button when card has an actual value */
.ai-suggestion-card.has-value:hover .ai-suggestion-clear,
.ai-suggestion-card.accepted.has-value .ai-suggestion-clear {
    display: flex;
}

/* When accepted, hide clear and show check instead */
.ai-suggestion-card.accepted .ai-suggestion-clear {
    display: none !important;
}

.ai-suggestion-clear:hover {
    background: var(--surface-hover);
    color: var(--color-danger);
}

.ai-suggestion-clear svg {
    width: 10px;
    height: 10px;
}

/* Inline Picker Dropdown - Positioned for compact cards */
.ai-suggestion-picker {
    position: absolute;
    left: 0;
    right: auto;
    top: 100%;
    margin-top: var(--space-1);
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    z-index: var(--z-dropdown);
    max-height: 200px;
    overflow-y: auto;
}

.ai-picker-list {
    padding: var(--space-2);
}

.ai-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
}

.ai-picker-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.ai-picker-item:hover {
    background: var(--surface-hover);
}

.ai-picker-item.selected {
    background: var(--accent-blue-opacity-8);
    color: var(--accent-blue);
}

.ai-picker-item.selected::after {
    content: '';
    margin-left: auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234A90D9' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
}

.ai-picker-section {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-1);
}

.ai-picker-section:first-child {
    border-top: none;
    margin-top: 0;
}

.ai-picker-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-2) 0;
}

.ai-picker-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.ai-picker-emoji {
    font-size: var(--font-size-base);
    width: 20px;
    text-align: center;
}

.ai-picker-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.ai-picker-date-input {
    padding: var(--space-2) var(--space-3);
}

.ai-picker-date {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background: var(--bg-card);
    color: var(--text-primary);
}

.ai-picker-date:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Processing Actions - kbd + label buttons */
.ai-processing-actions {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
    background: var(--bg-card);
}

.ai-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.ai-action-btn:hover {
    background: var(--surface-hover);
}

.ai-action-btn kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.ai-action-primary {
    color: var(--text-secondary);
}

.ai-action-secondary {
    color: var(--text-secondary);
}

.ai-action-muted {
    color: var(--text-tertiary);
}

/* Responsive: collapse grid to single column */
@media (max-width: 360px) {
    .ai-suggestions-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   AI Batch Mode Phase
   ========================================== */

.ai-batch-intro {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.ai-batch-table-wrapper {
    flex: 1;
    overflow: auto;
    padding: var(--space-4) var(--space-5);
}

.ai-batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.ai-batch-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.ai-batch-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.ai-batch-table tbody tr {
    transition: background var(--transition-fast);
}

.ai-batch-table tbody tr:hover {
    background: var(--surface-hover);
}

.ai-batch-task-title {
    font-weight: 500;
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-batch-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.ai-batch-summary {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-batch-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-batch-summary li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-batch-summary li::before {
    content: '•';
    color: var(--accent-blue);
}

.ai-batch-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--accent-blue-opacity-5);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.ai-batch-note svg {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.ai-batch-actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
    background: var(--bg-card);
}

.ai-batch-actions .ai-btn-primary {
    flex: 1;
}

/* ==========================================
   AI Completion Phase
   ========================================== */

.ai-completion-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.ai-completion-celebration {
    margin-bottom: var(--space-6);
}

.ai-completion-checkmark {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-green) 0%, #68D391 100%);
    border-radius: var(--radius-full);
    color: white;
    animation: ai-completion-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-completion-checkmark svg {
    width: 40px;
    height: 40px;
}

@keyframes ai-completion-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.ai-completion-icon {
    background: linear-gradient(135deg, var(--accent-green) 0%, #68D391 100%) !important;
}

.ai-completion-message {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-6);
}

.ai-completion-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    width: 100%;
    max-width: 300px;
}

.ai-completion-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-completion-summary li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-completion-summary li::before {
    content: '•';
    color: var(--accent-green);
}

.ai-completion-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 250px;
}

/* ==========================================
   AI Loading Phase
   ========================================== */

.ai-loading-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    gap: var(--space-4);
}

.ai-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: var(--radius-full);
    animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-loading-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-loading-progress {
    margin-top: var(--space-4);
    width: 100%;
    max-width: 280px;
}

.ai-loading-task {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-loading-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ai-loading-bar-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    width: 0%;
}

/* ==========================================
   AI Panel - Mobile Responsive (Bottom Sheet)
   ========================================== */

@media (max-width: 768px) {
    .ai-processing-panel {
        width: 100%;
        max-width: 100%;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: 85vh;
        border-left: none;
        border-top: 1px solid var(--border-light);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
    }

    .ai-processing-panel.visible {
        transform: translateY(0);
    }

    .ai-panel-header {
        padding: var(--space-4);
    }

    .ai-panel-content {
        padding: var(--space-4);
    }

    .ai-suggestions-list {
        padding: var(--space-3) var(--space-4);
    }

    .ai-processing-actions {
        padding: var(--space-3) var(--space-4);
    }

    .ai-batch-table-wrapper {
        padding: var(--space-3) var(--space-4);
    }

    .ai-batch-table {
        font-size: var(--font-size-xs);
    }

    .ai-batch-task-title {
        max-width: 100px;
    }
}

/* ==========================================
   AI Panel - Highlight current task in inbox
   ========================================== */

.inbox-view.ai-processing .task-row {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.inbox-view.ai-processing .task-row.ai-current {
    opacity: 1;
    background: var(--accent-blue-opacity-8);
    border-radius: var(--radius-md);
}

/* Panel Phase Display */
.ai-panel-phase {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-panel-phase[style*="display: none"] {
    display: none !important;
}

/* ============================================================================
   DAY PLANNER AI PANEL
   ============================================================================ */

/* Plan My Day Button */
.plan-my-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), rgba(74, 144, 217, 0.05));
    border: 1px solid rgba(74, 144, 217, 0.3);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    min-height: 32px;
}

.plan-my-day-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.plan-my-day-btn:hover {
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.18), rgba(74, 144, 217, 0.1));
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.15);
}

.plan-my-day-btn:active {
    transform: translateY(0);
}

/* Backdrop */
.day-planner-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.day-planner-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Panel */
.day-planner-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    box-shadow: none;
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.day-planner-panel.active {
    transform: translateX(0);
    box-shadow: var(--shadow-2xl);
}

/* Phase container */
.dp-phase {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.dp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dp-header-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.dp-header-icon svg {
    width: 100%;
    height: 100%;
}

.dp-header-icon-success {
    color: var(--success);
}

.dp-header-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.dp-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
    padding: 0;
}

.dp-close-btn svg {
    width: 18px;
    height: 18px;
}

.dp-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Loading phase */
.dp-loading-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 16px;
}

.dp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: dp-spin 0.8s linear infinite;
}

@keyframes dp-spin {
    to { transform: rotate(360deg); }
}

.dp-loading-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Error phase */
.dp-error-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 16px;
}

.dp-error-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* Summary bar */
.dp-summary-bar {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Mini timeline */
.dp-mini-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.dp-timeline-track {
    position: relative;
    min-height: 324px;
}

/* Hour markers */
.dp-hour-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
}

.dp-hour-marker span {
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 10px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Task blocks */
.dp-task-block {
    position: absolute;
    left: 40px;
    right: 8px;
    border-radius: var(--radius-md);
    padding: 6px 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 32px;
    overflow: hidden;
}

/* Compact blocks: single-row layout for short time slots */
.dp-task-block.dp-block-compact {
    padding: 4px 8px;
    align-items: center;
}

.dp-task-block.dp-block-compact .dp-block-info {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.dp-task-block.dp-block-compact .dp-block-time {
    flex-shrink: 0;
}

.dp-task-block.dp-block-compact .dp-block-title {
    flex: 1;
    min-width: 0;
}

/* Pending state (dashed blue outline) */
.dp-task-block.pending {
    background: rgba(74, 144, 217, 0.06);
    border: 2px dashed rgba(74, 144, 217, 0.4);
}

.dp-task-block.pending:hover {
    background: rgba(74, 144, 217, 0.12);
    border-color: var(--accent-blue);
}

/* Accepted state */
.dp-task-block.accepted {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid rgba(16, 185, 129, 0.4);
}

/* Rejected state */
.dp-task-block.rejected {
    background: rgba(239, 68, 68, 0.06);
    border: 2px solid rgba(239, 68, 68, 0.2);
    opacity: 0.5;
}

.dp-task-block.rejected .dp-block-info {
    text-decoration: line-through;
}

/* Selected state */
.dp-task-block.dp-block-selected {
    box-shadow: 0 0 0 2px var(--accent-blue), 0 2px 8px rgba(74, 144, 217, 0.2);
}

/* Block content */
.dp-block-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dp-block-time {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.dp-block-title {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

/* Compact blocks: single line only */
.dp-block-compact .dp-block-title {
    white-space: nowrap;
    display: block;
    -webkit-line-clamp: unset;
}

.dp-energy-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.dp-energy-peak {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

/* Block actions */
.dp-block-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.dp-block-accept,
.dp-block-reject {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 200ms;
    color: var(--text-tertiary);
}

.dp-block-accept svg,
.dp-block-reject svg {
    width: 14px;
    height: 14px;
}

.dp-block-accept:hover {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.dp-block-reject:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* Unscheduled list */
.dp-unscheduled-list {
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
}

.dp-unscheduled-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

.dp-unscheduled-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-unscheduled-item {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actions bar */
.dp-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dp-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 44px;
}

.dp-btn-primary {
    background: var(--accent-blue);
    color: white;
}

.dp-btn-primary:hover {
    background: #357ABD;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
}

.dp-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.dp-btn-secondary:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

/* Keyboard hints */
.dp-keyboard-hints {
    padding: 8px 16px;
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dp-keyboard-hints kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-secondary);
}

/* Completion phase */
.dp-completion-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.dp-completion-text {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .day-planner-panel {
        width: 100%;
        max-width: 100%;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: 85vh;
        border-left: none;
        border-top: 1px solid var(--border-light);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
    }

    .day-planner-panel.active {
        transform: translateY(0);
    }

    .plan-my-day-btn span {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .day-planner-backdrop,
    .day-planner-panel,
    .dp-task-block,
    .dp-btn,
    .plan-my-day-btn {
        transition: none;
    }

    .dp-spinner {
        animation-duration: 1.5s;
    }
}

/* ============================================================================
   PROJECT PULSE AI PANEL
   ============================================================================ */

/* Button */
.project-pulse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), rgba(74, 144, 217, 0.05));
    border: 1px solid rgba(74, 144, 217, 0.3);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    min-height: 32px;
}

.project-pulse-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.project-pulse-btn:hover {
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.18), rgba(74, 144, 217, 0.1));
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.15);
}

.project-pulse-btn:active { transform: translateY(0); }

/* Backdrop */
.project-pulse-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-pulse-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Panel */
.project-pulse-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    box-shadow: none;
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.project-pulse-panel.active { transform: translateX(0); box-shadow: var(--shadow-2xl); }

/* Shared phase container */
.pp-phase { display: flex; flex-direction: column; height: 100%; }

/* Header */
.pp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pp-header-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(53, 122, 189, 0.1));
    border-radius: var(--radius-md);
    color: var(--accent-blue);
}

.pp-header-icon svg { width: 16px; height: 16px; }

.pp-header-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.pp-header-actions { display: flex; gap: 4px; }

.pp-close-btn,
.pp-refresh-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 200ms;
}

.pp-close-btn:hover,
.pp-refresh-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.pp-close-btn svg,
.pp-refresh-btn svg { width: 16px; height: 16px; }

/* Loading */
.pp-loading-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
}

.pp-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: dp-spin 0.8s linear infinite;
}

.pp-loading-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Error */
.pp-error-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
}

.pp-error-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* Empty */
.pp-empty-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.pp-empty-text {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* Buttons */
.pp-btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 200ms;
}

.pp-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.pp-btn-secondary:hover { background: var(--bg-hover); }

/* Summary bar */
.pp-summary-bar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pp-stat {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.pp-stat-on-track { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.pp-stat-at-risk { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.pp-stat-blocked { background: rgba(239, 68, 68, 0.1); color: #EF4444; }

/* Card grid */
.pp-card-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card */
.pp-card {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pp-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.1);
}

.pp-card-selected {
    border-color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.04);
}

.pp-card-at_risk { border-left: 3px solid #F59E0B; }
.pp-card-blocked { border-left: 3px solid #EF4444; }
.pp-card-on_track { border-left: 3px solid #10B981; }

/* Card header */
.pp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pp-card-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge */
.pp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pp-status-on_track { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.pp-status-at_risk { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.pp-status-blocked { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.pp-status-completed { background: rgba(74, 144, 217, 0.1); color: var(--accent-blue); }

/* Velocity indicators */
.pp-velocity { font-size: 12px; line-height: 1; }
.pp-velocity-up { color: #10B981; }
.pp-velocity-down { color: #EF4444; }
.pp-velocity-stable { color: var(--text-tertiary); }
.pp-velocity-na { color: var(--text-tertiary); font-size: 10px; }

/* Metrics row */
.pp-metrics-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.pp-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pp-metric-value {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.pp-metric-label {
    font-size: 10px;
    color: var(--text-tertiary);
}

.pp-metric-warn .pp-metric-value { color: #EF4444; }

/* Progress bar */
.pp-progress-bar {
    width: 48px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.pp-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 300ms;
}

/* Status reason */
.pp-card-reason {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 6px;
    line-height: 1.4;
}

/* Blockers */
.pp-blockers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pp-blocker-chip {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border-radius: 4px;
    font-size: 10px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keyboard hints */
.pp-keyboard-hints {
    padding: 8px 16px;
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pp-keyboard-hints kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-secondary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .project-pulse-panel {
        width: 100%;
        max-width: 100%;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: 85vh;
        border-left: none;
        border-top: 1px solid var(--border-light);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
    }

    .project-pulse-panel.active { transform: translateY(0); }
    .project-pulse-btn span { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .project-pulse-backdrop,
    .project-pulse-panel,
    .pp-card,
    .project-pulse-btn {
        transition: none;
    }
    .pp-spinner { animation-duration: 1.5s; }
}

/* ============================================================================
   MEETING INTELLIGENCE CARDS
   ============================================================================ */

.mi-card {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin: 12px 0;
}

.mi-card-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.mi-summary {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
}

.mi-section { margin-bottom: 12px; }

.mi-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}

.mi-action-list,
.mi-decision-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mi-action-item,
.mi-decision-item {
    padding: 4px 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mi-assignee {
    font-size: 10px;
    color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.1);
    padding: 1px 6px;
    border-radius: 8px;
}

.mi-task-link {
    font-size: 10px;
    color: var(--accent-blue);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.mi-task-link:hover { color: var(--accent-blue-dark); }

.mi-loading { padding: 16px; display: flex; justify-content: center; }

/* Cross-meeting timeline */
.mi-cross-meeting { margin-top: 12px; }

.mi-timeline { display: flex; flex-direction: column; gap: 8px; }

.mi-timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.mi-timeline-date {
    font-size: 10px;
    color: var(--text-tertiary);
    min-width: 60px;
    flex-shrink: 0;
}

.mi-timeline-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.mi-timeline-summary {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.4;
}

/* ============================================================================
   NOTE SUGGESTIONS SIDEBAR
   ============================================================================ */

.ns-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    box-shadow: none;
    z-index: calc(var(--z-modal) - 1);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ns-sidebar.ns-visible { transform: translateX(0); box-shadow: var(--shadow-lg); }

.ns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.ns-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ns-close-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
}

.ns-close-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.ns-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.ns-result-item {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 200ms;
    margin-bottom: 4px;
}

.ns-result-item:hover { background: var(--bg-tertiary); }

.ns-result-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.ns-result-type {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: capitalize;
}

.ns-similarity-badge {
    font-size: 9px;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.1);
    padding: 1px 5px;
    border-radius: 8px;
}

/* ============================================================================
   AUTO-TAG SUGGESTIONS
   ============================================================================ */

.ats-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(74, 144, 217, 0.04);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.ats-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.ats-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(74, 144, 217, 0.1);
    border: 1px solid rgba(74, 144, 217, 0.2);
    border-radius: 12px;
    font-size: 11px;
    color: var(--accent-blue);
    cursor: pointer;
    transition: all 200ms;
}

.ats-chip:hover {
    background: rgba(74, 144, 217, 0.2);
    border-color: var(--accent-blue);
}

.ats-dismiss {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    margin-left: auto;
}

.ats-dismiss:hover { color: var(--text-primary); }

/* ============================================================================
   DURATION INSIGHTS HINTS
   ============================================================================ */

.di-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.di-hint-text {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
}

.di-hint-confidence {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
}

.di-confidence-high { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.di-confidence-medium { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.di-confidence-low { background: rgba(156, 163, 175, 0.1); color: var(--text-tertiary); }

/* ============================================================================
   WEEKLY PLANNER AI MODAL
   ============================================================================ */

/* Backdrop */
.wp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal */
.wp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    z-index: calc(var(--z-modal) + 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.wp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.wp-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wp-header-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
}

.wp-header-icon svg {
    width: 100%;
    height: 100%;
}

.wp-header-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.wp-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 200ms;
}

.wp-close-btn svg {
    width: 18px;
    height: 18px;
}

.wp-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Progress dots */
.wp-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    flex-shrink: 0;
}

.wp-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light);
    cursor: pointer;
    transition: all 200ms;
}

.wp-step-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent-blue);
}

.wp-step-dot.completed {
    background: var(--accent-blue);
    opacity: 0.5;
}

/* Body */
.wp-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Loading */
.wp-loading,
.wp-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
}

.wp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: dp-spin 0.8s linear infinite;
}

.wp-loading p,
.wp-error p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Footer */
.wp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.wp-step-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-weight: 500;
}

.wp-btn {
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 36px;
}

.wp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wp-btn-primary {
    background: var(--accent-blue);
    color: white;
}

.wp-btn-primary:hover:not(:disabled) {
    background: #357ABD;
}

.wp-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.wp-btn-secondary:hover {
    background: var(--border-light);
}

/* Step common */
.wp-step {
    min-height: 200px;
}

.wp-step-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.wp-section {
    margin-top: 16px;
}

.wp-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.wp-empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Step 1: Review */
.wp-stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.wp-stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.wp-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-blue);
    line-height: 1;
}

.wp-stat-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
}

.wp-wins-list,
.wp-carryover-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-win-item,
.wp-carryover-item {
    padding: 6px 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.wp-win-item:last-child,
.wp-carryover-item:last-child {
    border-bottom: none;
}

/* Step 2: Landscape */
.wp-landscape-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.wp-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.wp-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.wp-legend-meetings {
    background: rgba(239, 68, 68, 0.3);
}

.wp-legend-focus {
    background: rgba(16, 185, 129, 0.3);
}

.wp-landscape-chart {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 180px;
    padding-bottom: 32px;
}

.wp-day-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.wp-day-bar {
    flex: 1;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    background: var(--bg-secondary);
}

.wp-bar-meetings {
    background: rgba(239, 68, 68, 0.25);
    transition: height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-bar-focus {
    background: rgba(16, 185, 129, 0.25);
    transition: height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-day-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.wp-day-meetings {
    font-size: 10px;
    color: var(--text-tertiary);
}

.wp-deadline-badge {
    font-size: 9px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Step 3: Top Tasks */
.wp-top-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-top-task {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.wp-task-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.wp-task-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.wp-task-reason {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.wp-task-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.wp-task-day {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.wp-task-duration {
    font-size: 10px;
    color: var(--text-tertiary);
}

/* Step 4: Distribution */
.wp-dist-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.wp-dist-day {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 8px;
    min-height: 80px;
}

.wp-dist-day-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.wp-dist-day-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.wp-dist-day-focus {
    font-size: 10px;
    color: var(--text-tertiary);
}

.wp-dist-task {
    padding: 4px 0;
    border-top: 1px solid var(--border-light);
}

.wp-dist-task-title {
    font-size: 10px;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-dist-task-dur {
    font-size: 9px;
    color: var(--text-tertiary);
}

.wp-dist-empty {
    font-size: 10px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Step 5: Commitment */
.wp-commitment-gauge {
    margin-bottom: 16px;
}

.wp-gauge-track {
    height: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.wp-gauge-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-gauge-fill.wp-on-track {
    background: var(--success);
}

.wp-gauge-fill.wp-overcommitted {
    background: var(--error);
}

.wp-gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.wp-commitment-status {
    text-align: center;
    margin-bottom: 12px;
}

.wp-status-label {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.wp-commitment-status.wp-on-track .wp-status-label {
    color: var(--success);
}

.wp-commitment-status.wp-overcommitted .wp-status-label {
    color: var(--error);
}

.wp-commitment-recommendation {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wp-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .wp-dist-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .wp-landscape-chart {
        height: 140px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wp-backdrop,
    .wp-step-dot,
    .wp-btn,
    .wp-gauge-fill,
    .wp-bar-meetings,
    .wp-bar-focus {
        transition: none;
    }

    .wp-spinner {
        animation-duration: 1.5s;
    }
}

/* ============================================================================
   NOTE RECORDING STYLES (compact inline recording for all notes)
   ============================================================================ */

/* Mic button in note modal header */
.note-record-btn {
    position: relative;
}

.note-record-btn.recording svg {
    stroke: #EF4444;
}

.note-record-btn.recording {
    animation: note-record-pulse 1.5s ease-in-out infinite;
}

@keyframes note-record-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Blue dot badge for existing recording */
.note-record-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-blue);
    pointer-events: none;
}

/* Compact recording bar between header and editor */
.note-recording-bar {
    display: flex;
    align-items: center;
    padding: 8px 28px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    min-height: 44px;
}

/* Active recording state */
.note-recording-active {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.note-recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    flex-shrink: 0;
    animation: note-rec-dot-blink 1s ease-in-out infinite;
}

@keyframes note-rec-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.note-recording-timer {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 42px;
}

.note-recording-waveform {
    flex: 1;
    height: 32px;
}

.note-recording-action {
    width: 28px;
    height: 28px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
    padding: 0;
}

.note-recording-action svg {
    width: 16px;
    height: 16px;
}

.note-recording-action.stop {
    color: #EF4444;
}

.note-recording-action.stop:hover {
    background: rgba(239, 68, 68, 0.1);
}

.note-recording-action.cancel:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.note-recording-action.delete {
    color: var(--text-tertiary);
}

.note-recording-action.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* Playback state */
.note-recording-playback {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.note-recording-player {
    flex: 1;
    min-width: 0;
}

.note-recording-player audio {
    width: 100%;
    height: 28px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .note-record-btn.recording {
        animation: none;
        opacity: 1;
    }
    .note-recording-dot {
        animation: none;
        opacity: 1;
    }
}


/* ============================================================================
   FLOATING RECORDING BAR
   ============================================================================ */

.floating-recording-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 9998;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    color: #fff;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-radius 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    user-select: none;
}

.floating-recording-bar.visible {
    transform: translateX(-50%) translateY(0);
}

/* Compact state */
.floating-bar-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    height: 44px;
    box-sizing: border-box;
    cursor: pointer;
}

.floating-bar-compact:focus-visible {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
    border-radius: 24px;
}

.floating-recording-bar .recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    flex-shrink: 0;
    animation: floating-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes floating-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.floating-bar-timer {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    min-width: 36px;
}

.floating-bar-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.floating-bar-waveform .bar {
    width: 3px;
    height: 4px;
    background: #10B981;
    border-radius: 2px;
    transition: height 120ms ease-out;
}

.floating-bar-stop-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #EF4444;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms ease;
}

/* 44px touch target via invisible hit area */
.floating-bar-stop-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.floating-bar-stop-btn:hover {
    background: #DC2626;
}

.floating-bar-stop-btn:focus-visible {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
}

/* Expanded state */
.floating-bar-expanded {
    display: none;
    padding: 0 12px 12px;
}

.floating-recording-bar.expanded {
    border-radius: 20px;
}

.floating-recording-bar.expanded .floating-bar-expanded {
    display: block;
}

.floating-bar-event-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.floating-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-bar-back-btn {
    flex: 1;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
    transition: background 150ms ease;
}

.floating-bar-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.floating-bar-back-btn:focus-visible {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
}

.floating-bar-stop-btn-expanded {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #EF4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
    transition: background 150ms ease;
}

.floating-bar-stop-btn-expanded:hover {
    background: #DC2626;
}

.floating-bar-stop-btn-expanded:focus-visible {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-recording-bar {
        transition: none;
    }
    .floating-recording-bar .recording-dot {
        animation: none;
    }
    .floating-bar-waveform .bar {
        transition: none;
    }
}

/* ============================================================================
   MEETING RECORDING STYLES
   ============================================================================ */

/* Recording Controls Container */
.recording-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Recording Type Selector (used in note recording) */
.recording-type-selector {
    display: flex;
    gap: var(--space-2);
    background: var(--surface-secondary);
    padding: 4px;
    border-radius: var(--radius-md);
}

.recording-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recording-type-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.recording-type-btn.active {
    background: var(--bg-card);
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.recording-type-btn.active svg {
    stroke: var(--accent-blue);
}

.recording-type-btn svg {
    width: 18px;
    height: 18px;
}

/* Start Recording Button */
.recording-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 12px 16px;
    background: #dc3545;
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recording-start-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.recording-start-btn:active {
    transform: translateY(0);
}

.recording-start-btn svg {
    width: 16px;
    height: 16px;
}

/* Recording Active State */
.recording-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 16px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.recording-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: #dc3545;
    border-radius: 50%;
    animation: recording-pulse 1.5s ease-in-out infinite;
}

@keyframes recording-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.recording-timer {
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
}

/* Audio Waveform */
.recording-waveform {
    width: 100%;
    height: 40px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.recording-waveform canvas {
    width: 100%;
    height: 100%;
}

/* Recording Buttons */
.recording-buttons {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.recording-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recording-btn svg {
    width: 18px;
    height: 18px;
}

.recording-btn.pause-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.recording-btn.pause-btn:hover {
    background: var(--bg-hover);
}

.recording-btn.pause-btn.is-paused svg {
    display: none;
}

.recording-btn.pause-btn.is-paused::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid currentColor;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
}

.recording-btn.stop-btn {
    background: #dc3545;
    color: white;
}

.recording-btn.stop-btn:hover {
    background: #c82333;
}

.recording-btn.cancel-btn {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--border-light);
}

.recording-btn.cancel-btn:hover {
    color: var(--text-secondary);
    border-color: var(--text-tertiary);
}

/* Recording Upload Progress */
.recording-upload-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.upload-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.upload-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-secondary);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.upload-status-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.upload-progress-bar {
    height: 6px;
    background: var(--surface-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 0.2s ease-out;
}

.upload-details {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.upload-percentage {
    font-weight: 500;
    color: var(--accent-blue);
}

/* Upload complete state */
.recording-upload-progress.complete .upload-spinner {
    display: none;
}

.recording-upload-progress.complete .upload-status-text {
    color: var(--color-success, #38a169);
}

.recording-upload-progress.complete .upload-progress-fill {
    background: var(--color-success, #38a169);
}

/* Recording Playback */
.recording-playback {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.recording-player audio,
.recording-player video {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
}

.recording-player audio {
    height: 54px;
    min-height: 54px;
}

.recording-player video {
    max-height: 200px;
    object-fit: contain;
}

/* ========================================
   Recording Skeleton Loading
   ======================================== */

.recording-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-tertiary) 0%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Audio player skeleton - matches cadeo-audio-player exactly */
.skeleton-audio-player {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
}

.skeleton-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-time {
    width: 36px;
    height: 14px;
    border-radius: var(--radius-xs);
}

.skeleton-progress {
    flex: 1;
    height: 4px;
    min-width: 60px;
    border-radius: 2px;
}

.skeleton-speed {
    width: 42px;
    height: 22px;
    border-radius: var(--radius-sm);
}

.skeleton-delete-btn {
    height: 40px;
    width: 100%;
    border-radius: var(--radius-md);
}

/* Cross-fade transitions */
.recording-skeleton,
.recording-controls,
.recording-active,
.recording-playback {
    transition: opacity 0.2s ease-out;
}

.recording-skeleton.hiding {
    opacity: 0;
}

/* Meeting tabs loading state */
.meeting-content-tabs.loading .meeting-tab {
    color: var(--text-tertiary);
    pointer-events: none;
}

.meeting-content-tabs.loading .meeting-tab:not(.active) {
    opacity: 0.4;
}

/* ========================================
   Custom Audio Player (Cadeo)
   ======================================== */

.cadeo-audio-player {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
}

.cap-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.cap-play-btn:hover {
    transform: scale(1.05);
}

.cap-play-btn:active {
    transform: scale(0.95);
}

.cap-play-btn svg {
    width: 16px;
    height: 16px;
}

.cap-time {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cap-time-duration {
    color: var(--text-tertiary);
}

.cap-progress-container {
    flex: 1;
    position: relative;
    padding: var(--space-3) 0;
    cursor: pointer;
    min-width: 60px;
}

.cap-progress-bar {
    position: relative;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: visible;
}

.cap-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: width 0.1s ease;
}

.cap-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    z-index: 1;
}

.cap-progress-handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--accent-blue);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cap-progress-container:hover .cap-progress-handle {
    opacity: 1;
}

.cap-progress-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.cap-progress-hover-time {
    position: absolute;
    bottom: 100%;
    margin-bottom: 4px;
    padding: 3px 6px;
    background: var(--bg-elevated, #333);
    color: white;
    font-size: 10px;
    border-radius: var(--radius-sm);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.cap-speed-btn {
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 42px;
}

.cap-speed-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium, var(--border-light));
}

/* Legacy Native Audio Player (fallback) */
.recording-audio-player {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
}

.recording-meta {
    display: none;
}

.recording-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.recording-action-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recording-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.recording-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.recording-action-btn.is-processing svg {
    animation: spin 1s linear infinite;
}

/* Transcription Status */
.transcription-status {
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.transcription-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.transcription-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Transcript Container */
.transcript-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.transcript-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transcript-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.transcript-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.transcript-toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.transcript-container.expanded .transcript-toggle-btn svg {
    transform: rotate(180deg);
}

/* Transcript Segments */
.transcript-segments {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 300px;
    overflow-y: auto;
}

.transcript-container.expanded .transcript-segments {
    max-height: none;
}

.transcript-segment {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.transcript-segment:hover {
    border-color: var(--accent-blue);
}

.transcript-segment.active {
    background: rgba(53, 122, 189, 0.1);
    border-color: var(--accent-blue);
}

.transcript-segment-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
}

.transcript-speaker {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
    color: var(--text-primary);
}

.transcript-speaker-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.transcript-timestamp {
    color: var(--text-tertiary);
    font-family: var(--font-mono, monospace);
}

.transcript-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.transcript-text .highlight {
    background: rgba(255, 235, 59, 0.4);
    border-radius: 2px;
}

/* Meeting Insights */
.meeting-insights {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.insights-regenerate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.insights-regenerate-btn:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.insights-regenerate-btn svg {
    width: 14px;
    height: 14px;
}

.insights-summary {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.insights-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.insights-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

.insights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.insights-list li {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    padding: 8px 10px;
    padding-left: 26px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    position: relative;
}

.insights-list li::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--accent-blue);
    border-radius: 50%;
}

.insights-list.action-items li {
    padding-left: 32px;
    cursor: pointer;
}

.insights-list.action-items li::before {
    content: '';
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2px solid var(--border-light);
    border-radius: 3px;
    left: 8px;
}

.insights-list.action-items li:hover {
    border-color: var(--accent-blue);
}

.insights-list.action-items li.completed::before {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.create-tasks-btn {
    padding: 4px 8px;
    background: var(--accent-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.create-tasks-btn:hover {
    background: #2d6aa3;
}

/* Action items in event notes (from AI insights) */
.insights-section .action-items-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.insights-section .action-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

.insights-section .action-item-row:hover {
    border-color: var(--accent-blue);
    background: var(--surface-hover);
}

.insights-section .action-item-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.insights-section .action-item-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--accent-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.insights-section .action-item-create-btn:hover {
    background: #2d6aa3;
    transform: scale(1.05);
}

.insights-section .action-item-create-btn:disabled {
    background: var(--accent-green);
    cursor: default;
    transform: none;
}

.insights-section .action-item-row.action-item-created {
    opacity: 0.7;
    background: var(--surface-tertiary);
}

.insights-section .action-item-row.action-item-created .action-item-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Recording not supported message */
.recording-not-supported {
    padding: 16px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.recording-not-supported p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================================
   END MEETING RECORDING STYLES
   ============================================================================ */

/* ============================================================================
   SYNC STATUS INDICATOR
   ============================================================================ */

.sync-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.sync-status-indicator:hover {
    background: var(--surface-secondary);
}

.sync-status-indicator .sync-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sync-status-indicator .sync-text {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Synced state */
.sync-status-indicator[data-state="synced"] .sync-icon {
    color: var(--success);
}

/* Syncing state with animation */
.sync-status-indicator[data-state="syncing"] .sync-icon {
    color: var(--primary);
    animation: spin 1s linear infinite;
}

/* Pending state */
.sync-status-indicator[data-state="pending"] .sync-icon {
    color: var(--warning);
}

.sync-status-indicator[data-state="pending"] .sync-badge {
    background: var(--warning);
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Offline state */
.sync-status-indicator[data-state="offline"] .sync-icon {
    color: var(--text-tertiary);
}

/* Error state */
.sync-status-indicator[data-state="error"] .sync-icon {
    color: var(--error);
}

/* Optimistic item visual treatment */
.task-row._isOptimistic,
.project-item._isOptimistic,
.area-item._isOptimistic,
.note-item._isOptimistic {
    opacity: 0.7;
}

.task-row._isOptimistic::after,
.project-item._isOptimistic::after,
.area-item._isOptimistic::after,
.note-item._isOptimistic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(var(--primary-rgb), 0.03) 10px,
        rgba(var(--primary-rgb), 0.03) 20px
    );
}

/* Sidebar sync status - very subtle */
.sidebar-sync-status {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.sidebar-sync-status .sync-status-indicator {
    padding: 0;
    background: none;
}

.sidebar-sync-status .sync-status-indicator:hover {
    background: none;
}

.sidebar-sync-status .sync-status-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.sidebar-sync-status .sync-status-btn:hover {
    background: var(--surface-hover);
}

.sidebar-sync-status .sync-status-icon {
    width: 6px;
    height: 6px;
    display: block;
}

.sidebar-sync-status .sync-status-icon svg {
    display: none;
}

/* Subtle dot indicator */
.sidebar-sync-status .sync-status-icon::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-quaternary);
    transition: all var(--transition-fast);
}

/* Synced - subtle gray, nearly invisible */
.sidebar-sync-status .sync-status-indicator[data-state="synced"] .sync-status-icon::before {
    background: var(--text-quaternary);
    opacity: 0.4;
}

/* Syncing - pulsing primary color */
.sidebar-sync-status .sync-status-indicator[data-state="syncing"] .sync-status-icon::before {
    background: var(--primary);
    animation: pulse-dot 1s ease-in-out infinite;
}

/* Pending - warning color */
.sidebar-sync-status .sync-status-indicator[data-state="pending"] .sync-status-icon::before {
    background: var(--warning);
}

/* Offline - muted */
.sidebar-sync-status .sync-status-indicator[data-state="offline"] .sync-status-icon::before {
    background: var(--text-tertiary);
    opacity: 0.5;
}

/* Error - red */
.sidebar-sync-status .sync-status-indicator[data-state="error"] .sync-status-icon::before {
    background: var(--error);
}

/* Hide badge in sidebar version */
.sidebar-sync-status .sync-status-badge {
    display: none !important;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ============================================================================
   END SYNC STATUS INDICATOR
   ============================================================================ */

/* ============================================================================
   PROJECT SHARING
   ============================================================================ */

/* Share button active state */
#projectShareBtn.has-shares,
#noteShareBtn.has-shares {
    color: var(--accent-blue);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.1));
}

/* Share Popover */
.share-popover {
    position: fixed;
    z-index: 1010;
    width: 320px;
    max-height: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.share-popover.visible {
    opacity: 1;
    transform: translateY(0);
}

.share-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
}

.share-popover-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.share-popover-search {
    padding: 0 14px 4px;
}

.share-search-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

.share-search-input:focus {
    border-color: var(--accent-blue);
}

/* Unified people list */
.share-people-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 6px 8px;
}

.share-people-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: default;
}

.share-people-item:hover {
    background: var(--bg-hover);
}

.share-owner-row:hover {
    background: transparent;
}

.share-member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.1));
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    flex-shrink: 0;
}

.share-member-avatar.owner {
    background: var(--accent-green-bg, rgba(34, 197, 94, 0.1));
    color: var(--accent-green, #22c55e);
}

.share-member-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-owner-badge {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Split invite button (Invite | v) */
.share-invite-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.share-invite-btn {
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-blue);
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.1));
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.share-invite-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.share-invite-chevron {
    padding: 3px 4px;
    background: var(--accent-blue-bg, rgba(59, 130, 246, 0.1));
    border: none;
    border-left: 1px solid rgba(59, 130, 246, 0.2);
    cursor: pointer;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
}

.share-invite-chevron:hover {
    background: var(--accent-blue);
    color: white;
}

/* Invite permission dropdown menu */
.share-invite-menu {
    position: fixed;
    z-index: 1011;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    min-width: 180px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.share-invite-menu.visible {
    opacity: 1;
    transform: translateY(0);
}

.share-invite-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
}

.share-invite-menu-item:hover {
    background: var(--bg-hover);
}

.share-invite-menu-item span:first-child {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.share-invite-menu-desc {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    margin-top: 1px;
}

.share-permission-select {
    padding: 2px 4px;
    font-size: var(--font-size-2xs);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.share-remove-btn {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.share-shared-row:hover .share-remove-btn {
    opacity: 1;
}

.share-remove-btn:hover {
    color: var(--color-danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.share-popover-empty {
    padding: 16px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* Shared project badge on project cards */
.project-shared-badge {
    display: inline-flex;
    align-items: center;
    color: var(--accent-blue);
    flex-shrink: 0;
    margin-left: 2px;
}

.project-shared-badge.shared-with-me {
    color: var(--accent-purple, #a855f7);
}

/* Projects group labels in sidebar */
.projects-group-label {
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.projects-group-label:first-child {
    padding-top: 4px;
}

/* Shared project task badge */
.task-meta-badge.meta-shared-project {
    background: transparent;
    color: var(--text-tertiary);
}

/* View-only badge */
.view-only-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

/* View-only project modal */
.project-view-only .task-drag-handle,
.project-view-only .project-task-section-drag-handle {
    pointer-events: none;
    opacity: 0.3;
}

.project-view-only .project-add-task {
    display: none !important;
}

.project-view-only .task-quick-actions {
    display: none;
}

.project-view-only .checkbox-wrapper,
.project-view-only .checkbox-wrapper .checkbox {
    pointer-events: none;
    opacity: 0.25;
    cursor: default;
}

.project-view-only .checkbox-wrapper .checkbox:hover {
    border-color: var(--text-tertiary);
}

.project-view-only .task-row {
    cursor: default;
}

.project-view-only .section-add-task-btn,
.project-view-only .section-menu-btn {
    display: none;
}

/* View-only board view */
.project-view-only .board-card-checkbox {
    pointer-events: none;
    opacity: 0.25;
}

.project-view-only .board-card {
    cursor: default;
}

.project-view-only .board-column-add,
.project-view-only .board-add-column {
    display: none;
}

.project-view-only .board-column-actions {
    display: none;
}

/* View-only task modal */
.task-view-only .modal-action-btn,
.task-view-only .modal-delete-btn,
.task-view-only #formatToolbar {
    display: none;
}

.task-view-only .modal-checkbox {
    pointer-events: none;
    opacity: 0.25;
}

/* ============================================================================
   END PROJECT SHARING
   ============================================================================ */

/* ============================================================================
   RECORDING SETTINGS TAB
   ============================================================================ */

/* Readiness Bar */
.recording-readiness-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

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

.readiness-dot.green {
    background: #34C759;
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.4);
}

.readiness-dot.amber {
    background: #FF9F0A;
    box-shadow: 0 0 6px rgba(255, 159, 10, 0.4);
}

.readiness-dot.red {
    background: #FF3B30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.4);
}

/* Permission Cards */
.permission-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permission-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-main);
}

.permission-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.permission-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.permission-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permission-card-info strong {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.permission-card-desc {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.permission-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Permission Pill */
.permission-pill {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.permission-pill.granted {
    background: rgba(52, 199, 89, 0.12);
    color: #34C759;
}

.permission-pill.denied {
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
}

.permission-pill.not-set {
    background: rgba(255, 159, 10, 0.12);
    color: #FF9F0A;
}

.permission-grant-btn {
    font-size: var(--font-size-xs);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent-blue);
    background: transparent;
    color: var(--accent-blue);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.permission-grant-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.permission-grant-btn.hidden {
    display: none;
}

/* Recording Device Rows */
.recording-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.recording-device-label {
    width: 90px;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.recording-device-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.recording-device-select {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}


/* Test Level Meter (inline vertical bar) */
.test-level-meter {
    width: 8px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    flex-shrink: 0;
}

.test-level-fill {
    width: 100%;
    height: 0%;
    border-radius: 4px;
    transition: height 0.08s linear;
    will-change: height;
    background: linear-gradient(0deg, #34C759 0%, #34C759 60%, #FFD60A 80%, #FF3B30 100%);
}

.test-cancel-btn {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    padding: 4px 8px;
}

/* Test Recording */
.test-recording-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.test-record-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
}

.test-record-btn.hidden,
.test-progress.hidden,
.test-playback.hidden {
    display: none;
}

.test-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 200px;
}

.test-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.test-progress-fill {
    height: 100%;
    border-radius: 3px;
    width: 0%;
    background: var(--accent-blue);
    transition: width 0.3s linear;
}

.test-progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.test-playback {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
}

.test-playback audio {
    flex: 1;
    height: 32px;
    max-width: 300px;
}

/* Storage */
.storage-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.storage-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.storage-toggle-info strong {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.storage-toggle-desc {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.local-folder-picker {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.local-folder-picker.hidden {
    display: none;
}

.folder-path-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-path-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.folder-path-value {
    flex: 1;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tab Health Dot (badge on tab button) */
.tab-health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.tab-health-dot.amber {
    background: #FF9F0A;
}

.tab-health-dot.red {
    background: #FF3B30;
}

/* Dark mode overrides */
[data-theme="dark"] .permission-card,
[data-theme="dark"] .recording-readiness-bar {
    border-color: var(--border-light);
}

[data-theme="dark"] .recording-device-select {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .local-folder-picker {
    background: var(--bg-tertiary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .permission-card,
    :root:not([data-theme="light"]) .recording-readiness-bar {
        border-color: var(--border-light);
    }

    :root:not([data-theme="light"]) .recording-device-select {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }

    :root:not([data-theme="light"]) .local-folder-picker {
        background: var(--bg-tertiary);
    }
}

/* Calendar date picker dark mode */
[data-theme="dark"] .calendar-day {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .calendar-day:not(.empty):hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .calendar-day.past {
    color: var(--text-tertiary);
}

[data-theme="dark"] .calendar-day.selected {
    background: var(--accent-blue);
    color: white;
}

[data-theme="dark"] .calendar-nav-btn,
[data-theme="dark"] .quick-select-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .calendar-nav-btn:hover,
[data-theme="dark"] .quick-select-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .datetime-date-input,
[data-theme="dark"] .datetime-time-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .calendar-day {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    :root:not([data-theme="light"]) .calendar-day:not(.empty):hover {
        background: var(--bg-tertiary);
    }

    :root:not([data-theme="light"]) .calendar-day.past {
        color: var(--text-tertiary);
    }

    :root:not([data-theme="light"]) .calendar-day.selected {
        background: var(--accent-blue);
        color: white;
    }

    :root:not([data-theme="light"]) .calendar-nav-btn,
    :root:not([data-theme="light"]) .quick-select-btn {
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    :root:not([data-theme="light"]) .calendar-nav-btn:hover,
    :root:not([data-theme="light"]) .quick-select-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    :root:not([data-theme="light"]) .datetime-date-input,
    :root:not([data-theme="light"]) .datetime-time-input {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-medium);
    }
}

/* ============================================================================
   END RECORDING SETTINGS TAB
   ============================================================================ */

/* ============================================================================
   PENDING REMINDERS SECTION
   A premium, compact section that surfaces Apple Reminders items at the top
   of the Inbox. Designed to feel native to Cadeo — not bolted on.
   ============================================================================ */

.pending-reminders-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 8px;
    padding: 0 0 8px;
}

/* Header row: icon + label + count badge + Import All */
.pending-reminders-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.pending-reminders-title {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: 1;
    min-width: 0;
}

.pending-reminders-bell {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.pending-reminders-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.pending-reminders-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-blue-opacity-12);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* "Import All" — minimal text link, not a CTA button */
.pending-reminders-import-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-blue);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.pending-reminders-import-all-btn:hover {
    background: var(--accent-blue-opacity-8);
    opacity: 1;
}

.pending-reminders-import-all-btn:active {
    background: var(--accent-blue-opacity-12);
}

.pending-reminders-import-all-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pending-reminders-import-all-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The list card container */
.pending-reminders-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

/* Individual reminder row */
.pending-reminder-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    border-bottom: 0.5px solid var(--border-light);
}

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

.pending-reminder-row:hover {
    background: var(--bg-tertiary);
}

/* Left accent line on hover — a subtle signal this row is actionable */
.pending-reminder-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--accent-blue);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pending-reminder-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Reminder content: title + date chip */
.pending-reminder-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.pending-reminder-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line-height-tight);
    flex-shrink: 1;
    min-width: 0;
}

/* Date chip — soft metadata, not competing with the title */
.pending-reminder-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--accent-blue-opacity-8);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.pending-reminder-due-chip svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Import pill — hidden by default, slides in on row hover */
.pending-reminder-import-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background var(--transition-fast);
    pointer-events: none;
}

.pending-reminder-row:hover .pending-reminder-import-pill {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.pending-reminder-import-pill:hover {
    background: var(--accent-blue-dark);
}

.pending-reminder-import-pill:active {
    transform: scale(0.97);
}

.pending-reminder-import-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pending-reminder-import-pill:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Importing state on the row itself */
.pending-reminder-row.is-importing {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Separator between reminders section and task list */
.pending-reminders-divider {
    height: 1px;
    margin: 4px 16px 12px;
    background: var(--border-light);
    display: none; /* only shown when there are tasks below */
}

.pending-reminders-divider.visible {
    display: block;
}

/* Reduced motion: disable slide/scale animations */
@media (prefers-reduced-motion: reduce) {
    .pending-reminder-row::before,
    .pending-reminder-import-pill {
        transition: opacity var(--transition-fast);
        transform: none !important;
    }
}

/* ============================================================================
   END PENDING REMINDERS SECTION
   ============================================================================ */

/* ============================================================================
   PENDING CALENDAR INVITES SECTION
   Surfaces Google Calendar events with responseStatus "needsAction" in the
   Inbox, with Accept / Decline / Maybe RSVP buttons.
   ============================================================================ */

.inbox-invites-section {
    width: 100%;
    margin: 0 auto 8px;
    padding: 0 0 8px;
}

.inbox-invites-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.inbox-invites-title {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: 1;
    min-width: 0;
}

.inbox-invites-title svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.inbox-invites-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.inbox-invites-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-blue-opacity-12);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    line-height: 1;
}

.inbox-invites-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4);
}

.invite-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.invite-card.is-responding {
    opacity: 0.6;
    pointer-events: none;
}

.invite-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 2px;
    transition: background 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.invite-card-content:hover {
    background: rgba(74, 144, 217, 0.06);
}

.invite-card-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.invite-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.invite-card-meta svg {
    flex-shrink: 0;
    color: var(--text-quaternary);
}

.invite-card-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-card-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    align-items: center;
}

.invite-rsvp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    min-height: 32px;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    line-height: 1;
    white-space: nowrap;
}

.invite-rsvp-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.invite-rsvp-btn:active {
    transform: scale(0.95);
}

.invite-rsvp-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.invite-rsvp-accept {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.invite-rsvp-accept:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.2);
}

.invite-rsvp-decline {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.invite-rsvp-decline:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
}

.invite-rsvp-maybe {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

.invite-rsvp-maybe:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
}

.invite-card-warning {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: #F59E0B;
}

.invite-card-warning svg {
    flex-shrink: 0;
    color: #F59E0B;
}

.invite-ai-suggestion {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-1-5);
    background: var(--accent-blue-opacity-06, rgba(74, 144, 217, 0.06));
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.invite-ai-suggestion svg {
    flex-shrink: 0;
    color: var(--accent-blue);
    margin-top: 1px;
}

.invite-ai-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--accent-blue-opacity-06, rgba(74, 144, 217, 0.2));
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: invite-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes invite-spin {
    to { transform: rotate(360deg); }
}

.invite-rsvp-btn.ai-suggested {
    outline: 1.5px solid currentColor;
    outline-offset: -1.5px;
}

@media (prefers-reduced-motion: reduce) {
    .invite-card {
        transition: none !important;
    }
    .invite-rsvp-btn {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================================
   END PENDING CALENDAR INVITES SECTION
   ============================================================================ */

/* ============================================================================
   INBOX CARD ROWS + ACTIVITY PANEL
   ============================================================================ */

/* Main column — holds top bar + scrollable canvas */
.inbox-main-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Card-style task rows ---- */
/* Scoped to inbox, today, and area views — project view excluded */

/* Grey background on scrollable task containers */
.inbox-main-canvas,
.today-tasks,
.area-tasks-container,
.project-tasks-container {
    background: var(--bg-secondary);
}

/* Task list spacing */
.inbox-view .task-list,
.today-view .task-list,
.area-view .task-list,
.tasks-view .task-list {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
}

/* Card task rows */
.inbox-view .task-row,
.today-view .task-row,
.area-view .task-row,
.tasks-view .task-row,
.project-modal-main .task-row {
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 14px;
    padding: var(--space-4) var(--space-4);
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Card hover transition — exclude rows mid-animation so animation classes own the transition */
.inbox-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.today-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.area-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.tasks-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.project-modal-main .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed) {
    transition: box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 150ms ease;
}

.inbox-view .task-row:hover,
.today-view .task-row:hover,
.area-view .task-row:hover,
.tasks-view .task-row:hover,
.project-modal-main .task-row:hover {
    background: var(--bg-card);
    border-color: #4A90D9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px) scale(1.002);
}

/* New task input — dashed border card */
/* Exclude .today-tasks-header .new-task-row — it lives inline with sort controls */
.inbox-view .new-task-row,
.today-view .new-task-row:not(.today-tasks-header .new-task-row),
.area-view .new-task-row,
.tasks-view .new-task-row,
.project-modal-main .new-task-row {
    background: var(--bg-card);
    border: 1.5px dashed rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: var(--space-4) var(--space-4);
    border-bottom: none;
    transition: border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-style 150ms ease;
}

.inbox-view .new-task-row:focus-within,
.today-view .new-task-row:not(.today-tasks-header .new-task-row):focus-within,
.area-view .new-task-row:focus-within,
.tasks-view .new-task-row:focus-within,
.project-modal-main .new-task-row:focus-within {
    border-style: solid;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
    opacity: 1;
}

/* Flatten task-content: title, chips, actions on one row */
.inbox-view .task-content,
.today-view .task-content,
.area-view .task-content,
.tasks-view .task-content,
.project-modal-main .task-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-2); /* 8px row gap gives breathing room when chips wrap below title */
}

/* Chips row: wrap below title when space is tight.
   flex-shrink:0 prevents squishing; flex-basis:240px sets the wrap trigger. */
.inbox-view .task-metadata,
.today-view .task-metadata,
.area-view .task-metadata,
.tasks-view .task-metadata {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 0 240px;
    gap: var(--space-2) var(--space-2);
}

/* When >2 chips, force metadata below the title instead of inline */
.inbox-view .task-content.chips-below .task-metadata,
.today-view .task-content.chips-below .task-metadata,
.area-view .task-content.chips-below .task-metadata,
.tasks-view .task-content.chips-below .task-metadata,
.project-modal-main .task-content.chips-below .task-metadata {
    flex: 0 0 100%;
}

/* Project modal is narrower — use a smaller wrap threshold */
.project-modal-main .task-metadata {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 0 160px;
    gap: var(--space-2) var(--space-2);
}

.inbox-view .task-quick-actions,
.today-view .task-quick-actions,
.area-view .task-quick-actions,
.tasks-view .task-quick-actions,
.project-modal-main .task-quick-actions {
    margin-left: auto;
}

.inbox-view .task-row .checkbox-wrapper,
.today-view .task-row .checkbox-wrapper,
.area-view .task-row .checkbox-wrapper,
.tasks-view .task-row .checkbox-wrapper,
.project-modal-main .task-row .checkbox-wrapper {
    align-self: center;
}

/* Project tasks container — horizontal padding for card rows */
.project-modal-main .project-tasks-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    scrollbar-width: none; /* Firefox */
}

.project-modal-main .project-tasks-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Project section tasks — reset negative margin, add gap between card rows */
.project-modal-main .section-tasks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    margin: 0;
}

.project-modal-main .unsectioned-drop-zone {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}

/* Activity Panel — always visible */
#inboxActivityPanel {
    width: 380px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-light);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6) var(--space-2);
}

.activity-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.activity-mark-all-read {
    height: 28px;
    padding: 0 8px;
    gap: 4px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.activity-mark-all-read:hover {
    background: var(--bg-secondary);
    color: var(--accent-blue);
}

/* Segmented control tabs */
.activity-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 2px;
    margin: 0 24px;
    gap: 2px;
}

.activity-tab {
    flex: 1;
    padding: 8px 12px;
    min-height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.activity-tab:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.activity-tab:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.activity-tab.active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    font-weight: 600;
}

[data-theme="dark"] .activity-tab.active {
    background: rgba(255, 255, 255, 0.1);
}

/* Activity list area */
.activity-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Activity item card */
.activity-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    transition: background 100ms ease;
}

.activity-item:hover {
    background: rgba(74, 144, 217, 0.04);
}

.activity-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.activity-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

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

.activity-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.activity-item-message {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.activity-item.expanded .activity-item-message {
    -webkit-line-clamp: unset;
    display: block;
}

.activity-item-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Unread item highlight with left-edge bar */
.activity-item.unread {
    background: rgba(74, 144, 217, 0.06);
}

.activity-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--accent-blue, #4A90D9);
    border-radius: 0 2px 2px 0;
}

/* Empty state */
.activity-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.activity-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.activity-empty-state p {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Activity group headers */
.activity-group-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 16px 0 6px;
}

.activity-group-header:first-child {
    padding-top: 0;
}

/* Activity meta row */
.activity-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.activity-item-entity {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Grouped notification badge (clickable) */
.activity-grouped-badge {
    display: inline-block;
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-family);
    color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.1);
    border: none;
    border-radius: 9px;
    text-align: center;
    line-height: 18px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    transition: background 100ms ease;
}

.activity-grouped-badge:hover {
    background: rgba(74, 144, 217, 0.18);
}

.activity-grouped-badge.expanded {
    background: rgba(74, 144, 217, 0.18);
}

/* Grouped items expand container */
.activity-grouped-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease, margin-top 200ms ease;
    margin-top: 0;
}

.activity-grouped-items.expanded {
    max-height: 2000px;
    margin-top: 8px;
}

.activity-grouped-sub-item {
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 8px;
    transition: background 100ms ease;
    border-radius: 4px;
}

.activity-grouped-sub-item:hover {
    background: rgba(74, 144, 217, 0.04);
}

.activity-grouped-sub-body {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-grouped-sub-time {
    font-size: 10px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Activity overlay panel (slides in from right) */
.activity-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    transition: opacity 300ms ease;
}

.activity-overlay-backdrop.visible {
    opacity: 1;
}

.activity-panel-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--bg-primary);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
}

.activity-panel-overlay.visible {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.activity-overlay-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.activity-overlay-close {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.activity-overlay-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Activity loading state */
.activity-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 0;
}

.activity-loading .loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: activitySpin 0.6s linear infinite;
}

@keyframes activitySpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .activity-panel-overlay,
    .activity-overlay-backdrop {
        transition: none;
    }
    .sidebar-notification-dot {
        animation: none;
    }
}

/* Dark mode overrides — card rows */
[data-theme="dark"] .inbox-view .task-row,
[data-theme="dark"] .today-view .task-row,
[data-theme="dark"] .area-view .task-row,
[data-theme="dark"] .tasks-view .task-row,
[data-theme="dark"] .project-modal-main .task-row {
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .inbox-view .task-row:hover,
[data-theme="dark"] .today-view .task-row:hover,
[data-theme="dark"] .area-view .task-row:hover,
[data-theme="dark"] .tasks-view .task-row:hover,
[data-theme="dark"] .project-modal-main .task-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .inbox-view .new-task-row,
[data-theme="dark"] .today-view .new-task-row:not(.today-tasks-header .new-task-row),
[data-theme="dark"] .area-view .new-task-row,
[data-theme="dark"] .tasks-view .new-task-row,
[data-theme="dark"] .project-modal-main .new-task-row {
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .activity-tabs {
    background: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .inbox-view .task-row,
    :root:not([data-theme="light"]) .today-view .task-row,
    :root:not([data-theme="light"]) .area-view .task-row,
    :root:not([data-theme="light"]) .tasks-view .task-row,
    :root:not([data-theme="light"]) .project-modal-main .task-row {
        border-color: rgba(255, 255, 255, 0.06);
    }
    :root:not([data-theme="light"]) .inbox-view .task-row:hover,
    :root:not([data-theme="light"]) .today-view .task-row:hover,
    :root:not([data-theme="light"]) .area-view .task-row:hover,
    :root:not([data-theme="light"]) .tasks-view .task-row:hover,
    :root:not([data-theme="light"]) .project-modal-main .task-row:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    :root:not([data-theme="light"]) .inbox-view .new-task-row,
    :root:not([data-theme="light"]) .today-view .new-task-row:not(.today-tasks-header .new-task-row),
    :root:not([data-theme="light"]) .area-view .new-task-row,
    :root:not([data-theme="light"]) .tasks-view .new-task-row,
    :root:not([data-theme="light"]) .project-modal-main .new-task-row {
        border-color: rgba(255, 255, 255, 0.06);
    }
    :root:not([data-theme="light"]) .activity-tabs {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Activity item entity badge */
.activity-item-entity {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

/* Activity item icon (for update items) */
.activity-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-item-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

/* Type-based icon colors */
.activity-item-icon.activity-icon-completed {
    background: rgba(74, 144, 217, 0.12);
}

.activity-item-icon.activity-icon-completed svg {
    color: var(--accent-blue, #4A90D9);
}

.activity-item-icon.activity-icon-warm {
    background: rgba(245, 158, 11, 0.12);
}

.activity-item-icon.activity-icon-warm svg {
    color: #F59E0B;
}

.activity-item-icon.activity-icon-insight {
    background: rgba(139, 92, 246, 0.12);
}

.activity-item-icon.activity-icon-insight svg {
    color: #8B5CF6;
}

/* ============================================================================
   Conversation Slide-Over Panel
   ============================================================================ */

.conversation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.conversation-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.conversation-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
}

.conversation-overlay.visible .conversation-panel {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

.conversation-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-family);
    transition: background var(--transition-fast);
}

.conversation-header-left:hover {
    background: var(--surface-hover);
}

.conversation-header-left:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.conversation-entity-icon {
    display: flex;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.conversation-entity-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.conversation-entity-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.conversation-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.conversation-thread {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.conversation-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    padding: 48px 24px;
}

.conversation-message {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.conversation-message.own .conversation-message-content {
    background: rgba(74, 144, 217, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
}

.conversation-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.conversation-message-content {
    flex: 1;
    min-width: 0;
}

.conversation-message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.conversation-message-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.conversation-message-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.conversation-message-body {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.conversation-reply-area {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-light);
}

.conversation-reply-input {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    overflow-y: auto;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.conversation-reply-input:focus {
    border-color: var(--accent-blue);
}

.conversation-reply-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

.conversation-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.conversation-send-btn:hover {
    background: var(--accent-blue-hover, #357ABD);
}

.conversation-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Comment loading spinner (shared) */
.conversation-loading,
.modal-comments-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.comment-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: comment-spin 0.6s linear infinite;
}

@keyframes comment-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .comment-spinner {
        animation: none;
        opacity: 0.6;
    }
}

/* ============================================================================
   Task Modal Comments Panel
   ============================================================================ */

/* Comment count badge on toolbar button */
.comment-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-blue);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Make the comments button position: relative for the badge */
.modal-action-btn[data-action="comments"] {
    position: relative;
}

/* Modal content wrapper for side-by-side layout */
.modal-content-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
}

.modal-content-wrapper > .task-note-editor {
    flex: 1;
    min-width: 0;
}

/* Expanded modal when comments are open */
.task-modal.has-comments:not(.fullscreen) {
    max-width: 1100px;
}

/* When comments are open, strip all padding from modal-body so the comments panel
   spans the full height (header divider to bottom edge) and flush right.
   Padding is moved to the editor content side instead. */
.task-modal.has-comments .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.task-modal.has-comments .modal-content-wrapper > .task-note-editor {
    padding: var(--space-8);
}

.task-modal.has-comments.fullscreen .modal-content-wrapper > .task-note-editor {
    padding: 32px 48px;
}

/* Comments panel within the modal */
.modal-comments-panel {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-lg) 0;
}

.modal-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.modal-comments-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.modal-comments-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 10px;
}

.modal-comments-thread {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.modal-comments-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    padding: 32px 16px;
}

.modal-comment {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.modal-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

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

.modal-comment-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.modal-comment-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-comment-time {
    font-size: 10px;
    color: var(--text-tertiary);
}

.modal-comment-body {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

.comment-mention {
    color: var(--accent-blue);
    font-weight: 600;
    cursor: default;
    border-radius: 3px;
    padding: 0 2px;
    background: rgba(74, 144, 217, 0.08);
}

.modal-comments-reply {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
}

.modal-comments-input {
    flex: 1;
    min-height: 32px;
    max-height: 80px;
    overflow-y: auto;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color var(--transition-fast);
}

.modal-comments-input:focus {
    border-color: var(--accent-blue);
}

.modal-comments-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

.modal-comments-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.modal-comments-send:hover {
    background: var(--accent-blue-hover, #357ABD);
}

.modal-comments-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark mode for conversation and comments */
[data-theme="dark"] .conversation-overlay {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .conversation-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .modal-comments-count {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .activity-item:hover {
    background: rgba(74, 144, 217, 0.06);
}

[data-theme="dark"] .conversation-reply-input {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .modal-comments-input {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .conversation-message.own .conversation-message-content {
    background: rgba(74, 144, 217, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .conversation-overlay {
        background: rgba(0, 0, 0, 0.5);
    }
    :root:not([data-theme="light"]) .conversation-close:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    :root:not([data-theme="light"]) .modal-comments-count {
        background: rgba(255, 255, 255, 0.08);
    }
    :root:not([data-theme="light"]) .activity-item:hover {
        background: rgba(74, 144, 217, 0.06);
    }
}

/* Reduced motion — disable slide/fade animations */
@media (prefers-reduced-motion: reduce) {
    .conversation-overlay,
    .conversation-panel {
        transition: none;
    }
    .task-modal.has-comments {
        transition: none;
    }
}

/* Responsive: conversation panel full width on small screens */
@media (max-width: 600px) {
    .conversation-panel {
        width: 100%;
    }
    .modal-comments-panel {
        width: 280px;
    }
}

/* Activity toggle button for small screens */
.activity-toggle-responsive {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.activity-toggle-responsive:hover {
    background: var(--bg-secondary);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* Responsive: hide activity panel on small screens, show toggle button */
@media (max-width: 1024px) {
    #inboxActivityPanel {
        display: none !important;
    }
    .activity-toggle-responsive {
        display: flex;
    }
}

@media (max-width: 768px) {
    .inbox-view .task-row,
    .today-view .task-row,
    .area-view .task-row,
    .tasks-view .task-row,
    .project-modal-main .task-row {
        padding: 12px 14px;
    }
    .inbox-view .new-task-row,
    .today-view .new-task-row:not(.today-tasks-header .new-task-row),
    .area-view .new-task-row,
    .tasks-view .new-task-row,
    .project-modal-main .new-task-row {
        padding: 12px 14px;
    }
}

/* Reduced motion — keep hover feedback but remove transform */
@media (prefers-reduced-motion: reduce) {
    .inbox-view .task-row,
    .today-view .task-row,
    .area-view .task-row,
    .tasks-view .task-row,
    .project-modal-main .task-row {
        transition: box-shadow 150ms ease, background 150ms ease;
    }
    .inbox-view .task-row:hover,
    .today-view .task-row:hover,
    .area-view .task-row:hover,
    .tasks-view .task-row:hover,
    .project-modal-main .task-row:hover {
        transform: none;
    }
}

/* ============================================================================
   END INBOX CARD ROWS + ACTIVITY PANEL
   ============================================================================ */

/* ============================================================================
   ENTITY LINKS — Related Content Section
   ============================================================================ */

.entity-links-section {
    border-top: 1px solid var(--border-light);
    padding: 12px 16px;
    margin-top: 8px;
    flex-shrink: 0;
}

.entity-links-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    border-radius: 4px;
}

.entity-links-header:hover {
    opacity: 0.8;
}

.entity-links-expanded .entity-links-header {
    margin-bottom: 8px;
}

.entity-links-chevron {
    flex-shrink: 0;
    color: var(--text-secondary, #888);
    transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.entity-links-expanded .entity-links-chevron {
    transform: rotate(90deg);
}

.entity-links-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #888);
}

.entity-links-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    background: var(--bg-hover, rgba(0,0,0,0.06));
    border-radius: 8px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.entity-links-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.entity-links-list--collapsed {
    display: none;
}

.entity-links-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms ease, opacity 200ms ease;
}

.entity-links-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.entity-links-icon {
    flex-shrink: 0;
    color: var(--text-secondary, #888);
    display: flex;
    align-items: center;
}

.entity-links-title {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary, #1A1A2E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-links-confidence {
    font-size: 11px;
    color: var(--text-tertiary, #aaa);
    flex-shrink: 0;
}

.entity-links-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4A90D9;
    background: rgba(74, 144, 217, 0.1);
    border-radius: 4px;
    padding: 2px 5px;
    flex-shrink: 0;
}

.entity-links-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 100ms ease;
}

.entity-links-item:hover .entity-links-actions {
    opacity: 1;
}

.entity-links-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    padding: 0;
    transition: background 100ms ease, color 100ms ease;
}

.entity-links-btn:hover {
    background: var(--bg-hover, rgba(0,0,0,0.08));
}

.entity-links-confirm:hover {
    color: #10B981;
}

.entity-links-dismiss:hover {
    color: #EF4444;
}

/* Dark mode */
[data-theme="dark"] .entity-links-section {
    border-top-color: var(--border-light, rgba(255,255,255,0.08));
}

[data-theme="dark"] .entity-links-title {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .entity-links-count {
    background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .entity-links-item:hover {
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .entity-links-btn:hover {
    background: rgba(255,255,255,0.1);
}

@media (prefers-reduced-motion: reduce) {
    .entity-links-item,
    .entity-links-actions,
    .entity-links-btn,
    .entity-links-chevron,
    .entity-links-list {
        transition: none;
    }
}

/* ============================================================================
   END ENTITY LINKS
   ============================================================================ */

/* ============================================================================
   NOTE TASK DETECTION — Suggestion bar for detected actionable items
   ============================================================================ */

.note-task-suggestions {
    margin: 12px 0 8px;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary, #fff);
}

.note-task-suggestions-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(74, 144, 217, 0.04);
    border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.note-task-suggestions-icon {
    display: flex;
    align-items: center;
    color: #4A90D9;
    flex-shrink: 0;
}

.note-task-suggestions-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1A1A2E);
}

.note-task-suggestions-dismiss {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    border-radius: 4px;
    color: var(--text-tertiary, #999);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 100ms ease, color 100ms ease;
}

.note-task-suggestions-dismiss:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary, #666);
}

.note-task-suggestion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.note-task-suggestion-item:last-child {
    border-bottom: none;
}

.note-task-suggestion-title {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary, #1A1A2E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-task-suggestion-create {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #4A90D9;
    background: none;
    border: 1px solid #4A90D9;
    border-radius: 6px;
    padding: 4px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.note-task-suggestion-create:hover {
    background: #4A90D9;
    color: #fff;
}

/* Dark mode */
[data-theme="dark"] .note-task-suggestions {
    border-color: rgba(255,255,255,0.1);
    background: var(--bg-primary, #1a1a2e);
}

[data-theme="dark"] .note-task-suggestions-header {
    background: rgba(74, 144, 217, 0.08);
    border-bottom-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .note-task-suggestions-dismiss:hover {
    background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .note-task-suggestion-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .note-task-suggestion-create {
    color: #6BB0F0;
    border-color: #6BB0F0;
}

[data-theme="dark"] .note-task-suggestion-create:hover {
    background: #6BB0F0;
    color: #1a1a2e;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .note-task-suggestions {
        border-color: rgba(255,255,255,0.1);
        background: var(--bg-primary, #1a1a2e);
    }

    :root:not([data-theme="light"]) .note-task-suggestions-header {
        background: rgba(74, 144, 217, 0.08);
        border-bottom-color: rgba(255,255,255,0.1);
    }

    :root:not([data-theme="light"]) .note-task-suggestions-dismiss:hover {
        background: rgba(255,255,255,0.1);
    }

    :root:not([data-theme="light"]) .note-task-suggestion-item {
        border-bottom-color: rgba(255,255,255,0.06);
    }

    :root:not([data-theme="light"]) .note-task-suggestion-create {
        color: #6BB0F0;
        border-color: #6BB0F0;
    }

    :root:not([data-theme="light"]) .note-task-suggestion-create:hover {
        background: #6BB0F0;
        color: #1a1a2e;
    }
}

@media (prefers-reduced-motion: reduce) {
    .note-task-suggestions-dismiss,
    .note-task-suggestion-create {
        transition: none;
    }
}

/* ============================================================================
   END NOTE TASK DETECTION
   ============================================================================ */

/* ============================================================================
   EDITOR LINK STYLES (AutoLink)
   Styles anchor elements created inside contenteditable editors.
   Cmd+Click (Mac) / Ctrl+Click (Windows) opens the link.
   ============================================================================ */

[contenteditable] a[href] {
    color: #4A90D9;
    text-decoration: underline;
    cursor: text; /* preserve editing cursor — Cmd+Click opens the link */
    word-break: break-all; /* prevent long URLs from overflowing */
}

[contenteditable] a[href]:hover {
    color: #357ABD;
}

:root:not([data-theme="light"]) [contenteditable] a[href],
[data-theme="dark"] [contenteditable] a[href] {
    color: #6BB0F0;
}

:root:not([data-theme="light"]) [contenteditable] a[href]:hover,
[data-theme="dark"] [contenteditable] a[href]:hover {
    color: #4A90D9;
}

/* ============================================================================
   END EDITOR LINK STYLES
   ============================================================================ */