:root {
  font-family: var(--biton-font-sans);
  color: var(--biton-color-ink);
  background: var(--biton-color-surface);
  --blue: var(--biton-color-primary);
  --blue-hover: var(--biton-color-primary-hover);
  --muted: var(--biton-color-muted);
  --line: var(--biton-color-line);
  --soft: var(--biton-color-soft);
  --dark: var(--biton-color-header);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #fff; letter-spacing: 0; }
body[data-auth-page] {
  color-scheme: only light;
  color: #0d0f12;
  background: #fff;
  --biton-color-ink: #0d0f12;
  --biton-color-muted: #5f646d;
  --biton-color-faint: #656a73;
  --biton-color-line: #e7e9ed;
  --biton-color-page: #f6f7f9;
  --biton-color-soft: #f4f4f5;
  --biton-color-surface: #fff;
}
button, input, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.auth-header { position: relative; z-index: 10; height: 58px; display: flex; align-items: center; padding: 0 24px; background: #141414; color: #fff; }
.auth-brand { display: inline-flex; align-items: center; }
.auth-brand img { width: auto; height: 30px; }
.auth-nav { display: flex; align-items: center; gap: 26px; margin-left: 30px; }
.auth-nav a { color: #f4f5f7; font-size: 13px; white-space: nowrap; }
.auth-nav a:hover { color: #66aefb; }
.auth-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.auth-languages { display: flex; gap: 2px; padding: 2px; border: 1px solid #393a3d; border-radius: 4px; }
.auth-languages button { width: 34px; height: 32px; border: 0; border-radius: 2px; background: transparent; color: #8e9095; font-size: 10px; cursor: pointer; }
.auth-languages button.is-active { background: #303134; color: #fff; }
.auth-header-link { height: 34px; display: grid; place-items: center; padding: 0 16px; border-radius: 3px; background: var(--blue); font-size: 12px; font-weight: 600; }
.auth-header-link:hover { background: var(--blue-hover); }

.auth-header--main .auth-nav { align-self: stretch; gap: 2px; margin-left: 30px; }
.auth-header--main .auth-nav a { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 11px; }
.auth-header--main .auth-nav a:hover { background: #1e1e1f; color: #fff; }
.auth-header--main .auth-nav img { width: 19px; height: 19px; flex: 0 0 19px; object-fit: contain; }
.auth-header--main .auth-header-actions { height: 100%; gap: 0; }
.auth-current-page { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #ededee; font-size: 12px; font-weight: 500; }
.auth-current-page > i { display: none; }
.auth-header--main .auth-header-link { margin: 0 2px 0 0; }
.auth-header-icon { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #dedede; font-size: 15px; cursor: pointer; }
.auth-header-icon:hover { background: #232427; color: #fff; }
.auth-language-wrap { position: relative; height: 100%; display: flex; align-items: center; }
.auth-language-menu { position: absolute; z-index: 30; top: 52px; right: 0; width: 176px; padding: 8px; border: 1px solid #303033; border-radius: 7px; background: #202022; box-shadow: 0 18px 42px rgba(0, 0, 0, .32); }
.auth-language-menu button { width: 100%; height: 42px; display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #d9d9dc; text-align: left; cursor: pointer; }
.auth-language-menu button:hover { background: #2a2a2c; }
.auth-language-menu button > span { color: #7f8289; font-size: 10px; }
.auth-language-menu button > i { visibility: hidden; color: #58a9ff; font-size: 10px; }
.auth-language-menu button.is-active > i { visibility: visible; }
.auth-menu-button { display: none; }
.auth-mobile-menu { position: absolute; z-index: 20; top: 58px; right: 0; left: 0; padding: 8px 16px 14px; border-top: 1px solid #292929; background: #141414; box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.auth-mobile-menu > a { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 6px; border-bottom: 1px solid #292929; color: #eee; font-size: 12px; }
.auth-mobile-menu > a img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; }
.auth-mobile-menu > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; }
.auth-mobile-menu > div button { height: 38px; border: 1px solid #343438; border-radius: 4px; background: transparent; color: #9b9da3; }
.auth-mobile-menu > div button.is-active { border-color: var(--blue); color: #fff; }

.auth-main { width: min(calc(100% - 48px), 1056px); min-height: calc(100vh - 58px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin: 0 auto; padding: 120px 0 80px; }
.auth-side { min-height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 54px 24px 0; border-right: 1px solid var(--line); text-align: center; }
.auth-side h2 { margin: 24px 0 0; font-size: 20px; line-height: 28px; }
.auth-side p { max-width: 370px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 21px; }
.auth-device-pair { position: relative; width: 410px; min-height: 489px; display: flex; align-items: center; justify-content: flex-start; padding-left: 42px; }
.auth-phone { position: relative; width: 220px; height: 489px; flex: 0 0 220px; overflow: hidden; border: 1px solid #d9dde3; border-radius: 31px; background: #fff; box-shadow: 0 16px 34px rgba(25, 31, 39, .11); }
.auth-phone video { width: 100%; height: 100%; display: block; border-radius: inherit; background: #fff; object-fit: contain; object-position: center; }
.auth-qr { position: absolute; z-index: 6; right: 18px; bottom: 34px; width: 144px; height: 144px; display: grid; place-items: center; padding: 11px; border: 1px solid #e2e3e6; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px rgba(25, 31, 39, .11); }
.auth-qr img { width: 122px; height: 122px; }
.auth-form-column { width: min(100%, 510px); justify-self: end; padding: 10px 0 18px 90px; }
.auth-main-register .auth-form-column { width: min(100%, 510px); padding-top: 26px; }
.auth-title-row { display: none; }
.auth-form-column h1 { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; word-break: keep-all; }
.auth-form { margin-top: 44px; }
.register-form { margin-top: 44px; }
.auth-label { display: block; margin: 0 0 9px; color: #111317; font-size: 14px; font-weight: 500; }
.auth-control { --auth-control-fill: #f4f4f5; height: 45px; display: grid; grid-template-columns: 0 minmax(0, 1fr); align-items: center; gap: 0; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: var(--auth-control-fill); color: #9b9da3; color-scheme: light; forced-color-adjust: none; isolation: isolate; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.auth-control:focus-within { --auth-control-fill: #fff; border-color: var(--blue); background: var(--auth-control-fill); box-shadow: 0 0 0 3px rgba(8, 120, 249, .08); }
.auth-control > i { width: 0; overflow: hidden; opacity: 0; }
.auth-control input, .auth-control select { width: 100%; min-width: 0; height: 43px; padding: 0; border: 0; outline: 0; background: transparent; color: #15171a; font-size: 14px; }
.auth-control input {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light !important;
  forced-color-adjust: none;
  background: var(--auth-control-fill) !important;
  background-color: var(--auth-control-fill) !important;
  color: #15171a !important;
  -webkit-text-fill-color: #15171a !important;
  caret-color: #15171a !important;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-control-fill) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-control-fill) inset !important;
  opacity: 1;
}
.auth-control input::placeholder { color: #a8abb1; -webkit-text-fill-color: #a8abb1; opacity: 1; }
.auth-control input:autofill,
.auth-control input:-webkit-autofill,
.auth-control input:-webkit-autofill:hover,
.auth-control input:-webkit-autofill:focus,
.auth-control input:-webkit-autofill:active {
  background: var(--auth-control-fill) !important;
  background-color: var(--auth-control-fill) !important;
  color: #15171a !important;
  -webkit-text-fill-color: #15171a !important;
  caret-color: #15171a !important;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-control-fill) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-control-fill) inset !important;
}
.auth-control input:-moz-autofill {
  background: var(--auth-control-fill) !important;
  color: #15171a !important;
  caret-color: #15171a !important;
  box-shadow: 0 0 0 1000px var(--auth-control-fill) inset !important;
}
.auth-control select { appearance: none; cursor: pointer; }
.auth-select-control { position: relative; grid-template-columns: 0 minmax(0, 1fr) 18px; padding-right: 12px; }
.auth-select-control::after {
  content: "";
  width: 7px;
  height: 7px;
  justify-self: center;
  border-right: 1.5px solid #6f747c;
  border-bottom: 1.5px solid #6f747c;
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}
.auth-password-control { grid-template-columns: 0 minmax(0, 1fr) 40px; padding-right: 3px; }
.auth-password-control > button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: transparent; color: #858990; cursor: pointer; }
.auth-primary { width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.auth-primary:hover { background: var(--blue-hover); }
.auth-primary:active { transform: translateY(1px); }
.auth-primary:disabled { background: #f0f0f1; color: #c8cbd0; cursor: not-allowed; transform: none; }
.auth-secondary { width: 100%; height: 42px; margin-top: 8px; border: 0; background: transparent; color: #777b83; font-size: 12px; cursor: pointer; }
.auth-forgot { display: block; width: max-content; margin: 14px 0 0 auto; color: var(--blue); font-size: 12px; }
.account-summary { width: 100%; min-height: 64px; display: flex; align-items: center; margin-bottom: 24px; padding: 10px 14px; border: 1px solid #e7e9ed; border-radius: 6px; appearance: none; -webkit-appearance: none; background: #f4f4f5 !important; color: #15171a !important; color-scheme: light; forced-color-adjust: none; -webkit-text-fill-color: #15171a; text-align: left; cursor: pointer; }
.account-summary span { min-width: 0; display: grid; gap: 4px; }
.account-summary small { color: #858990 !important; -webkit-text-fill-color: #858990; font-size: 10px; }
.account-summary strong { overflow: hidden; color: #15171a !important; -webkit-text-fill-color: #15171a; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-summary > i { margin-left: auto; color: var(--blue); }
.auth-switch { display: flex; justify-content: center; gap: 6px; margin-top: 27px; color: #111317; font-size: 14px; }
.auth-switch a { color: #111317; font-weight: 500; text-decoration: underline; }

.approval-main { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: 72px 24px; }
.approval-card { width: min(100%, 560px); text-align: center; }
.approval-mark { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: #eaf4ff; color: var(--blue); font-size: 23px; }
.approval-eyebrow { display: block; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .11em; }
.approval-card h1 { margin: 12px 0 0; color: #111317; font-size: 32px; line-height: 1.3; letter-spacing: -.025em; }
.approval-lead { max-width: 480px; margin: 14px auto 0; color: #686d76; font-size: 14px; line-height: 1.75; word-break: keep-all; }
.approval-steps { display: grid; gap: 0; margin: 36px 0 0; padding: 0; border: 1px solid #e7e9ed; border-radius: 12px; background: #fff; list-style: none; text-align: left; }
.approval-steps li { min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #eceef1; }
.approval-steps li:last-child { border-bottom: 0; }
.approval-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d8dbe0; border-radius: 50%; color: #8c9199; font-size: 12px; font-weight: 700; }
.approval-steps li > div { min-width: 0; display: grid; gap: 4px; }
.approval-steps strong { color: #202328; font-size: 14px; }
.approval-steps small { color: #7a7f87; font-size: 12px; line-height: 1.5; }
.approval-steps .is-complete > span { border-color: #b7d8fa; background: #eaf4ff; color: var(--blue); }
.approval-steps .is-current { background: #f7fbff; }
.approval-steps .is-current > span { border-color: var(--blue); background: var(--blue); color: #fff; }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.approval-actions a { min-height: 48px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; }
.approval-primary { background: var(--blue); color: #fff; }
.approval-primary:hover { background: var(--blue-hover); }
.approval-secondary { border: 1px solid #dfe2e6; background: #fff; color: #34383e; }
.approval-support { width: max-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: #71767e; font-size: 12px; }

/* Login only: keep both columns fully visible on common laptop screens. */
.auth-main-login { padding: 34px 0 28px; }
.auth-main-login .auth-side-login { min-height: 580px; padding: 18px 48px 18px 0; }
.auth-main-login .auth-device-pair { width: 424px; min-height: 511px; padding-left: 30px; }
.auth-main-login .auth-phone { width: 230px; height: 511px; flex-basis: 230px; border-radius: 32px; }
.auth-main-login .auth-qr { right: 16px; bottom: 27px; width: 128px; height: 128px; padding: 10px; border-radius: 10px; }
.auth-main-login .auth-qr img { width: 108px; height: 108px; }
.auth-main-login .auth-side h2 { margin-top: 18px; font-size: 18px; line-height: 25px; }
.auth-main-login .auth-side p { margin-top: 7px; font-size: 12px; line-height: 18px; }
.auth-main-login .auth-form-column { padding-top: 36px; }

.auth-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.auth-main-register .auth-field-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
.auth-main-register [data-register-details-stage] > label { display: block; margin-top: 17px; }
.auth-field-grid > label { min-width: 0; }
.auth-field-full { grid-column: 1 / -1; }
.auth-bank-fields { margin: 28px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--line); }
.auth-bank-fields legend { padding: 0; color: #22252a; font-size: 13px; font-weight: 700; }
.auth-bank-fields .auth-field-grid { margin-top: 18px; }
.auth-consent { min-height: 40px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 24px; cursor: pointer; }
.auth-consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auth-consent > span { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #cfd2d7; border-radius: 3px; color: transparent; font-size: 9px; }
.auth-consent input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.auth-consent input:focus-visible + span { outline: 3px solid rgba(11, 117, 229, .18); }
.auth-consent b { color: #70747b; font-size: 12px; font-weight: 400; line-height: 17px; }
.auth-form-status { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid var(--blue); background: #eef6ff; color: #155a9d; font-size: 11px; }
.auth-form-status.is-error { border-color: #d9364f; background: #fff1f3; color: #ae263d; }
.auth-form-status.auth-login-error { margin: 24px 0 0; padding: 12px 14px; border: 1px solid #efd4da; border-radius: 6px; background: #fff6f7; color: #9c293d; font-size: 13px; line-height: 1.6; letter-spacing: 0; overflow-wrap: anywhere; }
.auth-login-error + .auth-form { margin-top: 24px; }
.auth-stage-title { margin: 0 0 24px; font-size: 18px; }
.auth-side-register { position: relative; align-items: flex-start; justify-content: flex-start; overflow: hidden; padding-top: 25px; text-align: left; }
.auth-side-register > span { display: inline-flex; min-height: 32px; align-items: center; padding: 0 14px; border-radius: 16px; background: #f3f4f5; font-size: 14px; }
.auth-side-register h2 { max-width: 390px; margin-top: 18px; font-size: 31px; line-height: 42px; }
.auth-register-visual { position: relative; width: 390px; height: 310px; margin-top: 42px; }
.auth-register-phone { position: absolute; display: block; overflow: hidden; border: 4px solid #17181b; background: #fff; box-shadow: 0 8px 22px rgba(25, 31, 39, .08); }
.auth-register-phone::before { content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; background: #111216; transform: translateX(-50%); }
.auth-register-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.auth-register-phone-ios { top: 39px; left: 46px; width: 112px; height: 249px; border-radius: 20px; transform: rotate(-4deg); }
.auth-register-phone-ios::before { width: 36px; height: 10px; border-radius: 6px; }
.auth-register-phone-ios::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 16px; background: linear-gradient(#17181b, #17181b) center calc(100% - 5px) / 30px 3px no-repeat, #fff; }
.auth-register-phone-android { top: 0; left: 174px; width: 136px; height: 302px; border-radius: 21px; transform: rotate(3deg); }
.auth-register-phone-android::before { width: 6px; height: 6px; border-radius: 50%; }

@media (max-width: 1080px) {
  .auth-nav { gap: 20px; margin-left: 25px; }
  .auth-main { width: min(calc(100% - 48px), 900px); }
  .auth-side { padding-right: 34px; }
  .auth-form-column { padding-left: 62px; }
  .auth-device-pair { width: 390px; min-height: 453px; padding-left: 32px; }
  .auth-phone { width: 204px; height: 453px; flex-basis: 204px; }
  .auth-qr { right: 18px; bottom: 32px; width: 140px; height: 140px; }
  .auth-qr img { width: 118px; height: 118px; }
  .auth-register-visual { width: 345px; }
  .auth-main-login .auth-side-login { padding-right: 30px; }
  .auth-main-login .auth-form-column { padding: 36px 0 18px 56px; }
  .auth-main-login .auth-device-pair { width: 390px; min-height: 467px; padding-left: 24px; }
  .auth-main-login .auth-phone { width: 210px; height: 467px; flex-basis: 210px; }
  .auth-main-login .auth-qr { right: 10px; bottom: 25px; width: 124px; height: 124px; }
  .auth-main-login .auth-qr img { width: 104px; height: 104px; }
}

@media (max-width: 800px) {
  .auth-nav { display: none; }
  .auth-main { width: 100%; min-height: calc(100vh - 58px); display: block; padding: 112px 24px 64px; }
  .auth-side { display: none; }
  .auth-main-login { display: flex; flex-direction: column; }
  .auth-main-login .auth-form-column { order: 1; }
  .auth-main-login .auth-side-login { width: min(100%, 520px); min-height: 0; display: flex; order: 2; margin: 72px auto 0; padding: 52px 0 0; border-top: 1px solid var(--line); border-right: 0; }
  .auth-form-column, .auth-main-register .auth-form-column { width: min(100%, 520px); margin: 0 auto; padding: 0; }
  .auth-main-login .auth-form-column { padding: 0; }
  .auth-form-column h1 { font-size: 36px; line-height: 44px; }
  .auth-form { margin-top: 42px; }
}

@media (max-width: 800px) {
  .auth-header--main .auth-current-page { width: 34px; justify-content: center; padding: 0; font-size: 14px; }
  .auth-header--main .auth-current-page > i { display: inline-block; }
  .auth-header--main .auth-current-page > span { display: none; }
  .auth-header--main .auth-header-download, .auth-header--main .auth-language-wrap { display: none; }
  .auth-header--main .auth-menu-button { display: grid; }
}

@media (max-width: 560px) {
  .auth-header { height: 58px; padding: 0 16px; }
  .auth-brand img { height: 30px; }
  .auth-header-actions { gap: 8px; }
  .auth-header--main .auth-header-actions { gap: 0; }
  .auth-languages button { width: 34px; }
  .auth-header-link { height: 34px; padding: 0 12px; font-size: 11px; }
  .auth-main { padding: 86px 24px 48px; }
  .auth-main-login { padding-top: 86px; }
  .auth-device-pair { width: 310px; min-height: 329px; padding-left: 24px; }
  .auth-phone { width: 148px; height: 329px; flex-basis: 148px; border-radius: 22px; }
  .auth-qr { right: 28px; bottom: 22px; width: 128px; height: 128px; padding: 10px; border-radius: 10px; }
  .auth-qr img { width: 108px; height: 108px; }
  .auth-main-login .auth-device-pair { width: min(100%, 340px); min-height: 382px; padding-left: 10px; }
  .auth-main-login .auth-phone { width: 184px; height: 409px; flex-basis: 184px; border-radius: 26px; }
  .auth-main-login .auth-qr { right: 8px; bottom: 20px; width: 122px; height: 122px; padding: 9px; border-radius: 10px; }
  .auth-main-login .auth-qr img { width: 104px; height: 104px; }
  .auth-side h2 { margin-top: 28px; font-size: 17px; line-height: 24px; }
  .auth-side p { max-width: 300px; font-size: 12px; line-height: 18px; }
  .auth-form-column h1 { font-size: 36px; line-height: 44px; }
  .auth-form { margin-top: 42px; }
  .auth-field-grid { grid-template-columns: 1fr; gap: 17px; }
  .auth-field-full { grid-column: auto; }
  .auth-primary { margin-top: 40px; }
  .auth-switch { margin-top: 27px; }
  .approval-main { align-items: start; padding: 62px 24px 48px; }
  .approval-card h1 { font-size: 27px; }
  .approval-lead { font-size: 13px; }
  .approval-steps { margin-top: 30px; }
  .approval-steps li { min-height: 78px; padding: 14px 16px; }
  .approval-actions { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .auth-header { padding: 0 12px; }
  .auth-header-actions { gap: 6px; }
  .auth-languages button { width: 36px; }
  .auth-header-link { padding: 0 10px; }
  .auth-main { padding-right: 20px; padding-left: 20px; }
  .auth-form-column h1 { font-size: 32px; line-height: 40px; }
  .auth-device-pair { width: 266px; min-height: 276px; padding-left: 8px; }
  .auth-phone { width: 124px; height: 276px; flex-basis: 124px; border-radius: 19px; }
  .auth-qr { right: 28px; bottom: 18px; width: 116px; height: 116px; padding: 9px; }
  .auth-qr img { width: 98px; height: 98px; }
  .auth-main-login .auth-device-pair { width: 266px; min-height: 329px; padding-left: 8px; }
  .auth-main-login .auth-phone { width: 148px; height: 329px; flex-basis: 148px; border-radius: 22px; }
  .auth-main-login .auth-qr { right: 4px; bottom: 18px; width: 112px; height: 112px; padding: 7px; }
  .auth-main-login .auth-qr img { width: 98px; height: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Verification controls must not inherit the icon-only zero-width grid track. */
[data-registration-email]{display:grid;gap:10px;margin:18px 0 22px;min-width:0}
.registration-code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.auth-form .registration-code-heading>label{margin:0;font-size:14px;font-weight:500;line-height:1.5}
[data-registration-email] .auth-secondary{margin:0;width:auto;min-width:0;border-radius:6px;font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
[data-registration-email] .registration-code-heading .auth-secondary{height:36px;padding:6px 12px;border:1px solid #dce1e8;background:transparent;color:#365d86;white-space:nowrap}
.registration-code-entry{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:10px;align-items:stretch}
[data-registration-email] .registration-code-entry .auth-control{grid-template-columns:minmax(0,1fr);height:46px;box-sizing:border-box}
[data-registration-email] .registration-code-entry input{height:44px;letter-spacing:.18em;font-variant-numeric:tabular-nums}
[data-registration-email] .registration-code-entry .auth-secondary{height:46px;padding:0 12px;border:1px solid #365d86;background:#365d86;color:white}
[data-registration-email] .auth-secondary:hover:not(:disabled){filter:brightness(.94)}
[data-registration-email] .auth-secondary:disabled{cursor:default;opacity:.55}
[data-registration-email] .auth-secondary:focus-visible{outline:2px solid #365d86;outline-offset:3px}
[data-registration-email] [data-email-status]{margin:0;line-height:1.6;font-size:12px}[data-registration-email] [data-email-status]:empty{display:none}
:root[data-theme=dark] [data-registration-email] .registration-code-heading .auth-secondary{border-color:#3a4656;color:#a8c8e9}
@media(max-width:480px){.registration-code-entry{grid-template-columns:minmax(0,1fr) 84px}.registration-code-heading{gap:8px}[data-registration-email] .registration-code-heading .auth-secondary{font-size:12px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){[data-registration-email] .auth-secondary{transition:none}}

/* Signup: compact field rhythm and directly selectable birth year/month/day. */
.auth-main-register{padding-top:64px;padding-bottom:48px;column-gap:40px}
.auth-main-register .auth-form-column{padding:16px 0 0 32px}
.auth-main-register .auth-form-column h1{font-size:32px;line-height:1.3;letter-spacing:-.025em}
.auth-main-register .register-form{margin-top:28px}
.auth-main-register .auth-field-grid{gap:16px}
.auth-main-register .auth-label{font-size:13px;margin-bottom:8px}
.auth-main-register .auth-control{border-radius:6px;height:46px}
.auth-main-register .auth-control:focus-within{border-color:#365d86;box-shadow:0 0 0 3px #365d8610}
.auth-main-register .auth-stage-title{font-size:17px;margin:22px 0 18px}
.auth-main-register .auth-bank-fields{margin:20px 0;padding:18px 0 0;border:0;border-top:1px solid #e7e9ed}
.auth-main-register .auth-bank-fields legend{font-size:13px;font-weight:600;padding:0 10px 0 0}
.auth-main-register .auth-primary{border-radius:6px;background:#365d86;min-height:46px;font-size:14px}
.auth-main-register .auth-primary:hover:not(:disabled){background:#294c72}
.register-birthday{border:0;padding:0;margin:0;min-width:0}.register-birthday legend{padding:0}
.register-birthday-fields{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.register-birthday-fields label{display:grid;gap:6px;min-width:0;margin:0}.register-birthday-fields label>span{font-size:12px;color:#626b78}
.register-birthday-fields select{width:100%;min-width:0;height:46px;padding:0 10px;border:1px solid #dce1e8;border-radius:6px;color:#252b34;background:#fff;font:400 14px Pretendard,system-ui,sans-serif;font-variant-numeric:tabular-nums;color-scheme:light}
.register-birthday-fields select:focus-visible{outline:2px solid #365d86;outline-offset:2px}
@media(max-width:900px){.auth-main-register{padding-top:32px;column-gap:24px}.auth-main-register .auth-form-column{padding-left:0}}
@media(max-width:600px){.auth-main-register{padding-top:28px;padding-bottom:32px}.auth-main-register .auth-form-column h1{font-size:28px}.auth-main-register .register-form{margin-top:24px}.register-birthday-fields{gap:8px}.register-birthday-fields select{padding-inline:8px}}

/* Shared member authentication theme: fields and typography follow the page theme. */
:root[data-theme=dark] body[data-auth-page]{color-scheme:dark;color:#e5eaf0;background:#10171f;--biton-color-ink:#e5eaf0;--biton-color-muted:#a4afbd;--biton-color-faint:#95a2b2;--biton-color-line:#303b49;--biton-color-page:#10171f;--biton-color-soft:#1b2531;--biton-color-surface:#10171f;--muted:#a4afbd;--line:#303b49;--soft:#1b2531}
:root[data-theme=dark] .auth-main :is(h1,h2,.auth-label,.registration-code-heading>label,.auth-stage-title){color:#e5eaf0}
:root[data-theme=dark] .auth-control{--auth-control-fill:#1b2531;border-color:#303b49;color:#a4afbd;color-scheme:dark}
:root[data-theme=dark] .auth-control:focus-within{--auth-control-fill:#202d3b;border-color:#75afe7;box-shadow:0 0 0 3px #75afe718}
:root[data-theme=dark] .auth-control input,:root[data-theme=dark] .auth-control input:autofill,:root[data-theme=dark] .auth-control input:-webkit-autofill{color:#e5eaf0!important;-webkit-text-fill-color:#e5eaf0!important;caret-color:#e5eaf0!important;color-scheme:dark!important}
:root[data-theme=dark] .auth-control input::placeholder{color:#95a2b2!important;-webkit-text-fill-color:#95a2b2!important}
:root[data-theme=dark] .auth-control select{color:#e5eaf0;background:#1b2531;color-scheme:dark}
:root[data-theme=dark] .auth-main :is(.auth-secondary,.auth-password-control>button,.auth-consent b,.auth-switch,.auth-side p){color:#a4afbd}
:root[data-theme=dark] .auth-switch a,:root[data-theme=dark] .auth-forgot{color:#8ec4ff}
:root[data-theme=dark] .account-summary{background:#1b2531!important;border-color:#303b49;color:#e5eaf0!important;-webkit-text-fill-color:#e5eaf0;color-scheme:dark}
:root[data-theme=dark] .account-summary strong{color:#e5eaf0!important;-webkit-text-fill-color:#e5eaf0!important}
:root[data-theme=dark] .account-summary small{color:#a4afbd!important;-webkit-text-fill-color:#a4afbd!important}
:root[data-theme=dark] .auth-consent>span{border-color:#6e7e91;background:#1b2531}
:root[data-theme=dark] .auth-consent input:checked+span{background:#365d86;border-color:#75afe7;color:#fff}
.auth-main .auth-primary:disabled{background:#e6e9ee;color:#707986;cursor:not-allowed}
:root[data-theme=dark] .auth-main .auth-primary:disabled{background:#263240;color:#8a97a8}
:root[data-theme=dark] .auth-main .auth-bank-fields{border-color:#303b49}
:root[data-theme=dark] .register-birthday-fields label>span{color:#a4afbd}
:root[data-theme=dark] .auth-main-register .signup-select :is(.ts-control,.ts-dropdown,.dropdown-input){background:#1b2531;color:#e5eaf0;border-color:#354353}
:root[data-theme=dark] .auth-main-register .signup-select .ts-control input{color:#e5eaf0;-webkit-text-fill-color:#e5eaf0}
:root[data-theme=dark] .auth-main-register .signup-select .ts-dropdown :is(.active,.selected){background:#2a4056;color:#dcecff}
:root[data-theme=dark] .auth-main-register .signup-select .no-results{color:#a4afbd}
:root[data-theme=dark] .auth-form-status.is-error,:root[data-theme=dark] .rg-field-error{color:#ff9fae;background:transparent}
.auth-google-form{margin-top:24px}.auth-google-button{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border:1px solid #747775;border-radius:6px;background:#fff;color:#1f1f1f;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.auth-google-button img{width:20px;height:20px;background:#fff;border-radius:50%;flex:0 0 20px}.auth-google-button:hover{background:#f5f6f7}.auth-google-button:focus-visible{outline:2px solid #75afe7;outline-offset:3px}
:root[data-theme=dark] .auth-google-button{background:#131314;color:#e3e3e3;border-color:#8e918f}:root[data-theme=dark] .auth-google-button:hover{background:#222326}

.auth-google-callback{width:min(420px,calc(100% - 40px));margin:18vh auto;text-align:center}.auth-google-callback>img{width:36px;height:36px;margin:0 auto 24px;background:#fff;border-radius:50%}.auth-google-callback h1{font-size:24px}.auth-google-callback p{font-size:14px;line-height:1.7;margin:20px 0 28px}

/* Exchange login research: clear form hierarchy and restrained supporting art. */
body[data-auth-page] .auth-main{width:min(calc(100% - 80px),1100px);grid-template-columns:minmax(0,1fr) 420px;column-gap:120px;align-items:start;padding:76px 0 64px;min-height:calc(100dvh - 64px)}
body[data-auth-page] .auth-side{min-height:490px;border:0;padding:0;justify-content:center}
body[data-auth-page] .auth-side .site-presentation-media{max-width:360px;margin:0 auto 26px}
body[data-auth-page] .auth-side .site-presentation-art{height:350px;max-height:350px;object-fit:contain}
body[data-auth-page] .auth-side h2{font-size:23px;line-height:1.45;font-weight:600;letter-spacing:-.035em;margin:0}
body[data-auth-page] .auth-side p{font-size:14px;line-height:1.7;max-width:340px;margin-top:10px}
body[data-auth-page] .auth-form-column{width:100%;padding:20px 0 0;justify-self:stretch}
body[data-auth-page] .auth-form-column h1{font-size:34px;line-height:1.3;letter-spacing:-.035em;font-weight:650}
body[data-auth-page] .auth-form{margin-top:32px}
body[data-auth-page] .auth-control{height:50px;border-radius:7px;border-color:var(--line)}
body[data-auth-page] .auth-control input{height:48px;font-size:15px}
body[data-auth-page] .auth-primary{min-height:48px;border-radius:7px;font-size:15px;font-weight:600}
body[data-auth-page] .auth-google-button{min-height:48px;border-radius:7px;gap:12px}
body[data-auth-page] .auth-google-form{margin-top:0}
.auth-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;margin:24px 0 18px}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}
body[data-auth-page] .auth-switch{margin-top:24px}
@media(min-width:1700px){body[data-auth-page] .auth-main{padding-top:104px;column-gap:150px;width:min(calc(100% - 100px),1160px)}body[data-auth-page] .auth-side .site-presentation-media{max-width:410px}body[data-auth-page] .auth-side .site-presentation-art{height:400px;max-height:400px}}
@media(max-width:1000px){body[data-auth-page] .auth-main{column-gap:48px;width:calc(100% - 64px);grid-template-columns:minmax(0,1fr) minmax(0,420px)}body[data-auth-page] .auth-side h2{font-size:20px}}
@media(max-width:800px){body[data-auth-page] .auth-main{display:block;width:min(calc(100% - 40px),460px);padding:32px 0 48px;min-height:calc(100dvh - 64px)}body[data-auth-page] .auth-side{display:none}body[data-auth-page] .auth-form-column{padding:0}body[data-auth-page] .auth-form-column h1{font-size:30px}body[data-auth-page] .auth-form{margin-top:28px}}
@media(prefers-reduced-motion:no-preference){body[data-auth-page] .auth-form-column{animation:auth-form-reveal .26s ease-out both}body[data-auth-page] .auth-side{animation:auth-art-reveal .42s ease-out both}@keyframes auth-form-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes auth-art-reveal{from{opacity:0}to{opacity:1}}}

body[data-auth-page] [data-registration-email] .registration-code-entry .auth-control,body[data-auth-page] [data-registration-email] .registration-code-entry .auth-secondary{height:50px}
body[data-auth-page] [data-registration-email] .registration-code-entry input{height:48px}

.auth-google-availability{font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0 0;text-align:center}

/* Member translations keep password actions inside the existing input grid. */
:root[data-member-shell]:not(:lang(ko)):not(:lang(en)) .auth-main .auth-password-control { grid-template-columns: 0 minmax(0, 1fr) max-content; }
:root[data-member-shell]:not(:lang(ko)):not(:lang(en)) .auth-main .auth-password-control > button { width: auto; min-width: 42px; padding-inline: 10px; white-space: nowrap; }

/* Mobile web password actions retain the existing accessible labels and handler. */
.auth-password-eye { display: none; }
@media (max-width: 768px) {
  :root[data-member-shell] body[data-auth-page] .auth-main .auth-password-control:has(> button > .auth-password-eye) { grid-template-columns: 0 minmax(0, 1fr) 44px; }
  :root[data-member-shell] body[data-auth-page] .auth-main .auth-password-control > button:has(> .auth-password-eye) { width: 44px; min-width: 44px; height: 44px; padding: 0; color: currentColor; }
  .auth-password-control > button:has(> .auth-password-eye) > span { display: none; }
  .auth-password-control > button > .auth-password-eye { display: block; width: 20px; height: 20px; }
  .auth-password-eye-slash { display: none; }
  .auth-password-control > input[type="text"] ~ button .auth-password-eye-slash { display: block; }
  .auth-password-control > button:has(> .auth-password-eye):focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 4px; }
}

/* Balance short member mobile web headings without altering canonical wording/type. */
@media(max-width:768px){
 body:has([data-mobile-menu-web]) .auth-form-column > h1{text-wrap:balance}
}

@media(max-width:768px){
 body:lang(th):has([data-mobile-menu-web]) .auth-form-column > h1{word-break:normal}
}