:root { --bg:#0b0f14; --card:#121822; --text:#e6eefb; --muted:#9bb1c9; --accent:#00d1b2; --danger:#ff6b6b; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; background:var(--bg); color:var(--text); }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
header, footer{ padding:16px; background:#0f1622; border-bottom:1px solid #1e2a3a; }
footer{ border-top:1px solid #1e2a3a; border-bottom:none; color:var(--muted); }
.container{ max-width:980px; margin:24px auto; padding:0 16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{ width:36px; height:36px; background:linear-gradient(135deg,#1f2d3d,#0b6); border-radius:8px; }
.nav{ display:flex; gap:16px; align-items:center; justify-content:flex-end; }
.headerbar{ display:flex; align-items:center; justify-content:space-between; }
h1{ font-size:28px; margin:12px 0; }
.card{ background:var(--card); padding:16px; border:1px solid #1e2a3a; border-radius:14px; margin-bottom:16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:#021; font-weight:600; border:none; cursor:pointer; }
.btn.secondary{ background:#2d3e50; color:#cfe; }
.btn.danger{ background:var(--danger); color:#200; }
.input, textarea, select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #334; background:#0e1522; color:var(--text); }
.grid{ display:grid; gap:16px; }
.grid.two{ grid-template-columns: 2fr 1fr; }
.grid.three{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid.four{ grid-template-columns: repeat(4,minmax(0,1fr)); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:6px 10px; border:1px solid #2a3b55; border-radius:999px; color:var(--muted); }
.banner{ display:block; width:468px; height:60px; border:1px dashed #2a3b55; border-radius:8px; margin:8px auto; background:#0d1520; }
.banners{ display:flex; flex-direction:column; align-items:center; }
.result{ padding:12px; border-bottom:1px solid #243044; }
.sidebar{ position:sticky; top:16px; }
small.muted{ color:var(--muted); }
label{ display:block; font-weight:600; margin:6px 0; color:#cde; }
.help{ color:var(--muted); font-size:12px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:8px; border-bottom:1px solid #243044; text-align:left; }
.alert{ padding:10px 12px; border-radius:10px; background:#132436; border:1px solid #2a3b55; color:#dfe; margin-bottom:12px; }
.center{ text-align:center; }
.box-fixed{ max-height: 340px; overflow:auto; }
.list-fixed{ max-height: 280px; overflow:auto; }
@media(max-width: 520px){ .banner{ width:100%; height:auto; } }