:root {
            --primary: #00aaff;
            --primary-dark: #008ecc;
            --primary-light: #e0f2fe;
            --bg-body: #f8faff;
            --bg-card: #ffffff;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --sidebar-width: 260px;
            --header-height: 70px;
            --nav-height: 70px;
            --shadow: 0 8px 20px rgba(0,0,0,0.08);
            --radius: 16px;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --purple: #8b5cf6;
            --info: #3b82f6;
        }

        body.dark-mode {
            --primary: #53d6ff;
            --primary-dark: #00aaff;
            --primary-light: #1e3a8a;
            --bg-body: #0f172a;
            --bg-card: #1e293b;
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --border-color: #334155;
            --shadow: 0 8px 20px rgba(0,0,0,0.4);
        }

        * { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; transition:background .3s,color .3s,border-color .3s; }
        body { background:var(--bg-body); color:var(--text-main); overflow-x:hidden; min-height:100vh; display:flex; padding-bottom:var(--nav-height); }
        a { text-decoration:none; color:inherit; }
        ul { list-style:none; }

        /* ===== SIDEBAR ===== */
        .sidebar {
            width:var(--sidebar-width); height:100vh; background:var(--bg-card);
            position:fixed; top:0; left:0; z-index:1300;
            border-right:1px solid var(--border-color);
            display:flex; flex-direction:column; transition:transform .3s ease;
        }
        @media(max-width:768px){
            .sidebar { transform:translateX(-100%); width:280px; padding-bottom:50px; }
            .sidebar.active { transform:translateX(0); box-shadow:0 0 50px rgba(0,0,0,.5); }
        }
        .sidebar-overlay {
            display:none; position:fixed; inset:0;
            background:rgba(0,0,0,.5); z-index:999; backdrop-filter:blur(3px);
        }
        .sidebar-overlay.active { display:block; }

        .brand { height:var(--header-height); display:flex; align-items:center; padding:0 20px; border-bottom:1px solid var(--border-color); gap:12px; }
        .brand-logo { width:45px; height:45px; overflow:hidden; flex-shrink:0; }
        .brand-logo img { width:100%; height:100%; object-fit:contain; }
        .brand-text { font-size:23px; font-weight:700; color:var(--primary); }

        .sidebar-menu { padding:20px 0; flex:1; overflow-y:auto; }
        .sidebar-menu::-webkit-scrollbar { width:6px; }
        .sidebar-menu::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }

        .menu-item {
            padding:12px 24px; display:flex; align-items:center;
            color:var(--text-muted); font-weight:500;
            border-left:4px solid transparent; margin-bottom:2px;
        }
        .menu-item i { width:25px; font-size:18px; margin-right:12px; }
        .menu-item:hover, .menu-item.active { background:var(--primary-light); color:var(--primary); border-left-color:var(--primary); }

        .sidebar-footer { padding:10px; border-top:1px solid var(--border-color); }
        .logout-btn {
            width:100%; padding:12px; background:rgba(239,68,68,.1); color:#ef4444;
            border:none; border-radius:8px; cursor:pointer; font-weight:600;
            display:flex; align-items:center; justify-content:center; gap:10px; font-family:'Poppins',sans-serif;
        }
        .logout-btn:hover { background:#ef4444; color:white; }

        /* ===== MAIN ===== */
        .main-content {
            margin-left:var(--sidebar-width); min-height:100vh;
            display:flex; flex-direction:column;
            width:calc(100% - var(--sidebar-width));
        }
        @media(max-width:768px){ .main-content { margin-left:0; width:100%; } }

        .top-header {
            height:var(--header-height); background:var(--bg-card);
            display:flex; align-items:center; justify-content:space-between;
            padding:0 30px; position:sticky; top:0; z-index:900;
            border-bottom:1px solid var(--border-color);
        }
        .menu-toggle { display:none; font-size:24px; cursor:pointer; }
        @media(max-width:768px){ .menu-toggle { display:block; } }

        .header-logo { display:flex; align-items:center; gap:12px; }
        .header-logo-img { width:40px; height:40px; border-radius:10px; overflow:hidden; }
        .header-logo-img img { width:100%; height:100%; object-fit:contain; }
        .header-brand-text { font-size:23px; font-weight:700; color:var(--primary); }

        .header-right { display:flex; align-items:center; gap:15px; }
        .eye-toggle {
            background:var(--primary-light); border:none; color:var(--text-main);
            width:40px; height:40px; border-radius:50%; cursor:pointer;
            display:flex; align-items:center; justify-content:center; font-size:18px;
        }

        /* ===== CONTAINER ===== */
        .container { padding:25px; max-width:1400px; margin:0 auto; width:100%; flex:1; overflow-x:hidden; }
        @media(max-width:768px){ .container { padding:15px; padding-bottom:calc(var(--nav-height) + 20px); } }

        /* ===== PAGE HEADER ===== */
        .page-header {
            display:flex; align-items:center; justify-content:space-between;
            margin-bottom:25px; flex-wrap:wrap; gap:15px;
        }
        .page-header-left h2 { font-size:22px; font-weight:700; }
        .page-header-left p { font-size:13px; color:var(--text-muted); margin-top:3px; }

        /* ===== DATE RANGE FILTER ===== */
        .date-filter-bar {
            background:var(--bg-card); border-radius:var(--radius);
            padding:16px 20px; margin-bottom:25px;
            display:flex; align-items:center; gap:15px;
            flex-wrap:wrap; box-shadow:var(--shadow);
            border:1px solid var(--border-color);
        }
        .date-filter-bar label { font-size:13px; color:var(--text-muted); font-weight:500; }
        .date-input {
            padding:8px 12px; border:1px solid var(--border-color);
            border-radius:8px; background:var(--bg-body); color:var(--text-main);
            font-size:13px; font-family:'Poppins',sans-serif;
        }
        .date-input:focus { outline:none; border-color:var(--primary); }
        .quick-btns { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
        .quick-btn {
            padding:7px 14px; border-radius:8px; border:1px solid var(--border-color);
            background:var(--bg-body); color:var(--text-muted); font-size:12px;
            font-weight:600; cursor:pointer; font-family:'Poppins',sans-serif; transition:.2s;
        }
        .quick-btn:hover, .quick-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
        .apply-btn {
            padding:8px 20px; border-radius:8px; background:var(--primary); color:white;
            border:none; font-weight:600; font-size:13px; cursor:pointer;
            font-family:'Poppins',sans-serif; display:flex; align-items:center; gap:8px;
        }
        .apply-btn:hover { background:var(--primary-dark); }

        /* ===== STATS CARDS ===== */
        .stats-grid {
            display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
            gap:18px; margin-bottom:25px;
        }
        .stat-card {
            background:var(--bg-card); border-radius:var(--radius); padding:22px;
            box-shadow:var(--shadow); border:1px solid var(--border-color);
            display:flex; align-items:center; gap:15px;
            transition:transform .2s;
        }
        .stat-card:hover { transform:translateY(-3px); }
        .stat-icon {
            width:52px; height:52px; border-radius:14px;
            display:flex; align-items:center; justify-content:center;
            font-size:22px; color:white; flex-shrink:0;
        }
        .si-blue   { background:linear-gradient(135deg,#00aaff,#0066cc); }
        .si-green  { background:linear-gradient(135deg,#10b981,#059669); }
        .si-orange { background:linear-gradient(135deg,#f59e0b,#d97706); }
        .si-red    { background:linear-gradient(135deg,#ef4444,#dc2626); }
        .si-purple { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
        .si-teal   { background:linear-gradient(135deg,#06b6d4,#0891b2); }

        .stat-content h3 { font-size:22px; font-weight:700; margin-bottom:4px; }
        .stat-content p  { font-size:12px; color:var(--text-muted); font-weight:500; }
        .stat-content .stat-change {
            font-size:11px; margin-top:3px; font-weight:600;
            display:flex; align-items:center; gap:4px;
        }
        .change-up   { color:var(--success); }
        .change-down { color:var(--danger); }

        /* ===== CHARTS GRID ===== */
        .charts-grid {
            display:grid; grid-template-columns:1fr 1fr;
            gap:20px; margin-bottom:25px;
        }
        .chart-card-full { grid-column:1/-1; }

        @media(max-width:900px){ .charts-grid { grid-template-columns:1fr; } }

        .chart-card {
            background:var(--bg-card); border-radius:var(--radius);
            padding:22px; box-shadow:var(--shadow);
            border:1px solid var(--border-color);
            height:340px; display:flex; flex-direction:column;
            min-width:0; overflow:hidden;
        }
        .chart-card.tall { height:380px; }

        .chart-header {
            display:flex; justify-content:space-between; align-items:center;
            margin-bottom:15px; flex-shrink:0; flex-wrap:wrap; gap:10px;
        }
        .chart-header h3 {
            font-size:15px; font-weight:600;
            display:flex; align-items:center; gap:8px;
        }
        .chart-header h3 i { color:var(--primary); }
        .chart-select {
            padding:6px 10px; border-radius:8px;
            border:1px solid var(--border-color); background:var(--bg-body);
            color:var(--text-main); font-size:12px; font-family:'Poppins',sans-serif;
        }
        .chart-container { flex:1; position:relative; min-width:0; min-height:0; }

        /* ===== PLATFORM TABLE ===== */
        .section-card {
            background:var(--bg-card); border-radius:var(--radius);
            padding:22px; box-shadow:var(--shadow);
            border:1px solid var(--border-color); margin-bottom:25px;
        }
        .section-header {
            display:flex; justify-content:space-between; align-items:center;
            margin-bottom:20px; padding-bottom:15px;
            border-bottom:1px solid var(--border-color);
        }
        .section-header h3 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:10px; }
        .section-header h3 i { color:var(--primary); }

        .breakdown-table { width:100%; border-collapse:collapse; }
        .breakdown-table th {
            text-align:left; padding:10px 14px; font-size:12px;
            color:var(--text-muted); font-weight:600; text-transform:uppercase;
            letter-spacing:.5px; border-bottom:2px solid var(--border-color);
        }
        .breakdown-table td {
            padding:12px 14px; font-size:14px;
            border-bottom:1px solid var(--border-color);
        }
        .breakdown-table tr:last-child td { border-bottom:none; }
        .breakdown-table tr:hover td { background:var(--bg-body); }

        .platform-cell { display:flex; align-items:center; gap:10px; }
        .platform-icon-sm {
            width:34px; height:34px; border-radius:8px;
            background:var(--primary-light); color:var(--primary);
            display:flex; align-items:center; justify-content:center;
            font-size:16px; flex-shrink:0;
        }
        .platform-icon-sm.ig  { background:rgba(225,48,108,.1); color:#e1306c; }
        .platform-icon-sm.fb  { background:rgba(24,119,242,.1);  color:#1877f2; }
        .platform-icon-sm.tw  { background:rgba(29,161,242,.1);  color:#1da1f2; }
        .platform-icon-sm.yt  { background:rgba(255,0,0,.1);     color:#ff0000; }
        .platform-icon-sm.tt  { background:rgba(0,0,0,.08);      color:#010101; }
        .platform-icon-sm.tg  { background:rgba(0,136,204,.1);   color:#0088cc; }
        .platform-icon-sm.wa  { background:rgba(37,211,102,.1);  color:#25d366; }

        .perf-bar-wrap { display:flex; align-items:center; gap:10px; }
        .perf-bar { flex:1; height:7px; background:var(--border-color); border-radius:5px; overflow:hidden; min-width:60px; }
        .perf-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--primary),#0066cc); transition:width 1s ease; }
        .perf-pct { font-size:12px; font-weight:700; color:var(--primary); min-width:35px; text-align:right; }

        .badge {
            padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600;
        }
        .badge-success { background:rgba(16,185,129,.12); color:var(--success); }
        .badge-warning { background:rgba(245,158,11,.12);  color:var(--warning); }
        .badge-danger  { background:rgba(239,68,68,.12);   color:var(--danger);  }
        .badge-info    { background:rgba(0,170,255,.12);   color:var(--primary); }

        .table-responsive { overflow-x:auto; }

        /* ===== BOTTOM NAV ===== */
        .bottom-nav {
            position:fixed; bottom:0; left:0; right:0;
            height:var(--nav-height); background:var(--bg-card);
            border-top:1px solid var(--border-color);
            display:flex; justify-content:space-around; align-items:center;
            z-index:1000; padding:0 20px;
            box-shadow:0 -5px 20px rgba(0,0,0,.1);
        }
        .nav-item {
            display:flex; flex-direction:column; align-items:center;
            gap:4px; color:var(--text-muted); cursor:pointer;
            padding:8px 12px; border-radius:10px; transition:.3s;
            flex:1; max-width:80px; text-decoration:none;
        }
        .nav-item i { font-size:20px; }
        .nav-item span { font-size:11px; font-weight:500; }
        .nav-item.active, .nav-item:hover { color:var(--primary); background:var(--primary-light); }

        /* ===== MODAL ===== */
        .modal-overlay {
            position:fixed; inset:0; background:rgba(0,0,0,.6);
            display:none; align-items:center; justify-content:center;
            z-index:2000; backdrop-filter:blur(4px);
        }
        .modal-overlay.active { display:flex; }
        .mini-modal {
            background:var(--bg-card); border-radius:20px; padding:30px;
            max-width:400px; width:90%; max-height:90vh; overflow-y:auto;
            box-shadow:var(--shadow); border:1px solid var(--border-color);
            text-align:center; animation:slideUp .3s;
        }
        @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
        .mini-modal-icon { font-size:52px; margin-bottom:15px; }
        .mini-modal h3   { font-size:20px; font-weight:700; margin-bottom:10px; }
        .mini-modal p    { color:var(--text-muted); font-size:14px; margin-bottom:25px; line-height:1.6; }
        .mini-modal-btns { display:flex; gap:12px; }
        .mini-modal-btns button {
            flex:1; padding:12px; border-radius:10px; border:none;
            font-weight:600; font-size:14px; cursor:pointer; font-family:'Poppins',sans-serif;
        }
        .btn-cancel-m { background:var(--border-color); color:var(--text-main); }
        .btn-danger-m { background:var(--danger); color:white; }

        /* ===== LOADING SKELETON ===== */
        .skeleton {
            background:linear-gradient(90deg,var(--border-color) 25%,var(--bg-body) 50%,var(--border-color) 75%);
            background-size:200% 100%;
            animation:shimmer 1.5s infinite;
            border-radius:8px; height:20px;
        }
        @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

        /* ===== EMPTY STATE ===== */
        .empty-row td {
            text-align:center; padding:40px; color:var(--text-muted);
            font-size:14px;
        }
        .empty-row i { font-size:32px; display:block; margin-bottom:10px; opacity:.4; }

        /* ===== RESPONSIVE ===== */
        @media(max-width:768px){
            .stats-grid { grid-template-columns:repeat(2,1fr); }
            .date-filter-bar { flex-direction:column; align-items:stretch; }
            .quick-btns { margin-left:0; }
            .chart-card { height:280px; }
            .chart-card.tall { height:300px; }
        }
        @media(max-width:480px){
            .stats-grid { grid-template-columns:1fr; }
        }

        .menu-group-label {
            padding: 16px 24px 5px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: var(--text-muted);
            opacity: 0.55;
            pointer-events: none;
            user-select: none;
            list-style: none;
        }