:root{
  --ink:#0b1220; --muted:#7e8aa1; --card:#0b1020; --card-2:#0e1530; --line:#1f2b45;
  --glow-1:#6ee7ff; --glow-2:#a78bfa; --brand:#7c3aed; --brand-2:#22d3ee; --ok:#10b981; --warn:#fbbf24; --bad:#ef4444;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.12), transparent 70%),linear-gradient(180deg,#0a0f1a,#070b14);color:#e5edff;font:15px/1.5 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial}
.hero{position:relative;padding:40px 22px 24px;border-bottom:1px solid var(--line);overflow:hidden}
.hero__glow{position:absolute;inset:-20% -10% auto -10%;height:240px;background:radial-gradient(600px 240px at 10% 10%, rgba(124,58,237,.35), transparent 60%), radial-gradient(500px 220px at 70% -20%, rgba(34,211,238,.25), transparent 65%);filter:blur(30px);pointer-events:none}
h1{margin:0;font-size:28px;letter-spacing:.2px}
.sub{margin:6px 0 16px;color:var(--muted)}
.chip{display:inline-block;margin-left:8px;border:1px solid #3b3b6b;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,rgba(124,58,237,.25),rgba(34,211,238,.25));font-size:12px}
.hero__actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid #2a2f4a;background:linear-gradient(180deg,#121633,#0c122b);color:#e8eeff;border-radius:10px;padding:9px 12px;cursor:pointer;transition:.15s;box-shadow:0 0 0 0 rgba(124,58,237,.4)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(124,58,237,.5)}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:transparent}
.select,.input{background:#0c1028;color:#e5edff;border:1px solid #2a2f4a;border-radius:10px;padding:9px 12px}
.tabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);backdrop-filter:saturate(130%) blur(3px);position:sticky;top:0;z-index:10;background:rgba(8,12,24,.7)}
.tab{padding:8px 12px;border:1px solid #303a62;border-radius:999px;background:linear-gradient(180deg,#101637,#0c122b);color:#c7d2fe;cursor:pointer}
.tab.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:transparent;color:#0a1020}
.wrap{max-width:1200px;margin:0 auto;padding:18px}
.panel{display:none}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:16px 0}
.panel-tools{display:flex;gap:8px;flex-wrap:wrap}
.grid{border:1px solid #2a2f4a;border-radius:14px;background:linear-gradient(180deg,#0b1022,#0a1128);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -30px rgba(124,58,237,.5);overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#0e1530;color:#9fb0ff;border-bottom:1px solid #2a2f4a;font-weight:600;font-size:12px;padding:10px;text-align:left}
tbody td{padding:10px;border-bottom:1px solid #1f2b45;vertical-align:top}
tbody tr:hover{background:linear-gradient(90deg,rgba(124,58,237,.06),rgba(34,211,238,.06))}
.cell{min-width:160px}
.small{min-width:110px}
.actions-col{min-width:92px}
.footer{padding:18px;text-align:center;color:#97a3c5}
.card{border:1px solid #2a2f4a;border-radius:14px;padding:10px;background:linear-gradient(180deg,#0b1022,#0a1128);margin:10px 0}
.row{display:flex;flex-wrap:wrap}
.gap{gap:8px}
.number{width:120px}
dialog::backdrop{background:rgba(0,0,0,.5)}
.modal{min-width:300px;display:grid;gap:10px}
.modal h3{margin:0 0 6px}
.modal label{display:grid;gap:6px;font-size:13px;color:#c7d2fe}
.modal menu{display:flex;gap:8px;justify-content:flex-end;margin:0;padding:0}