:root{ --bg:#0b0f14; --card:#121820; --text:#e8eef5; --muted:#a8b3c0; --green:#1db954; --red:#ff4d4f; --link:#59a6ff; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
header,footer{ padding:16px 20px; }
header h1{ margin:0 0 4px; font-size:22px; }
.subtitle{ color:var(--muted); margin:0; }
.card{ background:var(--card); margin:12px 20px; padding:16px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.2); }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.between{ justify-content:space-between; }
label{ display:flex; flex-direction:column; font-size:12px; color:var(--muted); }
input,select,button{ padding:8px 10px; border-radius:8px; border:1px solid #314256; background:#0f141b; color:var(--text); }
button, .btn{ background:#1b2532; color:#fff; border:1px solid #2d3d53; cursor:pointer; text-decoration:none; padding:8px 10px; border-radius:8px; }
.btn:hover,button:hover{ background:#243347; }
.list{ list-style:none; padding:0; margin:0; }
.list li{ padding:10px 0; border-bottom:1px solid #1f2a38; }
.name{ font-weight:600; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:#2b3646; margin-right:8px; text-transform:uppercase; font-size:11px; letter-spacing:.4px; }
.badge-green{ background:rgba(29,185,84,.18); border:1px solid rgba(29,185,84,.5); color:#8be09f; }
.badge-red{ background:rgba(255,77,79,.18); border:1px solid rgba(255,77,79,.5); color:#ffb3b4; }
footer{ color:var(--muted); font-size:12px; }