:root {
    --sb-bg: #050711;
    --sb-bg-2: #080b18;
    --sb-card: rgba(11, 16, 31, 0.78);
    --sb-card-strong: rgba(13, 18, 34, 0.92);
    --sb-border: rgba(148, 163, 184, 0.22);
    --sb-border-strong: rgba(168, 85, 247, 0.38);
    --sb-text: #f8fafc;
    --sb-muted: #a8b0c3;
    --sb-muted-2: #7f879a;
    --sb-primary: #8b3dff;
    --sb-primary-2: #b653ff;
    --sb-primary-3: #6d28d9;
    --sb-danger: #fb7185;
    --sb-success: #78f5cb;
    --sb-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
    --sb-radius-xl: 30px;
    --sb-radius-lg: 22px;
    --sb-radius-md: 14px;
    --sb-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--sb-bg);
}

body.sb-derived-page {
    min-height: 100vh;
    margin: 0;
    color: var(--sb-text);
    font-family: var(--sb-font);
    background: radial-gradient(circle at 38% 8%, rgba(139, 61, 255, 0.34), transparent 30rem), radial-gradient(circle at 82% 24%, rgba(91, 33, 182, 0.18), transparent 28rem), linear-gradient(135deg, #060816 0%, #050711 48%, #070a15 100%);
    overflow-x: hidden;
}

    body.sb-derived-page::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, rgba(168, 85, 247, 0.34) 0 1px, transparent 1px);
        background-size: 140px 140px;
        opacity: 0.22;
        z-index: 0;
    }

    body.sb-derived-page::after {
        content: "";
        position: fixed;
        inset: auto 0 0;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.45), transparent);
        z-index: 0;
    }

a {
    color: #c084fc;
}

.sb-derived-shell {
    position: relative;
    z-index: 1;
    width: min(1540px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 540px);
    gap: clamp(36px, 6vw, 96px);
    align-items: center;
    padding: clamp(28px, 5vw, 62px) 0;
}

.sb-derived-shell--compact {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
}

.sb-derived-hero {
    position: relative;
    min-height: min(780px, calc(100vh - 80px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 92px 0 56px;
}

.sb-brand {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--sb-text);
}

.sb-brand__mark {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.55));
}

.sb-brand__text {
    display: grid;
    gap: 4px;
    line-height: 1;
}

    .sb-brand__text strong {
        color: #ffffff;
        font-size: clamp(1.3rem, 2vw, 1.8rem);
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .sb-brand__text small {
        color: #c084fc;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

.sb-derived-visual {
    position: absolute;
    top: clamp(64px, 12vh, 116px);
    right: clamp(-120px, -7vw, -42px);
    width: clamp(620px, 54vw, 920px);
    max-width: none;
    pointer-events: none;
    opacity: 0.7;
    z-index: -1;
}

    .sb-derived-visual::before {
        content: "";
        position: absolute;
        inset: -12% -10% -12% -18%;
        background: radial-gradient(ellipse at 58% 46%, rgba(139, 61, 255, 0.22), transparent 56%), radial-gradient(ellipse at 44% 46%, rgba(76, 29, 149, 0.16), transparent 62%);
        filter: blur(34px);
        z-index: -1;
    }

    .sb-derived-visual img {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0.94;
        mix-blend-mode: screen;
        -webkit-mask-image: radial-gradient(ellipse at 58% 50%, #000 0%, #000 43%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.24) 70%, transparent 84%);
        mask-image: radial-gradient(ellipse at 58% 50%, #000 0%, #000 43%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.24) 70%, transparent 84%);
    }

.sb-derived-copy {
    position: relative;
    width: min(620px, 100%);
    z-index: 1;
}

.sb-eyebrow {
    margin: 0 0 24px;
    color: #c084fc;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.sb-derived-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.65rem, 5.8vw, 5.7rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
    max-width: 720px;
}

    .sb-derived-copy h1 span {
        display: block;
        color: var(--sb-primary-2);
    }

.sb-derived-copy > p:not(.sb-eyebrow) {
    max-width: 560px;
    margin: 28px 0 0;
    color: var(--sb-muted);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.65;
}

.sb-step-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

    .sb-step-pills span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 14px;
        color: var(--sb-muted);
        border: 1px solid var(--sb-border);
        border-radius: 999px;
        background: rgba(10, 16, 31, 0.48);
        backdrop-filter: blur(16px);
    }

    .sb-step-pills b {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2));
        box-shadow: 0 8px 22px rgba(139, 61, 255, 0.35);
    }

.sb-derived-card {
    position: relative;
    width: 100%;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(5, 10, 24, 0.92)), radial-gradient(circle at 20% 0%, rgba(139, 61, 255, 0.16), transparent 22rem);
    box-shadow: var(--sb-shadow);
    backdrop-filter: blur(22px);
}

    .sb-derived-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 70%, rgba(168, 85, 247, 0.1));
        opacity: 0.55;
    }

.sb-login-card__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 30px;
}

    .sb-login-card__header h2 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(1.8rem, 2.5vw, 2.35rem);
        line-height: 1.1;
        letter-spacing: -0.045em;
    }

    .sb-login-card__header p {
        margin: 10px 0 0;
        color: var(--sb-muted);
        line-height: 1.5;
    }

.sb-login-form,
.sb-derived-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.sb-field {
    display: grid;
    gap: 9px;
}

    .sb-field label {
        color: #f8fafc;
        font-size: 0.92rem;
        font-weight: 800;
    }

.sb-input-shell {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid var(--sb-border);
    border-radius: 13px;
    background: rgba(5, 10, 24, 0.72);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .sb-input-shell:focus-within {
        border-color: rgba(168, 85, 247, 0.78);
        box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.16);
        background: rgba(5, 10, 24, 0.92);
    }

    .sb-input-shell img {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        opacity: 0.76;
    }

    .sb-input-shell input,
    .sb-input-shell select {
        width: 100%;
        min-width: 0;
        height: 54px;
        border: 0;
        outline: 0;
        color: var(--sb-text);
        background: transparent;
        font: inherit;
    }

        .sb-input-shell input::placeholder {
            color: rgba(168, 176, 195, 0.72);
        }

.sb-input-shell--select::after {
    content: "⌄";
    color: var(--sb-muted);
    padding-right: 4px;
    pointer-events: none;
}

.sb-input-shell select {
    appearance: none;
}

    .sb-input-shell select option {
        color: #111827;
    }

.sb-input-shell--centered input {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: 0.35em;
    font-weight: 800;
}

.sb-field-error {
    min-height: 18px;
    color: var(--sb-danger);
    font-size: 0.82rem;
}

.sb-primary-button {
    min-height: 58px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2) 52%, var(--sb-primary-3));
    box-shadow: 0 18px 50px rgba(139, 61, 255, 0.34);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

    .sb-primary-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 22px 64px rgba(139, 61, 255, 0.42);
    }

    .sb-primary-button:disabled {
        cursor: not-allowed;
        opacity: 0.72;
        transform: none;
        filter: none;
    }

.sb-primary-button--link {
    text-decoration: none;
}

.sb-button-loader {
    width: 18px;
    height: 18px;
    display: none;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.34);
    border-top-color: #ffffff;
    animation: sb-spin 0.8s linear infinite;
}

.sb-primary-button.is-loading .sb-button-loader {
    display: inline-block;
}

.sb-divider {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 26px 0 18px;
    color: var(--sb-muted-2);
    font-size: 0.88rem;
}

    .sb-divider::before,
    .sb-divider::after {
        content: "";
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.28));
    }

    .sb-divider::after {
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.28), transparent);
    }

.sb-sso-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sb-sso-grid--single {
    grid-template-columns: 1fr;
}

.sb-sso-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--sb-text);
    text-decoration: none;
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    background: rgba(5, 10, 24, 0.62);
    font-weight: 800;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

    .sb-sso-button:hover {
        transform: translateY(-1px);
        border-color: rgba(168, 85, 247, 0.52);
        background: rgba(17, 24, 39, 0.78);
    }

.sb-secondary-hint {
    position: relative;
    z-index: 1;
    margin: 20px 0 0;
    color: var(--sb-muted);
    font-size: 0.91rem;
    line-height: 1.55;
    text-align: center;
}

    .sb-secondary-hint a {
        color: #c084fc;
        font-weight: 800;
    }

.sb-alert {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(251, 113, 133, 0.3);
    border-radius: 13px;
    color: #fecdd3;
    background: rgba(251, 113, 133, 0.08);
    line-height: 1.45;
}

    .sb-alert[hidden] {
        display: none !important;
    }

    .sb-alert[data-kind="success"] {
        border-color: rgba(120, 245, 203, 0.28);
        color: #bfffea;
        background: rgba(120, 245, 203, 0.09);
    }

    .sb-alert[data-kind="warning"] {
        border-color: rgba(255, 215, 128, 0.4);
        color: #ffe2a8;
        background: rgba(255, 182, 72, 0.08);
    }

.sb-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sb-auth-actions {
    display: grid;
    gap: 8px;
    margin-top: 26px;
    text-align: center;
}

    .sb-auth-actions .sb-signup-hint,
    .sb-auth-actions .sb-secondary-hint {
        margin: 0;
    }

.sb-centered-shell {
    position: relative;
    min-height: calc(100vh - 40px);
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

    .sb-centered-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 18%, rgba(139, 61, 255, 0.25), transparent 28rem), url('/img/illustrations/neural-avatar.svg') center 8% / min(620px, 86vw) auto no-repeat;
        opacity: 0.38;
        filter: blur(0.1px);
        mask-image: radial-gradient(circle at 50% 22%, #000 0 38%, transparent 74%);
    }

.sb-login-card--centered {
    position: relative;
    width: min(560px, 100%);
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(5, 10, 24, 0.92)), radial-gradient(circle at 20% 0%, rgba(139, 61, 255, 0.16), transparent 22rem);
    box-shadow: var(--sb-shadow);
    backdrop-filter: blur(22px);
    text-align: center;
    z-index: 1;
}

    .sb-login-card--centered h1 {
        margin: 0;
        color: var(--sb-text);
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1.05;
        letter-spacing: -0.05em;
    }

.sb-center-lead {
    margin: 18px auto 28px;
    max-width: 460px;
    color: var(--sb-muted);
    line-height: 1.58;
}

.sb-status-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 22px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: linear-gradient(145deg, rgba(139, 61, 255, 0.34), rgba(139, 61, 255, 0.1));
    box-shadow: 0 18px 50px rgba(139, 61, 255, 0.28);
}

    .sb-status-icon img {
        width: 34px;
        height: 34px;
    }

.sb-email-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    margin: 0 auto 26px;
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 999px;
    background: rgba(6, 12, 25, 0.46);
}

.sb-next-actions {
    display: grid;
    gap: 14px;
}

.sb-link-button {
    text-align: center;
    text-decoration: none;
}

.sb-ghost-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: #c798ff;
    font-weight: 760;
}

.sb-invite-summary {
    padding: 14px 16px;
    border: 1px solid rgba(120, 245, 203, 0.24);
    border-radius: 14px;
    color: var(--sb-muted);
    background: rgba(120, 245, 203, 0.08);
    text-align: left;
}

    .sb-invite-summary strong {
        color: var(--sb-text);
    }

.sb-status-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 32px;
    text-align: center;
    color: var(--sb-text);
    background: radial-gradient(circle at 50% 32%, rgba(139, 61, 255, 0.34), transparent 30rem), linear-gradient(135deg, var(--sb-bg), #050711);
}

.sb-status-logo {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 0 26px rgba(168, 85, 247, 0.48));
}

.sb-status-shell h1 {
    margin: 10px 0 0;
    font-size: clamp(2rem, 5vw, 3.3rem);
    letter-spacing: -0.05em;
}

.sb-status-shell p {
    max-width: 560px;
    margin: 0;
    color: var(--sb-muted);
    line-height: 1.6;
}

.sb-status-spinner {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #a855f7;
    animation: sb-spin 0.9s linear infinite;
}

.sb-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 14px;
}

@keyframes sb-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1240px) {
    .sb-derived-shell,
    .sb-derived-shell--compact {
        width: min(100% - 32px, 760px);
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
        padding-top: 28px;
    }

    .sb-derived-hero {
        min-height: auto;
        padding: 116px 0 8px;
    }

    .sb-derived-visual {
        top: 40px;
        right: -22%;
        width: min(720px, 95vw);
        opacity: 0.28;
    }

    .sb-derived-copy {
        width: 100%;
    }

        .sb-derived-copy h1 {
            font-size: clamp(2.5rem, 8vw, 4.2rem);
        }

    .sb-derived-card {
        margin-bottom: 32px;
    }
}

@media (max-width: 720px) {
    body.sb-derived-page::before {
        background-size: 96px 96px;
    }

    .sb-derived-shell,
    .sb-derived-shell--compact {
        width: min(100% - 24px, 100%);
        padding: 20px 0 28px;
    }

    .sb-brand {
        gap: 12px;
    }

    .sb-brand__mark {
        width: 58px;
        height: 58px;
    }

    .sb-brand__text strong {
        font-size: 1.05rem;
    }

    .sb-brand__text small {
        font-size: 0.68rem;
    }

    .sb-derived-hero {
        padding-top: 100px;
    }

    .sb-derived-copy h1 {
        font-size: clamp(2.25rem, 12vw, 3.3rem);
    }

    .sb-derived-copy > p:not(.sb-eyebrow) {
        font-size: 0.98rem;
    }

    .sb-step-pills {
        gap: 10px;
    }

        .sb-step-pills span {
            min-height: 40px;
            font-size: 0.86rem;
        }

    .sb-derived-card {
        padding: 24px 18px;
        border-radius: 24px;
    }

    .sb-sso-grid,
    .sb-field-grid {
        grid-template-columns: 1fr;
    }

    .sb-input-shell {
        min-height: 54px;
    }

    .sb-primary-button {
        min-height: 56px;
    }
}