*{box-sizing:border-box}
:root{
  --bg:#0b1020; --card:#0f1630; --muted:#8ea0c0; --text:#e7ecff; --accent:#4f8cff; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --br:14px; --pad:16px; --gap:14px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent)}
.topbar{position:sticky;top:0;z-index:10;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 18px;background:#0a0f1e;border-bottom:1px solid #1c2a4a}
.brand{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
button{cursor:pointer;border:0;border-radius:10px;padding:10px 12px;background:#1a2545;color:var(--text)}
button:hover{filter:brightness(1.08)}
button.primary{background:var(--accent);color:white}
button.accent{background:var(--ok);color:#02110a}
main{max-width:1200px;margin:22px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #1c2a4a;border-radius:var(--br);padding:var(--pad);margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.row{display:flex;gap:10px;align-items:center}
.space-between{justify-content:space-between}
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input,select{background:#0b1227;border:1px solid #1e2a4a;color:var(--text);padding:10px;border-radius:10px}
input::placeholder{color:#7b8baa}
.search{min-width:260px}
.table-wrap{overflow:auto;border:1px solid #1c2a4a;border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid #1e2948;white-space:nowrap}
th{text-align:left;background:#121a36;color:#cfe0ff;position:sticky;top:0}
tr:hover td{background:#0c1430}
.badge{padding:3px 8px;border-radius:999px;font-size:12px}
.badge.ok{background:#093222;color:#79f0bf}
.badge.err{background:#331616;color:#ffb0b0}
.badge.sent{background:#173248;color:#a9d8ff}
.tab{display:none}
.tab.active{display:block}
.hint{opacity:.85;margin:8px 2px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#121a36;border:1px solid #2a3d6a;padding:10px 16px;border-radius:10px;display:none}