:root {
  --sidebar-w: 240px;
  --bg: #f0f4ff;
  --card: #ffffff;
  --navy: #1a56db;
  --navy2: #1e429f;
  --navy3: #1c3faa;
  --border: #dbeafe;
  --text1: #1e3a5f;
  --text2: #2563eb;
  --text3: #374151;
  --text4: #6b7280;
  --text5: #9ca3af;
  --gold: #f59e0b;
  --gold2: #fbbf24;
  --green: #10b981;
  --green2: #34d399;
  --red: #ef4444;
  --red2: #f87171;
  --blue: #3b82f6;
  --blue2: #60a5fa;
  --purple: #8b5cf6;
  --topbar-bg: #ffffff;
  --sidebar-text: #e0eaff;
  --sidebar-sub: #c7d9ff;
  --sidebar-hover: rgba(255,255,255,0.12);
  --sidebar-active: rgba(255,255,255,0.2);
  --radius: 8px;
  --radius2: 10px;
  --shadow: 0 2px 8px rgba(37,99,235,0.08);
  --shadow2: 0 4px 16px rgba(37,99,235,0.12);
}
[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --navy: #1e3a8a;
  --navy2: #1e3a8a;
  --navy3: #172554;
  --border: #1e3a5f;
  --text1: #e2e8f0;
  --text2: #93c5fd;
  --text3: #cbd5e1;
  --text4: #94a3b8;
  --text5: #64748b;
  --topbar-bg: #1e293b;
  --sidebar-text: #e0eaff;
  --sidebar-sub: #93c5fd;
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-active: rgba(255,255,255,0.15);
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow2: 0 4px 16px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text3);display:flex;min-height:100vh;transition:background .3s,color .3s;}

/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);height:100vh;background:var(--navy);border-right:1px solid rgba(255,255,255,0.1);display:flex;flex-direction:column;z-index:100;overflow-y:auto;overflow-x:hidden;transition:background .3s;}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:2px;}
.sb-logo{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;}
.sb-logo-inner{display:flex;align-items:center;gap:10px;}
.sb-logo-icon{font-size:24px;}
.sb-logo-text{color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px;}
.sb-logo-sub{color:rgba(255,255,255,0.5);font-size:10px;}
.sb-section{flex:1;padding:8px 0;}
.sb-label{color:rgba(255,255,255,0.4);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:12px 16px 4px;}
.sb-nav{list-style:none;}
.sb-nav > li > a{display:flex;align-items:center;gap:8px;padding:9px 14px;color:var(--sidebar-text);text-decoration:none;font-size:13px;border-radius:6px;margin:1px 6px;transition:background .15s,color .15s;}
.sb-nav > li > a:hover,.sb-nav > li > a.active{background:var(--sidebar-active);color:#fff;}
.sb-parent{display:flex;align-items:center;gap:8px;padding:9px 14px;color:var(--sidebar-text);font-size:13px;border-radius:6px;margin:1px 6px;cursor:pointer;transition:background .15s;user-select:none;}
.sb-parent:hover,.sb-parent.active{background:var(--sidebar-active);color:#fff;}
.sb-arrow{margin-left:auto;font-size:9px;transition:transform .2s;opacity:.6;}
.sb-parent.open .sb-arrow{transform:rotate(90deg);}
.sb-sub{list-style:none;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.sb-sub.open{max-height:300px;}
.sb-sub li a{display:flex;align-items:center;gap:6px;padding:7px 14px 7px 36px;color:var(--sidebar-sub);text-decoration:none;font-size:12px;border-radius:5px;margin:1px 6px;transition:background .15s,color .15s;}
.sb-sub li a:hover,.sb-sub li a.active{background:var(--sidebar-hover);color:#fff;}
.sb-sub li a::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.3);flex-shrink:0;}
.sb-sub li a.active::before{background:var(--gold);}
.ico-e{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.sb-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;margin-left:auto;}
.sb-badge.red{background:#ef4444;color:#fff;}
.sb-badge.gold{background:#f59e0b;color:#fff;}
.sb-badge.blue{background:#3b82f6;color:#fff;}
.sb-badge.new{background:linear-gradient(90deg,#10b981,#3b82f6);color:#fff;}
.sb-sub-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:8px;font-size:9px;font-weight:600;margin-left:auto;}
.sb-sub-badge.red{background:#ef4444;color:#fff;}
.sb-sub-badge.gold{background:#f59e0b;color:#fff;}
.sb-footer{padding:12px;border-top:1px solid rgba(255,255,255,0.1);flex-shrink:0;}
.sb-user{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;transition:background .15s;}
.sb-user:hover{background:var(--sidebar-hover);}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.sb-user-name{color:#fff;font-size:12px;font-weight:600;}
.sb-user-role{color:rgba(255,255,255,0.5);font-size:10px;}
.sb-online{width:8px;height:8px;border-radius:50%;background:#10b981;margin-left:auto;flex-shrink:0;}
.sb-logout{display:flex;align-items:center;gap:6px;padding:8px 10px;color:rgba(255,255,255,0.5);text-decoration:none;font-size:12px;border-radius:6px;margin-top:4px;transition:background .15s,color .15s;}
.sb-logout:hover{background:rgba(239,68,68,0.2);color:#f87171;}

/* MAIN LAYOUT */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}

/* TOPBAR */
.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border);padding:0 20px;height:56px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow);}
.topbar-title{font-size:16px;font-weight:700;color:var(--text1);flex:1;}
.topbar-title span{color:var(--text4);font-weight:400;font-size:13px;}
.tb-search{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--text4);}
.tb-search input{border:none;background:transparent;outline:none;font-size:12px;color:var(--text3);width:160px;}
.tb-actions{display:flex;align-items:center;gap:8px;}
.tb-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:14px;transition:background .15s;}
.tb-btn:hover{background:var(--bg);}
.tb-notif{position:relative;}
.tb-notif-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#ef4444;border:1px solid var(--card);}
.theme-toggle{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .15s;border:none;}
.theme-toggle:hover{background:var(--bg);}

/* CONTENT */
.content{padding:20px;flex:1;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.page-title{font-size:20px;font-weight:700;color:var(--text1);}
.page-sub{font-size:12px;color:var(--text4);margin-top:2px;}
.page-header-actions{display:flex;gap:8px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);border:none;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy2);}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover{background:#059669;}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:#dc2626;}
.btn-warning{background:var(--gold);color:#fff;}
.btn-warning:hover{background:#d97706;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text3);}
.btn-outline:hover{background:var(--bg);}
.btn-sm{padding:5px 10px;font-size:11px;}

/* KPI CARDS */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:16px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.kpi-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;}
.kpi-card.blue::before{background:linear-gradient(90deg,var(--blue),var(--blue2));}
.kpi-card.green::before{background:linear-gradient(90deg,var(--green),var(--green2));}
.kpi-card.gold::before{background:linear-gradient(90deg,var(--gold),var(--gold2));}
.kpi-card.red::before{background:linear-gradient(90deg,var(--red),var(--red2));}
.kpi-card.purple::before{background:linear-gradient(90deg,var(--purple),#a78bfa);}
.kpi-label{font-size:11px;color:var(--text4);font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.kpi-value{font-size:24px;font-weight:700;color:var(--text1);margin:6px 0 4px;}
.kpi-change{font-size:11px;display:flex;align-items:center;gap:4px;}
.kpi-change.up{color:var(--green);}
.kpi-change.down{color:var(--red);}
.kpi-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:28px;opacity:.15;}

/* PANELS */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);box-shadow:var(--shadow);margin-bottom:16px;}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.panel-title{font-size:14px;font-weight:600;color:var(--text1);}
.panel-actions{display:flex;gap:6px;}
.panel-body{padding:16px;}

/* TABLES */
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{padding:10px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--text4);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg);}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text3);}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg);}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;}
.badge-success{background:rgba(16,185,129,.12);color:var(--green);}
.badge-danger{background:rgba(239,68,68,.12);color:var(--red);}
.badge-warning{background:rgba(245,158,11,.12);color:var(--gold);}
.badge-info{background:rgba(59,130,246,.12);color:var(--blue);}
.badge-purple{background:rgba(139,92,246,.12);color:var(--purple);}

/* GRID LAYOUTS */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.two-col-wide{display:grid;grid-template-columns:2fr 1fr;gap:16px;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* ALERTS */
.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:13px;}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#92400e;}
[data-theme="dark"] .alert-warning{color:#fbbf24;}
.alert-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#991b1b;}
[data-theme="dark"] .alert-danger{color:#f87171;}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:#1e40af;}
[data-theme="dark"] .alert-info{color:#93c5fd;}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#065f46;}
[data-theme="dark"] .alert-success{color:#34d399;}

/* FORM ELEMENTS */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--text3);margin-bottom:5px;}
.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text3);font-size:13px;outline:none;transition:border .15s;}
.form-control:focus{border-color:var(--blue);}
select.form-control{cursor:pointer;}
.toggle{position:relative;display:inline-block;width:40px;height:22px;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:22px;transition:.3s;}
.toggle-slider::before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
.toggle input:checked + .toggle-slider{background:var(--blue);}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px);}

/* TOAST */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow2);font-size:13px;min-width:260px;animation:slideIn .2s ease;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.warning{border-left:3px solid var(--gold);}
.toast.info{border-left:3px solid var(--blue);}
.toast-icon{font-size:16px;}
.toast-text{flex:1;color:var(--text3);}
.toast-close{background:none;border:none;cursor:pointer;color:var(--text4);font-size:14px;padding:0;}

/* STAT CARDS */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:14px;box-shadow:var(--shadow);}
.stat-label{font-size:11px;color:var(--text4);margin-bottom:4px;}
.stat-value{font-size:20px;font-weight:700;color:var(--text1);}
.stat-sub{font-size:11px;color:var(--text4);margin-top:2px;}

/* GAME CARDS */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}
.game-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:40px;}
.game-info{padding:12px;}
.game-name{font-size:13px;font-weight:600;color:var(--text1);margin-bottom:4px;}
.game-provider{font-size:11px;color:var(--text4);}
.game-stats{display:flex;gap:8px;margin-top:8px;}
.game-stat{font-size:10px;color:var(--text4);}
.game-stat span{color:var(--text2);font-weight:600;}

/* VIP CARDS */
.vip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;}
.vip-card{border-radius:var(--radius2);padding:20px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow2);}
.vip-card.diamond{background:linear-gradient(135deg,#1e3a8a,#3b82f6);}
.vip-card.platinum{background:linear-gradient(135deg,#374151,#6b7280);}
.vip-card.gold-vip{background:linear-gradient(135deg,#92400e,#f59e0b);}
.vip-card.silver{background:linear-gradient(135deg,#4b5563,#9ca3af);}
.vip-card-title{font-size:18px;font-weight:700;margin-bottom:4px;}
.vip-card-count{font-size:28px;font-weight:700;}
.vip-card-label{font-size:11px;opacity:.7;}
.vip-card-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:40px;opacity:.2;}

/* PROGRESS BARS */
.progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:6px;}
.progress-bar{height:100%;border-radius:3px;transition:width .3s;}
.progress-bar.blue{background:linear-gradient(90deg,var(--blue),var(--blue2));}
.progress-bar.green{background:linear-gradient(90deg,var(--green),var(--green2));}
.progress-bar.gold{background:linear-gradient(90deg,var(--gold),var(--gold2));}
.progress-bar.red{background:linear-gradient(90deg,var(--red),var(--red2));}

/* TABS */
.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tab{padding:8px 16px;font-size:13px;color:var(--text4);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s;}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.tab:hover{color:var(--text2);}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:12px;color:var(--text4);}
.page-btns{display:flex;gap:4px;}
.page-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--text3);transition:background .15s;}
.page-btn:hover,.page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .two-col,.two-col-wide,.three-col,.four-col{grid-template-columns:1fr;}
}