:root {
    color-scheme: light;
    --auth-control-height: 54px;
    --auth-bg: #fcfbfd;
    --auth-text: #574b6a;
    --auth-muted: #7e7492;
    --auth-muted-soft: #9a8faf;
    --auth-panel-bg: rgba(255, 255, 255, 0.88);
    --auth-panel-alt: rgba(255, 255, 255, 0.72);
    --auth-border: rgba(167, 119, 207, 0.18);
    --auth-shadow: 0 24px 58px rgba(120, 104, 149, 0.14);
    --auth-input-bg: rgba(255, 255, 255, 0.92);
    --auth-button-shadow: 0 16px 28px rgba(140, 98, 190, 0.22);
    --auth-toggle-bg: rgba(255, 255, 255, 0.88);
    --auth-toggle-border: rgba(167, 119, 207, 0.16);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --auth-bg: #0f1017;
    --auth-text: #f4eef8;
    --auth-muted: #b2a7c6;
    --auth-muted-soft: #9589a9;
    --auth-panel-bg: rgba(20, 22, 34, 0.9);
    --auth-panel-alt: rgba(24, 27, 40, 0.88);
    --auth-border: rgba(189, 143, 227, 0.18);
    --auth-shadow: 0 28px 58px rgba(0, 0, 0, 0.32);
    --auth-input-bg: rgba(16, 18, 28, 0.96);
    --auth-button-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
    --auth-toggle-bg: rgba(24, 27, 40, 0.94);
    --auth-toggle-border: rgba(189, 143, 227, 0.18);
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--auth-text);
    background:
        radial-gradient(circle at top left, rgba(170, 121, 205, 0.18), transparent 28%),
        radial-gradient(circle at right, rgba(121, 207, 205, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(230, 192, 220, 0.18), transparent 28%),
        var(--auth-bg);
    font-family: 'Manrope', system-ui, sans-serif;
}

html[data-theme='dark'] body {
    background:
        radial-gradient(circle at top left, rgba(189, 143, 227, 0.14), transparent 28%),
        radial-gradient(circle at right, rgba(121, 207, 205, 0.12), transparent 24%),
        radial-gradient(circle at bottom left, rgba(255, 111, 128, 0.08), transparent 24%),
        var(--auth-bg);
}

.auth-theme-toggle {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--auth-toggle-border);
    background: var(--auth-toggle-bg);
    color: var(--auth-text);
    cursor: pointer;
    box-shadow: var(--auth-shadow);
}

.auth-shell {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 420px);
    border-radius: 30px;
    overflow: hidden;
    background: var(--auth-panel-bg);
    border: 1px solid var(--auth-border);
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(18px);
}

.auth-hero,
.auth-panel {
    padding: 48px;
}

.auth-hero {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 28px;
    background:
        linear-gradient(150deg, rgba(250, 245, 253, 0.98), rgba(238, 251, 249, 0.96)),
        #fbf8fd;
    overflow: hidden;
}

html[data-theme='dark'] .auth-hero {
    background:
        linear-gradient(150deg, rgba(29, 22, 45, 0.98), rgba(16, 32, 34, 0.94)),
        #141622;
}

.auth-hero::before,
.auth-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.auth-hero::before {
    top: -72px;
    right: -56px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(167, 119, 207, 0.18), transparent 72%);
}

.auth-hero::after {
    bottom: -64px;
    left: -24px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(121, 207, 205, 0.2), transparent 72%);
}

.auth-brand,
.auth-hero__copy,
.auth-palette,
.auth-panel__header {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: block;
}

.auth-brand__logo {
    width: min(360px, 100%);
    height: auto;
    display: block;
    filter: drop-shadow(0 14px 26px rgba(141, 118, 170, 0.14));
}

.auth-eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--auth-muted-soft);
}

.auth-hero__copy,
.auth-panel__header {
    display: grid;
    gap: 12px;
}

.auth-hero h1,
.auth-panel h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.04em;
    color: var(--auth-text);
}

.auth-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 0.98;
}

.auth-hero p,
.auth-panel__hint {
    margin: 0;
    color: var(--auth-muted);
    line-height: 1.7;
}

.auth-palette {
    display: flex;
    gap: 14px;
    align-items: center;
}

.auth-palette__dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(114, 98, 144, 0.12);
}

.auth-palette__dot--lilac {
    background: #b185d6;
}

.auth-palette__dot--aqua {
    background: #76cdcc;
}

.auth-palette__dot--rose {
    background: #e8c2dd;
}

.auth-palette__dot--sage {
    background: #bfdabf;
}

.auth-panel {
    display: grid;
    align-content: center;
    gap: 24px;
    background: var(--auth-panel-alt);
}

.auth-panel__hint,
.auth-link a {
    color: #8f62be;
}

html[data-theme='dark'] .auth-panel__hint,
html[data-theme='dark'] .auth-link a {
    color: #d8b7f4;
}

.error {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(214, 124, 160, 0.12);
    color: #bf527d;
    border: 1px solid rgba(214, 124, 160, 0.18);
}

.form {
    display: grid;
    gap: 16px;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--auth-text);
}

.form-group input {
    width: 100%;
    height: var(--auth-control-height);
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--auth-border);
    background: var(--auth-input-bg);
    color: var(--auth-text);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.password-field {
    position: relative;
    height: var(--auth-control-height);
}

.password-field input {
    height: 100%;
    padding-right: 58px;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--auth-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
}

.password-field__toggle:hover {
    background: rgba(167, 119, 207, 0.1);
    color: var(--auth-text);
}

.password-field__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(167, 119, 207, 0.12);
}

.password-field__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.password-field__icon[hidden] {
    display: none !important;
}

.password-field__icon svg {
    width: 20px;
    height: 20px;
}

.form-group input:focus {
    outline: none;
    border-color: rgba(143, 98, 190, 0.52);
    box-shadow: 0 0 0 4px rgba(167, 119, 207, 0.12);
    transform: translateY(-1px);
}

.form-group--submit button {
    width: 100%;
    border: 0;
    border-radius: 16px;
    height: var(--auth-control-height);
    padding: 0 18px;
    background: linear-gradient(135deg, #a777cf, #79cfcd);
    color: white;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--auth-button-shadow);
}

.auth-link {
    margin: 0;
    text-align: center;
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-hero,
    .auth-panel {
        padding: 32px 24px;
    }
}