:root { --sp-navy:#0e2638; --sp-navy-2:#15324a; --sp-blue:#1c6fb0; --sp-blue-dark:#155a90; --sp-gold:#e0ad5a; --sp-ink:#15303f; --sp-muted:#5a7282; --sp-line:#d6e0e8; --sp-surface:#eef2f7; --sp-danger:#b23a33; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
.auth-page { min-height:100dvh; padding:clamp(18px,4vw,52px); display:grid; place-items:center; color:var(--sp-ink); background:var(--sp-surface); background-image:radial-gradient(120% 120% at 100% 0%, #e7eef6 0%, var(--sp-surface) 55%); font-family:"Inter var",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif; letter-spacing:-.01em; }
.auth-shell { width:min(1020px,100%); min-height:min(640px,calc(100dvh - 48px)); display:grid; grid-template-columns:minmax(340px,.88fr) minmax(400px,1.02fr); overflow:hidden; background:#fff; border:1px solid #dbe4ec; border-radius:18px; box-shadow:0 30px 70px -30px rgba(14,38,56,.35); }
.auth-identity { position:relative; padding:clamp(34px,5vw,60px); display:flex; flex-direction:column; color:#fff; background:var(--sp-navy); background-image:linear-gradient(165deg,#163a57 0%,var(--sp-navy) 58%); }
.auth-identity::after { content:"SAMPLE"; position:absolute; right:-25px; bottom:56px; color:rgba(255,255,255,.045); font-size:clamp(72px,10vw,124px); font-weight:900; letter-spacing:-.06em; transform:rotate(-90deg); transform-origin:center; pointer-events:none; }
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.auth-brand__code { width:46px; height:46px; display:grid; place-items:center; color:#2a1c05; background:var(--sp-gold); border-radius:12px; font-weight:900; box-shadow:0 6px 18px -8px rgba(224,173,90,.8); }
.auth-brand h1 { margin:0 0 3px; color:#fff; font-size:25px; letter-spacing:-.03em; }
.auth-brand p { margin:0; color:#bcd0dc; font-size:13px; }
.auth-workflow { position:relative; z-index:1; margin:auto 0; max-width:390px; }
.auth-workflow__intro { margin:0 0 30px; color:#e4edf2; font-size:clamp(18px,2vw,23px); line-height:1.45; }
.auth-workflow ol { margin:0; padding:0; display:grid; list-style:none; }
.auth-workflow li { min-height:56px; display:flex; align-items:center; gap:14px; color:#d4e1e8; border-top:1px solid rgba(255,255,255,.14); font-size:14px; }
.auth-workflow li span { color:var(--sp-gold); font:700 12px/1 ui-monospace,"Cascadia Mono",monospace; }
.auth-identity__notice { position:relative; z-index:1; margin:24px 0 0; color:#bcd0dc; font-size:12px; line-height:1.5; }
.auth-identity__notice strong { margin-right:8px; color:var(--sp-gold); letter-spacing:.04em; }
.auth-entry { min-width:0; padding:clamp(38px,7vw,88px); display:grid; place-items:center; }
.auth-form { width:min(410px,100%); }
.auth-form__heading { margin-bottom:34px; }
.auth-form__heading h2 { margin:0 0 9px; color:#153247; font-size:clamp(28px,3vw,36px); line-height:1.15; letter-spacing:-.035em; }
.auth-form__heading span { color:var(--sp-muted); line-height:1.55; }
.auth-field { margin-bottom:18px; display:grid; gap:7px; color:#294a60; font-size:13px; font-weight:750; }
.auth-field input { width:100%; min-width:0; min-height:48px; padding:11px 13px; color:#173247; background:#fff; border:1px solid var(--sp-line); border-radius:10px; font-size:16px; font-weight:500; transition:border-color .14s, box-shadow .14s; }
.auth-field input:hover { border-color:#8ba5b5; }
.auth-field input[aria-invalid="true"] { border-color:var(--sp-danger); box-shadow:0 0 0 2px rgba(154,47,42,.1); }
.auth-field__error { color:var(--sp-danger); font-size:12px; font-weight:650; }
.auth-password { position:relative; display:block; }
.auth-password input { padding-right:104px; }
.auth-password__toggle { position:absolute; top:2px; right:2px; min-width:92px; min-height:44px; padding:7px 10px; color:var(--sp-blue); background:#eef4f7; border:0; border-radius:5px; cursor:pointer; font-size:13px; font-weight:800; }
.auth-password__toggle:hover { background:#e1ebf0; }
.auth-submit { width:100%; min-height:50px; margin-top:4px; padding:11px 16px; color:#fff; background:var(--sp-blue); border:0; border-radius:10px; cursor:pointer; font-weight:800; letter-spacing:-.01em; box-shadow:0 8px 20px -10px rgba(28,111,176,.7); transition:background .14s, transform .06s; }
.auth-submit:hover { background:var(--sp-blue-dark); }
.auth-submit:active { transform:translateY(1px); }
.auth-submit:disabled { cursor:wait; opacity:.65; }
.auth-form__foot { margin:16px 0 0; color:#728896; text-align:center; font-size:12px; }
.auth-error { margin:0 0 18px; padding:12px 14px; color:#76231f; background:#fae9e8; border-left:4px solid var(--sp-danger); border-radius:4px; line-height:1.45; }
.auth-error strong { display:block; margin-bottom:4px; }
.auth-error ul { margin:0; padding-left:20px; }
.auth-error a { min-height:44px; display:inline-flex; align-items:center; color:inherit; font-weight:700; }
.auth-session-control { margin-top:auto; padding-top:18px; display:grid; gap:8px; color:#b9ccd8; border-top:1px solid rgba(255,255,255,.14); font:12px/1.4 ui-sans-serif,system-ui,sans-serif; }
.auth-session-control button { min-height:44px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:6px; cursor:pointer; font-weight:800; }
.auth-session-control button:hover { background:rgba(255,255,255,.08); }
.auth-field input:focus-visible,.auth-password__toggle:focus-visible,.auth-submit:focus-visible,.auth-session-control button:focus-visible { outline:3px solid #2b7fa9; outline-offset:3px; }
@media (max-width:760px) {
  .auth-page { padding:0; place-items:stretch; }
  .auth-shell { min-height:100dvh; grid-template-columns:1fr; border:0; border-radius:0; box-shadow:none; }
  .auth-identity { padding:22px 20px 24px; }
  .auth-identity::after,.auth-workflow ol,.auth-identity__notice { display:none; }
  .auth-workflow { margin:18px 0 0; }
  .auth-workflow__intro { margin:0; font-size:14px; line-height:1.5; }
  .auth-entry { padding:34px 20px 48px; place-items:start center; }
  .auth-form__heading { margin-bottom:26px; }
  .auth-form__heading h2 { font-size:29px; }
  .auth-session-control { margin-top:12px; }
}
@media (max-width:360px) {
  .auth-brand__code { width:44px; height:44px; }
  .auth-brand h1 { font-size:22px; }
  .auth-password input { padding-right:96px; }
  .auth-password__toggle { min-width:84px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }