/* Login and registration only: form-first reading order at every mobile size. */
.auth-page { background: #0a1120; }
.auth-page .auth-layout { min-height: calc(100svh - 88px); grid-template-columns: 1fr 1fr; grid-template-areas: "story form"; max-width: 1440px; margin: 0 auto; }
.auth-page .auth-panel { grid-area: form; padding: 40px 48px; }
.auth-page .auth-card { padding: 0; width: min(420px, 100%); }
.auth-page .auth-card .brand { display: flex; margin-bottom: 30px; font-size: 23px; }
.auth-page .auth-card .brand small { font-size: 11px; color: #9dacbf; }
.auth-page .page-title { font-size: 30px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 10px; }
.auth-page .page-subtitle { color: #a6b5ca; font-size: 15px; line-height: 1.55; margin: 0; }
.auth-page #auth-form { margin-top: 24px; }
.auth-page .form-row { gap: 7px; margin-bottom: 16px; }
.auth-page .form-row label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: #cfdaeb; }
.auth-page .input { background: #101d30; color: #f4f7fb; border-color: #354761; min-height: 50px; border-radius: 10px; box-shadow: none; }
.auth-page .input::placeholder { color: #91a2ba; opacity: 1; }
.auth-page .input:focus { border-color: #86acff; box-shadow: 0 0 0 3px #3772ff30; }
.auth-page #auth-submit { width: 100%; min-height: 50px; border-radius: 10px; margin-top: 4px; box-shadow: 0 8px 24px #2456dc25; }
.auth-page #toggle-auth { width: 100%; min-height: 46px; margin-top: 12px; background: transparent; border: 1px solid #354761; border-radius: 10px; color: #dce7f8; }
.auth-page #forgot-password, .auth-page #admin-auth { display: inline-flex; width: auto; min-height: 44px; padding: 8px 0; margin: 8px 20px 0 0; border: 0; background: transparent; box-shadow: none; color: #a8bce0; font-size: 13px; font-weight: 500; }
.auth-page #forgot-password:hover, .auth-page #admin-auth:hover { color: white; text-decoration: underline; }
.auth-page .shell-note { margin-top: 20px; padding: 14px 16px; border: 1px solid #314261; border-radius: 12px; background: #132039; font-size: 13px; line-height: 1.5; }
.auth-page .shell-note strong { color: #c9dcff; font-size: 13px; }
.auth-page .shell-note .muted { color: #a6b5ca; }
.auth-page .auth-hero { grid-area: story; padding: 56px; gap: 36px; border-right: 1px solid #22314a; background: radial-gradient(ellipse at 10% 25%, #244c8745, transparent 70%), linear-gradient(155deg,#102239,#0a1526); }
.auth-page .auth-hero > .brand { font-size: 21px; opacity: .85; }
.auth-page .auth-hero-content .eyebrow { font-size: 12px; color: #91b6ff; letter-spacing: .12em; }
.auth-page .auth-hero h2 { margin: 16px 0 24px; font-size: clamp(32px,3.6vw,52px); line-height: 1.12; letter-spacing: -1px; }
.auth-page .auth-hero h2 span { color: #8bb4ff; }
.auth-page .auth-hero p { font-size: 16px; line-height: 1.65; color: #acbdd3; }
.auth-page .auth-metrics { gap: 16px; padding-top: 24px; border-top: 1px solid #30425c; }
.auth-page .auth-metrics strong { font-size: 18px; line-height: 1.4; }
.auth-page .auth-metrics .muted { display: block; margin-top: 6px; font-size: 12px; color: #99acc6; }
.auth-page .contact-footer { max-width: 1440px; margin: 0 auto; padding: 22px 32px; font-size: 12px; }
.auth-page :focus-visible { outline: 2px solid #a4c2ff; outline-offset: 4px; }
.auth-page .hidden { display: none !important; }
@media (max-width: 900px) {
  .auth-page .auth-layout { min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-areas: "form" "story"; }
  .auth-page .auth-panel { padding: 28px 24px 32px; }
  .auth-page .auth-card .brand { margin-bottom: 24px; }
  .auth-page .auth-hero { padding: 32px max(24px,calc((100% - 520px)/2)); gap: 20px; border-right: 0; border-top: 1px solid #22314a; }
  .auth-page .auth-hero > .brand { display: none; }
  .auth-page .auth-hero h2 { font-size: 30px; margin: 10px 0 16px; }
  .auth-page .auth-hero-content .eyebrow { margin: 0; }
  .auth-page .auth-metrics { padding-top: 18px; }
}
@media (max-width: 480px) {
  .auth-page .auth-panel { padding: 24px 22px 28px; }
  .auth-page .auth-card .brand { font-size: 22px; margin-bottom: 22px; }
  .auth-page .page-title { font-size: 27px; }
  .auth-page .page-subtitle { font-size: 14px; }
  .auth-page #auth-form { margin-top: 20px; }
  .auth-page .auth-hero h2 { font-size: 27px; }
  .auth-page .auth-hero p { font-size: 14px; }
  .auth-page .auth-metrics strong { font-size: 15px; }
  .auth-page .contact-footer { padding: 24px 22px; }
  .auth-page .contact-links { min-width: 0; flex-wrap: wrap; }
  .auth-page .contact-links a { overflow-wrap: anywhere; }
}

.auth-page .brand::before { content: 'AI'; }