:root {
    --auth-bg: #f3f7fb;
    --auth-card: #ffffff;
    --auth-border: #d7e1ec;
    --auth-text: #172033;
    --auth-muted: #5b677a;
    --auth-primary: #155eef;
    --auth-primary-hover: #0b4bd4;
    --auth-danger-bg: #fff1f2;
    --auth-danger-border: #fecdd3;
    --auth-danger-text: #9f1239;
    --auth-success-bg: #ecfdf3;
    --auth-success-border: #bbf7d0;
    --auth-success-text: #166534;
}

.auth-security-page {
    display: grid;
    place-items: center;
    min-height: min(680px, calc(100vh - 160px));
    padding: 32px 16px;
    color: var(--auth-text);
}

.auth-security-card {
    width: min(100%, 520px);
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid var(--auth-border);
    border-radius: 20px;
    background: var(--auth-card);
    box-shadow: 0 18px 50px rgba(31, 50, 81, 0.1);
}

.auth-security-card--wide {
    width: min(100%, 680px);
}

.auth-security-card h1 {
    margin: 0 0 12px;
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    line-height: 1.2;
}

.auth-security-card__lead,
.auth-security-card__note {
    color: var(--auth-muted);
    line-height: 1.6;
}

.auth-security-form {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.auth-security-field {
    display: grid;
    gap: 8px;
}

.auth-security-field label {
    font-weight: 700;
}

.auth-security-field input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #aebed0;
    border-radius: 10px;
    background: #fff;
    color: var(--auth-text);
    font: inherit;
}

.auth-security-field input:focus {
    border-color: var(--auth-primary);
    outline: 3px solid rgba(21, 94, 239, 0.17);
}

.auth-security-button,
.auth-security-link--primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    box-sizing: border-box;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--auth-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.auth-security-button:hover,
.auth-security-link--primary:hover {
    background: var(--auth-primary-hover);
    color: #fff;
}

.auth-security-alert {
    margin: 18px 0;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 10px;
    line-height: 1.5;
}

.auth-security-alert p {
    margin: 0;
}

.auth-security-alert p + p {
    margin-top: 6px;
}

.auth-security-alert--error {
    border-color: var(--auth-danger-border);
    background: var(--auth-danger-bg);
    color: var(--auth-danger-text);
}

.auth-security-alert--success {
    border-color: var(--auth-success-border);
    background: var(--auth-success-bg);
    color: var(--auth-success-text);
}

.auth-security-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
}

.auth-security-actions a:not(.auth-security-link--primary) {
    color: var(--auth-primary);
    font-weight: 650;
}

.auth-security-password-rules {
    margin-top: -6px;
    color: var(--auth-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-security-help {
    color: var(--auth-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.auth-security-form .password-validator {
    margin: -8px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-bg);
}

.auth-security-form .password-rule,
.auth-security-form .password-success {
    line-height: 1.45;
}

.auth-security-form .password-rule + .password-rule {
    margin-top: 5px;
}

.auth-security-divider {
    height: 1px;
    margin: 24px 0 18px;
    background: var(--auth-border);
}

.auth-security-secondary-links {
    display: grid;
    gap: 10px;
}

.auth-security-secondary-links a {
    color: var(--auth-primary);
    font-weight: 650;
}

@media (max-width: 560px) {
    .auth-security-page {
        padding: 18px 10px;
    }

    .auth-security-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .auth-security-button,
    .auth-security-link--primary {
        width: 100%;
    }
}
.registration-birth-date {
    display: grid;
    grid-template-columns: 0.8fr 1.35fr 1fr;
    gap: 10px;
}

.registration-birth-date select {
    width: 100%;
    min-width: 0;
}

@media (max-width: 520px) {
    .registration-birth-date {
        grid-template-columns: 1fr;
    }
}
.registration-birth-date {
    display: grid;
    grid-template-columns: 0.8fr 1.35fr 1fr;
    gap: 10px;
}

.registration-birth-date select {
    width: 100%;
    min-width: 0;
}

@media (max-width: 520px) {
    .registration-birth-date {
        grid-template-columns: 1fr;
    }
}

/* Birth date: compact single row on all screens */
.registration-birth-date {
    display: grid;
    grid-template-columns: 72px minmax(120px, 1fr) 88px;
    gap: 8px;
    align-items: center;
}

.registration-birth-date .registration-form__control {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 520px) {
    .registration-birth-date {
        grid-template-columns: 64px minmax(105px, 1fr) 82px;
        gap: 6px;
    }

    .registration-birth-date .registration-form__control {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 14px;
    }
}

/* Birth date: compact single row on all screens */
.registration-birth-date {
    display: grid;
    grid-template-columns: 72px minmax(120px, 1fr) 88px;
    gap: 8px;
    align-items: center;
}

.registration-birth-date .registration-form__control {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 520px) {
    .registration-birth-date {
        grid-template-columns: 64px minmax(105px, 1fr) 82px;
        gap: 6px;
    }

    .registration-birth-date .registration-form__control {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 14px;
    }
}

/* Password visibility toggle */
.auth-password-control {
    position: relative;
    width: 100%;
}

.auth-password-control > input {
    width: 100%;
    padding-right: 48px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 4px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: currentColor;
    opacity: .62;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-password-toggle:hover {
    opacity: .9;
}

.auth-password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.auth-password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.auth-password-toggle svg[hidden] {
    display: none;
}

/* Login password eye — final positioning override */
.auth-security-field .auth-password-control {
    position: relative;
    display: block;
    width: 100%;
}

.auth-security-field .auth-password-control > input#login-password {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-right: 52px;
}

.auth-security-field .auth-password-control > button.auth-password-toggle {
    position: absolute !important;
    z-index: 3;
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 7px !important;

    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #8fa1b8 !important;

    cursor: pointer;
    opacity: 1;
}

.auth-security-field .auth-password-control > button.auth-password-toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #d8e2f0 !important;
}

.auth-security-field .auth-password-control > button.auth-password-toggle:focus {
    box-shadow: none !important;
}

.auth-security-field .auth-password-control > button.auth-password-toggle:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 1px;
}

.auth-security-field .auth-password-control > button.auth-password-toggle svg {
    display: block;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px;
    pointer-events: none;
}

.auth-security-field .auth-password-control > button.auth-password-toggle svg[hidden] {
    display: none !important;
}