:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --secondary:#14b8a6;
  --success:#22c55e;
  --error:#ef4444;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,#0b1220,#0f172a); color:var(--text); min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.container{width:100%; max-width:920px}
.center{text-align:center}

h1,h2,h3{margin:0 0 16px 0}
p{color:var(--muted)}

.card{
  background:linear-gradient(180deg,#0b1325,#111827);
  border:1px solid #1f2937; border-radius:12px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:16px}

.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
label{color:#cbd5e1; font-size:14px}
input, select{
  width:100%; padding:12px; border-radius:10px; border:1px solid #283345; background:#0f172a; color:var(--text);
}
input::placeholder{color:#64748b}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.button-primary, .button-secondary, .button-success, .link{
  display:inline-block; padding:12px 16px; border-radius:10px; text-decoration:none; color:white; border:0; cursor:pointer;
}
.button-primary{background:linear-gradient(45deg,#2563eb,#3b82f6)}
.button-secondary{background:linear-gradient(45deg,#0ea5e9,#14b8a6)}
.button-success{background:linear-gradient(45deg,#16a34a,#22c55e)}
.link{color:#93c5fd; background:transparent; padding:0}
.status{min-height:20px; margin-top:8px; font-size:14px}
.status.success{color:#86efac}
.status.error{color:#fca5a5}
.hidden{display:none}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}

@media (max-width:600px){ .card-grid{grid-template-columns:1fr} }