:root{--accent:#4F46E5;--accent-h:#4338CA;--a-light:#EEF2FF;--a-dim:#818CF8;--green:#10B981;--ease:cubic-bezier(.4,0,.2,1);}
[data-theme="light"]{--bg:#F9FAFB;--bg-2:#F3F4F6;--bg-3:#E5E7EB;--surface:#FFFFFF;--ink:#111827;--ink-2:#374151;--muted:#6B7280;--border:#E5E7EB;--shadow:0 4px 24px rgba(0,0,0,.07);--shadow-lg:0 16px 56px rgba(0,0,0,.13);}
[data-theme="dark"]{--bg:#09090B;--bg-2:#18181B;--bg-3:#27272A;--surface:#18181B;--ink:#FAFAFA;--ink-2:#A1A1AA;--muted:#71717A;--border:#27272A;--shadow:0 4px 24px rgba(0,0,0,.3);--shadow-lg:0 16px 56px rgba(0,0,0,.55);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:'Inter', sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.container{padding:0 20px;}}

/* TOPBAR */
.tb{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--ink);padding:10px 0;}
[data-theme="dark"] .tb{background:var(--bg-2);border-bottom:1px solid var(--border);}
.tb-i{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-mark{width:26px;height:26px;border-radius:5px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
.tb-name{font-family:'Outfit', sans-serif;font-size:15px;color:#fff;}
[data-theme="dark"] .tb-name{color:var(--ink);}
.tb-name span{opacity:.5;}
.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.2);}
[data-theme="dark"] .tb-sep{background:var(--border);}
.tb-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);}
[data-theme="dark"] .tb-label{color:var(--muted);}
.tb-badge{padding:3px 10px;background:rgba(16,185,129,.2);border-radius:100px;font-size:10px;font-weight:700;color:#34D399;letter-spacing:.08em;text-transform:uppercase;}
.tb-back{display:flex;align-items:center;gap:6px;padding:7px 13px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border-radius:6px;font-size:12px;font-weight:600;transition:background .2s;}
[data-theme="dark"] .tb-back{background:var(--bg-3);color:var(--muted);}
.tb-back:hover{background:rgba(255,255,255,.2);color:#fff;}
.tb-back svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
/* APP SHELL */
.app{margin-top:50px;height:calc(100vh - 50px);display:grid;grid-template-columns:220px 1fr;background:var(--bg-2);}
@media(max-width:768px){.app{grid-template-columns:1fr;}}
/* SIDEBAR */
.app-sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;}
@media(max-width:768px){.app-sidebar{display:none;}}
.as-header{padding:16px 20px;border-bottom:1px solid var(--border);}
.as-app-name{font-family:'Outfit', sans-serif;font-size:16px;letter-spacing:-.3px;color:var(--ink);margin-bottom:2px;}
.as-app-sub{font-size:11px;color:var(--muted);}
.as-nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;}
.as-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;}
.as-item:hover{background:var(--bg-2);color:var(--ink);}
.as-item.active{background:var(--a-light);color:var(--accent);font-weight:600;}
[data-theme="dark"] .as-item.active{background:rgba(79, 70, 229,.15);}
.as-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.as-divider{height:1px;background:var(--border);margin:8px 10px;}
.as-footer{padding:14px 20px;border-top:1px solid var(--border);margin-top:auto;}
.as-user{display:flex;align-items:center;gap:10px;}
.as-av{width:34px;height:34px;border-radius:50%;background:var(--a-light);display:flex;align-items:center;justify-content:center;font-family:'Outfit', sans-serif;font-size:14px;color:var(--accent);flex-shrink:0;}
[data-theme="dark"] .as-av{background:rgba(79, 70, 229,.2);}
.as-uname{font-size:13px;font-weight:600;color:var(--ink);}
.as-urole{font-size:11px;color:var(--muted);}
/* MAIN */
.app-main{overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px;}
@media(max-width:600px){.app-main{padding:16px;gap:14px;}}
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.at-title{font-family:'Outfit', sans-serif;font-size:22px;letter-spacing:-.5px;color:var(--ink);}
.at-date{font-size:12px;color:var(--muted);}
.at-btn{padding:8px 16px;background:var(--accent);color:#fff;border-radius:6px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;}
.at-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:960px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr;}}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px;}
.sc-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.sc-val{font-family:'Outfit', sans-serif;font-size:26px;letter-spacing:-1px;color:var(--ink);margin-bottom:5px;}
.sc-delta{font-size:11px;display:flex;align-items:center;gap:4px;}
.sc-delta.up{color:#10B981;}
.sc-delta.down{color:#EF4444;}
/* CHART AREA */
.chart-row{display:grid;grid-template-columns:2fr 1fr;gap:10px;}
@media(max-width:960px){.chart-row{grid-template-columns:1fr;}}
.chart-card,.table-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;}
.cc-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.cc-sub{font-size:11px;color:var(--muted);margin-bottom:16px;}
/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;}
.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;}
.bar{background:var(--accent);border-radius:3px 3px 0 0;width:100%;opacity:.8;transition:opacity .15s;cursor:pointer;}
.bar:hover{opacity:1;}
.bar-lbl{font-size:10px;color:var(--muted);}
/* PIE placeholder */
.pie-placeholder{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.pie-item{display:flex;align-items:center;gap:10px;}
.pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.pie-label{font-size:12px;color:var(--ink-2);flex:1;}
.pie-val{font-size:12px;font-weight:600;color:var(--ink);}
/* TABLE */
.tbl-head{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:8px 12px;background:var(--bg-2);border-radius:6px;margin-bottom:6px;}
.th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.tbl-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer;}
.tbl-row:last-child{border-bottom:none;}
.tbl-row:hover{background:var(--bg-2);}
.td{font-size:12px;color:var(--ink-2);}
.td.name{color:var(--ink);font-weight:500;}
.badge-pill{padding:2px 9px;border-radius:100px;font-size:10px;font-weight:600;}
.badge-pill.ok{background:rgba(16,185,129,.1);color:#10B981;}
.badge-pill.warn{background:rgba(245,158,11,.1);color:#F59E0B;}
.badge-pill.danger{background:rgba(239,68,68,.1);color:#EF4444;}
/* --- GLOBAL DEMO UX OVERHAUL --- */
.tb {
  position: fixed !important;
  top: 16px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important; max-width: 1000px !important;
  background: rgba(17,24,39,0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3) !important;
  z-index: 9999 !important;
  transition: all 0.3s ease !important;
}
[data-theme="dark"] .tb {
  background: rgba(24,24,27,0.85) !important;
  border-color: rgba(255,255,255,0.05) !important;
}
.tb-left { gap: 16px !important; }
.tb-label { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }
.tb-badge { background: #10B981 !important; color: #fff !important; padding: 6px 14px !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; }
.tb-back {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: #fff !important;
  transition: all 0.2s !important;
}
.tb-back:hover { background: #fff !important; color: #000 !important; transform: scale(1.05) !important; }
.main-wrap, .vp-wrap { margin-top: 80px !important; height: calc(100vh - 80px) !important; }
@media(max-width: 600px) {
  .tb { top: 12px !important; padding: 10px 16px !important; border-radius: 24px !important; width: calc(100% - 24px) !important; }
  .tb-label { display: none !important; }
}

/* WEBAPP UX OVERHAUL */
.wa-sidebar { background: var(--surface) !important; border-right: 1px solid var(--border) !important; padding: 24px !important; }
.was-logo { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -1px !important; margin-bottom: 32px !important; }
.wa-nav-item { border-radius: 12px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.2s !important; margin-bottom: 4px !important; }
.wa-nav-item.active { background: var(--ink) !important; color: var(--bg) !important; }
[data-theme="dark"] .wa-nav-item.active { background: var(--accent) !important; color: #fff !important; }
.wa-header { padding: 24px 40px !important; background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.wah-title { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }
.wa-content { padding: 40px !important; background: var(--bg) !important; }
.stat-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 24px !important; padding: 24px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.02) !important; transition: transform 0.3s !important; }
.stat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.06) !important; border-color: var(--accent) !important; }
.sc-val { font-size: 36px !important; font-weight: 800 !important; letter-spacing: -1px !important; }
.chart-box { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 24px !important; padding: 32px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.02) !important; margin-top: 32px !important; }
.wa-table { border-radius: 24px !important; overflow: hidden !important; border: 1px solid var(--border) !important; }
.wa-table th { background: var(--bg-2) !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 16px 24px !important; }
.wa-table td { padding: 16px 24px !important; font-size: 14px !important; font-weight: 500 !important; border-bottom: 1px solid var(--border) !important; }