:root{--sp-primary: #7c3aed;--sp-primary-600: #6d28d9;--sp-accent: #f97316;--sp-accent-600: #ea580c;--sp-bg: #f7f8fb;--sp-surface: #ffffff;--sp-surface-2: #f1f5f9;--sp-surface-3: #eaf0f7;--sp-border: #e2e8f0;--sp-border-2: #cbd5e1;--sp-text: #0f172a;--sp-muted: #64748b;--sp-danger: #ef4444}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:1.4;color:var(--sp-text);background:radial-gradient(circle at top right,#ffffff 0%,var(--sp-bg) 45%,#eef3fa 100%)}.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#1f1247,#1d2c51);color:#fff;padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid rgba(255,255,255,.08)}.brand{display:grid;gap:.6rem}.brand-logo{width:124px;height:auto;object-fit:contain}.brand-title{margin:0;font-size:1rem;font-weight:700}.sidebar nav{display:grid;gap:.5rem}.sidebar a,.nav-group-toggle{color:#d8e0ff;text-decoration:none;padding:.5rem .65rem;border-radius:8px}.sidebar a:hover,.nav-group-toggle:hover{background:#ffffff14}.sidebar a.active{background:linear-gradient(90deg,#7c3aed52,#f9731638);color:#fff}.nav-group-toggle.active{background:linear-gradient(90deg,#7c3aed52,#f9731638);color:#fff;border-color:#ffffff59}.nav-group-toggle{border:1px solid rgba(255,255,255,.2);background:transparent;text-align:left;cursor:pointer}.nav-submenu{display:grid;gap:.35rem;margin-left:.55rem;padding-left:.45rem;border-left:2px solid rgba(255,255,255,.2)}.nav-submenu.active{border-left-color:#a78bfacc}.nav-submenu a{font-size:.95rem}.logout-btn{margin-top:auto;background:var(--sp-danger);color:#fff}.content{padding:1.5rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.card{background:var(--sp-surface);padding:1rem;border:1px solid var(--sp-border);border-radius:10px;box-shadow:0 8px 24px #0f172a0a}.metric-grid strong{font-size:1.6rem}.type-chart{margin-top:1rem}.chart-list{display:grid;gap:.65rem}.chart-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr 56px;align-items:center;gap:.6rem}.chart-bar-wrap{width:100%;background:var(--sp-surface-3);border-radius:999px;height:12px;overflow:hidden}.chart-bar{height:100%;background:linear-gradient(90deg,var(--sp-primary),var(--sp-accent));border-radius:999px}.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.stack{max-width:560px;display:grid;gap:.75rem}label{display:grid;gap:.25rem}input,select,button{padding:.55rem .6rem;border-radius:8px;border:1px solid var(--sp-border-2)}button{cursor:pointer;background:var(--sp-primary);color:#fff;border:0}button:hover{background:var(--sp-primary-600)}button:disabled{cursor:not-allowed;background:#9ab3cf}table{width:100%;border-collapse:collapse;background:var(--sp-surface)}th,td{padding:.62rem;border:1px solid var(--sp-border);text-align:left}th{background:var(--sp-surface-2)}.actions,.pagination{display:flex;gap:.5rem;margin:1rem 0;align-items:center}.error{color:#a11414}.muted{color:var(--sp-muted)}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem}.login-card{width:100%;max-width:420px;background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:10px;padding:1.25rem;display:grid;gap:.75rem}@media (max-width: 900px){.layout{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:10}.brand-logo{width:92px}.chart-row{grid-template-columns:1fr;gap:.35rem}}