:root {
            --font-primary: 'Inter', 'Cairo';
            --font-scale: 1;
            --brand-50: #EEF0FF;
            --brand-100: #E0E3FF;
            --brand-200: #C7CCFE;
            --brand-300: #A5ACFC;
            --brand-400: #8186F8;
            --brand-500: #6959F6;
            --brand-600: #5842F4;
            --brand-700: #4632D9;
            --brand-800: #3929B0;
            --brand-900: #31268B;
            --brand-glow: rgba(88, 66, 244, 0.36);
            --density-py: 0.875rem;
            --density-px: 1rem;
            --density-gap: 0.5rem;
        }

        [data-accent="indigo"] {
            --brand-50: #EEF0FF;
            --brand-100: #E0E3FF;
            --brand-500: #6959F6;
            --brand-600: #5842F4;
            --brand-700: #4632D9;
            --brand-glow: rgba(88, 66, 244, 0.36);
        }

        [data-accent="emerald"] {
            --brand-50: #ECFDF5;
            --brand-100: #D1FAE5;
            --brand-500: #10B981;
            --brand-600: #059669;
            --brand-700: #047857;
            --brand-glow: rgba(5, 150, 105, 0.34);
        }

        [data-accent="rose"] {
            --brand-50: #FFF1F2;
            --brand-100: #FFE4E6;
            --brand-500: #F43F5E;
            --brand-600: #E11D48;
            --brand-700: #BE123C;
            --brand-glow: rgba(225, 29, 72, 0.34);
        }

        [data-accent="amber"] {
            --brand-50: #FFFBEB;
            --brand-100: #FEF3C7;
            --brand-500: #F59E0B;
            --brand-600: #D97706;
            --brand-700: #B45309;
            --brand-glow: rgba(217, 119, 6, 0.34);
        }

        [data-accent="cyan"] {
            --brand-50: #ECFEFF;
            --brand-100: #CFFAFE;
            --brand-500: #06B6D4;
            --brand-600: #0284C7;
            --brand-700: #0369A1;
            --brand-glow: rgba(2, 132, 199, 0.34);
        }

        [data-accent="violet"] {
            --brand-50: #F5F3FF;
            --brand-100: #EDE9FE;
            --brand-500: #8B5CF6;
            --brand-600: #7C3AED;
            --brand-700: #6D28D9;
            --brand-glow: rgba(124, 58, 237, 0.36);
        }

        [data-density="compact"] {
            --density-py: 0.55rem;
            --density-px: 0.75rem;
            --density-gap: 0.25rem;
        }

        [data-density="cozy"] {
            --density-py: 0.72rem;
            --density-px: 0.875rem;
            --density-gap: 0.375rem;
        }

        [data-density="comfortable"] {
            --density-py: 0.92rem;
            --density-px: 1.05rem;
            --density-gap: 0.5rem;
        }

        html {
            font-size: calc(16px * var(--font-scale));
        }

        body {
            font-family: var(--font-primary), 'Inter', 'Cairo', system-ui, -apple-system, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        /* Dribbble Reference Geometric Canvas Backdrop (Mari Chubina for United style) */
        .dribbble-stage-bg {
            background-color: #B4B8F8;
            position: relative;
            overflow: hidden;
        }

        .dark .dribbble-stage-bg {
            background-color: #0B0D16;
        }

        /* Custom Scrollbars */
        .custom-scroll::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .custom-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.32);
            border-radius: 9999px;
        }

        .custom-scroll:hover::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.55);
        }

        .dark .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(71, 85, 105, 0.45);
        }

        .dark .custom-scroll:hover::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.7);
        }

        /* Active Email Card in Middle List (Exact match to Erpeco Client Desk purple card) */
        .mail-card-selected {
            background-color: var(--brand-600) !important;
            color: #FFFFFF !important;
            box-shadow: 0 12px 24px -6px var(--brand-glow), 0 4px 10px -3px rgba(0, 0, 0, 0.12);
            transform: translateY(-1px);
        }

        .mail-card-item {
            padding: var(--density-py) var(--density-px);
            margin-bottom: var(--density-gap);
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mail-card-item:not(.mail-card-selected):hover {
            background-color: rgba(255, 255, 255, 0.72);
            transform: translateY(-1px);
        }

        .dark .mail-card-item:not(.mail-card-selected):hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        /* Sidebar Navigation Active State */
        .nav-item-active {
            color: var(--brand-600) !important;
            font-weight: 600;
            background-color: rgba(88, 66, 244, 0.08);
        }

        .dark .nav-item-active {
            color: #818CF8 !important;
            background-color: rgba(129, 140, 248, 0.13);
        }

        /* Traffic Lights Hover Effects */
        .traffic-dot {
            transition: transform 0.15s ease, filter 0.15s ease;
        }

        .traffic-dot:hover {
            transform: scale(1.15);
            filter: brightness(0.95);
        }

        /* Animations */
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.97) translateY(4px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes pulseSubtle {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.55;
            }
        }

        .animate-fade-scale {
            animation: fadeInScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .animate-slide-right {
            animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Attachment Card Hover */
        .attachment-card {
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .attachment-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px -5px rgba(20, 20, 43, 0.1);
        }

        .dark .attachment-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        }

        /* Selectable text inside email reader */
        .email-body-selectable {
            user-select: text;
        }

        /* Custom Toggle Switch */
        .toggle-checkbox:checked {
            right: 0;
            border-color: var(--brand-600);
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: var(--brand-600);
        }

        /* Print Mode */
        @media print {
            .no-print {
                display: none !important;
            }

            body,
            html {
                overflow: visible !important;
                background: #fff !important;
            }

            #reader-pane {
                width: 100% !important;
                position: static !important;
                box-shadow: none !important;
            }
        }

        /* Compose Modal Fullscreen Mode */
        #compose-modal-container.compose-is-fullscreen {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: 100% !important;
            max-height: 100% !important;
            border-radius: 0 !important;
            margin: 0 !important;
            z-index: 60 !important;
        }

        #compose-modal-container.compose-is-fullscreen > div:nth-child(2) {
            max-height: none !important;
            height: calc(100vh - 140px) !important;
        }

        #compose-modal-container.compose-is-fullscreen textarea#compose-body-input {
            min-height: 380px !important;
        }

/* Cross-browser high-contrast styling for selects and options */
select option {
    background-color: #1E2233 !important;
    color: #F8FAFC !important;
}
html:not(.dark) select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}