:root {
    --auth-ink: #12211b;
    --auth-muted: #60736b;
    --auth-line: #dfe8e2;
    --auth-soft: #f4f8f5;
    --auth-mint: #dff4e8;
    --auth-green: #0f7a4f;
    --auth-green-dark: #09573a;
    --auth-danger: #c24135;
    --auth-success: #16845a;
    --auth-gold: #f4bd4f;
    --auth-shadow: 0 22px 60px rgba(18, 33, 27, 0.16);
}

* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    color: var(--auth-ink);
    background: #f8fbf9;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

.auth-page {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);
    overflow: hidden;
    background: #ffffff;
}

.auth-brand-panel {
    position: relative;
    isolation: isolate;
    height: 100vh;
    overflow: hidden;
    color: #ffffff;
    background-image: url("https://images.unsplash.com/photo-1560448075-bb485b067938?auto=format&fit=crop&w=1400&q=84");
    background-position: center;
    background-size: cover;
}

.auth-brand-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 29, 20, 0.36), rgba(6, 29, 20, 0.72)),
        linear-gradient(115deg, rgba(6, 29, 20, 0.92), rgba(15, 122, 79, 0.56) 52%, rgba(18, 33, 27, 0.2));
}

.auth-brand-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 3.25rem);
}

.auth-logo,
.auth-card-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.auth-hero-copy {
    max-width: 560px;
    animation: authFadeUp 520ms ease both;
}

.auth-kicker {
    margin: 0 0 0.7rem;
    color: var(--auth-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-form-intro .auth-kicker {
    color: var(--auth-green);
}

.auth-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.35rem, 4vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.auth-hero-copy p:last-child {
    max-width: 470px;
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.05rem;
}

.auth-feature-list {
    display: grid;
    gap: 0.85rem;
    max-width: 470px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.auth-feature-list span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 999px;
    background: var(--auth-gold);
    box-shadow: 0 0 0 5px rgba(244, 189, 79, 0.18);
}

.auth-form-panel {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.8rem, 2vw, 1.6rem);
    background:
        linear-gradient(180deg, #ffffff, #f8fbf9);
}

.auth-card {
    width: min(100%, 500px);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    border: 1px solid rgba(223, 232, 226, 0.9);
    border-radius: 16px;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--auth-shadow);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.auth-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 122, 79, 0.24);
    box-shadow: 0 28px 70px rgba(18, 33, 27, 0.18);
}

.auth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-mode-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 196px;
    padding: 0.25rem;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: var(--auth-soft);
}

.auth-mode-button {
    position: relative;
    z-index: 1;
    min-height: 36px;
    border: 0;
    border-radius: 11px;
    color: var(--auth-muted);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 220ms ease;
}

.auth-mode-button.is-active {
    color: #ffffff;
}

.auth-mode-indicator {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.25rem);
    border-radius: 11px;
    background: var(--auth-green);
    box-shadow: 0 10px 24px rgba(15, 122, 79, 0.24);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}

.auth-page.is-register .auth-mode-indicator {
    transform: translateX(100%);
}

.auth-forms {
    display: grid;
    position: relative;
    overflow: hidden;
}

.auth-form {
    grid-area: 1 / 1;
    display: grid;
    width: 100%;
    gap: 0.72rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(28px) scale(0.985);
    transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), visibility 260ms ease;
}

.auth-form:not(.is-active) {
    position: absolute;
    inset: 0;
}

.auth-page.is-register .auth-form[data-auth-form="login"] {
    transform: translateX(-28px) scale(0.985);
}

.auth-form.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.auth-form-intro {
    animation: authFadeUp 320ms ease both;
}

.auth-form-intro h2 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.auth-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.auth-social-grid button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    color: var(--auth-muted);
    background: #ffffff;
    font-weight: 800;
}

.auth-social-grid button:disabled {
    opacity: 0.68;
    cursor: not-allowed;
}

.auth-social-grid i {
    color: var(--auth-green);
    font-size: 1.2rem;
    line-height: 1;
}

.auth-form[data-auth-form="login"] {
    gap: 0.82rem;
}

.auth-form[data-auth-form="login"] .auth-social-grid {
    gap: 0.55rem;
    align-items: center;
}

.auth-form[data-auth-form="login"] .auth-social-grid button {
    height: 38px;
    min-height: 38px;
    align-self: center;
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
}

.auth-form[data-auth-form="login"] .auth-social-grid i {
    font-size: 1.08rem;
}

.auth-form[data-auth-form="login"] .auth-divider {
    margin-block: -0.08rem;
}

.auth-form[data-auth-form="login"] .auth-submit {
    width: 100%;
    height: 40px;
    min-height: 40px;
    align-self: start;
    border-radius: 10px;
    padding-block: 0.55rem;
    box-shadow: 0 10px 22px rgba(15, 122, 79, 0.18);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--auth-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--auth-line);
}

.auth-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.auth-field {
    display: grid;
    gap: 0.32rem;
}

.auth-phone-field,
.auth-phone-control,
.auth-country-picker {
    min-width: 0;
}

.auth-phone-control {
    display: grid;
    grid-template-columns: minmax(90px, 0.34fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-phone-control:focus-within {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 4px rgba(15, 122, 79, 0.12);
}

.auth-phone-field.has-error .auth-phone-control {
    border-color: var(--auth-danger);
}

.auth-country-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--auth-line);
}

.auth-country-picker__trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 11px 0 0 11px;
    padding: 0 0.6rem;
    color: var(--auth-ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.auth-country-picker__trigger:focus-visible,
.auth-country-picker__trigger[aria-expanded="true"] {
    outline: 0;
}

.auth-country-picker__flag {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

.auth-country-picker__selected {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.18rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 750;
}

.auth-country-picker__trigger > .bi {
    margin-left: auto;
    color: var(--auth-muted);
    font-size: 0.72rem;
}

.auth-country-picker__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    width: max(100%, 230px);
    max-width: min(330px, calc(100vw - 1.5rem));
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    padding: 0.55rem;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(17, 35, 27, 0.18);
}

.auth-country-picker__menu[hidden],
.auth-country-picker__option[hidden],
.auth-country-picker__empty[hidden] {
    display: none !important;
}

.auth-country-picker__search {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    padding: 0 0.7rem;
    color: var(--auth-ink);
    background: #ffffff;
}

.auth-country-picker__search:focus {
    border-color: var(--auth-green);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 122, 79, 0.1);
}

.auth-country-picker__options {
    max-height: min(300px, 52vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth-country-picker__option {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 9px;
    padding: 0 0.55rem;
    color: var(--auth-ink);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.auth-country-picker__option:hover,
.auth-country-picker__option:focus-visible,
.auth-country-picker__option[aria-selected="true"] {
    background: rgba(15, 122, 79, 0.08);
    outline: 0;
}

.auth-country-picker__option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 700;
}

.auth-country-picker__option-code {
    margin-left: auto;
    color: var(--auth-muted);
    font-size: 0.8rem;
    font-weight: 750;
}

.auth-country-picker__empty {
    margin: 0;
    padding: 0.65rem 0.55rem;
    color: var(--auth-muted);
    font-size: 0.82rem;
}

.auth-phone-number-shell input {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 0 11px 11px 0;
    padding: 0 0.75rem;
    color: var(--auth-ink);
    background: transparent;
    outline: 0;
}

.auth-phone-number-shell input:focus {
    box-shadow: none;
}

.auth-phone-field.has-error .auth-phone-number-shell input {
    box-shadow: none;
}

.auth-phone-messages:empty {
    display: none;
}

.auth-phone-messages .auth-field-message {
    margin: 0.2rem 0 0;
}

.auth-field label,
.auth-check label {
    color: var(--auth-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

.auth-input-shell {
    position: relative;
}

.auth-input-shell input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    padding: 0 2.8rem 0 0.95rem;
    color: var(--auth-ink);
    background: #ffffff;
    outline: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-input-shell select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    padding: 0 0.95rem;
    color: var(--auth-ink);
    background: #ffffff;
    outline: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-input-shell select:focus {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 4px rgba(15, 122, 79, 0.12);
}

.auth-input-shell input::placeholder {
    color: #96a69f;
}

.auth-input-shell input:focus {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 4px rgba(15, 122, 79, 0.12);
}

.auth-input-shell input:disabled {
    color: #8a9993;
    background: #f0f4f2;
    cursor: not-allowed;
}

.auth-input-state {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.auth-field.has-error input,
.auth-check.has-error input {
    border-color: var(--auth-danger);
}

.auth-field.has-error input:focus {
    box-shadow: 0 0 0 4px rgba(194, 65, 53, 0.12);
}

.auth-field.has-error .auth-input-state {
    background: var(--auth-danger);
}

.auth-field.has-error .auth-input-state::before,
.auth-field.has-error .auth-input-state::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 10px;
    height: 2px;
    background: #ffffff;
}

.auth-field.has-error .auth-input-state::before {
    transform: rotate(45deg);
}

.auth-field.has-error .auth-input-state::after {
    transform: rotate(-45deg);
}

.auth-field.has-success input {
    border-color: var(--auth-success);
}

.auth-field.has-success .auth-input-state {
    background: var(--auth-success);
}

.auth-field-message,
.auth-check p,
.auth-strength small {
    min-height: 0.95rem;
    margin: 0;
    color: var(--auth-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-field.has-error .auth-field-message,
.auth-check.has-error p {
    color: var(--auth-danger);
}

.auth-field.has-success .auth-field-message {
    color: var(--auth-success);
}

.auth-strength {
    display: grid;
    gap: 0.35rem;
}

.auth-strength span {
    display: block;
    height: 5px;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: #e4ebe7;
}

.auth-strength span::before {
    content: "";
    display: block;
    width: var(--strength-width, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--strength-color, var(--auth-line));
    transition: width 220ms ease, background 220ms ease;
}

.auth-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0.65rem;
    align-items: start;
}

.auth-check input {
    width: 20px;
    height: 20px;
    margin: 0.1rem 0 0;
    accent-color: var(--auth-green);
}

.auth-check p {
    grid-column: 2;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-link,
.auth-toggle-copy button {
    border: 0;
    padding: 0;
    color: var(--auth-green);
    background: transparent;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.auth-link:hover,
.auth-toggle-copy button:hover {
    color: var(--auth-green-dark);
}

.auth-submit {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    background: var(--auth-green);
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(15, 122, 79, 0.2);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-submit::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    transform: translate(-50%, -50%);
    transition: width 260ms ease, height 260ms ease;
}

.auth-submit:hover {
    background: var(--auth-green-dark);
    box-shadow: 0 18px 36px rgba(15, 122, 79, 0.25);
}

.auth-submit:active {
    transform: scale(0.985);
}

.auth-submit:active::after {
    width: 220px;
    height: 220px;
}

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

.auth-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: authSpin 720ms linear infinite;
}

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

.auth-toggle-copy {
    margin: 0;
    color: var(--auth-muted);
    text-align: center;
}

.auth-future-hooks {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--auth-line);
}

.auth-future-hooks span {
    border-radius: 999px;
    padding: 0.4rem 0.65rem;
    color: var(--auth-muted);
    background: var(--auth-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.auth-mode-button:focus-visible,
.auth-link:focus-visible,
.auth-toggle-copy button:focus-visible,
.auth-submit:focus-visible,
.auth-social-grid button:focus-visible,
.auth-logo:focus-visible,
.auth-card-logo:focus-visible,
.auth-check input:focus-visible {
    outline: 3px solid rgba(244, 189, 79, 0.8);
    outline-offset: 3px;
}

@keyframes authSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 1080px) {
    .auth-page {
        grid-template-columns: minmax(340px, 0.82fr) minmax(460px, 1.18fr);
    }

    .auth-brand-content {
        padding: 2rem;
    }
}

@media (max-width: 900px) {
    .auth-page {
        height: 100vh;
        grid-template-columns: 1fr;
        background: #f8fbf9;
    }

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

    .auth-form-panel {
        height: 100vh;
        min-height: 0;
        padding: 1rem;
    }

    .auth-card {
        max-height: calc(100vh - 2rem);
        margin-top: 0;
    }
}

@media (max-width: 620px) {
    .auth-form-panel {
        padding: 0.65rem;
    }

    .auth-card {
        width: 100%;
        max-height: calc(100vh - 1.3rem);
        margin-top: 0;
        padding: 0.85rem;
    }

    .auth-card-header,
    .auth-form-row {
        align-items: stretch;
        flex-direction: column;
    }

    .auth-mode-switch {
        width: 100%;
    }

    .auth-social-grid,
    .auth-field-grid {
        grid-template-columns: 1fr;
    }

    .auth-form[data-auth-form="login"] .auth-social-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auth-form[data-auth-form="login"] .auth-social-grid button {
        width: auto;
        height: 38px;
        min-height: 38px;
        padding: 0.42rem 0.55rem;
    }

    .auth-form-intro h2 {
        font-size: 1.65rem;
    }
}