:root{
  --bg:#0b1220; --panel:#111a2c; --muted:#aeb6c5; --text:#e7eaf3;
  --border:#24314a; --accent:#3b82f6; --link:#9cc0ff; --shadow:0 6px 28px rgba(0,0,0,.35);
  --radius:16px; --radius-sm:10px; --radius-lg:12px; --gap:24px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:24px; font-family:var(--font); line-height:1.55;
  background:var(--bg); color:var(--text);
}
.wrap{max-width:920px; margin:0 auto}
.card{
  background:var(--panel); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow); margin:0 auto 16px;
  max-width:920px;
}
.card.narrow{max-width:420px}
h1{margin:0 0 16px; font-size:22px}
h1.small{font-size:20px}
p{margin:0 0 12px; color:var(--muted)}
label{display:block; margin:12px 0 6px; font-size:13px; color:var(--muted)}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#0d1627; color:var(--text);
}
button{
  margin-top:16px; width:100%; padding:12px 14px; border:0;
  border-radius:var(--radius-lg); background:var(--accent); color:#fff;
  font-weight:600; cursor:pointer;
}
.links{display:flex; justify-content:space-between; margin-top:12px; font-size:13px}
a{color:var(--link); text-decoration:none}
.muted{color:var(--muted)}
.nav{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.nav a{padding:6px 10px; border:1px solid var(--border); border-radius:10px}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--border)}
.table th,.table td{padding:10px 12px; text-align:left}
.table thead th{background:#0f1730; color:var(--muted); font-weight:600}
.table tbody tr:nth-child(odd){background:#0d1627}
.notice{padding:10px 12px; border:1px dashed var(--border); border-radius:12px; color:var(--muted)}
@media (max-width:480px){
  body{padding:16px}
  .links{flex-direction:column; gap:8px}
}