:root {
    font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, sans-serif;

    color: #17172a;
    background: #0c0b20;
    font-synthesis: none;

    --ifs-navy: #0c0b20;
    --ifs-navy-2: #15122c;
    --ifs-ink: #17172a;
    --ifs-text: #505268;
    --ifs-muted: #7b7d91;

    --ifs-purple: #7d3cff;
    --ifs-purple-strong: #6330e8;
    --ifs-violet: #a54cff;
    --ifs-cyan: #21d4d8;
    --ifs-cyan-strong: #13bfc5;

    --ifs-purple-soft: #f5f0ff;
    --ifs-cyan-soft: #ebfbfb;

    --ifs-border: #e3e3ec;
    --ifs-border-strong: #c9cad7;

    --ifs-panel: #ffffff;
    --ifs-danger: #c43652;
    --ifs-success: #198754;

    --ifs-shadow:
        0 34px 90px rgba(5, 3, 24, .28),
        0 8px 30px rgba(5, 3, 24, .10);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background: var(--ifs-navy);
}

body {
    min-height: 100vh;
    color: var(--ifs-ink);
    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(125, 60, 255, .28),
            transparent 29rem
        ),
        radial-gradient(
            circle at 83% 20%,
            rgba(33, 212, 216, .18),
            transparent 27rem
        ),
        linear-gradient(
            145deg,
            #0a091d 0%,
            #111027 48%,
            #0c0c1e 100%
        );
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .65),
            transparent 72%
        );
}

a {
    color: var(--ifs-purple-strong);
}

button,
input,
select {
    font: inherit;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.page-shell {
    position: relative;
    z-index: 1;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 34px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    background: rgba(9, 8, 29, .62);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: #ffffff;
    text-decoration: none;
}

.brand-logo {
    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 14px rgba(125, 60, 255, .42));
}

.brand-copy {
    display: grid;
    gap: 3px;
}

.brand-name {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #ffffff;

    font-size: 15px;
    line-height: 1;
}

.brand-name strong {
    letter-spacing: .08em;
}

.brand-separator {
    width: 1px;
    height: 17px;
    background: rgba(255, 255, 255, .28);
}

.brand-subtitle {
    color: rgba(255, 255, 255, .54);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.topbar-label {
    color: rgba(255, 255, 255, .56);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.main-content {
    flex: 1;

    width: min(780px, calc(100% - 32px));

    margin: 0 auto;

    padding: 54px 0 70px;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;

    padding: 20px 34px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    color: rgba(255, 255, 255, .5);

    font-size: 12px;

    background: rgba(7, 6, 24, .52);
}

.footer a {
    color: #8ee9ec;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   SIGNUP CARD
   ========================================================= */

.signup-page {
    width: 100%;
}

.signup-card,
.verify-card,
.message-card {
    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, .985);

    border: 1px solid rgba(255, 255, 255, .7);

    box-shadow: var(--ifs-shadow);

    border-radius: 24px;
}

.signup-card::before {
    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--ifs-purple) 0%,
            var(--ifs-violet) 44%,
            var(--ifs-cyan) 100%
        );
}

.signup-card {
    padding: 42px 48px 46px;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.signup-header {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 26px;
}

.signup-brand-mark {
    width: 72px;
    height: 72px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(165, 76, 255, .14),
            rgba(33, 212, 216, .08)
        );

    border: 1px solid #ece6ff;
}

.signup-brand-mark img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.signup-heading {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 7px;

    color: var(--ifs-purple-strong);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}

h1,
h2 {
    margin-top: 0;
    color: var(--ifs-ink);
}

h1 {
    margin-bottom: 9px;

    font-size: clamp(31px, 5vw, 42px);

    line-height: 1.04;

    letter-spacing: -.045em;

    font-weight: 760;
}

h2 {
    margin-bottom: 10px;
    font-size: 28px;
    letter-spacing: -.025em;
}

.signup-intro {
    max-width: 58ch;

    margin: 0;

    color: var(--ifs-text);

    font-size: 15px;
    line-height: 1.55;
}


/* =========================================================
   SMALL PROCESS INDICATOR
   ========================================================= */

.signup-progress {
    display: flex;
    align-items: center;

    margin: 0 0 30px;

    padding: 13px 16px;

    border: 1px solid #ececf3;

    border-radius: 13px;

    background: #fafafe;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #9293a2;

    font-size: 11px;
    font-weight: 650;

    white-space: nowrap;
}

.progress-item.is-active {
    color: #4b2e95;
}

.progress-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #c9c9d4;
}

.progress-item.is-active .progress-dot {
    background:
        linear-gradient(
            135deg,
            var(--ifs-purple),
            var(--ifs-cyan)
        );

    box-shadow:
        0 0 0 4px rgba(125, 60, 255, .09);
}

.progress-line {
    flex: 1;

    min-width: 24px;

    height: 1px;

    margin: 0 12px;

    background: #dedee7;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.form-section {
    min-width: 0;

    margin: 0 0 31px;

    padding: 0;

    border: 0;
}

.form-section + .form-section {
    padding-top: 28px;
    border-top: 1px solid #eeeeF4;
}

.form-section legend {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 19px;
    padding: 0;

    color: #2c2c40;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .035em;
    text-transform: uppercase;
}

.section-number {
    width: 29px;
    height: 24px;

    display: inline-grid;
    place-items: center;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--ifs-purple-soft),
            var(--ifs-cyan-soft)
        );

    color: var(--ifs-purple-strong);

    font-size: 10px;
    letter-spacing: .05em;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.field-row {
    margin-bottom: 19px;
}

.field-row:last-child {
    margin-bottom: 0;
}

.field-row label {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 8px;

    color: #313144;

    font-size: 13px;
    font-weight: 700;
}

.required {
    color: #c43652;
}

.optional {
    margin-left: 3px;

    color: #999aaa;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.form-control {
    width: 100%;

    min-height: 49px;

    padding: 11px 14px;

    border: 1px solid var(--ifs-border-strong);

    border-radius: 10px;

    background: #ffffff;

    color: var(--ifs-ink);

    outline: none;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.form-control:hover {
    border-color: #aaaabd;
}

.form-control:focus {
    border-color: var(--ifs-purple);

    box-shadow:
        0 0 0 4px rgba(125, 60, 255, .10);

    background: #fff;
}

.form-control.invalid {
    border-color: var(--ifs-danger);

    box-shadow:
        0 0 0 3px rgba(196, 54, 82, .08);
}

select.form-control {
    cursor: pointer;
}

.two-column {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.field-help {
    margin: 7px 0 0;

    color: var(--ifs-muted);

    font-size: 11.5px;
    line-height: 1.5;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.validation-message {
    display: block;

    margin-top: 6px;

    color: var(--ifs-danger);

    font-size: 12px;
}

.validation-summary {
    margin: 0 0 22px;

    padding: 13px 15px;

    border: 1px solid #efc9d2;
    border-left: 4px solid var(--ifs-danger);

    border-radius: 10px;

    background: #fff5f7;

    color: #8f263d;

    font-size: 13px;
    line-height: 1.5;
}

.validation-summary:empty {
    display: none;
}

.validation-summary ul {
    margin: 4px 0 0;
    padding-left: 18px;
}


/* =========================================================
   NOTICES
   ========================================================= */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 24px;

    padding: 14px 15px;

    border-radius: 12px;

    font-size: 12.5px;
    line-height: 1.5;
}

.notice > div:last-child {
    display: grid;
    gap: 4px;
}

.notice-icon {
    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

.info-notice {
    border: 1px solid #d8d0f7;

    background:
        linear-gradient(
            135deg,
            #f7f3ff,
            #f2fcfc
        );

    color: #534968;
}

.info-notice .notice-icon {
    background: #e7ddff;
    color: #6231dc;
}

.success-notice {
    border: 1px solid #c8e4d1;
    background: #f0faf3;
    color: #285c38;
}

.success-notice .notice-icon {
    background: #d9f0df;
    color: #1c7640;
}

.error-notice {
    border: 1px solid #efcbd3;
    background: #fff4f6;
    color: #842b3e;
}

.error-notice .notice-icon {
    background: #f8dce2;
    color: #a62e47;
}

.dev-notice {
    border: 1px solid #e5dbb5;
    background: #fffbea;
    color: #6b581b;
}

.dev-notice .notice-icon {
    background: #f6ecc4;
    color: #775e09;
}

.notice code {
    font-size: 11px;
}

.notice-action {
    margin-top: 6px;
}

.notice-action a {
    font-weight: 700;
}


/* =========================================================
   PRIMARY ACTION
   ========================================================= */

.form-actions {
    padding-top: 2px;
}

.terms-notice {
    max-width: 520px;

    margin: 0 auto 14px;

    color: var(--ifs-muted);

    font-size: 12px;
    line-height: 1.55;

    text-align: center;
}

.terms-notice a {
    font-weight: 700;
}

.primary-button,
.button-link {
    width: 100%;

    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 12px 18px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            100deg,
            #6f35ee 0%,
            #8a43f5 48%,
            #21cfd1 100%
        );

    color: #ffffff;

    font-weight: 760;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(105, 52, 231, .22);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.primary-button:hover:not(:disabled),
.button-link:hover {
    transform: translateY(-1px);

    filter: saturate(1.06);

    box-shadow:
        0 15px 32px rgba(105, 52, 231, .28);
}

.primary-button:focus-visible,
.button-link:focus-visible {
    outline: 3px solid rgba(33, 212, 216, .42);
    outline-offset: 3px;
}

.primary-button:disabled {
    cursor: wait;
    opacity: .66;
    transform: none;
    box-shadow: none;
}

.button-arrow {
    font-size: 19px;
    line-height: 1;
    transition: transform .16s ease;
}

.primary-button:hover:not(:disabled) .button-arrow {
    transform: translateX(3px);
}

.form-footer-note {
    max-width: 520px;

    margin: 13px auto 0;

    color: var(--ifs-muted);

    font-size: 11.5px;
    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   LOADING
   ========================================================= */

.spinner {
    width: 16px;
    height: 16px;

    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;

    border-radius: 50%;

    animation: spin .8s linear infinite;
}

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


/* =========================================================
   VERIFY / ERROR PAGES
   ========================================================= */

.verify-wrap {
    width: min(620px, 100%);
    margin: 20px auto 0;
}

.verify-card,
.message-card {
    padding: 44px;
    text-align: center;
}

.verify-card::before,
.message-card::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--ifs-purple),
            var(--ifs-violet),
            var(--ifs-cyan)
        );
}

.verify-card h1,
.message-card h1 {
    max-width: none;

    font-size: clamp(30px, 4vw, 40px);
}

.verify-card p,
.message-card p {
    color: var(--ifs-text);
    line-height: 1.65;
}

.verify-card .primary-button,
.verify-card .button-link {
    margin-top: 14px;
}

.verify-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin: 0 auto 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--ifs-purple-soft),
            var(--ifs-cyan-soft)
        );

    color: var(--ifs-purple-strong);

    font-size: 25px;
    font-weight: 800;
}

.message-card {
    width: min(620px, 100%);
    margin: 20px auto 0;
}

.error-card::before {
    background: var(--ifs-danger);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .topbar {
        min-height: 72px;
        padding: 13px 18px;
    }

    .topbar-label {
        display: none;
    }

    .main-content {
        width: min(100% - 22px, 780px);
        padding: 28px 0 46px;
    }

    .signup-card,
    .verify-card,
    .message-card {
        border-radius: 18px;
    }

    .signup-card {
        padding: 32px 24px 32px;
    }

    .signup-header {
        align-items: flex-start;
    }

    .signup-brand-mark {
        width: 60px;
        height: 60px;
        border-radius: 17px;
    }

    .signup-brand-mark img {
        width: 40px;
        height: 40px;
    }

    .signup-progress {
        overflow-x: auto;
    }

    .progress-line {
        min-width: 18px;
        margin: 0 8px;
    }

    .progress-item {
        font-size: 10px;
    }

    .two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer {
        flex-direction: column;
        gap: 8px;

        padding: 18px;

        text-align: center;
    }

    .verify-card,
    .message-card {
        padding: 32px 22px;
    }
}

@media (max-width: 520px) {

    .brand-subtitle {
        display: none;
    }

    .signup-card {
        padding-inline: 18px;
    }

    .signup-header {
        gap: 14px;
    }

    .signup-brand-mark {
        width: 52px;
        height: 52px;
    }

    .signup-brand-mark img {
        width: 36px;
        height: 36px;
    }

    h1 {
        font-size: 30px;
    }

    .signup-progress {
        display: none;
    }
}

/* Blazor FocusOnNavigate temporarily focuses the page heading.
   Prevent the browser's default black focus rectangle on non-interactive headings. */
h1[tabindex="-1"]:focus {
    outline: none;
}