:root {
    --auth-bg: #101722;
    --auth-panel: #182334;
    --auth-card: rgba(27, 39, 57, 0.96);
    --auth-border: rgba(145, 164, 197, 0.18);
    --auth-muted: #91a4c5;
    --auth-text: #f6f8fc;
    --auth-accent: #6675ff;
    --auth-accent-2: #23c7a1;
}

* { box-sizing: border-box; }

body.auth-shell {
    min-height: 100vh;
    margin: 0;
    color: var(--auth-text);
    background:
        radial-gradient(circle at 12% 10%, rgba(102, 117, 255, 0.2), transparent 36%),
        radial-gradient(circle at 90% 92%, rgba(35, 199, 161, 0.12), transparent 32%),
        var(--auth-bg);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(480px, 1.1fr);
    min-height: 100vh;
}

.auth-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(32px, 5vw, 72px);
    border-right: 1px solid var(--auth-border);
    background: linear-gradient(145deg, rgba(28, 39, 59, 0.95), rgba(16, 23, 34, 0.92));
}

.auth-story::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -190px;
    top: 20%;
    border: 1px solid rgba(102, 117, 255, 0.22);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(102, 117, 255, 0.04), 0 0 0 120px rgba(102, 117, 255, 0.025);
    pointer-events: none;
}

.auth-brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; }
.auth-brand picture { display: inline-flex; }
.auth-brand img { width: auto; height: 38px; object-fit: contain; }
.auth-brand--form { display: flex; justify-content: center; width: 100%; margin: 0 0 30px; }
.auth-brand--form img { height: 42px; }

.auth-story__content { position: relative; z-index: 1; max-width: 520px; }
.auth-eyebrow { color: #9ca8ff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; }
.auth-story h1 { max-width: 620px; margin: 16px 0; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 1.03; letter-spacing: -0.045em; }
.auth-story__content > p { max-width: 500px; color: var(--auth-muted); font-size: 1.05rem; line-height: 1.7; }
.auth-benefits { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; gap: 12px; align-items: center; color: #cad4e6; }
.auth-benefits i { display: grid; place-items: center; width: 26px; height: 26px; color: var(--auth-accent-2); border: 1px solid rgba(35, 199, 161, 0.28); border-radius: 50%; background: rgba(35, 199, 161, 0.08); }
.auth-story__note { position: relative; z-index: 1; margin: 0; color: #7083a3; font-size: 0.78rem; }

.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 24px 20px; }
.auth-card { width: min(100%, 480px); padding: clamp(26px, 4vw, 42px); border: 1px solid var(--auth-border); border-radius: 20px; background: var(--auth-card); box-shadow: 0 30px 90px rgba(2, 8, 18, 0.28); backdrop-filter: blur(14px); }
.auth-card__header { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 28px; }
.auth-card__header h2 { margin: 0 0 6px; color: var(--auth-text); font-size: 1.55rem; letter-spacing: -0.025em; }
.auth-card__header p { margin: 0; color: var(--auth-muted); line-height: 1.55; }
.auth-card__icon { display: grid; flex: 0 0 42px; place-items: center; height: 42px; color: #aeb7ff; border: 1px solid rgba(102, 117, 255, 0.24); border-radius: 12px; background: rgba(102, 117, 255, 0.1); font-size: 1.25rem; }
.auth-alerts { margin-bottom: 22px; }
.auth-alerts .alert { margin-bottom: 10px; border-radius: 10px; font-size: 0.88rem; }
.auth-form-error { padding: 11px 12px; color: #ff9aab; border: 1px solid rgba(255, 93, 120, .28); border-radius: 10px; background: rgba(255, 93, 120, .08); font-size: .8rem; line-height: 1.45; }

.auth-form { display: grid; gap: 18px; }
.auth-field { min-width: 0; }
.auth-label-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.auth-label-row a, .auth-alternative a { color: #aeb7ff; font-weight: 600; }
.auth-label { display: block; margin-bottom: 7px; color: #d9e1ef; font-size: 0.82rem; font-weight: 650; }
.auth-input.form-control { min-height: 48px; padding: 0.72rem 0.9rem; color: var(--auth-text); border-color: var(--auth-border); border-radius: 10px; background: #111b2a; box-shadow: none; }
.auth-input.form-control::placeholder { color: #657895; }
.auth-input.form-control:focus { border-color: rgba(102, 117, 255, 0.8); background: #111b2a; box-shadow: 0 0 0 3px rgba(102, 117, 255, 0.13); }
.auth-help { display: block; margin-top: 7px; color: #7f92b1; font-size: 0.76rem; line-height: 1.45; }
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 48px; }
.auth-password__toggle { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #91a4c5; border: 0; border-radius: 8px; background: transparent; font-size: 1.05rem; }
.auth-password__toggle:hover, .auth-password__toggle:focus-visible { color: #fff; background: rgba(145, 164, 197, 0.1); }
.auth-password .invalid-feedback { padding-right: 48px; }
.auth-password-meter { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #0e1724; }
.auth-password-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: #ff5d78; transition: width 160ms ease, background-color 160ms ease; }
.auth-password-meter[data-score="2"] span { background: #f2b94b; }
.auth-password-meter[data-score="3"] span { background: var(--auth-accent-2); }

.auth-check { display: flex; gap: 10px; align-items: flex-start; color: #aebbd0; font-size: 0.82rem; line-height: 1.45; cursor: pointer; }
.auth-check .form-check-input { flex: 0 0 auto; margin-top: 2px; }
.auth-check--terms { margin-top: -2px; }
.auth-check-error { margin-top: 6px; }
.auth-submit.btn { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 49px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #6675ff, #5264f1); font-weight: 700; box-shadow: 0 12px 28px rgba(82, 100, 241, 0.22); }
.auth-submit.btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, #7583ff, #5c6df5); }
.auth-submit-note { margin: -8px 0 0; color: #7184a4; text-align: center; font-size: 0.74rem; line-height: 1.45; }
.auth-alternative { margin: 25px 0 0; padding-top: 22px; color: var(--auth-muted); border-top: 1px solid var(--auth-border); text-align: center; font-size: 0.86rem; }
.auth-alternative i { vertical-align: -1px; }
.auth-footer { display: flex; justify-content: space-between; width: min(100%, 480px); margin-top: 20px; color: #617492; font-size: 0.72rem; }

@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-panel { min-height: 100vh; }
}

@media (max-width: 520px) {
    .auth-panel { justify-content: flex-start; padding: 18px 12px; }
    .auth-card { padding: 24px 20px; border-radius: 16px; }
    .auth-card__header { margin-bottom: 24px; }
    .auth-footer { padding: 0 4px; }
    .auth-footer span:last-child { display: none; }
}

@media (max-width: 420px) {
    .auth-brand--form img { width: 52px; height: 52px; }
}

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