:root { --bg:#0b0f19; --card:#121a2b; --text:#e8eefc; --muted:#a7b1c6; --line:#23304d; --accent:#7aa2ff; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,Segoe UI,Arial; background:linear-gradient(180deg,#070a12,#0b0f19); color:var(--text); }
.container{ max-width:980px; margin:0 auto; padding:22px; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.brand{ font-size:22px; font-weight:800; letter-spacing:.2px; }
.nav{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.nav a{ background:rgba(122,162,255,.12); border:1px solid rgba(122,162,255,.25); padding:8px 10px; border-radius:999px; }
.card{ background:rgba(18,26,43,.9); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.muted{ color:var(--muted); }
.pill{ border:1px solid var(--line); padding:2px 10px; border-radius:999px; font-size:12px; color:var(--muted); }
label{ display:block; margin-top:10px; font-weight:700; }
input,select{ width:100%; padding:10px 12px; margin-top:6px; border-radius:10px; border:1px solid var(--line); background:#0b1222; color:var(--text); }
button{ cursor:pointer; border-radius:10px; border:1px solid var(--line); padding:10px 12px; background:rgba(122,162,255,.16); color:var(--text); font-weight:700; }
button:hover{ background:rgba(122,162,255,.24); }
button.danger{ background:rgba(255,90,90,.12); border-color:rgba(255,90,90,.25); }
hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr; } }