/* Authentication shares the storefront palette while retaining each existing form layout. */
html:has(> body.auth-route) { background: #101014; }
body.auth-route {
  --auth-bg: #101014;
  --auth-surface: #18181c;
  --auth-raised: #24242b;
  --auth-line: #3d3d48;
  --auth-text: #f1f1f5;
  --auth-muted: #b1b1bd;
  --auth-accent: #22b9ed;
  --auth-focus: #8ee1fc;
  background: var(--auth-bg);
  color: var(--auth-text);
}

body.auth-route .auth-page { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
body.auth-route .screen-red-streaks { display: none; }
body.auth-route :is(.auth-layout, .auth-card, .auth-card-compact) { background: var(--auth-surface); border-color: var(--auth-line); box-shadow: none; }
body.auth-route .auth-showcase { background: linear-gradient(150deg, #182630, #141419 72%); color: var(--auth-text); }
body.auth-route .auth-showcase::before { border-color: #2e4857; box-shadow: 0 0 0 38px #25425326, 0 0 0 82px #25425314; }
body.auth-route .auth-showcase::after { background: linear-gradient(90deg, transparent, #2f6277, transparent); box-shadow: none; }
body.auth-route .auth-showcase-mark { color: #ffffff0d; }
body.auth-route .auth-showcase-line { background: var(--auth-accent); box-shadow: none; }
body.auth-route :is(.auth-showcase > p, .auth-kicker) { color: #6bd7f8; font-size: 12px; line-height: 1.5; }
body.auth-route :is(.auth-card h1, .auth-showcase h2, .auth-description strong) { color: var(--auth-text); }
body.auth-route .auth-showcase > span:not(.auth-showcase-mark) { color: var(--auth-muted); font-size: 14px; line-height: 1.7; }
body.auth-route :is(.auth-description, .auth-switch, .auth-check, .auth-otp-note, .auth-resend) { color: var(--auth-muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
body.auth-route .auth-switch > span { color: #7a7a89; }
body.auth-route .auth-form > label > span { color: #dedee7; font-size: 14px; font-weight: 600; line-height: 1.5; }
body.auth-route .auth-form input:not([type="checkbox"]):not([type="hidden"]) { min-height: 44px; background: var(--auth-bg); border-color: #555562; color: var(--auth-text); font-size: 16px; caret-color: var(--auth-text); }
body.auth-route .auth-form input:not([type="checkbox"])::placeholder { color: #9292a2; }
body.auth-route .auth-form input:not([type="checkbox"]):focus { background: #14141a; border-color: var(--auth-accent); box-shadow: 0 0 0 3px #22b9ed1f; }
body.auth-route .auth-form input:-webkit-autofill { -webkit-text-fill-color: var(--auth-text); -webkit-box-shadow: 0 0 0 1000px #14141a inset; caret-color: var(--auth-text); }
body.auth-route .auth-check { min-height: 44px; align-items: center; }
body.auth-route .auth-check input { margin-top: 0; accent-color: var(--auth-accent); }
body.auth-route .auth-form-row { flex-wrap: wrap; }
body.auth-route .auth-terms { align-items: flex-start; }
body.auth-route .auth-terms input { flex-shrink: 0; margin-top: 4px; }
body.auth-route :is(.auth-form-row > a, .auth-switch a, .auth-check a, .auth-resend button) { color: #6bd7f8; font-size: 14px; font-weight: 600; }
body.auth-route :is(.auth-form-row > a:hover, .auth-switch a:hover, .auth-check a:hover, .auth-resend button:hover) { color: #b7edff; }
body.auth-route :is(.auth-form-row > a, .auth-switch a) { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
body.auth-route .auth-resend { align-items: center; flex-wrap: wrap; }
body.auth-route .auth-resend button { min-height: 44px; }
body.auth-route .auth-submit { min-height: 46px; border-color: #43c7f1; background: var(--auth-accent); color: #10151b; box-shadow: none; font-size: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; }
body.auth-route .auth-submit:hover { border-color: #9ce5ff; background: #69d3f7; color: #10151b; box-shadow: none; filter: none; }
body.auth-route .auth-submit:disabled { border-color: #565661; background: #383841; color: #dedee7; box-shadow: none; }
body.auth-route .auth-step-icon { border-color: #2f6a7f; background: #14272f; color: #81dbf9; box-shadow: none; }
body.auth-route :is(a, button, input):focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 3px; }
body.auth-route .auth-form input:not([type="checkbox"]):focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 3px; }

/* Field validation and server alerts keep their semantic colors and remain readable. */
body.auth-route .auth-form small { color: #ffb2b7; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
body.auth-route :is(.auth-validation, .auth-alert) { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
body.auth-route :is(.auth-validation, .auth-alert.error) { border-color: #864b51; background: #2a1b20; color: #ffb2b7; }
body.auth-route .auth-alert.success { border-color: #3f6954; background: #192b23; color: #a2dfbd; }
body.auth-route .auth-form input:is(.input-validation-error, [aria-invalid="true"]),
body.auth-route .auth-form input:is(.input-validation-error, [aria-invalid="true"]):focus { border-color: #cf7b83; }

/* The existing loading feedback uses the same palette without changing its behavior. */
body.auth-route .app-loading-overlay { background: #101014d6; }
body.auth-route .app-loading-dialog { border-color: var(--auth-line); background: var(--auth-surface); color: var(--auth-text); box-shadow: 0 25px 80px #0008; }
body.auth-route .app-loading-ring { border-color: #334753; border-top-color: #62d5fa; border-right-color: #22b9ed; box-shadow: none; }
body.auth-route .app-loading-kicker { color: #6bd7f8; }
body.auth-route .app-loading-title { color: var(--auth-text); }
body.auth-route .app-loading-detail { color: var(--auth-muted); font-size: 14px; line-height: 1.6; }

/* Desktop chrome comes from desktop-store-header.css; mobile/tablet retain the menu controller. */
@media (max-width: 1023px) {
  body.auth-route .site-header { height: 64px; min-height: 64px; border-color: #34343d; background: #18181c; box-shadow: none; backdrop-filter: none; }
  body.auth-route .header-inner { display: flex; align-items: center; gap: 10px; width: calc(100% - 48px); height: 64px; }
  body.auth-route .site-header .header-brand { position: static; display: flex; flex: 1 1 auto; align-self: center; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; height: auto; margin: 0; }
  body.auth-route .brand-logo { position: static; flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; transform: none; filter: none; }
  body.auth-route .site-header .home-brand-wordmark { display: block; min-width: 0; overflow: hidden; color: #f1f1f5; font-size: 18px; font-weight: 800; font-style: normal; line-height: 1.1; letter-spacing: -.5px; white-space: nowrap; text-overflow: ellipsis; }
  body.auth-route .home-brand-wordmark > span { color: inherit; }
  body.auth-route .header-tools { position: static; display: flex; flex: 0 0 auto; order: 1; align-items: center; gap: 2px; margin: 0; transform: none; }
  body.auth-route .site-header .search-box { display: none; }
  body.auth-route :is(.home-header-search, .header-tools .round-button) { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #ededf4; box-shadow: none; }
  body.auth-route .header-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  body.auth-route :is(.home-header-search:hover, .header-tools .round-button:hover) { border-color: #83d3e6; background: #25252e; color: #8ee1fc; transform: none; }
  body.auth-route .site-header .cart-count { border-color: #18181c; background: #dedee5; color: #151519; }
  body.auth-route .mobile-menu-toggle { position: static; display: block; flex: 0 0 44px; order: 2; width: 44px; height: 44px; margin: 0; padding: 9px; border-color: #4a4a56; border-radius: 7px; background: transparent; }
  body.auth-route .mobile-menu-toggle:hover { border-color: #858591; background: #25252e; }
  body.auth-route .mobile-menu-toggle span { background: #ededf4; }
  body.auth-route .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: auto; max-height: calc(100dvh - 80px); padding: 8px; overflow-y: auto; border: 1px solid #34343d; border-radius: 0 0 8px 8px; background: #18181c; box-shadow: 0 18px 30px #0005; }
  body.auth-route .main-nav.open { display: flex; }
  body.auth-route .main-nav a { min-height: 46px; height: auto; padding: 10px 12px; border-radius: 6px; color: #c5c5d2; font-size: 14px; line-height: 1.5; text-transform: none; }
  body.auth-route .main-nav :is(a.active, a:hover) { background: #25252e; color: #8ee1fc; }
  body.auth-route .main-nav a::after { display: none; }
}

/* The original two-column minimum needs 672px plus the 48px shell gutter. */
@media (max-width: 719px) {
  body.auth-route .auth-layout { width: min(100%, 490px); min-height: 0; grid-template-columns: 1fr; border-radius: 10px; }
  body.auth-route .auth-showcase { display: none; }
}

@media (max-width: 700px) {
  body.auth-route .auth-form-row { flex-wrap: wrap; gap: 0 12px; }
  body.auth-route .auth-submit { min-height: 44px; }
}

@media (max-width: 640px) {
  body.auth-route .header-inner { width: calc(100% - 24px); gap: 6px; }
}

@media (max-width: 380px) {
  body.auth-route .site-header .header-brand { gap: 5px; }
  body.auth-route .site-header .home-brand-wordmark { flex: 0 0 60px; width: 60px; font-size: 14px; line-height: 1.1; letter-spacing: 0; white-space: normal; }
  body.auth-route .home-brand-wordmark > span { display: block; }
}