@media (max-width: 767px) {
  body[data-page-key="login"] {
    --login-black: #F5F5F7;
    --login-ink: #F5F5F7;
    --login-muted: #B8B8BD;
    --login-gold: #FFD000;
    --login-gold-deep: #D9A800;
    --login-gold-soft: #222224;
    --login-surface: #1C1C1E;
    --login-offwhite: #101011;
    --login-border: #38383C;
    --login-danger: #b42318;
    margin: 0;
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: #0B0B0C;
    color: var(--login-black);
    font-family: "Noto Sans Thai", "Inter", Arial, sans-serif;
  }

  body[data-page-key="login"].login-mobile-dialog-open {
    overflow: hidden;
    touch-action: none;
  }

  body[data-page-key="login"] .login-mobile-page,
  body[data-page-key="login"] .login-mobile-page * {
    box-sizing: border-box;
  }

  body[data-page-key="login"] .login-mobile-page {
    display: block;
    min-height: 100vh;
    background: #0B0B0C;
  }

  body[data-page-key="login"] .login-mobile-shell {
    width: 100%;
    min-height: 100vh;
    overflow: clip;
    background:
      radial-gradient(circle at 86% 13%, rgba(255, 208, 0, .07), transparent 23%),
      linear-gradient(#0B0B0C, #0B0B0C);
  }

  body[data-page-key="login"] .login-auth-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 64px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
    border-bottom: 1px solid #28282B;
    background: rgba(11, 11, 12, .96);
    backdrop-filter: blur(12px);
  }

  body[data-page-key="login"] .auth-mobile-drawer-trigger,
  body[data-page-key="login"] .login-auth-header__register {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--login-black);
  }

  body[data-page-key="login"] .auth-mobile-drawer-trigger {
    position: static;
    inset: auto;
    z-index: auto;
    cursor: pointer;
  }

  body[data-page-key="login"] .auth-mobile-drawer-trigger img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
  }

  body[data-page-key="login"] .login-auth-header__brand {
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 10px;
    color: var(--login-black);
    text-decoration: none;
  }

  body[data-page-key="login"] .login-brand-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 8px;
    color: var(--login-black);
  }

  body[data-page-key="login"] .login-brand-lockup__mark {
    flex: 0 0 auto;
    width: 25px;
    height: 31px;
  }

  body[data-page-key="login"] .login-brand-lockup__text {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    gap: 6px;
    white-space: nowrap;
  }

  body[data-page-key="login"] .login-brand-lockup__text strong {
    font-size: 21px;
    font-weight: 850;
    letter-spacing: .015em;
  }

  body[data-page-key="login"] .login-brand-lockup__text em {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
  }

  body[data-page-key="login"] .login-auth-header__register svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-mobile-main {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 18px 16px 22px;
  }

  body[data-page-key="login"] .login-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(124px, .95fr);
    align-items: center;
    min-height: 184px;
    gap: 6px;
    padding: 10px 0 8px;
  }

  body[data-page-key="login"] .login-hero__copy {
    position: relative;
    z-index: 2;
    min-width: 0;
  }

  body[data-page-key="login"] .login-eyebrow {
    margin: 0 0 5px;
    color: var(--login-gold-deep);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .02em;
  }

  body[data-page-key="login"] .login-hero h1 {
    margin: 0;
    max-width: 11ch;
    color: var(--login-black);
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.16;
    letter-spacing: -.035em;
  }

  body[data-page-key="login"] .login-hero__copy > p:last-child {
    margin: 12px 0 0;
    max-width: 29ch;
    color: #B8B8BD;
    font-size: 15px;
    line-height: 1.72;
  }

  body[data-page-key="login"] .login-hero__visual {
    align-self: center;
    margin: 0 -10px 0 -16px;
  }

  body[data-page-key="login"] .login-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 196px;
    object-fit: contain;
    filter: saturate(.98) contrast(1.02);
  }

  body[data-page-key="login"] .login-status-notice {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    margin: 2px 0 14px;
    padding: 13px 14px;
    border: 1px solid #FFE066;
    border-radius: 16px;
    background: linear-gradient(135deg, #222224, #1C1C1E);
  }

  body[data-page-key="login"] .login-status-notice > svg {
    width: 28px;
    height: 28px;
    margin-top: 1px;
    fill: none;
    stroke: var(--login-gold-deep);
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  body[data-page-key="login"] .login-status-notice h2 {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.45;
  }

  body[data-page-key="login"] .login-status-notice p {
    margin: 0;
    color: #555a60;
    font-size: 13px;
    line-height: 1.62;
  }

  body[data-page-key="login"] .login-form-card,
  body[data-page-key="login"] .login-register-card,
  body[data-page-key="login"] .login-security-card,
  body[data-page-key="login"] .login-help-card {
    border: 1px solid var(--login-border);
    border-radius: 20px;
    background: var(--login-surface);
    box-shadow: 0 10px 34px rgba(5, 5, 5, .045);
  }

  body[data-page-key="login"] .login-form-card {
    padding: 19px 16px 18px;
    scroll-margin-top: 82px;
  }

  body[data-page-key="login"] .login-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
  }

  body[data-page-key="login"] .login-section-heading__icon {
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--login-gold-soft);
    color: var(--login-gold-deep);
  }

  body[data-page-key="login"] .login-section-heading__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-section-heading h2,
  body[data-page-key="login"] .login-register-card h2,
  body[data-page-key="login"] .login-security-card h2,
  body[data-page-key="login"] .login-help-card h2 {
    margin: 0;
    color: var(--login-black);
    font-size: 21px;
    line-height: 1.35;
  }

  body[data-page-key="login"] .login-section-heading p,
  body[data-page-key="login"] .login-register-card p {
    margin: 3px 0 0;
    color: var(--login-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-page-key="login"] .login-error-summary {
    margin: 0 0 16px;
    padding: 13px 14px;
    border: 1px solid #f2b8b5;
    border-radius: 14px;
    background: #281515;
    color: #7a271a;
  }

  body[data-page-key="login"] .login-error-summary h3 {
    margin: 0 0 6px;
    font-size: 15px;
  }

  body[data-page-key="login"] .login-error-summary ul {
    margin: 0;
    padding-left: 20px;
  }

  body[data-page-key="login"] .login-error-summary button {
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7a271a;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-form {
    display: grid;
    gap: 15px;
  }

  body[data-page-key="login"] .login-mobile-field {
    min-width: 0;
  }

  body[data-page-key="login"] .login-mobile-field > label {
    display: block;
    margin: 0 0 7px;
    color: var(--login-ink);
    font-size: 15px;
    font-weight: 750;
  }

  body[data-page-key="login"] .login-mobile-field > label span {
    color: var(--login-danger);
  }

  body[data-page-key="login"] .login-mobile-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 54px;
    border: 1px solid #d9dad7;
    border-radius: 14px;
    background: #0B0B0C;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }

  body[data-page-key="login"] .login-mobile-input-wrap:focus-within {
    border-color: var(--login-gold-deep);
    box-shadow: 0 0 0 3px rgba(255, 208, 0, .16);
  }

  body[data-page-key="login"] .login-mobile-field[data-invalid="true"] .login-mobile-input-wrap {
    border-color: var(--login-danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .09);
  }

  body[data-page-key="login"] .login-mobile-input-icon {
    position: absolute;
    left: 16px;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #656970;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  body[data-page-key="login"] .login-mobile-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0 15px 0 48px;
    border: 0;
    outline: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--login-black);
    font: inherit;
    font-size: 16px;
    line-height: 1;
  }

  body[data-page-key="login"] .login-mobile-input-wrap--password input {
    padding-right: 58px;
  }

  body[data-page-key="login"] .login-mobile-input-wrap input::placeholder {
    color: #8a8d92;
    opacity: 1;
  }

  body[data-page-key="login"] .login-mobile-input-wrap input:-webkit-autofill,
  body[data-page-key="login"] .login-mobile-input-wrap input:-webkit-autofill:hover,
  body[data-page-key="login"] .login-mobile-input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-black);
    box-shadow: 0 0 0 1000px #222224 inset;
    transition: background-color 9999s ease-out 0s;
  }

  body[data-page-key="login"] .login-mobile-password-toggle {
    position: absolute;
    right: 5px;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--login-black);
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-password-toggle svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-mobile-password-toggle .login-mobile-eye-closed,
  body[data-page-key="login"] .login-mobile-password-toggle[aria-pressed="true"] .login-mobile-eye-open {
    display: none;
  }

  body[data-page-key="login"] .login-mobile-password-toggle[aria-pressed="true"] .login-mobile-eye-closed {
    display: block;
  }

  body[data-page-key="login"] .login-mobile-hint,
  body[data-page-key="login"] .login-mobile-error {
    margin: 5px 2px 0;
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page-key="login"] .login-mobile-hint {
    color: #74777d;
  }

  body[data-page-key="login"] .login-mobile-error {
    color: var(--login-danger);
    font-weight: 650;
  }

  body[data-page-key="login"] .login-mobile-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  body[data-page-key="login"] .login-mobile-remember-wrap {
    min-width: 0;
  }

  body[data-page-key="login"] .login-mobile-remember {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 9px;
    color: #55585e;
    font-size: 14px;
    line-height: 1.4;
  }

  body[data-page-key="login"] .login-mobile-remember input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  body[data-page-key="login"] .login-mobile-remember > span[aria-hidden="true"] {
    display: inline-grid;
    flex: 0 0 21px;
    place-items: center;
    width: 21px;
    height: 21px;
    border: 1px solid #c9cac7;
    border-radius: 6px;
    background: #222224;
  }

  body[data-page-key="login"] .login-mobile-remember-wrap p {
    margin: -2px 0 0 30px;
    color: #7a7d82;
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page-key="login"] .login-mobile-remember-wrap p button {
    min-height: 32px;
    margin: 0 0 0 3px;
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: var(--login-gold-deep);
    font: inherit;
    font-weight: 750;
    text-decoration: underline;
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-text-button {
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--login-gold-deep);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-submit,
  body[data-page-key="login"] .login-mobile-google,
  body[data-page-key="login"] .login-register-card > a,
  body[data-page-key="login"] .login-mobile-dialog__actions > * {
    min-height: 48px;
    border-radius: 13px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
  }

  body[data-page-key="login"] .login-mobile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 1px;
    padding: 0 18px;
    border: 1px solid var(--login-gold);
    background: linear-gradient(135deg, #FFE066, #D9A800);
    color: #151000;
    box-shadow: 0 9px 20px rgba(217, 168, 0, .17);
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-submit svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-form-privacy {
    margin: -5px 0 0;
    color: #6f7277;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }

  body[data-page-key="login"] .login-mobile-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 11px;
    margin: 17px 0 14px;
    color: #7c7f84;
  }

  body[data-page-key="login"] .login-mobile-divider span {
    height: 1px;
    background: #28282B;
  }

  body[data-page-key="login"] .login-mobile-divider em {
    font-style: normal;
    font-size: 13px;
  }

  body[data-page-key="login"] .login-mobile-google {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    padding: 0 14px;
    border: 1px solid #d9dad7;
    background: #0B0B0C;
    color: var(--login-black);
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-google > svg {
    width: 22px;
    height: 22px;
  }

  body[data-page-key="login"] .login-mobile-google small {
    color: #777a80;
    font-size: 11px;
    font-weight: 650;
  }

  body[data-page-key="login"] .login-register-card {
    display: grid;
    gap: 15px;
    margin-top: 14px;
    padding: 18px 16px;
  }

  body[data-page-key="login"] .login-register-card > a {
    display: inline-grid;
    place-items: center;
    width: 100%;
    border: 1px solid var(--login-gold);
    background: #0B0B0C;
    color: var(--login-gold-deep);
    text-decoration: none;
  }

  body[data-page-key="login"] .login-security-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    margin-top: 14px;
    padding: 18px 16px;
    border-color: #FFE066;
    background: linear-gradient(135deg, #222224, #1C1C1E);
    scroll-margin-top: 82px;
  }

  body[data-page-key="login"] .login-security-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #0B0B0C;
    color: var(--login-gold-deep);
    box-shadow: 0 8px 22px rgba(217, 168, 0, .08);
  }

  body[data-page-key="login"] .login-security-card__icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-security-card ul {
    margin: 10px 0 8px;
    padding-left: 19px;
    color: #55595e;
    font-size: 13px;
    line-height: 1.65;
  }

  body[data-page-key="login"] .login-security-card button {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--login-gold-deep);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  body[data-page-key="login"] .login-help-card {
    margin-top: 14px;
    padding: 18px 16px;
    scroll-margin-top: 82px;
  }

  body[data-page-key="login"] .login-help-card__links {
    display: grid;
    gap: 9px;
    margin-top: 13px;
  }

  body[data-page-key="login"] .login-help-card__links a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    min-height: 50px;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--login-border);
    border-radius: 13px;
    color: var(--login-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }

  body[data-page-key="login"] .login-help-card__links svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--login-gold-deep);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-auth-footer {
    display: grid;
    gap: 14px;
    width: min(calc(100% - 32px), 688px);
    margin: 0 auto;
    padding: 24px 0 max(26px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--login-border);
    text-align: center;
  }

  body[data-page-key="login"] .login-auth-footer__brand {
    justify-self: center;
    padding: 4px;
    border-radius: 10px;
    color: var(--login-black);
    text-decoration: none;
  }

  body[data-page-key="login"] .login-auth-footer__brand .login-brand-lockup__mark {
    width: 29px;
    height: 35px;
  }

  body[data-page-key="login"] .login-auth-footer__brand .login-brand-lockup__text strong {
    font-size: 20px;
  }

  body[data-page-key="login"] .login-auth-footer__brand .login-brand-lockup__text em {
    font-size: 14px;
  }

  body[data-page-key="login"] .login-auth-footer nav,
  body[data-page-key="login"] .login-auth-footer__support {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 16px;
  }

  body[data-page-key="login"] .login-auth-footer a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    color: #4f5359;
    font-size: 13px;
    text-decoration: none;
  }

  body[data-page-key="login"] .login-auth-footer > p {
    margin: 0;
    color: #85888d;
    font-size: 12px;
  }

  body[data-page-key="login"] .login-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body[data-page-key="login"] .login-mobile-dialog-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    background: rgba(0, 0, 0, .74);
    backdrop-filter: blur(3px);
  }

  body[data-page-key="login"] .login-mobile-dialog {
    position: fixed;
    z-index: 1201;
    left: 50%;
    top: 50%;
    width: min(calc(100% - 32px), 430px);
    max-height: min(82vh, 650px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    padding: 24px 20px 20px;
    border: 1px solid var(--login-border);
    border-radius: 22px;
    background: #0B0B0C;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
    text-align: center;
  }

  body[data-page-key="login"] .login-mobile-dialog__close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #222224;
    color: var(--login-black);
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-dialog__close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  body[data-page-key="login"] .login-mobile-dialog__icon {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: var(--login-gold-soft);
    color: var(--login-gold-deep);
  }

  body[data-page-key="login"] .login-mobile-dialog__icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body[data-page-key="login"] .login-mobile-dialog__kicker {
    margin: 0 0 5px;
    color: var(--login-gold-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  body[data-page-key="login"] .login-mobile-dialog h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
  }

  body[data-page-key="login"] .login-mobile-dialog > p:not(.login-mobile-dialog__kicker) {
    margin: 10px 0 0;
    color: #55595e;
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page-key="login"] .login-mobile-dialog__actions {
    display: grid;
    gap: 9px;
    margin-top: 18px;
  }

  body[data-page-key="login"] .login-mobile-dialog__actions > * {
    display: inline-grid;
    place-items: center;
    width: 100%;
    padding: 0 14px;
    text-decoration: none;
  }

  body[data-page-key="login"] .login-mobile-dialog__confirm {
    border: 1px solid var(--login-gold);
    background: linear-gradient(135deg, #FFE066, #D9A800);
    color: #151000;
    cursor: pointer;
  }

  body[data-page-key="login"] .login-mobile-dialog__secondary {
    border: 1px solid var(--login-black);
    background: var(--login-black);
    color: #F5F5F7;
  }

  body[data-page-key="login"] .login-mobile-dialog__tertiary {
    border: 1px solid var(--login-border);
    background: #0B0B0C;
    color: var(--login-black);
  }

  body[data-page-key="login"] .auth-mobile-drawer-trigger:focus-visible,
  body[data-page-key="login"] .login-auth-header__brand:focus-visible,
  body[data-page-key="login"] .login-auth-header__register:focus-visible,
  body[data-page-key="login"] .login-mobile-password-toggle:focus-visible,
  body[data-page-key="login"] [data-remember-info]:focus-visible,
  body[data-page-key="login"] .login-mobile-text-button:focus-visible,
  body[data-page-key="login"] .login-mobile-submit:focus-visible,
  body[data-page-key="login"] .login-mobile-google:focus-visible,
  body[data-page-key="login"] .login-register-card a:focus-visible,
  body[data-page-key="login"] .login-security-card button:focus-visible,
  body[data-page-key="login"] .login-help-card a:focus-visible,
  body[data-page-key="login"] .login-auth-footer a:focus-visible,
  body[data-page-key="login"] .login-mobile-dialog button:focus-visible,
  body[data-page-key="login"] .login-mobile-dialog a:focus-visible,
  body[data-page-key="login"] .login-error-summary:focus-visible,
  body[data-page-key="login"] .login-error-summary button:focus-visible {
    outline: 3px solid rgba(255, 208, 0, .58);
    outline-offset: 3px;
  }

  body[data-page-key="login"] [hidden] {
    display: none;
  }

  body[data-page-key="login"] .login-desktop-fallback {
    display: none;
  }
}

@media (max-width: 374px) {
  body[data-page-key="login"] .login-auth-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-inline: 10px;
  }

  body[data-page-key="login"] .login-auth-header__brand .login-brand-lockup__text strong {
    font-size: 18px;
  }

  body[data-page-key="login"] .login-auth-header__brand .login-brand-lockup__text em {
    font-size: 13px;
  }

  body[data-page-key="login"] .login-auth-header__brand .login-brand-lockup__mark {
    width: 22px;
    height: 27px;
  }

  body[data-page-key="login"] .login-mobile-main {
    padding-inline: 12px;
  }

  body[data-page-key="login"] .login-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(110px, .92fr);
    min-height: 174px;
  }

  body[data-page-key="login"] .login-hero h1 {
    font-size: 29px;
  }

  body[data-page-key="login"] .login-hero__copy > p:last-child {
    font-size: 14px;
  }

  body[data-page-key="login"] .login-mobile-options {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  body[data-page-key="login"] .login-mobile-text-button {
    justify-self: start;
  }

  body[data-page-key="login"] .login-mobile-google {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  body[data-page-key="login"] .login-mobile-google small {
    grid-column: 2;
    margin-top: -8px;
  }
}

@media (min-width: 520px) and (max-width: 767px) {
  body[data-page-key="login"] .login-mobile-main {
    padding-inline: 24px;
  }

  body[data-page-key="login"] .login-hero {
    grid-template-columns: minmax(0, 1fr) 230px;
    min-height: 216px;
  }

  body[data-page-key="login"] .login-hero__visual img {
    max-height: 220px;
  }

  body[data-page-key="login"] .login-form-card,
  body[data-page-key="login"] .login-register-card,
  body[data-page-key="login"] .login-security-card,
  body[data-page-key="login"] .login-help-card {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (min-width: 768px) {
  body[data-page-key="login"] {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0B0B0C;
    color: #F5F5F7;
    font-family: "Noto Sans Thai", sans-serif;
  }

  body[data-page-key="login"] .login-mobile-page {
    display: none !important;
  }

  body[data-page-key="login"] .login-desktop-fallback {
    display: block;
    width: min(88%, 520px);
    padding: 32px;
    border: 1px solid #38383C;
    border-radius: 20px;
    text-align: center;
  }

  body[data-page-key="login"] .login-desktop-fallback h2 {
    margin: 0;
    font-size: 34px;
  }

  body[data-page-key="login"] .login-desktop-fallback p {
    font-size: 17px;
    line-height: 1.65;
  }

  body[data-page-key="login"] .login-desktop-fallback a {
    display: inline-block;
    margin-top: 12px;
    padding: 14px 22px;
    border-radius: 12px;
    background: #FFD000;
    color: #F5F5F7;
    text-decoration: none;
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-key="login"] .login-mobile-page *,
  body[data-page-key="login"] .login-mobile-page *::before,
  body[data-page-key="login"] .login-mobile-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* V148 — complete latest dark color cleanup: login only */
body[data-page-key="login"] {
  --ananfx-bg-primary: #0B0B0C;
  --ananfx-bg-secondary: #101011;
  --ananfx-bg-tertiary: #141415;
  --ananfx-card-primary: #1C1C1E;
  --ananfx-card-secondary: #222224;
  --ananfx-card-elevated: #28282B;
  --ananfx-card-hover: #2D2D30;
  --ananfx-card-selected: #252527;
  --ananfx-border-primary: #38383C;
  --ananfx-border-secondary: #303034;
  --ananfx-border-hover: #4A4A4F;
  --ananfx-divider: #28282B;
  --ananfx-yellow-primary: #FFD000;
  --ananfx-yellow-bright: #FFE066;
  --ananfx-yellow-dark: #D9A800;
  --ananfx-text-primary: #F5F5F7;
  --ananfx-text-secondary: #B8B8BD;
  --ananfx-text-muted: #8E8E93;
  --ananfx-text-disabled: #636366;
  --ananfx-danger: #EF5A4C;
  --ananfx-success: #42D392;
  --ananfx-info: #4EA1FF;
  --ananfx-overlay: rgba(0, 0, 0, .74);
  --ananfx-shadow: rgba(0, 0, 0, .34);
  --ananfx-focus-ring: rgba(255, 208, 0, .32);
  background-color: var(--ananfx-bg-primary);
  color: var(--ananfx-text-primary);
}

body[data-page-key="login"] :where(.login-mobile-page,.login-mobile-shell,.login-mobile-main) {
  background-color: var(--ananfx-bg-primary);
  color: var(--ananfx-text-primary);
}
body[data-page-key="login"] .login-mobile-shell {
  background-image: radial-gradient(circle at 86% 13%, rgba(255,208,0,.035), transparent 23%), linear-gradient(var(--ananfx-bg-primary), var(--ananfx-bg-primary));
}
body[data-page-key="login"] :where(.login-auth-header,.ananfx-mobile-drawer,.ananfx-mobile-drawer__header,.ananfx-mobile-drawer__scroll,.login-auth-footer) {
  background-color: var(--ananfx-bg-primary);
  border-color: var(--ananfx-divider);
  color: var(--ananfx-text-primary);
}
body[data-page-key="login"] .login-auth-header { background-color: rgba(11,11,12,.96); border-bottom-color: var(--ananfx-divider); }
body[data-page-key="login"] .login-form-card,
body[data-page-key="login"] .login-register-card,
body[data-page-key="login"] .login-security-card,
body[data-page-key="login"] .login-help-card,
body[data-page-key="login"] .login-status-notice,
body[data-page-key="login"] .login-mobile-dialog {
  background-color: var(--ananfx-card-primary);
  border-color: var(--ananfx-border-primary);
  color: var(--ananfx-text-primary);
  box-shadow: 0 10px 34px var(--ananfx-shadow);
}
body[data-page-key="login"] .login-status-notice { background-image: linear-gradient(135deg, var(--ananfx-card-secondary), var(--ananfx-card-primary)); }
body[data-page-key="login"] :where(.login-hero h1,.login-section-heading h2,.login-register-card h2,.login-security-card h2,.login-help-card h2,.login-mobile-field>label,.login-mobile-dialog__kicker,.login-mobile-dialog h2,.login-brand-lockup__text,.login-auth-footer__brand) { color: var(--ananfx-text-primary); }
body[data-page-key="login"] :where(.login-hero__copy>p:last-child,.login-status-notice p,.login-section-heading p,.login-register-card p,.login-security-card p,.login-help-card p,.login-mobile-hint,.login-form-privacy,.login-auth-footer__support,.login-mobile-dialog p) { color: var(--ananfx-text-secondary); }
body[data-page-key="login"] .login-mobile-input-wrap,
body[data-page-key="login"] .login-mobile-input-wrap input {
  background-color: var(--ananfx-card-secondary);
  border-color: var(--ananfx-border-primary);
  color: var(--ananfx-text-primary);
}
body[data-page-key="login"] .login-mobile-input-wrap input::placeholder { color: var(--ananfx-text-muted); }
body[data-page-key="login"] :where(.login-mobile-input-icon,.login-mobile-eye-open,.login-mobile-eye-closed,.login-section-heading__icon,.login-security-card__icon) { stroke: var(--ananfx-text-muted); color: var(--ananfx-text-muted); }
body[data-page-key="login"] .login-mobile-input-wrap:focus-within { border-color: var(--ananfx-yellow-primary); box-shadow: 0 0 0 3px var(--ananfx-focus-ring); }
body[data-page-key="login"] :where(.login-eyebrow,.login-auth-header__register,.login-mobile-text-button,.login-help-card__links a,.login-auth-footer a,.login-form-privacy a) { color: var(--ananfx-yellow-primary); }
body[data-page-key="login"] :where(.login-eyebrow,.login-status-notice,.login-mobile-google,.login-mobile-remember,.login-mobile-dialog__secondary,.login-mobile-dialog__tertiary) { border-color: var(--ananfx-border-primary); }
body[data-page-key="login"] :where(.login-mobile-google,.login-mobile-remember,.login-mobile-dialog__secondary,.login-mobile-dialog__tertiary) { background-color: var(--ananfx-card-secondary); color: var(--ananfx-text-primary); }
body[data-page-key="login"] :where(.login-mobile-google,.login-mobile-dialog__secondary,.login-mobile-dialog__tertiary):hover { background-color: var(--ananfx-card-hover); border-color: var(--ananfx-border-hover); }
body[data-page-key="login"] :where(.login-mobile-submit,[data-login-submit],.login-mobile-dialog__confirm) { background-color: var(--ananfx-yellow-primary); border-color: var(--ananfx-yellow-primary); color: var(--ananfx-bg-primary); }
body[data-page-key="login"] :where(.login-mobile-submit,[data-login-submit],.login-mobile-dialog__confirm):hover { background-color: var(--ananfx-yellow-bright); border-color: var(--ananfx-yellow-bright); }
body[data-page-key="login"] :where(.login-mobile-submit,[data-login-submit],.login-mobile-dialog__confirm):active { background-color: var(--ananfx-yellow-dark); border-color: var(--ananfx-yellow-dark); }
body[data-page-key="login"] :where(.login-mobile-password-toggle,.login-mobile-dialog__close,.auth-mobile-drawer-trigger) { color: var(--ananfx-text-secondary); background-color: transparent; border-color: var(--ananfx-border-secondary); }
body[data-page-key="login"] .login-mobile-divider { border-color: var(--ananfx-divider); color: var(--ananfx-text-muted); }
body[data-page-key="login"] .login-mobile-divider::before,
body[data-page-key="login"] .login-mobile-divider::after { background-color: var(--ananfx-divider); }
body[data-page-key="login"] .login-mobile-remember input { accent-color: var(--ananfx-yellow-primary); }
body[data-page-key="login"] :where(.login-mobile-error,.login-error-summary) { background-color: #281515; border-color: #6A2A2A; color: #FFB4AE; }
body[data-page-key="login"] .login-error-summary button { color: #FFB4AE; }
body[data-page-key="login"] .login-mobile-dialog-backdrop,
body[data-page-key="login"] .ananfx-mobile-drawer-overlay { background-color: var(--ananfx-overlay); }
body[data-page-key="login"] :where(.ananfx-mobile-drawer__direct,.ananfx-mobile-drawer__group-toggle,.ananfx-mobile-drawer__sub-link,.ananfx-mobile-drawer__profile-copy) { color: var(--ananfx-text-secondary); }
body[data-page-key="login"] :where(.ananfx-mobile-drawer__divider,.ananfx-mobile-drawer__submenu-inner) { border-color: var(--ananfx-divider); }
body[data-page-key="login"] :where(a,button,input):focus-visible { outline-color: var(--ananfx-yellow-primary); }
body[data-page-key="login"] .login-desktop-fallback { background-color: var(--ananfx-card-primary); border-color: var(--ananfx-border-primary); color: var(--ananfx-text-primary); }
body[data-page-key="login"] .login-desktop-fallback p { color: var(--ananfx-text-secondary); }
body[data-page-key="login"] .login-desktop-fallback a { background-color: var(--ananfx-yellow-primary); color: var(--ananfx-bg-primary); border-color: var(--ananfx-yellow-primary); }