/* --- EXACT THEME COLORS & SCALING VARIABLES --- */
        :root {
            --primary: #4318FF;      
            --secondary: #FF7A00;    
            --text-dark: #2B3674;    
            --text-muted: #A3AED0;   
            --bg-color: #F4F7FE;     
            --card-bg: rgba(255, 255, 255, 0.85); 
            --card-border: rgba(255, 255, 255, 0.5);
            --shadow: 0px 4px 20px rgba(112, 144, 176, 0.08);
            --border-light: rgba(163, 174, 208, 0.2);
            --font-xs: 11px;
            --font-sm: 12px;
            --font-md: 14px; 
            --radius-lg: 24px;
            --radius-md: 16px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        body { background-color: var(--bg-color); color: var(--text-dark); min-height: 100vh; overflow-x: hidden; font-size: var(--font-md); }

        /* --- ANIMATED BACKGROUND & TRACKER --- */
        .bg-mesh {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2;
            background: radial-gradient(circle at top left, #EAE4FF 0%, transparent 40%),
                        radial-gradient(circle at bottom right, #FFE8D6 0%, transparent 40%);
            opacity: 0.7;
        }

        #blob {
            background: linear-gradient(to right, #4318FF, #FF7A00); border-radius: 50%;
            position: fixed; left: 50%; top: 50%; height: 350px; width: 350px; 
            transform: translate(-50%, -50%); z-index: -1; filter: blur(120px); opacity: 0.3; pointer-events: none;
        }

        /* --- MASTER LAYOUT FOR ADS & DASHBOARD --- */
        .page-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; }
        .desktop-layout { display: flex; justify-content: center; align-items: stretch; gap: 15px; width: 100%; max-width: 1800px; }

        /* Hidden Ad Spaces */
        .ad-space {
            display: none; background: rgba(255,0,0,0.05); border: 2px dashed red; border-radius: var(--radius-md);
            align-items: center; justify-content: center; color: red; font-weight: bold;
        }
        .side-ads { width: 160px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; }
        .ad-vertical { height: 100%; min-height: 400px; }
        .mobile-bottom-ad { width: 100%; max-width: 600px; height: 80px; margin-top: 15px; display: none; }

        /* --- MAIN DASHBOARD GRID (WIDER CENTER, NARROW SIDEBARS) --- */
        .app-container {
            display: grid; 
            grid-template-columns: 200px 1fr 240px; /* Thinner sidebars = wider center content */
            gap: 15px; /* Tight gaps between panels */
            width: 100%; max-width: 1500px; height: 92vh; min-height: 700px; 
            background: rgba(244, 247, 254, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 15px; 
            box-shadow: 0 10px 40px rgba(112, 144, 176, 0.15); animation: fadeIn 0.8s ease-out;
        }

        .glass-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 12px 15px; box-shadow: var(--shadow); backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .glass-card:hover { transform: translateY(-2px); box-shadow: 0px 8px 25px rgba(112, 144, 176, 0.12); }

        ::-webkit-scrollbar { width: 0; height: 0; display: none; }
        * { -ms-overflow-style: none; scrollbar-width: none; }

        /* --- LEFT SIDEBAR --- */
        .sidebar { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; height: 100%; padding-right: 5px;}
        .user-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
        .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), #FFA552); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 14px; flex-shrink: 0; }
        .user-info h4 { font-size: 14px; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;}
        .user-info p { font-size: 10px; color: var(--text-muted); }

        .nav-section { margin-bottom: 5px; }
        .nav-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; font-weight: 600; margin-bottom: 5px; display: block; }
        .nav-menu { list-style: none; display: flex; flex-direction: column; gap: 2px; }
        
        .nav-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; color: var(--text-muted); font-weight: 500; cursor: pointer; transition: all 0.2s; font-size: 13px; text-decoration: none; }
        .nav-item-left { display: flex; align-items: center; gap: 10px; }
        .nav-item-left i { width: 16px; text-align: center; }
        .nav-item .fa-lock { font-size: 10px; opacity: 0.5; } 
        
        .nav-item:hover { background: rgba(67, 24, 255, 0.05); color: var(--primary); }
        .nav-item.active { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(67, 24, 255, 0.3); }
        .nav-item.active .fa-lock { opacity: 1; color: white;}

        .btn-add { background: white; border: 1px dashed var(--border-light); padding: 15px; border-radius: var(--radius-md); text-align: center; cursor: pointer; margin-top: auto; transition: 0.3s; flex-shrink: 0; }
        .btn-add:hover { border-color: var(--secondary); background: rgba(255, 122, 0, 0.05); }
        .icon-btn { background: var(--secondary); color: white; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 6px; font-size: 12px;}
        .btn-add p { font-size: 12px; font-weight: 600; }
        .btn-add span { font-size: 10px; color: var(--primary); }

        /* --- MIDDLE CONTENT (TIGHTER VERTICAL SPACING) --- */
        .main-content { display: flex; flex-direction: column; gap: 12px; height: 100%; overflow: hidden; }

        .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; flex-shrink: 0; margin-bottom: 5px;}
        .header h1 { font-size: 22px; color: var(--text-dark); margin-bottom: 2px; }
        .header p { color: var(--text-muted); font-size: 12px; }

        .search-bar { background: white; border-radius: 20px; padding: 8px 15px; display: flex; align-items: center; gap: 8px; width: 250px; box-shadow: var(--shadow); }
        .search-bar input { border: none; outline: none; background: transparent; font-size: 12px; width: 100%; color: var(--text-dark); }
        .search-bar i { color: var(--text-muted); font-size: 12px; }

        /* EXTREMELY NARROW STATS ROW */
        .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex-shrink: 0; }
        .stat-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
        .stat-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; flex-shrink: 0;}
        .bg-purple { background: rgba(67, 24, 255, 0.1); color: var(--primary); }
        .bg-red { background: rgba(255, 59, 48, 0.1); color: #FF3B30; }
        .bg-green { background: rgba(52, 199, 89, 0.1); color: #34C759; }
        .stat-info p { font-size: 10px; color: var(--text-muted); margin-bottom: 0px; }
        .stat-info h3 { font-size: 16px; color: var(--text-dark); margin-top: 2px;}

        /* FORM CONTROLS (Auth & Webhooks) */
        .form-control { width: 100%; padding: 12px 16px; border: 1px solid var(--border-light); border-radius: 12px; background: rgba(255, 255, 255, 0.8); font-size: 14px; color: var(--text-dark); outline: none; transition: 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
        .form-control:focus { border-color: var(--primary); background: white; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 0 0 3px rgba(67, 24, 255, 0.1); }
        .form-control::placeholder { color: var(--text-3); }

        /* DESKTOP ADDRESS BLOCK */
        .address-block { display: flex; align-items: center; background: white; padding: 6px 6px 6px 15px; border-radius: 100px; box-shadow: 0 5px 20px rgba(112, 144, 176, 0.1); border: 1px solid var(--border-light); gap: 8px; flex-shrink: 0;}
        .address-text { flex: 1; font-size: 15px; font-weight: 600; color: var(--primary); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .btn-action { background: var(--bg-color); border: none; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--text-dark); cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 6px; }
        .btn-action:hover { background: var(--border-light); }
        .btn-primary { background: rgba(255, 122, 0, 0.15); color: #4b5563; border: 1px solid rgba(255, 122, 0, 0.5); box-shadow: 0 4px 15px rgba(255, 122, 0, 0.15); padding: 10px 20px; border-radius: 100px; font-weight: 600; cursor: pointer; transition: 0.3s; }
        .btn-primary:hover { background: rgba(255, 122, 0, 0.25); border-color: var(--secondary); color: var(--text-dark); }

        /* --- INBOX AREA --- */
        .inbox-container { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 15px;}
        .inbox-list-view { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding-right: 5px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0;}
        .section-header h2 { font-size: 15px; color: var(--text-dark); }
        .view-all { font-size: 11px; color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; background: transparent; border: none; }

        .email-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border-light); transition: 0.2s; cursor: pointer; border-radius: 10px; flex-shrink: 0;}
        .email-item:last-child { border-bottom: none; }
        .email-item:hover { background: white; transform: scale(1.01); box-shadow: var(--shadow); border-color: transparent;}
        
        .email-sender { display: flex; align-items: center; gap: 10px; overflow: hidden;}
        .sender-img { width: 34px; height: 34px; border-radius: 8px; background: #e0e5f2; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 14px; flex-shrink: 0;}
        .sender-info { overflow: hidden; }
        .sender-info h4 { font-size: 13px; color: var(--text-dark); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .sender-info p { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .email-action { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-light); display: flex; justify-content: center; align-items: center; color: var(--text-muted); transition: 0.2s; font-size: 10px; flex-shrink: 0;}
        .email-item:hover .email-action { background: var(--primary); color: white; border-color: var(--primary); }

        /* Reader View */
        .email-reader-view { display: none; flex-direction: column; height: 100%; animation: fadeInRight 0.3s ease-out forwards; overflow-y: auto; }
        .reader-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; flex-shrink: 0;}
        .btn-back { background: var(--bg-color); border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-dark); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: 0.2s;}
        .btn-back:hover { background: var(--border-light); color: var(--primary); }
        
        .reader-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-shrink: 0;}
        .reader-meta h3 { font-size: 14px; color: var(--text-dark); margin-bottom: 2px;}
        .reader-meta p { font-size: 11px; color: var(--text-muted); }
        .reader-subject { font-size: 18px; color: var(--text-dark); margin-bottom: 10px; font-weight: 700; line-height: 1.3; flex-shrink: 0;}
        .reader-body { font-size: 13px; color: #4b5563; line-height: 1.5; flex: 1; }
        .reader-body p { margin-bottom: 10px; }

        /* --- RIGHT SIDEBAR --- */
        .right-panel { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; height: 100%; padding-right: 5px; }
        .header-icons { display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; padding-bottom: 5px;}
        .icon-circle { width: 34px; height: 34px; background: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--text-muted); box-shadow: var(--shadow); cursor: pointer; transition: 0.2s; position: relative; font-size: 14px; text-decoration: none; }
        .icon-circle:hover { color: var(--primary); }
        .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: #FF3B30; border-radius: 50%; }

        .chart-card { display: flex; flex-direction: column; align-items: center; padding: 20px 10px; flex-shrink: 0; }
        .radial-progress { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--secondary) 0% 75%, var(--bg-color) 75% 100%); display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 10px; }
        .radial-inner { width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .radial-inner h2 { font-size: 16px; color: var(--text-dark); }
        .radial-inner p { font-size: 10px; color: var(--text-muted); }
        .chart-card h3 { font-size: 14px; color: var(--text-dark); margin-bottom: 2px; }
        .chart-card p { font-size: 11px; color: var(--text-muted); }

        .small-list { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
        .list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: white; border-radius: 10px; border: 1px solid var(--border-light); cursor: pointer; transition: 0.2s;}
        .list-item:hover { border-color: var(--primary); }
        .list-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-color); display: flex; justify-content: center; align-items: center; color: var(--text-muted); font-size: 12px;}
        .list-text h4 { font-size: 12px; color: var(--text-dark); }
        .list-arrow { color: var(--text-muted); font-size: 10px; }

        .promo-card { background: linear-gradient(135deg, #FFF6EF 0%, #FFFFFF 100%); border: 1px solid #FFE4CE; text-align: center; padding: 12px; border-radius: 12px; cursor: pointer; transition: 0.2s; flex-shrink: 0; margin-bottom: auto;}
        .promo-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 122, 0, 0.15);}
        .promo-card p { color: var(--secondary); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }

        /* --- CUSTOM ALERT MODAL --- */
        .custom-alert-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(43, 54, 116, 0.4); backdrop-filter: blur(5px);
            z-index: 9999; display: flex; justify-content: center; align-items: center;
            opacity: 0; visibility: hidden; transition: 0.3s ease;
        }
        .custom-alert-overlay.active { opacity: 1; visibility: visible; }
        .custom-alert-box {
            background: white; border-radius: 20px; padding: 25px; width: 90%; max-width: 360px;
            text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.2); transform: scale(0.9); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid var(--border-light);
        }
        .custom-alert-overlay.active .custom-alert-box { transform: scale(1); }
        .alert-icon { width: 50px; height: 50px; background: rgba(255, 59, 48, 0.1); color: #FF3B30; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; margin: 0 auto 15px auto; }
        .custom-alert-box h3 { color: var(--text-dark); font-size: 18px; margin-bottom: 10px; }
        .custom-alert-box p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin-bottom: 25px; }
        .alert-actions { display: flex; gap: 10px; }
        .alert-actions button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; border: none; }
        .btn-cancel { background: var(--bg-color); color: var(--text-dark); }
        .btn-cancel:hover { background: #e2e8f0; }
        .btn-confirm { background: #FF3B30; color: white; box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3); }
        .btn-confirm:hover { background: #d32f2f; }

        /* Animations */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

        /* --- RESPONSIVE DESIGN --- */
        @media (min-width: 769px) {
            .mobile-bottom-ad { display: none !important; }
        }

        @media (max-width: 1100px) {
            .side-ads { display: none !important; }
            .app-container { grid-template-columns: 200px 1fr; max-width: 100%; height: 95vh;}
            .right-panel { display: none; }
        }

        @media (max-width: 768px) {
            .app-container { 
                display: flex; flex-direction: column; padding: 12px; gap: 12px;
                height: 100%; min-height: 100vh; background: rgba(244, 247, 254, 0.95); border-radius: 0; border: none;
            }
            .page-wrapper { padding: 0; display: block;}
            .sidebar { display: none; }
            
            .header { flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 5px;}
            .search-bar { width: 100%; margin-top: 5px; }

            /* MOBILE STATS ROW - STRICT 3 COLUMNS COMPACT */
            .stats-row { 
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; 
            }
            .stat-card { 
                flex-direction: column; padding: 10px 5px; border-radius: 12px; background: white; text-align: center; gap: 4px; 
            }
            .stat-icon { width: 28px; height: 28px; font-size: 12px; margin: 0 auto; }
            .stat-info { display: flex; flex-direction: column; align-items: center; gap: 0;}
            .stat-info p { font-size: 9px; line-height: 1;}
            .stat-info h3 { font-size: 13px; margin-top: 2px;}

            /* MOBILE ADDRESS BLOCK - SLEEK SINGLE LINE */
            .address-block { 
                display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
                padding: 4px; border-radius: 12px; background: white; gap: 4px;
            }
            .address-text { 
                font-size: 12px; padding-left: 8px; flex: 1; /* Pushes buttons to the right */
            }
            .btn-action {
                flex: 0 0 auto; /* Don't stretch */
                padding: 8px 10px; font-size: 11px; border-radius: 8px; margin: 0;
            }
            .btn-action i { font-size: 10px; }

            .main-content { overflow: visible; height: auto;}
            .inbox-container { overflow: visible; min-height: 400px; padding: 12px;}
            .inbox-list-view { overflow: visible; height: auto;}
            .email-item { padding: 10px 5px;}
        }