.auth3 { position: relative; isolation: isolate; overflow-x: clip; min-height: 70vh; padding: calc(124px + var(--banner-h)) 16px 64px }

.auth-art { inset: -48px -48px auto; height: 640px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%) }

.auth3::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 600px; z-index: -1; background: linear-gradient(180deg, rgb(var(--plate-rgb) / .55) 0, rgb(var(--bg-rgb) / .55) 55%, rgb(var(--bg-rgb)) 100%) }

.auth-shell { max-width: 520px; margin: 0 auto }

.auth-form-wrapper { display: none }
.auth-form-wrapper.active { display: block; animation: auth-in .25s ease }

@keyframes auth-in {
  from { opacity: 0; transform: translateY(8px) }
  to { opacity: 1; transform: none }
}

.auth-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: rgb(var(--plate-rgb) / .78); border: 1px solid var(--line); border-radius: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.auth-tab { flex: 1; display: grid; place-items: center; padding: 10px 8px; font: 800 13px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--soft); border-radius: 9px; transition: background .15s, color .15s }
a.auth-tab:hover { color: var(--text); background: rgb(var(--tint-rgb) / .08) }
.auth-tab.is-current { color: var(--ink); background: var(--gold) }

.auth-card { padding: 30px 32px 28px; background: linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(5, 8, 25, .9) }

.auth-header { text-align: center }
.auth-title { font: 900 30px/1.15 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 3px 3px 0 var(--ink) }
.auth-subtitle { margin-top: 8px; font-size: 15px; color: var(--soft) }

.auth-form, #request-form, #verify-form, #password-form { display: grid; gap: 18px; margin-top: 24px }

.form-group { display: grid; gap: 8px; min-width: 0 }
.form-label { font: 800 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }

.input-wrapper { position: relative; display: flex; align-items: center; min-width: 0 }

.form-input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px 0 44px;
  font: 700 15px var(--font);
  color: var(--text);
  background: rgb(var(--plate-rgb) / .78);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.form-input::placeholder { color: var(--mute); font-weight: 600 }
.form-input:focus { border-color: rgba(255, 201, 60, .65); box-shadow: 0 0 0 3px rgba(255, 201, 60, .14) }
.form-input.error { border-color: rgba(255, 138, 122, .8); box-shadow: 0 0 0 3px rgba(255, 138, 122, .12) }
.input-wrapper:has(.toggle-password) .form-input { padding-right: 48px }

.input-icon { position: absolute; left: 15px; width: 17px; height: 17px; color: var(--mute); pointer-events: none; transition: color .15s }
.input-wrapper:focus-within .input-icon { color: var(--gold) }

.toggle-password { position: absolute; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--mute); background: none; border: 0; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s }
.toggle-password:hover { color: var(--text); background: rgb(var(--tint-rgb) / .08) }

.phone-input-wrapper { gap: 8px }
.phone-input-wrapper .form-input { padding-left: 14px }

.country-selector { position: relative; flex: none }
.country-selector-btn { height: 48px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; font: 800 14px var(--font); color: var(--text); background: rgb(var(--plate-rgb) / .78); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s }
.country-selector-btn:hover, .country-selector-btn.active { border-color: rgba(255, 201, 60, .65) }
@supports (text-box: trim-both cap alphabetic) {
  .country-code, .back-link > span { text-box: trim-both cap alphabetic; padding-block: calc((1lh - 1cap) / 2) }
}
.country-flag { flex: none; width: 22px; height: 16px; border-radius: 3px; background-size: cover; box-shadow: 0 0 0 1px rgb(var(--tint-rgb) / .15) }
.country-caret { width: 14px; height: 14px; color: var(--mute); transition: transform .2s }
.country-selector-btn.active .country-caret { transform: rotate(180deg) }

.country-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none; width: 270px; max-height: 300px; overflow-y: auto; padding: 6px; background: rgb(var(--plate-rgb)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 40px -18px rgba(5, 8, 25, .95); scrollbar-width: thin; scrollbar-color: rgb(var(--tint-rgb) / .2) transparent }
.country-dropdown.active { display: block }
.country-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font: 700 14px var(--font); color: var(--soft); border-radius: 8px; cursor: pointer }
.country-option:hover { color: var(--text); background: rgb(var(--tint-rgb) / .08) }
.country-option .country-name { flex: 1; min-width: 0 }
.country-option .country-code { color: var(--mute) }
.country-divider { height: 1px; margin: 6px 4px; background: var(--line) }

.form-hint, .form-warning { display: flex; align-items: flex-start; gap: 8px; font: 700 13px/1.45 var(--font) }
.form-hint { color: var(--mute) }
.form-hint .ic { width: 15px; height: 15px; margin-top: 1px; color: #29a9ea }
.form-warning { color: var(--gold-text) }
.form-warning .ic { width: 15px; height: 15px; margin-top: 1px }

.form-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px }

.checkbox-label { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; padding: 6px 0; font: 700 14px/1.45 var(--font); color: var(--soft); cursor: pointer }
.checkbox-label input { flex: none; display: grid; place-content: center; width: 19px; height: 19px; margin: 0; -webkit-appearance: none; appearance: none; background: rgb(var(--plate-rgb) / .78); border: 1.5px solid rgb(var(--tint-rgb) / .35); border-radius: 5px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s }
.checkbox-label input::after { content: ''; width: 12px; height: 12px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform .12s }
.checkbox-label input:hover { border-color: rgba(255, 201, 60, .6) }
.checkbox-label input:checked { background: var(--gold); border-color: var(--ink) }
.checkbox-label input:checked::after { transform: scale(1) }
.checkbox-label input:focus-visible { box-shadow: 0 0 0 3px rgba(255, 201, 60, .3) }

.link-forgot, .link-inline, .form-footer a { font-weight: 800; color: var(--gold-text) }
.link-forgot:hover, .link-inline:hover, .form-footer a:hover { color: var(--gold) }
.link-inline { text-decoration: underline; text-decoration-color: rgba(255, 210, 87, .45); text-underline-offset: 3px }

.btn-submit { width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 16px }
.btn-submit .ic { width: 19px; height: 19px }
.btn-submit:disabled { opacity: .75; cursor: wait; transform: none }

.form-footer { text-align: center; font: 600 14px var(--font); color: var(--mute) }

.gender-selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.gender-option { position: relative }
.gender-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.gender-option label { height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 15px var(--font); color: var(--soft); background: rgb(var(--plate-rgb) / .78); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s }
.gender-option label:hover { color: var(--text); border-color: rgba(255, 201, 60, .5) }
.gender-option label .ic { width: 19px; height: 19px }
.gender-option input:checked + label { color: var(--ink); background: var(--gold); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink) }
.gender-option input:focus-visible + label { box-shadow: 0 0 0 3px rgba(255, 201, 60, .35) }

.password-requirements { padding: 12px 14px; background: rgb(var(--tint-rgb) / .04); border: 1px solid rgb(var(--tint-rgb) / .1); border-radius: 12px }
.requirements-title { display: flex; align-items: center; gap: 8px; font: 800 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.requirements-title .ic { width: 14px; height: 14px; color: var(--gold) }
.requirements-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px 14px; margin-top: 8px; padding: 0; list-style: none; font: 700 13px/1.4 var(--font); color: var(--soft) }
.requirements-list li { position: relative; padding-left: 20px; transition: color .15s }
.requirements-list li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); transition: background .15s }
.requirements-list li[data-requirement="special"] { grid-column: 1 / -1; overflow-wrap: anywhere }
.requirements-list li.valid { color: #6fdc8c }
.requirements-list li.valid::before { left: 0; top: 3px; width: 13px; height: 13px; border-radius: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat }

.field-error { display: block; font: 700 13px/1.4 var(--font); color: #ff8a7a }
.field-error:empty { display: none }
.field-error.is-center { text-align: center }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.auth-modal { width: min(480px, 100%); max-height: calc(100vh - 40px); overflow-y: auto }
.modal-head { display: flex; align-items: center; gap: 12px; padding-right: 40px }
.modal-head .modal-title { padding-right: 0; font-size: 18px }
.modal-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold); background: rgba(255, 201, 60, .12); border: 1px solid rgba(255, 201, 60, .35); border-radius: 13px }
.modal-icon .ic { width: 22px; height: 22px }
.modal-icon.is-telegram { color: #29a9ea; background: rgba(41, 169, 234, .12); border-color: rgba(41, 169, 234, .4) }
.modal-text { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--soft) }

.tg-bot-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; background: rgba(41, 169, 234, .08); border: 1px solid rgba(41, 169, 234, .3); border-radius: 14px }
.tg-bot-icon { width: 30px; height: 30px; color: #29a9ea }
.tg-bot-details { flex: 1; min-width: 0; display: grid }
.tg-bot-label { font: 800 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.tg-bot-username { font: 800 15px var(--font); color: var(--text); overflow-wrap: anywhere }
.btn-telegram { flex: 1 1 100%; color: #fff; background: #229ed9; box-shadow: 3px 3px 0 var(--ink) }
.btn-telegram:hover { background: #2aabe6 }

.verification-section { margin-top: 20px; text-align: center }
.verification-label { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--soft) }
.verification-label .ic { width: 16px; height: 16px; color: var(--gold) }

.otp-input-container, .code-input-group { display: flex; justify-content: center; gap: 8px; margin-top: 10px }
.otp-input, .code-input { width: 50px; height: 58px; padding: 0; text-align: center; font: 900 24px var(--font); color: var(--text); caret-color: var(--gold); background: rgb(var(--plate-rgb) / .85); border: 1.5px solid var(--line); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s }
.otp-input:focus, .code-input:focus { border-color: rgba(255, 201, 60, .7); box-shadow: 0 0 0 3px rgba(255, 201, 60, .15) }
.otp-input.filled { color: var(--gold-text); border-color: rgba(255, 201, 60, .55) }
.otp-input.error { border-color: rgba(255, 138, 122, .85) }
.code-input-group + .field-error { margin-top: 10px }
.error-message { margin-top: 10px; font: 700 13px var(--font); color: #ff8a7a }

.auth-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; font: 600 14px/1.5 var(--font); color: var(--soft); background: rgb(var(--tint-rgb) / .05); border: 1px solid rgb(var(--tint-rgb) / .1); border-radius: 12px }
.auth-form .auth-note, #request-form .auth-note, #verify-form .auth-note { margin-top: 0 }
.auth-note > .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--sky) }
.auth-note.is-telegram > .ic { color: #29a9ea }
.auth-note strong { font-weight: 800; color: var(--text) }
.auth-note a { font-weight: 800; color: var(--gold-text) }
.auth-note code { padding: 1px 6px; font: 700 13px ui-monospace, Consolas, monospace; color: var(--text); background: rgb(var(--tint-rgb) / .1); border-radius: 5px }
.auth-note p + p { margin-top: 4px }
.auth-note-sub { font-size: 13px; font-style: italic; color: var(--mute) }

.auth-modal .modal-footer { margin-top: 20px; display: flex; gap: 12px }
.auth-modal .modal-footer .btn { flex: 1; padding-left: 12px; padding-right: 12px; font-size: 14px; white-space: nowrap }
.auth-modal .modal-footer .btn-verify { flex: 1.6 }
.btn-verify.loading { opacity: .8; cursor: wait }

.site-block-screen { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgb(var(--bg-rgb)) }
.site-block-screen.active { display: flex }
.site-block-card { width: 100%; max-width: 420px; text-align: center }
.site-block-badge { width: 76px; height: 76px; margin: 0 auto 20px; display: grid; place-items: center; color: #ff8a7a; background: rgba(255, 138, 122, .1); border: 1px solid rgba(255, 138, 122, .4); border-radius: 50% }
.site-block-badge .ic { width: 34px; height: 34px }
.site-block-title { margin-bottom: 24px; font: 900 30px/1.15 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-shadow: 3px 3px 0 var(--ink) }
.site-block-rows { overflow: hidden; text-align: left; background: var(--bubble); border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 16px }
.site-block-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 18px }
.site-block-row + .site-block-row { border-top: 1px solid rgb(var(--tint-rgb) / .1) }
.site-block-label { flex: none; font: 800 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.site-block-value { text-align: right; font: 700 15px var(--font); color: var(--text); overflow-wrap: anywhere }
.site-block-left { color: #ff8a7a; font-variant-numeric: tabular-nums }

.reset-card { padding-top: 24px }
.step { display: none }
.step.active { display: block; animation: auth-in .25s ease }
.step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px }
.step-dot { width: 28px; height: 6px; border-radius: 3px; background: rgb(var(--tint-rgb) / .15); transition: width .2s, background .2s }
.step-dot.active { width: 46px; background: var(--gold) }
.step-dot.completed { background: #6fdc8c }

.reset-icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--gold); background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .35); border-radius: 16px }
.reset-icon .ic { width: 26px; height: 26px }
.reset-icon.is-telegram { color: #29a9ea; background: rgba(41, 169, 234, .12); border-color: rgba(41, 169, 234, .4) }
.reset-icon.is-success { color: #6fdc8c; background: rgba(111, 220, 140, .12); border-color: rgba(111, 220, 140, .4) }
.reset-username { font-weight: 900; color: var(--gold-text); overflow-wrap: anywhere }

.reset-timer { text-align: center; font: 700 14px var(--font); color: var(--mute) }
.reset-timer span { font-weight: 900; color: var(--gold-text); font-variant-numeric: tabular-nums }
.resend-container { text-align: center; font: 700 14px var(--font); color: var(--mute) }
.resend-link { align-items: center; gap: 7px; font-weight: 800; color: var(--gold-text) }
.resend-link:hover { color: var(--gold) }
.resend-link .ic { width: 15px; height: 15px }
.resend-link.loading { opacity: .7; pointer-events: none }

.back-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font: 800 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); transition: color .15s }
.back-link .ic { width: 16px; height: 16px; transition: transform .2s }
.back-link:hover { color: var(--gold-text) }
.back-link:hover .ic { transform: translateX(-3px) }

.btn-reset .spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(8, 12, 22, .25); border-top-color: var(--ink); border-radius: 50%; animation: ic-spin .8s linear infinite }
.btn-reset.loading .spinner { display: block }
.btn-reset.loading .btn-text { display: none }
.step .btn-reset + * { margin-top: 0 }
#step-success .btn-reset { margin-top: 24px }

@media (max-width: 640px) {
  .auth3 { padding: calc(98px + var(--banner-h)) 12px 48px }
  .auth-card { padding: 22px 16px 20px; border-radius: 18px }
  .auth-title { font-size: 24px }
  .auth-subtitle { font-size: 14px }
  .auth-form, #request-form, #verify-form, #password-form { gap: 16px; margin-top: 20px }
  .requirements-list { grid-template-columns: minmax(0, 1fr) }
  .country-dropdown { width: min(270px, calc(100vw - 56px)) }
  .otp-input-container, .code-input-group { gap: 6px }
  .otp-input, .code-input { width: 44px; height: 52px; font-size: 21px }
  .auth-modal { padding: 22px 16px 18px }
  .tg-bot-card { flex-wrap: wrap }
  .btn-telegram { width: 100% }
  .auth-modal .modal-footer { flex-direction: column-reverse }
  .site-block-title { font-size: 24px }
  .site-block-row { flex-direction: column; gap: 4px }
  .site-block-value { text-align: left }
}

@media (max-width: 360px) {
  .otp-input, .code-input { width: 40px; height: 50px }
}