:root {
  --account-ink: #20342e;
  --account-muted: #788781;
  --account-line: #dfe7e4;
  --account-soft: #f4f7f5;
  --account-accent: #16846f;
  --account-accent-dark: #0f6456;
  --account-cyan: #43b9c8;
}

.account-page {
  min-height: 100svh;
  color: var(--account-ink);
  background: #eef3f1;
  background-image: radial-gradient(circle at 11% 12%, rgba(67, 185, 200, .1), transparent 25rem), radial-gradient(circle at 90% 84%, rgba(213, 183, 112, .13), transparent 23rem);
}
.account-page__main { height: 100svh; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; padding: 18px 20px; }
.account-page__container { width: min(100%, 620px); margin: 0 auto; }
.account-standalone-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.account-back, .account-standalone-label { color: #60736d; font: 800 11px var(--font-display); }
.account-back { display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; }
.account-back span { color: var(--account-cyan); font-size: 18px; transition: transform .2s ease; }
.account-back:hover { color: var(--account-accent-dark); }
.account-back:hover span { transform: translateX(3px); }
.account-brand { display: inline-flex; align-items: center; justify-content: center; }
.account-brand img { display: block; width: 142px; height: auto; }
.account-card { padding: clamp(24px, 5vw, 44px); border: 1px solid rgba(207, 220, 216, .9); border-radius: 26px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 70px rgba(43, 72, 64, .12); }
.account-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-card__logo { display: block; width: 116px; height: auto; object-fit: contain; }
.account-card__eyebrow { color: var(--account-accent); font: 800 11px var(--font-display); }
.account-card__mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #bce2dd; border-radius: 12px; color: var(--account-accent-dark); background: #e9f5f3; font: 900 17px var(--font-display); }
.account-card h1 { margin: 28px 0 8px; color: var(--account-ink); font: 900 clamp(31px, 5vw, 46px)/1.3 var(--font-display); }
.account-card__lead { max-width: 420px; margin: 0; color: var(--account-muted); font-size: 12px; line-height: 2; }
.account-register-progress { display: flex; align-items: center; gap: 8px; margin: 22px 0 -8px; direction: rtl; }
.account-register-progress span { color: #a1afa9; font: 800 9px var(--font-display); transition: color .2s ease; }
.account-register-progress span.is-active { color: var(--account-accent); }
.account-register-progress i { height: 1px; flex: 1; background: var(--account-line); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 28px 0 22px; padding: 4px; border: 1px solid var(--account-line); border-radius: 13px; background: var(--account-soft); }
.account-tabs a { display: grid; min-height: 42px; place-items: center; border-radius: 9px; color: #879790; font: 800 11px var(--font-display); transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.account-tabs a:hover, .account-tabs a.is-active { color: #fff; background: var(--account-accent); box-shadow: 0 7px 14px rgba(22, 132, 111, .18); }
.account-form { display: grid; gap: 15px; }
.account-form section[hidden] { display: none; }
.account-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-step-head span { color: var(--account-accent); font: 800 9px var(--font-display); }
.account-step-head strong { color: var(--account-ink); font: 900 16px var(--font-display); }
.account-step-copy { margin: -3px 0 2px; color: var(--account-muted); font-size: 11px; line-height: 1.8; }
.account-otp-phone { display: grid; gap: 5px; margin: -2px 0 12px; color: var(--account-muted); font: 700 10px/1.8 var(--font-display); }
.account-otp-phone strong { direction: ltr; color: var(--account-ink); font-size: 15px; letter-spacing: .05em; }
.account-otp-digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; direction: ltr; }
.account-otp-digits input { height: 56px !important; padding: 0 !important; text-align: center; border-radius: 13px !important; color: var(--account-accent-dark) !important; font: 900 22px var(--font-display) !important; }
.account-otp-digits.is-verifying input { border-color: #43b9c8 !important; animation: otp-pulse .8s ease-in-out infinite alternate; }
.account-otp-digits.is-valid input { border-color: #78dc39 !important; color: #278f48 !important; background: #f0fae9 !important; animation: otp-success .52s ease both; }
.account-otp-digits.is-valid input:nth-child(2) { animation-delay: .05s; }
.account-otp-digits.is-valid input:nth-child(3) { animation-delay: .1s; }
.account-otp-digits.is-valid input:nth-child(4) { animation-delay: .15s; }
.account-otp-digits.is-valid input:nth-child(5) { animation-delay: .2s; }
.account-otp-timer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--account-muted); font: 700 9px var(--font-display); }
.account-otp-timer strong { min-width: 46px; padding: 5px 8px; border-radius: 999px; color: var(--account-accent-dark); background: #e8f5f0; direction: ltr; font: 900 11px var(--font-display); }
.account-step-back { display: block; width: max-content; margin: -4px auto 0; padding: 3px 7px; border: 0; color: var(--account-muted); background: transparent; cursor: pointer; font: 800 9px var(--font-display); }
.account-step-back:hover { color: var(--account-accent); }
.account-tabs.is-hidden-otp { display: none; }
.account-terms-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-terms-link { padding: 2px 0; border: 0; color: var(--account-accent); background: transparent; cursor: pointer; font: 800 9px var(--font-display); white-space: nowrap; }
.account-terms-link:hover { color: var(--account-accent-dark); text-decoration: underline; }
.account-terms-dialog { width: min(430px, calc(100vw - 32px)); padding: 28px; border: 1px solid #d9e7e2; border-radius: 22px; color: var(--account-ink); background: #fff; box-shadow: 0 24px 80px rgba(16, 47, 39, .23); }
.account-terms-dialog::backdrop { background: rgba(18, 38, 32, .45); backdrop-filter: blur(5px); }
.account-terms-dialog h2 { margin: 9px 0 10px; font: 900 22px var(--font-display); }
.account-terms-dialog p:not(.account-card__eyebrow) { color: var(--account-muted); font-size: 11px; line-height: 2; }
.account-terms-dialog .account-submit { margin-top: 18px; }
.account-terms-close { position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; border: 1px solid #d9e7e2; border-radius: 9px; color: var(--account-muted); background: #f7faf8; cursor: pointer; font-size: 20px; line-height: 1; }
@keyframes otp-pulse { from { box-shadow: 0 0 0 0 rgba(67, 185, 200, .05); transform: translateY(0); } to { box-shadow: 0 0 0 5px rgba(67, 185, 200, .15); transform: translateY(-2px); } }
@keyframes otp-success { from { transform: scale(.88); opacity: .55; } to { transform: scale(1); opacity: 1; } }
.account-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-form label:not(.account-check) { display: grid; gap: 6px; }
.account-form label > span { color: #60736d; font: 800 10px var(--font-display); }
.account-form input:not([type="checkbox"]), .account-form select { width: 100%; height: 49px; padding: 0 13px; border: 1px solid var(--account-line); border-radius: 11px; outline: 0; color: var(--account-ink); background: #fcfdfd; font: 600 11px var(--font-text); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.account-captcha { display: grid; grid-template-columns: minmax(0, 1fr) 108px; align-items: end; gap: 10px; }
.account-captcha output { display: grid; height: 49px; place-items: center; border: 1px dashed #b9d6d1; border-radius: 11px; color: var(--account-accent-dark); background: #f0f8f6; direction: rtl; font: 900 13px var(--font-display); }
.account-login-otp[hidden], .account-login-password[hidden] { display: none; }
.account-otp-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: end; gap: 10px; }
.account-otp-send { height: 49px; border: 1px solid #b9d6d1; border-radius: 11px; color: var(--account-accent-dark); background: #eef8f6; cursor: pointer; font: 800 10px var(--font-display); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.account-otp-send:hover { border-color: var(--account-cyan); background: #e4f4f1; transform: translateY(-1px); }
.account-otp-send:disabled { opacity: .65; cursor: wait; transform: none; }
.account-login-mode { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 12px 0 0; padding: 0 14px; border: 1px solid #b9d6d1; border-radius: 12px; color: var(--account-accent-dark); background: #eef8f6; cursor: pointer; font: 800 10px var(--font-display); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.account-login-mode:hover { border-color: var(--account-cyan); background: #e4f4f1; box-shadow: 0 7px 14px rgba(22, 132, 111, .1); transform: translateY(-1px); }
.account-otp-hint { margin: 7px 0 0; color: var(--account-accent); font: 700 9px/1.8 var(--font-display); }
.account-form input::placeholder { color: #a8b4af; }
.account-form input:focus, .account-form select:focus { border-color: var(--account-cyan); background: #fff; box-shadow: 0 0 0 4px rgba(67, 185, 200, .12); }
.account-form__options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -2px; }
.account-form__options > a, .account-terms { color: var(--account-accent); font: 700 9px var(--font-display); }
.account-check { display: inline-flex; align-items: center; gap: 7px; color: var(--account-muted); font: 700 9px var(--font-display); }
.account-check input { width: 15px; height: 15px; accent-color: var(--account-accent); }
.account-form label.account-terms-check { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; color: var(--account-muted); font: 700 9px var(--font-display); }
.account-form .account-terms-check span { color: inherit; font: inherit; }
.account-terms-check input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--account-accent); }
.account-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 5px; padding: 0 17px 0 13px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(100deg, var(--account-accent-dark), var(--account-accent)); box-shadow: 0 12px 24px rgba(22, 132, 111, .16); cursor: pointer; font: 900 12px var(--font-display); transition: transform .2s ease, box-shadow .2s ease; }
.account-submit span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--account-accent-dark); background: #e7f3ef; font-size: 18px; }
.account-submit:hover { box-shadow: 0 16px 30px rgba(22, 132, 111, .23); transform: translateY(-2px); }
.account-submit:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.account-terms { margin: 13px 0 0; color: var(--account-muted); line-height: 1.8; }
.account-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 13px; color: #a0ada5; font: 700 9px var(--font-display); }
.account-divider::before, .account-divider::after { height: 1px; flex: 1; background: var(--account-line); content: ''; }
.account-guest { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--account-line); border-radius: 11px; color: var(--account-accent-dark); background: #fff; font: 800 10px var(--font-display); transition: background .2s ease, border-color .2s ease; }
.account-guest:hover { border-color: #9cd8d1; background: #f0f8f6; }
.account-demo-status { margin: 16px 0 0; padding: 10px 12px; border: 1px dashed #a9d4ce; border-radius: 10px; color: var(--account-accent-dark); background: #eff8f6; font-size: 10px; line-height: 1.8; }
.account-demo-status[data-state="error"] { border-color: #e2b7b1; color: #a04940; background: #fff4f2; }

[data-theme="dark"] .account-page { color: #ecf6f2; background: #182522; background-image: radial-gradient(circle at 12% 10%, rgba(67, 185, 200, .1), transparent 24rem), radial-gradient(circle at 90% 80%, rgba(213, 183, 112, .08), transparent 22rem); }
[data-theme="dark"] .account-back, [data-theme="dark"] .account-standalone-label { color: #aec2bc; }
[data-theme="dark"] .account-back:hover { color: #d8eee8; }
[data-theme="dark"] .account-card { border-color: #40534e; background: #25332f; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
[data-theme="dark"] .account-card__eyebrow { color: #8bd8cc; }
[data-theme="dark"] .account-card__mark { border-color: #4b7770; color: #b9e9df; background: #314943; }
[data-theme="dark"] .account-card h1 { color: #f2faf7; }
[data-theme="dark"] .account-card__lead, [data-theme="dark"] .account-form label > span, [data-theme="dark"] .account-check { color: #b3c6bf; }
[data-theme="dark"] .account-register-progress span { color: #758d84; }
[data-theme="dark"] .account-register-progress span.is-active { color: #9ee0d3; }
[data-theme="dark"] .account-register-progress i { background: #40534e; }
[data-theme="dark"] .account-tabs { border-color: #40534e; background: #202e2a; }
[data-theme="dark"] .account-tabs a { color: #adc2ba; }
[data-theme="dark"] .account-tabs a:hover, [data-theme="dark"] .account-tabs a.is-active { color: #fff; background: #278e7b; }
[data-theme="dark"] .account-form input:not([type="checkbox"]), [data-theme="dark"] .account-form select { border-color: #40534e; color: #eef8f4; background: #202e2a; }
[data-theme="dark"] .account-form input:focus, [data-theme="dark"] .account-form select:focus { background: #293a35; }
[data-theme="dark"] .account-form__options > a, [data-theme="dark"] .account-terms { color: #9ee0d3; }
[data-theme="dark"] .account-divider::before, [data-theme="dark"] .account-divider::after { background: #40534e; }
[data-theme="dark"] .account-guest { border-color: #40534e; color: #bce7de; background: #293a35; }
[data-theme="dark"] .account-guest:hover { background: #314943; }
[data-theme="dark"] .account-demo-status { border-color: #4e8278; color: #bce7de; background: #293a35; }
[data-theme="dark"] .account-otp-send { border-color: #4e8278; color: #c5eee5; background: #293a35; }
[data-theme="dark"] .account-otp-send:hover { background: #314943; }
[data-theme="dark"] .account-login-mode { border-color: #4e8278; color: #c5eee5; background: #293a35; }
[data-theme="dark"] .account-login-mode:hover { background: #314943; }
[data-theme="dark"] .account-otp-hint { color: #9ee0d3; }
[data-theme="dark"] .account-demo-status[data-state="error"] { border-color: #83534d; color: #f0b4ac; background: #3a2927; }
[data-theme="dark"] .account-step-head strong { color: #f2faf7; }
[data-theme="dark"] .account-step-head span, [data-theme="dark"] .account-step-back { color: #9ee0d3; }
[data-theme="dark"] .account-otp-digits input { color: #c5eee5 !important; }
[data-theme="dark"] .account-otp-phone strong { color: #eef8f4; }
[data-theme="dark"] .account-otp-timer strong { color: #c5eee5; background: #294b42; }
[data-theme="dark"] .account-terms-link { color: #9ee0d3; }
[data-theme="dark"] .account-terms-dialog { border-color: #405c54; color: #eef8f4; background: #25332f; }
[data-theme="dark"] .account-terms-dialog p:not(.account-card__eyebrow) { color: #b3c6bf; }
[data-theme="dark"] .account-terms-close { border-color: #405c54; color: #b3c6bf; background: #293a35; }

@media (max-width: 560px) {
  .account-page__main { padding: 12px; }
  .account-standalone-header { justify-content: center; margin-bottom: 10px; }
  .account-brand img { width: 124px; }
  .account-card__logo { width: 94px; }
  .account-standalone-label { display: none; }
  .account-card { padding: 18px 16px 19px; border-radius: 20px; }
  .account-card h1 { margin: 16px 0 5px; font-size: 31px; }
  .account-card__lead { line-height: 1.7; }
  .account-tabs { margin: 16px 0 14px; }
  .account-register-progress { margin: 13px 0 -4px; gap: 6px; }
  .account-form { gap: 10px; }
  .account-form input:not([type="checkbox"]), .account-form select { height: 43px; }
  .account-captcha { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
  .account-captcha output { height: 43px; font-size: 11px; }
  .account-otp-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
  .account-otp-send { height: 43px; font-size: 9px; }
  .account-step-head { margin-bottom: 10px; }
  .account-step-head strong { font-size: 14px; }
  .account-otp-digits { gap: 6px; }
  .account-otp-digits input { height: 48px !important; font-size: 19px !important; }
  .account-submit { min-height: 44px; }
  .account-divider { margin: 12px 0 8px; }
  .account-guest { min-height: 40px; }
  .account-form__grid { grid-template-columns: 1fr; gap: 15px; }
}

/* Refined account experience: calm paper surface, clear steps and one strong action. */
.account-page {
  position: relative;
  isolation: isolate;
  height: 100svh;
  overflow: hidden;
  background-color: #f5f8f6;
  background-image: linear-gradient(rgba(22, 132, 111, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 132, 111, .025) 1px, transparent 1px), radial-gradient(circle at 8% 10%, rgba(67, 185, 200, .13), transparent 24rem), radial-gradient(circle at 92% 88%, rgba(155, 228, 62, .12), transparent 25rem);
  background-size: 30px 30px, 30px 30px, auto, auto;
}
.account-page::before,
.account-page::after { position: absolute; z-index: -1; display: block; border: 1px solid rgba(22, 132, 111, .08); border-radius: 50%; content: ''; pointer-events: none; }
.account-page::before { width: 420px; height: 420px; top: -220px; right: -160px; }
.account-page::after { width: 300px; height: 300px; bottom: -170px; left: -120px; }
.account-page__main { padding: 16px; }
.account-page__container { width: min(100%, 650px); }
.account-card { position: relative; padding: 30px clamp(24px, 5vw, 48px) 26px; border: 1px solid rgba(211, 225, 220, .95); border-radius: 30px; background: rgba(255, 255, 255, .9); box-shadow: 0 30px 90px rgba(26, 68, 57, .13), 0 2px 0 rgba(255, 255, 255, .95) inset; backdrop-filter: blur(12px); }
.account-card__top { justify-content: center; }
.account-card__logo { width: 112px; }
.account-card h1 { margin: 18px 0 5px; text-align: center; letter-spacing: -.02em; }
.account-card__lead { max-width: 450px; margin-inline: auto; text-align: center; line-height: 1.85; }
.account-register-progress { max-width: 360px; margin: 18px auto -3px; }
.account-tabs { max-width: 360px; margin: 20px auto 18px; }
.account-form { gap: 0; }
.account-form > section:not([hidden]) { padding: 20px; border: 1px solid #e4ece8; border-radius: 19px; background: rgba(248, 251, 249, .92); box-shadow: 0 10px 24px rgba(40, 87, 74, .045) inset; animation: account-step-in .28s ease both; }
.account-step-head { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #e4ece8; }
.account-step-head span { padding: 5px 9px; border-radius: 999px; background: #e7f5f0; font-size: 8px; }
.account-step-head strong { font-size: 17px; }
.account-form label > span { font-size: 10px; }
.account-form input:not([type="checkbox"]), .account-form select { height: 52px; border-color: #d9e6e1; border-radius: 13px; background: #fff; }
.account-form input:not([type="checkbox"]):hover { border-color: #b9d8d0; }
.account-captcha { margin-top: 2px; }
.account-captcha output { height: 52px; border-style: solid; border-color: #c5e5dc; background: linear-gradient(145deg, #edf9f5, #f7fbf9); }
.account-otp-digits { gap: 10px; margin: 12px 0 16px; }
.account-otp-digits input { height: 62px !important; border: 1px solid #cfe2dc !important; background: #fff !important; box-shadow: 0 5px 12px rgba(23, 89, 73, .06); }
.account-otp-digits input:focus { border-color: var(--account-cyan) !important; box-shadow: 0 0 0 4px rgba(67, 185, 200, .14), 0 5px 12px rgba(23, 89, 73, .06) !important; }
.account-submit { min-height: 52px; margin-top: 16px; border-radius: 14px; background: linear-gradient(110deg, #0d705d 0%, #16846f 62%, #2aa286 100%); box-shadow: 0 14px 26px rgba(22, 132, 111, .18); }
.account-submit span { width: 29px; height: 29px; border-radius: 9px; }
.account-step-back { margin-top: 9px; }
.account-guest { max-width: 360px; margin: 16px auto 0; background: rgba(255, 255, 255, .78); }
.account-demo-status { max-width: 500px; margin: 14px auto 0; text-align: center; }
@keyframes account-step-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

[data-theme="dark"] .account-page { background-color: #172521; background-image: linear-gradient(rgba(158, 224, 211, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(158, 224, 211, .025) 1px, transparent 1px), radial-gradient(circle at 10% 10%, rgba(67, 185, 200, .12), transparent 24rem), radial-gradient(circle at 90% 88%, rgba(155, 228, 62, .08), transparent 25rem); }
[data-theme="dark"] .account-card { border-color: #3c554e; background: rgba(35, 49, 45, .94); }
[data-theme="dark"] .account-form > section:not([hidden]) { border-color: #3c554e; background: rgba(31, 45, 41, .86); }
[data-theme="dark"] .account-step-head { border-color: #3c554e; }
[data-theme="dark"] .account-step-head span { background: #294c43; }
[data-theme="dark"] .account-form input:not([type="checkbox"]), [data-theme="dark"] .account-form select { border-color: #405c54; background: #263832; }
[data-theme="dark"] .account-captcha output { border-color: #477b6d; background: #294b42; }
[data-theme="dark"] .account-otp-digits input { border-color: #477064 !important; background: #263832 !important; }

@media (max-width: 560px) {
  .account-page__main { padding: 10px; }
  .account-card { padding: 20px 14px 16px; border-radius: 24px; }
  .account-card { max-height: calc(100svh - 20px); overflow: hidden; }
  .account-card__logo { width: 96px; }
  .account-card h1 { margin-top: 12px; font-size: 28px; }
  .account-card__lead { font-size: 10px; }
  .account-tabs { margin-top: 14px; margin-bottom: 12px; }
  .account-form > section:not([hidden]) { padding: 15px 13px; border-radius: 16px; }
  .account-step-head { margin-bottom: 12px; padding-bottom: 10px; }
  .account-step-head strong { font-size: 14px; }
  .account-form input:not([type="checkbox"]), .account-form select, .account-captcha output { height: 46px; }
  .account-otp-digits { gap: 6px; margin: 8px 0 12px; }
  .account-otp-digits input { height: 52px !important; font-size: 20px !important; }
  .account-otp-phone { margin-bottom: 8px; }
  .account-otp-phone strong { font-size: 13px; }
  .account-otp-timer { margin-top: 8px; }
  .account-terms-line { align-items: flex-start; }
  .account-submit { min-height: 47px; margin-top: 12px; }
}

@media (max-height: 720px) {
  .account-page__main { padding-block: 8px; }
  .account-card { padding-block: 16px 14px; }
  .account-card__logo { width: 88px; }
  .account-card h1 { margin-top: 9px; font-size: 27px; }
  .account-card__lead { line-height: 1.55; }
  .account-register-progress { margin-top: 11px; }
  .account-tabs { margin-block: 11px 10px; }
  .account-form > section:not([hidden]) { padding: 12px; }
  .account-step-head { margin-bottom: 8px; padding-bottom: 8px; }
  .account-form input:not([type="checkbox"]), .account-form select, .account-captcha output { height: 42px; }
  .account-otp-digits input { height: 46px !important; }
  .account-submit { min-height: 42px; margin-top: 9px; }
  .account-guest { min-height: 36px; margin-top: 9px; }
}

/* OTP is intentionally a quieter, single-purpose screen. */
.account-page.is-otp-stage .account-page__container { width: min(100%, 520px); }
.account-page.is-otp-stage .account-card { padding: 28px clamp(22px, 5vw, 42px) 24px; }
.account-page.is-otp-stage .account-card__logo { width: 100px; }
.account-page.is-otp-stage .account-card h1 { margin-top: 14px; font-size: clamp(28px, 4vw, 36px); }
.account-page.is-otp-stage .account-card__lead { font-size: 11px; }
.account-page.is-otp-stage .account-register-progress { display: none; }
.account-page.is-otp-stage .account-form > section:not([hidden]) { padding: 22px 20px 18px; border-color: #dbe9e4; background: rgba(250, 252, 251, .96); box-shadow: 0 16px 30px rgba(22, 83, 68, .06); }
.account-page.is-otp-stage .account-step-head { display: block; margin-bottom: 18px; padding-bottom: 14px; text-align: center; }
.account-page.is-otp-stage .account-step-head span { display: inline-block; margin-bottom: 9px; }
.account-page.is-otp-stage .account-step-head strong { display: block; font-size: 18px; }
.account-page.is-otp-stage .account-otp-phone { justify-items: center; margin: 0 0 17px; text-align: center; }
.account-page.is-otp-stage .account-otp-phone strong { font-size: 16px; }
.account-page.is-otp-stage .account-otp-digits { gap: 11px; margin: 0 0 15px; }
.account-page.is-otp-stage .account-otp-digits input { height: 64px !important; border-radius: 15px !important; font-size: 24px !important; }
.account-page.is-otp-stage .account-otp-timer { margin-top: 14px; }
.account-page.is-otp-stage .account-step-back { margin-top: 13px; font-size: 10px; }
.account-page.is-otp-stage .account-guest { margin-top: 12px; }

[data-theme="dark"] .account-page.is-otp-stage .account-form > section:not([hidden]) { border-color: #3e5a52; background: rgba(31, 45, 41, .96); box-shadow: 0 16px 30px rgba(0, 0, 0, .16); }

@media (max-width: 560px) {
  .account-page.is-otp-stage .account-card { padding: 18px 12px 14px; }
  .account-page.is-otp-stage .account-card__logo { width: 88px; }
  .account-page.is-otp-stage .account-card h1 { margin-top: 10px; font-size: 27px; }
  .account-page.is-otp-stage .account-card__lead { font-size: 10px; }
  .account-page.is-otp-stage .account-form > section:not([hidden]) { padding: 16px 12px 13px; }
  .account-page.is-otp-stage .account-step-head { margin-bottom: 14px; padding-bottom: 11px; }
  .account-page.is-otp-stage .account-step-head strong { font-size: 15px; }
  .account-page.is-otp-stage .account-otp-phone { margin-bottom: 12px; }
  .account-page.is-otp-stage .account-otp-phone strong { font-size: 13px; }
  .account-page.is-otp-stage .account-otp-digits { gap: 6px; }
  .account-page.is-otp-stage .account-otp-digits input { height: 54px !important; font-size: 20px !important; }
}

/* Profile completion is also a dedicated step, without the account switcher. */
.account-page.is-profile-stage .account-page__container { width: min(100%, 560px); }
.account-page.is-profile-stage .account-card { padding: 26px clamp(22px, 5vw, 40px) 22px; }
.account-page.is-profile-stage .account-card__logo { width: 96px; }
.account-page.is-profile-stage .account-card h1 { margin-top: 13px; font-size: clamp(28px, 4vw, 36px); }
.account-page.is-profile-stage .account-card__lead { font-size: 11px; }
.account-page.is-profile-stage .account-form > section:not([hidden]) { padding: 21px 20px 18px; border-color: #dbe9e4; background: rgba(250, 252, 251, .96); box-shadow: 0 16px 30px rgba(22, 83, 68, .06); }
.account-page.is-profile-stage .account-step-head { margin-bottom: 17px; padding-bottom: 13px; }
.account-page.is-profile-stage .account-form__grid { gap: 14px; }
.account-page.is-profile-stage .account-form label > span { margin-right: 2px; }
.account-page.is-profile-stage .account-terms-line { margin-top: 3px; padding: 10px 11px; border: 1px solid #e1ece8; border-radius: 12px; background: #f4f9f6; }
.account-page.is-profile-stage .account-submit { margin-top: 15px; }
.account-page.is-profile-stage .account-guest { margin-top: 12px; }
[data-theme="dark"] .account-page.is-profile-stage .account-form > section:not([hidden]) { border-color: #3e5a52; background: rgba(31, 45, 41, .96); box-shadow: 0 16px 30px rgba(0, 0, 0, .16); }
[data-theme="dark"] .account-page.is-profile-stage .account-terms-line { border-color: #3e5a52; background: #293a35; }

@media (max-width: 560px) {
  .account-page.is-profile-stage .account-card { padding: 18px 12px 14px; }
  .account-page.is-profile-stage .account-card__logo { width: 88px; }
  .account-page.is-profile-stage .account-card h1 { margin-top: 10px; font-size: 27px; }
  .account-page.is-profile-stage .account-form > section:not([hidden]) { padding: 16px 12px 13px; }
  .account-page.is-profile-stage .account-step-head { margin-bottom: 12px; padding-bottom: 10px; }
  .account-page.is-profile-stage .account-step-head strong { font-size: 15px; }
  .account-page.is-profile-stage .account-terms-line { align-items: flex-start; padding: 8px 9px; }
  .account-page.is-profile-stage .account-submit { margin-top: 11px; }
}

/* Registration profile fields: location and activity are explicit, compact and readable. */
.account-form textarea {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--account-line);
  border-radius: 13px;
  outline: 0;
  resize: none;
  color: var(--account-ink);
  background: #fff;
  font: 600 11px/1.7 var(--font-text);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.account-form textarea:focus { border-color: var(--account-cyan); box-shadow: 0 0 0 4px rgba(67, 185, 200, .12); }
.account-form label > span small { color: var(--account-muted); font: 700 8px var(--font-display); }
.account-account-type { margin: 14px 0 0; padding: 0; border: 0; }
.account-account-type legend { margin-bottom: 8px; padding: 0; color: #60736d; font: 800 10px var(--font-display); }
.account-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-type-option { position: relative; display: grid !important; gap: 3px !important; min-height: 58px; padding: 9px 8px; box-sizing: border-box; border: 1px solid #d9e6e1; border-radius: 12px; color: var(--account-ink); background: #fff; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.account-type-option:hover { border-color: #9cd8d1; transform: translateY(-1px); }
.account-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-type-option input:checked + span { color: var(--account-accent-dark); }
.account-type-option:has(input:checked) { border-color: #83d63d; background: #f0f9e9; box-shadow: 0 7px 15px rgba(116, 190, 59, .12); }
.account-type-option span { color: var(--account-ink); font: 900 10px var(--font-display) !important; }
.account-type-option small { color: var(--account-muted); font: 700 8px var(--font-display); }
[data-theme="dark"] .account-form textarea { border-color: #405c54; color: #eef8f4; background: #263832; }
[data-theme="dark"] .account-account-type legend { color: #b3c6bf; }
[data-theme="dark"] .account-type-option { border-color: #405c54; color: #eef8f4; background: #263832; }
[data-theme="dark"] .account-type-option span { color: #eef8f4; }
[data-theme="dark"] .account-type-option:has(input:checked) { border-color: #7fcf46; background: #294b42; }
[data-theme="dark"] .account-type-option input:checked + span { color: #b8f189; }

@media (max-width: 560px) {
  .account-page.is-profile-stage .account-form__grid { gap: 9px; }
  .account-page.is-profile-stage .account-form textarea { min-height: 50px; padding-block: 7px; }
  .account-page.is-profile-stage .account-account-type { margin-top: 9px; }
  .account-page.is-profile-stage .account-type-options { gap: 5px; }
  .account-page.is-profile-stage .account-type-option { min-height: 50px; padding: 7px 5px; }
  .account-page.is-profile-stage .account-type-option span { font-size: 9px !important; }
  .account-page.is-profile-stage .account-type-option small { font-size: 7px; }
}

/* Mobile profile step: keep the page fixed while making every field reachable inside the card. */
@media (max-width: 560px) {
  .account-page.is-profile-stage .account-page__main { align-items: flex-start; padding: 8px; }
  .account-page.is-profile-stage .account-card { max-height: calc(100svh - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9fd8cd transparent; }
  .account-page.is-profile-stage .account-card__logo { width: 76px; }
  .account-page.is-profile-stage .account-card h1 { margin-top: 7px; font-size: 26px; }
  .account-page.is-profile-stage .account-card__lead { max-width: 310px; font-size: 10px; line-height: 1.6; }
  .account-page.is-profile-stage .account-register-progress { margin-top: 9px; }
  .account-page.is-profile-stage .account-form > section:not([hidden]) { padding: 12px 10px 11px; }
  .account-page.is-profile-stage .account-step-head { margin-bottom: 9px; padding-bottom: 8px; }
  .account-page.is-profile-stage .account-step-head strong { font-size: 15px; }
  .account-page.is-profile-stage .account-form label { gap: 4px; }
  .account-page.is-profile-stage .account-form label > span, .account-page.is-profile-stage .account-account-type legend { font-size: 10px; }
  .account-page.is-profile-stage .account-form input:not([type="checkbox"]), .account-page.is-profile-stage .account-form select { height: 40px; padding-inline: 10px; border-radius: 10px; font-size: 11px; }
  .account-page.is-profile-stage .account-form textarea { min-height: 44px; padding: 6px 10px; border-radius: 10px; font-size: 11px; }
  .account-page.is-profile-stage .account-account-type { margin-top: 7px; }
  .account-page.is-profile-stage .account-account-type legend { margin-bottom: 5px; }
  .account-page.is-profile-stage .account-type-options { gap: 4px; }
  .account-page.is-profile-stage .account-type-option { min-height: 45px; padding: 6px 4px; border-radius: 10px; }
  .account-page.is-profile-stage .account-type-option span { font-size: 9px !important; }
  .account-page.is-profile-stage .account-type-option small { font-size: 7px; }
  .account-page.is-profile-stage .account-terms-line { margin-top: 6px; padding: 6px 7px; gap: 6px; border-radius: 9px; }
  .account-page.is-profile-stage .account-form .account-terms-check { gap: 5px; font-size: 9px; }
  .account-page.is-profile-stage .account-terms-link { font-size: 9px; }
  .account-page.is-profile-stage .account-submit { min-height: 42px; margin-top: 8px; border-radius: 11px; font-size: 11px; }
  .account-page.is-profile-stage .account-guest { min-height: 36px; margin-top: 8px; font-size: 10px; }
}

/* Password replacement for SMS login: five clear, auto-advancing code cells. */
.account-login-otp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.account-login-otp__head > span { color: #60736d; font: 800 10px var(--font-display); }
.account-login-otp-digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; direction: ltr; }
.account-login-otp-digits input { width: 100%; height: 52px; box-sizing: border-box; padding: 0; text-align: center; border: 1px solid var(--account-line); border-radius: 12px; outline: 0; color: var(--account-accent-dark); background: #fcfdfd; font: 900 20px var(--font-display); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease; }
.account-login-otp-digits input:focus { border-color: var(--account-cyan); background: #fff; box-shadow: 0 0 0 4px rgba(67, 185, 200, .12); transform: translateY(-1px); }
.account-login-otp-digits.is-verifying input { border-color: var(--account-cyan); animation: otp-pulse .8s ease-in-out infinite alternate; }
.account-login-otp-digits.is-valid input { border-color: #78dc39; color: #278f48; background: #f0fae9; animation: otp-success .52s ease both; }
.account-login-otp-digits.is-valid input:nth-child(2) { animation-delay: .05s; }
.account-login-otp-digits.is-valid input:nth-child(3) { animation-delay: .1s; }
.account-login-otp-digits.is-valid input:nth-child(4) { animation-delay: .15s; }
.account-login-otp-digits.is-valid input:nth-child(5) { animation-delay: .2s; }
.account-login-otp-timer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; color: var(--account-muted); font: 700 9px var(--font-display); }
.account-login-otp-timer strong { min-width: 42px; padding: 4px 7px; border-radius: 999px; color: var(--account-accent-dark); background: #e8f5f0; direction: ltr; font: 900 10px var(--font-display); }
.account-login-otp-resend { display: flex; align-items: center; justify-content: center; width: min(100%, 180px); min-height: 40px; height: 40px; margin: 11px auto 0; padding: 0 18px; border: 1px solid #8bcfc2; border-radius: 12px; color: var(--account-accent-dark); background: linear-gradient(135deg, #f5fcfa 0%, #e5f6f1 100%); box-shadow: 0 7px 16px rgba(22, 132, 111, .1), 0 1px 0 rgba(255, 255, 255, .85) inset; cursor: pointer; font: 900 10px/1 var(--font-display); text-align: center; text-indent: 0; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.account-login-otp-resend:hover { border-color: var(--account-accent); color: #0c5a4d; background: linear-gradient(135deg, #e9faf5 0%, #d5f0e8 100%); box-shadow: 0 10px 22px rgba(22, 132, 111, .17); transform: translateY(-2px); }
.account-login-otp-resend:focus-visible { outline: 3px solid rgba(67, 185, 200, .25); outline-offset: 3px; }
.account-login-otp-resend:disabled { opacity: .58; cursor: wait; transform: none; box-shadow: none; }
.account-login-otp .account-otp-hint { margin-top: 7px; text-align: center; }
[data-theme="dark"] .account-login-otp__head > span { color: #b3c6bf; }
[data-theme="dark"] .account-login-otp-digits input { border-color: #405c54; color: #c5eee5; background: #263832; }
[data-theme="dark"] .account-login-otp-digits input:focus { background: #293a35; }
[data-theme="dark"] .account-login-otp-timer strong { color: #c5eee5; background: #294b42; }
[data-theme="dark"] .account-login-otp-resend { border-color: #5c9f91; color: #c5eee5; background: linear-gradient(135deg, #294b42, #233b35); box-shadow: 0 7px 16px rgba(0, 0, 0, .16); }
[data-theme="dark"] .account-login-otp-resend:hover { border-color: #8bd8cc; color: #effff9; background: linear-gradient(135deg, #31594f, #294b42); }
@media (max-width: 560px) {
  .account-login-otp__head > span { font-size: 9px; }
  .account-login-otp-digits { gap: 6px; }
  .account-login-otp-digits input { height: 47px; border-radius: 11px; font-size: 18px; }
}

/* ===================================================================
   Readability + layout pass. Prefixed with :root body.account-page so it
   wins over the step-specific rules above without touching them.
   - Text sizes for farmers on phones; fields at 16px so iOS doesn't zoom.
   - Page scrolls normally (no clipped sign-up step on short screens).
   - Desktop: brand photo panel beside the form.
   - Contrast fixes in light (placeholders, tabs, steps) and dark (captcha).
   =================================================================== */
/* One fixed frame for login and every sign-up step: same size, fits the
   screen, the page itself never scrolls. --auth-h is the card height. Only
   on very short screens does the card's own content scroll, as a fallback. */
:root body.account-page { --auth-h: min(100svh - 32px, 720px); height: 100svh; overflow: hidden; }
:root body.account-page .account-page__main { height: 100svh; min-height: 0; overflow: hidden; align-items: center; }
:root body.account-page .account-page__container { width: min(100%, 560px); }
:root body.account-page .account-card { display: flex; flex-direction: column; justify-content: safe center; height: var(--auth-h); max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a9d9cf transparent; }
:root body.account-page .account-card > * { flex-shrink: 0; }

/* Profile step (the longest): no repeated step heading, fields in two columns. */
:root body.account-page.is-profile-stage .account-card__lead,
:root body.account-page.is-profile-stage [data-register-step="profile"] .account-step-head { display: none; }
:root body.account-page [data-register-step="profile"]:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
:root body.account-page [data-register-step="profile"] > * { grid-column: 1 / -1; margin-top: 0 !important; }
:root body.account-page [data-register-step="profile"] > .account-form__grid { display: contents; }
:root body.account-page [data-register-step="profile"] > .account-form__grid > label { grid-column: auto; }
:root body.account-page [data-register-step="profile"] > label:has(textarea) { grid-column: 1; order: 1; }
:root body.account-page [data-register-step="profile"] > label:has(input[type="password"]) { grid-column: 2; order: 1; }
:root body.account-page [data-register-step="profile"] > .account-account-type { order: 2; margin: 0; }
:root body.account-page [data-register-step="profile"] > .account-terms-line { order: 3; }
:root body.account-page [data-register-step="profile"] > .account-submit { order: 4; }
:root body.account-page [data-register-step="profile"] textarea { height: 50px; min-height: 50px; padding-block: 13px; overflow: hidden; resize: none; white-space: nowrap; }
:root body.account-page [data-register-step="profile"] .account-type-option { min-height: 54px; }
/* Breathing room between field groups (labels no longer touch the field above). */
:root body.account-page .account-form > section > * + *:not([hidden]),
:root body.account-page .account-login-form > * + *:not([hidden]) { margin-top: 14px; }
:root body.account-page .account-form > section > .account-step-head + * { margin-top: 0; }
:root body.account-page .account-form label:not(.account-check):not(.account-type-option):not(.account-terms-check) { gap: 7px; }
:root body.account-page .account-card__logo { width: 128px; }

:root body.account-page .account-card__lead { font-size: 13.5px; line-height: 1.8; color: #5f716b; }
:root body.account-page .account-register-progress span { color: #6f817a; font-size: 12px; }
:root body.account-page .account-register-progress span.is-active { color: var(--account-accent); }
:root body.account-page .account-tabs a { color: #4f655e; font-size: 14px; }
:root body.account-page .account-tabs a.is-active, :root body.account-page .account-tabs a:hover { color: #fff; }
:root body.account-page .account-step-head span { font-size: 11px; }
:root body.account-page .account-form label > span,
:root body.account-page .account-account-type legend,
:root body.account-page .account-login-otp__head > span { color: #4f645d; font-size: 13px; }
:root body.account-page .account-form label > span small { font-size: 11px; }
:root body.account-page .account-form input:not([type="checkbox"]),
:root body.account-page .account-form select,
:root body.account-page .account-form textarea { height: 50px; font-size: 16px; }
:root body.account-page .account-form textarea { height: auto; min-height: 64px; }
:root body.account-page .account-form input::placeholder,
:root body.account-page .account-form textarea::placeholder { color: #84948d; }
:root body.account-page .account-captcha { grid-template-columns: minmax(0, 1fr) 112px; }
:root body.account-page .account-captcha output { height: 50px; font-size: 16px; }
:root body.account-page .account-form__options,
:root body.account-page .account-form__options a,
:root body.account-page .account-check span { font-size: 12.5px; }
:root body.account-page .account-submit { min-height: 52px; font-size: 15px; }
:root body.account-page .account-login-mode { font-size: 13.5px; }
:root body.account-page .account-guest { font-size: 13px; }
:root body.account-page .account-type-option span { font-size: 13px !important; }
:root body.account-page .account-type-option small { font-size: 11px; }
:root body.account-page .account-type-option { min-height: 60px; }
:root body.account-page .account-form .account-terms-check,
:root body.account-page .account-terms-link { font-size: 12.5px; }
:root body.account-page .account-otp-timer, :root body.account-page .account-login-otp-timer { font-size: 12px; }
:root body.account-page .account-otp-timer strong, :root body.account-page .account-login-otp-timer strong { font-size: 13px; }
:root body.account-page .account-step-back, :root body.account-page .account-login-otp-resend { font-size: 13px; }
:root body.account-page .account-otp-hint, :root body.account-page .account-otp-phone span, :root body.account-page .account-demo-status { font-size: 12.5px; }

/* Dark mode: same sizes, light-on-dark colours. */
[data-theme="dark"] body.account-page .account-card__lead { color: #a9bcb5; }
[data-theme="dark"] body.account-page .account-register-progress span { color: #8fa59d; }
[data-theme="dark"] body.account-page .account-register-progress span.is-active { color: #8fe0c9; }
[data-theme="dark"] body.account-page .account-tabs a { color: #a9bcb5; }
[data-theme="dark"] body.account-page .account-tabs a.is-active { color: #fff; }
[data-theme="dark"] body.account-page .account-form label > span,
[data-theme="dark"] body.account-page .account-account-type legend,
[data-theme="dark"] body.account-page .account-login-otp__head > span { color: #b8cbc4; }
[data-theme="dark"] body.account-page .account-form input::placeholder,
[data-theme="dark"] body.account-page .account-form textarea::placeholder { color: #85a097; }
[data-theme="dark"] body.account-page .account-form input:not([type="checkbox"]),
[data-theme="dark"] body.account-page .account-form select { color: #eef8f4; }
[data-theme="dark"] body.account-page .account-captcha output { color: #c9f5dd; border-color: #5d9384; background: #294b42; }

/* Phones: comfortable tap targets everywhere, including the profile step. */
@media (max-width: 560px) {
  :root body.account-page { --auth-h: calc(100svh - 20px); }
  :root body.account-page .account-page__main { align-items: center; padding: 10px; }
  :root body.account-page .account-card { padding: 22px 16px 18px; }
  :root body.account-page .account-card__logo { width: 108px; }
  :root body.account-page .account-form input:not([type="checkbox"]),
  :root body.account-page .account-form select { height: 48px; padding-inline: 12px; }
  :root body.account-page .account-captcha { grid-template-columns: minmax(0, 1fr) 96px; }
  :root body.account-page .account-captcha output { height: 48px; }
  :root body.account-page .account-type-option { min-height: 56px; padding: 8px 6px; }
  :root body.account-page .account-form__options { flex-wrap: wrap; gap: 8px; }
  :root body.account-page .account-submit { min-height: 50px; font-size: 15px; }
  :root body.account-page .account-guest { min-height: 44px; }
}

/* Shorter screens: tighten vertical rhythm so every step fits the frame. */
@media (max-height: 900px) {
  :root body.account-page .account-card { padding-block: 20px 16px; }
  :root body.account-page .account-card__logo { width: 104px; }
  :root body.account-page .account-card h1 { margin: 8px 0 4px; font-size: clamp(26px, 3.2vw, 34px); }
  :root body.account-page .account-card__lead { line-height: 1.6; }
  :root body.account-page .account-register-progress { margin: 10px auto 0; }
  :root body.account-page .account-tabs { margin: 12px auto 12px; }
  :root body.account-page .account-tabs a { min-height: 38px; }
  :root body.account-page .account-form > section:not([hidden]) { padding: 14px 16px; }
  :root body.account-page .account-step-head { margin-bottom: 10px; padding-bottom: 9px; }
  :root body.account-page .account-form > section > * + *:not([hidden]),
  :root body.account-page .account-login-form > * + *:not([hidden]) { margin-top: 10px; }
  :root body.account-page .account-form label:not(.account-check):not(.account-type-option):not(.account-terms-check) { gap: 5px; }
  :root body.account-page .account-form input:not([type="checkbox"]),
  :root body.account-page .account-form select,
  :root body.account-page .account-captcha output { height: 46px; }
  :root body.account-page [data-register-step="profile"] textarea { height: 46px; min-height: 46px; padding-block: 11px; }
  :root body.account-page [data-register-step="profile"]:not([hidden]) { gap: 10px 12px; }
  :root body.account-page [data-register-step="profile"] .account-type-option { min-height: 48px; padding-block: 6px; }
  :root body.account-page .account-submit { min-height: 48px; }
  :root body.account-page .account-login-mode { min-height: 42px; }
  :root body.account-page .account-guest { min-height: 40px; margin-top: 10px; }
}
@media (max-height: 740px) {
  :root body.account-page .account-card__lead { display: none; }
  :root body.account-page .account-card__logo { width: 92px; }
  :root body.account-page .account-card h1 { font-size: 26px; }
  :root body.account-page .account-form input:not([type="checkbox"]),
  :root body.account-page .account-form select,
  :root body.account-page .account-captcha output { height: 44px; }
  :root body.account-page .account-form label > span { font-size: 12.5px; }
  :root body.account-page [data-register-step="profile"] .account-terms-line { padding-block: 6px; }
  :root body.account-page [data-register-step="profile"] .account-type-option small { display: none; }
  :root body.account-page [data-register-step="profile"] .account-type-option { min-height: 42px; place-items: center; }
  :root body.account-page .account-register-progress { margin-top: 6px; }
  :root body.account-page .account-guest { min-height: 38px; margin-top: 8px; }
}

/* Tall screens: the frame can grow so the roomy (uncompressed) layout fits. */
@media (min-height: 901px) {
  :root body.account-page { --auth-h: min(100svh - 32px, 820px); }
}

/* Desktop: brand photo panel joined to the form card. */
.account-visual { display: none; }
@media (min-width: 1000px) {
  :root body.account-page .account-page__container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100% - 48px, 1120px); height: var(--auth-h); }
  :root body.account-page .account-card { border-radius: 0 30px 30px 0; }
  .account-visual { position: relative; display: flex; overflow: hidden; align-items: flex-end; height: var(--auth-h); border-radius: 30px 0 0 30px; background: #0b3a2a; box-shadow: 0 30px 90px rgba(26, 68, 57, .16); order: 2; }
  .account-visual__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .account-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 38, 26, .05) 20%, rgba(4, 38, 26, .55) 55%, rgba(4, 38, 26, .92) 100%); content: ''; }
  .account-visual__copy { position: relative; z-index: 1; display: grid; gap: 16px; padding: 40px 40px 44px; color: #fff; }
  .account-visual__logo { width: 132px; height: auto; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); }
  .account-visual__slogan { margin: 0; font: 900 clamp(28px, 2.6vw, 38px)/1.35 var(--font-display); }
  .account-visual__slogan em { font-style: normal; color: #b6f27c; }
  .account-visual ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .account-visual li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .88); font: 700 14.5px var(--font-display); }
  .account-visual li svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: #b6f27c; background: rgba(255, 255, 255, .12); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}