:root{ --bg:#111; --panel:#1c1c1c; --text:#eaeaea; --card:#222; }
body.dark{ background:var(--bg); color:var(--text); margin:0; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.topbar{ height:56px; background:#2b2b2b; display:flex; align-items:center; padding:0 16px; font-weight:600; }
.wrapper{ display:flex; height:calc(100vh - 56px); }
.sidebar{ width:260px; background:#151515; border-right:1px solid #242424; }
.brand{ padding:16px; border-bottom:1px solid #242424; color:#cfcfcf; font-size:18px; }
.nav a{ display:block; padding:14px 16px; color:#d8d8d8; text-decoration:none; border-left:4px solid transparent; }
.nav a:hover{ background:#1d1d1d; }
.nav a.active{ background:#232323; border-left-color:#4f83ff; }
.content{ flex:1; padding:18px; overflow:auto; }
.grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
.card{ background:var(--card); border:1px solid #2a2a2a; border-radius:6px; padding:14px; }
.kpi{ font-size:40px; font-weight:800; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px dashed #333; padding:8px; text-align:left; }
.input, select, button{ background:#111; color:#eee; border:1px solid #333; border-radius:4px; padding:6px 8px; }
button{ cursor:pointer; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }