:root{--bg:#0b0f14;--panel:#0f151c;--card:#121b24;--text:#e6f1ff;--muted:#8ea4b5;--brand:#7ee787;--brand2:#58a6ff;--danger:#ff6b88;--shadow:0 10px 30px rgba(0,0,0,.35);--radius:18px}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 ui-sans-serif,system-ui;background:var(--bg);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-4{grid-column:span 4}.col-6{grid-column:span 6}
@media(max-width:900px){.col-8,.col-6,.col-4{grid-column:span 12}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.btn{border:none;border-radius:12px;padding:10px 14px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#012;font-weight:800;cursor:pointer}
.btn.ghost{background:var(--panel);color:var(--text)}
.badge{padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#012;font-weight:800}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
small,.muted{color:var(--muted);font-size:13px}
canvas{width:100%;height:200px;border-radius:12px;background:#0a0f15}
.kpi{display:flex;justify-content:space-between;align-items:center}
.kpi .value{font-size:22px;font-weight:800}
hr.sep{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);margin:8px 0 12px}
input[type="number"],input[type="text"],input[type="range"]{padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:var(--panel);color:var(--text)}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px dashed rgba(255,255,255,.08);padding:8px;text-align:left}.table th{color:var(--muted)}
footer{margin:30px 0 40px;color:var(--muted)}
.alert{padding:8px 10px;border-radius:10px;background:rgba(255,107,136,.1);border:1px solid rgba(255,107,136,.3)}