:root{
--bg:#0a0d14;--bg2:#0f131d;--panel:#111722;--panel2:#151b27;--border:#232b3a;--text:#f5f7fb;--muted:#8d97aa;--muted2:#687386;
--accent:#8b5cf6;--accent2:#a78bfa;--blue:#3b82f6;--cyan:#06b6d4;--orange:#f59e0b;--green:#22c55e;--danger:#ef4444;
--shadow:0 14px 40px rgba(0,0,0,.25);--radius:16px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.app-shell{min-height:100vh;display:flex;background:radial-gradient(circle at 75% -10%,rgba(124,58,237,.10),transparent 28%),var(--bg)}
.sidebar{width:252px;flex:0 0 252px;border-right:1px solid var(--border);background:rgba(13,17,25,.96);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:50}
.brand{height:74px;padding:0 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.04)}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#8b5cf6,#5b21b6);box-shadow:0 8px 25px rgba(139,92,246,.28)}
.brand-copy{display:flex;flex-direction:column}.brand-copy strong{font-size:16px}.brand-copy span{font-size:10px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.icon-btn{width:36px;height:36px;border:1px solid var(--border);background:#10151f;color:var(--muted);border-radius:10px;display:grid;place-items:center;transition:.2s}
.icon-btn:hover{color:var(--text);border-color:#384256;background:#171e2b}.sidebar-close{display:none;margin-left:auto}
.menu-scroll{padding:16px 12px;overflow:auto;flex:1}.menu-label{font-size:10px;color:#5f6b7e;letter-spacing:.12em;text-transform:uppercase;padding:13px 11px 7px}
.nav-item{min-height:43px;padding:0 12px;margin:2px 0;border-radius:10px;color:#aab3c2;display:flex;align-items:center;gap:11px;font-size:13px;position:relative;transition:.18s}
.nav-item:hover{background:#171e2a;color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(139,92,246,.06));color:#fff}.nav-item.active:before{content:"";position:absolute;left:-12px;width:3px;height:23px;background:var(--accent);border-radius:0 5px 5px 0}.nav-icon{width:20px;text-align:center;color:#8792a5;font-size:15px}.nav-item.active .nav-icon{color:var(--accent2)}.nav-item.disabled{opacity:.7;cursor:default}.nav-item em{margin-left:auto;font-size:9px;color:#5d687a;font-style:normal}
.sidebar-foot{margin:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#10151f;display:flex;align-items:center;gap:9px}.sidebar-foot strong,.sidebar-foot span{display:block}.sidebar-foot strong{font-size:12px}.sidebar-foot span{font-size:10px;color:var(--muted2);margin-top:3px}.server-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(34,197,94,.7)}
.main-area{min-width:0;flex:1}.topbar{height:74px;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);background:rgba(10,13,20,.88);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.top-left,.top-actions{display:flex;align-items:center;gap:12px}.menu-toggle{display:none}.crumbs{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}.crumbs b{color:#414b5d}.crumbs strong{color:#e8ebf2;font-weight:600}
.search-pill{height:38px;min-width:245px;padding:0 10px;border:1px solid var(--border);background:#0f141d;color:var(--muted);border-radius:10px;display:flex;align-items:center;gap:8px;text-align:left}.search-pill kbd{margin-left:auto;padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:9px;color:#697487;background:#0b0f16}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2d3650,#151b28);border:1px solid #3a4558;color:#fff;font-size:12px;font-weight:700}.avatar.sm{width:28px;height:28px;display:inline-grid;margin-right:8px;vertical-align:middle;font-size:10px}
.content{padding:28px;max-width:1800px;margin:0 auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent2);font-weight:700;margin-bottom:5px}.page-head h1{font-size:27px;margin:0;letter-spacing:-.03em}.page-head p{margin:7px 0 0;color:var(--muted);font-size:13px}.page-head-actions{display:flex;gap:9px;align-items:center}.demo-badge{font-size:11px;color:#b8a4ff;background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.22);padding:8px 10px;border-radius:9px}
.btn{height:38px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:#151b25;color:#c7ced9}.btn:hover{background:#1a2230;color:#fff}.btn.primary{border-color:transparent;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;box-shadow:0 7px 20px rgba(109,40,217,.24)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.stat-grid.three{grid-template-columns:repeat(3,1fr)}.stat-card{min-height:126px;padding:19px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,rgba(21,27,39,.98),rgba(15,20,29,.98));box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}.stat-card.mini{min-height:102px}.stat-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-weight:800;flex:0 0 43px}.stat-icon.purple{background:rgba(139,92,246,.14);color:#a78bfa}.stat-icon.blue{background:rgba(59,130,246,.13);color:#60a5fa}.stat-icon.cyan{background:rgba(6,182,212,.12);color:#22d3ee}.stat-icon.orange{background:rgba(245,158,11,.12);color:#fbbf24}.stat-label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.stat-card strong{display:block;font-size:22px;letter-spacing:-.02em}.up{display:block;color:#4ade80;font-size:11px;font-style:normal;margin-top:7px}.up i{color:var(--muted2);font-style:normal;margin-left:3px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.metric-panel{border:1px solid var(--border);border-radius:14px;background:#101620;padding:15px 17px}.metric-head,.metric-foot{display:flex;justify-content:space-between;align-items:center}.metric-head span,.metric-foot span{color:var(--muted);font-size:11px}.metric-head b{font-size:15px}.metric-foot{margin-top:9px}.metric-foot em{font-style:normal;color:#aeb7c7;font-size:10px}.progress{height:5px;background:#202735;border-radius:99px;margin-top:14px;overflow:hidden}.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.blue-progress span{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.cyan-progress span{background:linear-gradient(90deg,#0891b2,#22d3ee)}.orange-progress span{background:linear-gradient(90deg,#d97706,#fbbf24)}
.dashboard-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:14px;margin-bottom:14px}.dashboard-grid>.wide{min-width:0}.panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,rgba(17,23,34,.98),rgba(13,18,27,.98));box-shadow:var(--shadow);padding:19px;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.panel-head h2{font-size:15px;margin:0 0 5px}.panel-head span{font-size:11px;color:var(--muted2)}.panel-head select,.filter-group select,.filter-group input{height:34px;background:#0e141e;color:#aeb7c7;border:1px solid var(--border);border-radius:8px;padding:0 10px;outline:none}.more{border:0;background:none;color:var(--muted);font-weight:800}
.line-chart{height:280px;position:relative;padding-left:38px}.line-chart svg{width:100%;height:245px;overflow:visible}.grid-lines line{stroke:#202735;stroke-width:1}.chart-area{fill:url(#areaFill)}.chart-line{fill:none;stroke:#9b7cff;stroke-width:3;stroke-linecap:round}.chart-point{fill:#c4b5fd;stroke:#6d28d9;stroke-width:4}.y-labels{position:absolute;left:0;top:10px;height:236px;display:flex;flex-direction:column;justify-content:space-between;color:#5f6b7d;font-size:9px}.x-labels{display:flex;justify-content:space-between;color:#5f6b7d;font-size:9px;margin-left:0}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:28px;min-height:245px}.donut{width:165px;height:165px;border-radius:50%;background:conic-gradient(#8b5cf6 0 30.4%,#3b82f6 30.4% 82.1%,#06b6d4 82.1% 100%);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;inset:17px;border-radius:50%;background:#111722}.donut div{position:relative;z-index:1;text-align:center}.donut strong{display:block;font-size:22px}.donut span{font-size:10px;color:var(--muted)}.legend{min-width:145px}.legend>div{display:flex;align-items:center;gap:8px;margin:13px 0;font-size:11px}.legend .dot{width:8px;height:8px;border-radius:50%}.dot.purple{background:#8b5cf6}.dot.blue{background:#3b82f6}.dot.cyan{background:#06b6d4}.legend b{margin-left:auto;color:#d8ddea;font-size:10px}
.rank-list{display:flex;flex-direction:column}.rank-row{display:grid;grid-template-columns:31px 1fr auto auto;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.045)}.rank-row:last-child{border-bottom:0}.rank-row>div{min-width:0}.rank-row strong,.rank-row span{display:block}.rank-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-row span{font-size:10px;color:var(--muted2);margin-top:3px}.rank-row em,.rank-row i{font-style:normal;font-size:11px}.rank-row em{color:#aeb7c7}.rank-row i{color:#d5d9e4}.rank{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;color:#788397;background:#1a2130;font-size:10px}.rank.n1{background:rgba(245,158,11,.14);color:#fbbf24}.rank.n2{background:rgba(148,163,184,.12);color:#cbd5e1}.rank.n3{background:rgba(180,83,9,.13);color:#fdba74}.text-link{font-size:11px!important;color:#a78bfa!important}
.table{width:100%}.tr{display:grid;grid-template-columns:1.3fr .8fr .6fr;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid rgba(255,255,255,.045);font-size:11px;color:#cbd2de}.tr:last-child{border-bottom:0}.tr.th{min-height:31px;color:#697487;font-size:9px;text-transform:uppercase}.tr span:nth-child(n+2){text-align:right}.tr .avatar{margin-right:7px}
.segmented{display:flex;background:#0e141d;border:1px solid var(--border);padding:3px;border-radius:9px;gap:2px}.segmented button{border:0;background:transparent;color:#7d8799;border-radius:7px;height:31px;padding:0 11px;font-size:11px}.segmented button.selected{background:#222a39;color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.region-grid{grid-template-columns:1.35fr .65fr}.map-panel{min-height:550px}.status-pill{padding:5px 8px;border-radius:7px;color:#4ade80;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.16)}.map-placeholder{min-height:430px;border:1px dashed #2b3546;border-radius:13px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(139,92,246,.10),transparent 38%),#0d131c}.map-shape{width:65%;height:78%;position:relative;clip-path:polygon(42% 0,58% 5%,67% 17%,81% 20%,91% 34%,85% 48%,92% 61%,77% 70%,72% 86%,56% 81%,49% 96%,39% 83%,24% 88%,18% 71%,5% 62%,14% 49%,8% 34%,23% 24%,28% 10%);background:linear-gradient(145deg,#2b3150,#1b2234);border:1px solid #454e6c;filter:drop-shadow(0 18px 30px rgba(0,0,0,.3))}.map-dot{position:absolute;padding:6px 8px;border-radius:8px;background:rgba(139,92,246,.8);font-size:9px;color:#fff;box-shadow:0 0 18px rgba(139,92,246,.35)}.d1{left:38%;top:43%}.d2{left:51%;top:51%}.d3{left:57%;top:58%}.d4{left:32%;top:60%}.d5{left:66%;top:36%}.d6{left:43%;top:69%}.map-note{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#586477;font-size:10px}
.filters-panel{margin-bottom:14px}.filter-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:7px}.filter-group label{font-size:10px;color:#687386}.filter-group select{min-width:125px}.search-field{flex:1;min-width:210px}.search-field input{width:100%}.filter-btn{height:34px}
.table-panel{overflow:hidden}.table-tools{display:flex;gap:6px}.data-table{min-width:920px}.data-row{display:grid;grid-template-columns:1.45fr .65fr .8fr .85fr .85fr .65fr .55fr .65fr .55fr;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid rgba(255,255,255,.045);font-size:11px;color:#c4ccd8}.data-row.header{min-height:36px;color:#697487;font-size:9px;text-transform:uppercase;background:#0e141d;border-radius:8px}.data-row>span:not(:first-child){text-align:right}.user-cell{display:flex!important;align-items:center;gap:9px;text-align:left!important}.user-cell small,.user-cell strong{display:block}.user-cell strong{font-size:11px}.user-cell small{font-size:9px;color:#667286;margin-top:3px}.tag{padding:4px 7px;border-radius:6px;color:#bdaaff;background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.13);font-size:9px}.status-dot{color:#4ade80}.status-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:5px}.status-dot.danger{color:#f87171}.status-dot.danger:before{background:#ef4444}.more-btn{border:1px solid var(--border);background:#151b25;color:#aab3c2;border-radius:7px;padding:5px 8px;font-size:9px}.pager{display:flex;justify-content:space-between;align-items:center;color:#667286;font-size:10px;padding:14px 3px}.pager>div{display:flex;gap:4px}.pager button{width:29px;height:29px;border:1px solid var(--border);background:#111722;color:#7f8a9d;border-radius:7px;font-size:10px}.pager button.selected{background:#7c3aed;color:#fff;border-color:#7c3aed}
.theme-drawer{position:fixed;top:0;right:-370px;width:350px;height:100vh;background:#111722;border-left:1px solid var(--border);z-index:100;box-shadow:-20px 0 60px rgba(0,0,0,.35);transition:.25s}.theme-drawer.open{right:0}.drawer-head{height:74px;border-bottom:1px solid var(--border);padding:0 18px;display:flex;align-items:center;justify-content:space-between}.drawer-head strong,.drawer-head span{display:block}.drawer-head span{font-size:10px;color:var(--muted2);margin-top:4px}.drawer-body{padding:20px}.setting-title{font-size:10px;color:#667286;text-transform:uppercase;letter-spacing:.12em;margin:5px 0 11px}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-option,.layout-option{border:1px solid var(--border);background:#0e141d;color:#9aa4b5;border-radius:10px;padding:10px;font-size:11px;text-align:left}.theme-option.selected,.layout-option.selected{border-color:rgba(139,92,246,.55);color:#fff}.theme-preview{height:48px;border-radius:7px;display:block;margin-bottom:7px}.theme-preview.dark{background:linear-gradient(135deg,#0b0f16,#272f43)}.theme-preview.light{background:linear-gradient(135deg,#f4f5f7,#cfd5de)}.layout-options{display:grid;gap:8px}.accent-options{display:flex;gap:11px}.accent-dot{width:28px;height:28px;border-radius:50%;border:3px solid #1b2230}.accent-dot.violet{background:#8b5cf6}.accent-dot.blue{background:#3b82f6}.accent-dot.cyan{background:#06b6d4}.accent-dot.green{background:#22c55e}.accent-dot.orange{background:#f59e0b}
.mobile-mask{display:none}.login-page{min-height:100vh;display:grid;place-items:center;background:#080b11;overflow:hidden}.login-bg{position:fixed;inset:0;background:radial-gradient(circle at 25% 25%,rgba(124,58,237,.17),transparent 30%),radial-gradient(circle at 80% 70%,rgba(6,182,212,.08),transparent 28%)}.login-card{width:min(430px,calc(100% - 32px));position:relative;padding:35px;border:1px solid var(--border);border-radius:20px;background:rgba(16,21,31,.92);box-shadow:0 30px 90px rgba(0,0,0,.45)}.login-brand{display:flex;gap:12px;align-items:center}.login-brand strong,.login-brand span{display:block}.login-brand span{font-size:10px;color:var(--muted2);margin-top:3px}.login-title{font-size:27px;font-weight:700;margin-top:38px}.login-sub{font-size:12px;color:var(--muted);margin:7px 0 25px}.login-card label{display:block;font-size:11px;color:#8d97aa;margin:15px 0 7px}.input-wrap{height:46px;display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:#0c1119;border-radius:9px;padding:0 12px}.input-wrap span{color:#687386;font-size:12px}.input-wrap input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:12px}.login-btn{width:100%;height:46px;border:0;border-radius:9px;margin-top:21px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-weight:700;box-shadow:0 10px 25px rgba(109,40,217,.25)}.login-error{padding:10px;border-radius:8px;color:#fca5a5;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.18);font-size:11px}.login-foot{text-align:center;color:#505b6e;font-size:9px;margin-top:23px}
@media(max-width:1200px){.stat-grid,.mini-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.region-grid{grid-template-columns:1fr}.donut-wrap{justify-content:flex-start}}
@media(max-width:850px){.sidebar{position:fixed;left:-260px;transition:.25s}.sidebar.open{left:0}.sidebar-close,.menu-toggle{display:grid}.menu-toggle{margin-right:2px}.mobile-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}.mobile-mask.open{display:block}.topbar{padding:0 15px}.search-pill{min-width:0;width:38px;padding:0;justify-content:center}.search-pill span:nth-child(2),.search-pill kbd{display:none}.content{padding:18px}.page-head{align-items:flex-start;flex-direction:column}.page-head-actions{width:100%;justify-content:flex-end}}
@media(max-width:600px){.stat-grid,.mini-grid,.stat-grid.three{grid-template-columns:1fr}.top-actions .icon-btn{display:none}.top-actions .avatar{display:grid}.crumbs span,.crumbs b{display:none}.panel{padding:15px}.donut-wrap{flex-direction:column}.map-panel{min-height:420px}.map-placeholder{min-height:330px}.theme-drawer{width:100%;right:-100%}}
body.light{--bg:#f3f5f9;--bg2:#fff;--panel:#fff;--panel2:#f8fafc;--border:#e4e8ef;--text:#172033;--muted:#687386;--muted2:#8a94a6;--shadow:0 10px 30px rgba(15,23,42,.08)}body.light .app-shell,body.light .sidebar,body.light .topbar{background:#f5f7fb}body.light .sidebar{background:#fff}body.light .panel,body.light .stat-card,body.light .metric-panel,body.light .theme-drawer{background:#fff}body.light .nav-item{color:#687386}body.light .nav-item:hover{background:#f0f2f6;color:#172033}body.light .topbar{background:rgba(245,247,251,.88)}body.light .search-pill,body.light .icon-btn,body.light .segmented,body.light .segmented button,.light .btn{background:#fff;color:#687386}