*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0b0d12;--surface:#11141b;--surface2:#171b24;--border:rgba(255,255,255,.08);--text:#f5f7fb;--muted:#8d95a7;--accent:#7c5cff;--accent2:#9c88ff;--shadow:0 20px 60px rgba(0,0,0,.28)}
body.light{--bg:#f4f6fa;--surface:#fff;--surface2:#f0f2f7;--border:rgba(20,25,35,.09);--text:#171a22;--muted:#6f7788;--shadow:0 20px 50px rgba(26,36,61,.1)}
html,body{min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,a,input,select{font:inherit}
button{cursor:pointer;border:0}
.app{min-height:100vh;display:flex}
.sidebar{width:250px;flex:0 0 250px;border-right:1px solid var(--border);background:var(--surface);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:4px 9px 30px}
.brand-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#4e36c7);font-weight:800;box-shadow:0 10px 25px rgba(124,92,255,.25)}
.brand strong{display:block;font-size:14px;letter-spacing:.16em}
.brand span,.user-card span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.navigation{display:grid;gap:7px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;color:var(--muted);text-decoration:none;transition:.2s ease}
.nav-item span{width:20px;text-align:center;font-size:18px}
.nav-item:hover,.nav-item.active{background:var(--surface2);color:var(--text)}
.nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}
.sidebar-bottom{margin-top:auto}
.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--border);padding-top:17px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-weight:700}
.main{flex:1;min-width:0}
.topbar{height:80px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);z-index:10}
.menu-btn{display:none}
.page-title span,.eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.page-title h1{font-size:20px;margin-top:3px}
.top-actions{margin-left:auto;display:flex;gap:10px}
.icon-btn,.close-btn{width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--border);color:var(--text);transition:.2s}
.icon-btn:hover,.close-btn:hover{transform:translateY(-1px);background:var(--surface2)}
.primary-btn,.secondary-btn,.hero-btn{border-radius:11px;padding:10px 15px;transition:.2s}
.primary-btn,.hero-btn{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(124,92,255,.22)}
.primary-btn:hover,.hero-btn:hover{background:var(--accent2);transform:translateY(-1px)}
.secondary-btn{background:var(--surface2);color:var(--text)}
.content{padding:28px;max-width:1450px;margin:auto}
.hero{padding:30px;border:1px solid var(--border);border-radius:22px;background:radial-gradient(circle at 85% 15%,rgba(124,92,255,.16),transparent 38%),var(--surface);display:flex;align-items:end;justify-content:space-between;gap:20px;box-shadow:var(--shadow)}
.hero h2{font-size:clamp(30px,4vw,52px);line-height:1.05;margin:10px 0}
.hero h2 em{font-style:normal;color:var(--accent)}
.hero p{max-width:680px;color:var(--muted);line-height:1.6}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:18px}
.stat-card,.panel,.quick{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.stat-card{padding:20px}
.stat-card span,.stat-card small{color:var(--muted)}
.stat-card strong{display:block;font-size:29px;margin:8px 0}
.stat-card small{font-size:12px}.positive{color:#54d49a!important}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-top:15px}
.panel{padding:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel h3,.quick h3{font-size:18px;margin-top:4px}
select{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:8px 10px;outline:none}
.chart{height:250px;margin-top:18px;position:relative;overflow:hidden;border-radius:13px;background:linear-gradient(to bottom,transparent,rgba(124,92,255,.03))}
.chart-grid{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 49px,rgba(255,255,255,.055) 50px)}
.line{position:absolute;left:0;right:0;top:25%;height:50%;background:linear-gradient(180deg,rgba(124,92,255,.26),transparent);clip-path:polygon(0 72%,6% 62%,12% 66%,18% 49%,24% 58%,30% 42%,36% 46%,42% 28%,48% 35%,54% 18%,60% 30%,66% 17%,72% 22%,78% 8%,84% 18%,90% 4%,96% 12%,100% 0,100% 100%,0 100%);border-top:3px solid var(--accent)}
.activity{display:grid;gap:17px;margin-top:20px}.activity-item{display:flex;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:1px solid var(--border)}.activity-item:last-child{border-bottom:0;padding-bottom:0}.activity-item b{font-size:13px}.activity-item span{font-size:12px;color:var(--muted);white-space:nowrap}
.quick{margin-top:15px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.quick-actions{display:flex;flex-wrap:wrap;gap:9px}.quick-actions button{padding:11px 13px;border-radius:10px;background:var(--surface2);color:var(--text);border:1px solid var(--border);transition:.2s}.quick-actions button:hover{transform:translateY(-1px);border-color:rgba(124,92,255,.4)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:none;place-items:center;padding:18px;z-index:50}.modal-backdrop.show{display:grid}.modal{width:min(470px,100%);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:0 30px 100px rgba(0,0,0,.4);animation:pop .2s ease}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal h3{font-size:23px;margin-top:4px}.modal input{width:100%;padding:13px 14px;border-radius:11px;background:var(--surface2);border:1px solid var(--border);color:var(--text);outline:none}.modal input:focus{border-color:var(--accent)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.toast{position:fixed;right:20px;bottom:20px;padding:12px 15px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;z-index:60}.toast.show{transform:translateY(0);opacity:1}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(max-width:900px){.sidebar{position:fixed;left:-260px;z-index:40;transition:.25s;box-shadow:var(--shadow)}.sidebar.open{left:0}.menu-btn{display:block}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.quick{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.topbar{padding:0 15px;height:70px}.content{padding:15px}.hero{padding:22px;align-items:flex-start;flex-direction:column}.hero-btn{width:100%}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:23px}.quick{padding:16px}.quick-actions button{width:100%}.quick-actions{width:100%}.top-actions .primary-btn{padding:9px 12px}}