:root{
  --radius: 12px; --border:#e5e7eb; --bg:#fff; --muted:#6b7280;
  --primary:#0ea5e9; --primary-contrast:#fff;
  --error-bg:#fef2f2; --error-border:#fecaca;
  --success-bg:#ecfdf5; --success-border:#a7f3d0;
}
*{box-sizing:border-box}
body{font-family:system-ui,Arial; background:#f8fafc; margin:0; padding:24px; color:#111827}
.container{max-width:1000px; margin:0 auto; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:0 6px 20px rgba(0,0,0,.04)}
.small{max-width:480px}
h1{margin:0 0 16px}
label{display:block; margin:12px 0; font-weight:600}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],select,textarea{
  width:100%; margin-top:6px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff
}
textarea{resize:vertical}
button{appearance:none; border:0; background:var(--primary); color:var(--primary-contrast); padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer}
button:hover{filter:brightness(1.05)}
.alert{padding:12px 14px;border-radius:10px;margin:12px 0;border:1px solid transparent}
.alert-error{background:var(--error-bg);border-color:var(--error-border)}
.alert-success{background:var(--success-bg);border-color:var(--success-border)}
.topnav{max-width:1000px;margin:0 auto 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.topnav .brand{font-weight:800}
.topnav .links a,.topnav .links span{margin-left:10px;text-decoration:none;color:#111827}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}
.table table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid var(--border); padding:8px; text-align:left}
.hint{color:var(--muted);font-size:.9rem}