/* Auth Pages — Luxury Dark & Gold Theme */
.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:36px 16px;
  background:
    radial-gradient(900px 450px at 50% -10%, rgba(184, 134, 40, .18), transparent 60%),
    radial-gradient(700px 350px at 85% 90%, rgba(201, 155, 59, .12), transparent 55%),
    linear-gradient(135deg, #07080c 0%, #11131c 58%, #090a0f 100%);
  color: var(--ink, #f4f5f8);
}
.auth-shell{width:min(440px,100%)}
.auth-shell.auth-shell-register{width:min(540px,100%)}
.auth-shell.auth-shell-roles{width:min(760px,100%)}
.auth-step{
  margin:0 0 8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--primary-2, #c99b3b);
}
.auth-role-change{margin:-6px 0 16px;font-size:13px}
.auth-role-change a{color:var(--primary-2, #c99b3b);font-weight:700;text-decoration:none}
.auth-role-change a:hover{text-decoration:underline}
.field-error{display:block;margin-top:4px;color:#f87171;font-size:12px;font-weight:600}
.auth-brand{justify-content:center;margin-bottom:24px}
.auth-card{
  background:#11131c;
  border:1px solid var(--gold-border, rgba(184, 134, 40, 0.25));
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.85), 0 0 25px rgba(184, 134, 40, .08);
  padding:32px;
}
.auth-card h1{
  margin:0 0 8px;
  font-size:28px;
  letter-spacing:-.03em;
  color:#ffffff;
}
.auth-lead{
  margin:0 0 24px;
  color:var(--muted, #9ba0b4);
  line-height:1.6;
  font-size:15px;
}
.auth-alert{
  margin-bottom:18px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(239, 68, 68, 0.15);
  border:1px solid rgba(239, 68, 68, 0.3);
  color:#f87171;
  font-size:14px;
  font-weight:600;
}
.auth-status{
  margin-bottom:18px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(16, 185, 129, 0.15);
  border:1px solid rgba(16, 185, 129, 0.3);
  color:#34d399;
  font-size:14px;
  font-weight:600;
}
.auth-form{display:grid;gap:16px}
.auth-form label{display:grid;gap:8px}
.auth-form label > span{font-size:13px;font-weight:700;color:#e2e8f0}
.auth-form .field{
  background:#161928;
  border:1px solid var(--gold-border, rgba(184, 134, 40, 0.25));
  color:#ffffff;
  border-radius:12px;
  padding:12px 16px;
  font-size:14.5px;
  transition:all .18s ease;
}
.auth-form .field:focus{
  border-color:var(--primary-2, #c99b3b);
  background:#1a1e30;
  outline:none;
  box-shadow:0 0 0 3px rgba(184, 134, 40, 0.2);
}
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.auth-remember{
  display:flex !important;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted, #9ba0b4);
  cursor:pointer;
}
.auth-remember input{width:16px;height:16px;accent-color:var(--primary)}
.auth-link{
  color:var(--primary-2, #c99b3b);
  font-size:14px;
  font-weight:700;
}
.auth-submit{
  width:100%;margin-top:6px;padding:14px 20px;font-size:15px;font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#000;border:0;border-radius:12px;cursor:pointer;
  box-shadow:0 8px 24px rgba(184, 134, 40, .35);
  transition:all .2s ease;
}
.auth-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(184, 134, 40, .45);
}
.auth-footer{
  margin:22px 0 0;
  text-align:center;
  color:var(--muted, #9ba0b4);
  font-size:14px;
}
.auth-footer a{color:var(--primary-2, #c99b3b);font-weight:800}
.role-picker{border:0;margin:0 0 6px;padding:0}
.role-picker legend{font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:10px}
.role-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.role-options-many{grid-template-columns:1fr 1fr;max-height:min(54vh,440px);overflow:auto;padding-right:6px}
.role-option{
  display:flex !important;align-items:flex-start;gap:12px;padding:14px 16px;
  border:1px solid var(--gold-border, rgba(184, 134, 40, 0.22));border-radius:14px;
  background:#161928;cursor:pointer;grid-template-columns:unset;
  transition:all .18s ease;
}
.role-option:hover{
  background:#1a1e30;border-color:var(--primary);transform:translateY(-1px);
}
.role-option:has(input:checked){
  border-color:var(--primary-2);
  background:rgba(184, 134, 40, 0.16);
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(184, 134, 40, 0.25);
}
.role-option input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--primary)}
.role-option strong{display:block;font-size:14px;margin-bottom:3px;color:#ffffff}
.role-option:has(input:checked) strong{color:var(--primary-2)}
.role-option small{display:block;color:var(--muted, #9ba0b4);font-size:12px;line-height:1.4}
.role-fields{display:grid;gap:14px}
.role-fields[hidden]{display:none !important}
@media (max-width:720px){
  .role-options-many{grid-template-columns:1fr;max-height:none}
}
@media (max-width:560px){
  .role-options{grid-template-columns:1fr}
}