:root { color-scheme: dark; --bg:#0f1623; --card:#151e2b; --txt:#dbe7ff; --muted:#95a3bd; --accent:#62a8ff; --ok:#44d16f; --warn:#ffb14a; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 system-ui,Segoe UI,Roboto}
.topbar{display:flex;align-items:center;gap:20px;padding:12px 18px;background:#0b1220;border-bottom:1px solid #1f2a3f}
.brand{font-weight:700}
.tabs button{margin-right:8px;background:#111a2a;border:1px solid #21314a;color:var(--txt);padding:8px 12px;border-radius:8px;cursor:pointer}
.tabs button.active{border-color:var(--accent);color:var(--accent)}
main{padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #21314a;border-radius:12px;padding:16px}
.card h3{margin:0 0 8px}
label{display:block;margin:8px 0}
input{width:100%;padding:8px 10px;border-radius:8px;background:#0e1726;border:1px solid #21314a;color:var(--txt)}
button{background:#133154;border:1px solid #22456c;color:#dbe7ff;padding:8px 12px;border-radius:8px;cursor:pointer}
.hint{color:var(--muted);font-size:12px;margin:6px 0 0}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #223045}
.table tbody tr:hover{background:#101a2a}
.badge{padding:.15rem .45rem;border-radius:.45rem;border:1px solid #2b3f5f;color:#9cc2ff}
.tab{display:none} .tab.active{display:block}