:root { --bg:#0f1115; --card:#181b22; --text:#e6e6e6; --muted:#9aa3b2; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--text); }
.container{ max-width:1080px; margin:40px auto; padding:0 16px; }
.card{ background:var(--card); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
input[type=text], input[type=password], input[type=date], input[type=number], select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #2a2f3a; background:#0c0e13; color:var(--text);
}
button{ padding:12px 16px; border:0; border-radius:12px; background:#2b62ff; color:#fff; cursor:pointer; font-weight:600; }
.button{ padding:12px 16px; border:0; border-radius:12px; background:#2b62ff; color:#fff; cursor:pointer; font-weight:600; display:inline-block; }
button.secondary,.button.secondary{ background:#2a2f3a; color:#e6e6e6; }
button.danger,.button.danger{ background:#ff6b6b; color:#fff; }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:#2a2f3a; color:var(--muted); font-size:12px; }
.table{ width:100%; border-collapse:collapse; margin-top:14px; }
.table th,.table td{ border-bottom:1px solid #2a2f3a; padding:10px; text-align:left; vertical-align:top; }
.small{ color:var(--muted); font-size:13px; }
.success{ color:#66ff9a; }
.warn{ color:#ffd166; }
.err{ color:#ff6b6b; }

@media (max-width:600px){
  body{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .container{
    margin:20px auto;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .row{ justify-content:center; }
  form.row{ flex-direction:column; }
  form.row button{ width:100%; }
  .table{ display:block; overflow-x:auto; }
  .table th,.table td{ white-space:nowrap; }
}