.account-layout { display: grid; grid-template-columns: 1.08fr 1fr; padding-block: 52px 72px; min-height: calc(100vh - 190px); align-items: stretch; }
.account-scene { position: relative; isolation: isolate; overflow: hidden; border-radius: 8px 0 0 8px; background: #e9e6df; min-height: 650px; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; z-index: -2; }
.account-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #fcf9f2f5 0%, #fcf9f2c9 29%, #f9f4ed00 56%, #fcf9f2f5 100%); }
.scene-copy { padding: 42px 42px 0; max-width: 460px; }
.account-eyebrow { color: var(--accent, #912c40); font-size: 11px; font-weight: 600; letter-spacing: .18em; margin: 0 0 18px; }
.scene-copy h1 { font-family: 'Roboto Slab', serif; font-weight: 500; font-size: clamp(28px, 2.65vw, 38px); line-height: 1.24; color: #403448; margin: 0 0 18px; }
.scene-copy > p:last-child { font-size: 15px; line-height: 1.75; max-width: 330px; }
.scene-note { position: absolute; inset-inline: 32px; bottom: 24px; display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.6; color: #59515e; }
.scene-note img { width: 85px; height: 78px; object-fit: contain; }
.account-content { padding: 40px 48px; border: 1px solid #e9e6eb; border-inline-start: 0; border-radius: 0 8px 8px 0; background: #fff; min-width: 0; }
.account-content h2 { font: 500 28px/1.3 'Roboto Slab', serif; color: #403448; margin: 0 0 12px; }
.account-intro { color: #77707d; font-size: 14px; line-height: 1.75; margin: 0 0 27px; }
.account-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form-field { display: grid; gap: 7px; font-size: 13px; font-weight: 500; }
.form-field input { width: 100%; min-width: 0; height: 46px; padding: 10px 12px; border: 1px solid #dcd7df; border-radius: 3px; background: #fff; color: #36333e; font: 400 15px 'Golos Text', sans-serif; }
.form-field input:focus { outline: 2px solid #912c4040; outline-offset: 1px; border-color: #912c40; }
.field-hint { font-size: 11px; font-weight: 400; line-height: 1.65; color: #85818a; margin: 0; }
.password-wrap { display: flex; align-items: center; border: 1px solid #dcd7df; border-radius: 3px; }
.password-wrap:focus-within { outline: 2px solid #912c4040; outline-offset: 1px; border-color: #912c40; }
.password-wrap input { border: 0; }
.password-wrap input:focus { outline: none; }
.password-wrap button { border: 0; background: none; font: inherit; font-size: 11px; color: #912c40; padding: 12px 10px; cursor: pointer; }
.account-submit { width: 100%; min-height: 52px; margin-top: 4px; justify-content: center; font: 500 16px 'Golos Text', sans-serif; }
.account-submit:disabled { opacity: .55; cursor: wait; }
.account-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; font-size: 12px; }
.account-content a, .account-text-button { color: #912c40; text-underline-offset: 3px; }
.account-switch { border-top: 1px solid #e9e6eb; padding-top: 23px; margin-top: 26px; font-size: 13px; color: #77707d; display: flex; flex-wrap: wrap; gap: 8px; }
.account-switch a { font-weight: 500; }
.account-status { font-size: 13px; line-height: 1.7; color: #403448; margin: 24px 0 0; }
.account-status:empty { display: none; }
.account-status.error { color: #912c40; }
.account-status.success { border-inline-start: 3px solid #6e8e66; padding-inline-start: 14px; }
.account-captcha { min-height: 78px; overflow: hidden; }
.account-details { margin: 0 0 28px; display: grid; gap: 16px; }
.account-details dt { font-size: 11px; color: #85818a; margin-bottom: 5px; }
.account-details dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.email-badge { display: inline-block; font-size: 11px; color: #527448; background: #f1f5ed; border-radius: 3px; padding: 4px 8px; margin-top: 7px; }
.login-history { list-style: none; padding: 0; margin: 18px 0 26px; }
.login-history li { padding: 12px 0; border-top: 1px solid #e9e6eb; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 12px; }
.login-history small { grid-column: 1 / -1; color: #85818a; overflow-wrap: anywhere; font-size: 10px; }
.account-content h3 { font: 500 18px 'Roboto Slab', serif; color: #403448; }
.account-text-button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
html[dir='rtl'] .account-scene { border-radius: 0 8px 8px 0; }
html[dir='rtl'] .account-content { border-radius: 8px 0 0 8px; }
@media(max-width: 1024px) { .account-layout { grid-template-columns: .85fr 1fr; } .account-content { padding: 34px 28px; } .scene-copy { padding: 36px 26px 0; } }
@media(max-width: 768px) { .account-layout { display: block; max-width: 560px; padding-block: 30px 45px; } .account-scene { display: none; } .account-content, html[dir='rtl'] .account-content { border: 1px solid #e9e6eb; border-radius: 4px; padding: 32px 28px; } }
@media(max-width: 360px) { .account-content, html[dir='rtl'] .account-content { padding: 26px 14px; } .account-captcha { width: 100%; min-height: 70px; } .account-captcha > div { transform: scale(.86); transform-origin: top left; } html[dir='rtl'] .account-captcha > div { transform-origin: top right; } .account-content h2 { font-size: 25px; } }
@media(prefers-reduced-motion: reduce) { .account-page * { scroll-behavior: auto; } }
.account-remember { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.account-remember input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: #702b4d; }