:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.shell-grid { grid-template-columns: 270px minmax(0, 1fr); }
.card { background: rgba(15, 23, 42, .88); border: 1px solid rgb(30 41 59); border-radius: 1rem; }
.input { width: 100%; background: rgb(2 6 23); border: 1px solid rgb(51 65 85); border-radius: .75rem; padding: .75rem .85rem; font-size: .82rem; color: rgb(248 250 252); outline: none; }
.input:focus { border-color: rgb(59 130 246); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.label { display:block; margin-bottom:.35rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:rgb(148 163 184); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border-radius:.75rem; padding:.72rem 1rem; font-size:.75rem; font-weight:800; transition:.15s ease; }
.btn-primary { background:rgb(37 99 235); color:white; }
.btn-primary:hover { background:rgb(59 130 246); }
.btn-success { background:rgb(5 150 105); color:white; }
.btn-success:hover { background:rgb(16 185 129); }
.btn-danger { background:rgb(185 28 28); color:white; }
.btn-muted { background:rgb(30 41 59); color:rgb(226 232 240); border:1px solid rgb(51 65 85); }
.btn-muted:hover { background:rgb(51 65 85); }
.nav-btn { width:100%; text-align:left; padding:.72rem .8rem; border-radius:.75rem; color:rgb(148 163 184); font-size:.78rem; font-weight:700; }
.nav-btn:hover,.nav-btn.active { background:rgba(37,99,235,.12); color:rgb(96 165 250); border:1px solid rgba(59,130,246,.25); }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.22rem .55rem; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.table-wrap { overflow:auto; border:1px solid rgb(30 41 59); border-radius:.9rem; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th { position:sticky; top:0; z-index:1; background:rgb(15 23 42); color:rgb(148 163 184); font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; text-align:left; padding:.7rem; border-bottom:1px solid rgb(30 41 59); }
td { padding:.7rem; font-size:.74rem; color:rgb(203 213 225); border-bottom:1px solid rgba(30,41,59,.75); vertical-align:top; }
tr:hover td { background:rgba(30,41,59,.28); }
.section { display:none; }
.section.active { display:block; }
.toast { position:fixed; right:1rem; bottom:1rem; z-index:100; max-width:420px; border-radius:.85rem; padding:.9rem 1rem; background:rgb(15 23 42); border:1px solid rgb(51 65 85); box-shadow:0 20px 50px rgba(0,0,0,.45); font-size:.8rem; }
.modal-backdrop { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(2,6,23,.82); backdrop-filter:blur(8px); }
.metric { background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(2,6,23,.92)); border:1px solid rgb(30 41 59); border-radius:1rem; padding:1rem; }
@media (max-width: 900px) {
  .shell-grid { grid-template-columns:1fr; }
  #sidebar { position:fixed; inset:0 auto 0 0; z-index:60; width:280px; transform:translateX(-105%); transition:.2s ease; }
  #sidebar.open { transform:translateX(0); }
}