.auth-page { position: relative; min-height: calc(100vh - 78px); padding: 42px 0 78px; overflow: hidden; background: linear-gradient(145deg, #faf8f9 0%, #f5f7fa 55%, #fbfbfc 100%); }
.auth-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.auth-glow-one { top: -130px; right: -110px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(167,25,48,.12), transparent 68%); }
.auth-glow-two { bottom: -190px; left: -130px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(215,180,125,.14), transparent 68%); }
.auth-shell { display: grid; max-width: 1050px; min-height: 665px; margin: 0 auto; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); overflow: hidden; background: rgba(255,255,255,.96); border: 1px solid rgba(218,221,228,.9); border-radius: 28px; box-shadow: 0 28px 85px rgba(23,32,51,.12); }
.auth-story { position: relative; display: flex; min-height: 100%; padding: 48px 45px 34px; overflow: hidden; flex-direction: column; color: white; background: linear-gradient(145deg, #751326 0%, #a71930 57%, #c92e49 100%); }
.auth-story::before { position: absolute; top: -120px; right: -115px; width: 310px; height: 310px; content: ''; background: rgba(255,255,255,.07); border-radius: 50%; }
.auth-story::after { position: absolute; right: -60px; bottom: 70px; width: 185px; height: 185px; content: ''; background: rgba(255,255,255,.055); border-radius: 50%; }
.auth-story-pattern { position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(135deg, transparent 5%, black 60%, transparent); }
.auth-story-content, .auth-story-footer { position: relative; z-index: 1; }
.auth-story-content { margin-block: auto; }
.auth-story-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 9px; font-weight: 750; letter-spacing: .5px; backdrop-filter: blur(10px); }
.auth-story h1 { margin: 25px 0 15px; color: white; font-size: clamp(33px, 3.2vw, 47px); font-weight: 850; line-height: 1.23; letter-spacing: -1.1px; }
.auth-story-content > p { max-width: 390px; margin: 0; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.8; }
.auth-story-features { display: grid; margin-top: 35px; gap: 13px; }
.auth-story-features > div { display: flex; align-items: center; gap: 12px; }
.auth-story-features > div > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; color: #8b172c; background: rgba(255,255,255,.92); border-radius: 12px; font-size: 17px; }
.auth-story-features p { display: flex; margin: 0; flex-direction: column; }
.auth-story-features strong { color: white; font-size: 11px; }
.auth-story-features small { color: rgba(255,255,255,.61); font-size: 9px; }
.auth-story-footer { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.58); font-size: 9px; }
.auth-story-footer i { font-size: 13px; }
.auth-steps { position: relative; display: grid; margin: 34px 0 0; padding: 0; gap: 17px; list-style: none; }
.auth-steps::before { position: absolute; top: 30px; bottom: 30px; left: 16px; width: 1px; content: ''; background: rgba(255,255,255,.19); }
.auth-steps li { position: relative; display: flex; align-items: center; gap: 12px; }
.auth-steps li > span { display: grid; width: 33px; height: 33px; z-index: 1; flex: 0 0 auto; place-items: center; color: rgba(255,255,255,.66); background: rgba(121,19,39,.86); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; font-size: 10px; font-weight: 800; }
.auth-steps li.active > span { color: var(--sj-primary); background: white; }
.auth-steps p { display: flex; margin: 0; flex-direction: column; }
.auth-steps strong { color: white; font-size: 11px; }
.auth-steps small { color: rgba(255,255,255,.58); font-size: 9px; }
.auth-form-panel { display: grid; padding: 36px 42px; place-items: center; }
.auth-form-wrap { width: min(100%, 390px); }
.register-wrap { width: min(100%, 420px); }
.auth-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 27px; color: #737c8d; font-size: 10px; font-weight: 650; text-decoration: none; }
.auth-back:hover { color: var(--sj-primary); }
.auth-form-heading { margin-bottom: 25px; }
.auth-mobile-logo { display: none; }
.auth-form-heading > small { color: var(--sj-primary); font-size: 9px; font-weight: 800; letter-spacing: .6px; }
.auth-form-heading h2 { margin: 3px 0 5px; color: var(--sj-ink); font-size: 29px; font-weight: 850; letter-spacing: -.5px; }
.auth-form-heading p { margin: 0; color: var(--sj-muted); font-size: 11px; }
.auth-alert { margin-bottom: 17px; padding: 11px 13px; color: #9b263a; background: #fff1f3; border: 1px solid #f5d3da; border-radius: 11px; font-size: 10px; line-height: 1.5; }
.auth-alert.success { color: #26704c; background: #eaf8f1; border-color: #cfecdc; }
.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label, .auth-label-row { color: #364154; font-size: 10px; font-weight: 750; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; }
.auth-label-row a { color: var(--sj-primary); font-size: 9px; text-decoration: none; }
.auth-input-wrap { position: relative; display: flex; min-height: 48px; align-items: center; background: #fafbfc; border: 1px solid #dfe3e9; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.auth-input-wrap:focus-within { background: white; border-color: rgba(167,25,48,.55); box-shadow: 0 0 0 4px rgba(167,25,48,.07); }
.auth-input-wrap.has-error { border-color: #d54d62; box-shadow: 0 0 0 3px rgba(213,77,98,.06); }
.auth-input-wrap > i { margin-left: 15px; color: #8a93a3; font-size: 15px; }
.auth-input-wrap input { min-width: 0; height: 46px; flex: 1; padding: 0 12px; color: var(--sj-ink); background: transparent; border: 0; outline: 0; font-size: 12px; }
.auth-input-wrap input::placeholder { color: #afb5c0; }
.password-toggle { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: #7d8697; background: transparent; border: 0; border-radius: 9px; }
.password-toggle:hover { color: var(--sj-primary); background: var(--sj-primary-soft); }
.field-hint { color: #969dac; font-size: 8px; }
.field-error { min-height: 0; color: #ca364e; font-size: 8px; }
.field-error:empty { display: none; }
.password-meter { height: 4px; overflow: hidden; background: #eceef2; border-radius: 999px; }
.password-meter span { display: block; width: 0; height: 100%; background: #cf4057; border-radius: inherit; transition: width .3s, background .3s; }
.password-meter span.medium { background: #d59a2f; }
.password-meter span.strong { background: #29a36a; }
.password-rules { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.password-rules span { color: #9aa1ae; font-size: 8px; }
.password-rules span.valid { color: #288a5d; }
.password-rules i { margin-right: 2px; font-size: 7px; }
.auth-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.auth-consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auth-consent > span { display: grid; width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; place-items: center; overflow: hidden; color: transparent; background: white; border: 1px solid #d5d9e0; border-radius: 6px; line-height: 1; transition: all .2s; }
.auth-consent > span i { display: block; width: 12px; height: 12px; font-size: 12px; line-height: 12px; }
.auth-consent > span .bi::before { display: block; line-height: 12px; vertical-align: 0; }
.auth-consent input:focus-visible + span { box-shadow: 0 0 0 3px rgba(167,25,48,.11); }
.auth-consent input:checked + span { color: white; background: var(--sj-primary); border-color: var(--sj-primary); }
.auth-consent p { margin: 0; color: #747d8d; font-size: 10px; line-height: 1.6; }
.consent-error { margin-top: -13px; }
.auth-submit { display: flex; min-height: 49px; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; font-size: 11px; }
.auth-submit[disabled] { opacity: .7; cursor: wait; }
.auth-switch { margin-top: 24px; padding-top: 19px; color: #7c8595; border-top: 1px solid #eceef2; text-align: center; font-size: 10px; }
.auth-switch a { color: var(--sj-primary); font-weight: 750; text-decoration: none; }
.auth-help { display: flex; margin-top: 22px; align-items: center; justify-content: center; gap: 9px; color: #8b93a1; font-size: 8px; line-height: 1.5; }
.auth-help > i { display: grid; width: 31px; height: 31px; place-items: center; color: var(--sj-primary); background: var(--sj-primary-soft); border-radius: 9px; font-size: 13px; }
.auth-help a { color: #5b6575; text-decoration: none; }
.auth-success { padding: 29px 20px; text-align: center; background: #f8fbf9; border: 1px solid #dcece3; border-radius: 18px; }
.auth-success > span { display: grid; width: 57px; height: 57px; margin: 0 auto 14px; place-items: center; color: #26885a; background: #e2f5ea; border-radius: 18px; font-size: 26px; }
.auth-success h3 { margin: 0 0 7px; color: var(--sj-ink); font-size: 19px; font-weight: 800; }
.auth-success p { margin: 0 0 18px; color: var(--sj-muted); font-size: 10px; line-height: 1.65; }
.auth-success strong { color: var(--sj-ink); overflow-wrap: anywhere; }
.auth-success .btn { min-height: 43px; border-radius: 11px; font-size: 10px; }
.auth-confirm-page { display: grid; min-height: calc(100vh - 78px); place-items: center; }
.confirm-card { width: min(100%, 570px); margin: 20px auto 70px; padding: 47px 35px; text-align: center; background: rgba(255,255,255,.95); border: 1px solid var(--sj-line); border-radius: 27px; box-shadow: 0 25px 75px rgba(23,32,51,.11); }
.confirm-icon { display: grid; width: 72px; height: 72px; margin: 0 auto 19px; place-items: center; color: #27875a; background: #e5f6ec; border-radius: 23px; font-size: 33px; }
.confirm-error .confirm-icon { color: #b72d45; background: #fff0f2; }
.confirm-info .confirm-icon { color: #5365a5; background: #eef1fc; }
.confirm-card > small { color: var(--sj-primary); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.confirm-card h1 { margin: 5px 0 9px; color: var(--sj-ink); font-size: 27px; font-weight: 850; }
.confirm-card p { max-width: 440px; margin: 0 auto 23px; color: var(--sj-muted); font-size: 11px; line-height: 1.75; }
.confirm-actions { display: flex; justify-content: center; gap: 9px; }
.confirm-actions form { display: contents; }
.confirm-actions .btn { min-height: 44px; border-radius: 11px; font-size: 10px; }

@media (max-width: 991.98px) {
    .auth-shell { max-width: 700px; grid-template-columns: 1fr; }
    .auth-story { min-height: 320px; padding: 38px 42px; }
    .auth-story h1 { font-size: 38px; }
    .auth-story-features { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .auth-story-footer { margin-top: 35px; }
    .auth-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .auth-steps::before { top: 16px; right: 30px; bottom: auto; left: 30px; width: auto; height: 1px; }
    .auth-steps li { align-items: flex-start; flex-direction: column; }
    .auth-form-panel { padding-block: 44px; }
}
@media (max-width: 767.98px) {
    .auth-page { padding: 24px 0 58px; }
    .auth-shell { border-radius: 22px; }
    .auth-story { display: none; }
    .auth-form-panel { padding: 31px 24px 36px; }
    .auth-form-wrap, .register-wrap { width: min(100%, 430px); }
    .auth-mobile-logo { display: grid; width: 48px; height: 48px; margin-bottom: 15px; place-items: center; background: var(--sj-primary-soft); border-radius: 15px; }
    .auth-mobile-logo img { width: 36px; height: 36px; object-fit: contain; }
    .auth-back { margin-bottom: 20px; }
}
@media (max-width: 479.98px) {
    .auth-page { padding-top: 14px; }
    .auth-shell { border-radius: 18px; }
    .auth-form-panel { padding-inline: 19px; }
    .auth-form-heading h2 { font-size: 26px; }
    .password-rules { display: grid; grid-template-columns: 1fr 1fr; }
    .confirm-card { padding: 39px 22px; border-radius: 22px; }
    .confirm-actions { flex-direction: column; }
    .confirm-actions .btn { width: 100%; }
}