:root{
  --primary:#212529;
  --accent:#ffc107;
  --text:#fff;
  --bg:#fff;
  --muted:#f4f5f6;
  --danger:#dc3545;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Arial;background:var(--bg)}
.container{max-width:860px;margin:48px auto;padding:24px}
.card{background:#fff;border:1px solid #e9ecef;border-radius:14px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
h1,h2{margin:0 0 16px;color:#212529}
label{display:block;margin:10px 0 6px;font-weight:600;color:#212529}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #ced4da;border-radius:10px;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
.btn-primary{background:var(--primary);color:var(--text)}
.btn-accent{background:var(--accent);color:#212529}
.btn-danger{background:var(--danger);color:#fff}
.helper{margin-top:12px;color:#6c757d}
.alert{padding:12px 14px;border-radius:10px;margin:0 0 16px}
.alert-danger{background:#ffe2e6;color:#842029;border:1px solid #f5c2c7}
.alert-success{background:#e2ffe8;color:#0f5132;border:1px solid #badbcc}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.nav .brand{font-weight:900;color:#212529}
.nav a{color:#212529;text-decoration:none;margin-left:10px}
.qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.badge{display:inline-block;background:#f1f3f5;color:#212529;padding:6px 10px;border-radius:999px;font-size:12px}