:root {
            --bg-color: #f0f2f5;
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(255, 255, 255, 0.4);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            --primary: #007AFF;
            --primary-hover: #0056b3;
            --danger: #FF3B30;
            --success: #34C759;
            --warning: #FFCC00;
            --text-main: #1d1d1f;
            --text-secondary: #86868b;
            --radius-lg: 16px;
            --radius-md: 10px;
            --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --base-font-size: 14px;
        
            --table-head-bg: rgb(245,245,247);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1c1c1e;
                --glass-bg: rgba(44, 44, 46, 0.75);
                --glass-border: rgba(255, 255, 255, 0.1);
                --text-main: #f5f5f7;
                --text-secondary: #aeaeb2;
                --table-head-bg: rgb(44,44,46);
            }
        }
        @media (prefers-color-scheme: dark) {
            .rep-btn {
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.14);
                color: var(--text-main);
            }
            .rep-btn:hover { background: var(--primary); color: #fff; }
        }

        * { box-sizing: border-box; outline: none; }
        *:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-family);
            background: var(--bg-color);
            background-size: cover;
            height: 100vh;
            overflow: hidden;
            color: var(--text-main);
            font-size: var(--base-font-size);
            transition: background 0.3s, font-size 0.2s;
        }

        /* --- Utilities --- */
        .hidden { display: none !important; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .center { align-items: center; justify-content: center; }
        .gap-10 { gap: 10px; }
        .gap-20 { gap: 20px; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        
        /* Glassmorphism Base */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            border-radius: var(--radius-lg);
        }

        /* --- Components --- */
        button {
            cursor: pointer;
            border: none;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            padding: 10px 20px;
            border-radius: var(--radius-md);
            font-weight: 500;
        }
        .btn-primary:hover { background: var(--primary-hover); transform: scale(1.02); }

        .btn-secondary {
            background: rgba(0,0,0,0.05);
            color: var(--text-main);
            padding: 10px 20px;
            border-radius: var(--radius-md);
        }
        .btn-secondary:hover { background: rgba(0,0,0,0.1); }

        .btn-danger {
            background: var(--danger);
            color: white;
            padding: 8px 16px;
            border-radius: var(--radius-md);
        }
        .btn-danger:hover { background: #d63026; }

        .icon-btn {
            background: transparent;
            font-size: 1.2rem;
            padding: 8px;
            border-radius: 50%;
        }
        .icon-btn:hover { background: rgba(0,0,0,0.05); }

        /* Settings icon button (3D gear chip) */
        .settings-icon-btn {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.52);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 28% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0.45) 44%, rgba(173,187,207,0.95) 100%);
            box-shadow: 0 12px 26px rgba(0,0,0,0.18), inset 0 2px 2px rgba(255,255,255,0.92), inset 0 -8px 12px rgba(44,76,114,0.20);
            color: #20476f;
            position: relative;
            overflow: hidden;
            transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
        }
        .settings-icon-btn::before{
            content: "";
            position: absolute;
            inset: -16px auto auto -10px;
            width: 46px;
            height: 32px;
            border-radius: 999px;
            background: rgba(255,255,255,0.62);
            transform: rotate(-12deg);
            pointer-events: none;
        }
        .settings-icon-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.03);
            box-shadow: 0 15px 28px rgba(0,0,0,0.22), inset 0 2px 2px rgba(255,255,255,0.98), inset 0 -9px 14px rgba(44,76,114,0.24);
        }
        .settings-icon-btn:active {
            transform: translateY(0);
            box-shadow: 0 9px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.84), inset 0 -7px 10px rgba(44,76,114,0.18);
        }
        .settings-icon-btn svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 1px 0 rgba(255,255,255,0.65));
            z-index: 1;
            transition: transform 0.35s ease;
        }
        .settings-icon-btn:hover svg{
            transform: rotate(42deg);
        }
        @media (prefers-color-scheme: dark){
            .settings-icon-btn{
                border-color: rgba(130,173,214,0.30);
                background: radial-gradient(circle at 28% 20%, rgba(121,150,182,0.44), rgba(52,73,99,0.95) 58%, rgba(25,37,53,0.96) 100%);
                color: #d4e7fb;
                box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -8px 12px rgba(0,0,0,0.35);
            }
            .settings-icon-btn::before{
                background: rgba(198,220,245,0.18);
            }
        }

        .settings-close-btn{
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid rgba(84,132,172,0.22);
            background: rgba(255,255,255,0.72);
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .settings-close-btn svg{
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        @media (prefers-color-scheme: dark){
            .settings-close-btn{
                border-color: rgba(130,173,214,0.26);
                background: rgba(29,44,63,0.86);
            }
        }

        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.5);
            font-size: 14px;
            color: var(--text-main);
            transition: 0.2s;
        }

        input:focus, select:focus, textarea:focus {
            border-color: var(--primary);
            background: rgba(255,255,255,0.9);
            box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
            color: #000;
        }
        
        label {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 4px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        input[readonly] { background: rgba(0,0,0,0.03); cursor: not-allowed; color: var(--text-main); }

        /* --- Login Screen --- */
        #login-screen {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1000;
            background: url('https://picsum.photos/seed/bg_blur/1920/1080') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        #login-screen::before {
            content: '';
            position: absolute;
            top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }
        .login-card {
            position: relative;
            width: min(420px, 92vw);
            max-height: calc(100vh - 40px);
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: clamp(18px, 5vw, 40px);
            text-align: center;
            z-index: 1001;
        }
        .login-logo{
            width: min(230px, 64vw);
            max-height: 110px;
            object-fit: contain;
            display: block;
            margin: 2px auto 12px;
            filter: drop-shadow(0 8px 18px rgba(0,0,0,0.28));
        }
        .passcode-display {
            font-size: clamp(24px, 6vw, 32px);
            letter-spacing: clamp(6px, 2.2vw, 10px);
            margin: 16px 0 20px;
            height: auto;
            min-height: 44px;
            color: var(--text-main);
            word-break: break-word;
        }
        .numpad {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(10px, 3vw, 15px);
            justify-items: center;
        }
        .num-btn {
            width: min(70px, 22vw);
            height: min(70px, 22vw);
            max-width: 70px;
            max-height: 70px;
            border-radius: 999px;
            font-size: clamp(18px, 5vw, 24px);
            font-weight: 600;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,0.65), rgba(255,255,255,0.20) 42%, rgba(255,255,255,0.08) 68%),
                linear-gradient(160deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14));
            color: #f8fbff;
            border: 1px solid rgba(255,255,255,0.36);
            backdrop-filter: blur(14px) saturate(130%);
            -webkit-backdrop-filter: blur(14px) saturate(130%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.52),
                0 10px 20px rgba(0,0,0,0.24);
            touch-action: manipulation;
        }
        .num-btn[data-action="clear"]{
            color: #fff7f7;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,236,236,0.68), rgba(255,108,108,0.18) 48%, rgba(255,88,88,0.08) 70%),
                linear-gradient(160deg, rgba(255,255,255,0.26), rgba(255,117,117,0.14));
        }
        .num-btn[data-action="enter"]{
            color: #effff6;
            background:
                radial-gradient(circle at 30% 25%, rgba(234,255,244,0.72), rgba(74,222,128,0.18) 48%, rgba(42,166,95,0.09) 70%),
                linear-gradient(160deg, rgba(255,255,255,0.30), rgba(52,199,89,0.15));
        }
        .num-btn:hover, .num-btn:active { 
            transform: scale(0.95);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.58),
                0 12px 22px rgba(0,0,0,0.30);
        }
        .num-btn { cursor: pointer; -webkit-tap-highlight-color: rgba(255,255,255,0.3); }

        .welcome-flash{
            position: fixed;
            top: 18px;
            left: 50%;
            transform: translateX(-50%) translateY(-14px);
            z-index: 3500;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.14));
            border: 1px solid rgba(255,255,255,0.42);
            backdrop-filter: blur(16px) saturate(135%);
            -webkit-backdrop-filter: blur(16px) saturate(135%);
            color: #f4fbff;
            font-weight: 900;
            letter-spacing: 0.25px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.54);
            opacity: 0;
            pointer-events: none;
        }
        .welcome-flash.show{
            animation: welcomeFlashInOut 1.65s ease-in-out forwards;
        }
        @keyframes welcomeFlashInOut{
            0%{ opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.96); }
            14%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            78%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            100%{ opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
        }

        @media (max-width: 380px) {
            #login-screen { padding: 12px; }
        }

        /* --- App Shell --- */
        #app-shell {
            display: flex;
            flex-direction: column;
            height: 100vh;
            min-height: 0;
            padding: 20px;
            max-width: 1600px;
            margin: 0 auto;
        }
        #main-content{
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            min-width: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Top Nav */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            margin-bottom: 20px;
        }
        .logo { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
        .logo span { background: linear-gradient(45deg, #007AFF, #00C6FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .user-info { display: flex; align-items: center; gap: 15px; font-size: 14px; font-weight: 500; }

        /* Navigation Grid (Home) */
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            height: 100%;
            align-content: center;
            padding-bottom: 100px;
        }

        /* --- Dashboard Widgets (Main Screen) --- */
        .dash-widgets{
            display: grid;
            grid-template-columns: repeat(4, minmax(220px, 1fr));
            gap: 14px;
        }
        @media (max-width: 1100px){
            .dash-widgets{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
        }
        @media (max-width: 640px){
            .dash-widgets{ grid-template-columns: 1fr; }
        }
        .dash-card{
            padding: 14px 14px 12px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,0.12);
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04));
            cursor: default;
        }
        .dash-card:hover{ transform: translateY(-1px); }
        .dash-card-click{ cursor: pointer; }
        .dash-card-top{
            display:flex;
            align-items:center;
            justify-content: space-between;
            gap: 10px;
        }
        .dash-title{
            font-size: 12px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 700;
        }
        .dash-big{
            font-size: 28px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1;
        }
        .dash-sub{
            margin-top: 6px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .dash-mini{
            margin-top: 10px;
            font-size: 12px;
            color: var(--text-secondary);
            opacity: 0.95;
        }

        .donut-wrap{ width: 92px; height: 92px; flex: 0 0 auto; }
        .donut-bg{ fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 10; }
        .donut-seg{ fill: none; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
        .donut-text{ fill: var(--text-main); font-size: 16px; font-weight: 800; dominant-baseline: middle; }

        .dash-legend{ display:flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
        .legend-item{ display:flex; align-items:center; gap: 8px; font-size: 13px; color: var(--text-main); }
        .legend-num{ font-weight: 800; color: var(--text-main); opacity: 0.9; }
        .dot{ width: 10px; height: 10px; border-radius: 999px; display:inline-block; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
        .dot-success{ background: var(--success); }
        .dot-danger{ background: var(--danger); }
        .dot-warning{ background: var(--warning); }

        /* --- Apple-style icon chip --- */
        .nav-icon.nav-3d{
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.58));
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 8px 18px rgba(0,0,0,0.10);
            backdrop-filter: blur(10px);
        }
        @media (prefers-color-scheme: dark){
            .nav-icon.nav-3d{
                background: linear-gradient(180deg, rgba(58,58,60,0.90), rgba(44,44,46,0.76));
                border: 1px solid rgba(255,255,255,0.10);
                box-shadow: 0 10px 22px rgba(0,0,0,0.35);
            }
        }
        .nav-icon.nav-3d svg{
            width: 22px; height: 22px;
            fill: var(--text-main);
            opacity: 0.92;
        }

        .brand-logo{
            width: 36px;
            height: 36px;
            border-radius: 10px;
            object-fit: cover;
            box-shadow: 0 10px 24px rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.16);
        }
.nav-card {
            height: 200px;
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
            text-decoration: none;
            color: var(--text-main);
        }
        .nav-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.9); color: #000; }
        .nav-card i { font-size: 40px; margin-bottom: 15px; color: var(--primary); }
        .nav-card h3 { margin: 0; font-size: 18px; }


        /* --- Professional 3D Icon Set (Home tiles) --- */
        .icon-container{
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .icon-container:hover{
            transform: translateY(-8px) scale(1.02);
        }
        .icon-3d{
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15))
                    drop-shadow(0 8px 10px rgba(0,0,0,0.10));
            transition: filter 0.3s ease;
        }
        .icon-container:hover .icon-3d{
            filter: drop-shadow(0 30px 40px rgba(0,0,0,0.20))
                    drop-shadow(0 12px 15px rgba(0,0,0,0.15));
        }
        .glass-panel{
            background: rgba(255, 255, 255, 0.70);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.50);
        }
        @media (prefers-color-scheme: dark){
            .glass-panel{
                background: rgba(44, 44, 46, 0.72);
                border: 1px solid rgba(255,255,255,0.10);
            }
        }
        .nav-card3d{
            border-radius: 24px;
            padding: 18px;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            gap: 10px;
            min-height: 230px;
            cursor:pointer;
            user-select:none;
        }
        .nav-card3d span{
            margin-top: 6px;
            font-weight: 700;
            font-size: 16px;
            color: var(--text-main);
        }
        .nav-card3d:hover span{ color: var(--primary); }
        .nav-card3d svg{ width: 120px; height: 120px; }
        @media (max-width: 520px){
            .nav-card3d{ min-height: 210px; }
            .nav-card3d svg{ width: 104px; height: 104px; }
        }

        /* Agent Dashboard Cards (Consistent Size) */
        .agent-db-card {
            height: 200px;
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
            text-decoration: none;
            color: var(--text-main);
        }
        .agent-db-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.9); color: #000; }
        .agent-db-card i { font-size: 50px; margin-bottom: 15px; color: var(--primary); }
        .agent-db-card h3 { margin: 0; font-size: 18px; text-align: center; }

        /* Views Layout */
        .view-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Key for scroll fix */
            min-height: 0;
            min-width: 0;
            padding: 20px;
        }
        .view-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }
        .content-area {
            flex: 1; /* Take remaining height */
            overflow: auto; /* Enable vertical and horizontal scrolling */
            padding-right: 10px;
            min-height: 0;
            min-width: 0;
        }

        /* Tables */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            white-space: nowrap;
        }
        .data-table th { text-align: left; padding: 12px; background: var(--table-head-bg); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(0,0,0,0.08); background-clip: padding-box; }
        .data-table td { padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
        /* Force opaque sticky table headers everywhere */
        .data-table thead th,
        .data-table th {
            background-color: var(--table-head-bg) !important;
            opacity: 1 !important;
            backdrop-filter: none !important;
        }

        .data-table tr:hover { background: rgba(0,122,255,0.05); cursor: pointer; }
        .badge { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
        .badge-residential { background: #E3F2FD; color: #1976D2; }
        .badge-business { background: #E8F5E9; color: #2E7D32; }
        .badge-industrial { background: #FFF3E0; color: #EF6C00; }
        .badge-neutral { background: #d1d1d6; color: #1c1c1e; }

        /* Status Colors */
        .status-red { color: var(--danger); font-weight: 600; }
        .status-yellow { color: #b58900; font-weight: 600; }
        .status-green { color: var(--success); font-weight: 600; }

        /* Stats Box */
        .stats-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .stat-box {
            flex: 1;
            background: rgba(0,0,0,0.03);
            border-radius: var(--radius-md);
            padding: 15px;
            text-align: center;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .stat-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; }
        .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); margin-top: 5px; }

        /* Customer Form */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .form-section { grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 10px; padding-top: 20px; font-weight: 600; color: var(--primary); }
        .full-width { grid-column: 1 / -1; }
        .input-group { margin-bottom: 15px; }
        .esid-group { display: flex; gap: 5px; }
        
        /* Profile View */
        .profile-layout { display: flex; gap: 20px; height: 100%; }
        .profile-sidebar { width: 250px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
        .profile-tab-btn {
            padding: 12px; text-align: left; background: transparent; border-radius: var(--radius-md);
            color: var(--text-secondary); font-weight: 500;
        }
        .profile-tab-btn.active { background: var(--primary); color: white; }
        .profile-content { flex: 1; overflow-y: auto; min-width: 0; display: flex; flex-direction: column; }
        .profile-tab-content { width: 100%; }

        
        /* Email Directory Hub */
        .email-hub { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; height: calc(100% - 60px); }
        .email-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
        .email-quick-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
        @media (max-width: 1100px) {
            .email-hub { grid-template-columns: 1fr; height: auto; }
        }

/* Profile Header Styling */
        .profile-header-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .profile-header-title {
            font-size: 32px;
            font-weight: 800;
            text-align: center;
            width: 100%;
            background: linear-gradient(135deg, var(--primary), var(--primary-hover));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        /* Status Toggle Button */
        .status-toggle-btn {
            padding: 10px 20px;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        .status-toggle-btn.active {
            color: var(--success);
            box-shadow: 0 0 15px var(--success); /* Green Glow */
        }
        .status-toggle-btn.closed {
            color: var(--danger);
            box-shadow: 0 0 15px var(--danger); /* Red Glow */
        }

        /* Modal */
        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
            z-index: 2000; display: flex; align-items: center; justify-content: center;
        }
        .modal-content {
            width: 900px; max-width: 95%; max-height: 90vh;
            display: flex; flex-direction: column;
        }
        .modal-header { padding: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
        .modal-body { padding: 20px; overflow-y: auto; }
        .modal-footer { padding: 20px; border-top: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: flex-end; gap: 10px; }

        /* Settings Specifics */
        .settings-modal-card{
            width: min(760px, 92vw);
            max-height: 88vh;
            padding: 0;
            text-align: left;
            border-radius: 20px;
            overflow: hidden;
        }
        .settings-header{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap: 12px;
            padding: 16px 18px 12px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(246,249,253,0.55));
        }
        .settings-title-wrap h3{
            margin: 0;
            font-size: 22px;
            line-height: 1.2;
            letter-spacing: -0.2px;
        }
        .settings-note{
            margin-top: 4px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .settings-scroll{
            overflow-y: auto;
            max-height: calc(88vh - 86px);
            padding: 14px 16px 18px;
            display: grid;
            gap: 12px;
            overflow-x: hidden;
        }
        .settings-card{
            margin: 0;
            padding: 14px;
            border-radius: 14px;
            border: 1px solid rgba(84,132,172,0.18);
            background: linear-gradient(180deg, rgba(245,250,255,0.85), rgba(255,255,255,0.92));
        }
        .settings-card h4{
            margin: 0 0 4px;
            color: var(--primary);
        }
        .settings-sub{
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        .settings-grid-2{
            display:grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 10px;
        }
        .settings-grid-3{
            display:grid;
            grid-template-columns: minmax(0,1fr) minmax(0,170px);
            gap: 10px;
            align-items:end;
        }
        .settings-grid-3 .settings-actions-row{
            grid-column: 1 / -1;
            justify-content: flex-end;
        }
        .settings-check{
            display:flex;
            align-items:center;
            gap: 8px;
            text-transform:none;
            letter-spacing:0;
            font-size:13px;
            font-weight:600;
            color: var(--text-main);
            margin: 0;
            padding: 2px 0;
        }
        .settings-check input[type="checkbox"]{
            width: 16px;
            height: 16px;
            min-width: 16px;
            padding: 0;
            margin: 0;
            border-radius: 4px;
            flex: 0 0 16px;
            accent-color: var(--primary);
            box-shadow: none;
        }
        .settings-actions-row{
            display:flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .settings-kv{
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 8px;
        }
        .settings-section {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .settings-section:last-child { border-bottom: none; }
        .settings-modal-card .table-scroll{
            overflow-x: auto;
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
        }
        .settings-modal-card .data-table{
            min-width: 0 !important;
            width: 100% !important;
            table-layout: auto !important;
        }
        .settings-modal-card .data-table th,
        .settings-modal-card .data-table td{
            width: auto !important;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            vertical-align: middle;
        }
        @media (prefers-color-scheme: dark){
            .settings-header{
                border-bottom-color: rgba(130,173,214,0.20);
                background: linear-gradient(180deg, rgba(18,29,43,0.82), rgba(18,27,40,0.65));
            }
            .settings-card{
                border-color: rgba(130,173,214,0.24);
                background: linear-gradient(180deg, rgba(24,38,56,0.80), rgba(17,27,40,0.90));
            }
        }
        @media (max-width: 760px){
            .settings-grid-2,
            .settings-grid-3{
                grid-template-columns: 1fr;
            }
            .settings-scroll{ padding: 12px; }
        }
        
        /* 3D Text Effect Class */
        .text-3d {
            font-weight: 900;
            text-shadow: 1px 1px 0px rgba(0,0,0,0.2), 2px 2px 0px rgba(0,0,0,0.2);
            letter-spacing: 1px;
            font-style: italic;
            font-size: 22px; 
        }

        .font-btn {
            padding: 8px 16px;
            margin-right: 10px;
            border: 1px solid var(--primary);
            border-radius: 6px;
            background: transparent;
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
        }
        .font-btn.active {
            background: var(--primary);
            color: white;
        }

        /* Delete Confirmation Modal */
        .delete-modal {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .delete-card {
            width: 400px;
            padding: 30px;
            text-align: center;
            background: var(--bg-color);
        }

        /* Communication Log */
        .comm-item {
            border-left: 3px solid var(--primary); padding-left: 15px; margin-bottom: 15px;
            background: rgba(255,255,255,0.4);
            padding: 15px;
            border-radius: var(--radius-md);
            position: relative;
        }
        .comm-actions { display: flex; gap: 5px; position: absolute; top: 15px; right: 15px; }
        .comm-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
        .comm-note { margin-right: 50px; }

        /* Toast Notification */
        #toast {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
            background: rgba(0,0,0,0.8); color: white; padding: 12px 24px;
            border-radius: 30px; font-size: 14px; opacity: 0; transition: opacity 0.3s;
            z-index: 3000; pointer-events: none;
        }
        .health-stack{
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 3600;
            display:flex;
            flex-direction:column;
            gap: 10px;
            align-items:flex-end;
            pointer-events:none;
            max-width: min(360px, calc(100vw - 22px));
        }
        .health-note{
            width: min(340px, calc(100vw - 26px));
            padding: 11px 12px;
            border-radius: 16px;
            border: 1px solid rgba(115,146,179,0.30);
            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,251,255,0.96));
            box-shadow: 0 14px 34px rgba(11,32,50,0.22), inset 0 1px 0 rgba(255,255,255,0.92);
            color: #0f2f4f;
            pointer-events:auto;
            transform: translateY(8px);
            opacity: 0;
            animation: healthNoteIn 0.18s ease forwards;
            position: relative;
            overflow: hidden;
        }
        .health-note-title{
            font-weight: 900;
            font-size: 13px;
            letter-spacing: 0.2px;
        }
        .health-note-msg{
            margin-top: 4px;
            font-size: 12px;
            color: #3b5f80;
            line-height: 1.35;
        }
        .health-note-actions{
            margin-top: 9px;
            display:flex;
            justify-content:flex-end;
            gap: 8px;
        }
        .health-note-btn{
            border: 1px solid rgba(107,143,178,0.35);
            background: rgba(240,248,255,0.96);
            color: #1f4b76;
            border-radius: 10px;
            padding: 6px 10px;
            font-weight: 800;
            font-size: 12px;
        }
        .health-note-btn.primary{
            border-color: rgba(0,122,255,0.35);
            background: linear-gradient(180deg, rgba(0,122,255,0.92), rgba(0,104,219,0.95));
            color: #fff;
        }
        .health-note.reminder-break{
            border-color: rgba(106,145,185,0.35);
        }
        .health-note.reminder-water{
            border-color: rgba(77,153,205,0.34);
            background: linear-gradient(180deg, rgba(239,250,255,0.96), rgba(231,246,255,0.97));
        }
        .health-note.reminder-meal{
            border-color: rgba(255,179,98,0.40);
            background: linear-gradient(180deg, rgba(255,248,236,0.96), rgba(255,241,215,0.97));
        }
        .duck-runner{
            position: fixed;
            left: -64px;
            bottom: 10px;
            z-index: 3550;
            font-size: 30px;
            line-height: 1;
            pointer-events: none;
            filter: drop-shadow(0 3px 6px rgba(12,29,46,0.35));
            animation: duckRunAcross 3.3s linear forwards;
        }
        .health-note.closing{
            animation: healthNoteOut 0.2s ease forwards;
        }
        @keyframes healthNoteIn{
            from{ opacity: 0; transform: translateY(8px); }
            to{ opacity: 1; transform: translateY(0); }
        }
        @keyframes healthNoteOut{
            from{ opacity: 1; transform: translateY(0); }
            to{ opacity: 0; transform: translateY(10px); }
        }
        .confetti-piece{
            position:absolute;
            width: 8px;
            height: 12px;
            top: 0;
            opacity: 0.95;
            border-radius: 2px;
            animation: confettiFall 1.3s ease-in forwards;
            pointer-events:none;
        }
        @keyframes confettiFall{
            0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
            100%{ transform: translateY(130px) rotate(440deg); opacity: 0; }
        }
        @keyframes duckRunAcross{
            0%{ transform: translateX(0) translateY(0); opacity: 0.95; }
            15%{ transform: translateX(15vw) translateY(-2px); opacity: 1; }
            30%{ transform: translateX(30vw) translateY(0); opacity: 1; }
            45%{ transform: translateX(45vw) translateY(-2px); opacity: 1; }
            60%{ transform: translateX(60vw) translateY(0); opacity: 1; }
            75%{ transform: translateX(75vw) translateY(-2px); opacity: 1; }
            88%{ transform: translateX(88vw) translateY(0); opacity: 0.8; }
            100%{ transform: translateX(calc(100vw + 70px)) translateY(0); opacity: 0; }
        }
        @media (prefers-color-scheme: dark){
            .health-note{
                border-color: rgba(130,173,214,0.28);
                background: linear-gradient(180deg, rgba(20,40,60,0.96), rgba(16,31,48,0.97));
                color: #edf6ff;
            }
            .health-note-msg{
                color: #bdd7f0;
            }
            .health-note-btn{
                border-color: rgba(130,173,214,0.32);
                background: rgba(29,52,77,0.98);
                color: #d7eafc;
            }
            .health-note-btn.primary{
                border-color: rgba(0,122,255,0.40);
                background: linear-gradient(180deg, rgba(0,122,255,0.95), rgba(0,99,206,0.98));
                color: #fff;
            }
            .health-note.reminder-water{
                background: linear-gradient(180deg, rgba(19,45,68,0.96), rgba(16,39,60,0.97));
            }
            .health-note.reminder-meal{
                background: linear-gradient(180deg, rgba(63,45,22,0.96), rgba(53,38,18,0.97));
            }
        }

        /* Email View */
        .email-section {
            margin-bottom: 30px;
        }
        .email-header {
            font-size: 18px; font-weight: 700; color: var(--primary);
            border-bottom: 2px solid var(--primary); display: inline-block; margin-bottom: 10px;
        }
        .email-list-item {
            display: flex; justify-content: space-between;
            padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
            font-size: 14px;
        }
        .email-list-item:hover { background: rgba(0,122,255,0.05); }
        .copy-area {
            width: 100%; height: 100px; margin-bottom: 10px;
            font-family: monospace; font-size: 12px;
        }

        /* Mapping Table for Upload */
        .mapping-table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }
        .mapping-table th { background: rgba(0,0,0,0.1); padding: 10px; text-align: left;}
        .mapping-table td { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px; }

        /* New REP Selector Styling (Searchable) */
        .rep-selector-container {
            position: relative;
            display: inline-flex;
            flex-grow: 1;
        }
        .rep-selector {
            width: 100%; height: 38px;
            font-size: 14px;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.8);
            color: var(--text-main);
        }
        .rep-input { width: 100%; height: 40px; padding: 10px; }
        
        /* Agent Dashboard Styles */
        .agent-actions {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 50px;
        }

        /* Rep List Grid */
        .rep-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        .rep-btn {
            padding: 20px;
            border-radius: var(--radius-md);
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: var(--text-main);
        }
        .rep-btn:hover { background: var(--primary); color: white; }

        /* Contract Provider Highlight */
        .rep-contract-highlight {
            background: linear-gradient(135deg, rgba(0,122,255,0.1), rgba(0,198,255,0.05));
            border: 1px solid var(--primary);
            border-radius: var(--radius-lg);
            padding: 20px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .rep-icon {
            font-size: 30px;
            color: var(--primary);
            background: rgba(255,255,255,0.9);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .rep-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
        .rep-value { font-size: 18px; font-weight: 700; color: var(--text-main); letter-spacing: 0.5px; }

        /* Closed Accounts Page Break */
        .page-break {
            text-align: center;
            padding: 20px;
            margin: 20px 0;
            border-top: 2px solid rgba(0,0,0,0.1);
        }
        .page-break h3 { margin: 0; color: var(--danger); font-size: 24px; }
    
        /* --- Modern polish overrides (non-breaking) --- */
        body {
            background: radial-gradient(1200px 600px at 20% 0%, rgba(0,122,255,0.10), transparent 55%),
                        radial-gradient(900px 500px at 90% 10%, rgba(52,199,89,0.08), transparent 55%),
                        var(--bg-color);
        }

        /* Better scrollbars (WebKit) */
        .content-area::-webkit-scrollbar,
        .modal-body::-webkit-scrollbar,
        .profile-content::-webkit-scrollbar {
            width: 10px;
        }
        .content-area::-webkit-scrollbar-thumb,
        .modal-body::-webkit-scrollbar-thumb,
        .profile-content::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.15);
            border-radius: 999px;
            border: 3px solid transparent;
            background-clip: content-box;
        }
        @media (prefers-color-scheme: dark) {
            .content-area::-webkit-scrollbar-thumb,
            .modal-body::-webkit-scrollbar-thumb,
            .profile-content::-webkit-scrollbar-thumb {
                background: rgba(255,255,255,0.18);
                background-clip: content-box;
            }
        }

        /* Responsive nav cards (avoid fixed 200x200 on small screens) */
        .nav-grid { padding-bottom: 40px; }
        .nav-card, .agent-db-card {
            width: 100%;
            max-width: 240px;
            height: 190px;
        }
        @media (max-width: 520px) {
            #app-shell { padding: 14px; }
            header { padding: 10px 14px; }
            .nav-grid { gap: 14px; }
            .nav-card, .agent-db-card { max-width: 100%; height: 150px; }
            .logo { font-size: 18px; }
        }

        /* Cards: crisper hover + focus */
        .nav-card, .agent-db-card, .rep-btn, .btn-primary, .btn-secondary, .btn-danger {
            will-change: transform;
        }
        .nav-card:focus-within,
        .agent-db-card:focus-within,
        .rep-btn:focus,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid rgba(0,122,255,0.35);
            outline-offset: 2px;
        }

        /* Table readability */
        .data-table thead th { border-bottom: 1px solid rgba(0,0,0,0.06); }
        .data-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
        @media (prefers-color-scheme: dark) {
            .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
            .data-table th { background: rgba(255,255,255,0.06); }
            input, select, textarea { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
        }

        /* Modal polish */
        .delete-card { background: var(--glass-bg); border: 1px solid var(--glass-border); }
        .modal-content { border-radius: var(--radius-lg); overflow: hidden; }

    
        /* --- Modern UI enhancements (v3) --- */
        .header-title{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
        .count-badge{
            display:inline-flex; align-items:center; gap:8px;
            padding:6px 10px; border-radius:999px;
            background: rgba(255,255,255,0.55);
            border: 1px solid rgba(255,255,255,0.35);
            font-size: 12px; font-weight: 700; letter-spacing: .2px;
            color: var(--text-secondary);
        }
        .nav-icon{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;}
        .nav-icon svg{width:22px; height:22px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
        
        .table-scroll{overflow: auto; max-height:420px; border-radius:14px; -webkit-overflow-scrolling:touch;}
        .table-scroll::-webkit-scrollbar{height:10px; width:10px;}
        .table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:999px;}
        .table-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05); border-radius:999px;}

        .data-table{table-layout:fixed; width:100%; min-width:1500px; border-collapse:separate; border-spacing:0;}
        .data-table th, .data-table td{
            vertical-align: top;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .data-table th:nth-child(1), .data-table td:nth-child(1){width:90px;}   /* Account */
        .data-table th:nth-child(2), .data-table td:nth-child(2){width:180px;}  /* Name */
        .data-table th:nth-child(3), .data-table td:nth-child(3){width:140px;}  /* Phone */
        .data-table th:nth-child(4), .data-table td:nth-child(4){width:120px;}  /* Type */
        .data-table th:nth-child(5), .data-table td:nth-child(5){width:240px;}  /* Physical Address */
        .data-table th:nth-child(6), .data-table td:nth-child(6){width:220px;}  /* Email */
        .data-table th:nth-child(7), .data-table td:nth-child(7){width:160px;}  /* ESID */
        .data-table th:nth-child(8), .data-table td:nth-child(8){width:140px;}  /* Contract Start */
        .data-table th:nth-child(9), .data-table td:nth-child(9){width:140px;}  /* Expiration */
        .data-table th:nth-child(10), .data-table td:nth-child(10){width:140px;}/* Reminder */
        .data-table th:nth-child(11), .data-table td:nth-child(11){width:80px;} /* Term */
        .data-table th:nth-child(12), .data-table td:nth-child(12){width:90px;} /* MILs */
        .data-table th:nth-child(13), .data-table td:nth-child(13){width:90px;} /* Rate */
        .data-table th:nth-child(14), .data-table td:nth-child(14){width:90px;} /* Tag */
        .data-table th:nth-child(15), .data-table td:nth-child(15){width:120px;}/* Agent */
        .data-table th:nth-child(16), .data-table td:nth-child(16){width:110px;}/* REP */



        /* --- Layout fixes (v4) --- */
        .view-header .flex { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
        .view-header .flex > * { flex: 0 0 auto; }
        @media (max-width: 720px){
            .view-header { justify-content: flex-start; }
            .view-header .flex { justify-content: flex-start; }
        }

        /* Customer Database filter row spacing */
        #main-content .view-container .flex.gap-10 { flex-wrap: wrap; }
        #main-content .view-container .btn-secondary { white-space: nowrap; }

        /* Count badge contrast */
        .count-badge{
            background: linear-gradient(180deg, rgba(0,122,255,0.95), rgba(0,88,200,0.95));
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: 0 10px 24px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.35);
            text-shadow: 0 1px 1px rgba(0,0,0,0.25);
        }

        /* 3D colorful nav icons */
        .nav-icon{
            width: 44px; height: 44px;
            border-radius: 14px;
            background: linear-gradient(180deg, var(--ico1, #2F80ED), var(--ico2, #56CCF2));
            box-shadow: 0 14px 30px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -8px 18px rgba(0,0,0,0.18);
            position: relative;
            overflow: hidden;
        }
        .nav-icon::before{
            content:"";
            position:absolute; inset:-10px -10px auto auto;
            width: 60px; height: 60px;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 60%);
            transform: rotate(12deg);
        }
        .nav-icon svg{
            width: 22px; height: 22px;
            stroke: rgba(255,255,255,0.96);
            fill: none;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
            position: relative;
        }

        /* Per-card icon gradients */
        .nav-grid .nav-card:nth-child(1) .nav-icon{ --ico1:#7C3AED; --ico2:#EC4899; } /* Home */
        .nav-grid .nav-card:nth-child(2) .nav-icon{ --ico1:#06B6D4; --ico2:#22C55E; } /* Agents */
        .nav-grid .nav-card:nth-child(3) .nav-icon{ --ico1:#F97316; --ico2:#F43F5E; } /* Database */
        .nav-grid .nav-card:nth-child(4) .nav-icon{ --ico1:#2563EB; --ico2:#60A5FA; } /* Emails */
        .nav-grid .nav-card:nth-child(5) .nav-icon{ --ico1:#10B981; --ico2:#84CC16; } /* Renewals */
        .nav-grid .nav-card:nth-child(6) .nav-icon{ --ico1:#F59E0B; --ico2:#F97316; } /* Commission */
        .nav-grid .nav-card:nth-child(7) .nav-icon{ --ico1:#6366F1; --ico2:#A855F7; } /* Lookup */

    
        /* --- Customer Database table alignment fix (v5) --- */
        #db-results .data-table{
            table-layout: fixed;
            min-width: 1600px;
        }
        #db-results .data-table th,
        #db-results .data-table td{
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        /* Column widths for Customer Database */
        #db-results .data-table th:nth-child(1), #db-results .data-table td:nth-child(1){ width:90px; }
        #db-results .data-table th:nth-child(2), #db-results .data-table td:nth-child(2){ width:190px; }
        #db-results .data-table th:nth-child(3), #db-results .data-table td:nth-child(3){ width:150px; }
        #db-results .data-table th:nth-child(4), #db-results .data-table td:nth-child(4){ width:120px; }
        #db-results .data-table th:nth-child(5), #db-results .data-table td:nth-child(5){ width:280px; }
        #db-results .data-table th:nth-child(6), #db-results .data-table td:nth-child(6){ width:240px; }
        #db-results .data-table th:nth-child(7), #db-results .data-table td:nth-child(7){ width:200px; }
        #db-results .data-table th:nth-child(8), #db-results .data-table td:nth-child(8){ width:140px; }
        #db-results .data-table th:nth-child(9), #db-results .data-table td:nth-child(9){ width:140px; }
        #db-results .data-table th:nth-child(10), #db-results .data-table td:nth-child(10){ width:130px; }
        #db-results .data-table th:nth-child(11), #db-results .data-table td:nth-child(11){ width:80px; }
        #db-results .data-table th:nth-child(12), #db-results .data-table td:nth-child(12){ width:80px; }
        #db-results .data-table th:nth-child(13), #db-results .data-table td:nth-child(13){ width:90px; }
        #db-results .data-table th:nth-child(14), #db-results .data-table td:nth-child(14){ width:90px; }
        #db-results .data-table th:nth-child(15), #db-results .data-table td:nth-child(15){ width:120px; }


    
        
        /* --- Lookup Customer table alignment fix (v6) --- */
        #lookup-view .data-table,
        #modal-content table.data-table{
            table-layout: fixed;
            min-width: 1800px;
            width: 100%;
        }
        #lookup-view .data-table th,
        #lookup-view .data-table td,
        #modal-content table.data-table th,
        #modal-content table.data-table td{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
        /* Column widths for Lookup Customer (16 columns) */
        #lookup-view .data-table th:nth-child(1),  #lookup-view .data-table td:nth-child(1),
        #modal-content table.data-table th:nth-child(1),  #modal-content table.data-table td:nth-child(1){  width:90px; }   /* Account */
        #lookup-view .data-table th:nth-child(2),  #lookup-view .data-table td:nth-child(2),
        #modal-content table.data-table th:nth-child(2),  #modal-content table.data-table td:nth-child(2){  width:190px; }  /* Name */
        #lookup-view .data-table th:nth-child(3),  #lookup-view .data-table td:nth-child(3),
        #modal-content table.data-table th:nth-child(3),  #modal-content table.data-table td:nth-child(3){  width:150px; }  /* Phone */
        #lookup-view .data-table th:nth-child(4),  #lookup-view .data-table td:nth-child(4),
        #modal-content table.data-table th:nth-child(4),  #modal-content table.data-table td:nth-child(4){  width:120px; }  /* Type */
        #lookup-view .data-table th:nth-child(5),  #lookup-view .data-table td:nth-child(5),
        #modal-content table.data-table th:nth-child(5),  #modal-content table.data-table td:nth-child(5){  width:280px; }  /* Physical Address */
        #lookup-view .data-table th:nth-child(6),  #lookup-view .data-table td:nth-child(6),
        #modal-content table.data-table th:nth-child(6),  #modal-content table.data-table td:nth-child(6){  width:240px; }  /* Email */
        #lookup-view .data-table th:nth-child(7),  #lookup-view .data-table td:nth-child(7),
        #modal-content table.data-table th:nth-child(7),  #modal-content table.data-table td:nth-child(7){  width:200px; }  /* ESID # */
        #lookup-view .data-table th:nth-child(8),  #lookup-view .data-table td:nth-child(8),
        #modal-content table.data-table th:nth-child(8),  #modal-content table.data-table td:nth-child(8){  width:130px; }  /* Contract Start */
        #lookup-view .data-table th:nth-child(9),  #lookup-view .data-table td:nth-child(9),
        #modal-content table.data-table th:nth-child(9),  #modal-content table.data-table td:nth-child(9){  width:130px; }  /* Expiration */
        #lookup-view .data-table th:nth-child(10), #lookup-view .data-table td:nth-child(10),
        #modal-content table.data-table th:nth-child(10), #modal-content table.data-table td:nth-child(10){ width:120px; }  /* Reminder */
        #lookup-view .data-table th:nth-child(11), #lookup-view .data-table td:nth-child(11),
        #modal-content table.data-table th:nth-child(11), #modal-content table.data-table td:nth-child(11){ width:80px; }   /* Term */
        #lookup-view .data-table th:nth-child(12), #lookup-view .data-table td:nth-child(12),
        #modal-content table.data-table th:nth-child(12), #modal-content table.data-table td:nth-child(12){ width:90px; }   /* MILs */
        #lookup-view .data-table th:nth-child(13), #lookup-view .data-table td:nth-child(13),
        #modal-content table.data-table th:nth-child(13), #modal-content table.data-table td:nth-child(13){ width:90px; }   /* Rate */
        #lookup-view .data-table th:nth-child(14), #lookup-view .data-table td:nth-child(14),
        #modal-content table.data-table th:nth-child(14), #modal-content table.data-table td:nth-child(14){ width:90px; }   /* Tag */
        #lookup-view .data-table th:nth-child(15), #lookup-view .data-table td:nth-child(15),
        #modal-content table.data-table th:nth-child(15), #modal-content table.data-table td:nth-child(15){ width:130px; }  /* Agent */
        #lookup-view .data-table th:nth-child(16), #lookup-view .data-table td:nth-child(16),
        #modal-content table.data-table th:nth-child(16), #modal-content table.data-table td:nth-child(16){ width:170px; }  /* REP */

/* Column widths for Lookup Customer (15 columns) */
        #modal-content table.data-table th:nth-child(1),  #modal-content table.data-table td:nth-child(1){  width:90px; }   /* Account */
        #modal-content table.data-table th:nth-child(2),  #modal-content table.data-table td:nth-child(2){  width:190px; }  /* Name */
        #modal-content table.data-table th:nth-child(3),  #modal-content table.data-table td:nth-child(3){  width:150px; }  /* Phone */
        #modal-content table.data-table th:nth-child(4),  #modal-content table.data-table td:nth-child(4){  width:120px; }  /* Type */
        #modal-content table.data-table th:nth-child(5),  #modal-content table.data-table td:nth-child(5){  width:280px; }  /* Physical Address */
        #modal-content table.data-table th:nth-child(6),  #modal-content table.data-table td:nth-child(6){  width:240px; }  /* Email */
        #modal-content table.data-table th:nth-child(7),  #modal-content table.data-table td:nth-child(7){  width:200px; }  /* ESID # */
        #modal-content table.data-table th:nth-child(8),  #modal-content table.data-table td:nth-child(8){  width:130px; }  /* Contract Start */
        #modal-content table.data-table th:nth-child(9),  #modal-content table.data-table td:nth-child(9){  width:130px; }  /* Expiration */
        #modal-content table.data-table th:nth-child(10), #modal-content table.data-table td:nth-child(10){ width:120px; }  /* Reminder */
        #modal-content table.data-table th:nth-child(11), #modal-content table.data-table td:nth-child(11){ width:80px; }   /* Term */
        #modal-content table.data-table th:nth-child(12), #modal-content table.data-table td:nth-child(12){ width:90px; }   /* MILs */
        #modal-content table.data-table th:nth-child(13), #modal-content table.data-table td:nth-child(13){ width:90px; }   /* Rate */
        #modal-content table.data-table th:nth-child(14), #modal-content table.data-table td:nth-child(14){ width:90px; }   /* Tag */
        #modal-content table.data-table th:nth-child(15), #modal-content table.data-table td:nth-child(15){ width:130px; }  /* Agent/REP */


        .comm-actions{display:flex; gap:8px; margin-top:8px;}
        .icon-btn{border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--text-primary); padding:6px 10px; border-radius:10px; cursor:pointer;}
        .icon-btn:hover{background: rgba(255,255,255,.14);}
        .icon-btn.danger{border-color: rgba(255,59,48,.35); color: #ff5a52;}
        .icon-btn.danger:hover{background: rgba(255,59,48,.14);}

        /* Force sticky table headers to be fully opaque (no bleed-through) */
        .data-table thead th{
            background: var(--table-head-bg) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .data-table thead th::before{
            content:"";
            position:absolute;
            inset:0;
            background: var(--table-head-bg);
            z-index:-1;
        }

        /* --- Sticky table headers: fully opaque everywhere --- */
        .table-scroll thead th,
        .customer-table thead th,
        .crm-table thead th,
        table thead th {
            background: var(--table-head-bg) !important;
            opacity: 1 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 1px 0 rgba(0,0,0,0.30);
            z-index: 50;
        }


        /* --- Colorful Apple-like icons (glassy gradients) --- */
        .nav-icon.nav-3d{
            color: #fff;
            border: 1px solid rgba(255,255,255,0.22);
            background: linear-gradient(180deg, rgba(120,120,120,0.85), rgba(40,40,40,0.55));
            box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.18) inset;
        }
        .nav-icon.nav-3d svg{ fill: currentColor; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }

        /* per-tile accent (order in nav grid) */
        .nav-grid .nav-card:nth-child(1) .nav-icon{ background: linear-gradient(135deg,#34C759,#007AFF); }
        .nav-grid .nav-card:nth-child(2) .nav-icon{ background: linear-gradient(135deg,#007AFF,#5856D6); }
        .nav-grid .nav-card:nth-child(3) .nav-icon{ background: linear-gradient(135deg,#FFCC00,#FF9500); }
        .nav-grid .nav-card:nth-child(4) .nav-icon{ background: linear-gradient(135deg,#FF2D55,#FF3B30); }
        .nav-grid .nav-card:nth-child(5) .nav-icon{ background: linear-gradient(135deg,#5AC8FA,#007AFF); }
        .nav-grid .nav-card:nth-child(6) .nav-icon{ background: linear-gradient(135deg,#AF52DE,#5856D6); }
        .nav-grid .nav-card:nth-child(7) .nav-icon{ background: linear-gradient(135deg,#00C7BE,#34C759); }
        .nav-grid .nav-card:nth-child(8) .nav-icon{ background: linear-gradient(135deg,#FF9F0A,#FF375F); }


        /* ---- Icon shape + color polish (Apple-like but colorful) ---- */
        .nav-item .nav-icon, .nav-icon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 14px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 44px !important;
            overflow: hidden !important;
            box-shadow: 0 10px 22px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.35) !important;
        }
        .nav-item .nav-icon svg, .nav-icon svg {
            width: 22px !important;
            height: 22px !important;
            filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
        }

        /* ---- Sticky header: force fully opaque across ALL lists ---- */
        thead th, .sticky-header, .table-header th, .table thead th {
            background: #2f3136 !important;
            opacity: 1 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

    
        .logo-btn{
            display:flex; align-items:center; gap:10px;
            background: #ffffff;
            border: 1px solid rgba(15,57,93,0.18);
            cursor:pointer;
            padding: 8px 10px; border-radius: 14px;
            box-shadow: 0 6px 16px rgba(17,46,74,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
            transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }
        .logo-btn:hover { background: #ffffff; filter: brightness(1.01); transform: translateY(-0.5px); box-shadow: 0 10px 20px rgba(17,46,74,0.16), inset 0 1px 0 rgba(255,255,255,0.95); }
        .logo-btn:active { transform: translateY(0px); box-shadow: 0 5px 11px rgba(17,46,74,0.14), inset 0 1px 0 rgba(255,255,255,0.92); }
        .brand-logo{
            width:34px; height:34px; border-radius:10px; object-fit:cover;
            box-shadow: 0 10px 22px rgba(0,0,0,0.14);
        }
        .brand-text { font-weight: 800; letter-spacing: 0.2px; color: #0f3f64; }

        /* Colorful modern icon chips */
        .icon-chip {
            width: 42px; height: 42px;
            border-radius: 14px;
            display: grid; place-items: center;
            box-shadow: 0 10px 24px rgba(0,0,0,0.12);
            position: relative;
            overflow: hidden;
        }
        .icon-chip::before{
            content:'';
            position:absolute; inset:0;
            background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65), rgba(255,255,255,0) 55%);
            pointer-events:none;
        }
        .icon-chip svg { width: 22px; height: 22px; color: rgba(255,255,255,0.95); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18)); }

        .chip-blue { background: linear-gradient(135deg, #2F80ED, #56CCF2); }
        .chip-green { background: linear-gradient(135deg, #27AE60, #6FCF97); }
        .chip-orange { background: linear-gradient(135deg, #F2994A, #F2C94C); }
        .chip-purple { background: linear-gradient(135deg, #9B51E0, #BB6BD9); }
        .chip-red { background: linear-gradient(135deg, #EB5757, #F2994A); }
        .chip-slate { background: linear-gradient(135deg, #111827, #374151); }

        /* Force opaque sticky headers everywhere */
        .data-table thead th, .data-table th {
            background-color: var(--table-head-bg) !important;
            opacity: 1 !important;
            backdrop-filter: none !important;
        }


        /* --- Profile Status Toggle --- */
        .profile-header-row{
            width: 100%;
            display:grid;
            grid-template-columns: 1fr minmax(260px, auto) 1fr;
            align-items:start;
            gap: 12px;
        }
        .profile-title-wrap{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap: 8px;
            min-width: 0;
            grid-column: 2;
        }
        .profile-action-stack{
            grid-column: 3;
            justify-self: end;
            display:flex;
            flex-direction:column;
            align-items:flex-end;
            gap:14px;
        }
        .profile-action-buttons{
            display:flex;
            gap:10px;
            align-items:flex-start;
            justify-content:flex-end;
            flex-wrap:wrap;
        }
        .profile-customer-name{
            font-size: 34px;
            font-weight: 900;
            text-align: center;
            color: #ffffff;
            letter-spacing: -0.5px;
            line-height: 1.16;
            text-shadow: 0 2px 10px rgba(0,0,0,0.42);
        }
        .profile-customer-name.active{
            text-shadow:
                0 0 10px rgba(16,185,129,0.50),
                0 0 22px rgba(16,185,129,0.34),
                0 2px 12px rgba(0,0,0,0.42);
            animation: profileGlowActive 2.6s ease-in-out infinite;
        }
        .profile-customer-name.closed{
            text-shadow:
                0 0 10px rgba(239,68,68,0.50),
                0 0 22px rgba(239,68,68,0.34),
                0 2px 12px rgba(0,0,0,0.42);
            animation: profileGlowClosed 2.6s ease-in-out infinite;
        }
        @keyframes profileGlowActive{
            0%,100%{
                text-shadow: 0 0 8px rgba(16,185,129,0.44), 0 0 18px rgba(16,185,129,0.26), 0 2px 12px rgba(0,0,0,0.42);
            }
            50%{
                text-shadow: 0 0 14px rgba(16,185,129,0.60), 0 0 26px rgba(16,185,129,0.38), 0 2px 12px rgba(0,0,0,0.42);
            }
        }
        @keyframes profileGlowClosed{
            0%,100%{
                text-shadow: 0 0 8px rgba(239,68,68,0.44), 0 0 18px rgba(239,68,68,0.26), 0 2px 12px rgba(0,0,0,0.42);
            }
            50%{
                text-shadow: 0 0 14px rgba(239,68,68,0.60), 0 0 26px rgba(239,68,68,0.38), 0 2px 12px rgba(0,0,0,0.42);
            }
        }
        .profile-title-sub{
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            font-weight: 800;
        }
        .status-toggle{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 12px;
            border-radius:18px;
            background: rgba(255, 255, 255, 0.70);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.50);
            box-shadow: 0 14px 24px rgba(0,0,0,0.08);
        }
        @media (prefers-color-scheme: dark){
            .status-toggle{
                background: rgba(44,44,46,0.72);
                border:1px solid rgba(255,255,255,0.10);
            }
        }
        .status-toggle .label{
            font-weight:800;
            font-size: 13px;
            letter-spacing: .2px;
            color: var(--text-main);
            user-select:none;
            white-space:nowrap;
        }
        .switch{
            position:relative;
            width: 64px;
            height: 34px;
            flex: 0 0 auto;
        }
        .switch input{ display:none; }
        .slider{
            position:absolute;
            inset:0;
            border-radius: 999px;
            background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
            box-shadow:
                inset 0 2px 6px rgba(255,255,255,0.45),
                inset 0 -6px 10px rgba(0,0,0,0.12),
                0 16px 24px rgba(0,0,0,0.10);
            transition: all .22s ease;
            border: 1px solid rgba(255,255,255,0.55);
        }
        .slider::before{
            content:"";
            position:absolute;
            width: 28px;
            height: 28px;
            left: 3px;
            top: 2px;
            border-radius: 999px;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.25) 100%),
                linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
            box-shadow:
                0 10px 14px rgba(0,0,0,0.18),
                0 2px 4px rgba(0,0,0,0.12);
            transition: transform .22s ease;
        }
        .switch input:checked + .slider{
            background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
        }
        .switch input:checked + .slider::before{
            transform: translateX(30px);
        }
        .status-pill{
            padding: 4px 10px;
            border-radius: 999px;
            font-weight: 900;
            font-size: 12px;
            letter-spacing: .3px;
            color: white;
            box-shadow: 0 10px 18px rgba(0,0,0,0.12);
            user-select:none;
        }
        .status-pill.active{
            background: linear-gradient(135deg, #34D399, #10B981);
        }
        .status-pill.closed{
            background: linear-gradient(135deg, #9CA3AF, #6B7280);
        }


        /* --- Status glow (Active/Closed) --- */
        .status-toggle.active{
            box-shadow:
                0 14px 24px rgba(0,0,0,0.08),
                0 0 0 1px rgba(16,185,129,0.25),
                0 0 18px rgba(16,185,129,0.35);
        }
        .status-toggle.closed{
            box-shadow:
                0 14px 24px rgba(0,0,0,0.08),
                0 0 0 1px rgba(239,68,68,0.25),
                0 0 18px rgba(239,68,68,0.35);
        }
        @media (prefers-color-scheme: dark){
            .status-toggle.active{
                box-shadow:
                    0 14px 24px rgba(0,0,0,0.22),
                    0 0 0 1px rgba(16,185,129,0.22),
                    0 0 18px rgba(16,185,129,0.32);
            }
            .status-toggle.closed{
                box-shadow:
                    0 14px 24px rgba(0,0,0,0.22),
                    0 0 0 1px rgba(239,68,68,0.22),
                    0 0 18px rgba(239,68,68,0.32);
            }
        }
        @media (max-width: 980px){
            .profile-header-row{
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .profile-title-wrap{
                grid-column: 1;
                order: 1;
            }
            .profile-action-stack{
                grid-column: 1;
                order: 2;
                justify-self: end;
            }
        }


        /* --- Brand/Home button affordance --- */
        .brand-home-click{
            cursor: pointer;
            user-select: none;
        }
        .brand-home-click:active{
            transform: translateY(1px);
        }


        /* --- Dashboard additions --- */
        .kpi-pill{
            display:flex;
            align-items:center;
            gap:10px;
            padding:10px 12px;
            border-radius:16px;
            background: rgba(255,255,255,0.65);
            border: 1px solid rgba(255,255,255,0.55);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 12px 18px rgba(0,0,0,0.06);
        }
        .kpi-pill b{ margin-left:auto; font-size:15px; }
        .scroll-card{
            overflow:auto;
            border-radius:16px;
            background: linear-gradient(180deg, rgba(227,239,252,0.72), rgba(249,252,255,0.9));
            border: 1px solid rgba(77,124,165,0.24);
            padding: 10px;
            color: var(--text-main);
        }
        @media (prefers-color-scheme: dark){
            .scroll-card{
                background: linear-gradient(180deg, rgba(18,38,58,0.84), rgba(14,24,38,0.94));
                border: 1px solid rgba(130,173,214,0.28);
            }
        }
        .news-item{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:10px 10px;
            border-radius:14px;
            animation: newsSlide 0.4s ease-out backwards;
            animation-delay: calc(var(--index) * 0.1s);
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        .news-item:hover{
            transform: translateX(8px);
            background: rgba(255, 255, 255, 0.1);
        }
        @keyframes newsSlide{
            from{
                opacity: 0;
                transform: translateX(-30px);
            }
            to{
                opacity: 1;
                transform: translateX(0);
            }
        }
        .news-badge{
            animation: badgeBounce 0.6s ease-out;
        }
        @keyframes badgeBounce{
            0%, 100%{ transform: scale(1); }
            50%{ transform: scale(1.2); }
        }
        .news-item a{ color: var(--text-main); font-weight:800; text-decoration:none; }
        .news-item a:hover{ text-decoration: underline; }
        .news-meta{ font-size:12px; color: var(--text-secondary); margin-top:4px; }
        .cal-grid{
            display:grid;
            grid-template-columns: repeat(7, 1fr);
            gap:4px;
        }
        .cal-cell{
            border-radius:10px;
            padding:5px 4px;
            text-align:center;
            font-weight:800;
            font-size:11px;
            background: rgba(231,241,252,0.88);
            border:1px solid rgba(106,145,185,0.26);
            min-height: 28px;
            color: #18324a;
            display:flex;
            align-items:center;
            justify-content:center;
            transition: all 0.2s ease;
        }
        .cal-cell:hover:not(.cal-head){
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        @media (prefers-color-scheme: dark){
            .cal-cell{
                background: rgba(17,40,63,0.9);
                border: 1px solid rgba(130,173,214,0.30);
                color: #dbe9f9;
            }
        }
        .cal-head{
            background: rgba(26,108,171,0.14);
            border:1px solid rgba(26,108,171,0.24);
            font-weight:900;
        }
        .cal-holiday{
            outline: 2px solid rgba(245,158,11,0.55);
            box-shadow: 0 0 0 2px rgba(245,158,11,0.16) inset;
            animation: holidayGlow 2s ease-in-out infinite;
        }
        @keyframes holidayGlow{
            0%, 100%{
                box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
            }
            50%{
                box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
            }
        }
        .cal-today{
            animation: todayPulse 2s ease-in-out infinite;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 700;
        }
        @keyframes todayPulse{
            0%, 100%{ box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
            50%{ box-shadow: 0 0 0 8px rgba(102, 126, 234, 0); }
        }
        .quote-box{
            padding:11px;
            border-radius:18px;
            background: linear-gradient(180deg, rgba(227,239,252,0.72), rgba(249,252,255,0.9));
            border:1px solid rgba(77,124,165,0.24);
            color: var(--text-main);
        }
        @media (prefers-color-scheme: dark){
            .quote-box{
                background: linear-gradient(180deg, rgba(18,38,58,0.84), rgba(14,24,38,0.94));
                border: 1px solid rgba(130,173,214,0.28);
            }
        }
        .quote-top{
            display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;
        }
        .quote-price{ font-size:28px; font-weight:1000; letter-spacing:-0.3px; }
        .quote-chg{ font-weight:900; }
        .quote-chg.up{ color: #10B981; }
        .quote-chg.down{ color: #EF4444; }
        @media (max-width: 980px){
            .grid-2{ grid-template-columns: 1fr !important; }
        }


        /* --- Home Dashboard (Home button) --- */
        .home-view-shell{
            padding: 14px;
        }
        .home-card{
            display: flex;
            flex-direction: column;
            min-height: 0;
            position: relative;
            overflow: hidden;
            padding: 10px 11px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(237,245,253,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.24);
            box-shadow: 0 9px 20px rgba(16,37,58,0.10);
            color: var(--text-main);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @media (prefers-color-scheme: dark){
            .home-card{
                background: linear-gradient(180deg, rgba(20,40,60,0.86), rgba(13,22,35,0.96));
                border: 1px solid rgba(130,173,214,0.28);
                box-shadow: 0 12px 28px rgba(0,0,0,0.30);
            }
        }
        .home-card::after{
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
            pointer-events: none;
        }
        .home-card:hover{
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        .home-card:hover::after{
            left: 100%;
        }
        .widget-entrance{
            animation: widgetEnter 0.6s ease-out backwards;
            animation-delay: calc(var(--widget-index) * 0.1s);
        }
        @keyframes widgetEnter{
            from{ opacity: 0; transform: translateY(40px) scale(0.95); }
            to{ opacity: 1; transform: translateY(0) scale(1); }
        }
        .home-card-chart{
            grid-area: chart;
            animation: slideInUp 0.6s ease-out;
        }
        @keyframes slideInUp{
            from{ opacity: 0; transform: translateY(30px); }
            to{ opacity: 1; transform: translateY(0); }
        }
        .chart-loading{
            animation: chartPulse 2s ease-in-out infinite;
        }
        @keyframes chartPulse{
            0%, 100%{ opacity: 1; }
            50%{ opacity: 0.7; }
        }
        .chart-point{
            animation: pointPop 0.4s ease-out backwards;
            animation-delay: calc(var(--i) * 0.1s);
        }
        @keyframes pointPop{
            0%{ transform: scale(0); opacity: 0; }
            80%{ transform: scale(1.2); }
            100%{ transform: scale(1); opacity: 1; }
        }
        .home-card h3{
            margin: 0 0 6px;
            font-size: 11px;
            letter-spacing: 0.35px;
            text-transform: uppercase;
            color: var(--text-secondary);
            line-height: 1.2;
        }
        .home-kpis{
            display:grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            flex: 0 0 auto;
        }
        .kpi-card{
            padding: 8px 10px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            min-height: 66px;
            color: var(--text-main);
        }
        @media (prefers-color-scheme: dark){
            .kpi-card{
                background: linear-gradient(180deg, rgba(21,43,66,0.84), rgba(14,24,38,0.95));
                border: 1px solid rgba(130,173,214,0.26);
            }
        }
        .kpi-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 8px; }
        .kpi-label{ font-size: 10px; color: var(--text-secondary); font-weight: 800; letter-spacing: .3px; text-transform: uppercase; line-height: 1.2; }
        .kpi-value{ font-size: 18px; font-weight: 900; line-height: 1; }
        .kpi-sub{ margin-top: 4px; font-size: 11px; color: var(--text-secondary); line-height: 1.2; }

        .ng-pill{
            display:flex;
            align-items:baseline;
            justify-content:space-between;
            gap: 8px;
            padding: 7px 9px;
            border-radius: 12px;
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            color: var(--text-main);
        }
        .ng-ticker{
            animation: tickerGlow 3s ease-in-out infinite;
        }
        @keyframes tickerGlow{
            0%, 100%{
                box-shadow: 0 0 20px rgba(52, 199, 89, 0.2);
                border-color: rgba(52, 199, 89, 0.3);
            }
            50%{
                box-shadow: 0 0 30px rgba(52, 199, 89, 0.4);
                border-color: rgba(52, 199, 89, 0.5);
            }
        }
        @media (prefers-color-scheme: dark){
            .ng-pill{
                background: linear-gradient(180deg, rgba(21,43,66,0.84), rgba(14,24,38,0.95));
                border: 1px solid rgba(130,173,214,0.26);
            }
        }
        .ng-symbol{ font-weight: 1000; letter-spacing: .2px; font-size: 13px; }
        .ng-price{ font-size: 18px; font-weight: 1000; line-height: 1; }
        .price-up{
            animation: priceRise 0.5s ease-out;
            color: #10B981;
        }
        .price-down{
            animation: priceFall 0.5s ease-out;
            color: #EF4444;
        }
        @keyframes priceRise{
            0%{ transform: translateY(10px); opacity: 0; }
            50%{ transform: translateY(-5px); }
            100%{ transform: translateY(0); opacity: 1; }
        }
        @keyframes priceFall{
            0%{ transform: translateY(-10px); opacity: 0; }
            50%{ transform: translateY(5px); }
            100%{ transform: translateY(0); opacity: 1; }
        }
        .ng-meta{ font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
        .pulse-dot{
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: var(--success);
            box-shadow: 0 0 0 rgba(52,199,89,0.4);
            animation: livePulse 2s ease-in-out infinite;
        }
        @keyframes livePulse{
            0%{ box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7); }
            70%{ box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); }
            100%{ box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
        }

        .todo-toolbar{
            display:grid;
            grid-template-columns: minmax(0,1fr) auto;
            gap: 6px;
        }
        .todo-controls{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .todo-toolbar input,
        .todo-controls select{
            height: 30px;
            padding: 5px 8px;
            font-size: 12px;
        }
        .todo-toolbar button{
            height: 30px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 700;
            min-width: 64px;
        }
        .todo-group{
            display:flex;
            flex-direction:column;
            gap: 6px;
            min-height: 0;
        }
        .todo-row{
            display:grid;
            grid-template-columns: 14px 9px auto auto minmax(0,1fr) auto;
            align-items:flex-start;
            gap: 7px;
            padding: 6px 7px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
            color: var(--text-main);
        }
        .todo-row input[type="checkbox"]{
            width: 14px;
            height: 14px;
            margin: 0;
        }
        @media (prefers-color-scheme: dark){
            .todo-row{
                background: linear-gradient(180deg, rgba(21,43,66,0.84), rgba(14,24,38,0.95));
                border: 1px solid rgba(130,173,214,0.26);
            }
        }
        .prio{
            width: 9px;
            height: 9px;
            border-radius: 999px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.14);
        }
        .prio.low{ background: var(--success); }
        .prio.med{ background: #ff9f0a; }
        .prio.high{ background: var(--danger); }
        .todo-text{
            font-weight: 700;
            font-size: 11px;
            line-height: 1.3;
            min-width: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .todo-text.done{ text-decoration: line-through; opacity: 0.55; }
        .todo-meta{
            margin-left:auto;
            font-size: 10px;
            color: var(--text-secondary);
            font-weight: 800;
            text-transform: uppercase;
            white-space: nowrap;
            align-self:flex-start;
            margin-top: 1px;
        }
        .todo-owner{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width: 20px;
            height: 20px;
            border-radius: 999px;
            padding: 0 6px;
            background: rgba(0,122,255,0.15);
            color: #114a7f;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .todo-cat-chip{
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            border-radius: 999px;
            padding: 2px 6px;
            background: rgba(26,108,171,0.15);
            color: #1f5179;
            white-space: nowrap;
            max-width: 84px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (prefers-color-scheme: dark){
            .todo-owner{
                background: rgba(130,173,214,0.20);
                color: #d4e7fb;
            }
            .todo-cat-chip{
                background: rgba(130,173,214,0.20);
                color: #cfe4fb;
            }
        }

        .activity-item{
            padding: 6px 7px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
            color: var(--text-main);
            animation: activitySlide 0.3s ease-out backwards;
            animation-delay: calc(var(--index) * 0.08s);
            transition: all 0.3s ease;
        }
        @media (prefers-color-scheme: dark){
            .activity-item{
                background: linear-gradient(180deg, rgba(21,43,66,0.84), rgba(14,24,38,0.95));
                border: 1px solid rgba(130,173,214,0.26);
            }
        }
        .activity-item:hover{
            transform: translateX(5px);
            background: rgba(255, 255, 255, 0.08);
        }
        @keyframes activitySlide{
            from{
                opacity: 0;
                transform: translateY(15px);
            }
            to{
                opacity: 1;
                transform: translateY(0);
            }
        }
        .activity-top{ display:flex; justify-content:space-between; gap:8px; }
        .activity-name{ font-weight: 900; font-size: 11px; }
        .activity-time{ font-size: 10px; color: var(--text-secondary); font-weight: 800; white-space: nowrap; }
        .activity-item .dash-sub{
            margin-top: 3px !important;
            font-size: 11px;
            line-height: 1.2;
        }

        .home-dashboard-area{
            display:flex;
            flex-direction:column;
            gap: 8px;
            min-height: 0;
            height: 100%;
            overflow: hidden !important;
            padding-right: 0 !important;
        }
        .home-section{
            margin-top: 0;
            display:grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-template-areas:
                "chart chart chart chart chart ng ng ng weather weather weather weather"
                "todo todo todo team team team news news news cal cal cal";
            grid-template-rows: minmax(0, 1.06fr) minmax(0, 1fr);
            gap: 8px;
            align-items: stretch;
            flex: 1;
            min-height: 0;
            height: 100%;
        }
        .home-panel-body{
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .home-card-ng{ grid-area: ng; }
        .home-card-todo{ grid-area: todo; }
        .home-card-team{ grid-area: team; }
        .home-card-weather{ grid-area: weather; }
        .home-card-news{ grid-area: news; }
        .home-card-cal{ grid-area: cal; }
        .todo-widget{ animation: slideInLeft 0.5s ease-out; }
        @keyframes slideInLeft{
            from{ opacity: 0; transform: translateX(-30px); }
            to{ opacity: 1; transform: translateX(0); }
        }
        .news-widget{ animation: fadeIn 0.6s ease-out; }
        @keyframes fadeIn{
            from{ opacity: 0; }
            to{ opacity: 1; }
        }
        .calendar-widget{ animation: scaleIn 0.5s ease-out; }
        @keyframes scaleIn{
            from{ opacity: 0; transform: scale(0.9); }
            to{ opacity: 1; transform: scale(1); }
        }
        .weather-widget{ animation: slideInRight 0.5s ease-out; }
        @keyframes slideInRight{
            from{ opacity: 0; transform: translateX(30px); }
            to{ opacity: 1; transform: translateX(0); }
        }
        .activity-widget{ animation: slideInUp 0.5s ease-out 0.2s backwards; }
        .todo-item{
            animation: todoSlide 0.3s ease-out backwards;
            animation-delay: calc(var(--index) * 0.05s);
        }
        @keyframes todoSlide{
            from{ opacity: 0; transform: translateX(-20px); }
            to{ opacity: 1; transform: translateX(0); }
        }
        .todo-text{
            background-image: linear-gradient(currentColor, currentColor);
            background-repeat: no-repeat;
            background-size: 0% 2px;
            background-position: 0 55%;
        }
        .todo-checkbox:checked + .todo-text,
        .todo-row .todo-checkbox:checked ~ .todo-text{
            animation: strikeThrough 0.3s ease-out forwards;
        }
        @keyframes strikeThrough{
            from{ background-size: 0% 2px; }
            to{ background-size: 100% 2px; }
        }
        .priority-high{
            animation: urgentPulse 1.5s ease-in-out infinite;
        }
        @keyframes urgentPulse{
            0%, 100%{
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
                transform: scale(1);
            }
            50%{
                box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
                transform: scale(1.05);
            }
        }
        .weather-icon{
            display: inline-block;
            animation: weatherFloat 3s ease-in-out infinite;
        }
        @keyframes weatherFloat{
            0%, 100%{ transform: translateY(0); }
            50%{ transform: translateY(-5px); }
        }
        .temp-update{
            animation: tempChange 0.5s ease-out;
        }
        @keyframes tempChange{
            0%{ transform: scale(1.2); opacity: 0; }
            100%{ transform: scale(1); opacity: 1; }
        }
        .activity-avatar{
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 900;
            background: rgba(26,108,171,0.16);
            color: #1f5179;
            position: relative;
            flex: 0 0 24px;
        }
        .avatar-online::after{
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 8px;
            height: 8px;
            background: #10B981;
            border-radius: 50%;
            animation: onlinePulse 2s ease-in-out infinite;
            border: 1px solid rgba(255,255,255,0.8);
        }
        @keyframes onlinePulse{
            0%, 100%{ transform: scale(1); opacity: 1; }
            50%{ transform: scale(1.3); opacity: 0.7; }
        }

        .home-chart-wrap{
            flex: 1;
            min-height: 0;
            border-radius: 10px;
            padding: 4px;
            background: linear-gradient(180deg, rgba(236,246,255,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.20);
        }
        .ng-pred-wrap{
            flex: 1;
            min-height: 0;
            border-radius: 10px;
            padding: 7px 8px;
            background: linear-gradient(180deg, rgba(236,246,255,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.20);
            display:flex;
            flex-direction:column;
            gap: 5px;
            overflow: auto;
        }
        .ng-pred-wrap .dash-mini{
            color: #2f4e69 !important;
            font-weight: 600;
        }
        @media (prefers-color-scheme: dark){
            .home-chart-wrap,
            .ng-pred-wrap{
                background: linear-gradient(180deg, rgba(19,42,64,0.90), rgba(13,24,37,0.98));
                border: 1px solid rgba(130,173,214,0.24);
            }
            .ng-pred-wrap .dash-mini{
                color: #cfe2f5 !important;
            }
        }
        .home-chart-wrap canvas{
            width: 100% !important;
            height: 100% !important;
        }
        .ng-pred-row{
            display:grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items:center;
            border-radius: 9px;
            padding: 5px 7px;
            background: rgba(242,248,255,0.95);
            border: 1px solid rgba(84,132,172,0.16);
            font-size: 11px;
        }
        .ng-pred-key{
            color: #304b66;
            font-weight: 700;
            letter-spacing: 0.2px;
        }
        .ng-pred-val{
            font-weight: 900;
            color: #0f2f4f;
            white-space: nowrap;
        }
        .ng-bias-pill{
            display:inline-flex;
            align-items:center;
            gap: 5px;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.35px;
            text-transform: uppercase;
        }
        .trend-up{
            color: #0b7a3c;
            background: rgba(16,185,129,0.16);
            border: 1px solid rgba(16,185,129,0.30);
        }
        .trend-down{
            color: #ad1b16;
            background: rgba(239,68,68,0.14);
            border: 1px solid rgba(239,68,68,0.28);
        }
        .trend-flat{
            color: #7a4b00;
            background: rgba(245,158,11,0.16);
            border: 1px solid rgba(245,158,11,0.30);
        }
        .ng-pred-foot{
            margin-top: 2px;
            font-size: 10px;
            color: #355570;
            line-height: 1.25;
        }
        @media (prefers-color-scheme: dark){
            .ng-pred-row{
                background: rgba(16,35,55,0.92);
                border: 1px solid rgba(130,173,214,0.28);
            }
            .ng-pred-key{
                color: #c9def4;
            }
            .ng-pred-val{
                color: #eef7ff;
            }
            .ng-pred-foot{
                color: #b8d3ed;
            }
        }

        .home-scroll-y{
            min-height: 0;
            overflow: auto;
            padding-right: 1px;
        }
        .weather-headlines{
            margin-top: 2px;
            display:flex;
            flex-direction:column;
            gap: 5px;
            min-height: 0;
            flex: 1;
            overflow:auto;
        }
        .wx-week{
            margin-top: 6px;
            display:flex;
            flex-direction:column;
            gap: 4px;
            max-height: 112px;
            overflow:auto;
            padding-right: 2px;
        }
        .wx-week-row{
            display:grid;
            grid-template-columns: 52px 1fr auto;
            align-items:center;
            gap: 8px;
            border-radius: 9px;
            padding: 4px 6px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-main);
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.20);
        }
        .wx-week-day{ color: var(--text-secondary); }
        .wx-week-range{ font-weight: 900; white-space: nowrap; }
        .wx-week-code{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-secondary);
        }
        .weather-item{
            border-radius: 10px;
            padding: 5px 7px;
            font-size: 10px;
            line-height: 1.25;
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
            color: var(--text-main);
        }
        .weather-item-head{
            font-weight: 800;
            color: #1f5179;
            margin-bottom: 2px;
            font-size: 10px;
        }
        .home-holiday-list{
            margin-top: 3px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-height: 0;
            flex: 1;
            overflow: auto;
            padding-right: 2px;
        }
        .home-holiday-item{
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 10px;
            font-weight: 700;
            border-radius: 10px;
            padding: 5px 7px;
            color: var(--text-main);
            background: linear-gradient(180deg, rgba(228,241,252,0.92), rgba(252,254,255,0.98));
            border: 1px solid rgba(84,132,172,0.22);
        }
        .home-holiday-left{
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .home-holiday-name{
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .home-holiday-tags{
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .home-holiday-tag{
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 1px 6px;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.2px;
            border: 1px solid transparent;
            white-space: nowrap;
        }
        .home-holiday-tag.federal{
            background: rgba(0,122,255,0.14);
            color: #0f4f85;
            border-color: rgba(0,122,255,0.26);
        }
        .home-holiday-tag.us{
            background: rgba(52,199,89,0.16);
            color: #1d6d41;
            border-color: rgba(52,199,89,0.26);
        }
        .home-holiday-tag.ismaili{
            background: rgba(249,115,22,0.15);
            color: #9a4d09;
            border-color: rgba(249,115,22,0.26);
        }
        .home-holiday-tag.note{
            background: rgba(99,102,241,0.15);
            color: #3842a5;
            border-color: rgba(99,102,241,0.25);
        }
        .home-holiday-date{
            color: var(--text-secondary);
            font-weight: 800;
            white-space: nowrap;
        }
        .home-card-news .scroll-card{
            height: 100%;
            padding: 8px;
        }
        .home-card-news .news-item{
            padding: 6px 7px;
            gap: 8px;
            border-radius: 10px;
        }
        .home-news-source{
            font-weight: 900;
            width: 64px;
            color: var(--text-secondary);
            font-size: 11px;
            flex: 0 0 auto;
        }
        .home-card-news .news-item a{
            font-size: 12px;
            line-height: 1.25;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .home-card-news .news-meta{
            font-size: 10px;
            margin-top: 2px;
        }
        @media (prefers-color-scheme: dark){
            .home-holiday-item,
            .wx-week-row,
            .weather-item{
                background: linear-gradient(180deg, rgba(21,43,66,0.84), rgba(14,24,38,0.95));
                border: 1px solid rgba(130,173,214,0.26);
            }
            .weather-item-head{ color: #cfe4fb; }
            .home-holiday-tag.federal{
                background: rgba(129,170,217,0.20);
                color: #d8e9fb;
                border-color: rgba(129,170,217,0.30);
            }
            .home-holiday-tag.us{
                background: rgba(110,214,148,0.20);
                color: #d4fae3;
                border-color: rgba(110,214,148,0.28);
            }
            .home-holiday-tag.ismaili{
                background: rgba(255,174,102,0.20);
                color: #ffe7cf;
                border-color: rgba(255,174,102,0.30);
            }
            .home-holiday-tag.note{
                background: rgba(157,162,255,0.20);
                color: #e3e5ff;
                border-color: rgba(157,162,255,0.30);
            }
        }
        @media (max-width: 1200px){
            .home-section{
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-template-areas:
                    "chart chart chart chart ng ng"
                    "weather weather todo todo team team"
                    "news news news cal cal cal";
                grid-template-rows: repeat(3, minmax(0, 1fr));
            }
            .home-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 760px){
            .home-view-shell{ padding: 10px; }
            .home-dashboard-area{
                overflow: auto !important;
                padding-right: 4px !important;
            }
            .home-section{
                grid-template-columns: 1fr;
                grid-template-areas:
                    "chart"
                    "ng"
                    "weather"
                    "todo"
                    "team"
                    "news"
                    "cal";
                grid-template-rows: unset;
                height: auto;
            }
            .home-kpis{ grid-template-columns: 1fr; }
            .todo-controls{ grid-template-columns: 1fr 1fr; }
        }

        /* Accessibility toggles */
        body.a11y-high-contrast{
            --bg-color: #ffffff;
            --glass-bg: rgba(255,255,255,0.98);
            --glass-border: rgba(0,0,0,0.35);
            --text-main: #000000;
            --text-secondary: #1f2937;
            --primary: #005fcc;
            --primary-hover: #004699;
        }
        body.a11y-reduced-motion *,
        body.a11y-reduced-motion *::before,
        body.a11y-reduced-motion *::after{
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }
        body.a11y-large-targets button,
        body.a11y-large-targets .btn-primary,
        body.a11y-large-targets .btn-secondary,
        body.a11y-large-targets .btn-danger,
        body.a11y-large-targets input,
        body.a11y-large-targets select{
            min-height: 42px;
        }