:root { --bg:#0b1220; --card:#101b33; --txt:#e8eefc; --muted:#9bb0d3; --line:#22345f; --btn:#2c6bff; --danger:#ff3b3b; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--txt); }
.wrap{ max-width:1100px; margin:40px auto; padding:0 16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin:14px 0; }
.topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
h2,h3{ margin:8px 0 12px; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
a{ color:#9cc1ff; text-decoration:none; }
code{ background:#0b142b; border:1px solid var(--line); padding:2px 6px; border-radius:8px; }
input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#0b142b; color:var(--txt); outline:none; }
button{ padding:10px 14px; border-radius:10px; border:0; background:var(--btn); color:white; cursor:pointer; }
button.ghost{ background:#0b142b; border:1px solid var(--line); }
button.danger{ background:var(--danger); }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row input{ flex:1; min-width:220px; }
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid var(--line); padding:10px; text-align:left; vertical-align:top; }
th{ color:var(--muted); font-weight:600; }
.grid{ display:grid; grid-template-columns: 1fr 2fr 1fr; gap:10px; }
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.err{ background:#2b0b10; border:1px solid #5f2230; padding:10px; border-radius:10px; margin:10px 0; }