* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
.admin-login-page { display: grid; place-items: center; min-height: 100svh; padding: clamp(18px, 4vw, 48px); color: #fff; background: #071923; font-family: Arial, Helvetica, sans-serif; }
.admin-login-card { width: min(520px, 100%); padding: clamp(32px, 5vw, 54px); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #103f60; box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.admin-login-card > p { margin: 0 0 10px; color: #f9b000; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.admin-login-card h1 { margin: 0 0 32px; font-size: clamp(32px, 5vw, 44px); line-height: 1.05; overflow-wrap: anywhere; text-align: center; }
.admin-login-card form { display: grid; gap: 20px; }
.admin-login-card label { display: grid; gap: 7px; }
.admin-login-card label span { font-size: 12px; font-weight: 700; }
.admin-login-card input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; color: #fff; background: rgba(7,25,35,.45); font: inherit; }
.admin-login-card input:focus { outline: 2px solid #f9b000; outline-offset: 2px; }
.admin-login-card button { min-height: 50px; margin-top: 2px; border: 0; border-radius: 5px; color: #071923; background: #f9b000; font: inherit; font-weight: 850; cursor: pointer; }
.admin-login-card > a { display: block; width: max-content; margin: 26px auto 0; color: rgba(255,255,255,.62); font-size: 12px; text-decoration: none; }
.admin-login-error { margin-bottom: 18px; padding: 10px 12px; border-left: 3px solid #f9b000; background: rgba(7,25,35,.35); font-size: 13px; line-height: 1.45; }

@media (max-width: 520px) {
  .admin-login-card { padding: 30px 22px; }
  .admin-login-card h1 { margin-bottom: 28px; font-size: clamp(30px, 10vw, 38px); }
}