/* /Components/Breadcrumbs/Breadcrumbs.razor.rz.scp.css */
/* Breadcrumbs header styling to match screenshot */
.mud-paper.pa-4.mb-2[b-9tmsb8soz2] {
	border-radius: 12px;
}

/* Ensure the right-aligned crumbs are inline and subtle */
:deep(.mud-breadcrumbs)[b-9tmsb8soz2] {
	color: var(--mud-palette-primary);
}

:deep(.mud-breadcrumbs .mud-typography)[b-9tmsb8soz2] {
	font-weight: 600;
}

:deep(.mud-breadcrumbs .mud-breadcrumbs-separator)[b-9tmsb8soz2] {
	margin: 0 8px;
	opacity: .6;
}

/* /Components/Onboarding/AddCompanyDialog.razor.rz.scp.css */
/* "Add your company" — Sequenzy's layout, Vaakio's signup tokens (wwwroot/css/signup.css). */

.ac[b-fza30ezpym] {
    --ob-accent: #845ADF;
    --ob-accent-soft: rgba(132, 90, 223, .10);
    --ob-accent-border: rgba(132, 90, 223, .22);
    --ob-accent-dark: #6B45C0;
    --ob-bg: #FDFCFE;
    --ob-bg-2: #F8F6FB;
    --ob-surface: #FFFFFF;
    --ob-jet: #1B1C2E;
    --ob-text: #333335;
    --ob-text-2: #6b6f78;
    --ob-faint: #B5B9C2;
    --ob-line: #ECE1F0;
    --ob-line-2: #D6CCD9;
    --ob-danger: #E6533C;
    --ob-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --ob-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;

    font-family: var(--ob-body);
    color: var(--ob-text);
    background: var(--ob-surface);
}

.ac-head[b-fza30ezpym] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 1.6rem 1.35rem;
    background: var(--ob-bg-2);
    border-bottom: 1px solid var(--ob-line);
}

.ac-ic[b-fza30ezpym] {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--ob-accent-soft);
    color: var(--ob-accent);
    font-size: 1.25rem;
}

.ac-title[b-fza30ezpym] {
    font-family: var(--ob-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ob-jet);
    margin: 0 0 .3rem;
    line-height: 1.2;
}

.ac-sub[b-fza30ezpym] {
    margin: 0;
    color: var(--ob-text-2);
    font-size: .92rem;
    line-height: 1.55;
}

.ac-body[b-fza30ezpym] {
    padding: 1.4rem 1.6rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.ac-label[b-fza30ezpym] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ob-jet);
    margin-bottom: .45rem;
}

/* Matches `.su-page .fld input`. */
.ac-input[b-fza30ezpym] {
    font-family: var(--ob-body);
    font-size: .95rem;
    color: var(--ob-jet);
    background: var(--ob-bg);
    border: 1.5px solid var(--ob-line-2);
    border-radius: 11px;
    padding: .75rem .9rem;
    min-height: 48px;
    width: 100%;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.ac-input[b-fza30ezpym]::placeholder { color: var(--ob-faint); }

.ac-input:focus[b-fza30ezpym] {
    border-color: var(--ob-accent);
    background: var(--ob-surface);
    box-shadow: 0 0 0 4px var(--ob-accent-soft);
}

.ac-input.is-invalid[b-fza30ezpym] {
    border-color: var(--ob-danger);
    box-shadow: 0 0 0 4px rgba(230, 83, 60, .10);
}

.ac-error[b-fza30ezpym] {
    margin: .5rem 0 0;
    font-size: .84rem;
    color: #b8412e;
}

.ac-btn[b-fza30ezpym] {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 48px;
    border: 1.5px solid transparent;
    border-radius: 11px;
    font-family: var(--ob-body);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .18s, background .18s, opacity .18s;
}

.ac-btn-primary[b-fza30ezpym] {
    background: var(--ob-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
}

.ac-btn-primary:hover:not(:disabled)[b-fza30ezpym] {
    background: var(--ob-accent-dark);
    box-shadow: 0 8px 22px rgba(132, 90, 223, .35);
    transform: translateY(-1px);
}

.ac-btn-primary:focus-visible[b-fza30ezpym] { outline: 3px solid var(--ob-accent-border); outline-offset: 2px; }

.ac-btn:disabled[b-fza30ezpym] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.ac-btn i[b-fza30ezpym] { font-size: 1.05rem; transition: transform .2s; }
.ac-btn:hover:not(:disabled) i[b-fza30ezpym] { transform: translateX(3px); }

.ac-or[b-fza30ezpym] {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.2rem 0 .9rem;
    color: var(--ob-faint);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ac-or[b-fza30ezpym]::before, .ac-or[b-fza30ezpym]::after { content: ""; flex: 1; height: 1px; background: var(--ob-line); }

.ac-link[b-fza30ezpym] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    background: none;
    border: 0;
    border-radius: 9px;
    color: var(--ob-text);
    font-family: var(--ob-body);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ac-link i[b-fza30ezpym] { color: var(--ob-text-2); font-size: 1.05rem; }
.ac-link:hover:not(:disabled)[b-fza30ezpym] { background: var(--ob-accent-soft); color: var(--ob-accent); }
.ac-link:hover:not(:disabled) i[b-fza30ezpym] { color: var(--ob-accent); }

.ac-note[b-fza30ezpym] {
    margin: .9rem 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--ob-text-2);
}

.ac-cancel[b-fza30ezpym] {
    align-self: center;
    margin-top: .9rem;
    padding: .4rem .9rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--ob-text-2);
    font-family: var(--ob-body);
    font-size: .88rem;
    cursor: pointer;
}

.ac-cancel:hover:not(:disabled)[b-fza30ezpym] { color: var(--ob-jet); background: var(--ob-bg-2); }

.ac-spin[b-fza30ezpym] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: ac-spin-b-fza30ezpym .8s linear infinite;
}

@keyframes ac-spin-b-fza30ezpym { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ac-spin[b-fza30ezpym] { animation-duration: 2s; }
    .ac-btn-primary:hover:not(:disabled)[b-fza30ezpym] { transform: none; }
}
/* /Components/Onboarding/WelcomeOnboardingBanner.razor.rz.scp.css */
.wb[b-q8451szy2m] {
    --ob-accent: #845ADF;
    --ob-accent-soft: rgba(132, 90, 223, .10);
    --ob-accent-border: rgba(132, 90, 223, .22);
    --ob-accent-dark: #6B45C0;
    --ob-jet: #1B1C2E;
    --ob-text-2: #6b6f78;
    --ob-line: #ECE1F0;

    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--ob-line);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(132, 90, 223, .08);
}

.wb-ic[b-q8451szy2m] {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--ob-accent-soft);
    color: var(--ob-accent);
    font-size: 1.2rem;
}

.wb-text[b-q8451szy2m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wb-text strong[b-q8451szy2m] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, var(--ob-jet));
}

.wb-text span[b-q8451szy2m] {
    font-size: .86rem;
    color: var(--mud-palette-text-secondary, var(--ob-text-2));
}

.wb-btn[b-q8451szy2m] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border-radius: 10px;
    background: var(--ob-accent);
    color: #fff !important;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
    transition: transform .15s, box-shadow .18s, background .18s;
}

.wb-btn:hover[b-q8451szy2m] {
    background: var(--ob-accent-dark);
    box-shadow: 0 8px 22px rgba(132, 90, 223, .35);
    transform: translateY(-1px);
}

.wb-btn i[b-q8451szy2m] { transition: transform .2s; }
.wb-btn:hover i[b-q8451szy2m] { transform: translateX(3px); }

.wb-x[b-q8451szy2m] {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary, var(--ob-text-2));
    font-size: 1.1rem;
    cursor: pointer;
}

.wb-x:hover[b-q8451szy2m] { background: var(--ob-accent-soft); color: var(--ob-accent); }

.wb.is-warn .wb-ic[b-q8451szy2m] { background: rgba(230, 83, 60, .10); color: #E6533C; }

@media (max-width: 640px) {
    .wb[b-q8451szy2m] { flex-wrap: wrap; }
    .wb-text[b-q8451szy2m] { flex-basis: calc(100% - 100px); }
    .wb-btn[b-q8451szy2m] { order: 3; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wb-btn:hover[b-q8451szy2m] { transform: none; }
}
/* /Components/Onboarding/WelcomeStyleDialog.razor.rz.scp.css */
/* Style picker — Sequenzy's two-up modal, Vaakio's signup tokens. */

.sd[b-zdzywnz6pl] {
    --ob-accent: #845ADF;
    --ob-accent-soft: rgba(132, 90, 223, .10);
    --ob-accent-border: rgba(132, 90, 223, .22);
    --ob-accent-dark: #6B45C0;
    --ob-bg-2: #F8F6FB;
    --ob-surface: #FFFFFF;
    --ob-jet: #1B1C2E;
    --ob-text-2: #6b6f78;
    --ob-faint: #B5B9C2;
    --ob-line: #ECE1F0;
    --ob-line-2: #D6CCD9;
    --ob-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --ob-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --ob-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    font-family: var(--ob-body);
    background: var(--ob-surface);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
}

.sd-head[b-zdzywnz6pl] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.6rem 1.15rem;
    border-bottom: 1px solid var(--ob-line);
}

.sd-title[b-zdzywnz6pl] {
    font-family: var(--ob-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ob-jet);
    margin: 0 0 .35rem;
}

.sd-sub[b-zdzywnz6pl] {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ob-text-2);
    max-width: 78ch;
}

.sd-x[b-zdzywnz6pl] {
    margin-left: auto;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 0;
    background: none;
    color: var(--ob-text-2);
    font-size: 1.25rem;
    cursor: pointer;
}

.sd-x:hover[b-zdzywnz6pl] { background: var(--ob-bg-2); color: var(--ob-jet); }

.sd-grid[b-zdzywnz6pl] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    padding: 1.2rem 1.6rem;
    background: var(--ob-bg-2);
    overflow: auto;
}

.sd-grid.is-expanded[b-zdzywnz6pl] { grid-template-columns: 1fr; }

.sd-card[b-zdzywnz6pl] {
    display: flex;
    flex-direction: column;
    background: var(--ob-surface);
    border: 2px solid var(--ob-line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.sd-card:hover[b-zdzywnz6pl] { border-color: var(--ob-accent-border); }

.sd-card.is-selected[b-zdzywnz6pl] {
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-soft);
}

.sd-card:focus-visible[b-zdzywnz6pl] { outline: 3px solid var(--ob-accent-border); outline-offset: 2px; }

.sd-card-head[b-zdzywnz6pl] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem 1rem .8rem;
}

.sd-card-text[b-zdzywnz6pl] { flex: 1; min-width: 0; }

.sd-card-text p[b-zdzywnz6pl] {
    margin: .4rem 0 0;
    font-size: .84rem;
    color: var(--ob-text-2);
}

.sd-chip[b-zdzywnz6pl] {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--ob-bg-2);
    color: var(--ob-jet);
    border: 1px solid var(--ob-line);
}

.sd-chip.is-selected[b-zdzywnz6pl] {
    background: var(--ob-accent);
    color: #fff;
    border-color: var(--ob-accent);
}

.sd-icon[b-zdzywnz6pl] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    background: none;
    color: var(--ob-text-2);
    font-size: 1rem;
    cursor: pointer;
}

.sd-icon:hover[b-zdzywnz6pl] { background: var(--ob-bg-2); color: var(--ob-jet); }

.sd-radio[b-zdzywnz6pl] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--ob-line-2);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .95rem;
    transition: background .15s, border-color .15s;
}

.sd-radio.is-on[b-zdzywnz6pl] { background: var(--ob-accent); border-color: var(--ob-accent); }

.sd-subject[b-zdzywnz6pl] {
    padding: .55rem 1rem;
    border-top: 1px solid var(--ob-line);
    border-bottom: 1px solid var(--ob-line);
    font-family: var(--ob-mono);
    font-size: .76rem;
    color: var(--ob-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-frame[b-zdzywnz6pl] {
    height: 460px;
    background: #f4f4f5;
}

.sd-grid.is-expanded .sd-frame[b-zdzywnz6pl] { height: min(70vh, 760px); }

.sd-frame iframe[b-zdzywnz6pl] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
    /* Scrollable: the preview is the whole point of the dialog. It used to be
       pointer-events: none so a click anywhere selected the card — which also killed the
       wheel and the scrollbars. Selecting now happens on the rest of the card (header,
       subject, radio); a click inside the email only scrolls it. */
}

/* A cue that the card around the preview is the thing to click. */
.sd-card .sd-card-head[b-zdzywnz6pl],
.sd-card .sd-subject[b-zdzywnz6pl] { cursor: pointer; }

.sd-empty[b-zdzywnz6pl] {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--ob-faint);
    font-size: .9rem;
}

.sd-foot[b-zdzywnz6pl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .95rem 1.6rem;
    border-top: 1px solid var(--ob-line);
    font-size: .85rem;
    color: var(--ob-text-2);
}

.sd-btn[b-zdzywnz6pl] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.35rem;
    border: 0;
    border-radius: 11px;
    background: var(--ob-accent);
    color: #fff;
    font-family: var(--ob-body);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
    transition: transform .15s, box-shadow .18s, background .18s;
}

.sd-btn:hover[b-zdzywnz6pl] {
    background: var(--ob-accent-dark);
    box-shadow: 0 8px 22px rgba(132, 90, 223, .35);
    transform: translateY(-1px);
}

.sd-btn:focus-visible[b-zdzywnz6pl] { outline: 3px solid var(--ob-accent-border); outline-offset: 2px; }

@media (max-width: 860px) {
    .sd-grid[b-zdzywnz6pl] { grid-template-columns: 1fr; }
    .sd-frame[b-zdzywnz6pl] { height: 380px; }
    .sd-foot[b-zdzywnz6pl] { flex-direction: column; align-items: stretch; text-align: center; }
    .sd-btn[b-zdzywnz6pl] { margin-left: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-btn:hover[b-zdzywnz6pl] { transform: none; }
}
/* /Components/Reports/EngagementOverTimeSection.razor.rz.scp.css */
/* Engagement Over Time styles moved to wwwroot/css/app.css */
/* /Components/Reports/StatsCampaignReportSection.razor.rz.scp.css */
/* /Pages/Billing/CreateReceipt.razor.rz.scp.css */
@media print {
    /* Hide everything by default */
    body > *:not(#pageprint)[b-71tew4g8am] {
        display: none !important;
    }

    /* Show only the pageprint div and its contents */
    #pageprint[b-71tew4g8am] {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        visibility: visible !important;
    }

    #pageprint *[b-71tew4g8am] {
        visibility: visible !important;
    }

    /* Hide buttons and navigation inside pageprint if any */
    #pageprint .mud-button[b-71tew4g8am],
    #pageprint .mud-stack:has(.mud-button)[b-71tew4g8am] {
        display: none !important;
    }

    /* Remove card shadows and borders for print */
    #pageprint .mud-card[b-71tew4g8am] {
        box-shadow: none !important;
        border: none !important;
    }

    /* Ensure body background is white */
    body[b-71tew4g8am] {
        background: white !important;
        margin: 0;
        padding: 0;
    }

    /* Hide page elements outside pageprint */
    .breadcrumbs[b-71tew4g8am],
    .mud-appbar[b-71tew4g8am],
    .mud-drawer[b-71tew4g8am],
    .mud-main-content > *:not(#pageprint)[b-71tew4g8am] {
        display: none !important;
    }
}

.company-logo[b-71tew4g8am] {
    max-width: 200px;
    height: auto;
}
/* /Pages/Identity/ConfirmAccount.razor.rz.scp.css */
/* ============================================================================
   Confirm account — "Check your inbox"

   Built to the SIGNUP design language, not the MudBlazor theme. This page sits in
   the middle of the signup journey, so it borrows that form's vocabulary: a mono
   eyebrow over an uppercase display title, numbered sub-headers, dashed rules
   between groups, soft-bordered fields and the dusk button.

   Tokens are mirrored from wwwroot/css/signup.css rather than imported — every
   selector there is prefixed .su-page, so none of it reaches this component.
   Keep the two in step if the signup palette changes.
   ============================================================================ */

.confirm-page[b-s9ji1m8oge] {
    /* Brand — signup --dusk family. NOT MudBlazor's primary, which is a different
       purple; mixing the two is what made the controls look foreign. */
    --c-accent: #845ADF;
    --c-accent-soft: rgba(132, 90, 223, .10);
    --c-accent-border: rgba(132, 90, 223, .22);
    --c-accent-dark: #6B45C0;

    /* Surfaces and ink */
    --c-bg: #FDFCFE;
    --c-surface: #FFFFFF;
    --c-jet: #1B1C2E;
    --c-text: #333335;
    --c-text-2: #6b6f78;
    --c-faint: #B5B9C2;
    --c-line: #ECE1F0;
    --c-line-2: #D6CCD9;

    /* Type — the display/mono pair is what makes the signup form recognisable */
    --c-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --c-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --c-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    font-family: var(--c-body);
    color: var(--c-text);
    text-align: left;
    animation: confirm-enter-b-s9ji1m8oge .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes confirm-enter-b-s9ji1m8oge {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Header: eyebrow + display title + icon badge ──────────────────────── */
/* Mirrors .shell-head / .eyebrow-tag / .ic-badge */

.confirm-head[b-s9ji1m8oge] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-line);
}

.confirm-htext[b-s9ji1m8oge] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.confirm-eyebrow[b-s9ji1m8oge] {
    font-family: var(--c-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent);
    font-weight: 600;
}

.confirm-title[b-s9ji1m8oge] {
    font-family: var(--c-display);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-jet);
    margin: 0;
}

.confirm-badge[b-s9ji1m8oge] {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    flex: none;
}

.confirm-badge[b-s9ji1m8oge]  .mud-icon-root {
    font-size: 24px;
    color: var(--c-accent);
}

.confirm-badge-success[b-s9ji1m8oge] {
    background: rgba(38, 191, 148, .12);
    color: #26BF94;
}

.confirm-badge-success[b-s9ji1m8oge]  .mud-icon-root { color: #26BF94; }

.confirm-badge-pulse[b-s9ji1m8oge] { animation: confirm-pulse-b-s9ji1m8oge 2.6s ease-in-out infinite; }

@keyframes confirm-pulse-b-s9ji1m8oge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(132, 90, 223, .22); }
    50%      { box-shadow: 0 0 0 10px rgba(132, 90, 223, 0); }
}

/* ── Groups and sub-headers ────────────────────────────────────────────── */
/* Mirrors .group + .group / .sub-h / .sub-h .step / .sub-h .aside */

.confirm-group + .confirm-group[b-s9ji1m8oge] {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px dashed var(--c-line-2);
}

.confirm-subh[b-s9ji1m8oge] {
    font-family: var(--c-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-text-2);
    font-weight: 600;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.confirm-step[b-s9ji1m8oge] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .68rem;
    flex: none;
}

.confirm-aside[b-s9ji1m8oge] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 400;
    color: var(--c-faint);
}

.confirm-dot[b-s9ji1m8oge] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: confirm-blink-b-s9ji1m8oge 1.4s ease-in-out infinite;
}

@keyframes confirm-blink-b-s9ji1m8oge {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

.confirm-sub[b-s9ji1m8oge] {
    color: var(--c-text-2);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
}

/* The address is the one fact worth scanning for — mono, on its own surface,
   the way signup renders values it wants you to check. */
.confirm-email[b-s9ji1m8oge] {
    display: inline-block;
    margin-top: .5rem;
    padding: .6rem .9rem;
    border-radius: 11px;
    background: var(--c-bg);
    border: 1.5px solid var(--c-line-2);
    color: var(--c-jet);
    font-family: var(--c-mono);
    font-size: .88rem;
    font-weight: 600;
    word-break: break-all;
}

/* ── Code field ────────────────────────────────────────────────────────── */
/* Matched to `.su-page .fld input`. MudBlazor's Filled variant brings its own grey
   fill, square-topped corners and an underline pseudo-element even with
   Underline="false" — all three are overridden, or the field reads as a grey slab. */

.confirm-code[b-s9ji1m8oge]  .mud-input-root,
.confirm-code[b-s9ji1m8oge]  .mud-input-root.mud-input-filled {
    background-color: var(--c-bg);
    border: 1.5px solid var(--c-line-2);
    border-radius: 11px;
    color: var(--c-jet);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;

    /* The Filled variant reserves vertical room for a floating label, all of it above
       the text. There is no label here — only a placeholder — so that space is padding
       for nothing: the field grew to roughly twice signup's height AND pushed the text
       off the centre line. Zeroing the root padding and centring as a flex row puts the
       value back in the middle; the input's own padding then sets the height
       (.75rem + line + .75rem ≈ 48px, matching `.su-page .fld input`). */
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Resting border stays quiet — a purple outline on an untouched field reads as
   focused or invalid. Accent is earned by hover and focus only. */
.confirm-code[b-s9ji1m8oge]  .mud-input-root.mud-input-filled:hover:not(.mud-disabled):not(.mud-input-focused) {
    background-color: var(--c-bg);
    border-color: var(--c-line-2);
    box-shadow: 0 0 0 4px rgba(132, 90, 223, .06);
}

.confirm-code[b-s9ji1m8oge]  .mud-input-root.mud-input-focused,
.confirm-code[b-s9ji1m8oge]  .mud-input-root:focus-within {
    background-color: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.confirm-code[b-s9ji1m8oge]  .mud-input-root.mud-input-filled::before,
.confirm-code[b-s9ji1m8oge]  .mud-input-root.mud-input-filled::after {
    display: none;
}

/* The selector is this specific on purpose. MudBlazor.min.css ships:

       .mud-input>input.mud-input-root.mud-input-root-filled,
       div.mud-input-slot.mud-input-slot.mud-input-root-filled { padding: 27px 12px 10px }

   27px of top padding against 10px of bottom is the floating-label reservation — with
   no label it is dead space that pushes the value off the centre line. A plain
   `::deep input` rule scores (0,2,1) and loses to that (0,3,1), so the class names are
   repeated here to outrank it rather than reaching for !important. */
.confirm-code[b-s9ji1m8oge]  input.mud-input-root.mud-input-root-filled,
.confirm-code[b-s9ji1m8oge]  .mud-input-slot.mud-input-root-filled,
.confirm-code[b-s9ji1m8oge]  input {
    text-align: center;
    font-family: var(--c-mono);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-indent: .26em;          /* re-centres text that letter-spacing pushes left */
    line-height: 1.4;
    color: var(--c-jet);
    padding: .7rem .9rem;        /* symmetrical — this is the actual centring fix */
    /* MudBlazor also fixes the inner input's height and adds a top margin to clear the
       label; both have to go or the flex centring above is fighting them. */
    height: auto;
    min-height: 0;
    margin: 0;
    align-self: center;
}

.confirm-code[b-s9ji1m8oge]  input::placeholder {
    letter-spacing: normal;
    text-indent: 0;
    font-family: var(--c-body);
    font-size: .95rem;
    font-weight: 400;
    color: var(--c-faint);
    opacity: 1;
}

/* ── Primary action ────────────────────────────────────────────────────── */
/* Matched to `.su-page .btn` + `.btn-dusk` + `.btn-lg` */

.confirm-btn[b-s9ji1m8oge]  .mud-button-root {
    font-family: var(--c-body);
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: 0;
    padding: .85rem 1.7rem;
    background-color: var(--c-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
    transition: transform .15s, box-shadow .18s, background-color .18s;
}

.confirm-btn[b-s9ji1m8oge]  .mud-button-root:hover:not(:disabled) {
    transform: translateY(-1px);
    background-color: var(--c-accent-dark);
    box-shadow: 0 8px 22px rgba(132, 90, 223, .35);
}

.confirm-btn[b-s9ji1m8oge]  .mud-button-root:active:not(:disabled) {
    transform: none;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
}

.confirm-btn[b-s9ji1m8oge]  .mud-button-root:focus-visible {
    outline: 3px solid var(--c-accent-border);
    outline-offset: 2px;
}

/* Disabled is the FIRST state seen — the code box is empty on arrival. Keep the
   dusk fill and just mute it, exactly as signup's .btn:disabled does, instead of
   MudBlazor's flat grey which reads as broken.

   Selector note: MudBlazor styles this as `.mud-button-root:disabled` — the ATTRIBUTE,
   not a `.mud-button-disabled` class (there is no such class). Its own rules carry
   !important on both colour and background, so these must too. */
.confirm-btn[b-s9ji1m8oge]  .mud-button-root:disabled,
.confirm-btn[b-s9ji1m8oge]  .mud-button-filled:disabled {
    background-color: var(--c-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none;
    opacity: .55;
    cursor: not-allowed;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.confirm-footer[b-s9ji1m8oge] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-text-2);
    font-size: .88rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
}

.confirm-footer[b-s9ji1m8oge]  .mud-button {
    font-family: var(--c-body);
    text-transform: none;
    font-weight: 600;
    font-size: .88rem;
    color: var(--c-accent);
    min-width: 0;
    padding: 2px 6px;
}

.confirm-hint[b-s9ji1m8oge] {
    flex-basis: 100%;
    text-align: center;
    margin-top: .35rem;
    font-family: var(--c-mono);
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--c-faint);
}

/* ── Loading / success state ───────────────────────────────────────────── */
/* That branch still uses .confirm-hero, centred rather than the two-column head. */

.confirm-hero[b-s9ji1m8oge] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
}

.confirm-hero .confirm-badge[b-s9ji1m8oge] {
    margin-left: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin-bottom: 1.25rem;
}

.confirm-hero .confirm-badge[b-s9ji1m8oge]  .mud-icon-root { font-size: 30px; }

.confirm-hero .confirm-title[b-s9ji1m8oge] { margin-bottom: .5rem; }
.confirm-hero .confirm-sub[b-s9ji1m8oge] { max-width: 34ch; }

/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .confirm-title[b-s9ji1m8oge] { font-size: 1.5rem; }
    .confirm-badge[b-s9ji1m8oge] { width: 38px; height: 38px; border-radius: 10px; }
    .confirm-badge[b-s9ji1m8oge]  .mud-icon-root { font-size: 20px; }
    .confirm-aside[b-s9ji1m8oge] { margin-left: 0; flex-basis: 100%; }
    .confirm-code[b-s9ji1m8oge]  input { font-size: .95rem; letter-spacing: .2em; text-indent: .2em; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-page[b-s9ji1m8oge],
    .confirm-badge-pulse[b-s9ji1m8oge],
    .confirm-dot[b-s9ji1m8oge] { animation: none; }

    .confirm-btn[b-s9ji1m8oge]  .mud-button-root:hover:not(:disabled) { transform: none; }
}
/* /Pages/Identity/Register/RegisterConfirmation.razor.rz.scp.css */
/* RegisterConfirmation.razor.css */

.success-icon-container[b-95znkxn6n9] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.success-icon[b-95znkxn6n9] {
    font-size: 4rem !important;
    animation: fadeInScale-b-95znkxn6n9 0.6s ease-out;
}

.confirmation-card[b-95znkxn6n9] {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.confirmation-card:hover[b-95znkxn6n9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.info-card[b-95znkxn6n9] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.info-card:hover[b-95znkxn6n9] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.text-primary[b-95znkxn6n9] {
    color: #1976d2 !important;
}

.text-secondary[b-95znkxn6n9] {
    color: #6c757d !important;
}

.font-weight-bold[b-95znkxn6n9] {
    font-weight: 600 !important;
}

/* Animation for the success icon */
@keyframes fadeInScale-b-95znkxn6n9 {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .success-icon[b-95znkxn6n9] {
        font-size: 3rem !important;
    }
    
    .confirmation-card[b-95znkxn6n9],
    .info-card[b-95znkxn6n9] {
        margin: 0 1rem;
    }
}

/* Button hover effects */
.mud-button:hover[b-95znkxn6n9] {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

/* Link styling */
.mud-link[b-95znkxn6n9] {
    color: #1976d2;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mud-link:hover[b-95znkxn6n9] {
    color: #1565c0;
    text-decoration: underline;
}

/* Card shadows and borders */
.mud-paper[b-95znkxn6n9] {
    border-radius: 12px;
    overflow: hidden;
}

/* Icon spacing and alignment */
.mud-icon[b-95znkxn6n9] {
    display: inline-flex;
    align-items: center;
}

/* Text alignment and spacing */
.text-center[b-95znkxn6n9] {
    text-align: center;
}

.mb-3[b-95znkxn6n9] {
    margin-bottom: 1rem;
}

.mb-4[b-95znkxn6n9] {
    margin-bottom: 1.5rem;
}

.mt-4[b-95znkxn6n9] {
    margin-top: 1.5rem;
}

.mr-2[b-95znkxn6n9] {
    margin-right: 0.5rem;
}

.mr-3[b-95znkxn6n9] {
    margin-right: 0.75rem;
}

.pa-4[b-95znkxn6n9] {
    padding: 1.5rem;
}

.pa-6[b-95znkxn6n9] {
    padding: 2.25rem;
}

/* Flexbox utilities */
.d-flex[b-95znkxn6n9] {
    display: flex;
}

.flex-column[b-95znkxn6n9] {
    flex-direction: column;
}

.align-center[b-95znkxn6n9] {
    align-items: center;
}

.justify-center[b-95znkxn6n9] {
    justify-content: center;
}

.gap-3[b-95znkxn6n9] {
    gap: 1rem;
}

.gap-y-3[b-95znkxn6n9] {
    row-gap: 1rem;
}

/* Width utilities */
.mud-width-full[b-95znkxn6n9] {
    width: 100%;
}

/* Full width button */
.mud-button[fullwidth="true"][b-95znkxn6n9] {
    width: 100%;
} 
/* /Pages/Onboarding/WelcomeOnboarding.razor.rz.scp.css */
/* ============================================================================
   Welcome onboarding — Sequenzy's layout in Vaakio's signup language.

   Plain HTML throughout (buttons, inputs, radios), not MudBlazor components: scoped CSS
   only reaches elements this component renders itself, and every Mud control here would
   need a ::deep wrapper and a specificity fight with MudBlazor.min.css. Icons are
   Remix Icon, which App.razor already loads.

   Tokens mirror wwwroot/css/signup.css. Keep them in step.
   ============================================================================ */

.ob[b-gvqrcjhj4c], .ob-boot[b-gvqrcjhj4c] {
    --ob-accent: #845ADF;
    --ob-accent-soft: rgba(132, 90, 223, .10);
    --ob-accent-softer: rgba(132, 90, 223, .05);
    --ob-accent-border: rgba(132, 90, 223, .22);
    --ob-accent-dark: #6B45C0;
    --ob-bg: #FDFCFE;
    --ob-bg-2: #F8F6FB;
    --ob-surface: #FFFFFF;
    --ob-jet: #1B1C2E;
    --ob-text: #333335;
    --ob-text-2: #6b6f78;
    --ob-faint: #B5B9C2;
    --ob-line: #ECE1F0;
    --ob-line-2: #D6CCD9;
    --ob-success: #26BF94;
    --ob-danger: #E6533C;
    --ob-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --ob-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --ob-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ob[b-gvqrcjhj4c] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem clamp(.5rem, 2vw, 1.5rem) 3rem;
    font-family: var(--ob-body);
    color: var(--ob-text);
    animation: ob-enter-b-gvqrcjhj4c .4s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ob-enter-b-gvqrcjhj4c {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.ob-boot[b-gvqrcjhj4c] { display: grid; place-items: center; min-height: 50vh; }

/* ── Header ──────────────────────────────────────────────────────────── */

.ob-top[b-gvqrcjhj4c] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.ob-top-text[b-gvqrcjhj4c] { flex: 1; min-width: 0; }

.ob-eyebrow[b-gvqrcjhj4c] {
    font-family: var(--ob-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ob-text-2);
    margin-bottom: .7rem;
}

.ob-stepper[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.ob-stepper-item[b-gvqrcjhj4c] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .7rem .28rem .3rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ob-text-2);
}

.ob-stepper-num[b-gvqrcjhj4c] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 600;
    background: var(--ob-bg-2);
    color: var(--ob-text-2);
    border: 1px solid var(--ob-line);
}

.ob-stepper-item.is-active[b-gvqrcjhj4c] {
    background: var(--ob-accent-soft);
    color: var(--ob-jet);
}

.ob-stepper-item.is-active .ob-stepper-num[b-gvqrcjhj4c] {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
}

.ob-stepper-item.is-done[b-gvqrcjhj4c] { color: var(--ob-jet); }

.ob-stepper-item.is-done .ob-stepper-num[b-gvqrcjhj4c] {
    background: var(--ob-accent-soft);
    border-color: var(--ob-accent-border);
    color: var(--ob-accent);
}

.ob-stepper-sep[b-gvqrcjhj4c] {
    width: 22px;
    height: 1px;
    background: var(--ob-line-2);
}

.ob-title[b-gvqrcjhj4c] {
    font-family: var(--ob-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ob-jet);
    margin: 0 0 .5rem;
}

.ob-lede[b-gvqrcjhj4c] {
    margin: 0;
    max-width: 60ch;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--ob-text-2);
}

.ob-skip[b-gvqrcjhj4c] {
    flex: none;
    padding: .5rem .85rem;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ob-text-2);
    font-family: var(--ob-body);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
}

.ob-skip:hover[b-gvqrcjhj4c] { background: var(--ob-bg-2); color: var(--ob-jet); }

/* ── The card ────────────────────────────────────────────────────────── */

.ob-card[b-gvqrcjhj4c] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(132, 90, 223, .10);
    overflow: hidden;
}

.ob-split[b-gvqrcjhj4c] {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    min-height: 620px;
}

.ob-label[b-gvqrcjhj4c] {
    font-family: var(--ob-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ob-text-2);
    font-weight: 600;
    margin-bottom: .75rem;
}

/* ── Left: the sequence ──────────────────────────────────────────────── */

.ob-left[b-gvqrcjhj4c] {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem 1.4rem;
    border-right: 1px solid var(--ob-line);
}

/* The first week as a planner (deliberately not a vertical timeline): seven day slots with
   the send days marked, then one card per email with its day, purpose, subject and preview. */
.ob-week[b-gvqrcjhj4c] {
    margin-bottom: 1rem;
    padding: .85rem .9rem .75rem;
    border: 1px solid var(--ob-line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ob-accent-softer), var(--ob-surface));
}

.ob-week-cap[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    color: var(--ob-text-2);
    margin-bottom: .75rem;
}

.ob-week-cap > i[b-gvqrcjhj4c] { color: var(--ob-accent); font-size: .95rem; }

.ob-week-count[b-gvqrcjhj4c] {
    margin-left: auto;
    font-family: var(--ob-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--ob-accent-dark);
    background: var(--ob-accent-soft);
    border-radius: 999px;
    padding: .15rem .5rem;
    white-space: nowrap;
}

.ob-week-track[b-gvqrcjhj4c] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: start;
}

/* The rail runs through the centres of the first and last dots. */
.ob-week-track[b-gvqrcjhj4c]::before {
    content: "";
    position: absolute;
    left: calc(100% / 14);
    right: calc(100% / 14);
    top: 13px;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--ob-line-2) 0 6px, transparent 6px 10px);
}

.ob-day[b-gvqrcjhj4c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
}

.ob-day-dot[b-gvqrcjhj4c] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    border-radius: 9px;
    transition: transform .15s, background .15s, box-shadow .15s;
}

.ob-day.is-rest .ob-day-dot[b-gvqrcjhj4c] {
    width: 9px;
    height: 9px;
    margin: 9px 0;
    border-radius: 50%;
    background: var(--ob-surface);
    border: 2px solid var(--ob-line-2);
}

.ob-day.is-send[b-gvqrcjhj4c] { cursor: pointer; }

.ob-day.is-send .ob-day-dot[b-gvqrcjhj4c] {
    width: 28px;
    height: 28px;
    font-size: .85rem;
    background: var(--ob-surface);
    border: 1.5px solid var(--ob-accent-border);
    color: var(--ob-accent);
}

.ob-day.is-send:hover .ob-day-dot[b-gvqrcjhj4c] { transform: translateY(-2px); }

.ob-day.is-send:focus-visible[b-gvqrcjhj4c] { outline: none; }
.ob-day.is-send:focus-visible .ob-day-dot[b-gvqrcjhj4c] { box-shadow: 0 0 0 3px var(--ob-accent-border); }

.ob-day.is-ready .ob-day-dot[b-gvqrcjhj4c] { background: var(--ob-accent-soft); }

.ob-day.is-selected .ob-day-dot[b-gvqrcjhj4c] {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
    box-shadow: 0 6px 14px -6px var(--ob-accent);
}

.ob-day-lbl[b-gvqrcjhj4c] {
    font-family: var(--ob-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    color: var(--ob-faint);
}

.ob-day.is-send .ob-day-lbl[b-gvqrcjhj4c] { color: var(--ob-text-2); }
.ob-day.is-selected .ob-day-lbl[b-gvqrcjhj4c] { color: var(--ob-accent-dark); font-weight: 600; }

/* ── Email cards ── */

.ob-emails[b-gvqrcjhj4c] {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ob-email[b-gvqrcjhj4c] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .7rem .75rem;
    border: 1px solid var(--ob-line);
    border-radius: 13px;
    background: var(--ob-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ob-email:hover[b-gvqrcjhj4c] {
    border-color: var(--ob-accent-border);
    box-shadow: 0 6px 18px -12px rgba(27, 28, 46, .35);
}

.ob-email:focus-visible[b-gvqrcjhj4c] { outline: 3px solid var(--ob-accent-border); outline-offset: 1px; }

/* Selected: an accent edge, not a tinted row. */
.ob-email.is-selected[b-gvqrcjhj4c] {
    border-color: var(--ob-accent-border);
    box-shadow: 0 10px 24px -16px var(--ob-accent);
}

.ob-email.is-selected[b-gvqrcjhj4c]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ob-accent);
}

.ob-email-day[b-gvqrcjhj4c] {
    flex: none;
    width: 42px;
    padding: .3rem 0 .35rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    background: var(--ob-bg-2);
    color: var(--ob-text-2);
}

.ob-email-day-k[b-gvqrcjhj4c] {
    font-family: var(--ob-mono);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ob-email-day-v[b-gvqrcjhj4c] {
    font-family: var(--ob-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: .2rem;
    color: var(--ob-jet);
}

.ob-email.is-selected .ob-email-day[b-gvqrcjhj4c] { background: var(--ob-accent); color: rgba(255, 255, 255, .8); }
.ob-email.is-selected .ob-email-day-v[b-gvqrcjhj4c] { color: #fff; }

.ob-email-text[b-gvqrcjhj4c] { flex: 1; min-width: 0; }

.ob-email-tag[b-gvqrcjhj4c] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ob-accent-dark);
    margin-bottom: .2rem;
}

.ob-email-tag > i[b-gvqrcjhj4c] { font-size: .8rem; }

.ob-email-title[b-gvqrcjhj4c] {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ob-jet);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ob-email-meta[b-gvqrcjhj4c] {
    font-size: .79rem;
    color: var(--ob-text-2);
    margin-top: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-email-state[b-gvqrcjhj4c] {
    flex: none;
    width: 22px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    align-self: center;
}

.ob-ok[b-gvqrcjhj4c] { color: var(--ob-accent); }
.ob-warn[b-gvqrcjhj4c] { color: var(--ob-danger); }

/* ── Brand strip ─────────────────────────────────────────────────────── */

.ob-brand[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem;
    border-radius: 13px;
    background: var(--ob-bg-2);
    margin-bottom: 1.25rem;
}

.ob-brand-logo[b-gvqrcjhj4c] {
    width: 58px;
    height: 40px;
    border-radius: 9px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
}

.ob-brand-logo img[b-gvqrcjhj4c] { max-width: 46px; max-height: 28px; object-fit: contain; }

.ob-brand-initial[b-gvqrcjhj4c] {
    font-family: var(--ob-display);
    font-weight: 600;
    color: var(--ob-accent);
}

.ob-swatch[b-gvqrcjhj4c] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .08);
    flex: none;
}

.ob-brand-edit[b-gvqrcjhj4c] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .55rem;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ob-text-2);
    text-decoration: none;
}

.ob-brand-edit:hover[b-gvqrcjhj4c] { background: var(--ob-surface); color: var(--ob-accent); }

.is-skeleton[b-gvqrcjhj4c] {
    background: linear-gradient(90deg, var(--ob-line) 25%, #f4eff7 50%, var(--ob-line) 75%) !important;
    background-size: 200% 100% !important;
    border-color: transparent !important;
    animation: ob-shimmer-b-gvqrcjhj4c 1.4s ease-in-out infinite;
}

@keyframes ob-shimmer-b-gvqrcjhj4c {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Left footer ─────────────────────────────────────────────────────── */

.ob-left-foot[b-gvqrcjhj4c] {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ob-line);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
}

.ob-links[b-gvqrcjhj4c] {
    display: flex;
    justify-content: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.ob-note[b-gvqrcjhj4c] {
    margin: .1rem 0 0;
    text-align: center;
    font-size: .84rem;
    color: var(--ob-text-2);
}

.ob-error[b-gvqrcjhj4c] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    padding: .7rem .85rem;
    border-radius: 11px;
    background: rgba(230, 83, 60, .08);
    border: 1px solid rgba(230, 83, 60, .2);
    color: #b8412e;
    font-size: .87rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Mirrors .su-page .btn / .btn-dusk / .btn-outline. */

.ob-btn[b-gvqrcjhj4c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .7rem 1.3rem;
    border: 1.5px solid transparent;
    border-radius: 11px;
    font-family: var(--ob-body);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s, box-shadow .18s, background .18s, border-color .18s, opacity .18s;
}

.ob-btn-primary[b-gvqrcjhj4c] {
    background: var(--ob-accent);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(132, 90, 223, .22);
}

.ob-btn-primary:hover:not(:disabled)[b-gvqrcjhj4c] {
    background: var(--ob-accent-dark);
    box-shadow: 0 8px 22px rgba(132, 90, 223, .35);
    transform: translateY(-1px);
}

.ob-btn-secondary[b-gvqrcjhj4c] {
    background: var(--ob-surface);
    color: var(--ob-jet) !important;
    border-color: var(--ob-line-2);
}

.ob-btn-secondary:hover:not(:disabled)[b-gvqrcjhj4c] { border-color: var(--ob-jet); }

.ob-btn:focus-visible[b-gvqrcjhj4c] { outline: 3px solid var(--ob-accent-border); outline-offset: 2px; }
.ob-btn:disabled[b-gvqrcjhj4c] { opacity: .6; cursor: not-allowed; transform: none; }

.ob-btn i[b-gvqrcjhj4c] { font-size: 1.05rem; transition: transform .2s; }
.ob-btn-primary:hover:not(:disabled) .ri-arrow-right-line[b-gvqrcjhj4c] { transform: translateX(3px); }

.ob-btn-link[b-gvqrcjhj4c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ob-text);
    font-family: var(--ob-body);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.ob-btn-link:hover:not(:disabled)[b-gvqrcjhj4c] { background: var(--ob-accent-soft); color: var(--ob-accent); }
.ob-btn-link:disabled[b-gvqrcjhj4c] { opacity: .45; cursor: not-allowed; }

/* ── Right: the preview ──────────────────────────────────────────────── */

.ob-right[b-gvqrcjhj4c] {
    padding: 1.5rem;
    background: var(--ob-bg-2);
    display: flex;
}

.ob-preview[b-gvqrcjhj4c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(27, 28, 46, .05);
}

.ob-preview-head[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--ob-line);
}

.ob-avatar[b-gvqrcjhj4c] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--ob-bg-2);
    border: 1px solid var(--ob-line);
    font-family: var(--ob-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ob-accent);
}

.ob-avatar img[b-gvqrcjhj4c] { max-width: 26px; max-height: 26px; object-fit: contain; }

.ob-preview-from[b-gvqrcjhj4c] { flex: 1; min-width: 0; }

.ob-preview-name[b-gvqrcjhj4c] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ob-jet);
}

.ob-preview-subject[b-gvqrcjhj4c] {
    font-size: .82rem;
    color: var(--ob-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-badge[b-gvqrcjhj4c] {
    flex: none;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--ob-line-2);
    font-family: var(--ob-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ob-text-2);
}

/* "Preview styles" — the only way the side-by-side style picker opens. */
.ob-badge.ob-badge-btn[b-gvqrcjhj4c] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--ob-surface);
    border-color: var(--ob-accent-border);
    color: var(--ob-accent-dark);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ob-badge.ob-badge-btn > i[b-gvqrcjhj4c] { font-size: .8rem; }

.ob-badge.ob-badge-btn:hover:not(:disabled)[b-gvqrcjhj4c] {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
}

.ob-badge.ob-badge-btn:focus-visible[b-gvqrcjhj4c] { outline: 3px solid var(--ob-accent-border); outline-offset: 1px; }

.ob-badge.ob-badge-btn:disabled[b-gvqrcjhj4c] {
    cursor: not-allowed;
    border-color: var(--ob-line-2);
    color: var(--ob-faint);
}

.ob-pager[b-gvqrcjhj4c] {
    flex: none;
    display: flex;
    align-items: center;
    gap: .15rem;
    font-family: var(--ob-mono);
    font-size: .74rem;
    color: var(--ob-text-2);
}

.ob-pager button[b-gvqrcjhj4c] {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ob-text-2);
    font-size: 1rem;
    cursor: pointer;
}

.ob-pager button:hover:not(:disabled)[b-gvqrcjhj4c] { background: var(--ob-bg-2); color: var(--ob-jet); }
.ob-pager button:disabled[b-gvqrcjhj4c] { opacity: .35; cursor: default; }

.ob-preview-body[b-gvqrcjhj4c] {
    position: relative;
    flex: 1;
    min-height: 520px;
    background: #f4f4f5;
}

.ob-preview-body iframe[b-gvqrcjhj4c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.ob-float[b-gvqrcjhj4c] {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    border: 1px solid var(--ob-line);
    border-radius: 999px;
    background: var(--ob-surface);
    color: var(--ob-jet);
    font-family: var(--ob-body);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(27, 28, 46, .12);
}

.ob-float:hover[b-gvqrcjhj4c] { color: var(--ob-accent); border-color: var(--ob-accent-border); }

/* Skeleton email while it is being written */
.ob-skel-mail[b-gvqrcjhj4c] {
    width: min(460px, calc(100% - 2rem));
    margin: 1.4rem auto;
    padding: 1.6rem 1.4rem 2rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(27, 28, 46, .05);
}

.ob-skel-brand[b-gvqrcjhj4c] {
    text-align: center;
    font-family: var(--ob-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--ob-jet);
    margin-bottom: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-skel-tag[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-faint);
    margin-bottom: .6rem;
}

.ob-skel-headline[b-gvqrcjhj4c] {
    font-family: var(--ob-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ob-jet);
    margin-bottom: 1rem;
}

.ob-skel-line[b-gvqrcjhj4c] {
    height: 8px;
    border-radius: 4px;
    margin-bottom: .55rem;
    background: linear-gradient(90deg, #efeef2 25%, #f7f6f9 50%, #efeef2 75%);
    background-size: 200% 100%;
    animation: ob-shimmer-b-gvqrcjhj4c 1.4s ease-in-out infinite;
}

.ob-skel-btn[b-gvqrcjhj4c] {
    display: inline-block;
    margin-top: .8rem;
    padding: .45rem .9rem;
    border-radius: 7px;
    background: #d9d8de;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

/* ── Steps 2 and 3 ───────────────────────────────────────────────────── */

.ob-pane[b-gvqrcjhj4c] {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ob-pane-sub[b-gvqrcjhj4c] {
    margin: -.4rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ob-text-2);
}

.ob-options[b-gvqrcjhj4c] { display: flex; flex-direction: column; gap: .55rem; }

.ob-option[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--ob-line-2);
    border-radius: 12px;
    background: var(--ob-bg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ob-option:hover[b-gvqrcjhj4c] { border-color: var(--ob-accent-border); }

.ob-option.is-selected[b-gvqrcjhj4c] {
    border-color: var(--ob-accent);
    background: var(--ob-surface);
    box-shadow: 0 0 0 4px var(--ob-accent-soft);
}

.ob-option input[b-gvqrcjhj4c] { position: absolute; opacity: 0; pointer-events: none; }

.ob-option-dot[b-gvqrcjhj4c] {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ob-line-2);
    transition: border-color .15s, box-shadow .15s;
}

.ob-option.is-selected .ob-option-dot[b-gvqrcjhj4c] {
    border-color: var(--ob-accent);
    box-shadow: inset 0 0 0 3px var(--ob-surface), inset 0 0 0 10px var(--ob-accent);
}

.ob-option:focus-within[b-gvqrcjhj4c] { outline: 3px solid var(--ob-accent-border); outline-offset: 1px; }

.ob-option-text[b-gvqrcjhj4c] { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ob-option-text strong[b-gvqrcjhj4c] { font-size: .93rem; color: var(--ob-jet); }
.ob-option-text span[b-gvqrcjhj4c] { font-size: .82rem; color: var(--ob-text-2); }

.ob-input[b-gvqrcjhj4c] {
    font-family: var(--ob-body);
    font-size: .95rem;
    color: var(--ob-jet);
    background: var(--ob-bg);
    border: 1.5px solid var(--ob-line-2);
    border-radius: 11px;
    padding: .75rem .9rem;
    min-height: 48px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.ob-input[b-gvqrcjhj4c]::placeholder { color: var(--ob-faint); }

.ob-input:focus[b-gvqrcjhj4c] {
    border-color: var(--ob-accent);
    background: var(--ob-surface);
    box-shadow: 0 0 0 4px var(--ob-accent-soft);
}

.ob-summary[b-gvqrcjhj4c] {
    margin: 0;
    border: 1px solid var(--ob-line);
    border-radius: 14px;
    overflow: hidden;
}

.ob-summary > div[b-gvqrcjhj4c] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    padding: .9rem 1.05rem;
}

.ob-summary > div + div[b-gvqrcjhj4c] { border-top: 1px dashed var(--ob-line-2); }

.ob-summary dt[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ob-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-text-2);
    font-weight: 600;
}

.ob-summary dt i[b-gvqrcjhj4c] { font-size: .95rem; color: var(--ob-accent); }

.ob-summary dd[b-gvqrcjhj4c] {
    margin: 0;
    font-size: .93rem;
    color: var(--ob-jet);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ob-mono[b-gvqrcjhj4c] { font-family: var(--ob-mono); font-size: .86rem; }

.ob-warn-text[b-gvqrcjhj4c] { color: #b8412e; }

.ob-review[b-gvqrcjhj4c] {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid #f0c9a8;
    border-radius: 10px;
    background: #fdf6ef;
    font-size: .9rem;
}
.ob-review p[b-gvqrcjhj4c] { margin: 0 0 .6rem; }
.ob-review-title[b-gvqrcjhj4c] { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.ob-review-check[b-gvqrcjhj4c] { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.ob-review-check input[b-gvqrcjhj4c] { margin-top: .2rem; }

.ob-auth[b-gvqrcjhj4c] { display: inline-flex; gap: .35rem; margin-left: .6rem; flex-wrap: wrap; vertical-align: middle; }
.ob-auth-chip[b-gvqrcjhj4c] { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; }
.ob-auth-chip.is-ok[b-gvqrcjhj4c] { background: #e7f6ec; color: #1e7a3c; }
.ob-auth-chip.is-bad[b-gvqrcjhj4c] { background: #fdecea; color: #b8412e; }
.ob-auth-chip.is-warn[b-gvqrcjhj4c] { background: #fdf3e2; color: #9a6400; }
.ob-sender-alert[b-gvqrcjhj4c] { border-color: #f1b9ae; background: #fdf1ee; }
.ob-sender-alert .ob-btn-link[b-gvqrcjhj4c] { margin-right: .8rem; }

.ob-pane-foot[b-gvqrcjhj4c] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ob-line);
}

.ob-pane-foot .ob-btn-primary[b-gvqrcjhj4c] { margin-left: auto; }

/* ── Done ────────────────────────────────────────────────────────────── */

.ob-done[b-gvqrcjhj4c] { align-items: center; text-align: center; padding-top: 3rem; padding-bottom: 3rem; }

.ob-done-ic[b-gvqrcjhj4c] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(38, 191, 148, .12);
    color: var(--ob-success);
    font-size: 2rem;
}

.ob-done h2[b-gvqrcjhj4c] {
    font-family: var(--ob-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ob-jet);
    margin: .4rem 0 0;
}

.ob-done p[b-gvqrcjhj4c] {
    margin: 0;
    max-width: 48ch;
    color: var(--ob-text-2);
    line-height: 1.55;
}

.ob-done-actions[b-gvqrcjhj4c] { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }

/* ── Spinner ─────────────────────────────────────────────────────────── */

.ob-spin[b-gvqrcjhj4c] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ob-line-2);
    border-top-color: var(--ob-accent);
    animation: ob-spin-b-gvqrcjhj4c .8s linear infinite;
}

.ob-spin.is-idle[b-gvqrcjhj4c] { animation: none; border-top-color: var(--ob-line-2); opacity: .7; }
.ob-spin.is-light[b-gvqrcjhj4c] { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
.ob-spin.is-tiny[b-gvqrcjhj4c] { width: 10px; height: 10px; border-width: 1.5px; }

@keyframes ob-spin-b-gvqrcjhj4c { to { transform: rotate(360deg); } }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ob-split[b-gvqrcjhj4c] { grid-template-columns: 1fr; min-height: 0; }
    .ob-left[b-gvqrcjhj4c] { border-right: 0; border-bottom: 1px solid var(--ob-line); }
    .ob-preview-body[b-gvqrcjhj4c] { min-height: 440px; }
    .ob-top[b-gvqrcjhj4c] { flex-direction: column; gap: .5rem; }
    .ob-skip[b-gvqrcjhj4c] { align-self: flex-start; padding-left: 0; }
}

@media (max-width: 560px) {
    .ob-summary > div[b-gvqrcjhj4c] { grid-template-columns: 1fr; gap: .35rem; }
    .ob-pane-foot[b-gvqrcjhj4c] { flex-wrap: wrap; }
    .ob-pane-foot .ob-btn-primary[b-gvqrcjhj4c] { margin-left: 0; width: 100%; }
    .ob-badge[b-gvqrcjhj4c] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ob[b-gvqrcjhj4c], .is-skeleton[b-gvqrcjhj4c], .ob-skel-line[b-gvqrcjhj4c] { animation: none; }
    .ob-spin[b-gvqrcjhj4c] { animation-duration: 2.4s; }
    .ob-btn-primary:hover:not(:disabled)[b-gvqrcjhj4c] { transform: none; }
}
/* /Pages/Public/Trk.razor.rz.scp.css */
/* Custom styles for Trk page using MudBlazor */

/* Minimal custom styles - MudBlazor handles most of the styling */

/* Ensure full height for centering content */
.tracking-container[b-z3q8d6e566] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Additional spacing for better mobile experience */
@media (max-width: 600px) {
    [b-z3q8d6e566] .mud-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}