:root {
    --auth-primary: #d51a8e;
    --auth-primary-hover: #c71884;
    --auth-accent: #ec249f;
    --auth-secondary: #7650da;
    --auth-brand-start: #281843;
    --auth-brand-end: #171124;
    --auth-page: #f3f4f8;
    --auth-surface: #ffffff;
    --auth-text: #24212c;
    --auth-muted: #777381;
    --auth-border: #dedce6;
    --auth-border-hover: #c9c6d3;
    --auth-danger: #d72f50;
    --auth-danger-background: #fff2f5;
    --auth-danger-border: #f2c4ce;
    --auth-focus: rgba(213, 26, 142, 0.15);
    --auth-shadow: 0 30px 90px rgba(31, 22, 50, 0.15), 0 8px 25px rgba(31, 22, 50, 0.07);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.auth-body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: var(--auth-page);
    color: var(--auth-text);
    font-family: "Public Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

    body.auth-body button, body.auth-body input {
        font: inherit;
    }

    body.auth-body button {
        -webkit-tap-highlight-color: transparent;
    }

.auth-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    isolation: isolate;
}

.auth-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(circle at 10% 10%, rgba(236, 36, 159, 0.08), transparent 28%),
                radial-gradient(circle at 90% 85%, rgba(118, 80, 218, 0.1), transparent 30%),
                linear-gradient(145deg, #f8f8fb, #eff0f6);
}

.auth-grid {
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-size: 44px 44px;
}

.auth-grid {
    display: none;
}

.auth-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.auth-orb-one {
    top: -150px;
    left: -130px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(236, 36, 159, 0.14), transparent 70%);
}

.auth-orb-two {
    right: -170px;
    bottom: -180px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(118, 80, 218, 0.15), transparent 70%);
}

.auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(500px, 1.05fr);
    width: min(1140px, 100%);
    min-height: min(600px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 28px;
    background: var(--auth-surface);
    box-shadow: var(--auth-shadow);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 40px 44px 34px;
    color: #ffffff;
    background: radial-gradient(circle at 88% 12%, rgba(236, 36, 159, 0.27), transparent 27%), radial-gradient(circle at 15% 84%, rgba(118, 80, 218, 0.28), transparent 31%), linear-gradient(150deg, var(--auth-brand-start), var(--auth-brand-end));
}

    .auth-brand-panel::before {
        position: absolute;
        top: -150px;
        right: -140px;
        width: 340px;
        height: 340px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        content: "";
    }

    .auth-brand-panel::after {
        position: absolute;
        right: 45px;
        bottom: 95px;
        width: 130px;
        height: 130px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 32px;
        content: "";
        transform: rotate(18deg);
    }

.auth-brand-header, .auth-brand-content, .auth-brand-footer {
    position: relative;
    z-index: 1;
}

.auth-brand-logo {
    display: block;
    width: 167px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.auth-brand-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    max-width: 470px;
    padding: 44px 0 34px;
}

.auth-brand-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: #ff90d2;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.auth-brand-content h1 {
    max-width: 450px;
    margin: 0;
    color: #ffffff;
    font-size: 2.5rem; /*clamp(2.1rem, 3.2vw, 2.75rem);*/
    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.auth-brand-description {
    max-width: 445px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.92rem;
    line-height: 1.7;
}

.auth-feature-list {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 13px;
}

.auth-feature-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.075);
    color: #ff85ce;
}

    .auth-feature-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-feature-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

    .auth-feature-content strong {
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 650;
    }

    .auth-feature-content small {
        color: rgba(255, 255, 255, 0.56);
        font-size: 0.72rem;
        line-height: 1.4;
    }

.auth-brand-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.auth-brand-footer-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.77);
}

    .auth-brand-footer-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-brand-footer-content {
    display: grid;
    gap: 2px;
}

    .auth-brand-footer-content strong {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.74rem;
        font-weight: 650;
    }

    .auth-brand-footer-content small {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.67rem;
        line-height: 1.4;
    }

.auth-form-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 42px 66px 24px;
    background: var(--auth-surface);
}

.auth-form-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 410px);
    margin: 0 auto;
}

.auth-mobile-brand {
    display: none;
}

.auth-form-header {
    margin-bottom: 24px;
}

.auth-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin-bottom: 13px;
    padding: 6px 10px;
    border: 1px solid rgba(213, 26, 142, 0.2);
    border-radius: 999px;
    background: rgba(213, 26, 142, 0.055);
    color: var(--auth-primary-hover);
    font-size: 0.7rem;
    font-weight: 700;
}

    .auth-form-badge svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-form-header h2 {
    margin: 0;
    color: var(--auth-text);
    font-size: 1.75rem; /*clamp(1.75rem, 2.4vw, 2rem);*/
    font-weight: 720;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.auth-form-header p {
    margin: 9px 0 0;
    color: var(--auth-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.auth-form {
    display: grid;
    width: 100%;
    gap: 15px;
}

.auth-alert {
    position: relative;
    margin: 0;
    padding: 13px 15px 13px 42px;
    border: 1px solid var(--auth-danger-border);
    border-radius: 12px;
    outline: none;
    background: var(--auth-danger-background);
    color: #9e1f39;
    font-size: 0.79rem;
    line-height: 1.55;
}

    .auth-alert::before {
        position: absolute;
        top: 12px;
        left: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        content: "!";
        font-size: 0.68rem;
        font-weight: 800;
    }

    .auth-alert ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .auth-alert li + li {
        margin-top: 4px;
    }

    .auth-alert.validation-summary-valid {
        display: none;
    }

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

.auth-label {
    margin: 0;
    color: #3b3745;
    font-size: 0.8rem;
    font-weight: 650;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 15px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #918d9d;
    pointer-events: none;
    transition: color 160ms ease;
}

    .auth-input-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 11px 47px;
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    outline: none;
    background: #ffffff;
    color: var(--auth-text);
    caret-color: var(--auth-primary);
    font-size: 0.87rem;
    font-weight: 500;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    .auth-input::placeholder {
        color: #aaa7b3;
        font-weight: 400;
        opacity: 1;
    }

    .auth-input:hover {
        border-color: var(--auth-border-hover);
    }

    .auth-input:focus {
        border-color: var(--auth-secondary);
        /*box-shadow: 0 0 0 4px var(--auth-focus);*/
    }

.auth-input-wrapper:focus-within .auth-input-icon {
    color: var(--auth-secondary);
}

.auth-input.input-validation-error {
    border-color: var(--auth-danger);
    background: #fffafb;
    box-shadow: 0 0 0 3px rgba(215, 47, 80, 0.08);
}

.auth-password-input {
    padding-right: 52px;
}

.auth-password-toggle {
    position: absolute;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    outline: none;
    background: transparent;
    color: #837f8f;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

    .auth-password-toggle:hover {
        background: #f2f1f6;
        color: var(--auth-primary-hover);
    }

    .auth-password-toggle:focus-visible {
        box-shadow: 0 0 0 3px var(--auth-focus);
        color: var(--auth-primary);
    }

    .auth-password-toggle svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-eye-closed {
    display: none;
}

.auth-password-toggle.is-visible .auth-eye-open {
    display: none;
}

.auth-password-toggle.is-visible .auth-eye-closed {
    display: block;
}

.auth-field-error {
    display: block;
    color: var(--auth-danger);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.45;
}

    .auth-field-error:empty {
        display: none;
    }

.auth-caps-lock {
    color: #995f00;
    font-size: 0.72rem;
    font-weight: 600;
}

    .auth-caps-lock[hidden] {
        display: none;
    }

.auth-options {
    display: flex;
    align-items: center;
    min-height: 30px;
}

.auth-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    margin: -1px;
    opacity: 0;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.auth-checkbox-box {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #c9c7d2;
    border-radius: 6px;
    background: #ffffff;
    color: transparent;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

    .auth-checkbox-box svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-checkbox-input:checked + .auth-checkbox-box {
    border-color: var(--auth-primary);
    background: var(--auth-primary);
    color: #ffffff;
}

.auth-checkbox-input:focus-visible + .auth-checkbox-box {
    box-shadow: 0 0 0 4px var(--auth-focus);
}

.auth-checkbox-content {
    display: grid;
    gap: 1px;
}

    .auth-checkbox-content strong {
        color: #45414e;
        font-size: 0.77rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .auth-checkbox-content small {
        color: #8c8997;
        font-size: 0.66rem;
        line-height: 1.4;
    }

.auth-recaptcha {
    display: grid;
    gap: 7px;
}

.auth-recaptcha-wrapper {
    max-width: 100%;
    overflow: hidden;
    border-radius: 7px;
}

.auth-recaptcha.is-invalid .auth-recaptcha-wrapper {
    border-radius: 7px;
    box-shadow: 0 0 0 3px rgba(215, 47, 80, 0.12);
}

.g-recaptcha {
    min-height: 78px;
}

.auth-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 51px;
    padding: 0 22px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    outline: none;
    /*background: linear-gradient(135deg, var(--auth-primary), var(--auth-secondary));*/
    background: var(--auth-secondary);
    /*box-shadow: 0 13px 25px rgba(198, 24, 132, 0.2), 0 4px 10px rgba(118, 80, 218, 0.13);*/
    color: #ffffff;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .auth-submit::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.17) 50%, transparent 75%);
        content: "";
        transform: translateX(-130%);
        transition: transform 500ms ease;
    }

    .auth-submit:hover:not(:disabled) {
        /*box-shadow: 0 16px 30px rgba(198, 24, 132, 0.25), 0 6px 14px rgba(118, 80, 218, 0.17);*/
        transform: translateY(-1px);
    }

        .auth-submit:hover:not(:disabled)::before {
            transform: translateX(130%);
        }

    .auth-submit:active:not(:disabled) {
        transform: translateY(0);
    }



    .auth-submit:disabled {
        cursor: wait;
        opacity: 0.82;
    }

.auth-submit-content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.87rem;
    font-weight: 700;
}

    .auth-submit-content svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-submit-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: auth-spin 700ms linear infinite;
}

.auth-submit.is-loading .auth-submit-content {
    visibility: hidden;
}

.auth-submit.is-loading .auth-submit-spinner {
    display: block;
}

.auth-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 12px;
    border: 1px solid #e8e7ee;
    border-radius: 10px;
    background: #fafafd;
    color: #706d7a;
    font-size: 0.71rem;
    line-height: 1.5;
}

.auth-help-icon {
    display: inline-flex;
    flex: 0 0 17px;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #7956c3;
}

    .auth-help-icon svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-page-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
    color: #8e8b97;
    font-size: 0.65rem;
    line-height: 1.5;
    text-align: center;
}

.auth-footer-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bbb8c2;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: -1px !important;
    white-space: nowrap !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

@keyframes auth-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 1080px) {
    .auth-shell {
        grid-template-columns: minmax(380px, 0.9fr) minmax(460px, 1.1fr);
    }

    .auth-brand-panel {
        padding-right: 36px;
        padding-left: 36px;
    }

    .auth-form-panel {
        padding-right: 50px;
        padding-left: 50px;
    }

    .auth-brand-content h1 {
        font-size: 2.3rem;
    }
}

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

    .auth-shell {
        display: block;
        width: min(590px, 100%);
        min-height: auto;
        border-radius: 24px;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: calc(100vh - 36px);
        min-height: calc(100dvh - 36px);
        padding: 30px 50px 22px;
    }

    .auth-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 34px;
        padding: 16px;
        border-radius: 15px;
        background: radial-gradient(circle at 90% 0, rgba(236, 36, 159, 0.28), transparent 45%), linear-gradient(135deg, var(--auth-brand-start), var(--auth-brand-end));
    }

        .auth-mobile-brand img {
            display: block;
            width: 167px;
            max-width: 100%;
            height: auto;
        }
}

@media (max-width: 600px) {
    .auth-page {
        align-items: flex-start;
        padding: 0;
    }

    .auth-background {
        background: #ffffff;
    }

    .auth-shell {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 20px 22px 18px;
    }

    .auth-form-container {
        justify-content: flex-start;
        width: 100%;
    }

    .auth-mobile-brand {
        margin-bottom: 30px;
        padding: 15px;
    }

    .auth-form-header h2 {
        font-size: 1.75rem;
    }

    .auth-form-header p {
        font-size: 0.82rem;
    }

    .auth-page-footer {
        flex-wrap: wrap;
        margin-top: 28px;
    }
}

@media (max-width: 380px) {
    .auth-form-panel {
        padding-right: 17px;
        padding-left: 17px;
    }

    .auth-recaptcha-wrapper {
        height: 71px;
    }

    .g-recaptcha {
        transform: scale(0.89);
        transform-origin: left top;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .auth-page {
        align-items: flex-start;
    }

    .auth-shell {
        min-height: 600px;
    }

    .auth-brand-content {
        padding-top: 30px;
        padding-bottom: 26px;
    }

    .auth-feature-list {
        margin-top: 24px;
    }

    .auth-form-panel {
        padding-top: 30px;
    }

    .auth-form-header {
        margin-bottom: 20px;
    }

    .auth-form {
        gap: 12px;
    }

    .auth-help {
        margin-top: 13px;
    }

    .auth-page-footer {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.fs-12 {
    font-size: 12px !important;
}