.auth-page{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:transparent;color:#edf4ff}.auth-card{width:min(430px,100%);padding:38px 34px 30px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(12,18,28,.78);box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px)}.auth-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:1.05rem}.auth-brand span{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(118,225,239,.55);border-radius:13px;color:#c8faff;font-weight:800}.auth-kicker{margin:28px 0 8px;color:#74dce9;font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.auth-card h1{margin:0;font-size:2rem;line-height:1.05}.auth-subtitle{margin:12px 0 24px;color:rgba(218,231,241,.58);line-height:1.55}.auth-form{display:grid;gap:14px}.auth-form label{display:grid;gap:7px;color:#aab8cb;font-size:.78rem}.auth-form input{width:100%;min-height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font:inherit;outline:none}.auth-form input:focus{border-color:#75e2ed;box-shadow:0 0 0 3px rgba(90,212,230,.14)}.auth-form button,.auth-button-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin-top:4px;border:0;border-radius:9px;background:#76e1ef;color:#07121c;font:700 .9rem inherit;text-decoration:none;cursor:pointer}.auth-form button:hover,.auth-button-link:hover{background:#baf7fb}.auth-error,.auth-success{margin:0 0 16px;padding:11px 13px;border-radius:9px;font-size:.82rem;line-height:1.45}.auth-error{background:rgba(150,45,62,.22);color:#ffc5ce;border:1px solid rgba(255,150,165,.2)}.auth-success{background:rgba(90,212,160,.12);color:#baf6d9;border:1px solid rgba(90,212,160,.2)}.auth-recovery{display:block;margin:18px 0 0;color:#9db2cb;text-align:center;font-size:.82rem}.auth-switch{margin:24px 0 0;color:rgba(218,231,241,.55);text-align:center;font-size:.82rem}.auth-card a{color:#9ceaf1}.auth-switch a,.auth-recovery{ text-decoration:none}.auth-switch a:hover,.auth-recovery:hover{text-decoration:underline}@media(max-width:480px){.auth-page{padding:18px 14px}.auth-card{padding:28px 20px 24px;border-radius:16px}.auth-card h1{font-size:1.75rem}}
.auth-page { min-height: 100dvh; padding: max(18px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
.auth-card { min-width: 0; }
.auth-form input, .auth-form button, .auth-button-link { min-height: 48px; }
.auth-form label { min-width: 0; }
@media (max-width: 360px) { .auth-card { padding-inline: 16px; } .auth-card h1 { font-size: 1.55rem; } .auth-brand strong { font-size: .95rem; } }

/* Bootstrap form controls are themed to match the existing RandomSerials auth UI. */
.auth-page {
  --bs-body-color: #edf4ff;
  --bs-body-bg: transparent;
  --bs-primary: #76e1ef;
  --bs-primary-rgb: 118, 225, 239;
  --bs-border-color: rgba(255, 255, 255, .16);
  --bs-focus-ring-color: rgba(90, 212, 230, .2);
}

.auth-form .form-control {
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
}

.auth-form .form-control::placeholder { color: rgba(218, 231, 241, .42); }

.auth-form .form-control:focus {
  border-color: #75e2ed;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(90, 212, 230, .14);
}

.auth-form .btn-primary,
.auth-card .auth-button-link.btn-primary {
  min-height: 49px;
  margin-top: 4px;
  border: 1px solid #76e1ef;
  border-radius: 9px;
  background: #76e1ef;
  color: #07121c;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.auth-form .btn-primary:hover,
.auth-card .auth-button-link.btn-primary:hover {
  border-color: #baf7fb;
  background: #baf7fb;
  color: #07121c;
  transform: translateY(-1px);
}

.auth-form .btn-primary:focus-visible,
.auth-card .auth-button-link.btn-primary:focus-visible {
  outline: 3px solid rgba(118, 225, 239, .42);
  outline-offset: 3px;
}

.admin-auth-note { line-height: 1.5; }