:root{
  --bg:#0c1021;--bg2:#0f1530;--glass:rgba(255,255,255,.06);
  --text:#eef3ff;--muted:#a8b3d9;--accent:#7b8cff;--accent2:#60f5d2;
  --danger:#ff6b6b;--warn:#ffd166;--ok:#6ef3a5;--border:rgba(255,255,255,.12);
  --shadow:0 30px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
background:
 radial-gradient(800px 600px at 15% -10%, #6a8bff22 0%, transparent 60%),
 radial-gradient(900px 700px at 110% 10%, #60f5d222 0%, transparent 60%),
 linear-gradient(135deg,var(--bg),var(--bg2));
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo .mark{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#98a9ff);box-shadow:inset 0 0 0 1px var(--border)}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#121a45;border:1px solid var(--border);color:var(--muted)}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--glass);color:var(--text);cursor:pointer;transition:transform .15s ease,opacity .15s ease;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#9ba8ff);color:#0a0e2d}
.btn.danger{background:linear-gradient(135deg,#ff6b6b,#ff8b8b);color:#2b0505}
.btn:hover{transform:translateY(-1px);opacity:.98}
.card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px}
.hero{padding:80px 0 50px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.h1{font-size:44px;margin:0 0 8px}
.h2{font-size:22px;margin:0 0 12px}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0b1330;color:var(--text);outline:none}
label{font-size:14px;color:var(--muted);display:block;margin:8px 0 6px}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--glass)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px}
.table tr:last-child td{border-bottom:0}
.status{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#0e1a46}
.success{color:var(--ok)} .warn{color:var(--warn)} .danger{color:var(--danger)}
footer{padding:30px 0;color:var(--muted);text-align:center}

/* Animations */
@keyframes floatUp{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
.fade-in{animation:floatUp .35s ease forwards}

/* Floating toasts */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{min-width:260px;max-width:360px;padding:12px 14px;border-radius:12px;background:rgba(16,24,52,.92);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;gap:10px;align-items:flex-start;animation:floatUp .25s ease}
.toast .icon{font-size:18px;line-height:1.2}
.toast.success{border-color:rgba(110,243,165,.35)} .toast.warn{border-color:rgba(255,209,102,.35)} .toast.danger{border-color:rgba(255,107,107,.35)}
.toast .title{font-weight:700;margin-bottom:4px}
.toast .close{margin-left:auto;cursor:pointer;opacity:.7}
.toast .close:hover{opacity:1}
.hr{height:1px;background:var(--border);border:0;margin:14px 0}
.searchbar{display:flex;gap:10px;margin-bottom:12px}