:root{--brand:#4f46e5;--ink:#1f2937;--muted:#6b7280;--bg:#f3f4f6;--sbw:248px}
*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.muted{color:var(--muted)}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-weight:700}
/* Auth */
.auth-body{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.auth-wrap{width:100%;max-width:400px;margin:auto;padding:20px}
.auth-card{background:#fff;border-radius:18px;padding:28px}
/* Layout: FIXED sidebar, only content scrolls */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sbw);background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;
  position:fixed;left:0;top:0;height:100vh;overflow-y:auto;z-index:1030}
.sidebar-dark{background:#111827;color:#cbd5e1;border-color:#1f2937}
.sidebar-brand{padding:18px 16px;font-weight:700;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:inherit;z-index:1}
.sidebar-dark .sidebar-brand{border-color:#1f2937;color:#fff}
.sidebar-nav{padding:10px;display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;font-size:.9rem;display:flex;align-items:center;gap:10px}
.sidebar-nav a:hover{background:rgba(79,70,229,.08)}
.sidebar-dark .sidebar-nav a:hover{background:rgba(255,255,255,.06)}
.sidebar-nav a.active{background:var(--brand);color:#fff}
.sidebar-nav a.disabled{opacity:.45;pointer-events:none}
/* content sits to the right of the fixed sidebar */
.content{flex:1;min-width:0;margin-left:var(--sbw);display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1020}
.page{padding:22px}
/* Cards */
.card-soft{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;margin-bottom:16px}
.kpi{border-radius:16px;padding:18px;color:#fff;position:relative;overflow:hidden}
.kpi i{font-size:1.4rem;opacity:.85}
.kpi-val{font-size:1.5rem;font-weight:700;margin-top:6px}
.kpi-lbl{font-size:.8rem;opacity:.9}
.grad-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.grad-green{background:linear-gradient(135deg,#10b981,#059669)}
.grad-orange{background:linear-gradient(135deg,#f59e0b,#d97706)}
.grad-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.grad-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
/* Mobile: off-canvas sidebar, content full width */
@media(max-width:768px){
  .sidebar{left:-260px;transition:left .2s;box-shadow:0 0 30px rgba(0,0,0,.2)}
  .sidebar.open{left:0}
  .content{margin-left:0}
}

/* ===== VIP Dashboard ===== */
.vip-hero{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;color:#fff;
  background:linear-gradient(120deg,#4f46e5 0%,#7c3aed 45%,#9333ea 100%);
  box-shadow:0 18px 40px -12px rgba(79,70,229,.55)}
.vip-hero-glow{position:absolute;inset:0;background:
  radial-gradient(600px circle at 90% -20%,rgba(255,255,255,.25),transparent 60%),
  radial-gradient(400px circle at 10% 120%,rgba(255,255,255,.18),transparent 60%);z-index:1}
.vip-badge{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.06em}
.vip-today-label{font-size:.75rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.vip-today-amount{font-size:1.9rem;font-weight:800;line-height:1.1}
@media(max-width:576px){.vip-today-amount{font-size:1.4rem}.vip-hero{padding:20px}}

.glass-kpi{position:relative;border-radius:18px;padding:18px;color:#fff;overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.5);min-height:128px}
.glass-kpi::after{content:"";position:absolute;inset:0;
  background:radial-gradient(220px circle at 110% -30%,rgba(255,255,255,.28),transparent 60%)}
.glass-kpi .gk-icon{position:absolute;top:14px;right:16px;font-size:1.5rem;opacity:.85;z-index:2}
.glass-kpi .gk-label{font-size:.78rem;opacity:.9;z-index:2;position:relative}
.glass-kpi .gk-val{font-size:1.55rem;font-weight:800;margin:4px 0;z-index:2;position:relative}
.glass-kpi .gk-sub{font-size:.72rem;opacity:.92;z-index:2;position:relative}
.glass-kpi .gk-sub a{color:#fff}
.g-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.g-green{background:linear-gradient(135deg,#10b981,#047857)}
.g-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.g-orange{background:linear-gradient(135deg,#f59e0b,#c2410c)}