/* /Components/AdminDashboard.razor.rz.scp.css */
/* Dashboard Page Styles - ZINRAI Design */

.dashboard-page[b-kkvu0kpguv] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

[b-kkvu0kpguv] .dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
}

[b-kkvu0kpguv] .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

[b-kkvu0kpguv] .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

[b-kkvu0kpguv] .card-header-row .card-title {
    margin: 0;
}

[b-kkvu0kpguv] .card-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}

[b-kkvu0kpguv] .card-icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

[b-kkvu0kpguv] .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

[b-kkvu0kpguv] .total-volume-card .volume-legs {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

[b-kkvu0kpguv] .total-volume-card .leg-col {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

[b-kkvu0kpguv] .total-volume-card .leg-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

[b-kkvu0kpguv] .total-volume-card .leg-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-kkvu0kpguv] .qualified-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-success);
    text-decoration: none;
    cursor: pointer;
}

[b-kkvu0kpguv] .qualified-link:hover {
    text-decoration: underline;
}

[b-kkvu0kpguv] .mt-sm {
    margin-top: 0.5rem;
}

[b-kkvu0kpguv] .spillover-text {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
}

[b-kkvu0kpguv] .ratio-card .ratio-row {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
}

[b-kkvu0kpguv] .ratio-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-kkvu0kpguv] .ratio-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

[b-kkvu0kpguv] .ratio-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-kkvu0kpguv] .big-number {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-top: 0.5rem;
}

[b-kkvu0kpguv] .reward-points {
    color: var(--color-success);
}

[b-kkvu0kpguv] .download-btn {
    display: block;
    margin: 1rem auto 0;
}

[b-kkvu0kpguv] .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 1.25rem;
}

[b-kkvu0kpguv] .gauge-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

[b-kkvu0kpguv] .gauge-labels {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 2rem;
}

[b-kkvu0kpguv] .gauge-side-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    flex: 1;
}

[b-kkvu0kpguv] .gauge-pair-charts {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

[b-kkvu0kpguv] .gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

[b-kkvu0kpguv] .gauge-wrapper {
    position: relative;
    width: 120px;
    height: 72px;
}

[b-kkvu0kpguv] .gauge-svg {
    width: 100%;
    height: 100%;
}

[b-kkvu0kpguv] .gauge-pct {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-kkvu0kpguv] .gauge-abs-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

[b-kkvu0kpguv] .card-footnote {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.4;
}

/* Sized for the Holding Tank card's pagination (HoldingTankCard.razor) —
   overrides the app-wide .page-btn/.page-ellipsis convention in app.css to
   the compact size this dense dashboard card needs. Left here rather than
   in HoldingTankCard.razor.css because .page-btn is the shared pagination
   class other pages use too; moving it would tie that convention to one card. */
[b-kkvu0kpguv] .page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.2s;
}

[b-kkvu0kpguv] .page-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
}

[b-kkvu0kpguv] .page-btn.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

[b-kkvu0kpguv] .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-kkvu0kpguv] .page-ellipsis {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0 0.25rem;
}

[b-kkvu0kpguv] .performers-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

[b-kkvu0kpguv] .performers-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

[b-kkvu0kpguv] .performers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-kkvu0kpguv] .performer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-primary);
}

[b-kkvu0kpguv] .performer-row:last-child {
    border-bottom: none;
}

/* ZN-899: viewer's own "(You)" self-row, pinned above the ranked list. */
[b-kkvu0kpguv] .performer-row--self {
    background: var(--accent-primary-light);
    border-radius: 8px;
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

[b-kkvu0kpguv] .rank-badge.rank-self {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.85rem;
}

[b-kkvu0kpguv] .rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1;
}

[b-kkvu0kpguv] .rank-badge.rank-1 { font-size: 1.25rem; }
[b-kkvu0kpguv] .rank-badge.rank-2 { font-size: 1.25rem; }
[b-kkvu0kpguv] .rank-badge.rank-3 { font-size: 1.25rem; }

[b-kkvu0kpguv] .rank-badge.rank-4,
[b-kkvu0kpguv] .rank-badge.rank-5 {
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border-primary);
}

[b-kkvu0kpguv] .performer-info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

[b-kkvu0kpguv] .performer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    background-size: cover;
    background-position: center;
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

[b-kkvu0kpguv] .performer-details {
    display: flex;
    flex-direction: column;
}

[b-kkvu0kpguv] .performer-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent-secondary);
}

[b-kkvu0kpguv] .performer-id {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

[b-kkvu0kpguv] .performer-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 600;
}

[b-kkvu0kpguv] .enrollments-row {
    display: grid;
    grid-template-columns: 1fr;
}

[b-kkvu0kpguv] .enrollments-card {
    max-width: 600px;
}

[b-kkvu0kpguv] .month-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--accent-secondary-light);
    color: var(--accent-secondary);
    font-weight: 500;
}

[b-kkvu0kpguv] .country-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-kkvu0kpguv] .country-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

[b-kkvu0kpguv] .country-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-kkvu0kpguv] .country-flag {
    width: 28px;
    height: 21px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

[b-kkvu0kpguv] .country-name {
    font-size: 0.875rem;
    color: var(--text-primary);
}

[b-kkvu0kpguv] .country-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 0.5rem;
}

.dashboard-footer[b-kkvu0kpguv] {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 1200px) {
    [b-kkvu0kpguv] .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-kkvu0kpguv] .charts-row {
        grid-template-columns: 1fr 1fr;
    }

    [b-kkvu0kpguv] .performers-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    [b-kkvu0kpguv] .stats-row,
    [b-kkvu0kpguv] .charts-row,
    [b-kkvu0kpguv] .performers-row {
        grid-template-columns: 1fr;
    }

    [b-kkvu0kpguv] .gauge-pair-charts {
        flex-direction: column;
        align-items: center;
    }

    [b-kkvu0kpguv] .enrollments-card {
        max-width: 100%;
    }

    [b-kkvu0kpguv] .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    [b-kkvu0kpguv] .ratio-value {
        font-size: 1.2rem;
    }

    [b-kkvu0kpguv] .big-number {
        font-size: 1.75rem;
    }

    [b-kkvu0kpguv] .gauge-wrapper {
        width: 100px;
        height: 60px;
    }
}
/* /Components/AssignParentDialog.razor.rz.scp.css */
.assign-parent-leg-section[b-lensz70r2w] {
    margin-top: 16px;
}

.assign-parent-leg-loading[b-lensz70r2w] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ZN-1302: a disabled leg radio was unreadable on this dark dialog.
   VERIFIED by dumping the live DOM + computed styles: the disabled label and
   circle both computed to `rgba(0, 0, 0, 0.376)` -- BLACK at 38% alpha, on a
   near-black surface. That is MudBlazor's LIGHT-palette `Palette.TextDisabled`,
   applied because BackOffice's `<MudThemeProvider Theme="_blueTheme"/>`
   (MainLayout.razor:5) never binds `IsDarkMode`, so MudBlazor emits light-palette
   vars underneath our dark CSS.

   ⚠️ Style OUR OWN classes, not MudBlazor's internals. The rendered tree has NO
   `.mud-radio-content`, `.mud-radio-icons` or `.mud-radio-button` -- selectors
   written against those match NOTHING (two rounds of this fix were lost that way).
   `.assign-parent-leg-name` / `-taken` / `-radio-taken` are set by us in the
   .razor, so they are stable and greppable. Only the circle needs a MudBlazor
   selector, and it hangs off our own `.assign-parent-leg-radio-taken`. */

/* "Left" / "Right" on a taken side. Dimmer than an enabled row so the control
   still reads as disabled, but well clear of the invisible disabled value. */
[b-lensz70r2w] .assign-parent-leg-radio-taken .assign-parent-leg-name {
    color: var(--text-secondary) !important;
}

/* The "(Already taken)" hint is the REASON the row is off, so it is the most
   legible thing in the row. --text-secondary-strong is the sanctioned opt-in
   token for "more contrast than muted, less than full white" (ZN-946). */
[b-lensz70r2w] .assign-parent-leg-taken {
    margin-left: 6px;
    color: var(--text-secondary-strong) !important;
    font-size: 0.8125rem;
    font-style: italic;
}

/* The circle is an SVG glyph painted through currentColor, so `color` on the
   icon element is what moves it. The inner `path[fill="none"]` is the
   transparent centre of the unchecked ring -- it must stay none, or the glyph
   floods into a solid disc. */
[b-lensz70r2w] .assign-parent-leg-radio-taken .mud-icon-root {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

[b-lensz70r2w] .assign-parent-leg-radio-taken .mud-icon-root path[fill="none"] {
    fill: none !important;
}
/* /Components/AvatarCropDialog.razor.rz.scp.css */
.avatar-crop-modal__canvas-frame[b-0vdadplw80] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.avatar-crop-modal__canvas[b-0vdadplw80] {
    width: 320px;
    height: 320px;
    border: 2px solid var(--border-primary);
    border-radius: 50%;
    background: var(--bg-card);
    display: block;
    cursor: grab;
}

.avatar-crop-modal__canvas:active[b-0vdadplw80] {
    cursor: grabbing;
}

.avatar-crop-modal__controls[b-0vdadplw80] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avatar-crop-modal__zoom-row[b-0vdadplw80] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-crop-modal__zoom-label[b-0vdadplw80] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 36px;
}

.avatar-crop-modal__reset-btn[b-0vdadplw80] {
    align-self: flex-start;
}
/* /Components/BrandPromoterDashboard.razor.rz.scp.css */
/* BrandPromoterDashboard - ZINRAI Design */

.dashboard-page[b-vxurv6pxh8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

/* ── Shared card styles (::deep for child components) ── */

[b-vxurv6pxh8] .dash-card {
    position: relative;
    background:
        radial-gradient(120% 120% at 0% 0%, var(--accent-primary-glow) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    /* No transform on hover — would create a containing block for any
       position:fixed descendant (e.g. the FilterDropdown menu in the
       Holding Tank card) and prevent it from escaping ancestor clipping. */
}

/* Subtle top-accent bar that gives each card a touch of identity. The
   default uses the brand purple; per-card overrides below tint specific
   sections. Border-radius matches the card so it doesn't poke past corners. */
[b-vxurv6pxh8] .dash-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%) top / 100% 3px no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

[b-vxurv6pxh8] .dash-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary-hover-border);
}

[b-vxurv6pxh8] .card-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    padding-left: 0.55rem;
    letter-spacing: -0.01em;
}

/* Coloured "tab" before the card title — same role as a section icon
   without adding markup. Per-card overrides change the colour to match
   the card's identity. */
[b-vxurv6pxh8] .card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.95rem;
    border-radius: 2px;
    background: var(--accent-primary);
}

[b-vxurv6pxh8] .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

[b-vxurv6pxh8] .card-header-row .card-title {
    margin: 0;
}

[b-vxurv6pxh8] .card-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-vxurv6pxh8] .card-icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

/* ── Loading & Empty States ── */

[b-vxurv6pxh8] .dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 120px;
}

[b-vxurv6pxh8] .dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 0.5rem;
    min-height: 120px;
}

[b-vxurv6pxh8] .dash-empty-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

[b-vxurv6pxh8] .dash-empty-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    max-width: 280px;
}

/* ── Signup / Referral Section ── */

.signup-row[b-vxurv6pxh8] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.25rem;
}

.signup-card[b-vxurv6pxh8] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.signup-heading[b-vxurv6pxh8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.signup-link-row[b-vxurv6pxh8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.signup-input[b-vxurv6pxh8] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    min-width: 0;
    transition: border-color 0.15s ease;
}

.signup-input:focus[b-vxurv6pxh8] {
    border-color: var(--border-input-focus);
}

.signup-btn[b-vxurv6pxh8] {
    white-space: nowrap;
}

.signup-message[b-vxurv6pxh8] {
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.signup-message-success[b-vxurv6pxh8] {
    color: var(--color-success);
}

.signup-message-error[b-vxurv6pxh8] {
    color: var(--color-error);
}

/* ── Congratulations Card ── */

.congrats-card[b-vxurv6pxh8] {
    background: linear-gradient(135deg, var(--color-success-bg), var(--accent-secondary-light));
    border: 1px solid var(--color-success-bg-strong);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.congrats-title[b-vxurv6pxh8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-success);
    margin: 0 0 0.5rem 0;
}

.congrats-text[b-vxurv6pxh8] {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

/* ── Stats Row (child component) ── */

[b-vxurv6pxh8] .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

[b-vxurv6pxh8] .total-volume-card .volume-legs {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

[b-vxurv6pxh8] .total-volume-card .leg-col {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

[b-vxurv6pxh8] .total-volume-card .leg-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

[b-vxurv6pxh8] .total-volume-card .leg-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-vxurv6pxh8] .qualified-header {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-success);
}

[b-vxurv6pxh8] .mt-sm {
    margin-top: 0.5rem;
}

[b-vxurv6pxh8] .spillover-text {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

[b-vxurv6pxh8] .ratio-card .ratio-row {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
}

[b-vxurv6pxh8] .ratio-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-vxurv6pxh8] .ratio-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

[b-vxurv6pxh8] .ratio-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

[b-vxurv6pxh8] .big-number {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    text-align: center;
    margin-top: 0.5rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary-hover)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Per-card identity (stats row) ── */

/* Total Volume — green accent (volume is a "growth" metric). */
[b-vxurv6pxh8] .total-volume-card::before {
    background-image: linear-gradient(90deg, var(--color-success), transparent 70%);
}

[b-vxurv6pxh8] .total-volume-card .card-title::before {
    background: var(--color-success);
}

[b-vxurv6pxh8] .total-volume-card .leg-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Customer / BP Ratio — cyan accent (info). */
[b-vxurv6pxh8] .ratio-card::before {
    background-image: linear-gradient(90deg, var(--accent-secondary), transparent 70%);
}

[b-vxurv6pxh8] .ratio-card .card-title::before {
    background: var(--accent-secondary);
}

[b-vxurv6pxh8] .ratio-card .ratio-item:nth-child(1) .ratio-value {
    color: var(--accent-secondary);
}

[b-vxurv6pxh8] .ratio-card .ratio-item:nth-child(2) .ratio-value {
    color: var(--accent-primary);
}

/* Total Volume in Organization — purple accent (already uses gradient text). */
[b-vxurv6pxh8] .packages-card::before {
    background-image: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

[b-vxurv6pxh8] .packages-card .card-title::before {
    background: var(--accent-primary);
}

/* ── Charts Row (child component) ── */

[b-vxurv6pxh8] .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 1.25rem;
}

[b-vxurv6pxh8] .gauge-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

[b-vxurv6pxh8] .gauge-labels {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 2rem;
}

[b-vxurv6pxh8] .gauge-side-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    flex: 1;
}

[b-vxurv6pxh8] .gauge-pair-charts {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

[b-vxurv6pxh8] .gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

[b-vxurv6pxh8] .gauge-wrapper {
    position: relative;
    width: 120px;
    height: 72px;
}

[b-vxurv6pxh8] .gauge-svg {
    width: 100%;
    height: 100%;
}

[b-vxurv6pxh8] .gauge-pct {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-vxurv6pxh8] .gauge-abs-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── Charts cards: per-card top-accent + gauge value tints ── */

/* Approximate Leg Balance — left=purple, right=warning (matches gauge SVG strokes). */
[b-vxurv6pxh8] .leg-balance-card::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-warning) 90%);
}

[b-vxurv6pxh8] .leg-balance-card .gauge-item:nth-child(1) .gauge-abs-value {
    color: var(--accent-primary);
}

[b-vxurv6pxh8] .leg-balance-card .gauge-item:nth-child(2) .gauge-abs-value {
    color: var(--color-warning);
}

/* Paid Direct Enrollees — left=indigo, right=vibrant green (matches gauge SVG strokes
   per Anna's design). */
[b-vxurv6pxh8] .enrollees-chart-card::before {
    background-image: linear-gradient(90deg, var(--accent-indigo), var(--accent-success-vibrant) 90%);
}

[b-vxurv6pxh8] .enrollees-chart-card .gauge-item:nth-child(1) .gauge-abs-value {
    color: var(--accent-indigo);
}

[b-vxurv6pxh8] .enrollees-chart-card .gauge-item:nth-child(2) .gauge-abs-value {
    color: var(--accent-success-vibrant);
}

/* Congrats card already has its own coloured background — match the
   accent stripe to it instead of leaking the default purple. */
.congrats-card[b-vxurv6pxh8]::before {
    background-image: linear-gradient(90deg, var(--color-success), var(--accent-secondary) 90%) !important;
    opacity: 0.8 !important;
}

.congrats-card .card-title[b-vxurv6pxh8]::before {
    background: var(--color-success);
}

/* Rewards card — keep the purple-themed accent (matches the coming-soon
   purple gradient surface and the green CTA). */
.rewards-card[b-vxurv6pxh8]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}

.rewards-card .rewards-card-title[b-vxurv6pxh8]::before {
    background: var(--accent-primary);
}

/* Signup card — green accent to match the QR Code CTA. */
.signup-card[b-vxurv6pxh8]::before {
    background-image: linear-gradient(90deg, var(--color-success), transparent 70%);
}

.signup-card .signup-heading[b-vxurv6pxh8] {
    position: relative;
    padding-left: 0.6rem;
}

.signup-card .signup-heading[b-vxurv6pxh8]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1rem;
    border-radius: 2px;
    background: var(--color-success);
}

[b-vxurv6pxh8] .card-footnote {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.4;
}

/* Sized for the Holding Tank card's pagination (HoldingTankCard.razor) —
   overrides the app-wide .page-btn/.page-ellipsis convention in app.css to
   the compact size this dense dashboard card needs. Left here rather than
   in HoldingTankCard.razor.css because .page-btn is the shared pagination
   class other pages use too; moving it would tie that convention to one card. */
[b-vxurv6pxh8] .page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.2s;
}

[b-vxurv6pxh8] .page-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
}

[b-vxurv6pxh8] .page-btn.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

[b-vxurv6pxh8] .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-vxurv6pxh8] .page-ellipsis {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0 0.25rem;
}

/* ── Performers Row (child component) ── */

[b-vxurv6pxh8] .performers-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

[b-vxurv6pxh8] .performers-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

[b-vxurv6pxh8] .performers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-vxurv6pxh8] .performer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-primary);
}

[b-vxurv6pxh8] .performer-row:last-child {
    border-bottom: none;
}

/* ZN-899: viewer's own "(You)" self-row, pinned above the ranked list. */
[b-vxurv6pxh8] .performer-row--self {
    background: var(--accent-primary-light);
    border-radius: 8px;
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

[b-vxurv6pxh8] .rank-badge.rank-self {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 1rem;
}

[b-vxurv6pxh8] .rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1;
}

[b-vxurv6pxh8] .rank-badge.rank-1 { font-size: 1.25rem; }
[b-vxurv6pxh8] .rank-badge.rank-2 { font-size: 1.25rem; }
[b-vxurv6pxh8] .rank-badge.rank-3 { font-size: 1.25rem; }

[b-vxurv6pxh8] .rank-badge.rank-4,
[b-vxurv6pxh8] .rank-badge.rank-5 {
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border-primary);
}

[b-vxurv6pxh8] .performer-info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

[b-vxurv6pxh8] .performer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    background-size: cover;
    background-position: center;
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

[b-vxurv6pxh8] .performer-details {
    display: flex;
    flex-direction: column;
}

[b-vxurv6pxh8] .performer-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-secondary);
}

[b-vxurv6pxh8] .performer-id {
    font-size: 0.85rem;
    color: var(--text-muted);
}

[b-vxurv6pxh8] .performer-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

/* Performers cards — gold accent for "month" (trophy theme), cyan for "all time". */
[b-vxurv6pxh8] .performers-month-card::before {
    background-image: linear-gradient(90deg, var(--color-warning), transparent 70%);
}

[b-vxurv6pxh8] .performers-month-card .card-title::before {
    background: var(--color-warning);
}

[b-vxurv6pxh8] .performers-alltime-card::before {
    background-image: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary) 90%);
}

[b-vxurv6pxh8] .performers-alltime-card .card-title::before {
    background: var(--accent-secondary);
}

/* ── Bottom Row: Enrollments + Rewards ── */

.bottom-row[b-vxurv6pxh8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

[b-vxurv6pxh8] .enrollments-row {
    display: grid;
    grid-template-columns: 1fr;
}

[b-vxurv6pxh8] .enrollments-card {
    max-width: 100%;
}

[b-vxurv6pxh8] .month-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--accent-secondary-light);
    color: var(--accent-secondary);
    font-weight: 500;
}

[b-vxurv6pxh8] .country-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-vxurv6pxh8] .country-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

[b-vxurv6pxh8] .country-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary-light);
}

/* Enrollments card — accent stripe in cyan to match the month badge. */
[b-vxurv6pxh8] .enrollments-card::before {
    background-image: linear-gradient(90deg, var(--accent-secondary), transparent 70%);
}

[b-vxurv6pxh8] .enrollments-card .card-title::before {
    background: var(--accent-secondary);
}

[b-vxurv6pxh8] .country-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-vxurv6pxh8] .country-flag {
    width: 28px;
    height: 21px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

[b-vxurv6pxh8] .country-name {
    font-size: 0.95rem;
    color: var(--text-primary);
}

[b-vxurv6pxh8] .country-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-on-accent);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 0.5rem;
}

/* ── Rewards Card ── */

.rewards-card[b-vxurv6pxh8] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease;
}

.rewards-card:hover[b-vxurv6pxh8] {
    box-shadow: var(--shadow-md);
}

.rewards-card-title[b-vxurv6pxh8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.rewards-content[b-vxurv6pxh8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.rewards-balance[b-vxurv6pxh8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rewards-label[b-vxurv6pxh8] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.rewards-balance-row[b-vxurv6pxh8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rewards-balance-value[b-vxurv6pxh8] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.rewards-balance-number[b-vxurv6pxh8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rewards-balance-unit[b-vxurv6pxh8] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ::deep reaches the MudIcon's SVG root — without it the scoped attribute
   never lands on the child component and the icon falls back to MudBlazor's
   Color.Info palette instead of the Sky Blue token. */
[b-vxurv6pxh8] .rewards-cart-icon {
    font-size: 1.5rem;
    color: var(--accent-info) !important;
}

.rewards-summary[b-vxurv6pxh8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-primary);
}

.rewards-summary-item[b-vxurv6pxh8] {
    flex: 1;
}

.rewards-summary-item-right[b-vxurv6pxh8] {
    text-align: right;
}

.rewards-summary-value[b-vxurv6pxh8] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.25rem 0 0;
}

.rewards-divider[b-vxurv6pxh8] {
    width: 1px;
    height: 36px;
    background: var(--border-primary);
}

.rewards-history-btn[b-vxurv6pxh8] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: auto;
    background: var(--accent-info);
    color: var(--text-on-accent);
    border: 1px solid var(--accent-info);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.rewards-history-btn:hover[b-vxurv6pxh8] {
    text-decoration: none;
    opacity: 0.9;
    color: var(--text-on-accent);
}

/* ── Footer ── */

.dashboard-footer[b-vxurv6pxh8] {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Upgrade Yourself (BackOffice Order Now entry point) ── */

/* Override of .signup-row's 1.6fr 1fr default for the two-column variant
   that hosts the Upgrade Yourself card on the right. Both columns get equal
   width so the upgrade tiles aren't crammed. */
.signup-row--two-col[b-vxurv6pxh8] {
    grid-template-columns: 1fr 1fr;
}

/* No purchasable fresh upgrades: hide the Upgrade Yourself card and let the
   "Signup a new BP/Customer" referral card span the whole row. The card is only
   collapsed (display:none), not removed, so the nested picker stays mounted and
   can re-resolve when RefreshNonce bumps after a purchase. */
.signup-row--solo[b-vxurv6pxh8] {
    grid-template-columns: 1fr;
}

.upgrade-card.upgrade-card--collapsed[b-vxurv6pxh8] {
    display: none;
}

.upgrade-card[b-vxurv6pxh8] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.upgrade-empty[b-vxurv6pxh8] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.upgrade-tile[b-vxurv6pxh8] {
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.upgrade-tile__title[b-vxurv6pxh8] {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.upgrade-tile__price[b-vxurv6pxh8] {
    margin: 0.2rem 0 0.35rem;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--accent-primary);
    letter-spacing: 0.2px;
}

.upgrade-tile__features[b-vxurv6pxh8] {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
}

.upgrade-tile__features li[b-vxurv6pxh8] {
    margin: 0;
}

.upgrade-tile__btn[b-vxurv6pxh8] {
    margin-top: 0.85rem;
    width: 100%;
    justify-content: center;
}

/* ── Rank Banner ── */

.rank-banner[b-vxurv6pxh8] {
    background:
        radial-gradient(120% 120% at 0% 0%, var(--accent-primary-glow) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.rank-banner:hover[b-vxurv6pxh8] {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary-hover-border);
}

.rank-banner__label[b-vxurv6pxh8] {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}

.rank-banner__value[b-vxurv6pxh8] {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary-hover)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Responsive ── */

@media (max-width: 1200px) {
    .signup-row[b-vxurv6pxh8],
    .signup-row--two-col[b-vxurv6pxh8] {
        grid-template-columns: 1fr;
    }

    [b-vxurv6pxh8] .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-vxurv6pxh8] .charts-row {
        grid-template-columns: 1fr 1fr;
    }

    [b-vxurv6pxh8] .performers-row {
        grid-template-columns: 1fr 1fr;
    }

    .bottom-row[b-vxurv6pxh8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    [b-vxurv6pxh8] .stats-row,
    [b-vxurv6pxh8] .charts-row,
    [b-vxurv6pxh8] .performers-row {
        grid-template-columns: 1fr;
    }

    [b-vxurv6pxh8] .gauge-pair-charts {
        flex-direction: column;
        align-items: center;
    }

    .signup-link-row[b-vxurv6pxh8] {
        flex-wrap: wrap;
    }

    .signup-input[b-vxurv6pxh8] {
        width: 100%;
    }

    .bottom-row[b-vxurv6pxh8] {
        grid-template-columns: 1fr;
    }

    .rewards-summary[b-vxurv6pxh8] {
        flex-direction: column;
        align-items: stretch;
    }

    .rewards-divider[b-vxurv6pxh8] {
        width: 100%;
        height: 1px;
    }

    .rewards-summary-item-right[b-vxurv6pxh8] {
        text-align: left;
    }

    .rank-banner[b-vxurv6pxh8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

}

@media (max-width: 480px) {
    [b-vxurv6pxh8] .ratio-value {
        font-size: 1.4rem;
    }

    [b-vxurv6pxh8] .big-number {
        font-size: 2rem;
    }

    [b-vxurv6pxh8] .gauge-wrapper {
        width: 100px;
        height: 60px;
    }

    .signup-card[b-vxurv6pxh8] {
        padding: 1rem;
    }

    .congrats-card[b-vxurv6pxh8] {
        padding: 1rem;
    }
}
/* /Components/CommissionCvBreakdown.razor.rz.scp.css */
.cv-breakdown-groups[b-8uzv20hdwt] {
    display: grid;
    gap: 0.3rem;
}

.cv-breakdown-group[b-8uzv20hdwt] {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
}

.cv-breakdown-group-label[b-8uzv20hdwt] {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.cv-breakdown-group--active .cv-breakdown-group-label[b-8uzv20hdwt] {
    color: var(--color-success);
}

.cv-breakdown-group--cancelled .cv-breakdown-group-label[b-8uzv20hdwt] {
    color: var(--color-error);
}

.cv-breakdown-buckets[b-8uzv20hdwt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
    gap: 0.25rem 0.65rem;
}

.cv-breakdown-bucket[b-8uzv20hdwt] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cv-breakdown-band[b-8uzv20hdwt] {
    color: var(--text-muted);
}

.cv-breakdown-count[b-8uzv20hdwt] {
    color: var(--text-primary);
    font-weight: 650;
}

@media (max-width: 700px) {
    .cv-breakdown-group[b-8uzv20hdwt] {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .cv-breakdown-buckets[b-8uzv20hdwt] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* /Components/ConfirmNewAccountDetailsDialog.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-d7670iygw8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow-y: auto;
}

/* Confirm Dialog */
.confirm-dialog[b-d7670iygw8] {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    margin: 20px;
    box-shadow: var(--shadow-xl);
}

/* Close Button */
.close-btn[b-d7670iygw8] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.close-btn:hover[b-d7670iygw8] {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Icon Circle */
.icon-circle[b-d7670iygw8] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-teal-light);
    color: var(--accent-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

/* Dialog Title & Description */
.dialog-title[b-d7670iygw8] {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    text-align: center;
}

.dialog-description[b-d7670iygw8] {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    text-align: center;
}

/* Review List */
.review-list[b-d7670iygw8] {
    border: 1px solid var(--border-input);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.review-row[b-d7670iygw8] {
    display: flex;
    align-items: baseline;
    padding: 10px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border-input);
}

.review-row:last-child[b-d7670iygw8] {
    border-bottom: none;
}

.review-label[b-d7670iygw8] {
    flex: 0 0 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.1px;
}

.review-value[b-d7670iygw8] {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.1504px;
    word-break: break-word;
}

/* Dialog Actions */
.dialog-actions[b-d7670iygw8] {
    display: flex;
    gap: 12px;
}

.btn[b-d7670iygw8] {
    flex: 1;
    height: 43px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.1504px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-outline[b-d7670iygw8] {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
}

.btn-outline:hover[b-d7670iygw8] {
    background-color: var(--bg-card-hover);
}

.btn-primary[b-d7670iygw8] {
    background: var(--accent-teal);
    border: 1px solid var(--accent-teal);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-d7670iygw8] {
    background: var(--accent-teal-deep);
}
/* /Components/ConfirmPasswordDialog.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-xm9zn6zn9x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Confirm Dialog */
.confirm-dialog[b-xm9zn6zn9x] {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    width: 480px;
    padding: 32px;
    box-shadow: var(--shadow-xl);
}

/* Close Button */
.close-btn[b-xm9zn6zn9x] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.close-btn:hover[b-xm9zn6zn9x] {
    background-color: var(--bg-card-hover);
}

/* Icon Circle */
.icon-circle[b-xm9zn6zn9x] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

/* Dialog Content */
.dialog-content[b-xm9zn6zn9x] {
    text-align: center;
    margin-bottom: 32px;
}

.dialog-title[b-xm9zn6zn9x] {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.dialog-description[b-xm9zn6zn9x] {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: var(--text-secondary);
    margin: 0;
}

/* Form Group */
.form-group[b-xm9zn6zn9x] {
    margin-bottom: 12px;
}

.form-label[b-xm9zn6zn9x] {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.1504px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.required[b-xm9zn6zn9x] {
    color: var(--color-error);
}

.form-input[b-xm9zn6zn9x] {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.1504px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-input[b-xm9zn6zn9x]::placeholder {
    color: var(--text-secondary);
}

.form-input:focus[b-xm9zn6zn9x] {
    outline: none;
    border-color: var(--accent-teal);
}

/* Forgot Password */
.forgot-password[b-xm9zn6zn9x] {
    margin-bottom: 24px;
}

.btn-link[b-xm9zn6zn9x] {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.1504px;
    color: var(--accent-teal);
    cursor: pointer;
    text-decoration: none;
}

.btn-link:hover[b-xm9zn6zn9x] {
    text-decoration: underline;
}

/* Dialog Actions */
.dialog-actions[b-xm9zn6zn9x] {
    display: flex;
    gap: 12px;
}

.btn[b-xm9zn6zn9x] {
    flex: 1;
    height: 43px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.1504px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-outline[b-xm9zn6zn9x] {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
}

.btn-outline:hover[b-xm9zn6zn9x] {
    background-color: var(--bg-card-hover);
}

.btn-primary[b-xm9zn6zn9x] {
    background: var(--accent-teal);
    border: 1px solid var(--accent-teal);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-xm9zn6zn9x] {
    background: var(--accent-teal-deep);
}
/* /Components/ConventionTicketBanner.razor.rz.scp.css */
/* ZN-1102 convention banner — layout per the ticket's design comp, painted entirely in
   existing theme tokens.

   COLOUR RULE FOR THIS COMPONENT: the card is a FILLED accent surface in both themes, so
   foreground colours come from the --text-on-accent / --overlay-on-accent family (identical
   values in light and dark) and NOT from --text-primary/--text-secondary, which invert and
   would leave near-black text on the blue card under [data-theme="light"]. The two-tone
   rail/body split is achieved with --accent-primary-deep vs --accent-primary rather than a
   hand-mixed black overlay, so it tracks any future re-brand of the accent. */

.convention-ticket-banner[b-f6d7aob5xk] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    /* Dark-navy → electric-blue, left to right, per the comp. The dark stop is
       --promo-banner-bg-start: a STRUCTURAL token (declared at :root outside both theme
       blocks) that the dashboard's Creative Suite promo banner already uses for this exact
       purpose — a banner gradient that must stay dark-to-blue in both themes. Its comment
       records that --bg-body was tried here and flipped to light-on-blue in light mode, so
       this is the sanctioned token for the job rather than a second copy of that decision. */
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--promo-banner-bg-start) 42%, var(--accent-primary-deep)) 0%,
        var(--accent-primary-deep) 30%,
        var(--accent-primary) 68%,
        var(--accent-primary-bright) 100%);
    box-shadow: 0 6px 20px var(--accent-primary-glow);
}

/* ── Identity rail ─────────────────────────────────────────────────────── */

.convention-banner-rail[b-f6d7aob5xk] {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    /* One step darker than the gradient's own left stop so the rail reads as its own block. */
    background: color-mix(in srgb, var(--promo-banner-bg-start) 62%, var(--accent-primary-deep));
    color: var(--text-on-accent);
    text-align: center;
}

.convention-banner-rail-icon[b-f6d7aob5xk] {
    width: 46px;
    height: 46px;
}

.convention-banner-rail-label[b-f6d7aob5xk] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.convention-banner-rail-year[b-f6d7aob5xk] {
    padding: 2px 12px;
    border-radius: 20px;
    background: var(--overlay-on-accent-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.convention-banner-body[b-f6d7aob5xk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* align-items:flex-start is load-bearing: the badge is an inline-flex pill and would
       otherwise stretch to the full column width (the pre-redesign defect). */
    align-items: flex-start;
    padding: 18px 20px;
}

.convention-banner-heading[b-f6d7aob5xk] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-on-accent);
}

.convention-banner-sub[b-f6d7aob5xk] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-on-accent-soft);
}

.convention-banner-badge[b-f6d7aob5xk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.convention-banner-badge svg[b-f6d7aob5xk] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Both badges are an OPAQUE dark mix of their status colour, per the comp's deep green /
   deep amber pills — not a translucent status tint. A semi-transparent fill composites over
   whatever part of the blue gradient it happens to sit on, which desaturated the amber one to
   olive-grey. Mixing into --promo-banner-bg-start (structural, theme-independent) instead
   keeps the hue and holds ~8:1 against the -bright label in both themes. */
.convention-banner-badge--success[b-f6d7aob5xk] {
    background: color-mix(in srgb, var(--color-success) 24%, var(--promo-banner-bg-start));
    color: var(--color-success-bright);
    border: 1px solid color-mix(in srgb, var(--color-success-bright) 50%, transparent);
}

.convention-banner-badge--warning[b-f6d7aob5xk] {
    background: color-mix(in srgb, var(--accent-orange) 28%, var(--promo-banner-bg-start));
    color: var(--color-warning-bright);
    border: 1px solid color-mix(in srgb, var(--color-warning-bright) 50%, transparent);
}

.convention-banner-note[b-f6d7aob5xk] {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-on-accent-soft);
}

.convention-banner-footer[b-f6d7aob5xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--overlay-on-accent-light);
    font-size: 0.75rem;
    color: var(--text-on-accent-soft);
}

.convention-banner-footer-icon[b-f6d7aob5xk] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.convention-banner-footer a[b-f6d7aob5xk] {
    color: var(--text-on-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Action aside ──────────────────────────────────────────────────────── */

.convention-banner-aside[b-f6d7aob5xk] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Right padding clears the absolutely-positioned dismiss button. */
    padding: 18px 44px 18px 12px;
}

.convention-banner-cta[b-f6d7aob5xk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    /* Indigo → deep-blue, matching the comp's violet-blue CTA. --accent-indigo (#6366ff) is an
       existing palette token, so this introduces no new colour. The deep-blue end is not
       decoration: white on flat --accent-indigo is 4.31:1, under AA for a 14px bold label, and
       mixing 22% --accent-primary-deep into the light stop lifts the lightest point to ~5:1. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-indigo) 78%, var(--accent-primary-deep)) 0%,
        var(--accent-primary-deep) 100%);
    color: var(--text-on-accent);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 12px var(--accent-indigo-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.convention-banner-cta svg[b-f6d7aob5xk] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.convention-banner-cta:hover[b-f6d7aob5xk] {
    color: var(--text-on-accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px var(--accent-indigo-glow);
}

/* Blocked state: the comp's solid orange button. --accent-orange/--accent-orange-deep carry a
   purpose-built dark label token, --text-on-orange (#1a1200), which is what makes a solid
   orange fill viable here — it holds ~9:1, where white would be 2.1:1 and --text-inverse
   flips per theme. */
.convention-banner-cta--warning[b-f6d7aob5xk] {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-deep) 100%);
    color: var(--text-on-orange);
    box-shadow: 0 2px 12px var(--accent-primary-glow);
}

.convention-banner-cta--warning:hover[b-f6d7aob5xk] {
    background: linear-gradient(135deg, var(--accent-orange) 20%, var(--accent-orange-deep) 120%);
    color: var(--text-on-orange);
}

.convention-banner-countdown[b-f6d7aob5xk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-on-accent-soft);
    white-space: nowrap;
}

.convention-banner-countdown svg[b-f6d7aob5xk] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── Dismiss ───────────────────────────────────────────────────────────── */

.convention-banner-dismiss[b-f6d7aob5xk] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-on-accent-soft);
    cursor: pointer;
}

.convention-banner-dismiss svg[b-f6d7aob5xk] {
    width: 15px;
    height: 15px;
}

.convention-banner-dismiss:hover:not(:disabled)[b-f6d7aob5xk] {
    background: var(--overlay-on-accent-light);
    color: var(--text-on-accent);
}

.convention-banner-dismiss:disabled[b-f6d7aob5xk] {
    cursor: default;
    opacity: 0.6;
}

/* Visible keyboard focus on the accent surface — the app's default focus ring is tuned for
   the page background and is low-contrast here. */
.convention-banner-dismiss:focus-visible[b-f6d7aob5xk],
.convention-banner-cta:focus-visible[b-f6d7aob5xk],
.convention-banner-footer a:focus-visible[b-f6d7aob5xk] {
    outline: 2px solid var(--text-on-accent);
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .convention-ticket-banner[b-f6d7aob5xk] {
        flex-wrap: wrap;
    }

    .convention-banner-body[b-f6d7aob5xk] {
        flex: 1 1 320px;
    }

    .convention-banner-aside[b-f6d7aob5xk] {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 20px 18px;
    }
}

@media (max-width: 560px) {
    .convention-banner-rail[b-f6d7aob5xk] {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        text-align: left;
    }

    .convention-banner-rail-icon[b-f6d7aob5xk] {
        width: 30px;
        height: 30px;
    }

    .convention-banner-rail-label[b-f6d7aob5xk] {
        font-size: 0.75rem;
    }

    /* The stacked rail already carries the wordmark on one line. */
    .convention-banner-rail-label br[b-f6d7aob5xk] {
        display: none;
    }

    .convention-banner-aside[b-f6d7aob5xk] {
        flex-wrap: wrap;
    }
}
/* /Components/CryptoInfoDialog.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-wrchlgazxd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Crypto Info Dialog Card */
.crypto-info-dialog[b-wrchlgazxd] {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    width: 560px;
    max-width: calc(100vw - 32px);
    padding: 32px;
    box-shadow: var(--shadow-xl);
}

/* Close Button */
.close-btn[b-wrchlgazxd] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    color: var(--text-secondary);
}

.close-btn:hover[b-wrchlgazxd] {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Dialog Header */
.dialog-header[b-wrchlgazxd] {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 20px;
}

.dialog-title[b-wrchlgazxd] {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

/* Dialog Body */
.dialog-body[b-wrchlgazxd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.instructions-heading[b-wrchlgazxd] {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.instructions-subtitle[b-wrchlgazxd] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.warning-banner[b-wrchlgazxd] {
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-bg-strong);
    color: var(--color-warning);
    font-size: 14px;
    font-weight: 500;
}

.instructions-step[b-wrchlgazxd] {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
    line-height: 22px;
}

/* Dialog Actions — .btn-primary styling inherits from app.css */
.dialog-actions[b-wrchlgazxd] {
    display: flex;
    justify-content: flex-end;
}

.dialog-actions .btn-primary[b-wrchlgazxd] {
    min-width: 120px;
    justify-content: center;
}
/* /Components/CryptoPayoutDialog.razor.rz.scp.css */
.crypto-payout-modal[b-5jucmhn1qh] {
    /* Hook for any modal-wide overrides; intentionally empty for now. */
}

.crypto-payout-modal__title[b-5jucmhn1qh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.crypto-payout-modal__step-indicator[b-5jucmhn1qh] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.crypto-payout-modal__error[b-5jucmhn1qh] {
    background: var(--bg-error, rgba(239, 68, 68, 0.12));
    color: var(--text-error, #ef4444);
    border-left: 3px solid var(--text-error, #ef4444);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.crypto-payout-modal__info[b-5jucmhn1qh] {
    background: var(--bg-info, rgba(99, 102, 241, 0.10));
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-primary);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.crypto-payout-modal__doc[b-5jucmhn1qh] {
    max-height: 320px;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.crypto-payout-modal__doc :first-child[b-5jucmhn1qh] {
    margin-top: 0;
}

.crypto-payout-modal__doc :last-child[b-5jucmhn1qh] {
    margin-bottom: 0;
}

.crypto-payout-modal__doc-label[b-5jucmhn1qh] {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.crypto-payout-modal__doc-viewer[b-5jucmhn1qh] {
    display: block;
    width: 100%;
    height: 420px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-card);
    margin-bottom: 12px;
}

.crypto-payout-modal__doc-actions-row[b-5jucmhn1qh] {
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .crypto-payout-modal__doc-viewer[b-5jucmhn1qh] {
        height: 280px;
    }
}

.crypto-payout-modal__summary[b-5jucmhn1qh] {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.crypto-payout-modal__summary strong[b-5jucmhn1qh] {
    color: var(--text-primary);
}

.crypto-payout-modal__wallet[b-5jucmhn1qh] {
    font-family: var(--font-mono, monospace);
    word-break: break-all;
}

.crypto-payout-modal__ack-prompt[b-5jucmhn1qh] {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.crypto-payout-modal__requirements[b-5jucmhn1qh] {
    margin-bottom: 16px;
}

.crypto-payout-modal__requirements-heading[b-5jucmhn1qh] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.crypto-payout-modal__requirement-row[b-5jucmhn1qh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.crypto-payout-modal__req-icon[b-5jucmhn1qh] {
    flex-shrink: 0;
}

.crypto-payout-modal__req-icon--met[b-5jucmhn1qh] {
    color: var(--color-success);
}

.crypto-payout-modal__req-icon--unmet[b-5jucmhn1qh] {
    color: var(--color-error);
}

.crypto-payout-modal__requirement-label--met[b-5jucmhn1qh] {
    color: var(--color-success);
}

/* Visually hidden but available to assistive tech — conveys satisfied/unsatisfied
   state in text, since the icon (aria-hidden) and colour alone are not enough. */
.crypto-payout-modal__sr-only[b-5jucmhn1qh] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The checkbox class lands on the MudCheckBox root (a child-component element),
   which does NOT carry this component's scoped-CSS attribute. Anchor on the
   directly-rendered list wrapper and reach the checkbox via ::deep so the rule
   actually matches (plain scoped selectors can't style mud-* internals). */
.crypto-payout-modal__ack-list[b-5jucmhn1qh]  .crypto-payout-modal__ack-checkbox {
    display: block;
    margin-top: 4px;
}

/* MudBlazor checkbox labels can default to nowrap in some contexts (the shared
   floating-label class truncates with an ellipsis) — force wrap on every
   descendant of the checkbox so long acknowledgement text (e.g. the 118-char
   test-deposit item) wraps at word boundaries instead of clipping. */
.crypto-payout-modal__ack-list[b-5jucmhn1qh]  .crypto-payout-modal__ack-checkbox {
    align-items: flex-start;
}

.crypto-payout-modal__ack-list[b-5jucmhn1qh]  .crypto-payout-modal__ack-checkbox,
.crypto-payout-modal__ack-list[b-5jucmhn1qh]  .crypto-payout-modal__ack-checkbox * {
    white-space: normal;
}
/* /Components/CustomerDashboard.razor.rz.scp.css */
.dashboard-page[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-fvwvixrenj] .dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 0.5rem;
    min-height: 120px;
}

[b-fvwvixrenj] .dash-empty-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

[b-fvwvixrenj] .dash-empty-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    max-width: 280px;
}

.dashboard-layout[b-fvwvixrenj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1rem;
    align-items: start;
}

.dashboard-left-column[b-fvwvixrenj],
.dashboard-right-column[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.referral-card[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.referral-heading[b-fvwvixrenj] {
    position: relative;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-left: 0.55rem;
    letter-spacing: -0.01em;
}

.referral-heading[b-fvwvixrenj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.95rem;
    border-radius: 2px;
    background: var(--color-success);
}

.referral-subheading[b-fvwvixrenj] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.referral-link-row[b-fvwvixrenj] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-input);
}

.referral-input[b-fvwvixrenj] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--accent-secondary);
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
}

.referral-input:focus[b-fvwvixrenj] {
    outline: none;
}

.referral-btn[b-fvwvixrenj] {
    border-radius: 0;
    min-height: 100%;
}

.referral-message[b-fvwvixrenj] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.referral-message-success[b-fvwvixrenj] {
    color: var(--color-success);
}

.referral-message-error[b-fvwvixrenj] {
    color: var(--color-error);
}

.dashboard-grid[b-fvwvixrenj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-grid-customer-cards[b-fvwvixrenj] {
    grid-template-columns: 1fr;
}

.upgrade-title[b-fvwvixrenj] {
    position: relative;
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 800;
    padding-left: 0.7rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent-primary), var(--color-error));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.upgrade-title[b-fvwvixrenj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.1rem;
    border-radius: 2px;
    background: var(--accent-primary);
}

.right-column-title-card[b-fvwvixrenj] {
    padding: 1.25rem;
}

/* Per-card accent stripes — each card type gets a distinct identity.
   Selectors include `.dash-card` so they outrank the later `.dash-card::before`
   base rule (which uses `background:` shorthand and would otherwise reset
   these `background-image` overrides back to the default purple stripe). */

/* Referral card — green (matches Copy/QR success theme). */
.dash-card.referral-card[b-fvwvixrenj]::before {
    background-image: linear-gradient(90deg, var(--color-success), transparent 70%);
}

/* "Upgrade Yourself" header card — purple→error gradient (matches title). */
.dash-card.right-column-title-card[b-fvwvixrenj]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-error) 90%);
    opacity: 0.7;
}

/* Two-and-Free card — error/red accent (matches the "Two And Free" heading). */
.dash-card.two-and-free-card[b-fvwvixrenj]::before {
    background-image: linear-gradient(90deg, var(--color-error), var(--color-warning) 90%);
}

/* Rewards card — purple→green gradient (matches CTA + cart icon). */
.dash-card.rewards-card[b-fvwvixrenj]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}


.dash-card[b-fvwvixrenj] {
    position: relative;
    background:
        radial-gradient(120% 120% at 0% 0%, var(--accent-primary-glow) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Top-accent stripe — same identity treatment as BrandPromoterDashboard.
   Default purple; per-card overrides below tint specific sections. */
.dash-card[b-fvwvixrenj]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%) top / 100% 3px no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

.dash-card:hover[b-fvwvixrenj] {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary-hover-border);
}

.card-title[b-fvwvixrenj] {
    position: relative;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    padding-left: 0.55rem;
    letter-spacing: -0.01em;
}

/* Coloured tab next to card titles. */
.card-title[b-fvwvixrenj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.85rem;
    border-radius: 2px;
    background: var(--accent-primary);
}

.card-title-xl[b-fvwvixrenj] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.card-footnote[b-fvwvixrenj] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.two-and-free-card[b-fvwvixrenj] {
    padding: 1rem;
}

.two-and-free-body[b-fvwvixrenj] {
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-input);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}

.two-and-free-kicker[b-fvwvixrenj] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.two-and-free-heading[b-fvwvixrenj] {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-error);
}

.two-and-free-text[b-fvwvixrenj] {
    margin: 0;
    max-width: 52rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
}

.two-and-free-progress-card[b-fvwvixrenj] {
    width: 100%;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.two-and-free-progress-title[b-fvwvixrenj] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.two-and-free-progress-value[b-fvwvixrenj] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--accent-primary), var(--color-success));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.two-and-free-progress-subtitle[b-fvwvixrenj] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.two-and-free-footer[b-fvwvixrenj] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.rewards-card[b-fvwvixrenj] {
    padding: 1rem;
}

.rewards-content[b-fvwvixrenj] {
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-input);
    overflow: hidden;
}

.rewards-balance[b-fvwvixrenj] {
    padding: 1rem;
}

.rewards-balance-row[b-fvwvixrenj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rewards-label[b-fvwvixrenj] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.rewards-balance-value[b-fvwvixrenj] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-primary);
}

/* ::deep reaches the MudIcon's SVG root — without it the scoped attribute
   never lands on the child component and the icon falls back to MudBlazor's
   Color.Info palette instead of the Sky Blue token. */
[b-fvwvixrenj] .rewards-cart-icon {
    font-size: 1.5rem;
    color: var(--accent-info) !important;
}

.rewards-balance-number[b-fvwvixrenj] {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
}

.rewards-balance-unit[b-fvwvixrenj] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}

.rewards-summary[b-fvwvixrenj] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 1rem 1rem;
    gap: 1rem;
}

.rewards-summary-item[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rewards-summary-item-right[b-fvwvixrenj] {
    align-items: flex-end;
    text-align: right;
}

.rewards-summary-value[b-fvwvixrenj] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.rewards-divider[b-fvwvixrenj] {
    width: 1px;
    height: 56px;
    background: var(--border-primary);
}

.rewards-history-btn[b-fvwvixrenj] {
    display: flex;
    justify-content: center;
    text-decoration: none;
    min-height: 48px;
    width: 100%;
    border-radius: 0 0 12px 12px;
}

.rewards-history-btn:hover[b-fvwvixrenj] {
    text-decoration: none;
}

.dashboard-footer[b-fvwvixrenj] {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .dashboard-layout[b-fvwvixrenj] {
        grid-template-columns: 1fr;
    }

    .dashboard-grid[b-fvwvixrenj] {
        grid-template-columns: 1fr;
    }

    .referral-link-row[b-fvwvixrenj] {
        flex-wrap: wrap;
    }

    .referral-input[b-fvwvixrenj] {
        width: 100%;
    }

    .referral-btn[b-fvwvixrenj] {
        min-height: 44px;
        flex: 1;
    }

    .two-and-free-heading[b-fvwvixrenj] {
        font-size: 1.8rem;
    }

    .two-and-free-progress-value[b-fvwvixrenj],
    .rewards-balance-number[b-fvwvixrenj],
    .rewards-summary-value[b-fvwvixrenj] {
        font-size: 1.7rem;
    }

    .rewards-summary[b-fvwvixrenj] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .rewards-divider[b-fvwvixrenj] {
        width: 100%;
        height: 1px;
    }

    .rewards-summary-item-right[b-fvwvixrenj] {
        align-items: flex-start;
        text-align: left;
    }
}

.product-banners-card[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-banners-card .card-title[b-fvwvixrenj] {
    margin: 0 0 0.25rem 0;
}

.product-banner-list[b-fvwvixrenj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-banner-tile[b-fvwvixrenj] {
    display: block;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background-color: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-banner-tile:hover[b-fvwvixrenj],
.product-banner-tile:focus-visible[b-fvwvixrenj] {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    outline: none;
}

.product-banner-img[b-fvwvixrenj] {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .two-and-free-heading[b-fvwvixrenj] {
        font-size: 1.5rem;
    }

    .two-and-free-progress-value[b-fvwvixrenj],
    .rewards-balance-number[b-fvwvixrenj] {
        font-size: 1.4rem;
    }

    .dash-card[b-fvwvixrenj] {
        padding: 0.75rem;
    }

    .referral-link-row[b-fvwvixrenj] {
        flex-direction: column;
    }

    .referral-btn[b-fvwvixrenj] {
        width: 100%;
        border-radius: 10px;
    }
}
/* /Components/CustomError.razor.rz.scp.css */
.error-message[b-y0xvsyjvyf] {
    color: var(--color-error);
    font-size: 13px;
    margin-top: 4px;
}

.error-message p[b-y0xvsyjvyf] {
    margin: 0;
    line-height: 18px;
}
/* /Components/EventCalendar.razor.rz.scp.css */
/* Event Calendar Component Styles */

.event-calendar-card[b-wvhqynrowr] {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 583px;
}

.card-content[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header */
.card-header[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
}

.header-title[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-icon[b-wvhqynrowr] {
    width: 20px;
    height: 20px;
}

.title-text[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: var(--text-primary);
    letter-spacing: -0.31px;
}

.details-btn[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.details-btn:hover[b-wvhqynrowr] {
    background: var(--bg-card-hover);
}

/* Calendar Navigation */
.calendar-nav[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
}

.nav-btn[b-wvhqynrowr] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s;
}

.nav-btn:hover[b-wvhqynrowr] {
    color: var(--text-primary);
}

.current-month[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: var(--text-primary);
    letter-spacing: -0.44px;
}

/* Calendar Grid */
.calendar-grid[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}

.weekday-headers[b-wvhqynrowr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 32px;
}

.weekday-header[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
}

.calendar-days[b-wvhqynrowr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.day-cell[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 4px;
}

.day-cell:hover[b-wvhqynrowr] {
    background: var(--bg-card-hover);
}

.day-cell.today[b-wvhqynrowr] {
    background: var(--accent-tertiary);
}

.day-cell.today .day-number[b-wvhqynrowr] {
    color: var(--text-on-accent);
    font-weight: 700;
}

.day-number[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    letter-spacing: -0.15px;
}

.event-indicators[b-wvhqynrowr] {
    display: flex;
    gap: 2px;
}

.event-dot[b-wvhqynrowr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.event-dot.training[b-wvhqynrowr] {
    background: var(--event-blue);
}

.event-dot.webinar[b-wvhqynrowr] {
    background: var(--event-purple);
}

.event-dot.promotion[b-wvhqynrowr] {
    background: var(--event-pink);
}

.event-dot.meeting[b-wvhqynrowr] {
    background: var(--accent-tertiary);
}

/* Legend */
.calendar-legend[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card-hover);
    border-radius: 10px;
    padding: 12px;
    flex-wrap: wrap;
}

.legend-item[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot[b-wvhqynrowr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.training[b-wvhqynrowr] {
    background: var(--event-blue);
}

.legend-dot.webinar[b-wvhqynrowr] {
    background: var(--event-purple);
}

.legend-dot.promotion[b-wvhqynrowr] {
    background: var(--event-pink);
}

.legend-dot.meeting[b-wvhqynrowr] {
    background: var(--accent-tertiary);
}

.legend-text[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
}

/* Upcoming Events */
.upcoming-events[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-card);
    max-height: 344px;
    overflow: hidden;
}

.upcoming-title[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    letter-spacing: -0.15px;
    margin: 0;
}

.events-list[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.event-item[b-wvhqynrowr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 12px 16px;
    border-radius: 10px;
    border-left: 4px solid;
}

.event-item.training[b-wvhqynrowr] {
    background: var(--event-blue-bg);
    border-left-color: var(--event-blue);
}

.event-item.webinar[b-wvhqynrowr] {
    background: var(--event-purple-bg);
    border-left-color: var(--event-purple);
}

.event-item.promotion[b-wvhqynrowr] {
    background: var(--event-pink-bg);
    border-left-color: var(--event-pink);
}

.event-item.meeting[b-wvhqynrowr] {
    background: var(--event-meeting-bg);
    border-left-color: var(--accent-tertiary);
}

.event-name[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    letter-spacing: -0.15px;
}

.event-details[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-date[b-wvhqynrowr],
.event-time[b-wvhqynrowr] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
}

.event-date svg[b-wvhqynrowr],
.event-time svg[b-wvhqynrowr] {
    flex-shrink: 0;
}

.no-events[b-wvhqynrowr] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
    text-align: center;
    padding: 24px;
}

/* Responsive */
@media (max-width: 640px) {
    .event-calendar-card[b-wvhqynrowr] {
        padding: 16px;
    }

    .calendar-legend[b-wvhqynrowr] {
        gap: 8px;
    }

    .legend-item[b-wvhqynrowr] {
        gap: 4px;
    }

    .current-month[b-wvhqynrowr] {
        font-size: 16px;
    }
}
/* /Components/FilterDropdown.razor.rz.scp.css */
.filter-dropdown[b-dip09v3zcr] {
    position: relative;
    width: 100%;
}

.filter-dropdown-trigger[b-dip09v3zcr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: "Titillium Web", sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-dropdown-trigger:hover:not(.open)[b-dip09v3zcr] {
    border-color: var(--accent-primary);
}

.filter-dropdown-trigger.open[b-dip09v3zcr],
.filter-dropdown-trigger:focus[b-dip09v3zcr] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.filter-dropdown-trigger-label[b-dip09v3zcr] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-dropdown-trigger-label.placeholder[b-dip09v3zcr] {
    color: var(--text-secondary);
}

.filter-dropdown-chevron[b-dip09v3zcr] {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.filter-dropdown-trigger.open .filter-dropdown-chevron[b-dip09v3zcr] {
    transform: rotate(180deg);
}

.filter-dropdown-backdrop[b-dip09v3zcr] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.filter-dropdown-menu[b-dip09v3zcr] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-dropdown);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    animation: filterDropdownFadeIn-b-dip09v3zcr 0.15s ease;
}

@keyframes filterDropdownFadeIn-b-dip09v3zcr {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-dropdown-item[b-dip09v3zcr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: "Titillium Web", sans-serif;
    border-radius: 4px;
    text-align: left;
    transition: background-color 0.12s, color 0.12s;
}

.filter-dropdown-item:hover[b-dip09v3zcr] {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
}

.filter-dropdown-item.selected[b-dip09v3zcr] {
    color: var(--accent-primary);
    font-weight: 600;
}
/* /Components/FilterMultiDropdown.razor.rz.scp.css */
.filter-multi-dropdown[b-u408d1l7zd] {
    position: relative;
    width: 100%;
}

.filter-multi-dropdown-trigger[b-u408d1l7zd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: "Titillium Web", sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-multi-dropdown-trigger:hover:not(.open)[b-u408d1l7zd] {
    border-color: var(--accent-primary);
}

.filter-multi-dropdown-trigger.open[b-u408d1l7zd],
.filter-multi-dropdown-trigger:focus[b-u408d1l7zd] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.filter-multi-dropdown-trigger-label[b-u408d1l7zd] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-multi-dropdown-trigger-label.placeholder[b-u408d1l7zd] {
    color: var(--text-secondary);
}

.filter-multi-dropdown-chevron[b-u408d1l7zd] {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.filter-multi-dropdown-trigger.open .filter-multi-dropdown-chevron[b-u408d1l7zd] {
    transform: rotate(180deg);
}

.filter-multi-dropdown-backdrop[b-u408d1l7zd] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.filter-multi-dropdown-menu[b-u408d1l7zd] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-dropdown);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    animation: filterMultiDropdownFadeIn-b-u408d1l7zd 0.15s ease;
}

@keyframes filterMultiDropdownFadeIn-b-u408d1l7zd {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-multi-dropdown-item[b-u408d1l7zd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: "Titillium Web", sans-serif;
    text-align: left;
    transition: background-color 0.12s, color 0.12s;
}

.filter-multi-dropdown-item:hover[b-u408d1l7zd] {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
}

.filter-multi-dropdown-item.checked[b-u408d1l7zd] {
    color: var(--accent-primary);
    font-weight: 600;
}

.filter-multi-dropdown-item span[b-u408d1l7zd] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/FunnelProgress.razor.rz.scp.css */
.funnel-progress[b-yooyaphwuf] {
    position: sticky;
    top: 24px;
}

.funnel-progress__card[b-yooyaphwuf] {
    overflow: hidden;
    border: 1px solid var(--zn-gray-100);
    border-radius: 16px;
    background: var(--zn-white);
    box-shadow: 0 18px 45px -34px rgb(15 23 42 / 0.38), 0 2px 8px rgb(15 23 42 / 0.04);
}

.funnel-progress__step[b-yooyaphwuf] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zn-gray-100);
    color: var(--zn-gray-500);
    text-decoration: none;
}

.funnel-progress__step:last-child[b-yooyaphwuf] {
    border-bottom: 0;
}

a.funnel-progress__step[b-yooyaphwuf] {
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

a.funnel-progress__step:hover[b-yooyaphwuf] {
    color: var(--zn-accent-primary-ink);
    background: color-mix(in srgb, var(--zn-accent-primary) 5%, var(--zn-white));
}

.funnel-progress__step.is-current[b-yooyaphwuf] {
    color: var(--zn-gray-800);
    background: color-mix(in srgb, var(--zn-accent-primary) 6%, var(--zn-white));
    box-shadow: inset 3px 0 0 var(--zn-accent-primary);
}

.funnel-progress__step.is-complete[b-yooyaphwuf] {
    color: var(--zn-gray-700);
}

.funnel-progress__marker[b-yooyaphwuf] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 50%;
    background: var(--zn-white);
    font-size: 0.78rem;
    font-weight: 800;
}

.is-current .funnel-progress__marker[b-yooyaphwuf] {
    color: var(--zn-white);
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary);
}

.is-complete .funnel-progress__marker[b-yooyaphwuf] {
    color: var(--zn-white);
    border-color: var(--zn-color-success);
    background: var(--zn-color-success);
}

.funnel-progress__copy strong[b-yooyaphwuf],
.funnel-progress__copy small[b-yooyaphwuf] {
    display: block;
}

.funnel-progress__copy strong[b-yooyaphwuf] {
    font-size: 0.9rem;
}

.funnel-progress__copy small[b-yooyaphwuf] {
    margin-top: 2px;
    color: var(--zn-gray-500);
    font-size: 0.74rem;
}

a.funnel-progress__step:focus-visible[b-yooyaphwuf] {
    position: relative;
    outline: 3px solid color-mix(in srgb, var(--zn-accent-primary) 34%, transparent);
    outline-offset: -3px;
}

@media (max-width: 760px) {
    .funnel-progress[b-yooyaphwuf] {
        position: static;
        margin-bottom: 14px;
    }

    .funnel-progress__card[b-yooyaphwuf] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .funnel-progress__step[b-yooyaphwuf] {
        justify-content: center;
        min-height: 52px;
        padding: 10px 8px;
        border-right: 1px solid var(--zn-gray-100);
        border-bottom: 0;
    }

    .funnel-progress__step:last-child[b-yooyaphwuf] {
        border-right: 0;
    }

    .funnel-progress__copy[b-yooyaphwuf] {
        display: none;
    }

    .funnel-progress__step.is-current[b-yooyaphwuf] {
        box-shadow: inset 0 3px 0 var(--zn-accent-primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    a.funnel-progress__step[b-yooyaphwuf] {
        transition: none;
    }
}
/* /Components/HeaderOmniSearch.razor.rz.scp.css */
.omnisearch-dropdown[b-cvgiqw4oww] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    z-index: 1100;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
}

.omnisearch-state[b-cvgiqw4oww] {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.omnisearch-result[b-cvgiqw4oww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
    font-size: 14px;
}

.omnisearch-result:hover[b-cvgiqw4oww],
.omnisearch-result.is-highlighted[b-cvgiqw4oww] {
    background: var(--bg-card-hover);
}

.omnisearch-result-main[b-cvgiqw4oww] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.omnisearch-result-name[b-cvgiqw4oww] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omnisearch-result-site[b-cvgiqw4oww] {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omnisearch-result-meta[b-cvgiqw4oww] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    flex-shrink: 0;
}

.omnisearch-result-type[b-cvgiqw4oww] {
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.omnisearch-result-id[b-cvgiqw4oww] {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.omnisearch-backdrop[b-cvgiqw4oww] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}
/* /Components/HoldingTankCard.razor.rz.scp.css */
/* HoldingTankCard - ZINRAI Design */

/* Card root — .dash-card chrome (background/border/accent stripe/title) is
   shared with every other dashboard card and stays defined in the parent
   dashboards' ::deep rules; this only adds the tank's own internal layout. */
.holding-tank-card[b-26sxmatrhp] {
    display: flex;
    flex-direction: column;
}

/* ── Controls (page-size + search) ── */

.tank-controls[b-26sxmatrhp] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tank-page-size[b-26sxmatrhp] {
    width: 70px;
}

.tank-search[b-26sxmatrhp] {
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 100px;
    outline: none;
    transition: border-color 0.15s ease;
}

.tank-search:focus[b-26sxmatrhp] {
    border-color: var(--border-input-focus);
}

.tank-search[b-26sxmatrhp]::placeholder {
    color: var(--text-muted);
}

/* ── Table header ── */

.tank-table-header[b-26sxmatrhp] {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 0.25rem;
}

.tank-col-name[b-26sxmatrhp],
.tank-col-actions[b-26sxmatrhp],
.tank-col-actions-header[b-26sxmatrhp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Real columns, not space-between/percentages. CLEAR DATE and ACTIONS get
   FIXED pixel widths, not a share of the card, because their content is
   fixed-format/fixed-count and never needs more room on a wider card the
   way a name does — a percentage split cost two review cycles because a
   fraction of THIS card's actual width (which is anywhere from ~458px on a
   common 1440px desktop viewport with the nav rail collapsed, up to a hard
   ceiling of ~685px set by .dashboard-page's max-width: 1800px — it is
   never ~800px+ on the Brand Promoter host) undershot both the un-wrapped
   date text and the button's real rendered width. NAME gets flex: 1 to
   absorb whatever's left, which is also where the "takes the remainder"
   requirement lives structurally rather than as a percentage guess.
   Widths below are measured the same way as before (Playwright
   getBoundingClientRect against .tank-place-btn's and
   .tank-member-countdown's actual computed font/padding/border), not
   estimated from character counts:
     - CLEAR DATE: unchanged at 96px — "Aug 24" / "Sep 30" / "Dec 31"
       measure ~43-46px in the card's actual font (13.6px Inter, the
       app.css font stack; the header text does the loading over
       whatever's available), but the "CLEAR DATE" header needs more than
       the value does — the header measures ~90-93px (13.6px uppercase +
       letter-spacing), so 96px holds it on ONE line. This column's
       content didn't change with ZN-1280, so its width didn't either.
     - ACTIONS: ZN-1280 replaced the three row buttons (Assign / Bottom L /
       Bottom R, 260px) with a single "Place" button — 50.8px measured on
       one line — but the "ACTIONS" header text (66.5px, same 13.6px
       uppercase + letter-spacing treatment as CLEAR DATE) is now the wider
       of the two, so it — not the button — sizes the column. 72px leaves
       ~5.5px (~8%) headroom over the header text and ~21px (~30%) over the
       button; verified fitting on one line at both the ~458px and ~685px
       extremes of this card's real width range, freeing ~188px that goes
       to the name column below.
   Header cells carry the identical widths so the columns line up with the
   row below regardless of host or viewport; .tank-col-actions-header and
   .tank-actions must be edited together if either changes. */
.tank-col-name[b-26sxmatrhp] {
    flex: 1 1 0%;
    min-width: 0;
}

.tank-col-actions[b-26sxmatrhp] {
    flex: 0 0 96px;
    min-width: 0;
}

.tank-col-actions-header[b-26sxmatrhp] {
    flex: 0 0 72px;
    min-width: 0;
    text-align: right;
}

/* ── List / rows ── */

.tank-list[b-26sxmatrhp] {
    flex: 1;
    min-height: 0;
}

.tank-row[b-26sxmatrhp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-primary);
    row-gap: 0.375rem;
}

.tank-row:last-child[b-26sxmatrhp] {
    border-bottom: none;
}

/* .tank-member / .tank-member-countdown / .tank-actions are .tank-row's three
   direct children — widths matched to .tank-col-name / .tank-col-actions /
   .tank-col-actions-header above (fixed 96px / 72px for date and actions,
   flex: 1 for name — see the comment on .tank-col-name) so header and data
   stay in the same columns no matter how long any one row's name is. The
   date and actions columns don't need min-width: 0 to fit their own content
   (flex-shrink: 0 already refuses to squeeze them below 96px/72px — that's
   the point), but it's kept for consistency with .tank-member, where it's
   load-bearing: it overrides flexbox's default min-width: auto, which would
   otherwise refuse to shrink the name column below its content's natural
   (unwrapped) width and blow out the row on a long name. flex-start on
   .tank-row (above) keeps all three columns top-aligned when a wrapped name
   makes .tank-member two lines tall, so the date and action button don't
   drift to a re-centered position. */
.tank-member[b-26sxmatrhp] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
}

/* ZN-1280: overflow-wrap was break-word, which is what produced the
   one-letter-per-line vertical stack on a real (narrow) dashboard once the
   name column had almost no room left under the old 260px actions column
   (e.g. "Johnathan Wayne" rendered as a single-character-wide stack). With
   the actions column down to 72px the name column has real room again
   (~290px-~518px across this card's ~458px-~685px width range — comfortably
   more than an ordinary two-word name needs), so normal is enough to wrap
   on spaces only; a genuinely long single word still overflows horizontally
   rather than breaking mid-word or stacking vertically. */
.tank-member-name[b-26sxmatrhp] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: normal;
}

.tank-member-countdown[b-26sxmatrhp] {
    font-size: 0.85rem;
    color: var(--accent-secondary);
    flex: 0 0 96px;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ── Row action (Place) ── */

.tank-actions[b-26sxmatrhp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
    flex: 0 0 72px;
    min-width: 0;
}

.tank-place-btn[b-26sxmatrhp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.tank-place-btn:hover:not(:disabled)[b-26sxmatrhp] {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.tank-place-btn:focus-visible[b-26sxmatrhp] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.tank-place-btn:disabled[b-26sxmatrhp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Row feedback (error / success) ── */

.tank-member-message[b-26sxmatrhp],
.tank-member-success[b-26sxmatrhp] {
    flex: 1 1 100%;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.tank-member-message[b-26sxmatrhp] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.tank-member-success[b-26sxmatrhp] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* ── Footer / pagination ──
   .page-btn / .page-ellipsis stay defined in the parent dashboards
   (::deep, sized for this card) — they're the app-wide pagination
   convention (BackOffice/wwwroot/css/app.css), not tank-specific. */

.tank-footer[b-26sxmatrhp] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tank-info[b-26sxmatrhp] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tank-pagination[b-26sxmatrhp] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
/* /Components/MembershipExpiryPromptModal.razor.rz.scp.css */
.expiry-prompt-modal__title[b-cqpnt5sonj] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.expiry-prompt-modal__body[b-cqpnt5sonj] {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.expiry-prompt-modal__note[b-cqpnt5sonj] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

.expiry-prompt-modal__error[b-cqpnt5sonj] {
    color: var(--color-error);
    margin-top: 0.75rem;
    font-size: 0.875rem;
}
/* /Components/MyTeamCommissionHistory.razor.rz.scp.css */
.commission-history-container[b-djsotu0nxd] {
    padding: 24px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
}

.commission-history-header[b-djsotu0nxd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-divider);
}

/* Title + user badge on the left, Export CSV on the right. */
.commission-history-header > .d-flex:first-child[b-djsotu0nxd] {
    width: 100%;
}

.commission-history-header h3[b-djsotu0nxd] {
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.commission-user-badge[b-djsotu0nxd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(90deg, var(--accent-teal) 0%, var(--accent-teal-tint) 100%);
    border-radius: 20px;
    color: var(--text-on-accent);
    font-size: 14px;
    font-weight: 500;
    margin-right: 24px;
}

.commission-user-badge .user-icon[b-djsotu0nxd] {
    width: 20px;
    height: 20px;
    background: var(--overlay-on-accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* "Back to List" — own row above the Commission History card. */
.commission-back-to-list-btn[b-djsotu0nxd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--accent-primary);
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.commission-back-to-list-btn:hover[b-djsotu0nxd] {
    background: var(--accent-primary-light);
    border-color: var(--accent-primary-hover);
}

.commission-period-display[b-djsotu0nxd] {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

/* Keep "Current Period: <name>" on the first line; let the parenthetical date
   range wrap to its own line below it (matches the two-line spec). */
.commission-period-display .period-dates[b-djsotu0nxd] {
    flex-basis: 100%;
}

.fallback-notice[b-djsotu0nxd] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.commission-loading[b-djsotu0nxd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.commission-empty[b-djsotu0nxd] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.commission-empty .empty-icon[b-djsotu0nxd] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.commission-empty h4[b-djsotu0nxd] {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--text-primary);
}

/* Commission Summary View (for <2 periods) */
.commission-summary-container[b-djsotu0nxd] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 992px) {
    .commission-summary-container[b-djsotu0nxd] {
        grid-template-columns: 1fr;
    }
}

.commission-summary-card[b-djsotu0nxd],
.commission-totals-card[b-djsotu0nxd] {
    background: var(--bg-card-hover);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--border-card);
}

.commission-summary-card h4[b-djsotu0nxd],
.commission-totals-card h4[b-djsotu0nxd],
.commission-table-container h4[b-djsotu0nxd] {
    font-family: "Titillium Web", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.summary-grid[b-djsotu0nxd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-item[b-djsotu0nxd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label[b-djsotu0nxd],
.total-label[b-djsotu0nxd] {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-djsotu0nxd] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.summary-value.commission-amount[b-djsotu0nxd] {
    color: var(--color-success);
    font-weight: 600;
}

.totals-grid[b-djsotu0nxd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.total-item[b-djsotu0nxd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.total-value[b-djsotu0nxd] {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-tertiary);
}

/* Commission Charts Grid */
.commission-charts-grid[b-djsotu0nxd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1400px) {
    .commission-charts-grid[b-djsotu0nxd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .commission-charts-grid[b-djsotu0nxd] {
        grid-template-columns: 1fr;
    }
}

/* Commission Chart Container */
.commission-chart-container[b-djsotu0nxd] {
    background: var(--bg-card-hover);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-card);
}

.chart-header[b-djsotu0nxd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h4[b-djsotu0nxd] {
    font-family: "Titillium Web", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-wrapper[b-djsotu0nxd] {
    margin-top: 16px;
    padding-bottom: 24px;
}

/* Make all chart text (axis, legend, data labels) bright on dark mode */
.chart-wrapper[b-djsotu0nxd]  .mud-chart-line .mud-chart-serie text,
.chart-wrapper[b-djsotu0nxd]  svg text {
    font-size: 14px !important;
    font-weight: 500 !important;
    fill: var(--text-primary) !important;
}

/* Make hover/data point label text white */
.chart-wrapper[b-djsotu0nxd]  .mud-chart-line g > text,
.chart-wrapper[b-djsotu0nxd]  .mud-chart g text[dominant-baseline],
.chart-wrapper[b-djsotu0nxd]  svg g > rect + text,
.chart-wrapper[b-djsotu0nxd]  svg text:not(:first-child) {
    fill: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Legend below chart is HTML (not SVG) — color, not fill */
.chart-wrapper[b-djsotu0nxd]  .mud-chart-legend,
.chart-wrapper[b-djsotu0nxd]  .mud-chart-legend-item,
.chart-wrapper[b-djsotu0nxd]  .mud-chart-legend-text {
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Increase spacing for Y-axis labels */
.chart-wrapper[b-djsotu0nxd]  .mud-chart {
    overflow: visible;
}

.chart-legend[b-djsotu0nxd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legend-color[b-djsotu0nxd] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

/* Commission Table Container */
.commission-table-container[b-djsotu0nxd] {
    margin-bottom: 24px;
}

.commission-table[b-djsotu0nxd] {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-table-row);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-card);
}

.commission-table th[b-djsotu0nxd],
.commission-table td[b-djsotu0nxd] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-divider);
}

.commission-table th[b-djsotu0nxd] {
    background: var(--bg-table-header);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.commission-table td[b-djsotu0nxd] {
    font-size: 14px;
    color: var(--text-primary);
}

.commission-table tbody tr:hover[b-djsotu0nxd] {
    background: var(--bg-table-row-hover);
}

.commission-table td.commission-amount[b-djsotu0nxd] {
    color: var(--color-success);
    font-weight: 600;
}

/* Commission Summary Row (bottom stats) */
.commission-summary-row[b-djsotu0nxd] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.summary-stat-card[b-djsotu0nxd] {
    flex: 1;
    min-width: 150px;
    background: var(--bg-card-hover);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border-card);
}

.stat-label[b-djsotu0nxd] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value[b-djsotu0nxd] {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--accent-tertiary);
}

/* Payout Status badges */
.status-pending[b-djsotu0nxd],
.status-paid[b-djsotu0nxd],
.status-failed[b-djsotu0nxd],
.status-cancelled[b-djsotu0nxd],
.status-unknown[b-djsotu0nxd] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending[b-djsotu0nxd] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-paid[b-djsotu0nxd] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-failed[b-djsotu0nxd] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.status-cancelled[b-djsotu0nxd] {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

.status-unknown[b-djsotu0nxd] {
    background: var(--bg-card-hover);
    color: var(--text-tertiary);
}

.status-processing[b-djsotu0nxd] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-info-bg);
    color: var(--color-info);
}

.status-na[b-djsotu0nxd] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-card-hover);
    color: var(--text-tertiary);
}

/* Export and Back buttons */
.export-commission-btn[b-djsotu0nxd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-primary);
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.export-commission-btn:hover[b-djsotu0nxd] {
    background: var(--bg-card);
}

.export-commission-btn[b-djsotu0nxd] {
    color: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
}

.export-commission-btn:hover[b-djsotu0nxd] {
    background: var(--accent-tertiary-light);
}

.export-commission-btn:disabled[b-djsotu0nxd] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Period display */
.period-label[b-djsotu0nxd],
.period-dates[b-djsotu0nxd] {
    color: var(--text-secondary);
}
.period-value[b-djsotu0nxd] {
    color: var(--text-primary);
}
/* /Components/MyTeamEmailOptionsDialog.razor.rz.scp.css */
.email-options-modal[b-8dr7b7vmt9] {
    background: var(--bg-modal);
    color: var(--text-primary);
}

.email-options-title[b-8dr7b7vmt9] {
    color: var(--text-primary);
    font-weight: 600;
}

.email-options-list[b-8dr7b7vmt9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.email-option-item[b-8dr7b7vmt9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-card);
}

.email-option-name[b-8dr7b7vmt9] {
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.email-option-desc[b-8dr7b7vmt9] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.email-preview-container[b-8dr7b7vmt9] {
    padding: 4px 0;
}

.email-preview-loading[b-8dr7b7vmt9] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.email-preview-content[b-8dr7b7vmt9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-preview-field[b-8dr7b7vmt9] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.email-preview-body[b-8dr7b7vmt9] {
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    max-height: 300px;
    overflow-y: auto;
}

.email-preview-error[b-8dr7b7vmt9] {
    color: var(--color-error);
    font-size: 0.875rem;
}

.email-send-success[b-8dr7b7vmt9] {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 0.875rem;
}

.email-send-error[b-8dr7b7vmt9] {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--color-error-bg);
    color: var(--color-error);
    font-size: 0.875rem;
}
/* /Components/MyTeamGenealogyList.razor.rz.scp.css */
/* =============================================
   MyTeamGenealogyList — scoped component styles
   CSS variables only — no hex/rgb literals
   ============================================= */

.gen-list-wrapper[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Toolbars ---- */

.gen-list-toolbar[b-mcw6jz6y8b] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.gen-list-toolbar-left[b-mcw6jz6y8b] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.gen-list-toolbar-right[b-mcw6jz6y8b] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Match Tree view's .gr-toolbar-btn appearance — filled card-bg with
   border, instead of the global .btn-secondary's transparent style.
   Keeps the buttons consistent across all three My Organization tabs. */
.gen-list-toolbar-right .btn[b-mcw6jz6y8b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gen-list-toolbar-right .btn:hover:not(:disabled)[b-mcw6jz6y8b] {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

@media (max-width: 900px) {
    .gen-list-toolbar[b-mcw6jz6y8b] {
        flex-wrap: wrap;
    }
}

.gen-list-toolbar-2[b-mcw6jz6y8b] {
    gap: 8px;
}

/* Toolbar button variants (teal / orange / purple) */
.btn-teal[b-mcw6jz6y8b] {
    background: var(--accent-tertiary);
    color: var(--text-inverse);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.15s;
}

.btn-teal:hover[b-mcw6jz6y8b] { opacity: 0.85; }

.btn-orange[b-mcw6jz6y8b] {
    background: var(--chart-orange);
    color: var(--text-inverse);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.15s;
}

.btn-orange:hover[b-mcw6jz6y8b] { opacity: 0.85; }

/* ---- Grid header row ---- */

.gen-list-grid-header[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.gen-list-rows-per-page[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gen-list-select[b-mcw6jz6y8b] {
    width: 80px;
}

.gen-list-search-box[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

.gen-list-search-label[b-mcw6jz6y8b] {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.gen-list-search-input[b-mcw6jz6y8b] {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    min-width: 200px;
}

.gen-list-search-input:focus[b-mcw6jz6y8b] {
    border-color: var(--border-input-focus);
}

/* ---- Table ---- */

.gen-list-table-container[b-mcw6jz6y8b] {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

.gen-list-table[b-mcw6jz6y8b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.gen-list-table thead tr th[b-mcw6jz6y8b] {
    background: var(--bg-table-header);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
}

.gen-list-table tbody tr[b-mcw6jz6y8b] {
    background: var(--bg-table-row);
    border-bottom: 1px solid var(--border-secondary);
    transition: background 0.1s;
}

.gen-list-table tbody tr:hover[b-mcw6jz6y8b] {
    background: var(--bg-table-row-hover);
}

.gen-list-table tbody td[b-mcw6jz6y8b] {
    padding: 10px 12px;
    vertical-align: middle;
}

/* Empty row */
.gen-list-empty-row[b-mcw6jz6y8b] {
    text-align: center;
    padding: 32px !important;
    color: var(--text-secondary);
}

/* ---- ID cell with indent + expand badge ---- */

.gen-list-id-cell[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gen-list-expand-badge[b-mcw6jz6y8b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

/* Base badge shape — colors are applied by leg below. */
.gen-list-expand-plus[b-mcw6jz6y8b],
.gen-list-collapse-badge[b-mcw6jz6y8b] {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

/* Left leg → purple (placement first child). */
.gen-list-expand-badge.leg-left[b-mcw6jz6y8b] {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.gen-list-expand-badge.leg-left:hover[b-mcw6jz6y8b] {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

/* Right leg → red (placement second child). */
.gen-list-expand-badge.leg-right[b-mcw6jz6y8b] {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
}

.gen-list-expand-badge.leg-right:hover[b-mcw6jz6y8b] {
    background: var(--color-error);
    color: var(--text-inverse);
}

.gen-list-expanding[b-mcw6jz6y8b] {
    background: transparent;
    border: none;
    cursor: default;
}

.gen-list-id-text[b-mcw6jz6y8b] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ---- Pagination ---- */

.gen-list-pagination[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-divider);
}

.gen-list-pagination-info[b-mcw6jz6y8b] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gen-list-pagination-controls[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gen-list-page-btn[b-mcw6jz6y8b] {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.gen-list-page-btn:hover[b-mcw6jz6y8b] {
    background: var(--bg-card-hover);
}

.gen-list-page-btn.active[b-mcw6jz6y8b] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--btn-primary-text);
}

/* Prev / Next pagination buttons */
.btn-prev[b-mcw6jz6y8b],
.btn-next[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-prev.enabled:hover[b-mcw6jz6y8b],
.btn-next.enabled:hover[b-mcw6jz6y8b] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.btn-prev.disabled[b-mcw6jz6y8b],
.btn-next.disabled[b-mcw6jz6y8b] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Manage Columns dialog ---- */

/* Manage Columns + Configurations dialog styles moved to global app.css —
   the markup now lives in the shared MyTeamColumnConfigDialogs component
   which renders outside this component's scoped CSS. */

/* ---- Filters dialog ---- */

.gen-list-filter-body[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gen-list-filter-checkboxes[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gen-list-filter-check-label[b-mcw6jz6y8b] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.gen-list-filter-check-label input[type="checkbox"][b-mcw6jz6y8b] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.gen-list-filter-fields[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* reuse gen-list-filter-row name in the table header vs dialog context:
   the table's filter row uses <tr class="gen-list-filter-row"> and the
   dialog fields use <div class="gen-list-filter-row"> — both are fine
   because div-context styles below target block layout */
.gen-list-filter-fields .gen-list-filter-row[b-mcw6jz6y8b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gen-list-filter-field[b-mcw6jz6y8b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gen-list-filter-label[b-mcw6jz6y8b] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.gen-list-filter-select[b-mcw6jz6y8b],
.gen-list-filter-input[b-mcw6jz6y8b] {
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gen-list-filter-input[b-mcw6jz6y8b]::placeholder {
    color: var(--text-tertiary);
}

.gen-list-filter-select:hover:not(:focus)[b-mcw6jz6y8b],
.gen-list-filter-input:hover:not(:focus)[b-mcw6jz6y8b] {
    border-color: var(--accent-primary);
}

.gen-list-filter-select:focus[b-mcw6jz6y8b],
.gen-list-filter-input:focus[b-mcw6jz6y8b] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.gen-list-filter-select option[b-mcw6jz6y8b] {
    background: var(--bg-dropdown);
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .gen-list-filter-fields .gen-list-filter-row[b-mcw6jz6y8b] {
        grid-template-columns: 1fr;
    }
}

/* ---- Self row (ZN-869): pinned row for the viewing user, above the downline rows ----
   Selector matches the specificity of the base ".gen-list-table tbody tr" rule above
   (class+element+element) — a bare ".gen-list-self-row" would lose that contest and the
   plain row background would win regardless of source order. */

.gen-list-table tbody tr.gen-list-self-row[b-mcw6jz6y8b] {
    background: var(--bg-card-hover);
    border-bottom: 2px solid var(--accent-primary);
}

.gen-list-table tbody tr.gen-list-self-row:hover[b-mcw6jz6y8b] {
    background: var(--bg-card-hover);
}

.gen-list-self-row .gen-list-cell-name[b-mcw6jz6y8b] {
    font-weight: 700;
}

/* Search-mode UX */
.gen-list-expand-none[b-mcw6jz6y8b] {
    display: inline-block;
    width: 1.5rem;
}

.gen-list-search-mode-note[b-mcw6jz6y8b] {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* ZN-266: Expand All row cap notice */
.gen-list-expand-all-capped[b-mcw6jz6y8b] {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Next Billing coverage pill (.next-billing-badge, .next-billing-green, .next-billing-red) lives
   in wwwroot/css/app.css (ZN-1306) — shared with MyTeamTable, and the colour classes are produced
   by ClientLibrary.Library.NextBillingDisplay.CoverageBadgeClass, so they're global by
   construction. Do not reintroduce a scoped copy here. */
/* /Components/MyTeamGraphicalTree.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Toolbar
   ═══════════════════════════════════════════════════════════════ */
.graphical-tree-toolbar[b-g19uafjmx5] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.gr-search-container-inline[b-g19uafjmx5],
.gr-tree-type-inline[b-g19uafjmx5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
    width: 240px;
}

.gr-tree-type-label[b-g19uafjmx5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 20px;
    height: 20px;
}

.gr-toolbar-label[b-g19uafjmx5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 20px;
    height: 20px;
}

.gr-tree-type-inline[b-g19uafjmx5]  .filter-dropdown-trigger {
    height: 40px;
}

/* MudTextField wraps its input in a .mud-input-control that adds vertical
   space for a helper-text reserve we don't use. Trim it so the visible
   field aligns with the FilterDropdown next to it. */
.gr-search-container-inline[b-g19uafjmx5]  .mud-input-control {
    margin: 0;
    padding: 0;
}

.gr-search-container-inline[b-g19uafjmx5]  .mud-input-helper-text {
    display: none;
}

/* MudBlazor internals (.mud-input...) for .gr-search-container-inline live in
   wwwroot/css/mudblazor-overrides.css — see CLAUDE.md "CSS & Theming". */

/* "No member found" (ZN-1332 / ZN-1281) — a search that matches nothing was
   previously a silent no-op; this renders under the search box instead. */
.gr-search-no-results[b-g19uafjmx5] {
    font-size: 12px;
    color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════
   Main Container
   ═══════════════════════════════════════════════════════════════ */
.simplified-tree-container[b-g19uafjmx5] {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Tree View Panel
   ═══════════════════════════════════════════════════════════════ */
.gr-tree-wrapper[b-g19uafjmx5] {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   Virtual Tree Canvas Container
   ═══════════════════════════════════════════════════════════════ */
.vt-scroll-container[b-g19uafjmx5] {
    overflow: auto;
    background-color: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-card);
    height: calc(100dvh - 450px);
    min-height: 200px;
    position: relative;
}

.vt-spacer[b-g19uafjmx5] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.vt-scroll-container canvas[b-g19uafjmx5] {
    position: sticky;
    top: 0;
    left: 0;
    cursor: grab;
    /* Stop the browser's default touch panning/zooming so Pointer Events get the
       touch stream cleanly — without this, tablet drag-to-pan competes with
       native scroll and pointermove drops mid-gesture. */
    touch-action: none;
}

.vt-scroll-container canvas:active[b-g19uafjmx5] {
    cursor: grabbing;
}

.vt-spinner[b-g19uafjmx5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.gr-tree-notice[b-g19uafjmx5] {
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
    align-self: center;
}

/* Minimap panel */
.gr-minimap-panel[b-g19uafjmx5] {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    overflow: hidden;
}

.gr-minimap-header[b-g19uafjmx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-card);
}

.gr-minimap-canvas-container[b-g19uafjmx5] {
    overflow: auto;
    max-height: 300px;
    cursor: crosshair;
}

.gr-minimap-canvas-container canvas[b-g19uafjmx5] {
    display: block;
}

.spinner-container[b-g19uafjmx5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   Canvas frame — positioning anchor for floating overlays
   ═══════════════════════════════════════════════════════════════ */
.gr-canvas-frame[b-g19uafjmx5] {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   Inline toolbars — above (Zoom/Reset + notice + Org Map) and below
   (Bottom Left/Right nav) the tree canvas per Figma node 237:6761.
   Replaces the previous floating overlay button columns.
   ═══════════════════════════════════════════════════════════════ */
.gr-canvas-toolbar[b-g19uafjmx5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.gr-canvas-toolbar-left[b-g19uafjmx5],
.gr-canvas-toolbar-right[b-g19uafjmx5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gr-canvas-bottom-bar[b-g19uafjmx5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gr-toolbar-btn[b-g19uafjmx5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gr-toolbar-btn:hover[b-g19uafjmx5] {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.gr-toolbar-btn:focus-visible[b-g19uafjmx5] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.gr-toolbar-btn.is-active[b-g19uafjmx5] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.gr-toolbar-btn:disabled[b-g19uafjmx5] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bottom-bar directional nav — gold (left descendant) / pink (right descendant)
   matches the semantic from the previous floating-button layout. */
.gr-toolbar-btn-nav-left[b-g19uafjmx5] {
    color: var(--rank-gold);
    border-color: var(--rank-gold-border-strong);
}
.gr-toolbar-btn-nav-left:hover[b-g19uafjmx5] {
    background: var(--rank-gold-light);
    border-color: var(--rank-gold);
}
.gr-toolbar-btn-nav-right[b-g19uafjmx5] {
    color: var(--chart-pink);
    border-color: var(--chart-pink-border-strong);
}
.gr-toolbar-btn-nav-right:hover[b-g19uafjmx5] {
    background: var(--chart-pink-light);
    border-color: var(--chart-pink);
}

@media (max-width: 600px) {
    .gr-toolbar-btn[b-g19uafjmx5] {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Fullscreen (ZN-1332) — .gr-tree-fullscreen-root wraps the whole
   component body (both toolbars, the canvas wrapper, the bottom
   bar and the action-menu overlay) so the per-node menu stays
   visible while fullscreen. Height override compensates for the
   toolbars/bottom-bar the :fullscreen container adds around the
   canvas (vt-scroll-container's normal lock is ~450px, see below).

   :fullscreen and :-webkit-full-screen are written as SEPARATE rules
   (review finding #4) rather than a comma-grouped selector list — an
   invalid/unrecognised selector in a grouped list drops the WHOLE
   rule, so a browser without the -webkit- alias would otherwise lose
   both the background AND the height override together, leaving a
   black backdrop behind a canvas still locked to the non-fullscreen
   height.
   ═══════════════════════════════════════════════════════════════ */
.gr-tree-fullscreen-root:fullscreen[b-g19uafjmx5] {
    background: var(--bg-body);
    padding: 12px;
}

.gr-tree-fullscreen-root:-webkit-full-screen[b-g19uafjmx5] {
    background: var(--bg-body);
    padding: 12px;
}

.gr-tree-fullscreen-root:fullscreen .vt-scroll-container[b-g19uafjmx5] {
    height: calc(100dvh - 160px);
}

.gr-tree-fullscreen-root:-webkit-full-screen .vt-scroll-container[b-g19uafjmx5] {
    height: calc(100dvh - 160px);
}

/* ═══════════════════════════════════════════════════════════════
   Directional nav controls (ZN-1332 follow-up) — the ticket owner asked for
   the visible affordance to move onto the canvas itself: three small circles
   drawn on the SELECTED card (top-centre = up to sponsor, bottom-left/-right
   = down each leg — see getNavHandlePoints/drawNavHandle in myteam.js). The
   floating panel this used to be is gone as a full-time visual.

   The three <button>s stay in the DOM — same data-testid, aria-label and
   disabled behaviour as before — for keyboard/screen-reader users and the
   existing Playwright coverage. They're visually hidden by DEFAULT with the
   standard clip technique (NOT display:none, so they remain focusable), and
   the whole panel reveals itself via :focus-within when a keyboard user tabs
   into one of them, reusing the same polished look the floating panel had.
   ═══════════════════════════════════════════════════════════════ */
.gr-nav-pad[b-g19uafjmx5] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 4;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gr-nav-pad:focus-within[b-g19uafjmx5] {
    width: auto;
    height: auto;
    padding: 10px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-primary);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(4px);
}

.gr-nav-pad-row[b-g19uafjmx5] {
    display: flex;
    gap: 6px;
}

.gr-nav-btn[b-g19uafjmx5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-primary);
    background: var(--bg-card-hover);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.gr-nav-btn:hover:not(:disabled)[b-g19uafjmx5] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
    transform: translateY(-1px);
}

.gr-nav-btn:focus-visible[b-g19uafjmx5] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.gr-nav-btn:disabled[b-g19uafjmx5] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 600px) {
    .gr-nav-pad[b-g19uafjmx5] {
        right: 8px;
        bottom: 8px;
    }
    .gr-nav-pad:focus-within[b-g19uafjmx5] {
        padding: 8px;
    }
    .gr-nav-btn[b-g19uafjmx5] {
        width: 30px;
        height: 30px;
    }
}

/* Node action-menu header (ZN-1332) — name + personally-signed badge. The
   tree is canvas-drawn, so the gold border it paints on a signed member
   conveys nothing to assistive tech; this restates it as text. */
.actions-menu-header[b-g19uafjmx5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-primary);
}

.actions-menu-header-name[b-g19uafjmx5] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.actions-menu-header-signed[b-g19uafjmx5] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rank-gold);
}

/* ═══════════════════════════════════════════════════════════════
   Genealogy Cards (feature-flagged, hidden by default)
   ═══════════════════════════════════════════════════════════════ */
.genealogy-cards[b-g19uafjmx5] {
    width: 320px;
    min-width: 280px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-card);
}

.genealogy-cards .genealogy-item[b-g19uafjmx5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-divider);
}

.genealogy-cards .genealogy-item:last-child[b-g19uafjmx5] {
    border-bottom: none;
    padding-bottom: 0;
}

.level-box[b-g19uafjmx5] { display: flex; align-items: center; gap: 0.5rem; }
.level-detail[b-g19uafjmx5] { padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.level-detail.profile-level[b-g19uafjmx5] { background: var(--color-success-bg); color: var(--color-success); }
.level-detail.first-level[b-g19uafjmx5] { background: var(--color-info-bg); color: var(--color-info); }
.level-detail.second-level[b-g19uafjmx5] { background: var(--color-warning-bg); color: var(--color-warning); }
.count-level[b-g19uafjmx5] { color: var(--text-secondary); font-size: 12px; }

.user-info[b-g19uafjmx5] { background: var(--bg-card-hover); border: 1px solid var(--border-card); border-radius: 8px; padding: 1rem; }
.user-info .user[b-g19uafjmx5] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.user-info .user-name[b-g19uafjmx5] { font-weight: 600; font-size: 15px; color: var(--accent-tertiary); cursor: pointer; }
.user-info .user-name:hover[b-g19uafjmx5] { text-decoration: underline; }
.user-info .user-name.gr-highlight[b-g19uafjmx5] { background: var(--accent-info-light); border-radius: 4px; padding: 2px 4px; }
.user-details-box[b-g19uafjmx5] { display: flex; gap: 1rem; }
.user-info-body-item[b-g19uafjmx5] { flex: 1; }
.user-info-label[b-g19uafjmx5] { font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; display: block; }
.user-info-details[b-g19uafjmx5] { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.active-status .member-status[b-g19uafjmx5] { color: var(--color-success); font-weight: 600; }
.inactive-status .member-status[b-g19uafjmx5] { color: var(--color-error); }

.genealogy-cards[b-g19uafjmx5]  .gr-view-link-tree { min-width: 32px !important; height: 32px !important; }
.genealogy-cards[b-g19uafjmx5]  .gr-view-link-tree .mud-button-root { min-width: 32px !important; width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 6px !important; }
.geneology-close-search[b-g19uafjmx5] { cursor: pointer; padding: 4px; align-self: flex-end; }
.geneology-close-search:hover[b-g19uafjmx5] { opacity: 0.7; }

/* Node action menu (ZN-712): mirrors the row-menu styling from MyTeamTable.razor.css.
   Scoped CSS doesn't cross components, so the visual rules are redeclared here. The
   menu's position is set inline (fixed, at the click point); these rules only supply
   the card look and stacked items. */
.actions-menu-backdrop[b-g19uafjmx5] {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: transparent;
}

.actions-menu[b-g19uafjmx5] {
    display: flex;
    flex-direction: column;
    background: var(--bg-dropdown, var(--bg-card));
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 4px;
    animation: nodeMenuFadeIn-b-g19uafjmx5 0.15s ease;
}

@keyframes nodeMenuFadeIn-b-g19uafjmx5 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.actions-menu .action-item[b-g19uafjmx5] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: "Titillium Web", sans-serif;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
}

.actions-menu .action-item:hover[b-g19uafjmx5] {
    background-color: var(--accent-primary-light, var(--bg-card-hover));
    color: var(--accent-primary, var(--text-primary));
}
/* /Components/MyTeamTable.razor.rz.scp.css */
/* ============================== MyTeamTable Component Styles ============================== */

.myteam-table-wrapper[b-z65lpwseb5] {
    width: 100%;
}

/* MudBlazor Select overrides for pagination */
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-input-outlined-border {
    border-radius: 6px;
    border-color: var(--border-input);
}
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-select-input {
    padding: 6px 12px;
    font-size: 14px;
    min-height: unset;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-select {
    width: 65px;
}
.myteam-table-wrapper[b-z65lpwseb5]  .page-input-container .filter-select {
    width: 65px;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-control {
    margin: 0;
    padding: 0;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-control-input-container {
    margin: 0;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-helper-text {
    display: none;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-select {
    height: 32px;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-select .mud-input-outlined-border {
    height: 32px;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-select .mud-select-input {
    padding: 4px 8px;
    min-height: unset;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-slot {
    padding: 0;
    overflow: visible;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-adornment-end {
    margin-left: 0;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-container .mud-input-label {
    display: none;
}

/* MudSelect / MudTextField inside filter row */
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-input,
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-select-input {
    color: var(--text-primary) !important;
}
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}
.myteam-table-wrapper[b-z65lpwseb5]  .filter-select .mud-input-label {
    color: var(--text-tertiary) !important;
}

/* Pagination select */
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-select .mud-input,
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-select .mud-select-input {
    color: var(--text-primary) !important;
}
.myteam-table-wrapper[b-z65lpwseb5]  .pagination-select .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}

/* Page input container filter-select */
.myteam-table-wrapper[b-z65lpwseb5]  .page-input-container .mud-input,
.myteam-table-wrapper[b-z65lpwseb5]  .page-input-container .mud-select-input {
    color: var(--text-primary) !important;
}
.myteam-table-wrapper[b-z65lpwseb5]  .page-input-container .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}

/* ============================== Filter Panel ============================== */

.filter-panel[b-z65lpwseb5] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 20px 24px;
}

.filter-panel-header[b-z65lpwseb5] {
    margin-bottom: 0;
}

.filter-panel-title[b-z65lpwseb5] {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-primary);
}

.filter-panel-divider[b-z65lpwseb5] {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 12px 0 16px;
}

.filter-panel-body[b-z65lpwseb5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-checkboxes[b-z65lpwseb5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-checkbox-label[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-checkbox-label input[type="checkbox"][b-z65lpwseb5] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.filter-fields[b-z65lpwseb5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-field-row[b-z65lpwseb5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.filter-field[b-z65lpwseb5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-field-label[b-z65lpwseb5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-field-select[b-z65lpwseb5],
.filter-field-input[b-z65lpwseb5] {
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-field-select:hover:not(:focus)[b-z65lpwseb5],
.filter-field-input:hover:not(:focus)[b-z65lpwseb5] {
    border-color: var(--accent-primary);
}

.filter-field-select:focus[b-z65lpwseb5],
.filter-field-input:focus[b-z65lpwseb5] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.filter-field-input[b-z65lpwseb5]::placeholder {
    color: var(--text-tertiary);
}

.filter-field-select option[b-z65lpwseb5] {
    background: var(--bg-dropdown);
    color: var(--text-primary);
}

.filter-panel-actions[b-z65lpwseb5] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .filter-field-row[b-z65lpwseb5] {
        grid-template-columns: 1fr;
    }
}

/* ============================== Top Bar ============================== */

.simplified-topbar-buttons[b-z65lpwseb5] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.simplified-topbar-buttons .btn[b-z65lpwseb5] {
    font-weight: 600;
}

.simplified-action-dropdown-wrapper[b-z65lpwseb5] {
    position: relative;
    display: inline-block;
}

.simplified-action-menu[b-z65lpwseb5] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 140px;
    padding: 4px;
}

/* ============================== Search Row ============================== */

.simplified-search-row[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.simplified-search-label[b-z65lpwseb5] {
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
}

.simplified-search-input[b-z65lpwseb5] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    min-width: 200px;
}

.simplified-search-input:focus[b-z65lpwseb5] {
    outline: none;
    border-color: var(--accent-primary);
}

/* ============================== Table Container ============================== */

.simplified-table-container[b-z65lpwseb5] {
    overflow-x: auto;
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.simplified-table td[b-z65lpwseb5] {
    white-space: nowrap;
}

/* ============================== Sortable Column Headers ============================== */

.sortable-th[b-z65lpwseb5] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-th:hover[b-z65lpwseb5] {
    background-color: var(--bg-hover);
}

.sortable-th > span:first-child[b-z65lpwseb5] {
    margin-right: 4px;
}

.sort-arrows[b-z65lpwseb5] {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    font-size: 8px;
    vertical-align: middle;
    gap: 0;
}

.sort-up[b-z65lpwseb5], .sort-down[b-z65lpwseb5] {
    transition: opacity 0.15s;
}

.sort-dim[b-z65lpwseb5] {
    opacity: 0.25;
}

.sort-active[b-z65lpwseb5] {
    opacity: 1;
    color: var(--accent-mint);
}

/* ============================== Email Cell ============================== */

.simplified-email-cell[b-z65lpwseb5] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role badges (.simplified-role-badge, .role-customer, .role-ibo) are defined
   globally in wwwroot/css/app.css so they can be shared with non-scoped pages
   like PromotionalUsersPage. */

/* Next Billing coverage pill (.next-billing-badge, .next-billing-green, .next-billing-red) moved
   to wwwroot/css/app.css (ZN-1306) — shared with MyTeamGenealogyList, and the colour classes are
   produced by ClientLibrary.Library.NextBillingDisplay.CoverageBadgeClass, so they're global by
   construction. Do not reintroduce a scoped copy here. */

/* ============================== Pending Payment Badge (ZN-540) ============================== */

.payment-pending-badge[b-z65lpwseb5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    white-space: nowrap;
}

[data-theme="dark"] .payment-pending-badge[b-z65lpwseb5] {
    border-color: var(--chart-yellow);
    color: var(--color-warning-bright);
}

/* ============================== Sponsor Cell ============================== */

.simplified-sponsor-cell[b-z65lpwseb5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.simplified-sponsor-id[b-z65lpwseb5] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--accent-info-light);
    color: var(--text-info);
    width: fit-content;
}

/* ============================== Actions ============================== */

.actions-cell[b-z65lpwseb5] {
    text-align: center;
}

.actions-wrapper[b-z65lpwseb5] {
    position: relative;
    display: inline-block;
}

.actions-btn[b-z65lpwseb5] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
}

.actions-btn:hover[b-z65lpwseb5] {
    color: var(--accent-primary);
    background-color: var(--bg-card-hover);
}

.actions-menu-backdrop[b-z65lpwseb5] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* position:fixed so the menu escapes the table's overflow-x:auto clipping context
   (which cut off items on bottom rows and forced awkward scrolling — ZN-695 QA).
   JS (window.positionRowActionMenu) sets left/top to anchor it to the ⋮ button's
   rect so it stays glued to the correct row and flips above when there's no room
   below. Starts hidden to avoid a flash at the pre-positioned default corner. */
.actions-menu[b-z65lpwseb5] {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    background: var(--bg-dropdown, var(--bg-card));
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 180px;
    padding: 4px;
    animation: menuFadeIn-b-z65lpwseb5 0.15s ease;
}

@keyframes menuFadeIn-b-z65lpwseb5 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.action-item[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: "Titillium Web", sans-serif;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
}

.action-item:hover[b-z65lpwseb5] {
    background-color: var(--accent-primary-light, var(--bg-card-hover));
    color: var(--accent-primary, var(--text-primary));
}

.empty-row[b-z65lpwseb5] {
    text-align: center;
    padding: 3rem 1.5rem !important;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================== Pagination ============================== */

.number-items-box[b-z65lpwseb5] {
    margin-left: 20px;
}

.pagination-container[b-z65lpwseb5] {
    padding: 8px 0;
    margin-top: 0;
    border-top: 1px solid var(--border-divider);
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: unset;
}

.pagination-result[b-z65lpwseb5],
.number-label[b-z65lpwseb5],
.jump-span[b-z65lpwseb5] {
    color: var(--text-tertiary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.pagination-right-side[b-z65lpwseb5] {
    gap: 1rem;
    flex-shrink: 0;
    align-items: flex-start !important;
}

.page-input-container[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
}

.jump-page-input[b-z65lpwseb5] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}

.jump-page-input[b-z65lpwseb5]::-webkit-outer-spin-button,
.jump-page-input[b-z65lpwseb5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.jump-page-input:hover:not(:focus)[b-z65lpwseb5] {
    border-color: var(--accent-primary);
}

.jump-page-input:focus[b-z65lpwseb5] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.pagination[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2px;
}

.pagination .btn-prev[b-z65lpwseb5],
.pagination .btn-next[b-z65lpwseb5] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .btn-prev:hover:not(.disabled)[b-z65lpwseb5],
.pagination .btn-next:hover:not(.disabled)[b-z65lpwseb5] {
    opacity: 0.8;
}

.pagination .btn-prev.disabled[b-z65lpwseb5],
.pagination .btn-next.disabled[b-z65lpwseb5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .btn-prev svg[b-z65lpwseb5],
.pagination .btn-next svg[b-z65lpwseb5] {
    display: block;
}

.number-container[b-z65lpwseb5] {
    gap: 0.5rem;
}

.pagination-select[b-z65lpwseb5] {
    min-width: 70px;
}

/* ============================== Email Options Dialog ============================== */

.email-options-title[b-z65lpwseb5] {
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
}

.email-options-list[b-z65lpwseb5] {
    padding: 16px 0;
}

.email-option-item[b-z65lpwseb5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    gap: 16px;
}

.email-option-name[b-z65lpwseb5] {
    font-family: "Titillium Web", sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.email-option-desc[b-z65lpwseb5] {
    font-family: "Titillium Web", sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

/* ============================== Email Preview ============================== */

.email-preview-container[b-z65lpwseb5] {
    padding: 8px 0;
}

.email-preview-loading[b-z65lpwseb5] {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.email-preview-content[b-z65lpwseb5] {
    font-family: "Titillium Web", sans-serif;
}

.email-preview-field[b-z65lpwseb5] {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-size: 14px;
}

.email-preview-body[b-z65lpwseb5] {
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-card-hover);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 400px;
    overflow-y: auto;
}

.email-preview-error[b-z65lpwseb5] {
    text-align: center;
    padding: 32px;
    color: var(--color-error);
    font-family: "Titillium Web", sans-serif;
}

.email-send-success[b-z65lpwseb5] {
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    color: var(--color-success-bright);
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
}

.email-send-error[b-z65lpwseb5] {
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    color: var(--color-error);
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
}

.back-to-list-btn[b-z65lpwseb5] {
    background: var(--color-warning) !important;
    color: var(--text-inverse) !important;
    text-transform: none !important;
    font-family: "Titillium Web", sans-serif;
}

.send-email-btn[b-z65lpwseb5] {
    text-transform: none !important;
    font-family: "Titillium Web", sans-serif;
}

/* ============================== Responsive ============================== */

@media (max-width: 768px) {
    .simplified-topbar-buttons[b-z65lpwseb5] {
        justify-content: flex-end;
    }
    .simplified-search-input[b-z65lpwseb5] {
        flex: 1;
        min-width: unset;
    }
}

/* ============================== Mobile surface (ZN-114) ==============================
   Simplified phone layout of the same table. New brand palette only (CSS variables) —
   NOT the purple from the ZN-114 screenshots, which predate the ZN-328 rebrand. */

.mobile-surface .mobile-status-dot[b-z65lpwseb5] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Active member (BP or Customer) = success green; inactive = muted gray. */
.mobile-surface .mobile-status-dot.active[b-z65lpwseb5] {
    background-color: var(--color-success);
}

.mobile-surface .mobile-status-dot.inactive[b-z65lpwseb5] {
    background-color: var(--text-muted);
}

/* CV rendered green on the mobile surface per the ZN-114 design. */
.mobile-surface .cell-cv[b-z65lpwseb5] {
    color: var(--color-success);
    font-weight: 600;
}

/* ============================== Subscription Status Badge ============================== */

.substatus-badge[b-z65lpwseb5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.substatus-dot[b-z65lpwseb5] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.substatus-badge.active[b-z65lpwseb5] {
    color: var(--color-success);
}

.substatus-badge.active .substatus-dot[b-z65lpwseb5] {
    background-color: var(--color-success);
}

.substatus-badge.inactive[b-z65lpwseb5] {
    color: var(--text-muted);
}

.substatus-badge.inactive .substatus-dot[b-z65lpwseb5] {
    background-color: var(--text-muted);
}

/* ============================== Reward Points cell link ============================== */

.reward-points-link[b-z65lpwseb5] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--accent-primary);
    font-size: inherit;
    font-family: inherit;
}

.reward-points-link:hover[b-z65lpwseb5] {
    text-decoration: underline;
}
/* /Components/NewPaymentDialog.razor.rz.scp.css */
/* Multi-processor payment dialog. Visual shell mirrors OrderNowPaymentModal
   (z-index 15000, theme tokens from wwwroot/css/theme-variables.css) so it
   sits above page chrome and picks up dark/light theme automatically. */

.np-dialog-overlay[b-ijq2tqcog4] {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
}

.np-dialog[b-ijq2tqcog4] {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: min(560px, calc(100% - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.np-dialog-close[b-ijq2tqcog4] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.np-dialog-close:hover[b-ijq2tqcog4] {
    color: var(--text-primary);
}

.np-dialog-title[b-ijq2tqcog4] {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.np-dialog-product[b-ijq2tqcog4] {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--bg-input);
    margin-bottom: 16px;
}

.np-dialog-product--missing[b-ijq2tqcog4] {
    color: var(--color-error);
}

.np-dialog-product__name[b-ijq2tqcog4] {
    font-weight: 500;
    font-size: 15px;
    color: var(--text-primary);
}

.np-dialog-product__price[b-ijq2tqcog4] {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
    margin-top: 4px;
}

.np-dialog-product__sub[b-ijq2tqcog4] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

.np-dialog-tabs[b-ijq2tqcog4] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.np-dialog-tab[b-ijq2tqcog4] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.np-dialog-tab:hover:not(.disabled):not(:disabled)[b-ijq2tqcog4] {
    color: var(--text-primary);
}

.np-dialog-tab.active[b-ijq2tqcog4] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.np-dialog-tab.disabled[b-ijq2tqcog4],
.np-dialog-tab:disabled[b-ijq2tqcog4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.np-dialog-body[b-ijq2tqcog4] {
    min-height: 200px;
}

.np-dialog-empty[b-ijq2tqcog4] {
    color: var(--text-muted);
    font-style: italic;
    padding: 24px 0;
    text-align: center;
}
/* /Components/NoProductCard.razor.rz.scp.css */
.no-product-card[b-y9x8w4c0xn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.no-product-card-title[b-y9x8w4c0xn] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.no-product-card-subtext[b-y9x8w4c0xn] {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.no-product-card-features-label[b-y9x8w4c0xn] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.no-product-card-features[b-y9x8w4c0xn] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
/* /Components/OrderNowAuthorizeNetForm.razor.rz.scp.css */
.anet-form[b-prh3d2xzox] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}

.anet-field[b-prh3d2xzox] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.anet-row[b-prh3d2xzox] {
    display: flex;
    gap: 0.7rem;
}

.anet-field--half[b-prh3d2xzox] {
    flex: 1 1 0;
    min-width: 0;
}

.anet-label[b-prh3d2xzox] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.anet-required[b-prh3d2xzox] {
    color: var(--accent-primary);
}

.anet-input[b-prh3d2xzox] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.92rem;
    font-family: inherit;
}

.anet-input:focus[b-prh3d2xzox] {
    outline: none;
    border-color: var(--accent-primary);
}

.anet-input:disabled[b-prh3d2xzox] {
    opacity: 0.6;
    cursor: not-allowed;
}

.anet-sandbox[b-prh3d2xzox] {
    margin-top: 0.1rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.anet-consent[b-prh3d2xzox] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.anet-consent input[type="checkbox"][b-prh3d2xzox] {
    margin-top: 0.18rem;
    accent-color: var(--accent-primary);
}

.anet-error[b-prh3d2xzox] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.82rem;
}

.anet-submit[b-prh3d2xzox] {
    margin-top: 0.4rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.anet-submit:hover:not(:disabled)[b-prh3d2xzox] {
    background: var(--btn-primary-bg-hover);
}

.anet-submit:disabled[b-prh3d2xzox] {
    opacity: 0.65;
    cursor: not-allowed;
}

.anet-security[b-prh3d2xzox] {
    margin-top: 0.1rem;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.74rem;
}
/* /Components/OrderNowCopeCartForm.razor.rz.scp.css */
.payment-form[b-svttmfq6wb] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}

.payment-error[b-svttmfq6wb] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.82rem;
}

.payment-notice[b-svttmfq6wb] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--accent-primary);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.payment-submit[b-svttmfq6wb] {
    margin-top: 0.4rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.payment-submit:hover:not(:disabled)[b-svttmfq6wb] {
    background: var(--btn-primary-bg-hover);
}

.payment-submit:disabled[b-svttmfq6wb] {
    opacity: 0.65;
    cursor: not-allowed;
}

.payment-security[b-svttmfq6wb] {
    margin-top: 0.1rem;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.74rem;
}
/* /Components/OrderNowPaymentModal.razor.rz.scp.css */
.order-now-modal-overlay[b-3qxdj4xx9l] {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    padding: 1rem;
}

.order-now-modal[b-3qxdj4xx9l] {
    position: relative;
    width: 100%;
    /* Wider than the original dispatcher modal — we now host the card form
       inline, which needs room for the expiry/CVV row to sit side-by-side. */
    max-width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1.25rem 1rem 1.1rem;
}

.order-now-product[b-3qxdj4xx9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 0.88rem;
}

.order-now-product__name[b-3qxdj4xx9l] {
    font-weight: 600;
    color: var(--text-primary);
}

.order-now-product__price[b-3qxdj4xx9l] {
    font-weight: 700;
    color: var(--accent-primary);
}

.order-now-product--missing[b-3qxdj4xx9l] {
    color: var(--color-error);
    justify-content: center;
}

.order-now-close[b-3qxdj4xx9l] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.order-now-close:hover[b-3qxdj4xx9l] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.order-now-title[b-3qxdj4xx9l] {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    font-weight: 700;
}

.order-now-tabs[b-3qxdj4xx9l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.order-now-tab[b-3qxdj4xx9l] {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.25rem 0.55rem;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}

.order-now-tab.active[b-3qxdj4xx9l] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.order-now-tab:disabled[b-3qxdj4xx9l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.order-now-tab--soon[b-3qxdj4xx9l] {
    font-style: italic;
}

.order-now-panel[b-3qxdj4xx9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.payment-logos[b-3qxdj4xx9l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.payment-logo[b-3qxdj4xx9l] {
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.3rem 0.45rem;
}

.crypto-icon-wrap[b-3qxdj4xx9l] {
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.panel-title[b-3qxdj4xx9l] {
    margin: 0.35rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.panel-subtitle[b-3qxdj4xx9l] {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    max-width: 430px;
}

.processor-callout[b-3qxdj4xx9l] {
    margin-top: 0.8rem;
    width: min(360px, 100%);
    border-radius: 8px;
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    padding: 0.55rem 0.7rem;
    display: inline-flex;
    gap: 0.45rem;
    align-items: flex-start;
    font-size: 0.74rem;
    text-align: left;
}

.callout-icon[b-3qxdj4xx9l] {
    line-height: 1;
    font-size: 0.92rem;
    margin-top: 0.04rem;
}

.security-row[b-3qxdj4xx9l] {
    margin-top: 0.55rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.card-on-file-option[b-3qxdj4xx9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.card-on-file-button[b-3qxdj4xx9l] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--accent-primary);
    border-radius: 7px;
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.card-on-file-button:hover:not(:disabled)[b-3qxdj4xx9l] {
    background: var(--accent-primary);
    color: var(--btn-primary-text);
}

.card-on-file-button:disabled[b-3qxdj4xx9l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.card-on-file-divider[b-3qxdj4xx9l] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.card-on-file-confirm[b-3qxdj4xx9l] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.card-on-file-error[b-3qxdj4xx9l] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.82rem;
}

.card-on-file-confirm__actions[b-3qxdj4xx9l] {
    display: flex;
    gap: 0.6rem;
}

.card-on-file-back[b-3qxdj4xx9l] {
    flex: 1 1 0;
    min-height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.card-on-file-back:hover:not(:disabled)[b-3qxdj4xx9l] {
    background: var(--bg-hover);
}

.card-on-file-back:disabled[b-3qxdj4xx9l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.card-on-file-submit[b-3qxdj4xx9l] {
    flex: 2 1 0;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.card-on-file-submit:hover:not(:disabled)[b-3qxdj4xx9l] {
    background: var(--btn-primary-bg-hover);
}

.card-on-file-submit:disabled[b-3qxdj4xx9l] {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .order-now-modal[b-3qxdj4xx9l] {
        padding: 1rem 0.8rem;
    }

    .order-now-tabs[b-3qxdj4xx9l] {
        gap: 0.5rem;
    }

    .order-now-tab[b-3qxdj4xx9l] {
        font-size: 0.72rem;
    }
}
/* /Components/OrderNowTestPaymentForm.razor.rz.scp.css */
.test-pay-form[b-rwi7jioprt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0.5rem 0.25rem;
    text-align: center;
}

.test-pay-icon[b-rwi7jioprt] {
    color: var(--text-muted);
}

.test-pay-title[b-rwi7jioprt] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.test-pay-blurb[b-rwi7jioprt] {
    margin: 0 0 0.4rem;
    max-width: 32rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.test-pay-error[b-rwi7jioprt] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: left;
}

.test-pay-buttons[b-rwi7jioprt] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
}

.test-pay-btn[b-rwi7jioprt] {
    min-width: 175px;
    min-height: 42px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 7px;
    color: var(--btn-primary-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.test-pay-btn:disabled[b-rwi7jioprt] {
    opacity: 0.65;
    cursor: not-allowed;
}

.test-pay-btn--success[b-rwi7jioprt] {
    background: var(--color-success);
}

.test-pay-btn--success:hover:not(:disabled)[b-rwi7jioprt] {
    background: var(--color-success-bright);
}

.test-pay-btn--fail[b-rwi7jioprt] {
    background: var(--color-error);
}

.test-pay-btn--fail:hover:not(:disabled)[b-rwi7jioprt] {
    background: var(--color-error-bright);
}
/* /Components/OrderNowTrendDigitalForm.razor.rz.scp.css */
/* Scoped styles for the crypto (TrendDigital) payment form.
 *
 * WHY THIS FILE EXISTS (ZN-995). This component was the only one of the four OrderNow payment
 * forms with no `.razor.css`, while its markup uses `anet-*` class names. Those rules live in
 * `OrderNowAuthorizeNetForm.razor.css`, and Blazor CSS isolation compiles a scoped rule to
 * `[b-<scopeid>] .anet-submit` — the scope id belongs to the AUTHORIZE.NET component, so the
 * rules never matched this one. The whole crypto form rendered unstyled: plain text with no
 * panel, and the primary "Continue to TrendDigital" button computed to
 * `background-color: rgba(0,0,0,0)` — an invisible pay button on a real checkout surface.
 *
 * The class names are kept as-is deliberately: renaming them would churn the markup (and any
 * selector pointing at it) for no user-visible gain, and the sibling CopeCart form already
 * establishes the per-component-stylesheet pattern (`payment-*` in its own `.razor.css`).
 *
 * Consequence to know before editing: these rules are a SECOND copy of the Authorize.Net form's
 * visual language, not a shared source. A change to the shared look of the payment forms has to
 * be made in each form's own stylesheet — that is inherent to Blazor CSS isolation, which is why
 * every sibling form carries its own file. Only the rules this form's markup actually uses are
 * included; do not grow this into a copy of the full Authorize.Net sheet.
 *
 * Tokens only — never hardcode colors (CLAUDE.md § CSS & Theming).
 */

.anet-form[b-75j3e7vclk] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}

.anet-error[b-75j3e7vclk] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.82rem;
}

.anet-submit[b-75j3e7vclk] {
    margin-top: 0.4rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.anet-submit:hover:not(:disabled)[b-75j3e7vclk] {
    background: var(--btn-primary-bg-hover);
}

.anet-submit:disabled[b-75j3e7vclk] {
    opacity: 0.65;
    cursor: not-allowed;
}

.anet-security[b-75j3e7vclk] {
    margin-top: 0.1rem;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.74rem;
}
/* /Components/PlaceMemberDialog.razor.rz.scp.css */
.place-option-list[b-oa66yfcohj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.place-option-item[b-oa66yfcohj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-card);
}

.place-option-info[b-oa66yfcohj] {
    min-width: 0;
}

.place-option-name[b-oa66yfcohj] {
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.place-option-desc[b-oa66yfcohj] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
/* /Components/ReceiptDialog.razor.rz.scp.css */
/* Date Range Receipt Card */
.date-range-card[b-z16xf4acoz] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 720px;
    margin: 2rem auto;
    box-shadow: var(--shadow-card);
}

.card-title[b-z16xf4acoz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.card-subtitle[b-z16xf4acoz] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.card-error[b-z16xf4acoz] {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Form Fields */
.card-field[b-z16xf4acoz] {
    margin-bottom: 1.25rem;
}

.field-label[b-z16xf4acoz] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.field-input[b-z16xf4acoz] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.field-input:focus[b-z16xf4acoz] {
    outline: none;
    border-color: var(--accent-primary);
}

.field-helper[b-z16xf4acoz] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Buttons */
.btn-generate[b-z16xf4acoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--btn-primary-bg, var(--accent-primary));
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 1.5rem;
}

.btn-generate:hover:not(:disabled)[b-z16xf4acoz] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-generate:disabled[b-z16xf4acoz] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-back[b-z16xf4acoz] {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    margin-top: 0.75rem;
    text-align: center;
}

.btn-back:hover[b-z16xf4acoz] {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Loading Spinner */
.spinner-sm[b-z16xf4acoz] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--overlay-on-accent);
    border-top-color: var(--text-on-accent);
    border-radius: 50%;
    animation: spin-b-z16xf4acoz 0.6s linear infinite;
}

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

/* PDF Viewer — matches YearlyReceiptDialog so both receipts share the same inline iframe UX. */
.pdf-viewer-wrapper[b-z16xf4acoz] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 1rem auto;
    max-width: 1200px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdf-viewer-header[b-z16xf4acoz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pdf-viewer-header .card-title[b-z16xf4acoz] {
    margin: 0;
}

.pdf-back-btn[b-z16xf4acoz] {
    width: auto;
    margin-top: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

.pdf-frame[b-z16xf4acoz] {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 600px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

/* Responsive */
@media (max-width: 768px) {
    .date-range-card[b-z16xf4acoz] {
        margin: 1rem;
        padding: 1.5rem;
    }

    .card-title[b-z16xf4acoz] {
        font-size: 1.25rem;
    }

    .pdf-frame[b-z16xf4acoz] {
        height: calc(100vh - 180px);
    }
}
/* /Components/ReferralQrModal.razor.rz.scp.css */
.qr-modal-body[b-qzz6v73li9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
}

.qr-modal-instructions[b-qzz6v73li9] {
    margin: 0;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.qr-modal-sponsor[b-qzz6v73li9] {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.qr-modal-sponsor strong[b-qzz6v73li9] {
    color: var(--text-primary);
    font-weight: 600;
}

.qr-modal-image[b-qzz6v73li9] {
    width: 260px;
    height: 260px;
    max-width: 100%;
    border-radius: 8px;
    background: var(--bg-card);
    padding: 0.5rem;
}

.qr-modal-url-row[b-qzz6v73li9] {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.qr-modal-url-input[b-qzz6v73li9] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.qr-modal-copy-btn[b-qzz6v73li9] {
    flex: 0 0 auto;
}

.qr-modal-copy-msg[b-qzz6v73li9] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
}

.qr-modal-copy-msg--success[b-qzz6v73li9] {
    color: var(--color-success);
}

.qr-modal-copy-msg--error[b-qzz6v73li9] {
    color: var(--color-error);
}
/* /Components/RefundRequestDialog.razor.rz.scp.css */
.refund-request-modal[b-cz2vf7m2u5] {
    /* Hook for any modal-wide overrides; intentionally empty for now. */
}

.refund-request-modal__order[b-cz2vf7m2u5] {
    margin: 0 0 16px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.refund-request-modal__disclosure[b-cz2vf7m2u5] {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
/* /Components/RoscaDisclosure.razor.rz.scp.css */
.rosca-box[b-c9cx9p3zxy] {
    margin-top: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.rosca-box__title[b-c9cx9p3zxy] {
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.rosca-box__list[b-c9cx9p3zxy] {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--text-muted);
}

/* ::deep — every <strong> lives in a caller-supplied DisclosureLines fragment and
   carries the CALLER's scope id, not this component's. Without ::deep this rule
   compiles to `.rosca-box__list strong[b-<scopeid>]` and never matches, so the
   legally load-bearing dollar amounts silently inherit --text-muted instead of
   bolding. ::deep still compiles to `[b-scopeid] .rosca-box__list strong` — scoped
   to THIS component's markup, not global (ZN-1136). */
[b-c9cx9p3zxy] .rosca-box__list strong {
    color: var(--text-primary);
}

.rosca-consent[b-c9cx9p3zxy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-top: 0.5rem;
}

.rosca-consent input[type="checkbox"][b-c9cx9p3zxy] {
    margin-top: 0.18rem;
    accent-color: var(--accent-primary);
}
/* /Components/RoscaDisclosureBlock.razor.rz.scp.css */
/*
 * ROSCA requires the disclosure be (1) larger than surrounding text, (2) contrasting
 * type/color vs. surrounding text of the same size, and (3) set off by symbols/marks
 * that clearly call attention to it. Implemented here as: a 1rem base size (the app's
 * global body-copy baseline is 14px, see app.css), --text-primary body color against a
 * --bg-card surface (vs. the host page's usual --bg-body/--text-secondary), and a
 * bordered/shadowed card with a left accent rail + icon as the "set off" mark.
 *
 * ── Rendering surfaces (ZN-1155) ──────────────────────────────────────────────
 * TODAY this component has exactly one call site: the funnel payment step, which
 * runs under FunnelLayout and resolves data-theme="light". The other consent
 * surfaces (Billing, the OrderNow payment forms, the consent gate) each carry a
 * "ZN-1118 C5: deliberately NOT migrated" note explaining why they keep their own
 * markup. Every colour below is still derived from a token rather than a literal, so
 * the block stays correct on the dark app shell if it is ever placed there — but the
 * only rendering that ships today is the light one.
 *
 * Accent: --zn-accent-primary (#8b5cf6) is the brand violet the funnel paints its
 * buttons, tabs and totals with, and it is also BackOffice's own primary
 * (BACKOFFICE_DESIGN_SPEC). funnel.css declares the --zn-* set on a global :root, so
 * it resolves on both surfaces. Plain --accent-primary does NOT work here: under
 * data-theme="light" it resolves to #015bef, a BLUE, which put a blue rail and blue
 * icon on a page whose every other accent is violet.
 *
 * Contrast: the accent is used only for NON-TEXT parts (rail, icon, borders,
 * checkbox fill), which need 3:1 — #8b5cf6 on white is 3.6:1. It is deliberately
 * never used for body text or links, where it would fail the 4.5:1 text minimum.
 * Link colour instead mixes the accent toward the current theme's text colour, so it
 * darkens on light and lightens on dark; --text-info is the pre-color-mix fallback
 * and is itself AA in both themes.
 */
.rosca-disclosure-block[b-890mjlar9j] {
    --rosca-accent: var(--zn-accent-primary, var(--accent-primary));
    --rosca-surface: var(--bg-card);
    /* Tints are mixed against the card surface, not hardcoded, so the same
       percentages read correctly on the dark shell and the light funnel. */
    --rosca-tint: color-mix(in srgb, var(--rosca-accent) 6%, var(--rosca-surface));
    --rosca-tint-strong: color-mix(in srgb, var(--rosca-accent) 13%, var(--rosca-surface));
    --rosca-hairline: color-mix(in srgb, var(--rosca-accent) 25%, var(--border-primary));
    --rosca-border: color-mix(in srgb, var(--text-primary) 16%, var(--rosca-surface));
    --rosca-subtle-surface: color-mix(in srgb, var(--text-primary) 3%, var(--rosca-surface));
    --rosca-ring: color-mix(in srgb, var(--rosca-accent) 35%, transparent);
    --rosca-link: var(--text-info);
    --rosca-link: color-mix(in srgb, var(--rosca-accent) 58%, var(--text-primary));
    --rosca-complete: var(--zn-color-success, var(--color-success));
    --rosca-complete-tint: var(--zn-color-success-bg, var(--color-success-bg));
    --rosca-complete-strong: #047857;
    /* One rhythm unit. Group gaps are multiples of it so the vertical spacing
       stays proportional if the block is ever made denser. */
    --rosca-gap: 14px;
    /* Legal copy is unreadable at the ~95 characters this block ran to inside the
       860px funnel card. Capped to a normal reading measure; the CARD still fills
       its container, only the text column is bounded. */
    --rosca-measure: 68ch;

    position: relative;
    overflow: hidden;
    background: var(--rosca-surface);
    border: 1px solid var(--rosca-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px -22px rgb(15 23 42 / 0.4), 0 2px 6px rgb(15 23 42 / 0.05);
    padding: 24px 26px 22px 28px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* The "set off" rail. A ::before rather than a border-left so it follows the card's
   rounded corners instead of squaring them off. */
.rosca-disclosure-block[b-890mjlar9j]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--rosca-accent), color-mix(in srgb, var(--rosca-accent) 55%, transparent));
}

.rosca-disclosure-block__header[b-890mjlar9j] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-primary);
}

.rosca-disclosure-block__header-copy[b-890mjlar9j] {
    min-width: 0;
}

/* Decorative only — the "set off" mark, not content. Hidden from assistive tech via
   aria-hidden in markup; colour is non-text UI, so the 4.5:1 text-contrast rule does
   not apply, but it still clears the 3:1 non-text minimum on both surfaces. The chip
   gives the icon presence without enlarging it. */
.rosca-disclosure-block__icon[b-890mjlar9j] {
    color: var(--rosca-accent);
    flex-shrink: 0;
    box-sizing: content-box;
    padding: 8px;
    border-radius: 10px;
    background: var(--rosca-tint-strong);
}

.rosca-disclosure-block__eyebrow[b-890mjlar9j] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* The price restatement. Set in tabular figures and given its own hairline so it
   reads as the factual summary of the block rather than a first sentence. */
.rosca-disclosure-block__summary[b-890mjlar9j] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin: 6px 0 0;
    padding: 0;
    max-width: var(--rosca-measure);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary-strong);
}

.rosca-disclosure-block__summary-label[b-890mjlar9j] {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--rosca-tint-strong);
    color: var(--rosca-link);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* CopeCart sub-plan options, directly under the billing summary. Uses the block's own tint/link
   tokens rather than new colours, and stays visually quieter than the summary above it: it
   qualifies that price rather than competing with it. */
.rosca-disclosure-block__subplans[b-890mjlar9j] {
    margin: 9px 0 0;
    padding: 9px 12px;
    max-width: var(--rosca-measure);
    border-left: 2px solid var(--rosca-accent);
    border-radius: 0 5px 5px 0;
    background: var(--rosca-tint);
}

.rosca-disclosure-block__subplans-lead[b-890mjlar9j] {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.4;
}

.rosca-disclosure-block__subplans-list[b-890mjlar9j] {
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    list-style: none;
}

.rosca-disclosure-block__subplans-list li[b-890mjlar9j] {
    display: flex;
    gap: 7px;
    align-items: baseline;
    margin-bottom: 3px;
}

.rosca-disclosure-block__subplans-list li:last-child[b-890mjlar9j] {
    margin-bottom: 0;
}

/* Fixed-width label so the plan strings beside it line up instead of ragging. */
.rosca-disclosure-block__subplans-label[b-890mjlar9j] {
    flex: 0 0 auto;
    color: var(--rosca-link);
    font-weight: 750;
    white-space: nowrap;
}

.rosca-disclosure-block__checkbox-group[b-890mjlar9j] {
    display: flex;
    flex-direction: column;
    gap: var(--rosca-gap);
}

/* The two consents are the only ACTIONS in a block that is otherwise a wall of
   statutory prose, so they are lifted onto their own tinted, bordered rows. Before
   this they were bare checkbox+text lines set flush with the surrounding paragraphs
   and were genuinely easy to scroll past. */
.rosca-disclosure-block__checkbox-row[b-890mjlar9j] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 14px 16px;
    border: 1px solid var(--rosca-border);
    border-radius: 11px;
    background: var(--rosca-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.rosca-disclosure-block__checkbox-row:hover[b-890mjlar9j] {
    border-color: var(--rosca-accent);
    background: var(--rosca-tint);
}

/* Satisfied-requirement feedback. :has() is a progressive enhancement — where it is
   unsupported the row simply keeps its resting style and the native checkbox still
   shows the state, so nothing is lost. */
.rosca-disclosure-block__checkbox-row:has(.rosca-disclosure-block__checkbox:checked)[b-890mjlar9j] {
    border-color: var(--rosca-complete);
    background: var(--rosca-complete-tint);
    box-shadow: 0 4px 12px -10px var(--rosca-complete);
}

.rosca-disclosure-block__checkbox-row:has(.rosca-disclosure-block__checkbox:checked)
    .rosca-disclosure-block__checkbox[b-890mjlar9j] {
    border-color: var(--rosca-complete-strong);
    background-color: var(--rosca-complete-strong);
    box-shadow: 0 0 0 3px var(--rosca-complete-tint);
}

/* Focus ring on the ROW, not just the 20px box, so keyboard users get a target that
   matches what the mouse hit area already is. */
.rosca-disclosure-block__checkbox-row:has(.rosca-disclosure-block__checkbox:focus-visible)[b-890mjlar9j] {
    box-shadow: 0 0 0 3px var(--rosca-ring);
}

.rosca-disclosure-block__checkbox[b-890mjlar9j] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    flex-shrink: 0;
    border: 2px solid var(--zn-gray-500, var(--border-secondary));
    border-radius: 6px;
    background: var(--rosca-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.rosca-disclosure-block__checkbox:checked[b-890mjlar9j]::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* The row carries the visible ring (above); the default UA outline on the control
   itself would sit inside it and read as a double ring. */
.rosca-disclosure-block__checkbox:focus-visible[b-890mjlar9j] {
    outline: none;
}

.rosca-disclosure-block__checkbox-text[b-890mjlar9j] {
    font-weight: 500;
    color: var(--text-primary);
    max-width: var(--rosca-measure);
}

/* Statutory prose. Indented and hairline-tied to the consent above so the
   relationship between "what I agree to" and "the terms" is visible rather than
   implied by proximity alone. */
.rosca-disclosure-block__details[b-890mjlar9j] {
    padding: 14px 16px 15px;
    border: 1px solid var(--border-primary);
    border-radius: 11px;
    background: var(--rosca-subtle-surface);
}

.rosca-disclosure-block__details-title[b-890mjlar9j] {
    margin: 0 0 10px;
    color: var(--text-muted, var(--text-secondary-strong));
    font-size: 0.71875rem;
    font-weight: 750;
    letter-spacing: 0.065em;
    line-height: 1.4;
    text-transform: uppercase;
}

.rosca-disclosure-block__bullets[b-890mjlar9j] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--rosca-measure);
    font-size: 0.9375rem;
    color: var(--text-secondary-strong);
}

.rosca-disclosure-block__bullets li[b-890mjlar9j] {
    padding-left: 0;
}

.rosca-disclosure-block__bullets .rosca-disclosure-block__deadline[b-890mjlar9j] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 1px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.rosca-disclosure-block__deadline svg[b-890mjlar9j] {
    flex: 0 0 18px;
    margin-top: 2px;
    color: var(--rosca-accent);
}

/* The cancellation-notice deadline is the single most consequential sentence in the
   block — it is the one fact a member is harmed by not knowing. Given the accent
   colour and weight rather than left as one more bold run inside grey prose. */
.rosca-disclosure-block__bullets li strong[b-890mjlar9j] {
    color: var(--text-primary);
}

/* Underlined, not colour-alone, so the link is distinguishable without relying on hue.
 *
 * ::deep is REQUIRED and is not decoration (ZN-1155). Every <a> in this component is
 * built in C# — DocLinkMarkup() for the download chips, and the inline consent links
 * inside the checkbox/bullet text — so Blazor's CSS isolation never stamps the scope
 * attribute on them. Without ::deep these rules compile to
 * `.rosca-disclosure-block__link[b-scopeid]`, match nothing, and the links silently
 * fall back to app.css's default anchor colour (measured rgb(66,66,66)) — which is
 * how the contrast-checked colour documented at the top of this file was never
 * actually reaching the screen. ::deep compiles to `[b-scopeid] .selector`: still
 * scoped to this component's subtree, NOT global. */
[b-890mjlar9j] .rosca-disclosure-block__link {
    color: var(--rosca-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

[b-890mjlar9j] .rosca-disclosure-block__link:hover {
    text-decoration-thickness: 2px;
}

[b-890mjlar9j] .rosca-disclosure-block__link:focus-visible {
    outline: 2px solid var(--rosca-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.rosca-disclosure-block__payment-method-notice[b-890mjlar9j] {
    margin: 16px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--rosca-border);
    max-width: var(--rosca-measure);
    font-size: 0.875rem;
    color: var(--text-secondary-strong);
}

.rosca-disclosure-block__documents[b-890mjlar9j] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.rosca-disclosure-block__closing[b-890mjlar9j] {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted, var(--text-secondary-strong));
}

/* Seven stacked list items ran to ~120px of vertical space and read as prose. As
   chips they read as downloads, wrap to the available width, and cost one or two
   rows — which is what keeps the payment tabs above the fold on a laptop. */
.rosca-disclosure-block__document-list[b-890mjlar9j] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The chip is the <li>, NOT the <a>. DocLinkHtml renders a bare text node instead of
   an anchor when a document has no URL configured yet (ZN-1118's deliberate
   degradation — "Terms and Conditions" and "Policies and Procedures" have no seeded
   footer-pdf row). Styling the anchor alone left that entry as unstyled 1rem body
   text sitting among 0.8125rem chips, reading like a stray heading. On the <li> both
   states are chips; only the ink differs. */
.rosca-disclosure-block__document-list li[b-890mjlar9j] {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid var(--rosca-border);
    border-radius: 999px;
    background: var(--rosca-subtle-surface);
    font-size: 0.8125rem;
    line-height: 1.4;
    /* The not-yet-available state: muted ink and a dashed edge, so it is legible as
       "no document here yet" rather than as a broken link. */
    border-style: dashed;
    color: var(--text-muted, var(--text-secondary-strong));
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Restored to a solid edge only when the item actually resolved to a link. */
.rosca-disclosure-block__document-list li:has(.rosca-disclosure-block__link)[b-890mjlar9j] {
    border-style: solid;
}

.rosca-disclosure-block__document-list li:hover:has(.rosca-disclosure-block__link)[b-890mjlar9j] {
    border-color: var(--rosca-accent);
    background: var(--rosca-tint);
}

/* ::deep for the same reason as the link rules above — the anchor is C#-generated.
   The chip owns the shape; the anchor only carries the ink. */
[b-890mjlar9j] .rosca-disclosure-block__document-list .rosca-disclosure-block__link {
    text-decoration: none;
}

[b-890mjlar9j] .rosca-disclosure-block__document-list .rosca-disclosure-block__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rosca-disclosure-block__checkbox-row[b-890mjlar9j],
    .rosca-disclosure-block__document-list li[b-890mjlar9j] {
        transition: none;
    }
}

@media (max-width: 480px) {
    .rosca-disclosure-block[b-890mjlar9j] {
        padding: 18px 16px 16px 18px;
        border-radius: 12px;
    }

    .rosca-disclosure-block__header[b-890mjlar9j] {
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .rosca-disclosure-block__icon[b-890mjlar9j] {
        padding: 6px;
    }

    .rosca-disclosure-block__checkbox-row[b-890mjlar9j] {
        padding: 12px;
    }
}
/* /Components/SectionHeader.razor.rz.scp.css */
.section-header[b-dpj8awg1cp] {
    background-color: var(--bg-section-header);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.section-header-content[b-dpj8awg1cp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header-icon[b-dpj8awg1cp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.section-header-icon i[b-dpj8awg1cp] {
    font-size: 16px;
    color: var(--text-primary);
}

.section-header-title[b-dpj8awg1cp] {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .section-header[b-dpj8awg1cp] {
        padding: 12px 12px;
    }

    .section-header-title[b-dpj8awg1cp] {
        font-size: 16px;
        line-height: 24px;
    }
}
/* /Components/SelectPackageDialog.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-a0gkl782b7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow-y: auto;
}

/* Package Dialog */
.package-dialog[b-a0gkl782b7] {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    width: 640px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    margin: 20px;
    box-shadow: var(--shadow-xl);
}

/* Close Button */
.close-btn[b-a0gkl782b7] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.close-btn:hover[b-a0gkl782b7] {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Dialog Title & Description */
.dialog-title[b-a0gkl782b7] {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    text-align: center;
}

.dialog-description[b-a0gkl782b7] {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    text-align: center;
}

/* Empty / loading state */
.package-hint[b-a0gkl782b7] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 1.5rem 1rem;
    margin: 0 0 24px 0;
}

/* Package Tiles */
.package-tile-list[b-a0gkl782b7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 24px;
}

.package-tile[b-a0gkl782b7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.package-tile:hover[b-a0gkl782b7] {
    background: var(--bg-card-hover);
    border-color: var(--accent-teal);
}

.package-tile:focus-visible[b-a0gkl782b7] {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

.package-tile-name[b-a0gkl782b7] {
    font-weight: 600;
    font-size: 0.95rem;
}

.package-tile-desc[b-a0gkl782b7] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.package-tile-price[b-a0gkl782b7] {
    font-size: 0.85rem;
}

.package-tile-price--today[b-a0gkl782b7] {
    color: var(--text-primary);
    font-weight: 600;
}

.package-tile-price--recurring[b-a0gkl782b7] {
    color: var(--text-secondary);
}

/* Dialog Actions */
.dialog-actions[b-a0gkl782b7] {
    display: flex;
    gap: 12px;
}

.btn[b-a0gkl782b7] {
    flex: 1;
    height: 43px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.1504px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-outline[b-a0gkl782b7] {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
}

.btn-outline:hover[b-a0gkl782b7] {
    background-color: var(--bg-card-hover);
}
/* /Components/SubscriptionProductPicker.razor.rz.scp.css */
.subscription-product-picker[b-54azitssvc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.reveal-multicycle-btn[b-54azitssvc] {
    margin-top: 16px;
}

.picker-tile[b-54azitssvc] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.picker-tile__name[b-54azitssvc] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.picker-tile__price[b-54azitssvc] {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
}

.picker-tile__unit[b-54azitssvc] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.picker-tile__compare-at[b-54azitssvc] {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Secondary line under an instant-upgrade delta: the recurring price that kicks in next cycle. */
.picker-tile__subprice[b-54azitssvc] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.picker-tile__features[b-54azitssvc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.picker-tile__features li[b-54azitssvc] {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Refund Policy bullet (ZN-1164). Inherits the bullet's own colour so the tile reads as one
   list; underline is what marks it as a link, matching how the stored anchor used to look. */
.picker-tile__feature-link[b-54azitssvc] {
    color: inherit;
    text-decoration: underline;
}

.picker-tile__features li[b-54azitssvc]::before {
    /* ASCII unicode escape, not a literal "✓": the scoped-CSS bundle can be
       served/decoded as Latin-1, which renders a literal checkmark as mojibake
       ("âœ"). \2713 is encoding-safe. */
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: 700;
}

.picker-tile__cta[b-54azitssvc] {
    margin-top: auto;
}

.picker-loading[b-54azitssvc],
.picker-empty[b-54azitssvc] {
    color: var(--text-muted);
    font-style: italic;
    margin: 16px 0;
}

.picker-error[b-54azitssvc] {
    color: var(--color-error);
    margin: 16px 0;
}
/* /Components/TopBannerRow.razor.rz.scp.css */
.top-banners-card[b-k4x5qy6r3k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Auto-flow strip: tiles size to their per-image Width (set inline) and wrap;
   how many land per row emerges from the widths + available space. */
.top-banner-list[b-k4x5qy6r3k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.top-banner-tile[b-k4x5qy6r3k] {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}

.top-banner-tile:hover[b-k4x5qy6r3k],
.top-banner-tile:focus-visible[b-k4x5qy6r3k] {
    transform: translateY(-2px);
    outline: none;
}

.top-banner-img[b-k4x5qy6r3k] {
    display: block;
    /* width:auto (not 100%) so the height cap shrinks width PROPORTIONALLY
       instead of stretching the image. max-width keeps it inside its tile;
       max-height bounds runaway (e.g. full-row square) images. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 360px;
    margin-inline: auto;
}
/* /Components/TryAnotherPaymentMethodButton.razor.rz.scp.css */
.release-pending-checkout[b-3tcdfwbpgs] {
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-error);
    background: transparent;
    color: var(--color-error);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.release-pending-checkout:hover:not(:disabled)[b-3tcdfwbpgs] {
    background: var(--bg-card-hover);
}

.release-pending-checkout:disabled[b-3tcdfwbpgs] {
    opacity: 0.6;
    cursor: default;
}

.release-pending-checkout-error[b-3tcdfwbpgs] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
/* /Components/UpdateBioModal.razor.rz.scp.css */
.bio-modal-overlay[b-dj1xyrwaxq] {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
    padding: 1rem;
}

.bio-modal[b-dj1xyrwaxq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    width: 100%;
    max-width: min(520px, calc(100vw - 2rem));
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.bio-modal-close[b-dj1xyrwaxq] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.bio-modal-close:hover[b-dj1xyrwaxq] {
    color: var(--text-primary);
}

.bio-modal-desc[b-dj1xyrwaxq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
    padding-right: 1.5rem;
}

.bio-modal-errors[b-dj1xyrwaxq] {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
}

.bio-modal-error[b-dj1xyrwaxq] {
    color: var(--color-error);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

.bio-modal-error + .bio-modal-error[b-dj1xyrwaxq] {
    margin-top: 0.25rem;
}

.bio-modal-form[b-dj1xyrwaxq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bio-field[b-dj1xyrwaxq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bio-field-row[b-dj1xyrwaxq] {
    display: flex;
    gap: 1rem;
}

.bio-field-half[b-dj1xyrwaxq] {
    flex: 1;
}

.bio-label[b-dj1xyrwaxq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bio-input[b-dj1xyrwaxq] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.bio-input:focus[b-dj1xyrwaxq] {
    border-color: var(--border-input-focus);
    background: var(--bg-input-focus);
}

.bio-input[b-dj1xyrwaxq]::placeholder {
    color: var(--text-muted);
}

.bio-submit-btn[b-dj1xyrwaxq] {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.25rem;
}

.bio-submit-btn:hover:not(:disabled)[b-dj1xyrwaxq] {
    background: var(--btn-primary-bg-hover);
}

.bio-submit-btn:disabled[b-dj1xyrwaxq] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .bio-field-row[b-dj1xyrwaxq] {
        flex-direction: column;
    }

    .bio-modal[b-dj1xyrwaxq] {
        padding: 1.25rem;
    }
}
/* /Components/WhatsAppSupportPromptModal.razor.rz.scp.css */
.wa-support-modal__title[b-dygzt8gaqn] {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.wa-support-modal__error[b-dygzt8gaqn] {
    color: var(--color-error);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.wa-support-modal__text[b-dygzt8gaqn] {
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
    line-height: 1.4;
    font-size: 0.9rem;
}

.wa-support-modal__text--muted[b-dygzt8gaqn] {
    color: var(--text-muted);
}

.wa-support-modal__label[b-dygzt8gaqn] {
    color: var(--text-primary);
    margin-top: 0.7rem;
    margin-bottom: 0.4rem;
}

.wa-support-modal__input[b-dygzt8gaqn] {
    margin-bottom: 0.2rem;
}

.wa-support-modal__btn[b-dygzt8gaqn] {
    min-width: 120px;
}
/* /Components/YearlyReceiptDialog.razor.rz.scp.css */
.date-range-card[b-goqaoq8a4g] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 720px;
    margin: 2rem auto;
    box-shadow: var(--shadow-card);
}

.card-title[b-goqaoq8a4g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.card-subtitle[b-goqaoq8a4g] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.card-error[b-goqaoq8a4g] {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.card-field[b-goqaoq8a4g] {
    margin-bottom: 1.25rem;
}

.field-label[b-goqaoq8a4g] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.field-helper[b-goqaoq8a4g] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.btn-generate[b-goqaoq8a4g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--btn-primary-bg, var(--accent-primary));
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 1.5rem;
}

.btn-generate:hover:not(:disabled)[b-goqaoq8a4g] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-generate:disabled[b-goqaoq8a4g] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-back[b-goqaoq8a4g] {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    margin-top: 0.75rem;
    text-align: center;
}

.btn-back:hover[b-goqaoq8a4g] {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.spinner-sm[b-goqaoq8a4g] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--overlay-on-accent);
    border-top-color: var(--text-on-accent);
    border-radius: 50%;
    animation: spin-b-goqaoq8a4g 0.6s linear infinite;
}

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

.pdf-viewer-wrapper[b-goqaoq8a4g] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 1rem auto;
    max-width: 1200px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdf-viewer-header[b-goqaoq8a4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pdf-viewer-header .card-title[b-goqaoq8a4g] {
    margin: 0;
}

.pdf-back-btn[b-goqaoq8a4g] {
    width: auto;
    margin-top: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

.pdf-frame[b-goqaoq8a4g] {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 600px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

@media (max-width: 768px) {
    .date-range-card[b-goqaoq8a4g] {
        margin: 1rem;
        padding: 1.5rem;
    }

    .card-title[b-goqaoq8a4g] {
        font-size: 1.25rem;
    }

    .pdf-frame[b-goqaoq8a4g] {
        height: calc(100vh - 180px);
    }
}
/* /Layout/FunnelLayout.razor.rz.scp.css */
/* Funnel layout shell — minimal marketing-style wrapper (ZN-648).
   Uses --zn-* tokens from funnel.css and --accent-* / --bg-* from theme-variables.css.
   No hardcoded colors. */

.funnel-layout[b-fpmh2689q4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--zn-gray-100);
    font-family: var(--zn-font-primary);
}

/* ── Header ── */

.funnel-header[b-fpmh2689q4] {
    background-color: var(--zn-black);
    border-bottom: 1px solid var(--zn-gray-800);
    position: sticky;
    top: 0;
    z-index: 100;
}

.funnel-header-inner[b-fpmh2689q4] {
    max-width: var(--zn-container-xl);
    margin: 0 auto;
    padding: 0 var(--zn-space-6);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.funnel-logo[b-fpmh2689q4] {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* White-ink lockup: .funnel-header is var(--zn-black). Sized to match the
   sidebar treatment (160x39 in NavMenu.razor.css); the asset is ~4.04:1 so
   width-driven with height:auto keeps the ratio inside the 64px header. */
.funnel-logo-img[b-fpmh2689q4] {
    display: block;
    width: 160px;
    height: auto;
}

.funnel-nav[b-fpmh2689q4] {
    display: flex;
    align-items: center;
    gap: var(--zn-space-6);
}

.funnel-nav-link[b-fpmh2689q4] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--zn-gray-300);
    text-decoration: none;
    transition: color 0.15s;
}

.funnel-nav-link:hover[b-fpmh2689q4] {
    color: var(--zn-accent-primary);
}

/* ── Body ── */

.funnel-body[b-fpmh2689q4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--zn-space-10) var(--zn-space-4);
}

@media (max-width: 640px) {
    .funnel-header-inner[b-fpmh2689q4] {
        padding: 0 var(--zn-space-4);
    }

    .funnel-logo-img[b-fpmh2689q4] {
        width: 130px;
    }

    .funnel-nav[b-fpmh2689q4] {
        gap: var(--zn-space-4);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* BackOffice Layout - Based on Figma Design */

/* Auth Loading State */
.auth-loading[b-aqvgk65op7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--bg-body);
}

.auth-loading .spinner[b-aqvgk65op7] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-secondary);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin-b-aqvgk65op7 0.8s linear infinite;
    margin-bottom: 1rem;
}

.auth-loading p[b-aqvgk65op7] {
    color: var(--text-secondary);
    font-size: 1rem;
}

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

.backoffice-layout[b-aqvgk65op7] {
    display: flex;
    height: 100vh;
    background-color: var(--bg-body);
    overflow: hidden;
}

/* First-login consent gate (ZN-609): this branch renders @Body alone, with no
   .main-wrapper/.main-content scroll container of its own. Inheriting
   .backoffice-layout's `height:100vh; overflow:hidden` therefore CLIPPED the
   consent card at the viewport — the agreement list, the signature capture and
   the submit button below the fold were unreachable with no way to scroll.
   The class existed on the markup but had no rule anywhere, so it was inert.
   Own the scroll here; the card itself is a self-contained modal-style shell. */
.consent-gate-only[b-aqvgk65op7] {
    display: block;
    height: 100dvh;
    overflow: hidden;
}

/* Sidebar Styles */
.sidebar[b-aqvgk65op7] {
    height: 100vh;
    flex-shrink: 0;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-divider);
    z-index: 100;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.sidebar.expanded[b-aqvgk65op7] {
    width: 256px;
    min-width: 256px;
    max-width: 256px;
}

.sidebar.collapsed[b-aqvgk65op7] {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
}

/* Main Content Wrapper */
.main-wrapper[b-aqvgk65op7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header Styles */
.top-header[b-aqvgk65op7] {
    height: 77px;
    min-height: 77px;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    flex-shrink: 0;
}

.search-container[b-aqvgk65op7] {
    position: relative;
    width: 448px;
}

.search-icon[b-aqvgk65op7] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

.search-input[b-aqvgk65op7] {
    width: 100%;
    height: 42px;
    padding: 8px 16px 8px 40px;
    border: 1px solid var(--border-input);
    border-radius: 10px;
    font-size: 16px;
    color: var(--text-primary);
    background-color: var(--bg-input);
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.search-input[b-aqvgk65op7]::placeholder {
    color: var(--text-muted);
}

.search-input:focus[b-aqvgk65op7] {
    border-color: var(--accent-purple);
    background-color: var(--bg-input-focus);
}

.header-actions[b-aqvgk65op7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn[b-aqvgk65op7] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    color: var(--text-secondary);
}

.header-btn:hover[b-aqvgk65op7] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* ZN-1137: the size/shape/colour rule that used to live here was a SECOND home for
   .notification-badge, fighting the one in css/zinrai-theme.css — this scoped copy forced an
   8x8 dot (from before the badge carried a count) while the theme copy sized it for text, and
   between them the badge rendered as an oval. Size and shape now live only in zinrai-theme.css.
   Do not re-add them here; a per-page override would reintroduce the same drift. */

.header-divider[b-aqvgk65op7] {
    width: 1px;
    height: 24px;
    background-color: var(--border-divider);
    margin: 0 8px;
}

.user-profile[b-aqvgk65op7] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.user-avatar[b-aqvgk65op7] {
    width: 35px;
    height: 35px;
    background-color: var(--accent-cyan);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-size: 16px;
    font-weight: 400;
}

/* When a real avatar is uploaded, render the image filling the same circle. */
.user-avatar--image[b-aqvgk65op7] {
    object-fit: cover;
    background-color: transparent;
}

.user-info[b-aqvgk65op7] {
    display: flex;
    flex-direction: column;
}

.user-name[b-aqvgk65op7] {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 20px;
}

.user-id[b-aqvgk65op7] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 16px;
}

.chevron-btn[b-aqvgk65op7] {
    margin-left: 4px;
}

/* Main Content Area */
.main-content[b-aqvgk65op7] {
    flex: 1;
    background-color: var(--bg-body);
    overflow-y: auto;
}

/* Mobile-app surface: reserve room for the fixed bottom tab bar (64px + iOS
   home-indicator safe area) so the last of the content can scroll clear of it. */
.backoffice-layout.mobile-surface .main-content[b-aqvgk65op7] {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Mobile-app surface: navigation is the bottom tab bar + Menu page, so the
   desktop chrome — sidebar, hamburger toggle, top header and footer — is
   hidden entirely. The app provides its own chrome around the WebView. */
.backoffice-layout.mobile-surface .sidebar[b-aqvgk65op7],
.backoffice-layout.mobile-surface .mobile-menu-btn[b-aqvgk65op7],
.backoffice-layout.mobile-surface .top-header[b-aqvgk65op7],
.backoffice-layout.mobile-surface .backoffice-footer[b-aqvgk65op7] {
    display: none;
}

.content-area[b-aqvgk65op7] {
    padding: 24px 32px;
}

/* Mobile Menu Button - hidden on desktop */
.mobile-menu-btn[b-aqvgk65op7] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mobile-menu-btn:hover[b-aqvgk65op7] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop[b-aqvgk65op7] {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .search-container[b-aqvgk65op7] {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    /* Show hamburger button */
    .mobile-menu-btn[b-aqvgk65op7] {
        display: flex;
    }

    /* Sidebar: hidden by default, overlay when open */
    .sidebar[b-aqvgk65op7] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 256px !important;
        min-width: 256px !important;
        max-width: 256px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1100;
    }

    .sidebar.mobile-open[b-aqvgk65op7] {
        transform: translateX(0);
    }

    /* Backdrop */
    .mobile-sidebar-backdrop[b-aqvgk65op7] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--overlay-bg);
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-sidebar-backdrop.active[b-aqvgk65op7] {
        opacity: 1;
        visibility: visible;
    }

    .top-header[b-aqvgk65op7] {
        padding: 12px 16px;
        gap: 8px;
    }

    /* Search bar: shrink instead of hide */
    .search-container[b-aqvgk65op7] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .search-input[b-aqvgk65op7] {
        font-size: 14px;
    }

    .user-info[b-aqvgk65op7] {
        display: none;
    }

    .header-divider[b-aqvgk65op7] {
        display: none;
    }

    .header-user-id[b-aqvgk65op7] {
        display: none;
    }

    .content-area[b-aqvgk65op7] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    /* Hide search on very small screens */
    .search-container[b-aqvgk65op7] {
        display: none;
    }

    .content-area[b-aqvgk65op7] {
        padding: 12px;
    }

    .top-header[b-aqvgk65op7] {
        padding: 10px 12px;
    }
}
/* /Layout/MobileBottomNav.razor.rz.scp.css */
.mobile-bottom-nav[b-dwpj9o6xs0] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    /* Honour iOS home-indicator safe area so labels are never clipped. */
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-card);
    border-top: 1px solid var(--border-primary);
    display: flex;
    align-items: stretch;
    z-index: 1200;
}

/* NavLink renders an <a> that does NOT carry this component's scoped-CSS
   attribute, so its rules must reach through ::deep from the scoped <nav>. */
.mobile-bottom-nav[b-dwpj9o6xs0]  .mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0 4px;
    cursor: pointer;
}

.mobile-bottom-nav[b-dwpj9o6xs0]  .mobile-nav-item.active {
    color: var(--accent-primary);
}

.mobile-bottom-nav[b-dwpj9o6xs0]  .mobile-nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mobile-bottom-nav[b-dwpj9o6xs0]  .mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    /* Allow the longest label ("My Organization") to wrap to two lines rather
       than truncate; single-word labels stay on one line. */
    max-width: 100%;
    text-align: center;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Navigation Menu Styles - ZINRAI Dark/Light Theme Support */

/* Root element — no ::deep (it IS the scoped element) */
.nav-container[b-590ojlxtxi] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width 0.3s ease;
    background-color: var(--nav-bg);
}

.nav-container.expanded[b-590ojlxtxi] {
    width: 256px;
}

.nav-container.collapsed[b-590ojlxtxi] {
    width: 68px;
}

/* Logo Section */
[b-590ojlxtxi] .logo-section {
    height: 77px;
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-divider);
}

.nav-container.expanded[b-590ojlxtxi]  .logo-section {
    justify-content: space-between;
    padding: 0 24px;
}

/* Collapse Toggle in Logo Section */
[b-590ojlxtxi] .collapse-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-divider);
    border-radius: 50%;
    background: transparent;
    color: var(--nav-item-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

[b-590ojlxtxi] .collapse-toggle-btn:hover {
    background-color: var(--nav-item-bg-hover);
    color: var(--nav-item-text-hover);
}

[b-590ojlxtxi] .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Logo asset is driven by --logo-image-url / --logo-icon-url in theme-variables.css
   so a single element swaps via [data-theme] without rendering two <img> tags.
   Empty <div>s have no intrinsic dimensions, so we need explicit width/height
   rather than width: 100% (which would resolve to 0 inside a flex parent). */
[b-590ojlxtxi] .logo-image {
    height: 39px;
    width: 160px;
    background-image: var(--logo-image-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

[b-590ojlxtxi] .logo-icon {
    height: 40px;
    width: 20px;
    background-image: var(--logo-icon-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.nav-container.collapsed[b-590ojlxtxi]  .logo-section {
    padding: 0 6px;
    gap: 4px;
}

/* Navigation Menu — block layout (not flex) so submenu expansion strictly
   pushes items below downward. With flex column + free vertical space at the
   bottom of the menu, certain repaints during the max-height transition can
   make the parent appear to shift up by a few pixels. Block layout has no
   notion of free-space distribution: items stack from the top, the container
   grows to fit, and overflow drops to the scrollbar. */
[b-590ojlxtxi] .nav-menu {
    flex: 1;
    min-height: 0;
    display: block;
    padding: 12px 16px;
    overflow-y: auto;
    /* Disable the browser's scroll-anchoring heuristic. Without this, expanding
       a submenu makes the parent button "jump" because the browser tries to
       keep the previously-anchored element in view by adjusting scrollTop. */
    overflow-anchor: none;
    /* Reserve the scrollbar's space at all times so the layout doesn't reflow
       the moment content grows past the viewport and a scrollbar appears mid-
       animation. */
    scrollbar-gutter: stable;
}

/* Per-item gap — block layout doesn't have flex's `gap`, so we use margin
   between consecutive items to achieve the same visual spacing. */
[b-590ojlxtxi] .nav-menu > * + * {
    margin-top: 2px;
}

.nav-container.collapsed[b-590ojlxtxi]  .nav-menu {
    padding: 12px 8px;
}

/* Navigation Item Styles — Figma: Public Sans 14/medium, 4px radius, 16px h-padding */
[b-590ojlxtxi] .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--nav-item-height);
    padding: 0 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--nav-item-text);
    font-family: 'Public Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    background: var(--nav-item-bg);
    width: 100%;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.nav-container.collapsed[b-590ojlxtxi]  .nav-item {
    justify-content: center;
    padding: 0;
    width: var(--nav-collapsed-item-size);
    height: var(--nav-collapsed-item-size);
    margin: 0 auto;
}

[b-590ojlxtxi] .nav-item:hover {
    background-color: var(--nav-item-bg-hover);
    color: var(--nav-item-text-hover);
}

[b-590ojlxtxi] .nav-item.active {
    background-color: var(--nav-item-bg-active);
    color: var(--nav-item-text-active);
}

[b-590ojlxtxi] .nav-item.active .nav-icon {
    color: var(--nav-icon-color-active);
}

[b-590ojlxtxi] .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    color: var(--nav-icon-color);
}

.nav-container.collapsed[b-590ojlxtxi]  .nav-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-590ojlxtxi] .nav-item.active .nav-icon,
[b-590ojlxtxi] .nav-item:hover .nav-icon {
    color: inherit;
}

[b-590ojlxtxi] .nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* New Badge */
[b-590ojlxtxi] .nav-badge {
    background-color: var(--badge-new-bg);
    color: var(--badge-new-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 4px 8px;
    border-radius: 9999px;
}

/* Scrollbar Styling — widened + given a visible track so overflow on short
   viewports (the 100vh-clipped fallback) reads as scrollable, not cut off. */
[b-590ojlxtxi] .nav-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[b-590ojlxtxi] .nav-menu::-webkit-scrollbar {
    width: 8px;
}

[b-590ojlxtxi] .nav-menu::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[b-590ojlxtxi] .nav-menu::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

[b-590ojlxtxi] .nav-menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* The mobile slide-in drawer is always rendered expanded: MainLayout passes
   IsCollapsed=false while the overlay is open, so the nav renders with full
   labels and inline submenus (no collapsed/flyout layout to override here). */
/* /Pages/BillingPage.razor.rz.scp.css */
/* Billing Container */
.billing-container[b-g75tixq9z8] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Receipt Buttons */
.btn-receipt[b-g75tixq9z8] {
    font-weight: 600;
    background: transparent;
}

.btn-receipt-green[b-g75tixq9z8] {
    border: 2px solid var(--color-success);
    color: var(--color-success);
}

.btn-receipt-green:hover[b-g75tixq9z8] {
    background: var(--color-success-bg);
    transform: translateY(-1px);
}

.btn-receipt-orange[b-g75tixq9z8] {
    border: 2px solid var(--color-warning);
    color: var(--color-warning);
}

.btn-receipt-orange:hover[b-g75tixq9z8] {
    background: var(--color-warning-bg);
    transform: translateY(-1px);
}

/* Summary Cards */
.summary-cards[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Base card styling comes from .card-accent in app.css; this rule only adds
   the page-specific layout (flex column with tight gap). */
.summary-card[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Per-card stripe + hover-border identity — keyed on semantic modifier
   classes so styling stays decoupled from test selectors. The hover border
   tracks the right end of each stripe at 40% alpha. */
.summary-card--monthly-spend[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}
.summary-card--monthly-spend[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--color-success) 40%, transparent);
}

.summary-card--active-subscriptions[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--color-success), var(--accent-primary) 90%);
}

.summary-card--payment-methods[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--accent-secondary), var(--color-warning) 90%);
}
.summary-card--payment-methods[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.summary-card--next-billing[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--color-warning), var(--color-error) 90%);
}
.summary-card--next-billing[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--color-error) 40%, transparent);
}

.summary-label[b-g75tixq9z8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-g75tixq9z8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-value-row[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.summary-badge[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.summary-sub[b-g75tixq9z8] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Tab Content */
.tab-content[b-g75tixq9z8] {
    min-height: 300px;
}

/* Payment Methods Grid */
.payment-methods-grid[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Base card styling comes from .card-accent in app.css; this rule only adds
   the page-specific layout. */
.payment-card[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Per-card identity stripes + hover borders — keyed on semantic modifier classes. */
.payment-card--credit[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}
.payment-card--credit[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--color-success) 40%, transparent);
}

.payment-card--crypto[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary) 90%);
}
.payment-card--crypto[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--accent-secondary) 40%, transparent);
}

.payment-card--rewards[b-g75tixq9z8]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-warning) 90%);
}
.payment-card--rewards[b-g75tixq9z8] {
    --card-hover-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.payment-card-header[b-g75tixq9z8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-card-title[b-g75tixq9z8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.status-dot[b-g75tixq9z8] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.crypto-status-indicator[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.crypto-status-text[b-g75tixq9z8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.status-dot.active[b-g75tixq9z8] {
    background: var(--color-success);
}

.status-dot.inactive[b-g75tixq9z8] {
    background: var(--text-muted);
}

.payment-card-desc[b-g75tixq9z8] {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 500;
}

.card-details[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: auto;
    padding-top: 0.5rem;
    line-height: 1.5;
}

.card-info-item[b-g75tixq9z8] {
    line-height: 1.5;
}

.payment-card-actions[b-g75tixq9z8] {
    margin-top: 0.75rem;
}

.btn-credit-card[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-credit-card:hover[b-g75tixq9z8] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-crypto[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-tint));
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-crypto:hover[b-g75tixq9z8] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-rewards[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-rewards:hover[b-g75tixq9z8] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-rewards-disabled[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem;
    background: var(--accent-primary-bg-strong);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: not-allowed;
}

.btn-rewards-secondary[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-rewards-secondary:hover:not(:disabled)[b-g75tixq9z8] {
    background: var(--bg-card-hover);
}

.btn-rewards-secondary:disabled[b-g75tixq9z8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.redeem-confirm-actions[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.redeem-message[b-g75tixq9z8] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.redeem-message--success[b-g75tixq9z8] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-bg-strong);
}

.redeem-message--error[b-g75tixq9z8] {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-bg-strong);
}

/* Tables */
.billing-history-section[b-g75tixq9z8] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.billing-history-header[b-g75tixq9z8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.billing-history-title-area[b-g75tixq9z8] {
    flex-shrink: 0;
}

.billing-history-controls[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-input-wrapper[b-g75tixq9z8] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-g75tixq9z8] {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input[b-g75tixq9z8] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.75rem 0.6rem 2.25rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 220px;
    transition: border-color 0.2s;
}

.search-input[b-g75tixq9z8]::placeholder {
    color: var(--text-muted);
}

.search-input:focus[b-g75tixq9z8] {
    outline: none;
    border-color: var(--accent-primary);
}

.billing-filter-wrapper[b-g75tixq9z8] {
    min-width: 160px;
}

.table-container[b-g75tixq9z8] {
    border-radius: 8px;
    overflow: hidden;
}

.billing-id[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-success);
    cursor: pointer;
    transition: color 0.2s;
}

.billing-id:hover[b-g75tixq9z8] {
    color: var(--accent-primary);
    text-decoration: underline;
}

.info-icon[b-g75tixq9z8] {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
    cursor: help;
    transition: color 0.2s;
}

.info-icon:hover[b-g75tixq9z8] {
    color: var(--accent-primary);
}

.billing-id-tooltip[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 320px;
    text-align: center;
}

.billing-id-tooltip-label[b-g75tixq9z8] {
    font-weight: 600;
    font-size: 0.8rem;
    opacity: 0.85;
}

.billing-id-tooltip-value[b-g75tixq9z8] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    word-break: break-all;
}

.billing-id-tooltip-hint[b-g75tixq9z8] {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.65;
    font-style: italic;
}

.info-icon-btn[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    padding: 0.15rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    line-height: 0;
    transition: background 0.15s;
}

.info-icon-btn:hover[b-g75tixq9z8] {
    background: var(--bg-card-hover);
}

.info-icon-btn:active[b-g75tixq9z8] {
    transform: scale(0.92);
}

.description-cell[b-g75tixq9z8] {
    color: var(--text-primary);
    font-weight: 500;
}

/* Gift rows show the gifted package on a smaller second line under the
   "Gift to/from …" description (ZN-387). */
.description-cell .description-main[b-g75tixq9z8] {
    display: block;
}

.description-cell .description-sub[b-g75tixq9z8] {
    display: block;
    margin-top: 2px;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--text-secondary);
}

.product-name[b-g75tixq9z8] {
    font-weight: 600;
    color: var(--text-primary);
}

.order-link[b-g75tixq9z8] {
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
}

.order-link:hover[b-g75tixq9z8] {
    text-decoration: underline;
}

.payment-amount[b-g75tixq9z8] {
    font-weight: 600;
    color: var(--text-primary);
}

.btn-receipt-row[b-g75tixq9z8] {
    padding: 0.4rem 1rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    white-space: nowrap;
}

.btn-receipt-row:hover[b-g75tixq9z8] {
    opacity: 0.85;
}

/* Status Badges */
.status-active[b-g75tixq9z8] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-cancelled[b-g75tixq9z8],
.status-inactive[b-g75tixq9z8] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.status-removed[b-g75tixq9z8] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.status-unknown[b-g75tixq9z8] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.btn-cancel[b-g75tixq9z8] {
    padding: 0.4rem 1rem;
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

/* ===== Subscriptions Tab ===== */
.subscriptions-section[b-g75tixq9z8] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.subscriptions-header[b-g75tixq9z8] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.subscriptions-title[b-g75tixq9z8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.subscriptions-subtitle[b-g75tixq9z8] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.subscription-list[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subscription-card[b-g75tixq9z8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: border-color 0.2s;
}

.subscription-card:hover[b-g75tixq9z8] {
    border-color: var(--accent-primary-hover-border);
}

.subscription-card-left[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subscription-card-border[b-g75tixq9z8] {
    width: 4px;
    height: 48px;
    border-radius: 2px;
    background: var(--accent-primary);
    flex-shrink: 0;
}

.subscription-card-info[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subscription-product-name[b-g75tixq9z8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-next-billing[b-g75tixq9z8] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* V276 — a Markets/Studio switch the member has chosen but has not been billed on yet. Accent
   rather than muted: it is a state the member deliberately created and expects to see confirmed,
   not incidental metadata. */
.subscription-pending-track[b-g75tixq9z8] {
    font-size: 0.8rem;
    color: var(--accent-primary);
}

/* Secondary line inside a dialog — the "when does this take effect" note under the main copy. */
.dialog-text--muted[b-g75tixq9z8] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.subscription-card-right[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.subscription-pricing[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.subscription-price[b-g75tixq9z8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-status-badge[b-g75tixq9z8] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.subscription-status-badge.sub-active[b-g75tixq9z8] {
    background-color: var(--color-success);
    color: var(--text-on-accent);
}

/* One-time (non-recurring) purchase — informational tone, distinct from the
   green recurring "active" badge. */
.subscription-status-badge.sub-onetime[b-g75tixq9z8] {
    background-color: var(--color-info);
    color: var(--text-on-accent);
}

.subscription-status-badge.sub-cancelled[b-g75tixq9z8] {
    /* Inverted-surface badge: --text-primary doubles as the high-contrast
       surface colour (#fff in dark mode, near-black in light), with
       --text-inverse for the readable foreground in either theme. */
    background-color: var(--text-primary);
    color: var(--text-inverse);
    border: 1px solid var(--border-color);
}

.subscription-status-badge.sub-expired[b-g75tixq9z8] {
    background-color: var(--color-error);
    color: var(--text-on-accent);
}

.subscription-status-badge.sub-paused[b-g75tixq9z8] {
    background-color: var(--color-warning);
    color: var(--text-on-accent);
}

/* Active, but recurring billing was never set up (ARB failed after the first
   charge) — warn the user it won't auto-renew. */
.subscription-status-badge.sub-attention[b-g75tixq9z8] {
    background-color: var(--color-warning);
    color: var(--text-on-accent);
}

.subscription-status-badge.sub-superseded[b-g75tixq9z8],
.subscription-status-badge.sub-inactive[b-g75tixq9z8] {
    background-color: var(--text-muted-bg);
    color: var(--text-muted);
}

/* ZN-1294: a refund/chargeback revokes access outright, same severity as sub-expired —
   distinct from the neutral sub-inactive tone above. */
.subscription-status-badge.sub-refunded[b-g75tixq9z8],
.subscription-status-badge.sub-chargedback[b-g75tixq9z8] {
    background-color: var(--color-error);
    color: var(--text-on-accent);
}

/* Gifted-by badge shown on the recipient's subscription card. */
.subscription-gifted-badge[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--accent-primary-bg-strong);
    color: var(--accent-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    width: fit-content;
}

/* Pending up/downgrade badge — warning-tinted so it reads distinctly from the
   gifted badge. Mirrors the gifted-badge chrome. */
/* "Next cycle: <CopeCart plan>" on a timeline root. Informational, not a warning — it states
   which hosted plan bills the cycle, so it uses the neutral secondary text token rather than the
   warning palette the pending-change badge borrows. All colours come from theme variables
   (CLAUDE.md § CSS & Theming — never hardcode a colour). */
.subscription-next-cycle[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    width: fit-content;
}

.subscription-pending-badge[b-g75tixq9z8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    width: fit-content;
}

/* Change Plan dialog — target picker + agree/note rows. */
.changeplan-options[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.changeplan-option[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-card);
}

.changeplan-option:hover[b-g75tixq9z8] {
    background: var(--bg-card-hover);
}

.changeplan-option.selected[b-g75tixq9z8] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-bg-strong);
}

.changeplan-option-name[b-g75tixq9z8] {
    flex: 1;
    font-weight: 600;
}

.changeplan-option-price[b-g75tixq9z8] {
    color: var(--text-secondary);
    font-weight: 600;
}

.changeplan-agree[b-g75tixq9z8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.changeplan-note[b-g75tixq9z8] {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Gifts I've Given section — reuses subscriptions-section chrome. */
.gifts-given-section[b-g75tixq9z8] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1.5rem;
}

/* Accent stripe for gifted-subscription cards — distinct from personal subs. */
.gifts-given-border[b-g75tixq9z8] {
    background: var(--accent-secondary);
}

.subscription-manage-wrapper[b-g75tixq9z8] {
    position: relative;
}

/* When this wrapper hosts the open menu, lift it above the click-outside
   backdrop (z-index: 99) so a click on its own trigger toggles closed
   instead of just dismissing the backdrop. The wrapper creates an isolated
   stacking context, so .subscription-dropdown (z-index: 100 inside it)
   still sits above the trigger. Other wrappers stay at the default
   z-index, so they don't render over the open menu in other rows. */
.subscription-manage-wrapper.open[b-g75tixq9z8] {
    z-index: 101;
}

.btn-manage-subscription[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.btn-manage-subscription:hover[b-g75tixq9z8] {
    border-color: var(--accent-primary);
}

.btn-manage-subscription svg[b-g75tixq9z8] {
    transition: transform 0.2s;
    color: var(--text-secondary);
}

.subscription-dropdown-backdrop[b-g75tixq9z8] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.subscription-dropdown[b-g75tixq9z8] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 200px;
    padding: 4px;
    overflow: hidden;
}

.dropdown-item[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
    text-align: left;
    border-radius: 4px;
}

.dropdown-item:hover[b-g75tixq9z8] {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
}

.dropdown-item-danger[b-g75tixq9z8] {
    color: var(--color-error);
}

.dropdown-item-danger:hover[b-g75tixq9z8] {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

/* New Payment Tab */
.np-info-banner[b-g75tixq9z8] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-bg-strong);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.np-info-icon[b-g75tixq9z8] {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.np-info-banner p[b-g75tixq9z8] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-success);
}

.np-layout[b-g75tixq9z8] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.np-sidebar[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 250px;
    flex-shrink: 0;
}

.np-option[b-g75tixq9z8] {
    padding: 0.85rem 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-strong);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.np-option:first-child[b-g75tixq9z8] {
    border-radius: 10px 10px 0 0;
}

.np-option:last-child[b-g75tixq9z8] {
    border-radius: 0 0 10px 10px;
    border-top: none;
}

.np-option:hover[b-g75tixq9z8] {
    color: var(--text-primary);
    background: var(--accent-primary-glow);
}

.np-option.active[b-g75tixq9z8] {
    background: var(--bg-input);
    color: var(--color-success);
    border-color: var(--color-success);
    border-left: 3px solid var(--color-success);
    font-weight: 600;
}

.np-option.active + .np-option[b-g75tixq9z8] {
    border-top: 1px solid var(--border-color);
}

.np-form-panel[b-g75tixq9z8] {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.np-form-title[b-g75tixq9z8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title[b-g75tixq9z8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.section-desc[b-g75tixq9z8] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

/* Form Elements */
.form-group[b-g75tixq9z8] {
    margin-bottom: 1.25rem;
}

.form-label[b-g75tixq9z8] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-select[b-g75tixq9z8],
.form-input[b-g75tixq9z8],
.form-textarea[b-g75tixq9z8] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-select option[b-g75tixq9z8] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.form-input[b-g75tixq9z8]::placeholder {
    color: var(--text-secondary-strong);
}

.form-select:focus[b-g75tixq9z8],
.form-input:focus[b-g75tixq9z8],
.form-textarea:focus[b-g75tixq9z8] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.form-textarea[b-g75tixq9z8] {
    resize: vertical;
    font-family: inherit;
}

.btn-make-payment[b-g75tixq9z8] {
    padding: 0.75rem 2rem;
    background: var(--color-error);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.btn-make-payment:hover:not(:disabled)[b-g75tixq9z8] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-make-payment:disabled[b-g75tixq9z8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings */
.settings-layout[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.settings-card[b-g75tixq9z8] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.btn-save-preferences[b-g75tixq9z8] {
    padding: 0.75rem 2rem;
    background: var(--color-error);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.25rem;
}

.btn-save-preferences:hover[b-g75tixq9z8] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.compliance-links[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compliance-btn[b-g75tixq9z8] {
    display: block;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.compliance-btn:hover[b-g75tixq9z8] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-glow);
}

/* Alerts */
.alert[b-g75tixq9z8] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.alert p[b-g75tixq9z8] {
    margin: 0;
}

.alert-success[b-g75tixq9z8] {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-bg-strong);
    color: var(--color-success);
}

.alert-error[b-g75tixq9z8] {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-bg-strong);
    color: var(--color-error);
}

/* ZN-946: this page-scoped rule outranks app.css's global .alert-error via the
   Blazor scoped-CSS attribute, so the dark-theme brightening there (see
   app.css) needs the same override here to actually apply on this page. */
[data-theme="dark"] .alert-error[b-g75tixq9z8] {
    color: var(--color-error-bright);
}

.subscription-details-grid[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.detail-label[b-g75tixq9z8] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.detail-value[b-g75tixq9z8] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Footer */
.billing-footer[b-g75tixq9z8] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.refund-link[b-g75tixq9z8] {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.refund-link:hover[b-g75tixq9z8] {
    color: var(--text-primary);
}

/* ===== Become BP Tab ===== */
.become-bp-section[b-g75tixq9z8] {
    width: 100%;
    padding: 2.5rem 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.become-bp-info[b-g75tixq9z8],
.become-bp-action[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.become-bp-title[b-g75tixq9z8] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.become-bp-price[b-g75tixq9z8] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.become-bp-features[b-g75tixq9z8] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.become-bp-rosca-note[b-g75tixq9z8] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.become-bp-order-now[b-g75tixq9z8] {
    width: 100%;
}

.become-bp-disclosure[b-g75tixq9z8] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
    .summary-cards[b-g75tixq9z8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-methods-grid[b-g75tixq9z8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .billing-container[b-g75tixq9z8] {
        padding: 1rem;
    }

    .btn-receipt[b-g75tixq9z8] {
        flex: 1;
        justify-content: center;
    }

    .summary-cards[b-g75tixq9z8] {
        grid-template-columns: 1fr;
    }

    .payment-methods-grid[b-g75tixq9z8] {
        grid-template-columns: 1fr;
    }

    .table-container[b-g75tixq9z8] {
        overflow-x: auto;
    }

    .billing-table[b-g75tixq9z8] {
        min-width: 550px;
    }

    .billing-history-header[b-g75tixq9z8] {
        flex-direction: column;
        gap: 1rem;
    }

    .billing-history-controls[b-g75tixq9z8] {
        width: 100%;
    }

    .search-input[b-g75tixq9z8] {
        flex: 1;
        width: auto;
    }

    .billing-history-section[b-g75tixq9z8] {
        padding: 1.25rem;
    }

    .np-layout[b-g75tixq9z8] {
        flex-direction: column;
    }

    .np-sidebar[b-g75tixq9z8] {
        min-width: 100%;
        flex-direction: row;
    }

    .np-option:first-child[b-g75tixq9z8] {
        border-radius: 10px 0 0 10px;
    }

    .np-option:last-child[b-g75tixq9z8] {
        border-radius: 0 10px 10px 0;
        border-top: 1px solid var(--border-color);
        border-left: none;
    }

    .np-form-panel[b-g75tixq9z8] {
        padding: 1.25rem;
    }

    .settings-layout[b-g75tixq9z8] {
        grid-template-columns: 1fr;
    }

    .subscription-card[b-g75tixq9z8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .subscription-card-right[b-g75tixq9z8] {
        width: 100%;
        justify-content: space-between;
    }

    .subscriptions-section[b-g75tixq9z8] {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .summary-card[b-g75tixq9z8] {
        padding: 1rem;
    }

    .summary-value[b-g75tixq9z8] {
        font-size: 1.35rem;
    }

    .billing-history-section[b-g75tixq9z8] {
        padding: 1rem;
    }

    .billing-history-controls[b-g75tixq9z8] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-g75tixq9z8] {
        width: 100%;
    }

    .np-sidebar[b-g75tixq9z8] {
        flex-direction: column;
    }

    .np-option:first-child[b-g75tixq9z8] {
        border-radius: 10px 10px 0 0;
    }

    .np-option:last-child[b-g75tixq9z8] {
        border-radius: 0 0 10px 10px;
        border-top: none;
        border-left: 1px solid var(--border-color);
    }

    .subscription-card-right[b-g75tixq9z8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

@media (max-width: 900px) {
    .become-bp-section[b-g75tixq9z8] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .become-bp-section[b-g75tixq9z8] {
        padding: 1.5rem 1.25rem;
    }

    .become-bp-price[b-g75tixq9z8] {
        font-size: 2rem;
    }

    .become-bp-features[b-g75tixq9z8] {
        font-size: 0.9rem;
    }
}

/* ── Order confirmation banner (ZN-343) ────────────────────────────────────
   Rendered at the top of the Subscriptions tab when the page is opened
   with ?order=<id> after a successful Order Now charge. The user can
   dismiss it; otherwise it persists until they leave the page. */
.order-confirmation-banner[b-g75tixq9z8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem 0;
    border-radius: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
}

.order-confirmation-banner__icon[b-g75tixq9z8] {
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.order-confirmation-banner__body[b-g75tixq9z8] {
    flex: 1;
    min-width: 0;
}

.order-confirmation-banner__title[b-g75tixq9z8] {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.order-confirmation-banner__detail[b-g75tixq9z8] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.order-confirmation-banner__detail--muted[b-g75tixq9z8] {
    color: var(--text-muted);
    font-style: italic;
}

.order-confirmation-banner__close[b-g75tixq9z8] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}

.order-confirmation-banner__close:hover[b-g75tixq9z8],
.order-confirmation-banner__close:focus-visible[b-g75tixq9z8] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Attention-flash animation on the freshly-created subscription card.
   Plays once on entry and decays — does not loop, so it does not stay
   visually noisy once the user has acknowledged the banner. */
.subscription-card--highlight[b-g75tixq9z8] {
    animation: subscription-card-flash-b-g75tixq9z8 1.6s ease-out 1;
    border-color: var(--accent-primary);
}

@keyframes subscription-card-flash-b-g75tixq9z8 {
    0% {
        box-shadow: 0 0 0 0 var(--accent-primary);
        background: var(--bg-card-hover);
    }
    60% {
        box-shadow: 0 0 0 6px transparent;
        background: var(--bg-card-hover);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background: var(--bg-card);
    }
}

/* Gift success panel (ZN-387) */
.np-gift-success[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.np-gift-success-title[b-g75tixq9z8] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.np-gift-success-grid[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.np-gift-success-label[b-g75tixq9z8] {
    color: var(--text-secondary-strong);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.np-gift-success-value[b-g75tixq9z8] {
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.np-gift-success-actions[b-g75tixq9z8] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .np-gift-success-grid[b-g75tixq9z8] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .np-gift-success-label[b-g75tixq9z8] {
        margin-top: 0.5rem;
    }
}

/* Print styles */
@media print {
    .page-header[b-g75tixq9z8],
    .page-tabs[b-g75tixq9z8],
    .header-actions[b-g75tixq9z8],
    .payment-card-actions[b-g75tixq9z8],
    .pagination[b-g75tixq9z8],
    .pagination-info[b-g75tixq9z8],
    .billing-footer[b-g75tixq9z8],
    .btn-cancel[b-g75tixq9z8],
    .dialog-box[b-g75tixq9z8],
    .dialog-overlay[b-g75tixq9z8] {
        display: none !important;
    }

    .billing-container[b-g75tixq9z8] {
        padding: 0;
        max-width: 100%;
    }
}

/* PR 18 — Gift processor sub-tabs. Only visible when both ANet and CopeCart
   are available for the selected gift product. Mirrors the OrderNowPaymentModal
   tab styling but inline within the gift form rather than a modal header. */
.gift-processor-tabs[b-g75tixq9z8] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.gift-processor-tab[b-g75tixq9z8] {
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.gift-processor-tab:hover[b-g75tixq9z8] {
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.gift-processor-tab.active[b-g75tixq9z8] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

/* New-account phone MudMask: stretch the outlined input to match the full-width
   Country / Sponsor fields above it (MudBlazor inputs aren't full-width by default). */
[b-g75tixq9z8] .np-phone-input {
    width: 100%;
}

/* Inline hint shown in the Gift → Crypto payment branch when crypto can't render a
   form yet (gateway not configured, or a non-subscription gifting type is selected). */
.np-gift-payment-hint[b-g75tixq9z8] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary-strong);
}

/* ── Update Card billing-address fields ─────────────────────────────────────
   Mirrors the anet-form / anet-field pattern from OrderNowAuthorizeNetForm so
   the billing address block and the card block share the same visual rhythm.
   Uses CSS variables only — no hardcoded colors. */
.changecard-checkbox-label[b-g75tixq9z8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* Helper text under the "apply to active subscriptions" checkbox (ZN-711) —
   mirrors .np-gift-payment-hint's muted inline-hint styling. */
.cardonfile-apply-subs-hint[b-g75tixq9z8] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.changecard-address-fields[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.changecard-field[b-g75tixq9z8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.changecard-label[b-g75tixq9z8] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.changecard-required[b-g75tixq9z8] {
    color: var(--color-error, var(--accent-primary));
    margin-left: 2px;
}

.changecard-input[b-g75tixq9z8] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color 0.15s;
}

.changecard-input:focus[b-g75tixq9z8] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.changecard-input:disabled[b-g75tixq9z8] {
    opacity: 0.55;
    cursor: not-allowed;
}

.changecard-row[b-g75tixq9z8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .changecard-row[b-g75tixq9z8] {
        grid-template-columns: 1fr;
    }
}

/* ── V276: Markets/Studio track switch ─────────────────────────────────────────────────
   The action is tinted differently from the other Manage-Subscription entries because it is a
   different KIND of action: nothing is charged and nothing about the plan changes except its
   name. Colours come from theme variables — never hardcoded (CLAUDE.md § CSS & Theming). */
[b-g75tixq9z8] .dropdown-item--track {
    color: var(--accent-primary);
}

[b-g75tixq9z8] .dropdown-item--track:hover {
    background: var(--bg-card-hover);
}

[b-g75tixq9z8] .track-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

[b-g75tixq9z8] .track-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    cursor: pointer;
}

[b-g75tixq9z8] .track-option:hover {
    background: var(--bg-card-hover);
}

[b-g75tixq9z8] .track-option--selected {
    border-color: var(--accent-primary);
}

[b-g75tixq9z8] .track-option-name {
    font-weight: 500;
}
/* /Pages/ComingSoonPage.razor.rz.scp.css */
.coming-soon-container[b-2qhdkvc1dv] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 24px;
}

.coming-soon-content[b-2qhdkvc1dv] {
    text-align: center;
    max-width: 480px;
}

.coming-soon-icon[b-2qhdkvc1dv] {
    margin-bottom: 32px;
    animation: pulse-b-2qhdkvc1dv 2s ease-in-out infinite;
}

@keyframes pulse-b-2qhdkvc1dv {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.coming-soon-title[b-2qhdkvc1dv] {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.coming-soon-message[b-2qhdkvc1dv] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.coming-soon-actions[b-2qhdkvc1dv] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-primary[b-2qhdkvc1dv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--accent-teal);
    color: var(--text-on-accent);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover[b-2qhdkvc1dv] {
    background-color: var(--accent-teal-deep);
    color: var(--text-on-accent);
}

.btn-primary svg[b-2qhdkvc1dv] {
    flex-shrink: 0;
}
/* /Pages/CommissionCalculatorPage.razor.rz.scp.css */
/* ========================================
   Commission Dashboard — Readable Design
   Follows BackOffice design spec (app.css)
   Optimized for readability across all ages
   ======================================== */

.comp-page[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1.75rem 0 2.5rem;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

/* ── Header ── */
.comp-header[b-5l2vhuuyrc] {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    background: linear-gradient(180deg, var(--accent-primary-light) 0%, transparent 100%);
    border-radius: 16px;
}

.comp-logo-ring[b-5l2vhuuyrc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    box-shadow: 0 4px 24px var(--accent-primary-hover-border);
    margin-bottom: 1.25rem;
}

.comp-logo[b-5l2vhuuyrc] {
    color: var(--text-on-accent);
    font-weight: 800;
    font-size: 1.625rem;
    line-height: 1;
}

.comp-title[b-5l2vhuuyrc] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.comp-subtitle[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0.75rem auto 0;
    line-height: 1.6;
    max-width: 620px;
}

    .comp-subtitle strong[b-5l2vhuuyrc] {
        color: var(--color-warning);
    }

/* ── Loading / Empty ── */
.comp-loading[b-5l2vhuuyrc] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.comp-empty[b-5l2vhuuyrc] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* ── Sections (cards) ── */
.comp-section[b-5l2vhuuyrc] {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s;
}

    .comp-section:hover[b-5l2vhuuyrc] {
        border-color: var(--accent-primary-bg-strong);
    }

.comp-section-header[b-5l2vhuuyrc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* ── Section icon circles ── */
.comp-section-icon[b-5l2vhuuyrc] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

    .comp-section-icon[b-5l2vhuuyrc]::before {
        font-weight: 700;
        line-height: 1;
    }

.icon-star[b-5l2vhuuyrc] {
    background: var(--color-warning-bg);
}

    .icon-star[b-5l2vhuuyrc]::before {
        content: "\2605";
        color: var(--color-warning);
    }

.icon-chart[b-5l2vhuuyrc] {
    background: var(--accent-secondary-light);
}

    .icon-chart[b-5l2vhuuyrc]::before {
        content: "\25A6";
        color: var(--accent-secondary);
    }

.icon-trending[b-5l2vhuuyrc] {
    background: var(--color-success-bg);
}

    .icon-trending[b-5l2vhuuyrc]::before {
        content: "\2197";
        color: var(--color-success);
    }

.icon-history[b-5l2vhuuyrc] {
    background: var(--color-info-bg);
}

    .icon-history[b-5l2vhuuyrc]::before {
        content: "\23F1";
        color: var(--color-info);
    }

.icon-trophy[b-5l2vhuuyrc] {
    background: var(--accent-primary-light);
}

    .icon-trophy[b-5l2vhuuyrc]::before {
        content: "\265B";
        color: var(--accent-primary);
    }

.comp-section-label[b-5l2vhuuyrc] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.comp-hint[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: -0.25rem 0 1.25rem;
    line-height: 1.6;
}

.comp-hint-small[b-5l2vhuuyrc] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.1rem 0 0.75rem;
    font-style: italic;
    line-height: 1.5;
}

/* ── Status Grid (4 stat boxes) ── */
.comp-status-grid[b-5l2vhuuyrc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.comp-stat[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}

    .comp-stat:hover[b-5l2vhuuyrc] {
        border-color: var(--accent-primary-bg-strong);
        background: var(--bg-card-hover);
    }

.comp-stat-value[b-5l2vhuuyrc] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.comp-stat-label[b-5l2vhuuyrc] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Color utilities ── */
.text-success[b-5l2vhuuyrc] {
    color: var(--color-success);
}

.text-error[b-5l2vhuuyrc] {
    color: var(--color-error);
}

.text-info[b-5l2vhuuyrc] {
    color: var(--accent-secondary);
}

.text-warning[b-5l2vhuuyrc] {
    color: var(--color-warning);
}

.text-muted[b-5l2vhuuyrc] {
    color: var(--text-muted);
}

/* ── Activity Grid ── */
.comp-activity-grid[b-5l2vhuuyrc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.comp-field-group[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comp-field-label[b-5l2vhuuyrc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.comp-field-value[b-5l2vhuuyrc] {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Legs Grid ── */
.comp-legs-grid[b-5l2vhuuyrc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.comp-leg-card[b-5l2vhuuyrc] {
    overflow: hidden;
}

.comp-leg-dot[b-5l2vhuuyrc] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

    .comp-leg-dot.left[b-5l2vhuuyrc] {
        background: var(--accent-primary);
        box-shadow: 0 0 8px var(--accent-primary-hover-border);
    }

    .comp-leg-dot.right[b-5l2vhuuyrc] {
        background: var(--color-success);
        box-shadow: 0 0 8px var(--color-success-bg-strong);
    }

.comp-leg-field[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.comp-leg-label[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.4;
}

.comp-leg-divider[b-5l2vhuuyrc] {
    height: 1px;
    background: var(--border-divider);
    margin: 1.25rem 0;
}

/* Leg subsection */
.comp-leg-subsection[b-5l2vhuuyrc] {
    padding-top: 0.5rem;
}

.comp-subsection-title[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.85rem;
}

.comp-subsection-header[b-5l2vhuuyrc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

    .comp-subsection-header .comp-subsection-title[b-5l2vhuuyrc] {
        margin: 0;
    }

.comp-subsection-meta[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}

.comp-subsection-meta-title[b-5l2vhuuyrc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.comp-subsection-meta-sub[b-5l2vhuuyrc] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.comp-subsection-subtitle[b-5l2vhuuyrc] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
    padding-top: 0.5rem;
}

.comp-tree-cv-breakdown[b-5l2vhuuyrc] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding: 0.15rem 0 0.5rem;
    line-height: 1.5;
}

.comp-leg-row[b-5l2vhuuyrc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--border-divider);
    transition: background 0.15s;
}

    .comp-leg-row:last-child[b-5l2vhuuyrc] {
        border-bottom: none;
    }

    .comp-leg-row:hover[b-5l2vhuuyrc] {
        background: var(--bg-card-hover);
        border-radius: 6px;
    }

.comp-leg-row-label[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Default value color is the high-contrast primary so bare numbers stay
   readable on dark cards. Modifier classes (.text-success, .text-error,
   .text-warning, .text-muted) override per row when the value carries
   semantic meaning. */
.comp-leg-row-value[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── CV Package Selector ── */
.comp-cv-selector[b-5l2vhuuyrc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.comp-cv-label[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.comp-cv-select[b-5l2vhuuyrc] {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .comp-cv-select:focus[b-5l2vhuuyrc] {
        border-color: var(--border-input-focus);
    }

    .comp-cv-select option[b-5l2vhuuyrc] {
        background: var(--bg-dropdown);
        color: var(--text-primary);
    }

/* ── Next Rank Progress ── */
.comp-next-rank-bar[b-5l2vhuuyrc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.comp-next-target[b-5l2vhuuyrc] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.comp-next-pay-badge[b-5l2vhuuyrc] {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.9375rem;
    font-weight: 700;
}

.comp-next-rank-grid[b-5l2vhuuyrc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.comp-next-rank-col[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.comp-next-col-title[b-5l2vhuuyrc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.comp-next-col-header[b-5l2vhuuyrc] {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-divider);
    margin-bottom: 0.35rem;
}

    .comp-next-col-header span[b-5l2vhuuyrc] {
        font-size: 0.8125rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

.comp-next-row[b-5l2vhuuyrc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.comp-next-badge[b-5l2vhuuyrc] {
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-success[b-5l2vhuuyrc] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning[b-5l2vhuuyrc] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-error[b-5l2vhuuyrc] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* ── Period Selector (Previous Calculator tab) ── */
.comp-period-selector[b-5l2vhuuyrc] {
    margin-top: 0.75rem;
    max-width: 240px;
}

.comp-period-empty[b-5l2vhuuyrc] {
    padding: 8px 12px;
    border: 1px dashed var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ── Status Badge (next to section header) ── */
.comp-status-badge[b-5l2vhuuyrc] {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-left: auto;
}

/* ── Enrollment Tree Items ── */
.comp-tree-item[b-5l2vhuuyrc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-divider);
    gap: 0.75rem;
}

    .comp-tree-item:last-child[b-5l2vhuuyrc],
    .comp-tree-cv-breakdown:last-child[b-5l2vhuuyrc] {
        border-bottom: none;
    }

    .comp-tree-item:has(+ .comp-tree-cv-breakdown)[b-5l2vhuuyrc] {
        border-bottom: none;
    }

    .comp-tree-cv-breakdown + .comp-subsection-subtitle[b-5l2vhuuyrc],
    .comp-tree-item + .comp-subsection-subtitle[b-5l2vhuuyrc] {
        margin-top: 0.75rem;
    }

.comp-tree-name[b-5l2vhuuyrc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.comp-tree-user-name[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comp-tree-user-id[b-5l2vhuuyrc] {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.comp-tree-contribution[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Total customer volume shown before the contribution when capping reduced it.
   Visual hierarchy: total = muted secondary, "→" = subtle separator, contribution = primary.
   Hidden entirely when total == contribution (no cap), keeping uncapped members clean. */
.comp-tree-total[b-5l2vhuuyrc] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.comp-tree-total[b-5l2vhuuyrc]::after {
    content: "→";
    margin-left: 0.4rem;
    color: var(--text-primary);
    font-weight: 400;
}

.comp-tree-empty[b-5l2vhuuyrc] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.75rem 0.25rem;
    text-align: left;
}

/* ── Rank Structure Table ── */
.comp-rank-table-wrap[b-5l2vhuuyrc] {
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-card);
}

.comp-rank-table[b-5l2vhuuyrc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

    .comp-rank-table thead th[b-5l2vhuuyrc] {
        text-align: left;
        padding: 0.9rem 1rem;
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--bg-table-header);
        border-bottom: 1px solid var(--border-divider);
    }

    .comp-rank-table tbody td[b-5l2vhuuyrc] {
        padding: 0.85rem 1rem;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .comp-rank-table tbody tr:last-child td[b-5l2vhuuyrc] {
        border-bottom: none;
    }

    .comp-rank-table tbody tr:hover[b-5l2vhuuyrc] {
        background: var(--bg-card-hover);
    }

.comp-rank-current[b-5l2vhuuyrc] {
    background: var(--accent-primary-light);
}

    .comp-rank-current:hover[b-5l2vhuuyrc] {
        background: var(--accent-primary-bg-strong) !important;
    }

.comp-rank-name[b-5l2vhuuyrc] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.comp-rank-current-dot[b-5l2vhuuyrc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--accent-primary-hover-border);
}

.comp-rank-notes[b-5l2vhuuyrc] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider);
}

    .comp-rank-notes p[b-5l2vhuuyrc] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0 0 0.5rem;
        line-height: 1.6;
    }

/* ── Responsive ── */
@media (max-width: 768px) {
    .comp-page[b-5l2vhuuyrc] {
        gap: 1.25rem;
        padding: 1.25rem 0;
    }

    .comp-header[b-5l2vhuuyrc] {
        padding: 2rem 1.25rem 1rem;
    }

    .comp-title[b-5l2vhuuyrc] {
        font-size: 1.375rem;
    }

    .comp-subtitle[b-5l2vhuuyrc] {
        font-size: 0.875rem;
    }

    .comp-status-grid[b-5l2vhuuyrc] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comp-legs-grid[b-5l2vhuuyrc] {
        grid-template-columns: 1fr;
    }

    .comp-next-rank-grid[b-5l2vhuuyrc] {
        grid-template-columns: 1fr;
    }

    .comp-activity-grid[b-5l2vhuuyrc] {
        grid-template-columns: 1fr;
    }

    .comp-section[b-5l2vhuuyrc] {
        padding: 1.5rem 1.25rem;
        border-radius: 12px;
    }

    .comp-stat-value[b-5l2vhuuyrc] {
        font-size: 1.25rem;
    }
}

/* ── Period header ── */
.comp-period-header[b-5l2vhuuyrc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.comp-period-header strong[b-5l2vhuuyrc] {
    color: var(--text-primary);
    font-weight: 600;
}

.comp-period-icon[b-5l2vhuuyrc] {
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 4px;
    flex-shrink: 0;
}

.comp-period-text[b-5l2vhuuyrc] {
    flex: 1;
}

.comp-period-meta[b-5l2vhuuyrc] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Stat sub-line (weekly under monthly) ── */
.comp-stat-sub[b-5l2vhuuyrc] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}


/* ── Per-leg qualification rule rows ── */
.comp-leg-rules[b-5l2vhuuyrc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0;
}

.comp-leg-row-sub[b-5l2vhuuyrc] {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85em;
}

.comp-rule-fail-detail[b-5l2vhuuyrc] {
    color: var(--color-error);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    font-style: italic;
}

/* ── Scrollable member list ── */
.comp-tree-scroll[b-5l2vhuuyrc] {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.comp-tree-scroll[b-5l2vhuuyrc]::-webkit-scrollbar {
    width: 8px;
}

.comp-tree-scroll[b-5l2vhuuyrc]::-webkit-scrollbar-track {
    background: transparent;
}

.comp-tree-scroll[b-5l2vhuuyrc]::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: 4px;
}

.comp-tree-scroll[b-5l2vhuuyrc]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.comp-show-all-btn[b-5l2vhuuyrc] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    margin: 0.5rem 0;
    background: transparent;
    border: 1px solid var(--border-card);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.comp-show-all-btn:hover[b-5l2vhuuyrc] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.comp-viewing-as[b-5l2vhuuyrc] {
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.comp-viewing-as strong[b-5l2vhuuyrc] {
    color: var(--accent-primary);
}
/* /Pages/CommissionSummaryPage.razor.rz.scp.css */
/* ── Layout ── */
.summary-container[b-xc0folljia] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* ── Payout Note ── */
.payout-note[b-xc0folljia] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    color: var(--color-warning);
    font-size: 0.9rem;
    line-height: 1.5;
}

.payout-note svg[b-xc0folljia] {
    flex-shrink: 0;
    margin-top: 2px;
}

.payout-note p[b-xc0folljia] {
    margin: 0;
}

.payout-link[b-xc0folljia] {
    color: var(--accent-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.payout-link:hover[b-xc0folljia] {
    color: var(--accent-primary-hover);
}

/* ── Table Controls ── */
.table-controls[b-xc0folljia] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.entries-control[b-xc0folljia] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cs-page-size[b-xc0folljia] {
    width: 80px;
}

.search-control[b-xc0folljia] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.search-input[b-xc0folljia] {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
    transition: border-color 0.15s;
}

.search-input:focus[b-xc0folljia] {
    outline: none;
    border-color: var(--accent-primary);
}

/* ── Table ── */
.table-container[b-xc0folljia] {
    overflow-x: auto;
}

.commission-table[b-xc0folljia] {
    font-size: 0.9rem;
}

.commission-table thead th[b-xc0folljia] {
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-primary);
}

.commission-table tbody tr[b-xc0folljia] {
    border-bottom: 1px solid var(--border-secondary);
    transition: background 0.15s;
}

.commission-table tbody tr:hover[b-xc0folljia] {
    background: var(--bg-card-hover);
}

.commission-table tbody td[b-xc0folljia] {
    padding: 0.875rem 1rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.col-amount[b-xc0folljia] {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.has-adjustment[b-xc0folljia] {
    color: var(--color-warning) !important;
}

/* ── Rank Badge ── */
.rank-badge[b-xc0folljia] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    white-space: nowrap;
}

/* ── Table Footer ── */
.table-footer[b-xc0folljia] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.showing-text[b-xc0folljia] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Pagination ── */
.pagination[b-xc0folljia] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.page-btn[b-xc0folljia] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled)[b-xc0folljia] {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.page-btn.active[b-xc0folljia] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.page-btn:disabled[b-xc0folljia] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav-btn[b-xc0folljia] {
    font-weight: 500;
}

.page-ellipsis[b-xc0folljia] {
    padding: 0.4rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .summary-container[b-xc0folljia] {
        padding: 1rem;
    }

    .table-controls[b-xc0folljia] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-xc0folljia] {
        min-width: unset;
        width: 100%;
    }

    .table-footer[b-xc0folljia] {
        flex-direction: column;
        align-items: center;
    }

    .commission-table[b-xc0folljia] {
        min-width: 700px;
    }
}

@media (max-width: 480px) {
    .summary-container[b-xc0folljia] {
        padding: 0.75rem;
    }
}
/* /Pages/ConsentGatePage.razor.rz.scp.css */
/*
 * First-login consent gate (ZN-609).
 *
 * Rendered inside MainLayout's `consent-gate-only` branch, which has no sidebar,
 * header, footer or scroll container. The card is therefore shaped like a BackOffice
 * modal (aidocs/BACKOFFICE_DESIGN_SPEC.md § Dialogs/Modals — .dialog-overlay /
 * .dialog-box / header-body-footer): the shell is capped at the viewport, only the
 * BODY scrolls, and the header and the submit footer stay pinned. Before this, the
 * card grew past 100vh inside an `overflow:hidden` parent, so the agreement text,
 * the signature capture and the submit button were unreachable.
 */
.consent-page[b-okoou7qbbk] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-body);
    box-sizing: border-box;
}

.consent-card[b-okoou7qbbk] {
    width: 100%;
    max-width: 720px;
    /* Cap at the shell, not the viewport, so the 24px .consent-page padding is
       respected on both edges and the footer never sits under the window chrome. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-modal);
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* ---- Header (fixed) ---- */
.consent-header[b-okoou7qbbk] {
    flex-shrink: 0;
    text-align: center;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border-primary, var(--border-color));
    background: var(--bg-modal);
}

.brand-text[b-okoou7qbbk] {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 12px;
}

.consent-title[b-okoou7qbbk] {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.consent-subtitle[b-okoou7qbbk] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/* ---- Body (the ONLY scroll region) ---- */
.consent-body[b-okoou7qbbk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 32px;
    -webkit-overflow-scrolling: touch;
}

.consent-loading[b-okoou7qbbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 0;
    color: var(--text-secondary);
}

/* ---- Agreement checklist ---- */
.consent-section-head[b-okoou7qbbk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.consent-section-titles[b-okoou7qbbk] {
    min-width: 0;
}

.consent-section-title[b-okoou7qbbk] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px;
}

.consent-section-hint[b-okoou7qbbk] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.consent-accept-all-btn[b-okoou7qbbk] {
    flex-shrink: 0;
    white-space: nowrap;
}

.consent-agreements[b-okoou7qbbk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.consent-agreement-item[b-okoou7qbbk] {
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.consent-agreement-item.is-accepted[b-okoou7qbbk] {
    border-color: var(--color-success);
}

.agreement-header[b-okoou7qbbk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card-hover, var(--bg-hover));
}

.agreement-checkbox[b-okoou7qbbk] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.agreement-checkbox:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.agreement-name[b-okoou7qbbk] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    user-select: none;
}

.agreement-accepted-badge[b-okoou7qbbk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success);
}

/* Read/Hide is now its own button rather than a click handler on the whole row:
   the row also carries a checkbox and a label, so a row-level toggle meant the
   expand action had no accessible name, no keyboard affordance and needed
   stopPropagation gymnastics to keep the checkbox usable. */
.agreement-toggle-btn[b-okoou7qbbk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.agreement-toggle-btn:hover[b-okoou7qbbk] {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    background: var(--accent-primary-glow);
}

.agreement-toggle-btn:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.agreement-toggle-icon[b-okoou7qbbk] {
    transition: transform 0.2s ease;
}

.agreement-toggle-icon.is-open[b-okoou7qbbk] {
    transform: rotate(180deg);
}

/*
 * The document text itself scrolls in place, capped relative to the viewport so a
 * long agreement never pushes the rest of the form (signature + footer) out of
 * reach. `tabindex="0"` on the element makes this region keyboard-scrollable.
 */
.agreement-body[b-okoou7qbbk] {
    padding: 16px 20px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid var(--border-primary, var(--border-color));
    max-height: min(320px, 38vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-input, var(--bg-card));
}

.agreement-body:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Agreement bodies are server-supplied HTML — give the common block tags sane
   rhythm so an unstyled <h2>/<ul> doesn't blow out the card. */
.agreement-body :is(h1, h2, h3, h4)[b-okoou7qbbk] {
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin: 16px 0 8px;
}

.agreement-body :is(h1, h2, h3, h4):first-child[b-okoou7qbbk] {
    margin-top: 0;
}

.agreement-body p[b-okoou7qbbk] {
    margin: 0 0 10px;
}

.agreement-body :is(ul, ol)[b-okoou7qbbk] {
    margin: 0 0 10px;
    padding-left: 20px;
}

.agreement-body a[b-okoou7qbbk] {
    color: var(--accent-primary);
}

.agreement-body :is(img, table)[b-okoou7qbbk] {
    max-width: 100%;
}

/* ---- Recurring-charge disclosure ---- */
.consent-recurring-disclosure[b-okoou7qbbk] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-bg-strong);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.consent-recurring-disclosure svg[b-okoou7qbbk] {
    color: var(--color-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.consent-recurring-disclosure p[b-okoou7qbbk] {
    margin: 0;
}

.consent-recurring-ack[b-okoou7qbbk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.consent-recurring-ack input[type="checkbox"][b-okoou7qbbk] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.consent-recurring-ack input[type="checkbox"]:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ---- Signature capture ---- */
.consent-signature-section[b-okoou7qbbk] {
    padding-top: 20px;
    border-top: 1px solid var(--border-primary, var(--border-color));
}

.consent-label[b-okoou7qbbk] {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.consent-signature-input[b-okoou7qbbk] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.consent-signature-input:focus[b-okoou7qbbk] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.consent-signature-input:disabled[b-okoou7qbbk] {
    opacity: 0.6;
    background: var(--bg-hover);
}

.consent-signature-preview[b-okoou7qbbk] {
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px dashed var(--accent-primary);
    border-radius: 8px;
    background: var(--accent-primary-glow);
    text-align: center;
}

/*
 * Standard clip-rect screen-reader-only pattern: visually hidden but still
 * announced by assistive technology (unlike display:none/visibility:hidden,
 * which are removed from the accessibility tree). Used by the typed-signature
 * input's <label>.
 */
.sr-only[b-okoou7qbbk] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signature-mode-tabs[b-okoou7qbbk] {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-primary, var(--border-color));
    margin-bottom: 16px;
}

.signature-mode-tab[b-okoou7qbbk] {
    padding: 10px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.signature-mode-tab:hover:not(:disabled)[b-okoou7qbbk] {
    color: var(--text-primary);
}

.signature-mode-tab:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Active-mode visual indicator (the only signal a sighted user has — state was
   previously conveyed via aria-pressed alone). */
.signature-mode-tab-active[b-okoou7qbbk] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.signature-mode-tab:disabled[b-okoou7qbbk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.signature-mode-panel[b-okoou7qbbk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signature-canvas[b-okoou7qbbk] {
    width: 100%;
    height: 160px;
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 10px;
    background: var(--bg-input, var(--bg-card));
    display: block;
}

.signature-canvas:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.signature-canvas-draw[b-okoou7qbbk] {
    cursor: crosshair;
    touch-action: none;
}

.signature-canvas-typed[b-okoou7qbbk] {
    height: 100px;
    border: none;
    background: transparent;
}

.signature-canvas-upload[b-okoou7qbbk] {
    display: none;
}

.consent-signature-clear-btn[b-okoou7qbbk] {
    align-self: flex-start;
    padding: 8px 20px;
    border: 1px solid var(--border-primary, var(--border-color));
    border-radius: 8px;
    background: var(--bg-card-hover, var(--bg-hover));
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.consent-signature-clear-btn:hover:not(:disabled)[b-okoou7qbbk] {
    border-color: var(--accent-primary);
}

.consent-signature-clear-btn:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.consent-signature-clear-btn:disabled[b-okoou7qbbk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.consent-upload-label[b-okoou7qbbk] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.consent-upload-input[b-okoou7qbbk] {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.consent-signature-uploaded-img[b-okoou7qbbk] {
    max-width: 100%;
    max-height: 150px;
}

/* ---- Footer (sticky) ---- */
.consent-footer[b-okoou7qbbk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 32px;
    border-top: 1px solid var(--border-primary, var(--border-color));
    background: var(--bg-modal);
}

.consent-progress[b-okoou7qbbk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.consent-progress-count[b-okoou7qbbk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.consent-progress-hint[b-okoou7qbbk] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.consent-submit-btn[b-okoou7qbbk] {
    flex-shrink: 0;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-dark));
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.consent-submit-btn:hover:not(:disabled)[b-okoou7qbbk] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-glow);
}

.consent-submit-btn:focus-visible[b-okoou7qbbk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.consent-submit-btn:disabled[b-okoou7qbbk] {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .consent-page[b-okoou7qbbk] {
        padding: 0;
    }

    /* Edge-to-edge on phones: a centred card with side gutters wastes the little
       vertical room there is, and the rounded shell reads as a cropped page. */
    .consent-card[b-okoou7qbbk] {
        max-width: none;
        height: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
    }

    .consent-header[b-okoou7qbbk] {
        padding: 20px 20px 16px;
    }

    .brand-text[b-okoou7qbbk] {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .consent-title[b-okoou7qbbk] {
        font-size: 1.125rem;
    }

    .consent-body[b-okoou7qbbk] {
        padding: 20px;
    }

    .consent-footer[b-okoou7qbbk] {
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    }

    .agreement-body[b-okoou7qbbk] {
        max-height: min(280px, 45vh);
    }
}

@media (max-width: 480px) {
    .consent-section-head[b-okoou7qbbk] {
        flex-direction: column;
        gap: 10px;
    }

    .consent-accept-all-btn[b-okoou7qbbk] {
        align-self: flex-start;
    }

    /* Stack the footer so neither the progress text nor the CTA is squeezed. */
    .consent-footer[b-okoou7qbbk] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .consent-progress[b-okoou7qbbk] {
        align-items: center;
        text-align: center;
    }

    .consent-submit-btn[b-okoou7qbbk] {
        width: 100%;
    }

    .agreement-header[b-okoou7qbbk] {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .agreement-name[b-okoou7qbbk] {
        flex: 1 1 auto;
    }
}

/* The card animates in like a dialog; suppressed for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    .agreement-toggle-icon[b-okoou7qbbk],
    .consent-submit-btn[b-okoou7qbbk],
    .consent-agreement-item[b-okoou7qbbk],
    .agreement-toggle-btn[b-okoou7qbbk] {
        transition: none;
    }
}
/* /Pages/ConventionTicketRedemptionPage.razor.rz.scp.css */
/* ZN-1102 — TIER COLOUR SYSTEM
   The page had one accent (brand blue) doing every job, so the two ticket tiers, the member's
   balance and the informational panels were indistinguishable. Per the ticket's comp each tier
   now owns a hue, and every surface for that tier (stat tile, card, timeline column, badge)
   uses the SAME one, so colour means tier everywhere on the page:

     VIP       --accent-indigo   (comp: violet)
     Ultimate  --accent-orange   (comp: orange)  — labels on orange fills use --text-on-orange
     Balance   --accent-primary  (brand blue — the member's own number)
     Info      --accent-info     (cyan — offer panel + important information)

   All are existing palette tokens with identical light/dark values; no new colour is introduced.
   Local aliases keep the mapping in ONE place, so re-tiering means editing these three lines
   rather than hunting hex-equivalents through the file. */
.convention-ticket-container[b-vkxaxq75bd] {
    /* FILL hues — used for solid bars, tints and borders. */
    --tier-vip: var(--accent-indigo);
    --tier-ultimate: var(--accent-orange);
    --tier-balance: var(--accent-primary);

    /* TEXT hues — the same colours mixed toward the theme's own foreground.
       A raw tier hue as TEXT only works on a dark page: --accent-orange on the light theme's
       white card is 2.08:1 and --accent-primary is 3.4:1, so a straight swap would ship a page
       that is unreadable for anyone using the light toggle. Mixing with --text-primary (white
       in dark, near-black in light) brightens the hue on dark and darkens it on light from one
       declaration. Percentages are per-hue because orange starts far lighter than indigo:
       measured light-theme ratios on --bg-card are ~4.8:1 (orange), ~6.3:1 (indigo),
       ~6.9:1 (blue), and 11:1+ on dark. Fills keep the raw hue and pick their own label
       (--text-on-accent / --text-on-orange) instead. */
    --tier-vip-text: color-mix(in srgb, var(--accent-indigo) 70%, var(--text-primary));
    --tier-ultimate-text: color-mix(in srgb, var(--accent-orange) 55%, var(--text-primary));
    --tier-balance-text: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary));

    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ── Limited Time Offer panel ── */
.offer-panel[b-vkxaxq75bd] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: color-mix(in srgb, var(--accent-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-info) 25%, transparent);
    border-radius: 12px;
}

.offer-panel-icon[b-vkxaxq75bd] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-info) 15%, transparent);
    color: var(--accent-info);
}

.offer-panel-text h2[b-vkxaxq75bd] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.offer-panel-text p[b-vkxaxq75bd] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
}

.offer-panel-important[b-vkxaxq75bd] {
    margin-bottom: 0 !important;
    color: var(--text-primary) !important;
}

/* ── Stat tiles ── */
.ticket-stats-grid[b-vkxaxq75bd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* Each tile carries its tier hue as --tile-accent, so one rule set paints all three. */
.ticket-stat-card[b-vkxaxq75bd] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--tile-accent) 14%, var(--bg-card)) 0%,
        var(--bg-card) 75%);
    border: 1px solid color-mix(in srgb, var(--tile-accent) 32%, transparent);
}

.ticket-stat-card--balance[b-vkxaxq75bd]  { --tile-accent: var(--tier-balance);  --tile-ink: var(--tier-balance-text); }
.ticket-stat-card--vip[b-vkxaxq75bd]      { --tile-accent: var(--tier-vip);      --tile-ink: var(--tier-vip-text); }
.ticket-stat-card--ultimate[b-vkxaxq75bd] { --tile-accent: var(--tier-ultimate); --tile-ink: var(--tier-ultimate-text); }

.ticket-stat-icon[b-vkxaxq75bd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tile-accent) 20%, transparent);
    color: var(--tile-ink);
}

.ticket-stat-label[b-vkxaxq75bd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ticket-stat-value[b-vkxaxq75bd] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tile-ink);
}

/* Tier-tinted pill. Text is the tier hue on a dark tint of itself, NOT a fill with a light
   label — --accent-orange in particular carries no readable white label (2.1:1). */
.min-points-badge[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    white-space: normal;
    text-align: left;
    background: color-mix(in srgb, var(--pill-accent, var(--tier-balance)) 18%, transparent);
    color: var(--pill-ink, var(--tier-balance-text));
    border: 1px solid color-mix(in srgb, var(--pill-accent, var(--tier-balance)) 35%, transparent);
}

.min-points-badge--vip[b-vkxaxq75bd]      { --pill-accent: var(--tier-vip);      --pill-ink: var(--tier-vip-text); }
.min-points-badge--ultimate[b-vkxaxq75bd] { --pill-accent: var(--tier-ultimate); --pill-ink: var(--tier-ultimate-text); }

/* ── Section headings ── */
.section-heading[b-vkxaxq75bd] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

/* ── Card shell (these classes are scoped-only on ProfilePage, so redeclare here) ── */
.tab-card[b-vkxaxq75bd] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-card);
}

.tab-card-header[b-vkxaxq75bd] {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.tab-card-header h3[b-vkxaxq75bd] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.tab-card-subtitle[b-vkxaxq75bd] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Choose step ── */
.choose-label[b-vkxaxq75bd] {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 0.9375rem;
}

.ticket-cards-row[b-vkxaxq75bd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Card = tier-coloured header bar over a neutral body, per the comp. The tier hue arrives as
   --card-accent so header, border, bullets and CTA all track one variable. */
.ticket-card[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.ticket-card--vip[b-vkxaxq75bd]      { --card-accent: var(--tier-vip);      --card-ink: var(--tier-vip-text); }
.ticket-card--ultimate[b-vkxaxq75bd] { --card-accent: var(--tier-ultimate); --card-ink: var(--tier-ultimate-text); }

.ticket-card:hover[b-vkxaxq75bd] {
    border-color: var(--card-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--card-accent) 22%, transparent);
}

.ticket-card:focus-visible[b-vkxaxq75bd] {
    outline: 2px solid var(--card-accent);
    outline-offset: 2px;
}

/* Header label sits on a SOLID tier fill, so it needs the per-hue readable foreground:
   white clears --accent-indigo, but on --accent-orange it is 2.1:1 — hence --text-on-orange,
   the token minted for exactly that surface. */
.ticket-card-header[b-vkxaxq75bd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: var(--card-accent);
    color: var(--text-on-accent);
}

.ticket-card--ultimate .ticket-card-header[b-vkxaxq75bd] {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-deep) 100%);
    color: var(--text-on-orange);
}

.ticket-card-header svg[b-vkxaxq75bd] { flex-shrink: 0; }

.ticket-card-body[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
}

.ticket-card-title[b-vkxaxq75bd] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: inherit;
    margin: 0;
}

.ticket-card-cost[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.ticket-card-cost strong[b-vkxaxq75bd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--card-ink);
}

.ticket-card-cost-note[b-vkxaxq75bd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.ticket-card-desc[b-vkxaxq75bd] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Full-width tier CTA, replacing the text link the comp shows as a button. */
.ticket-card-cta[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 4px;
    padding: 10px 16px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--card-accent) 18%, transparent);
    color: var(--card-ink);
    border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
    transition: background 0.2s ease;
}

.ticket-card:hover .ticket-card-cta[b-vkxaxq75bd] {
    background: color-mix(in srgb, var(--card-accent) 30%, transparent);
}

.ticket-card-features[b-vkxaxq75bd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
    width: 100%;
}

/* Green ticks read as "included", independent of tier hue — the comp uses the same device. */
.ticket-card-features li[b-vkxaxq75bd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding-left: 24px;
    position: relative;
    line-height: 1.45;
}

.ticket-card-features li[b-vkxaxq75bd]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
    /* Tick glyph: a data URI cannot resolve a CSS variable, so the stroke is baked — it tracks
       --color-success-bright, the same convention theme-variables.css uses for its checkbox glyph. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5 L6.5 11.5 L12.5 5' stroke='%234ade80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

/* ── Point Requirements Timeline ── */

/* Per-tier column identity, so a row can be read across without re-reading the header. */
.timeline-th[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timeline-th--vip[b-vkxaxq75bd]      { color: var(--tier-vip-text); }
.timeline-th--ultimate[b-vkxaxq75bd] { color: var(--tier-ultimate-text); }

.timeline-pill[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--pill, var(--tier-balance)) 18%, transparent);
    color: var(--pill-ink, var(--tier-balance-text));
    border: 1px solid color-mix(in srgb, var(--pill, var(--tier-balance)) 32%, transparent);
}

.timeline-pill--vip[b-vkxaxq75bd]      { --pill: var(--tier-vip);      --pill-ink: var(--tier-vip-text); }
.timeline-pill--ultimate[b-vkxaxq75bd] { --pill: var(--tier-ultimate); --pill-ink: var(--tier-ultimate-text); }

/* The row in force today. The table lists six windows and previously gave no indication which
   one the member is actually in — the single most useful fact on it. */
.timeline-row--current > td[b-vkxaxq75bd] {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    font-weight: 600;
}

.timeline-row--current > td:first-child[b-vkxaxq75bd] {
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.timeline-now-tag[b-vkxaxq75bd] {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 9px;
    border-radius: 20px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.timeline-footnote[b-vkxaxq75bd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 12px 0 32px;
    line-height: 1.5;
}

/* ── Important Information ── */
/* Filled cyan header bar over the panel body, per the comp — the panel previously opened with
   a plain heading and read as more body copy. */
.important-info-panel[b-vkxaxq75bd] {
    padding: 0;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--accent-info) 30%, transparent);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

/* Fill is --accent-teal-deep, NOT the comp's bright cyan (--accent-info). Two reasons:
   white on #00b9fc is 2.27:1, and the alternative — a dark label — has no theme-stable token
   (--text-inverse is #000612 dark / #ffffff light, so it inverts to white-on-cyan in light
   mode). --accent-teal-deep is identical in both themes and carries --text-on-accent at ~6:1
   while staying in the same cyan/teal family the comp uses for this panel.
   NOTE: the white-on---accent-info pattern already exists in MyTeam.razor.css and
   BrandPromoterDashboard.razor.css at that same 2.27:1 — flagged, not changed here. */
.important-info-panel h2[b-vkxaxq75bd] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-on-accent);
    background: var(--accent-teal-deep);
    margin: 0;
    padding: 12px 24px;
}

.important-info-panel .important-info-columns[b-vkxaxq75bd] {
    padding: 20px 24px 24px;
}

.important-info-columns[b-vkxaxq75bd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
}

.important-info-columns ul[b-vkxaxq75bd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.important-info-columns li[b-vkxaxq75bd] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}

.important-info-columns li[b-vkxaxq75bd]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

/* ── Signed-balance deficit note (insufficient-points state) ── */
.deficit-note[b-vkxaxq75bd] {
    margin-top: 10px !important;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border-left: 3px solid var(--color-warning);
    border-radius: 6px;
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.55 !important;
}

/* ── Back button ── */
.back-btn[b-vkxaxq75bd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 6px 4px;
    margin-bottom: 16px;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.back-btn:hover[b-vkxaxq75bd] {
    color: var(--text-primary);
}

.back-btn:focus-visible[b-vkxaxq75bd] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.back-btn svg[b-vkxaxq75bd] {
    width: 18px;
    height: 18px;
}

/* ── Eligibility results ── */
.eligibility-result[b-vkxaxq75bd] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.eligibility-result .result-body[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.eligibility-result p[b-vkxaxq75bd] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.eligibility-result svg[b-vkxaxq75bd] {
    flex-shrink: 0;
    margin-top: 1px;
}

.eligibility-result--blocked[b-vkxaxq75bd] {
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

.eligibility-result--blocked > svg[b-vkxaxq75bd] {
    color: var(--color-error);
}

.eligibility-result--insufficient[b-vkxaxq75bd] {
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.eligibility-result--insufficient > svg[b-vkxaxq75bd] {
    color: var(--color-warning);
}

.eligibility-result--eligible[b-vkxaxq75bd] {
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
}

.eligibility-result--eligible > svg[b-vkxaxq75bd] {
    color: var(--color-success);
}

.result-headline[b-vkxaxq75bd] {
    font-weight: 600;
}

/* ── Balance stat row ── */
.balance-row[b-vkxaxq75bd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.balance-stat[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
}

.balance-stat .stat-label[b-vkxaxq75bd] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.balance-stat .stat-value[b-vkxaxq75bd] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.balance-stat--required .stat-value[b-vkxaxq75bd] {
    color: var(--color-warning);
}

/* ── Layaway callout ── */
.layaway-info[b-vkxaxq75bd] {
    margin-top: 14px !important;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent-info) 8%, transparent);
    border-left: 3px solid var(--accent-info);
    border-radius: 6px;
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.55 !important;
}

/* ── Purchase / upgrade CTA (blocked state) ── */
.upgrade-cta[b-vkxaxq75bd] {
    display: flex;
    justify-content: flex-end;
}

/* ── Acknowledge section ── */
.acknowledge-section[b-vkxaxq75bd] {
    margin-top: 8px;
}

.acknowledge-title[b-vkxaxq75bd] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.acknowledge-list[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.acknowledge-item[b-vkxaxq75bd] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.acknowledge-item:hover[b-vkxaxq75bd] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.acknowledge-item input[type="checkbox"][b-vkxaxq75bd] {
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--accent-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ── Redeem action bar ── */
.redeem-actions[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-secondary);
}

.redeem-actions .btn[b-vkxaxq75bd] {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.9375rem;
}

.redeem-hint[b-vkxaxq75bd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* ── Loading ── */
.loading-container[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--text-secondary);
}

.spinner[b-vkxaxq75bd] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: ctk-spin-b-vkxaxq75bd 0.8s linear infinite;
}

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

/* ── Success step ── */
.ticket-success-section[b-vkxaxq75bd] {
    max-width: 560px;
    margin: 0 auto;
}

.ticket-reserved-notice[b-vkxaxq75bd] {
    text-align: center;
}

.success-icon[b-vkxaxq75bd] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
}

.ticket-reserved-notice h2[b-vkxaxq75bd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.ticket-reserved-notice p[b-vkxaxq75bd] {
    color: var(--text-secondary);
    margin: 0 0 8px;
    font-size: 0.9375rem;
}

.new-balance[b-vkxaxq75bd] {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    margin: 16px 0 24px !important;
    padding: 12px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border-radius: 8px;
}

.ticket-reserved-notice .btn[b-vkxaxq75bd] {
    padding: 12px 24px;
}

/* ── My Tickets panel ── */
.my-tickets-section[b-vkxaxq75bd] {
    max-width: 720px;
    margin: 0 auto;
}

.my-tickets-list[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-ticket-row[b-vkxaxq75bd] {
    padding: 16px 18px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
}

.my-ticket-main[b-vkxaxq75bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.my-ticket-type[b-vkxaxq75bd] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.my-ticket-details[b-vkxaxq75bd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.my-ticket-stat[b-vkxaxq75bd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
}

.my-ticket-stat .stat-label[b-vkxaxq75bd] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.my-ticket-stat .stat-value[b-vkxaxq75bd] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.my-ticket-stat--owed .stat-value[b-vkxaxq75bd] {
    color: var(--color-warning);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ticket-stats-grid[b-vkxaxq75bd] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .ticket-cards-row[b-vkxaxq75bd] {
        grid-template-columns: 1fr;
    }

    .important-info-columns[b-vkxaxq75bd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ticket-cards-row[b-vkxaxq75bd] {
        grid-template-columns: 1fr;
    }

    .ticket-stats-grid[b-vkxaxq75bd] {
        grid-template-columns: 1fr;
    }

    .convention-ticket-container[b-vkxaxq75bd] {
        padding: 16px;
    }

    .tab-card[b-vkxaxq75bd] {
        padding: 20px;
    }

    .offer-panel[b-vkxaxq75bd] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Funnel/ClientIntakeCompletePage.razor.rz.scp.css */
.intake-complete[b-vkr8tcecbc] {
    min-height: 100vh;
    padding: 3.5rem 1rem;
    background:
        radial-gradient(circle at 50% 0%, var(--zn-accent-primary-glow-softer), transparent 34rem),
        var(--zn-form-bg);
    color: var(--zn-gray-900);
}

.intake-complete__glow[b-vkr8tcecbc] {
    display: none;
}

.intake-complete__card[b-vkr8tcecbc] {
    max-width: 44rem;
    padding: 2.75rem 2.5rem 2.25rem;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-xl);
    background: var(--zn-white);
    box-shadow: var(--zn-shadow-md);
    backdrop-filter: none;
}

/* THIS FILE WINS over funnel.css's .intake-complete rules - scoped CSS compiles to
   .intake-complete[b-scopeid], which outranks the unscoped selector, and BackOffice.styles.css
   is linked AFTER funnel.css (index.html:14 vs :24). So THIS is the page's real background:
   var(--zn-form-bg) #f0f0f4 body + var(--zn-white) card = LIGHT, despite funnel.css:190
   describing a dark hero. That is why the logo here is the DARK-INK -light variant while the
   funnel header and /thank-you-page (which has no scoped override) use the white-ink one.
   Widened 180 -> 210px: the mark went from the 3.3:1 knot raster to the 4.04:1 wordmark
   lockup, so this holds the old rendered height above the checkmark. */
.intake-complete__logo[b-vkr8tcecbc] {
    width: 210px;
    margin-bottom: 1.25rem;
}

.intake-complete__check[b-vkr8tcecbc] {
    width: 4rem;
    height: 4rem;
    color: var(--zn-color-success);
    background: var(--zn-color-success-bg);
}

.intake-complete__title[b-vkr8tcecbc] {
    margin: 0 0 0.4rem;
    background: none;
    color: var(--zn-gray-900);
    -webkit-text-fill-color: currentColor;
}

.intake-complete__lead[b-vkr8tcecbc] {
    color: var(--zn-gray-800);
}

.intake-complete__welcome[b-vkr8tcecbc],
.intake-complete__body[b-vkr8tcecbc],
.intake-complete__list li[b-vkr8tcecbc] {
    color: var(--zn-gray-600);
}

.intake-complete__brand[b-vkr8tcecbc],
.intake-complete__contact a[b-vkr8tcecbc] {
    color: var(--zn-accent-primary-ink);
}

.intake-complete__body[b-vkr8tcecbc] {
    margin-bottom: 1.5rem;
}

.intake-complete__body--error[b-vkr8tcecbc] {
    color: var(--zn-color-error);
}

.intake-complete__button[b-vkr8tcecbc] {
    min-height: 3rem;
    border: 1px solid var(--zn-accent-primary);
    box-shadow: 0 10px 22px -14px var(--zn-accent-primary);
}

.intake-complete__next[b-vkr8tcecbc] {
    margin-top: 2rem;
    padding: 1.4rem;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-lg);
    background: var(--zn-gray-50);
}

.intake-complete__next-title[b-vkr8tcecbc] {
    margin-top: 0;
    color: var(--zn-gray-900);
}

.intake-complete__list[b-vkr8tcecbc] {
    display: block;
    padding: 0;
}

.intake-complete__list li[b-vkr8tcecbc] {
    margin-bottom: 0.7rem;
}

.intake-complete__contact[b-vkr8tcecbc] {
    color: var(--zn-gray-600);
}

.intake-complete__footer[b-vkr8tcecbc] {
    color: var(--zn-gray-500);
}

@media (max-width: 560px) {
    .intake-complete[b-vkr8tcecbc] {
        padding: 2rem 0.75rem;
    }

    .intake-complete__card[b-vkr8tcecbc] {
        padding: 2rem 1.25rem;
    }

    .intake-complete__button[b-vkr8tcecbc] {
        width: 100%;
    }
}
/* /Pages/Funnel/ClientIntakePage.razor.rz.scp.css */
.intake-page[b-x410xtwe4m] {
    min-height: 100vh;
    padding: clamp(24px, 4vw, 52px) 20px;
    background:
        radial-gradient(circle at 85% 4%, color-mix(in srgb, var(--zn-accent-primary) 8%, transparent), transparent 28rem),
        var(--zn-form-bg);
}

.intake-layout[b-x410xtwe4m] {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.intake-progress[b-x410xtwe4m] {
    position: sticky;
    top: 24px;
}

.progress-card[b-x410xtwe4m],
.intake-card[b-x410xtwe4m] {
    border: 1px solid var(--zn-gray-100);
    background: var(--zn-white);
    box-shadow: 0 18px 45px -34px rgb(15 23 42 / 0.38), 0 2px 8px rgb(15 23 42 / 0.04);
}

.progress-card[b-x410xtwe4m] {
    overflow: hidden;
    border-radius: 16px;
}

.progress-step[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 18px;
    color: var(--zn-gray-500);
    border-bottom: 1px solid var(--zn-gray-100);
}

.progress-step:last-child[b-x410xtwe4m] {
    border-bottom: 0;
}

.progress-step--current[b-x410xtwe4m] {
    color: var(--zn-gray-800);
    background: color-mix(in srgb, var(--zn-accent-primary) 6%, var(--zn-white));
    box-shadow: inset 3px 0 0 var(--zn-accent-primary);
}

.progress-step__marker[b-x410xtwe4m] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 50%;
    background: var(--zn-white);
    font-size: 0.78rem;
    font-weight: 750;
}

.progress-step--current .progress-step__marker[b-x410xtwe4m] {
    color: var(--zn-white);
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary);
}

.progress-step strong[b-x410xtwe4m],
.progress-step small[b-x410xtwe4m] {
    display: block;
}

.progress-step strong[b-x410xtwe4m] {
    font-size: 0.9rem;
}

.progress-step small[b-x410xtwe4m] {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--zn-gray-500);
}

.intake-card[b-x410xtwe4m] {
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(24px, 4vw, 42px);
}

.intake-header[b-x410xtwe4m] {
    margin-bottom: 26px;
}

.intake-header__eyebrow[b-x410xtwe4m] {
    display: block;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--zn-accent-primary) 72%, var(--zn-gray-800));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.intake-header h1[b-x410xtwe4m] {
    margin: 0;
    color: var(--zn-black);
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.intake-header p[b-x410xtwe4m] {
    margin: 7px 0 0;
    color: var(--zn-gray-600, var(--zn-gray-500));
    font-size: 0.96rem;
}

.plan-controls[b-x410xtwe4m] {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--zn-accent-primary) 20%, var(--zn-gray-100));
    border-radius: 14px;
    background: color-mix(in srgb, var(--zn-accent-primary) 3%, var(--zn-white));
}

.plan-controls__row[b-x410xtwe4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.plan-controls h2[b-x410xtwe4m] {
    margin: 0;
    color: var(--zn-gray-800);
    font-size: 0.92rem;
}

.plan-controls p[b-x410xtwe4m] {
    margin: 4px 0 0;
    color: var(--zn-gray-500);
    font-size: 0.78rem;
}

.segmented-control[b-x410xtwe4m] {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 11px;
    background: var(--zn-gray-100);
}

.segmented-control button[b-x410xtwe4m],
.cycle-selector button[b-x410xtwe4m] {
    border: 0;
    cursor: pointer;
    font: inherit;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.segmented-control button[b-x410xtwe4m] {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 8px;
    color: var(--zn-gray-600, var(--zn-gray-500));
    background: transparent;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.segmented-control button span[b-x410xtwe4m] {
    margin-left: 3px;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.segmented-control button.is-active[b-x410xtwe4m] {
    color: var(--zn-white);
    background: var(--zn-accent-primary);
    box-shadow: 0 5px 12px -7px var(--zn-accent-primary);
}

.segmented-control button:focus-visible[b-x410xtwe4m],
.cycle-selector button:focus-visible[b-x410xtwe4m],
.promo-panel button:focus-visible[b-x410xtwe4m],
.promo-panel input:focus-visible[b-x410xtwe4m],
.package-card:focus-visible[b-x410xtwe4m],
.intake-footer__next:focus-visible[b-x410xtwe4m] {
    outline: 3px solid color-mix(in srgb, var(--zn-accent-primary) 32%, transparent);
    outline-offset: 2px;
}

.cycle-selector[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--zn-accent-primary) 13%, var(--zn-gray-100));
}

.cycle-selector > span[b-x410xtwe4m] {
    margin-right: 3px;
    color: var(--zn-gray-500);
    font-size: 0.76rem;
    font-weight: 650;
}

.cycle-selector button[b-x410xtwe4m] {
    padding: 7px 13px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 999px;
    color: var(--zn-gray-700);
    background: var(--zn-white);
    font-size: 0.78rem;
    font-weight: 700;
}

.cycle-selector button.is-active[b-x410xtwe4m] {
    color: color-mix(in srgb, var(--zn-accent-primary) 72%, var(--zn-gray-800));
    border-color: color-mix(in srgb, var(--zn-accent-primary) 62%, var(--zn-gray-200));
    background: color-mix(in srgb, var(--zn-accent-primary) 9%, var(--zn-white));
}

.promo-panel[b-x410xtwe4m] {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.2fr);
    gap: 10px 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--zn-gray-100);
    border-radius: 12px;
    background: var(--zn-gray-50);
}

.promo-panel__copy[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-panel__icon[b-x410xtwe4m] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    color: color-mix(in srgb, var(--zn-accent-primary) 75%, var(--zn-gray-800));
    background: color-mix(in srgb, var(--zn-accent-primary) 11%, var(--zn-white));
    font-weight: 800;
}

.promo-panel label[b-x410xtwe4m],
.promo-panel small[b-x410xtwe4m] {
    display: block;
}

.promo-panel label[b-x410xtwe4m] {
    color: var(--zn-gray-800);
    font-size: 0.8rem;
    font-weight: 750;
}

.promo-panel small[b-x410xtwe4m] {
    margin-top: 2px;
    color: var(--zn-gray-500);
    font-size: 0.7rem;
}

.promo-panel__form[b-x410xtwe4m] {
    display: flex;
    min-width: 0;
}

.promo-panel input[b-x410xtwe4m] {
    min-width: 0;
    flex: 1;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--zn-gray-200);
    border-right: 0;
    border-radius: 9px 0 0 9px;
    color: var(--zn-gray-800);
    background: var(--zn-white);
    font: inherit;
    font-size: 0.82rem;
}

.promo-panel input[b-x410xtwe4m]::placeholder {
    color: var(--zn-gray-500);
    opacity: 1;
}

.promo-panel button[b-x410xtwe4m] {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid var(--zn-accent-primary);
    border-radius: 0 9px 9px 0;
    color: var(--zn-white);
    background: var(--zn-accent-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
}

.promo-panel button:disabled[b-x410xtwe4m] {
    cursor: wait;
    opacity: 0.65;
}

.promo-panel__status[b-x410xtwe4m] {
    min-height: 1em;
    grid-column: 2;
    margin: -5px 0 0;
    color: var(--zn-gray-600, var(--zn-gray-500));
    font-size: 0.72rem;
}

.prepay-note[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--zn-color-success) 28%, var(--zn-gray-100));
    border-radius: 10px;
    color: color-mix(in srgb, var(--zn-color-success) 65%, var(--zn-gray-800));
    background: color-mix(in srgb, var(--zn-color-success) 7%, var(--zn-white));
    font-size: 0.8rem;
}

.prepay-note svg[b-x410xtwe4m] {
    flex: 0 0 auto;
}

.package-grid[b-x410xtwe4m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.package-card[b-x410xtwe4m] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 15px;
    color: var(--zn-gray-800);
    background: var(--zn-white);
    cursor: pointer;
    box-shadow: 0 3px 10px rgb(15 23 42 / 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.package-card:hover[b-x410xtwe4m] {
    border-color: color-mix(in srgb, var(--zn-accent-primary) 55%, var(--zn-gray-200));
    box-shadow: 0 14px 28px -20px rgb(15 23 42 / 0.42);
    transform: translateY(-2px);
}

.package-card.is-selected[b-x410xtwe4m] {
    border-color: var(--zn-accent-primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--zn-accent-primary) 4%, var(--zn-white)), var(--zn-white) 36%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zn-accent-primary) 14%, transparent), 0 18px 30px -24px var(--zn-accent-primary);
}

.package-card__topline[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.package-card__badge[b-x410xtwe4m] {
    padding: 4px 8px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--zn-accent-primary) 76%, var(--zn-gray-800));
    background: color-mix(in srgb, var(--zn-accent-primary) 10%, var(--zn-white));
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.package-card__badge--monthly[b-x410xtwe4m] {
    color: var(--zn-gray-600, var(--zn-gray-500));
    background: var(--zn-gray-100);
}

.package-card__radio[b-x410xtwe4m] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 2px solid var(--zn-gray-300, var(--zn-gray-200));
    border-radius: 50%;
    color: var(--zn-white);
    background: var(--zn-white);
}

.is-selected .package-card__radio[b-x410xtwe4m] {
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary);
}

.package-card h3[b-x410xtwe4m] {
    min-height: 3.1em;
    margin: 0 0 16px;
    color: var(--zn-gray-800);
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.38;
    letter-spacing: -0.016em;
}

.package-card__price[b-x410xtwe4m] {
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--zn-gray-100);
}

.package-card__price > span[b-x410xtwe4m] {
    display: block;
    margin-bottom: 3px;
    color: var(--zn-gray-500);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.package-card__price > div[b-x410xtwe4m] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.package-card__price strong[b-x410xtwe4m] {
    color: var(--zn-gray-900, var(--zn-black));
    font-size: 1.42rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.package-card__price s[b-x410xtwe4m] {
    color: var(--zn-gray-500);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.package-card__billing[b-x410xtwe4m] {
    min-height: 2.7em;
    margin: 0 0 14px;
    color: color-mix(in srgb, var(--zn-accent-primary) 72%, var(--zn-gray-800));
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.4;
}

.package-card__billing--prepay[b-x410xtwe4m] {
    color: color-mix(in srgb, var(--zn-color-success) 64%, var(--zn-gray-800));
}

/* CopeCart sub-plan options. Sits exactly where .package-card__billing would have been — it
   REPLACES that line (see the razor) rather than following it, so the top margin stays 0 and the
   block butts up under the amount-due block's rule. Deliberately quieter than the price above it:
   it qualifies what recurs, and must not out-shout the amount the card is actually selling.
   Only rendered for 2+ plans on a CopeCart-routed, non-multi-cycle product. */
.package-card__subplans[b-x410xtwe4m] {
    margin: 0 0 16px;
    padding: 9px 11px;
    border-left: 2px solid color-mix(in srgb, var(--zn-accent-primary) 42%, transparent);
    border-radius: 0 4px 4px 0;
    background: color-mix(in srgb, var(--zn-accent-primary) 6%, transparent);
}

.package-card__subplans-lead[b-x410xtwe4m] {
    margin: 0 0 6px;
    color: var(--zn-gray-600, var(--zn-gray-500));
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.35;
}

.package-card__subplans-list[b-x410xtwe4m] {
    margin: 0;
    padding: 0;
    color: var(--zn-gray-600, var(--zn-gray-500));
    font-size: 0.74rem;
    line-height: 1.45;
    list-style: none;
}

.package-card__subplans-list li[b-x410xtwe4m] {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 3px;
}

.package-card__subplans-list li:last-child[b-x410xtwe4m] {
    margin-bottom: 0;
}

/* "Option N" reads as the label for the plan string beside it, so it keeps a fixed width to
   stop the plan names from ragging, and does not wrap onto its own line. */
.package-card__subplans-label[b-x410xtwe4m] {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--zn-accent-primary) 72%, var(--zn-gray-800));
    font-weight: 750;
    white-space: nowrap;
}

.package-card__features[b-x410xtwe4m] {
    margin: 0 0 20px;
    padding: 0;
    color: var(--zn-gray-600, var(--zn-gray-500));
    font-size: 0.8rem;
    line-height: 1.48;
    list-style: none;
}

.package-card__features li[b-x410xtwe4m] {
    position: relative;
    margin-bottom: 8px;
    padding-left: 17px;
}

.package-card__features li[b-x410xtwe4m]::before {
    content: "";
    position: absolute;
    top: 0.53em;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--zn-accent-primary) 60%, var(--zn-gray-300));
}

.package-card__features[b-x410xtwe4m]  a {
    color: color-mix(in srgb, var(--zn-accent-primary) 70%, var(--zn-gray-800));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.package-card__choice[b-x410xtwe4m] {
    display: block;
    margin-top: auto;
    padding: 9px 12px;
    border: 1px solid var(--zn-gray-200);
    border-radius: 9px;
    color: var(--zn-gray-600, var(--zn-gray-500));
    text-align: center;
    font-size: 0.78rem;
    font-weight: 750;
}

.is-selected .package-card__choice[b-x410xtwe4m] {
    color: var(--zn-white);
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary);
}

.package-state[b-x410xtwe4m] {
    grid-column: 1 / -1;
    padding: 32px 20px;
    border: 1px dashed var(--zn-gray-200);
    border-radius: 14px;
    color: var(--zn-gray-600, var(--zn-gray-500));
    background: var(--zn-gray-50);
    text-align: center;
}

.package-state p[b-x410xtwe4m] {
    margin: 7px 0 0;
    font-size: 0.84rem;
}

.package-state__action[b-x410xtwe4m] {
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid var(--zn-accent-primary);
    border-radius: 8px;
    color: var(--zn-accent-primary);
    background: var(--zn-white);
    cursor: pointer;
    font-weight: 700;
}

.form-alert[b-x410xtwe4m] {
    margin-top: 18px;
}

.intake-footer[b-x410xtwe4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 30px calc(clamp(24px, 4vw, 42px) * -1) calc(clamp(24px, 4vw, 42px) * -1);
    padding: 18px clamp(24px, 4vw, 42px);
    border-top: 1px solid var(--zn-gray-100);
    background: color-mix(in srgb, var(--zn-gray-50) 70%, var(--zn-white));
}

.intake-footer__assurance[b-x410xtwe4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--zn-gray-500);
    font-size: 0.72rem;
}

.intake-footer__assurance svg[b-x410xtwe4m] {
    color: var(--zn-accent-primary);
    flex: 0 0 auto;
}

.intake-footer__next[b-x410xtwe4m] {
    display: inline-flex;
    min-width: 190px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    color: var(--zn-white);
    background: var(--zn-accent-primary);
    box-shadow: 0 10px 20px -13px var(--zn-accent-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.intake-footer__next:not(:disabled):hover[b-x410xtwe4m] {
    transform: translateY(-1px);
    box-shadow: 0 13px 23px -13px var(--zn-accent-primary);
}

.intake-footer__next:disabled[b-x410xtwe4m] {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

@media (max-width: 1040px) {
    .intake-layout[b-x410xtwe4m] {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 18px;
    }

    .package-grid[b-x410xtwe4m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-controls__row[b-x410xtwe4m] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .intake-page[b-x410xtwe4m] {
        padding: 16px 12px 28px;
    }

    .intake-layout[b-x410xtwe4m] {
        display: block;
    }

    .intake-progress[b-x410xtwe4m] {
        position: static;
        margin-bottom: 14px;
    }

    .progress-card[b-x410xtwe4m] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .progress-step[b-x410xtwe4m] {
        justify-content: center;
        padding: 11px 8px;
        border-right: 1px solid var(--zn-gray-100);
        border-bottom: 0;
    }

    .progress-step:last-child[b-x410xtwe4m] {
        border-right: 0;
    }

    .progress-step > span:last-child[b-x410xtwe4m] {
        display: none;
    }

    .progress-step--current[b-x410xtwe4m] {
        box-shadow: inset 0 3px 0 var(--zn-accent-primary);
    }

    .promo-panel[b-x410xtwe4m] {
        grid-template-columns: 1fr;
    }

    .promo-panel__status[b-x410xtwe4m] {
        grid-column: 1;
    }

    .package-grid[b-x410xtwe4m] {
        grid-template-columns: 1fr;
    }

    .package-card h3[b-x410xtwe4m],
    .package-card__billing[b-x410xtwe4m] {
        min-height: auto;
    }

    .intake-footer[b-x410xtwe4m] {
        align-items: stretch;
        flex-direction: column;
    }

    .intake-footer__next[b-x410xtwe4m] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .intake-card[b-x410xtwe4m] {
        border-radius: 15px;
        padding: 20px 16px;
    }

    .segmented-control[b-x410xtwe4m] {
        width: 100%;
    }

    .segmented-control button[b-x410xtwe4m] {
        flex: 1;
        padding-inline: 9px;
    }

    .cycle-selector[b-x410xtwe4m] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .promo-panel__form[b-x410xtwe4m] {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .intake-footer[b-x410xtwe4m] {
        margin-inline: -16px;
        margin-bottom: -20px;
        padding-inline: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .package-card[b-x410xtwe4m],
    .segmented-control button[b-x410xtwe4m],
    .cycle-selector button[b-x410xtwe4m],
    .intake-footer__next[b-x410xtwe4m] {
        transition: none;
    }
}
/* /Pages/Funnel/ClientIntakePaymentFinalPage.razor.rz.scp.css */
.payment-status-page[b-mupf6pa1qd] {
    min-height: 100vh;
    padding: 5rem 1rem 3rem;
    background:
        radial-gradient(circle at 50% 0%, var(--zn-accent-primary-glow-softer), transparent 32rem),
        var(--zn-form-bg);
}

.payment-status-card[b-mupf6pa1qd] {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-xl);
    background: var(--zn-white);
    box-shadow: var(--zn-shadow-md);
    text-align: center;
}

.payment-status[b-mupf6pa1qd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.payment-status__spinner[b-mupf6pa1qd],
.payment-status__icon[b-mupf6pa1qd] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
}

.payment-status__spinner[b-mupf6pa1qd] {
    border: 3px solid var(--zn-gray-200);
    border-top-color: var(--zn-accent-primary);
    animation: payment-status-spin-b-mupf6pa1qd 0.9s linear infinite;
}

.payment-status__icon[b-mupf6pa1qd] {
    background: var(--zn-color-success-bg);
    color: var(--zn-color-success);
    font-size: 1.5rem;
    font-weight: 850;
}

.payment-status--error .payment-status__icon[b-mupf6pa1qd] {
    background: var(--zn-color-error-bg);
    color: var(--zn-color-error);
}

.payment-status__icon--neutral[b-mupf6pa1qd] {
    background: var(--zn-accent-primary-light);
    color: var(--zn-accent-primary);
}

.payment-status__eyebrow[b-mupf6pa1qd] {
    color: var(--zn-accent-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payment-status h1[b-mupf6pa1qd] {
    margin: 0;
    color: var(--zn-gray-900);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
}

.payment-status--error h1[b-mupf6pa1qd] { color: var(--zn-color-error); }

.payment-status p[b-mupf6pa1qd] {
    max-width: 29rem;
    margin: 0;
    color: var(--zn-gray-600);
    font-size: 0.94rem;
    line-height: 1.6;
}

.payment-status__actions[b-mupf6pa1qd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.payment-status__button[b-mupf6pa1qd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1.3rem;
    border-radius: var(--zn-radius-md);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.payment-status__button--primary[b-mupf6pa1qd] {
    border: 1px solid var(--zn-accent-primary);
    background: var(--zn-accent-primary);
    color: var(--zn-white);
}

.payment-status__button--secondary[b-mupf6pa1qd] {
    border: 1px solid var(--zn-gray-300);
    background: var(--zn-white);
    color: var(--zn-gray-700);
}

.payment-status__text-button[b-mupf6pa1qd] {
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--zn-accent-primary-ink);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

@keyframes payment-status-spin-b-mupf6pa1qd { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    .payment-status-page[b-mupf6pa1qd] { padding: 2.5rem 0.75rem; }
    .payment-status-card[b-mupf6pa1qd] { padding: 2rem 1.25rem; }
    .payment-status__actions[b-mupf6pa1qd],
    .payment-status__button[b-mupf6pa1qd] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .payment-status__spinner[b-mupf6pa1qd] { animation-duration: 1.8s; }
}
/* /Pages/Funnel/ClientIntakePaymentPage.razor.rz.scp.css */
.payment-page[b-hkh9fsh0dr] {
    min-height: 100vh;
    padding: 3rem 1rem;
    background: var(--zn-form-bg);
}

.payment-page__layout[b-hkh9fsh0dr] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 2.25rem;
    max-width: 1240px;
    margin: 0 auto;
}

.payment-page__main[b-hkh9fsh0dr] {
    min-width: 0;
}

.payment-page__card[b-hkh9fsh0dr] {
    padding: 2rem 2rem 2.5rem;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-xl);
    background: var(--zn-white);
    box-shadow: var(--zn-shadow-md);
}

.payment-header[b-hkh9fsh0dr] {
    margin-bottom: 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--zn-gray-200);
}

.payment-header__eyebrow[b-hkh9fsh0dr] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--zn-accent-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payment-header h1[b-hkh9fsh0dr] {
    margin: 0 0 0.35rem;
    color: var(--zn-gray-900);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
}

.payment-header p[b-hkh9fsh0dr] {
    margin: 0;
    color: var(--zn-gray-600);
}

.payment-summary[b-hkh9fsh0dr],
.payment-total[b-hkh9fsh0dr] {
    padding: 1rem 1.1rem;
    border: 1px solid var(--zn-gray-200);
    background: var(--zn-gray-50);
}

.payment-summary[b-hkh9fsh0dr] {
    border-radius: var(--zn-radius-md) var(--zn-radius-md) 0 0;
}

.payment-summary__line[b-hkh9fsh0dr],
.payment-total[b-hkh9fsh0dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.payment-summary__line[b-hkh9fsh0dr] {
    color: var(--zn-gray-700);
    font-size: 0.95rem;
    font-weight: 600;
}

.payment-summary__detail[b-hkh9fsh0dr] {
    margin-top: 0.4rem;
    color: var(--zn-gray-600);
    font-size: 0.82rem;
}

.payment-summary__detail--success[b-hkh9fsh0dr] {
    color: #047857;
    font-weight: 700;
}

.payment-total[b-hkh9fsh0dr] {
    margin-bottom: 1.3rem;
    border-top: 0;
    border-radius: 0 0 var(--zn-radius-md) var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-800);
    font-weight: 750;
}

.payment-total strong[b-hkh9fsh0dr] {
    color: var(--zn-accent-primary-ink);
    font-size: 1.1rem;
}

.payment-tabs[b-hkh9fsh0dr] {
    display: flex;
    gap: 0.25rem;
    margin: 1.35rem 0 1.1rem;
    padding: 0.25rem;
    border-radius: var(--zn-radius-md);
    background: var(--zn-gray-200);
}

.payment-tab[b-hkh9fsh0dr] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.8rem;
    padding: 0.65rem 0.8rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--zn-gray-600);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.payment-tab:hover[b-hkh9fsh0dr] {
    color: var(--zn-gray-900);
}

.payment-tab.is-active[b-hkh9fsh0dr] {
    background: var(--zn-white);
    color: var(--zn-accent-primary-ink);
    box-shadow: 0 1px 4px rgb(15 23 42 / 0.14);
}

.payment-tab:focus-visible[b-hkh9fsh0dr],
.payment-button:focus-visible[b-hkh9fsh0dr],
.payment-previous:focus-visible[b-hkh9fsh0dr] {
    outline: 3px solid var(--zn-accent-primary-glow-soft);
    outline-offset: 2px;
}

.payment-method[b-hkh9fsh0dr] {
    padding: 1.2rem 0 0.25rem;
    text-align: center;
}

.payment-method__icon[b-hkh9fsh0dr] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
    color: var(--zn-gray-500);
}

.payment-method__cards[b-hkh9fsh0dr] {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto 0.75rem;
}

.payment-method h3[b-hkh9fsh0dr] {
    margin: 0 0 0.35rem;
    color: var(--zn-gray-900);
    font-size: 1.15rem;
}

.payment-method__intro[b-hkh9fsh0dr] {
    margin: 0 auto 1.25rem;
    color: var(--zn-gray-600);
    font-size: 0.88rem;
    line-height: 1.5;
}

.payment-field[b-hkh9fsh0dr] {
    flex: 1;
    margin-bottom: 1rem;
    text-align: left;
}

.payment-field-row[b-hkh9fsh0dr] {
    display: flex;
    gap: 0.8rem;
}

.payment-field label[b-hkh9fsh0dr] {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--zn-gray-700);
    font-size: 0.85rem;
    font-weight: 700;
}

.payment-input[b-hkh9fsh0dr] {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid var(--zn-gray-500);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-900);
    font: inherit;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

.payment-input:hover[b-hkh9fsh0dr] {
    border-color: var(--zn-gray-600);
}

.payment-input:focus[b-hkh9fsh0dr] {
    outline: none;
    border-color: var(--zn-accent-primary);
    box-shadow: 0 0 0 4px var(--zn-accent-primary-glow-soft);
}

.payment-alert[b-hkh9fsh0dr] {
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid;
    border-radius: var(--zn-radius-md);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
}

.payment-alert--error[b-hkh9fsh0dr] {
    border-color: var(--zn-color-error);
    background: var(--zn-color-error-bg);
    color: var(--zn-color-error);
}

.payment-alert--info[b-hkh9fsh0dr] {
    border-color: var(--zn-color-info);
    background: var(--zn-color-info-bg);
    color: var(--zn-color-info);
    font-weight: 650;
}

.payment-consent[b-hkh9fsh0dr] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    padding: 0.9rem;
    border: 1px solid var(--zn-gray-300);
    border-radius: var(--zn-radius-md);
    background: var(--zn-gray-50);
    color: var(--zn-gray-700);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.payment-consent input[b-hkh9fsh0dr] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--zn-color-success);
}

.payment-button-row[b-hkh9fsh0dr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.payment-button[b-hkh9fsh0dr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: min(20rem, 100%);
    min-height: 3rem;
    padding: 0.7rem 1.5rem;
    border: 0;
    border-radius: var(--zn-radius-md);
    color: var(--zn-white);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 18px -12px currentColor;
}

.payment-button--primary[b-hkh9fsh0dr] { background: var(--zn-accent-primary); }
.payment-button--success[b-hkh9fsh0dr] { min-width: 11rem; background: var(--zn-color-success); }
.payment-button--danger[b-hkh9fsh0dr] { min-width: 11rem; background: var(--zn-color-error); }
.payment-button--wide[b-hkh9fsh0dr] { width: 100%; }

.payment-button:hover:not(:disabled)[b-hkh9fsh0dr] { filter: brightness(0.96); }

.payment-button:disabled[b-hkh9fsh0dr] {
    cursor: not-allowed;
    opacity: 0.55;
}

.payment-secure-note[b-hkh9fsh0dr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    color: var(--zn-gray-500);
    font-size: 0.78rem;
}

.crypto-notice[b-hkh9fsh0dr] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.3rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--zn-accent-primary-pale);
    border-radius: var(--zn-radius-md);
    background: var(--zn-accent-primary-light);
    color: var(--zn-accent-primary-ink);
    text-align: left;
}

.crypto-notice > span[b-hkh9fsh0dr] { font-size: 1.1rem; }
.crypto-notice p[b-hkh9fsh0dr] { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.crypto-notice p + p[b-hkh9fsh0dr] { margin-top: 0.4rem; }

.payment-actions[b-hkh9fsh0dr] {
    margin-top: 0.8rem;
}

.payment-previous[b-hkh9fsh0dr] {
    min-width: 12rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.15rem;
    border: 1px solid var(--zn-gray-300);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-700);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.payment-processor-disclaimer[b-hkh9fsh0dr] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--zn-color-info) 32%, transparent);
    border-radius: 8px;
    background: var(--zn-color-info-bg);
    color: var(--zn-color-info);
    text-align: left;
}

.payment-processor-disclaimer__icon[b-hkh9fsh0dr] {
    flex: none;
    margin-top: 0.08rem;
}

.payment-processor-disclaimer p[b-hkh9fsh0dr] {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.55;
}

@media (max-width: 520px) {
    .payment-processor-disclaimer[b-hkh9fsh0dr] {
        gap: 0.55rem;
        padding: 0.8rem 0.85rem;
    }
}

@media (max-width: 960px) {
    .payment-page__layout[b-hkh9fsh0dr] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .payment-page[b-hkh9fsh0dr] {
        padding: 1.5rem 0.75rem;
    }

    .payment-page__card[b-hkh9fsh0dr] {
        padding: 1.25rem;
    }

    .payment-tabs[b-hkh9fsh0dr],
    .payment-field-row[b-hkh9fsh0dr] {
        flex-direction: column;
    }

    .payment-summary__line[b-hkh9fsh0dr],
    .payment-total[b-hkh9fsh0dr] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .payment-button[b-hkh9fsh0dr],
    .payment-previous[b-hkh9fsh0dr] {
        width: 100%;
        min-width: 0;
    }
}
/* /Pages/Funnel/ClientIntakeSignPage.razor.rz.scp.css */
/* Signature-step UX: purple means "interactive/current"; green means "completed".
   Keeping those roles separate makes a long legal step scannable without relying on copy. */

.signature-page[b-q2b8nyi2ne] {
    min-height: 100vh;
    padding: 3rem 1rem;
    background: var(--zn-form-bg);
}

.signature-page__layout[b-q2b8nyi2ne] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: flex-start;
    gap: 2.25rem;
    max-width: 1240px;
    margin: 0 auto;
}

.signature-page__main[b-q2b8nyi2ne] {
    flex: 1;
    min-width: 0;
}

.signature-page__card[b-q2b8nyi2ne] {
    padding: 2rem 2rem 2.5rem;
    border: 1px solid var(--zn-gray-200);
    border-radius: var(--zn-radius-xl);
    background: var(--zn-white);
    box-shadow: var(--zn-shadow-md);
}

.signature-header[b-q2b8nyi2ne] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--zn-gray-200);
}

.signature-header__eyebrow[b-q2b8nyi2ne] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--zn-accent-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.signature-header h1[b-q2b8nyi2ne] {
    margin: 0 0 0.35rem;
    color: var(--zn-gray-900);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
}

.signature-header p[b-q2b8nyi2ne] {
    margin: 0;
    color: var(--zn-gray-600);
    line-height: 1.55;
}

.agreement-error[b-q2b8nyi2ne],
.signature-inline-actions[b-q2b8nyi2ne],
.signature-actions[b-q2b8nyi2ne],
.signature-date-row[b-q2b8nyi2ne] {
    display: flex;
    gap: 0.75rem;
}

.agreement-error[b-q2b8nyi2ne] {
    align-items: center;
    margin-bottom: 1rem;
}

.signature-label[b-q2b8nyi2ne],
.signature-subheading[b-q2b8nyi2ne] {
    display: block;
    color: var(--zn-gray-800);
    font-weight: 700;
}

.signature-subheading[b-q2b8nyi2ne] {
    margin: 0.25rem 0 0.65rem;
}

.signature-style-list[b-q2b8nyi2ne] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.signature-inline-actions[b-q2b8nyi2ne] {
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.signature-secondary-button[b-q2b8nyi2ne],
.signature-actions__previous[b-q2b8nyi2ne],
.signature-actions__next[b-q2b8nyi2ne] {
    min-height: 2.75rem;
    padding: 0.65rem 1.15rem;
    border-radius: var(--zn-radius-md);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.signature-secondary-button[b-q2b8nyi2ne],
.signature-actions__previous[b-q2b8nyi2ne] {
    border: 1px solid var(--zn-gray-300);
    background: var(--zn-white);
    color: var(--zn-gray-700);
}

.signature-secondary-button:hover[b-q2b8nyi2ne],
.signature-actions__previous:hover[b-q2b8nyi2ne] {
    border-color: var(--zn-gray-500);
    background: var(--zn-gray-50);
}

.signature-upload-control[b-q2b8nyi2ne] {
    margin-bottom: 0.8rem;
    padding: 0.9rem;
    border: 1px dashed var(--zn-gray-400);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
}

.signature-date-row[b-q2b8nyi2ne] {
    align-items: stretch;
    margin-top: 1.25rem;
}

.signature-date-field[b-q2b8nyi2ne],
.signature-date-preview[b-q2b8nyi2ne] {
    flex: 1;
    min-width: 0;
}

.signature-date-preview[b-q2b8nyi2ne] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    border: 1px dashed var(--zn-gray-300);
    border-radius: var(--zn-radius-md);
    background: var(--zn-gray-50);
}

.signature-save-error[b-q2b8nyi2ne] {
    margin-top: 1rem;
}

.signature-actions[b-q2b8nyi2ne] {
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--zn-gray-200);
}

.signature-actions__previous[b-q2b8nyi2ne],
.signature-actions__next[b-q2b8nyi2ne] {
    min-width: 12rem;
}

.signature-actions__next[b-q2b8nyi2ne] {
    border: 1px solid var(--zn-accent-primary);
    background: var(--zn-accent-primary);
    color: var(--zn-white);
    box-shadow: 0 8px 18px -12px var(--zn-accent-primary);
}

.signature-actions__next:hover[b-q2b8nyi2ne] {
    filter: brightness(0.96);
}

.signature-actions button:disabled[b-q2b8nyi2ne] {
    cursor: not-allowed;
    opacity: 0.55;
}

.agreement-progress[b-q2b8nyi2ne] {
    margin-bottom: 0.875rem;
}

.agreement-progress__copy[b-q2b8nyi2ne] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.agreement-progress__copy p[b-q2b8nyi2ne],
.agreement-progress__copy span[b-q2b8nyi2ne] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--zn-gray-700);
}

.agreement-progress__copy span[b-q2b8nyi2ne] {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--zn-gray-600);
    font-variant-numeric: tabular-nums;
}

.agreement-progress__track[b-q2b8nyi2ne] {
    height: 5px;
    overflow: hidden;
    border-radius: var(--zn-radius-full);
    background: var(--zn-gray-200);
}

.agreement-progress__track span[b-q2b8nyi2ne] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--zn-color-success);
    transition: width 0.22s ease;
}

.agreement-list[b-q2b8nyi2ne] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.agreement-approval[b-q2b8nyi2ne] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    min-height: 3.25rem;
    width: 100%;
    padding: 0.7rem 0.875rem;
    border: 1px solid var(--zn-gray-500);
    border-radius: var(--zn-radius-md);
    background: #fbfcff;
    color: var(--zn-gray-700);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.agreement-approval:hover[b-q2b8nyi2ne] {
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary-light);
    box-shadow: 0 5px 14px -10px var(--zn-accent-primary);
}

.agreement-approval:focus-visible[b-q2b8nyi2ne] {
    outline: none;
    border-color: var(--zn-accent-primary);
    box-shadow: 0 0 0 4px var(--zn-accent-primary-glow-soft);
}

.agreement-approval.is-complete[b-q2b8nyi2ne] {
    border-color: var(--zn-color-success);
    background: var(--zn-color-success);
    color: var(--zn-white);
    box-shadow: 0 7px 16px -12px var(--zn-color-success);
}

.agreement-approval.is-complete:hover[b-q2b8nyi2ne] {
    border-color: #059669;
    background: #059669;
}

.agreement-approval__icon[b-q2b8nyi2ne] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    border: 1px solid currentColor;
    border-radius: var(--zn-radius-full);
    font-size: 0.75rem;
    line-height: 1;
}

.signature-disclaimer[b-q2b8nyi2ne] {
    margin: 1.25rem 0;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--zn-gray-300);
    background: var(--zn-gray-50);
}

.signature-disclaimer p[b-q2b8nyi2ne] {
    margin: 0;
}

.signature-builder[b-q2b8nyi2ne] {
    padding: 1.25rem;
    border: 1px solid var(--zn-accent-primary-pale);
    border-radius: var(--zn-radius-lg);
    background: color-mix(in srgb, var(--zn-accent-primary) 6%, var(--zn-white));
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.signature-builder.is-complete[b-q2b8nyi2ne] {
    border-color: var(--zn-accent-primary-pale);
    background: color-mix(in srgb, var(--zn-accent-primary) 6%, var(--zn-white));
    box-shadow: inset 4px 0 0 var(--zn-color-success), 0 8px 18px -16px var(--zn-accent-primary);
}

.signature-tabs[b-q2b8nyi2ne] {
    display: flex;
    gap: 0.25rem;
    margin: 0.75rem 0 1rem;
    padding: 0.25rem;
    border-radius: var(--zn-radius-md);
    background: var(--zn-gray-200);
}

.signature-tabs button[b-q2b8nyi2ne] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--zn-gray-600);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.signature-tabs button:hover[b-q2b8nyi2ne] {
    color: var(--zn-gray-900);
}

.signature-tabs button.is-active[b-q2b8nyi2ne] {
    background: var(--zn-white);
    color: var(--zn-accent-primary-ink);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.13);
}

.signature-tabs button:focus-visible[b-q2b8nyi2ne] {
    outline: 2px solid var(--zn-accent-primary);
    outline-offset: 1px;
}

.signature-field[b-q2b8nyi2ne] {
    width: 100%;
    min-height: 3.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--zn-gray-500);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-900);
    font-size: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.signature-field:hover:not(:focus)[b-q2b8nyi2ne] {
    border-color: var(--zn-gray-600);
}

.signature-field:focus[b-q2b8nyi2ne] {
    outline: none;
    border-color: var(--zn-accent-primary);
    box-shadow: 0 0 0 4px var(--zn-accent-primary-glow-soft);
}

.signature-field.is-complete[b-q2b8nyi2ne] {
    border-color: var(--zn-color-success);
    background: var(--zn-color-success-bg);
}

.signature-field.is-complete:focus[b-q2b8nyi2ne] {
    border-color: var(--zn-color-success);
    box-shadow: 0 0 0 4px rgb(16 185 129 / 0.18);
}

.signature-style-option[b-q2b8nyi2ne] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--zn-gray-400);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-800);
    font-size: 1rem;
    cursor: pointer;
}

.signature-style-option:hover[b-q2b8nyi2ne] {
    border-color: var(--zn-accent-primary);
}

.signature-style-option.is-selected[b-q2b8nyi2ne] {
    border: 2px solid var(--zn-accent-primary);
    background: var(--zn-white);
    color: var(--zn-accent-primary-ink);
    box-shadow: 0 0 0 3px var(--zn-accent-primary-glow-softer);
}

.signature-style-option:focus-visible[b-q2b8nyi2ne] {
    outline: 3px solid var(--zn-accent-primary-glow-soft);
    outline-offset: 2px;
}

.signature-preview[b-q2b8nyi2ne] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--zn-gray-400);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
}

.signature-preview.is-complete[b-q2b8nyi2ne] {
    border-color: var(--zn-color-success);
    background: var(--zn-white);
    box-shadow: inset 4px 0 0 var(--zn-color-success);
}

.signature-preview--tall[b-q2b8nyi2ne] {
    min-height: 200px;
}

.signature-preview--draw[b-q2b8nyi2ne] {
    position: relative;
    padding: 0;
}

.signature-upload-empty[b-q2b8nyi2ne] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 2rem;
    border: 1px dashed var(--zn-gray-500);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    color: var(--zn-gray-600);
    text-align: center;
}

.signature-date[b-q2b8nyi2ne] {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .signature-page__layout[b-q2b8nyi2ne] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .signature-page[b-q2b8nyi2ne] {
        padding: 1.5rem 0.75rem;
    }

    .signature-page__card[b-q2b8nyi2ne] {
        padding: 1.25rem;
    }

    .agreement-list[b-q2b8nyi2ne] {
        grid-template-columns: 1fr;
    }

    .agreement-progress__copy[b-q2b8nyi2ne] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .signature-tabs[b-q2b8nyi2ne] {
        flex-direction: column;
    }

    .signature-date-row[b-q2b8nyi2ne],
    .signature-actions[b-q2b8nyi2ne] {
        flex-direction: column;
    }

    .signature-actions__previous[b-q2b8nyi2ne],
    .signature-actions__next[b-q2b8nyi2ne] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agreement-progress__track span[b-q2b8nyi2ne],
    .agreement-approval[b-q2b8nyi2ne],
    .signature-builder[b-q2b8nyi2ne],
    .signature-field[b-q2b8nyi2ne] {
        transition: none;
    }
}
/* /Pages/Funnel/StartNowPage.razor.rz.scp.css */
/*
 * ZN-1155 — the account-creation consent block on /start-now.
 *
 * Four consents (18+, privacy/Terms of Use, marketing email, marketing SMS), each
 * required and each gating submission. They previously rendered as four bare
 * checkbox+text lines butted straight against the email inputs, with the two long
 * ones wrapping to ~150 characters. This gives the block its own territory below a
 * rule, puts every consent on a bounded, hit-targetable row, and shows the member
 * which ones they have already satisfied.
 *
 * Funnel pages are light-themed and use the --zn-* token set, not the dark app tokens.
 */

.consent-group[b-gfn3qdcbqc] {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--zn-gray-200);
}

/* The original gray-200 outline nearly disappeared against the white card. Inputs now
   have a quiet surface tint and a full 3:1 resting edge, while purple stays reserved for
   the active/focus state. ::deep is required because Blazor input components render the
   actual input/select element below this component's CSS-isolation boundary. */
.start-now-form[b-gfn3qdcbqc]  .form-input-lg {
    min-height: 3.25rem;
    border-color: var(--zn-gray-500);
    background: #fbfcff;
    color: var(--zn-gray-900);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.7);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.start-now-form[b-gfn3qdcbqc]  .form-input-lg:hover:not(:focus) {
    border-color: var(--zn-gray-600);
    background: var(--zn-white);
}

.start-now-form[b-gfn3qdcbqc]  .form-input-lg:focus {
    border-color: var(--zn-accent-primary);
    background: var(--zn-white);
    box-shadow: 0 0 0 4px var(--zn-accent-primary-glow-soft);
}

.start-now-form[b-gfn3qdcbqc]  .form-input-lg::placeholder {
    color: var(--zn-gray-500);
    opacity: 1;
}

/* MudAutocomplete is another component boundary and has its own outlined field. Match
   the native controls so Country no longer looks like the one disabled/light field. */
.start-now-form[b-gfn3qdcbqc]  .form-autocomplete .mud-input-outlined-border {
    border-color: var(--zn-gray-500) !important;
}

.start-now-form[b-gfn3qdcbqc]  .form-autocomplete .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--zn-gray-600) !important;
}

.start-now-form[b-gfn3qdcbqc]  .form-autocomplete .mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: var(--zn-accent-primary) !important;
    border-width: 1px !important;
}

.start-now-form[b-gfn3qdcbqc]  .form-autocomplete .mud-input.mud-input-outlined.mud-input-focus {
    box-shadow: 0 0 0 4px var(--zn-accent-primary-glow-soft);
}

.consent-group__intro[b-gfn3qdcbqc] {
    margin: 0 0 1.25rem;
    /* Legal copy needs a reading measure. The card is 1024px wide, so without this
       the intro and the two long consents run well past a comfortable line. */
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--zn-gray-500);
}

/* Each consent is a decision, so it gets a real target: full row, generous padding,
   and a visible resting edge rather than a bare checkbox floating in body copy. */
.consent-row[b-gfn3qdcbqc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--zn-gray-300);
    border-radius: var(--zn-radius-md);
    background: var(--zn-white);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.consent-row:hover[b-gfn3qdcbqc] {
    border-color: var(--zn-accent-primary);
    background: var(--zn-accent-primary-light);
}

/* Satisfied state. :has() is a progressive enhancement — without it the row keeps its
   resting style and the checkbox itself still shows the state, so nothing is lost. */
.consent-row:has(input:checked)[b-gfn3qdcbqc] {
    border-color: var(--zn-color-success);
    background: var(--zn-color-success-bg);
    box-shadow: 0 4px 12px -10px var(--zn-color-success);
}

.consent-row:has(input:checked) .consent-row__text[b-gfn3qdcbqc] {
    color: var(--zn-gray-800);
}

.consent-row:has(input:checked)[b-gfn3qdcbqc]  .form-checkbox {
    border-color: #047857;
    background-color: #047857;
    box-shadow: 0 0 0 3px var(--zn-color-success-bg);
}

/* The ring goes on the ROW so a keyboard user gets the same target the mouse has.
   funnel.css draws these checkboxes with appearance:none, so the UA focus ring on the
   control is unreliable here. */
.consent-row:has(input:focus-visible)[b-gfn3qdcbqc] {
    box-shadow: 0 0 0 3px var(--zn-accent-primary-glow-soft);
    border-color: var(--zn-accent-primary);
}

.consent-row[b-gfn3qdcbqc]  .form-checkbox {
    /* Optically centres the box against the first line of 0.9375rem/1.6 text without
       the per-instance inline margin the markup used to carry. InputCheckbox renders
       across a Blazor component boundary, so ::deep is required for this rule to reach
       the actual input rather than stopping at the label. */
    margin-top: 0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--zn-gray-500);
    background-color: var(--zn-white);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.consent-row:hover[b-gfn3qdcbqc]  .form-checkbox:not(:checked) {
    border-color: var(--zn-accent-primary);
}

.consent-row__text[b-gfn3qdcbqc] {
    max-width: 68ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zn-gray-700);
}

/* --zn-accent-primary (#8b5cf6) is only 3.6:1 on white — fine for borders and fills,
   but it fails the 4.5:1 text minimum, and these links sit inside body copy. The ink
   token is the darkened accent for text use (see funnel.css). Underlined too, so the
   link never depends on hue alone. */
.consent-row__link[b-gfn3qdcbqc] {
    color: var(--zn-accent-primary-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.consent-row__link:hover[b-gfn3qdcbqc] {
    text-decoration-thickness: 2px;
}

.consent-row__link:focus-visible[b-gfn3qdcbqc] {
    outline: 2px solid var(--zn-accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The per-consent validation message belongs to the row above it, so pull it in
   under that row rather than leaving a full row-gap of dead space. */
.consent-group .form-error[b-gfn3qdcbqc] {
    margin: -0.25rem 0 0.75rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .consent-row[b-gfn3qdcbqc] {
        transition: none;
    }
}

@media (max-width: 640px) {
    .consent-row[b-gfn3qdcbqc] {
        padding: 0.75rem 0.875rem;
    }
}
/* /Pages/GiftedOrderPage.razor.rz.scp.css */
/* Gifted Order Container */
.gifted-order-container[b-ajm9y0w5n6] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Error / Denied State */
.error-state[b-ajm9y0w5n6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.error-state h3[b-ajm9y0w5n6] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.error-state p[b-ajm9y0w5n6] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.order-title-row[b-ajm9y0w5n6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.order-title-row h1[b-ajm9y0w5n6] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Status Badge Variants */
.status-badge.status-cart[b-ajm9y0w5n6] {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.status-badge.status-pending[b-ajm9y0w5n6] {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge.status-delivered[b-ajm9y0w5n6] {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.status-badge.status-failed[b-ajm9y0w5n6],
.status-badge.status-refunded[b-ajm9y0w5n6] {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.status-badge.status-checkout[b-ajm9y0w5n6] {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

.order-content[b-ajm9y0w5n6] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Items Table */
.items-table[b-ajm9y0w5n6] {
    width: 100%;
    border-collapse: collapse;
}

.items-table th[b-ajm9y0w5n6] {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-color);
}

.items-table td[b-ajm9y0w5n6] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.items-table tbody tr:last-child td[b-ajm9y0w5n6] {
    border-bottom: none;
}

.text-center[b-ajm9y0w5n6] {
    text-align: center;
}

.text-right[b-ajm9y0w5n6] {
    text-align: right;
}

/* Order Summary */
.summary-list[b-ajm9y0w5n6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-row[b-ajm9y0w5n6] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--text-secondary);
}

.summary-row.total[b-ajm9y0w5n6] {
    border-top: 2px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-primary);
}

/* Back Button */
.back-btn[b-ajm9y0w5n6] {
    padding: 0.75rem 1.5rem;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.back-btn:hover[b-ajm9y0w5n6] {
    background-color: var(--accent-primary-hover);
}

/* Back to Billing History Link */
.back-link[b-ajm9y0w5n6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.back-link:hover[b-ajm9y0w5n6] {
    color: var(--accent-primary-hover);
}

.back-link-bottom[b-ajm9y0w5n6] {
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gifted-order-container[b-ajm9y0w5n6] {
        padding: 1rem;
    }

    .order-title-row[b-ajm9y0w5n6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .items-table[b-ajm9y0w5n6] {
        font-size: 0.9rem;
    }

    .items-table th[b-ajm9y0w5n6],
    .items-table td[b-ajm9y0w5n6] {
        padding: 0.5rem;
    }
}
/* /Pages/MenuPage.razor.rz.scp.css */
/* Menu rows are a mix of <a>, <NavLink> (renders <a>) and <button>. NavLink
   output does not carry this page's scoped-CSS attribute, so all inner
   selectors reach through ::deep from the scoped .mmenu-page container. */
.mmenu-page[b-7e9be1yyvy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 4px;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-intro {
    margin-bottom: 8px;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-intro-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-intro-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    color: var(--text-primary);
    text-decoration: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row:hover {
    background: var(--bg-card-hover);
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row-icon svg {
    width: 22px;
    height: 22px;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row-label {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Highlighted (accent) rows — BP / Member updates. */
.mmenu-page[b-7e9be1yyvy]  .mmenu-row--accent {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent, #fff);
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row--accent:hover {
    background: var(--accent-primary-hover, var(--accent-primary));
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-row--accent .mmenu-row-icon,
.mmenu-page[b-7e9be1yyvy]  .mmenu-row--accent .mmenu-row-chevron {
    color: var(--text-on-accent, #fff);
}

/* Sign Out — centered, danger-tinted. */
.mmenu-page[b-7e9be1yyvy]  .mmenu-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    color: var(--color-error);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-signout:hover {
    background: var(--bg-card-hover);
}

.mmenu-page[b-7e9be1yyvy]  .mmenu-signout svg {
    width: 20px;
    height: 20px;
}
/* /Pages/MobileSettings.razor.rz.scp.css */
.mobile-settings-page[b-k2k4snw8mj] {
    padding: 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

.page-header h1[b-k2k4snw8mj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.settings-card[b-k2k4snw8mj] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.25rem;
}

.settings-card h2[b-k2k4snw8mj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.settings-card p[b-k2k4snw8mj] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.settings-hint[b-k2k4snw8mj] {
    color: var(--accent-primary-tint) !important;
    font-size: 0.9rem;
}
/* /Pages/MobileSupportPage.razor.rz.scp.css */
.msupport-page[b-oihadk3ggo] {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
}

/* Header — back affordance pinned left, title centered. */
.msupport-header[b-oihadk3ggo] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-bottom: 1px solid var(--border-primary);
}

.msupport-back[b-oihadk3ggo] {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.msupport-back svg[b-oihadk3ggo] {
    width: 20px;
    height: 20px;
}

.msupport-title[b-oihadk3ggo] {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Body — centered contact card. */
.msupport-body[b-oihadk3ggo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 56px 24px;
}

.msupport-icon[b-oihadk3ggo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
}

.msupport-icon svg[b-oihadk3ggo] {
    width: 44px;
    height: 44px;
}

.msupport-heading[b-oihadk3ggo] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.msupport-text[b-oihadk3ggo] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.msupport-email[b-oihadk3ggo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--text-on-accent, #fff);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.msupport-email:hover[b-oihadk3ggo] {
    background: var(--accent-primary-hover, var(--accent-primary));
}
/* /Pages/MyTeam.razor.rz.scp.css */
.team-container[b-qsl249hq79]{
    max-width: 98%;
    margin: 0 auto;
}

/* MudBlazor Select overrides for pagination */
.team-container[b-qsl249hq79]  .filter-select .mud-input-outlined-border {
    border-radius: 6px;
    border-color: var(--border-input);
}
.team-container[b-qsl249hq79]  .filter-select .mud-select-input {
    padding: 6px 12px;
    font-size: 14px;
    min-height: unset;
}
.team-container[b-qsl249hq79]  .pagination-select {
    width: 65px;
}
.team-container[b-qsl249hq79]  .page-input-container .filter-select {
    width: 65px;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-control {
    margin: 0;
    padding: 0;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-control-input-container {
    margin: 0;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-helper-text {
    display: none;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-select {
    height: 32px;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-select .mud-input-outlined-border {
    height: 32px;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-select .mud-select-input {
    padding: 4px 8px;
    min-height: unset;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-slot {
    padding: 0;
    overflow: visible;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-adornment-end {
    margin-left: 0;
}
.team-container[b-qsl249hq79]  .pagination-container .mud-input-label {
    display: none;
}

/* MudSelect / MudTextField filter overrides */
.team-container[b-qsl249hq79]  .search-filter .mud-input,
.team-container[b-qsl249hq79]  .search-filter input,
.team-container[b-qsl249hq79]  .filter-select .mud-input,
.team-container[b-qsl249hq79]  .filter-select .mud-select-input,
.team-container[b-qsl249hq79]  .type-select .mud-input,
.team-container[b-qsl249hq79]  .date-filter .mud-input {
    color: var(--text-primary) !important;
}
.team-container[b-qsl249hq79]  .search-filter .mud-input-outlined-border,
.team-container[b-qsl249hq79]  .filter-select .mud-input-outlined-border,
.team-container[b-qsl249hq79]  .type-select .mud-input-outlined-border,
.team-container[b-qsl249hq79]  .date-filter .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}
.team-container[b-qsl249hq79]  .search-filter input::placeholder,
.team-container[b-qsl249hq79]  .date-filter input::placeholder {
    color: var(--text-tertiary) !important;
}
.team-container[b-qsl249hq79]  .filter-select .mud-input-label,
.team-container[b-qsl249hq79]  .type-select .mud-input-label {
    color: var(--text-tertiary) !important;
}
.team-container[b-qsl249hq79]  .pagination-select .mud-input,
.team-container[b-qsl249hq79]  .pagination-select .mud-select-input {
    color: var(--text-primary) !important;
}
.team-container[b-qsl249hq79]  .pagination-select .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}
.team-container[b-qsl249hq79]  .page-input-container .mud-input,
.team-container[b-qsl249hq79]  .page-input-container .mud-select-input {
    color: var(--text-primary) !important;
}
.team-container[b-qsl249hq79]  .page-input-container .mud-input-outlined-border {
    border-color: var(--border-input) !important;
}

.team-title-container[b-qsl249hq79]{
    margin: 20px 0 16px 0;
}
.team-title[b-qsl249hq79] {
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 0;
}

/* ==================== Holding Tank ==================== */
.members-section[b-qsl249hq79] {
    padding: 31px 48px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--color-info-bg);
    box-shadow: var(--shadow-card);
    margin-bottom: 28px;
}
.member-title-container[b-qsl249hq79]{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.member-section-content[b-qsl249hq79]{
    margin-top: 28px;
}
.member-title-container h2[b-qsl249hq79] {
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 0;
}
.member-title-container button[b-qsl249hq79] {
    border: none;
    background-color: transparent;
    color: var(--color-warning);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration-line: underline;
}
.members-list[b-qsl249hq79] {
    display: flex;
    flex-wrap: wrap;
}
.members-item[b-qsl249hq79]{
    width: 390px;
}
.members-item:not(:last-child)[b-qsl249hq79]{
    margin-right: 12px;
    margin-bottom: 12px;
}
.member-info[b-qsl249hq79]{
    margin-bottom: 32px;
}
.member-info-item span[b-qsl249hq79] {
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.members-item h3[b-qsl249hq79] {
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 8px;
}
.id-info[b-qsl249hq79] {
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
.sponsor-container[b-qsl249hq79] {
    display: flex;
    align-items: center;
}
.sponsor-container input[type="text"][b-qsl249hq79] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 20px;
    transition: border-color 0.2s;
}
.sponsor-container input[type="text"]:focus[b-qsl249hq79] {
    border-color: var(--accent-primary);
    outline: none;
}
.place-btn[b-qsl249hq79] {
    font-family: "Titillium Web", sans-serif;
    border-radius: 8px;
    border: none;
    background-color: var(--btn-primary-bg);
    padding: 8px 16px;
    color: var(--btn-primary-text);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 100px;
    margin-left: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.place-btn:hover[b-qsl249hq79] {
    background-color: var(--btn-primary-bg-hover);
}
.place-btn:disabled[b-qsl249hq79] {
    opacity: 0.6;
    cursor: not-allowed;
}
.place-btn-secondary[b-qsl249hq79] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}
.place-btn-secondary:hover[b-qsl249hq79] {
    background-color: var(--btn-secondary-bg-hover);
}
.members-section p[b-qsl249hq79]{
    color: var(--text-secondary);
}
.members-message-succes-green[b-qsl249hq79] {
    color: var(--color-success) !important;
    font-weight: 600;
}
.members-message-succes[b-qsl249hq79] {
    color: var(--text-secondary) !important;
}

/* Holding Tank Countdown Badge */
.tank-countdown-badge[b-qsl249hq79] {
    display: inline-block;
    padding: 2px 8px;
    border: 1.5px solid var(--color-success);
    border-radius: 6px;
    font-family: "Titillium Web", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-success);
    margin-left: 8px;
    white-space: nowrap;
}

/* ==================== Simplified View Layout ==================== */
.simplified-view[b-qsl249hq79] {
    margin-top: 0;
}

/* Holding Tank info cards — replaces the old pill buttons per ZN ticket
   restyle. Two cards side-by-side; the My Organization Holding Tank card
   is non-interactive (display-only label, matches the previous disabled
   button behaviour). */
.org-info-cards[b-qsl249hq79] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.org-info-card[b-qsl249hq79] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Override default <button> appearance */
    width: 100%;
    font: inherit;
    color: inherit;
}

.org-info-card:hover:not(.org-info-card-disabled)[b-qsl249hq79] {
    background: var(--bg-card-hover);
    border-color: var(--accent-info);
}

.org-info-card-disabled[b-qsl249hq79] {
    cursor: default;
}

.org-info-card-icon[b-qsl249hq79] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--accent-info-light);
    color: var(--accent-info);
}

.org-info-card-body[b-qsl249hq79] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.org-info-card-title[b-qsl249hq79] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.org-info-card-desc[b-qsl249hq79] {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.4;
}

.org-info-card-arrow[b-qsl249hq79] {
    display: flex;
    align-items: flex-start;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.org-info-card:hover:not(.org-info-card-disabled) .org-info-card-arrow[b-qsl249hq79] {
    color: var(--accent-info);
}

@media (max-width: 768px) {
    .org-info-cards[b-qsl249hq79] {
        grid-template-columns: 1fr;
    }
}

.simplified-topbar[b-qsl249hq79] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.simplified-topbar-left[b-qsl249hq79] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.simplified-topbar-right[b-qsl249hq79] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.simplified-search-row[b-qsl249hq79] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.simplified-search-box[b-qsl249hq79] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

.simplified-search-row-actions[b-qsl249hq79] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.simplified-search-label[b-qsl249hq79] {
    font-family: "Titillium Web", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-secondary);
}

.simplified-search-input[b-qsl249hq79] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: "Titillium Web", sans-serif;
    font-size: 14px;
    min-width: 240px;
}

@media (max-width: 900px) {
    .simplified-search-row[b-qsl249hq79] {
        flex-wrap: wrap;
    }
}

.simplified-search-input:focus[b-qsl249hq79] {
    outline: none;
    border-color: var(--accent-primary);
}


.btn-secondary[b-qsl249hq79] {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-secondary:hover[b-qsl249hq79] {
    background: var(--bg-card-hover);
}

.btn-secondary.active[b-qsl249hq79] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-primary[b-qsl249hq79] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.btn-primary:hover[b-qsl249hq79] {
    background: var(--btn-primary-bg-hover);
}

/* My Organization topbar buttons use the Sky Blue (Highlight) accent per
   Anna's design (node 117:23352). Compact .btn padding (6px 14px) preserves
   the single-line layout from before ZN-328. */
.simplified-topbar-left .btn-primary[b-qsl249hq79],
.simplified-topbar-left .btn-info-cyan[b-qsl249hq79] {
    padding: 6px 14px;
    background: var(--accent-info);
    color: var(--text-on-accent);
    border-color: var(--accent-info);
}

.simplified-topbar-left .btn-primary:hover[b-qsl249hq79] {
    background: var(--accent-info);
    opacity: 0.85;
}

.btn-info-cyan[b-qsl249hq79] {
    background: var(--accent-info);
    color: var(--text-on-accent);
    border-color: var(--accent-info);
    opacity: 0.85;
}

.btn-info-cyan:disabled[b-qsl249hq79] {
    cursor: default;
    opacity: 0.85;
}

/* ==================== View Toggle Buttons ==================== */
.view-toggle-buttons[b-qsl249hq79] {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

.view-toggle-btn[b-qsl249hq79] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:first-child[b-qsl249hq79] {
    border-right: 1px solid var(--border-primary);
}

.view-toggle-btn.active[b-qsl249hq79] {
    background: var(--accent-info);
    color: var(--text-on-accent);
}

.view-toggle-btn:hover:not(.active)[b-qsl249hq79] {
    background: var(--bg-card-hover);
}

/* ==================== Common Button Styles ==================== */
.btn[b-qsl249hq79] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-family: "Titillium Web", sans-serif;
}

.btn-success:disabled[b-qsl249hq79] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Notes text */
.members-notes[b-qsl249hq79] {
    color: var(--text-secondary);
}

/* Form checkbox styling */
.form-checkbox label[b-qsl249hq79] {
    color: var(--text-secondary);
}

/* ============================== Mobile surface (ZN-114) ==============================
   Compact controls row replacing the desktop org-info cards / view toggles on the
   mobile app. New brand palette via CSS variables only (no screenshot purple). */
.mobile-org-controls[b-qsl249hq79] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* "My Holding Tank (N)" — success green per the ZN-114 design. */
.mobile-org-controls .mobile-tank-btn[b-qsl249hq79] {
    background-color: var(--color-success);
    color: #fff;
    border: 1px solid var(--color-success);
}

.mobile-org-controls .mobile-tank-btn:hover[b-qsl249hq79] {
    background-color: var(--color-success-bright);
    border-color: var(--color-success-bright);
}

/* "Default Columns / All Columns" toggle uses the standard secondary button. */
.mobile-org-controls .mobile-columns-btn[b-qsl249hq79] {
    margin-left: auto;
}

/* Forbidden state — shown when a non-Brand-Promoter (Customer) deep-links to
   /my-organization. Rendered inside the BackOffice chrome; mirrors the funnel's
   "403 | Forbidden" look using theme tokens. */
.org-forbidden[b-qsl249hq79] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 50vh;
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 0.15em;
}

.org-forbidden-code[b-qsl249hq79],
.org-forbidden-text[b-qsl249hq79] {
    font-size: 1.5rem;
}

.org-forbidden-text[b-qsl249hq79] {
    text-transform: uppercase;
}

.org-forbidden-divider[b-qsl249hq79] {
    width: 1px;
    height: 2.5rem;
    background-color: var(--border-primary);
}
/* /Pages/NotificationSettingsPage.razor.rz.scp.css */
/* Notification Preferences Page Styles */

.notification-page[b-g76eu7ws8z] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Two-column preferences grid */
.preferences-grid[b-g76eu7ws8z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .preferences-grid[b-g76eu7ws8z] {
        grid-template-columns: 1fr;
    }
}

.section-header-row[b-g76eu7ws8z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-description[b-g76eu7ws8z] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-secondary);
    margin: -12px 0 0 0;
}

/* Toggle Items */
.toggle-item[b-g76eu7ws8z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.toggle-item:last-child[b-g76eu7ws8z] {
    border-bottom: none;
    padding-bottom: 0;
}

.toggle-info[b-g76eu7ws8z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.toggle-label[b-g76eu7ws8z] {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--text-primary);
}

.toggle-label.email-label[b-g76eu7ws8z] {
    font-weight: 600;
}

.toggle-description[b-g76eu7ws8z] {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-secondary);
}

/* Rank Select Group */
.rank-select-group[b-g76eu7ws8z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.rank-label[b-g76eu7ws8z] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.rank-select[b-g76eu7ws8z] {
    max-width: 260px;
    width: 100%;
}

.rank-hint[b-g76eu7ws8z] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 16px;
}

/* Save Actions */
.save-actions[b-g76eu7ws8z] {
    display: flex;
    justify-content: flex-end;
}

/* Recent Notifications Section */
.recent-notifications-section[b-g76eu7ws8z] {
    margin-top: 0;
}

/* Notification list */
.notification-list[b-g76eu7ws8z] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notification-item[b-g76eu7ws8z] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.notification-item:last-child[b-g76eu7ws8z] {
    border-bottom: none;
    padding-bottom: 0;
}

.notification-item.unread[b-g76eu7ws8z] {
    background: transparent;
}

.notification-dot-wrapper[b-g76eu7ws8z] {
    width: 10px;
    flex-shrink: 0;
    padding-top: 6px;
}

.notification-dot[b-g76eu7ws8z] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-purple);
}

.notification-content[b-g76eu7ws8z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.notification-title[b-g76eu7ws8z] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.notification-message[b-g76eu7ws8z] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 18px;
}

.notification-date[b-g76eu7ws8z] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Toggle Switch */
.toggle-switch[b-g76eu7ws8z] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input[b-g76eu7ws8z] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-g76eu7ws8z] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-color);
    border-radius: 26px;
    transition: background-color 0.25s ease;
}

.toggle-slider[b-g76eu7ws8z]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.toggle-switch input:checked + .toggle-slider[b-g76eu7ws8z] {
    background: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider[b-g76eu7ws8z]::before {
    transform: translateX(22px);
}

/* Small spinner variant */
.spinner-sm[b-g76eu7ws8z] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}
/* /Pages/OrderDetailsPage.razor.rz.scp.css */
/* Order Details Container */
.order-details-container[b-khp2k2jkuu] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Error State */
.error-state[b-khp2k2jkuu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.error-state h3[b-khp2k2jkuu] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.error-state p[b-khp2k2jkuu] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}


.order-title-row[b-khp2k2jkuu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.order-title-row h1[b-khp2k2jkuu] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Status Badge Variants */
.status-badge.status-cart[b-khp2k2jkuu] {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.status-badge.status-pending[b-khp2k2jkuu] {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge.status-delivered[b-khp2k2jkuu] {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.status-badge.status-failed[b-khp2k2jkuu],
.status-badge.status-refunded[b-khp2k2jkuu] {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.status-badge.status-checkout[b-khp2k2jkuu] {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

/* Items Table */
.items-table[b-khp2k2jkuu] {
    width: 100%;
    border-collapse: collapse;
}

.items-table th[b-khp2k2jkuu] {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-color);
}

.items-table td[b-khp2k2jkuu] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.items-table tbody tr:last-child td[b-khp2k2jkuu] {
    border-bottom: none;
}

.text-center[b-khp2k2jkuu] {
    text-align: center;
}

.text-right[b-khp2k2jkuu] {
    text-align: right;
}

/* Order Summary */
.summary-list[b-khp2k2jkuu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-row[b-khp2k2jkuu] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--text-secondary);
}

.summary-row.total[b-khp2k2jkuu] {
    border-top: 2px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.summary-row .discount[b-khp2k2jkuu] {
    color: var(--color-success);
}

/* Addresses */
.addresses-row[b-khp2k2jkuu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.address-card[b-khp2k2jkuu] {
    margin-bottom: 0;
}

.address-content p[b-khp2k2jkuu] {
    margin: 0 0 0.25rem 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.no-address[b-khp2k2jkuu] {
    color: var(--text-muted);
    font-style: italic;
}

/* Back Button */
.back-btn[b-khp2k2jkuu] {
    padding: 0.75rem 1.5rem;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.back-btn:hover[b-khp2k2jkuu] {
    background-color: var(--accent-primary-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .order-details-container[b-khp2k2jkuu] {
        padding: 1rem;
    }

    .addresses-row[b-khp2k2jkuu] {
        grid-template-columns: 1fr;
    }

    .order-title-row[b-khp2k2jkuu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .items-table[b-khp2k2jkuu] {
        font-size: 0.9rem;
    }

    .items-table th[b-khp2k2jkuu],
    .items-table td[b-khp2k2jkuu] {
        padding: 0.5rem;
    }
}
/* /Pages/OrdersPage.razor.rz.scp.css */
/* Orders Container */
.orders-container[b-ghmg7oaip5] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Filter Section */
.filter-count[b-ghmg7oaip5] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Table Container */
.table-container[b-ghmg7oaip5] {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.order-id[b-ghmg7oaip5] {
    font-weight: 600;
    color: var(--accent-purple);
}

.order-processor[b-ghmg7oaip5] {
    white-space: nowrap;
    color: var(--text-secondary);
}

.order-total[b-ghmg7oaip5] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Status Badges */
.status-badge.status-cart[b-ghmg7oaip5] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.status-badge.status-pending[b-ghmg7oaip5] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge.status-delivered[b-ghmg7oaip5] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-badge.status-failed[b-ghmg7oaip5] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.status-badge.status-refunded[b-ghmg7oaip5] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.status-badge.status-checkout[b-ghmg7oaip5] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.status-badge.status-unknown[b-ghmg7oaip5] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* View Details Button */
.view-details-btn[b-ghmg7oaip5] {
    padding: 0.5rem 1.25rem;
    background-color: var(--accent-purple);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.view-details-btn:hover[b-ghmg7oaip5] {
    background-color: var(--accent-purple-dark);
    transform: translateY(-1px);
}

.view-details-btn:active[b-ghmg7oaip5] {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .orders-container[b-ghmg7oaip5] {
        padding: 1rem;
    }

    .table-container[b-ghmg7oaip5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    .orders-table[b-ghmg7oaip5] {
        min-width: 620px;
    }

    .view-details-btn[b-ghmg7oaip5] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .orders-container[b-ghmg7oaip5] {
        padding: 0.75rem;
    }

    .orders-table[b-ghmg7oaip5] {
        min-width: 560px;
    }
}
/* /Pages/ProfilePage.razor.rz.scp.css */
/* ========================================
   Profile Page
   ======================================== */

.profile-page[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1400px;
}

/* ---- Alerts ---- */
.alert[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.alert svg[b-vtj9khq1p2] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert p[b-vtj9khq1p2] {
    margin: 0;
}

.alert-error[b-vtj9khq1p2] {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-bg-strong);
    color: var(--color-error);
}

/* ZN-946: this page-scoped rule outranks app.css's global .alert-error via the
   Blazor scoped-CSS attribute, so the dark-theme brightening there (see
   app.css) needs the same override here to actually apply on this page. */
[data-theme="dark"] .alert-error[b-vtj9khq1p2] {
    color: var(--color-error-bright);
}

.alert-success[b-vtj9khq1p2] {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-bg-strong);
    color: var(--color-success);
}

/* ---- Main Content Layout ---- */
.profile-content[b-vtj9khq1p2] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ---- Left Column ---- */
.profile-left[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---- Profile Card ---- */
.profile-card[b-vtj9khq1p2] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.profile-banner[b-vtj9khq1p2] {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    flex-shrink: 0;
}

.avatar-wrapper[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: -50px;
    padding: 0 24px;
}

.avatar-circle[b-vtj9khq1p2] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid var(--bg-card);
    box-shadow: var(--shadow-md);
}

.avatar-image[b-vtj9khq1p2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-initials[b-vtj9khq1p2] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-on-accent);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-upload[b-vtj9khq1p2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.btn-upload:hover[b-vtj9khq1p2] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* ---- Details Section ---- */
.details-section[b-vtj9khq1p2] {
    width: 100%;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-secondary);
}

.detail-row:last-child[b-vtj9khq1p2] {
    border-bottom: none;
}

.detail-label[b-vtj9khq1p2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.detail-value[b-vtj9khq1p2] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.detail-value-inline[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    /* Allow the value area to shrink and the username to wrap so the edit
       button never gets pushed past the card edge (ZN-596). */
    min-width: 0;
    justify-content: flex-end;
    text-align: right;
}

.username-text[b-vtj9khq1p2] {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.btn-edit[b-vtj9khq1p2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-edit:hover[b-vtj9khq1p2] {
    background: var(--accent-primary-light);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-icon[b-vtj9khq1p2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-icon:hover[b-vtj9khq1p2] {
    background: var(--accent-primary-hover);
}

.btn-icon-save[b-vtj9khq1p2] {
    background: var(--color-success);
}

.btn-icon-save:hover[b-vtj9khq1p2] {
    background: var(--color-success);
    filter: brightness(1.1);
}

/* Username Inline Edit */
.username-edit-row[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.username-input[b-vtj9khq1p2] {
    width: 140px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.username-input:focus[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    background: var(--bg-input-focus);
}

/* Username Notice */
.username-notice[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 16px 16px 16px;
    padding: 10px 14px;
    background: var(--accent-primary-light);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary);
}

.username-notice svg[b-vtj9khq1p2] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--accent-primary);
}

.username-notice p[b-vtj9khq1p2] {
    margin: 0;
}

/* Status Badge */
.status-badge[b-vtj9khq1p2] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-active[b-vtj9khq1p2] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-inactive[b-vtj9khq1p2] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.status-pending[b-vtj9khq1p2] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-removed[b-vtj9khq1p2] {
    background: var(--text-muted-bg);
    color: var(--text-muted);
}

/* ---- Sponsor Card ---- */
.sponsor-card[b-vtj9khq1p2] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-left: 4px solid var(--accent-primary);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
}

.sponsor-header[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-secondary);
}

.sponsor-header svg[b-vtj9khq1p2] {
    color: var(--accent-primary);
}

.sponsor-header h3[b-vtj9khq1p2] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.sponsor-details[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sponsor-row[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.sponsor-row + .sponsor-row[b-vtj9khq1p2] {
    border-top: 1px solid var(--border-secondary);
}

.sponsor-label[b-vtj9khq1p2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sponsor-value[b-vtj9khq1p2] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.no-sponsor[b-vtj9khq1p2] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Right Column ---- */
.profile-right[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- Tab Content Cards ---- */
.tab-card[b-vtj9khq1p2] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-card);
}

.tab-card-header[b-vtj9khq1p2] {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.tab-card-header h3[b-vtj9khq1p2] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.tab-card-subtitle[b-vtj9khq1p2] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Referral Link ---- */
.referral-section[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-label[b-vtj9khq1p2] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.referral-link-row[b-vtj9khq1p2] {
    display: flex;
    gap: 10px;
}

.referral-input[b-vtj9khq1p2] {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.referral-input:focus[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    background: var(--bg-input-focus);
}

/* ---- Genealogy Options ---- */
.genealogy-options[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-card[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.radio-card:hover[b-vtj9khq1p2] {
    background: var(--bg-card-hover);
    border-color: var(--text-tertiary);
}

.radio-card-selected[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.radio-card-selected:hover[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.radio-card input[type="radio"][b-vtj9khq1p2] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-primary);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.2s ease;
}

.radio-card input[type="radio"]:checked[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
}

.radio-card input[type="radio"]:checked[b-vtj9khq1p2]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.radio-card-content[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-card-title[b-vtj9khq1p2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.radio-card-desc[b-vtj9khq1p2] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ---- Empty State ---- */
.empty-state[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state svg[b-vtj9khq1p2] {
    opacity: 0.3;
}

.empty-state p[b-vtj9khq1p2] {
    margin: 0;
    font-size: 14px;
}

/* ---- Payout Method ---- */
.payout-options[b-vtj9khq1p2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.payout-card[b-vtj9khq1p2] {
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s ease;
}

.payout-card-active[b-vtj9khq1p2] {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 1px var(--accent-secondary);
}

.payout-card-header[b-vtj9khq1p2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.payout-card-title-row[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payout-logo[b-vtj9khq1p2] {
    width: 42px;
    height: 42px;
    background: var(--accent-primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
}

.payout-logo-wise[b-vtj9khq1p2] {
    background: var(--accent-secondary-light);
    color: var(--accent-secondary);
}

.payout-logo-crypto[b-vtj9khq1p2] {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-on-accent);
}

.payout-card-loading[b-vtj9khq1p2] {
    text-align: center;
    color: var(--text-muted);
    padding: 16px 0;
    font-size: 0.875rem;
}

.payout-card-crypto-summary[b-vtj9khq1p2] {
    display: grid;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.payout-card-crypto-summary strong[b-vtj9khq1p2] {
    color: var(--text-primary);
}

.payout-card-crypto-summary .crypto-wallet-masked[b-vtj9khq1p2] {
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.02em;
}

.payout-card-name[b-vtj9khq1p2] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.payout-card-sub[b-vtj9khq1p2] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.payout-card-crypto-headline[b-vtj9khq1p2] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.payout-card-crypto-tagline[b-vtj9khq1p2] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.payout-badge[b-vtj9khq1p2] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.payout-badge-active[b-vtj9khq1p2] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.payout-badge-inactive[b-vtj9khq1p2] {
    background: var(--text-muted-bg);
    color: var(--text-muted);
}

.payout-features[b-vtj9khq1p2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payout-features li[b-vtj9khq1p2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.payout-check[b-vtj9khq1p2] {
    color: var(--color-success);
    flex-shrink: 0;
}

.payout-btn[b-vtj9khq1p2] {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* ---- ZN-1048: PayQuicker registration state ----
   Three states, because "selected" and "connected" are different questions.
   All colours come from theme-variables.css tokens — never hardcoded — so both
   the light and dark themes resolve correctly. */

.payout-badge-pending[b-vtj9khq1p2] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.payout-badge-expired[b-vtj9khq1p2] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Shares the shape of .payout-info-box but carries state colour. margin-top:auto
   makes it sit at the bottom of the card like the button it replaces, so cards in
   different states stay aligned in the row. */
.payout-status-box[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: auto;
}

.payout-status-box svg[b-vtj9khq1p2] {
    flex-shrink: 0;
    margin-top: 2px;
}

.payout-status-connected[b-vtj9khq1p2] {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-bg);
    color: var(--color-success);
}

.payout-status-pending[b-vtj9khq1p2] {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-bg);
    color: var(--color-warning);
}

.payout-status-expired[b-vtj9khq1p2] {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-bg);
    color: var(--color-error);
}

/* NOTE: no .payout-btn-restart rule. The Pending and Expired states deliberately
   render status only, with no control — see the comment in ProfilePage.razor. Do not
   add a resend button's styling back before a resend actually works. */

.payout-info-box[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--accent-secondary-light);
    border: 1px solid var(--accent-secondary-light);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--accent-secondary);
}

.payout-info-box svg[b-vtj9khq1p2] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---- Bio Form ---- */
.bio-form[b-vtj9khq1p2] {
    display: flex;
    flex-direction: column;
    gap: 6px;              /* label → input: tight, consistent */
    width: 100%;
    margin-bottom: 18px;   /* group → group: uniform vertical rhythm */
}

.bio-label[b-vtj9khq1p2] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Text/date/number inputs inside a .bio-form adopt the shared design-system field
   look (mirrors global .form-input in app.css) so the tax form matches the rest of
   BackOffice instead of rendering with browser defaults. Scoped to .bio-form so it
   never leaks to other inputs. */
.bio-form input[type="text"][b-vtj9khq1p2],
.bio-form input[type="date"][b-vtj9khq1p2],
.bio-form input[type="number"][b-vtj9khq1p2],
.bio-form input[type="email"][b-vtj9khq1p2],
.bio-form select[b-vtj9khq1p2] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bio-form input[type="text"]:focus[b-vtj9khq1p2],
.bio-form input[type="date"]:focus[b-vtj9khq1p2],
.bio-form input[type="number"]:focus[b-vtj9khq1p2],
.bio-form input[type="email"]:focus[b-vtj9khq1p2],
.bio-form select:focus[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
    outline: none;
}

.bio-form input[b-vtj9khq1p2]::placeholder {
    color: var(--text-tertiary);
}

/* ---- Tax Form (W-9 / W-8BEN) ---- */
.taxform-type-indicator[b-vtj9khq1p2] {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--accent-primary-light);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 4px 0 8px 0;
}

.taxform-type-indicator strong[b-vtj9khq1p2] {
    color: var(--text-primary);
}

.taxform-checkbox-row[b-vtj9khq1p2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.taxform-checkbox-row input[type="checkbox"][b-vtj9khq1p2] {
    margin-top: 2px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.taxform-file-name[b-vtj9khq1p2] {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Signed-form file upload — style the native file input + its picker button so
   it reads as a design-system field instead of the raw browser "Choose file". */
.bio-form input[type="file"][b-vtj9khq1p2] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.bio-form input[type="file"]:hover[b-vtj9khq1p2] {
    border-color: var(--accent-primary);
    background: var(--bg-card-hover);
}

.bio-form input[type="file"][b-vtj9khq1p2]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bio-form input[type="file"][b-vtj9khq1p2]::file-selector-button:hover {
    background: var(--accent-primary-hover, var(--accent-secondary));
}

/* Form footer — give the Submit Tax Form button breathing room and make it a
   clear, full-width action at the bottom of the form. */
.taxform-submit-btn[b-vtj9khq1p2] {
    margin-top: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .profile-content[b-vtj9khq1p2] {
        grid-template-columns: 340px 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .profile-content[b-vtj9khq1p2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tab-card[b-vtj9khq1p2] {
        padding: 20px;
    }

    .referral-link-row[b-vtj9khq1p2] {
        flex-direction: column;
    }

    .payout-options[b-vtj9khq1p2] {
        grid-template-columns: 1fr;
    }

    .profile-card[b-vtj9khq1p2] {
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .avatar-circle[b-vtj9khq1p2] {
        width: 80px;
        height: 80px;
    }

    .avatar-wrapper[b-vtj9khq1p2] {
        margin-top: -40px;
    }

    .avatar-initials[b-vtj9khq1p2] {
        font-size: 22px;
    }

    .profile-banner[b-vtj9khq1p2] {
        height: 80px;
    }

    .tab-card[b-vtj9khq1p2] {
        padding: 16px;
    }

    .payout-card[b-vtj9khq1p2] {
        padding: 14px;
    }

    .sponsor-card[b-vtj9khq1p2] {
        padding: 16px;
    }

    .detail-row[b-vtj9khq1p2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }

    .detail-value[b-vtj9khq1p2],
    .detail-value-inline[b-vtj9khq1p2] {
        text-align: left;
    }

    .username-edit-row[b-vtj9khq1p2] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Pages/PromotionalUsersPage.razor.rz.scp.css */
/* Promotional Users — BackOffice dark theme */

.promo-page[b-xelodpa8ow] {
    padding: 1.25rem 0 2rem;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

/* ── Loading / errors ── */
.promo-loading[b-xelodpa8ow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    gap: 1rem;
}

.promo-spinner[b-xelodpa8ow] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: promo-spin-b-xelodpa8ow 0.8s linear infinite;
}

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

.promo-alert[b-xelodpa8ow] {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin: 0 0 1rem;
}

.promo-alert-error[b-xelodpa8ow] {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* ── Controls row ── */
.promo-controls[b-xelodpa8ow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.promo-entries[b-xelodpa8ow],
.promo-search-inline[b-xelodpa8ow] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.promo-search-inline input[b-xelodpa8ow] {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

.promo-search-inline input:focus[b-xelodpa8ow] {
    border-color: var(--accent-primary);
}

.promo-page-size[b-xelodpa8ow] {
    width: 80px;
}

.promo-search-inline input[b-xelodpa8ow] {
    min-width: 220px;
}

/* ── Table ── */
.promo-table[b-xelodpa8ow] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.promo-table thead th[b-xelodpa8ow] {
    text-align: left;
    padding: 12px 16px;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-primary);
}

.promo-table tbody td[b-xelodpa8ow] {
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 13px;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
}

.promo-table tbody tr:last-child td[b-xelodpa8ow] {
    border-bottom: none;
}

.promo-table tbody tr:hover td[b-xelodpa8ow] {
    background: var(--bg-card-hover);
}

.promo-table td.empty-row[b-xelodpa8ow] {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary);
    font-style: italic;
}

.col-id[b-xelodpa8ow] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.col-name-primary[b-xelodpa8ow] {
    font-weight: 500;
}

.col-name-email[b-xelodpa8ow] {
    color: var(--text-secondary);
}

.col-date[b-xelodpa8ow] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Row actions ── */
.actions-wrapper[b-xelodpa8ow] {
    position: relative;
    display: inline-block;
}

.actions-btn[b-xelodpa8ow] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.actions-btn:hover[b-xelodpa8ow] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.actions-menu[b-xelodpa8ow] {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 180px;
    padding: 4px;
    animation: menuFadeIn-b-xelodpa8ow 0.15s ease;
}

@keyframes menuFadeIn-b-xelodpa8ow {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.action-item[b-xelodpa8ow] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

.action-item:hover[b-xelodpa8ow] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Pagination ── */
.promo-pagination[b-xelodpa8ow] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
}

.promo-pagination button[b-xelodpa8ow],
.promo-pagination span[b-xelodpa8ow] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.promo-pagination button:hover:not(:disabled)[b-xelodpa8ow] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.promo-pagination button.active[b-xelodpa8ow] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.promo-pagination button:disabled[b-xelodpa8ow] {
    opacity: 0.4;
    cursor: not-allowed;
}

.promo-pagination button svg[b-xelodpa8ow] {
    width: 14px;
    height: 14px;
}

.promo-pagination-info[b-xelodpa8ow] {
    display: flex;
    justify-content: flex-end;
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 0.5rem;
}
/* /Pages/RafflePage.razor.rz.scp.css */
.raffle-container[b-z65o3bw3pu] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

/* ── Banner ── */
.raffle-banner-img[b-z65o3bw3pu] {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 24px;
}

/* ── Close date line ── */
.raffle-close-date[b-z65o3bw3pu] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 24px;
}

/* ── Redemption tier cards ── */
.raffle-tiers-grid[b-z65o3bw3pu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.raffle-tier-card[b-z65o3bw3pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.raffle-tier-entries[b-z65o3bw3pu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.raffle-tier-cost[b-z65o3bw3pu] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.raffle-tier-redeem[b-z65o3bw3pu] {
    width: 100%;
    justify-content: center;
}

.raffle-tier-hint[b-z65o3bw3pu] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 10px 0 0;
}

/* ── Redemptions table ── */
.raffle-section-title[b-z65o3bw3pu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
}

/* ── Loading ── */
.loading-container[b-z65o3bw3pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--text-secondary);
}

.spinner[b-z65o3bw3pu] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: raffle-spin-b-z65o3bw3pu 0.8s linear infinite;
}

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

/* ── Responsive ── */
@media (max-width: 600px) {
    .raffle-tiers-grid[b-z65o3bw3pu] {
        grid-template-columns: 1fr;
    }

    .raffle-container[b-z65o3bw3pu] {
        padding: 16px;
    }

    .raffle-banner-img[b-z65o3bw3pu] {
        max-height: 200px;
    }
}
/* /Pages/RewardsHistoryPage.razor.rz.scp.css */
/* Rewards History Page Styles */
.rewards-container[b-go9yikt0v7] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Back to My Organization */
.back-btn[b-go9yikt0v7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-btn:hover[b-go9yikt0v7] {
    background-color: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.back-btn svg[b-go9yikt0v7] {
    width: 16px;
    height: 16px;
}

.page-subtitle strong[b-go9yikt0v7] {
    color: var(--text-primary);
}

/* Search toolbar — card header above the table, search right-aligned (matches
   the project's .table-controls convention). The control is positioned so the
   magnifier and clear button sit inside the input. */
.table-controls[b-go9yikt0v7] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    justify-content: flex-end;
}

.search-control[b-go9yikt0v7] {
    position: relative;
}

.search-control .search-icon[b-go9yikt0v7] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-control .search-input[b-go9yikt0v7] {
    min-width: 320px;
    max-width: 100%;
    padding: 8px 36px 8px 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-control .search-input:focus[b-go9yikt0v7] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

/* Hide the browser's native search clear so only ours shows */
.search-control .search-input[b-go9yikt0v7]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-control .search-clear[b-go9yikt0v7] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.search-control .search-clear:hover[b-go9yikt0v7] {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

.search-control .search-clear svg[b-go9yikt0v7] {
    width: 14px;
    height: 14px;
}

/* Table */
.table-container[b-go9yikt0v7] {
    background: var(--bg-card);
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--border-color);
    border-top: none;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.rewards-table td.empty-state[b-go9yikt0v7] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Footer / pagination layout */
.table-footer[b-go9yikt0v7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .rewards-container[b-go9yikt0v7] {
        padding: 1rem;
    }

    .table-controls[b-go9yikt0v7] {
        justify-content: stretch;
    }

    .search-control[b-go9yikt0v7] {
        width: 100%;
    }

    .search-control .search-input[b-go9yikt0v7] {
        min-width: 0;
        width: 100%;
    }

    .table-footer[b-go9yikt0v7] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}
/* /Pages/SiteStatusPage.razor.rz.scp.css */
.site-status-container[b-gxvdfx1gop] {
    max-width: 1200px;
    padding: 0 0 40px;
}

/* ── Summary Card ── */
.status-summary-card[b-gxvdfx1gop] {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.summary-stats[b-gxvdfx1gop] {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.summary-stat[b-gxvdfx1gop] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.stat-number[b-gxvdfx1gop] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-complete[b-gxvdfx1gop] { color: var(--color-success); }
.stat-ui-complete[b-gxvdfx1gop] { color: var(--accent-primary); }
.stat-in-progress[b-gxvdfx1gop] { color: var(--color-info); }
.stat-review[b-gxvdfx1gop] { color: var(--color-warning); }
.stat-not-started[b-gxvdfx1gop] { color: var(--text-secondary); }

.stat-label[b-gxvdfx1gop] {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.progress-track[b-gxvdfx1gop] {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-gxvdfx1gop] {
    height: 100%;
    background: var(--color-success);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-label[b-gxvdfx1gop] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Status Filter ── */
.status-filter[b-gxvdfx1gop] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-label[b-gxvdfx1gop] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn[b-gxvdfx1gop] {
    padding: 4px 12px;
    font-size: 13px;
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover[b-gxvdfx1gop] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.filter-btn.active[b-gxvdfx1gop] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.filter-btn.filter-clear[b-gxvdfx1gop] {
    border-style: dashed;
    font-size: 12px;
}

/* ── Table layout ── */
.status-table[b-gxvdfx1gop] {
    table-layout: fixed;
    width: 100%;
}

/* ── Sections ── */
.status-section[b-gxvdfx1gop] {
    margin-bottom: 24px;
}

.section-title[b-gxvdfx1gop] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-divider);
}

/* ── Route Link ── */
.route-link[b-gxvdfx1gop] {
    color: var(--text-link);
    text-decoration: none;
    font-size: 13px;
    font-family: monospace;
}

.route-link:hover[b-gxvdfx1gop] {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.preview-btn[b-gxvdfx1gop] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: monospace;
}

/* ── Notes ── */
.notes-cell[b-gxvdfx1gop] {
    font-size: 13px;
    color: var(--text-secondary);
}

.no-notes[b-gxvdfx1gop] {
    color: var(--text-tertiary);
}

/* ── Edit Hint ── */
.edit-hint[b-gxvdfx1gop] {
    margin-top: 32px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px dashed var(--border-primary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.edit-hint code[b-gxvdfx1gop] {
    color: var(--accent-primary);
    font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .summary-stats[b-gxvdfx1gop] {
        gap: 16px;
    }

    .stat-number[b-gxvdfx1gop] {
        font-size: 22px;
    }
}
/* /Pages/TravelPortalPage.razor.rz.scp.css */
/* Travel Portal hand-off page. Tokens only — no hardcoded colours (CLAUDE.md § CSS & Theming).
   Rendered under AuthLayout (no sidebar/header), so this owns the whole viewport. */

.tp-screen[b-88fvvs0mte] {
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* The default experience: a spinner and one line. No heading, no card, no chrome — the member is
   here for a moment while the browser posts them onward, and anything more reads as a page they
   were meant to stop and read. */
.tp-loading[b-88fvvs0mte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.tp-message[b-88fvvs0mte] {
    margin: 0;
    color: var(--text-secondary);
}

.tp-spinner[b-88fvvs0mte] {
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: tp-spin-b-88fvvs0mte 0.9s linear infinite;
}

@keyframes tp-spin-b-88fvvs0mte {
    to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: keep the indicator, drop the rotation. */
@media (prefers-reduced-motion: reduce) {
    .tp-spinner[b-88fvvs0mte] {
        animation: none;
    }
}

/* Appears only after the auto-submit has had its chance — see FallbackDelaySeconds. */
.tp-continue[b-88fvvs0mte] {
    margin-top: 0.25rem;
}

/* Failures DO get a card and full messaging: unlike the hand-off, this is a page the member has to
   read and act on, and it is shown immediately rather than after the fallback delay. */
.tp-panel-error[b-88fvvs0mte] {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-panel-error h2[b-88fvvs0mte] {
    margin: 0;
    font-size: 1.1rem;
}

.tp-panel-error p[b-88fvvs0mte] {
    margin: 0;
    color: var(--text-secondary);
}

.tp-actions[b-88fvvs0mte] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
/* /Pages/TwoAndFreePage.razor.rz.scp.css */
/* Two and Free Page Styles */

.taf-page[b-cko7hahw7k] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 0;
}

/* Stats Grid */
.taf-stats-grid[b-cko7hahw7k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

/* Base card styling comes from .card-accent in app.css; this rule only adds
   the page-specific layout. */
.taf-stat-card[b-cko7hahw7k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

/* Per-card stripes + hover-border identity. Override the gradient via
   background-image only, so the size/position from .card-accent's ::before
   rule (`top / 100% 3px no-repeat`) is preserved. */
.taf-stat-card--personal-cv[b-cko7hahw7k]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}
.taf-stat-card--personal-cv[b-cko7hahw7k] {
    --card-hover-border: color-mix(in srgb, var(--color-success) 40%, transparent);
}

.taf-stat-card--customers[b-cko7hahw7k]::before {
    background-image: linear-gradient(90deg, var(--color-success), var(--accent-primary) 90%);
}

.taf-stat-card--status[b-cko7hahw7k]::before {
    background-image: linear-gradient(90deg, var(--color-success), var(--accent-primary) 90%);
}

.taf-stat-card--centered[b-cko7hahw7k] {
    justify-content: center;
}

.taf-stat-label[b-cko7hahw7k] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
}

.taf-stat-value[b-cko7hahw7k] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.taf-stat-value--accent[b-cko7hahw7k] {
    color: var(--accent-primary);
}

.taf-stat-desc[b-cko7hahw7k] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
}

.taf-stat-granted[b-cko7hahw7k] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-success);
    margin: 0.35rem 0 0 0;
    line-height: 1.4;
}

/* Stat Buttons */
.taf-stat-button[b-cko7hahw7k] {
    padding: 0.6rem 1rem;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.taf-btn-enroll[b-cko7hahw7k] {
    background: linear-gradient(to right, var(--accent-orange), var(--accent-orange-deep));
    color: var(--text-on-orange);
    font-weight: 700;
    border-radius: 999px;
    width: 100%;
}

/* Progress Bar */
.taf-progress-bar[b-cko7hahw7k] {
    width: 100%;
    height: 12px;
    background: var(--overlay-on-accent-light);
    border-radius: 999px;
    overflow: hidden;
}

.taf-progress-fill[b-cko7hahw7k] {
    height: 100%;
    background: var(--text-muted);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.taf-btn-status[b-cko7hahw7k] {
    background: linear-gradient(to right, var(--accent-orange), var(--accent-orange-deep));
    color: var(--text-on-orange);
    border-radius: 999px;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.taf-progress-fill--complete[b-cko7hahw7k] {
    background: var(--color-success);
}

.taf-btn-status--complete[b-cko7hahw7k] {
    background: var(--color-success);
    color: var(--text-on-accent);
}

/* ============================== Next Billing Badge ============================== */

.simplified-billing-badge[b-cko7hahw7k] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.next-billing-green[b-cko7hahw7k] {
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

[data-theme="dark"] .next-billing-green[b-cko7hahw7k] {
    border-color: var(--color-success-bright);
    color: var(--color-success-bright);
}

.next-billing-yellow[b-cko7hahw7k] {
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
}

[data-theme="dark"] .next-billing-yellow[b-cko7hahw7k] {
    border-color: var(--chart-yellow);
    color: var(--color-warning-bright);
}

.next-billing-red[b-cko7hahw7k] {
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

[data-theme="dark"] .next-billing-red[b-cko7hahw7k] {
    border-color: var(--color-error);
    color: var(--color-error-bright);
}

/* Section — base from .card-accent in app.css; layout + identity here. */
.taf-section[b-cko7hahw7k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.taf-section[b-cko7hahw7k]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-success) 90%);
}

.taf-section-header[b-cko7hahw7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.taf-section-header h2[b-cko7hahw7k] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.taf-refresh-btn[b-cko7hahw7k] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.taf-refresh-btn:hover[b-cko7hahw7k] {
    opacity: 0.9;
}

/* Controls — a single child (search box) remains after pagination removal (ZN-871). */
.taf-controls[b-cko7hahw7k] {
    display: flex;
}

.taf-search-box[b-cko7hahw7k] {
    flex: 1;
    position: relative;
}

.taf-search-input[b-cko7hahw7k] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}

.taf-search-input[b-cko7hahw7k]::placeholder {
    color: var(--text-muted);
}

.taf-search-input:focus[b-cko7hahw7k] {
    border-color: var(--border-input-focus);
}

/* Visually-hidden aria-live region for the transaction-id copy action (ZN-901).
   The visible confirmation is now a MudBlazor snackbar toast; this element stays
   in the accessibility tree (no display:none/visibility:hidden) so screen readers
   still announce the copy result. */
.taf-copy-status[b-cko7hahw7k] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Table */
.taf-table-wrapper[b-cko7hahw7k] {
    overflow-x: auto;
    margin: 1rem 0;
}

.taf-table[b-cko7hahw7k] {
    width: 100%;
    border-collapse: collapse;
}

.taf-table thead[b-cko7hahw7k] {
    background: var(--bg-table-header);
    border-bottom: 1px solid var(--border-divider);
}

.taf-table th[b-cko7hahw7k] {
    padding: 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.taf-table tbody tr[b-cko7hahw7k] {
    border-bottom: 1px solid var(--border-divider);
    transition: background-color 0.2s;
}

.taf-table tbody tr:hover[b-cko7hahw7k] {
    background: var(--bg-table-row-hover);
}

.taf-table td[b-cko7hahw7k] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.taf-empty-cell[b-cko7hahw7k] {
    text-align: center;
    padding: 2rem 1rem !important;
}

.taf-empty-cell p[b-cko7hahw7k] {
    margin: 0.5rem 0;
    color: var(--text-primary);
    font-weight: 500;
}

.taf-empty-desc[b-cko7hahw7k] {
    font-size: 0.8125rem !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Transaction ID cell (ZN-871) */
.taf-txn-id[b-cko7hahw7k] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-right: 0.4rem;
}

.taf-txn-copy-btn[b-cko7hahw7k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.2s, background-color 0.2s;
}

.taf-txn-copy-btn:hover[b-cko7hahw7k] {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.taf-txn-copy-btn:focus-visible[b-cko7hahw7k] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Terms and Conditions — base from .card-accent in app.css. */
.taf-terms[b-cko7hahw7k]::before {
    background-image: linear-gradient(90deg, var(--accent-primary), var(--color-error) 90%);
}
.taf-terms[b-cko7hahw7k] {
    --card-hover-border: color-mix(in srgb, var(--color-error) 40%, transparent);
}

.taf-terms-title[b-cko7hahw7k] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.taf-terms-list[b-cko7hahw7k] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.taf-terms-list li[b-cko7hahw7k] {
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.55;
}

.taf-terms-list li[b-cko7hahw7k]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: bold;
}

.taf-terms-list strong[b-cko7hahw7k] {
    color: var(--text-primary);
}

/* Reminder Box */
.taf-reminder[b-cko7hahw7k] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--accent-primary-light);
    border-left: 3px solid var(--accent-primary);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.55;
}

.taf-reminder strong[b-cko7hahw7k] {
    color: var(--text-primary);
}

.taf-terms-pdf-wrap[b-cko7hahw7k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.taf-terms-pdf[b-cko7hahw7k] {
    width: 100%;
    max-width: 100%;
    height: 70vh;
    min-height: 480px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
}

.taf-terms-download[b-cko7hahw7k] {
    align-self: flex-start;
    color: var(--accent-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.taf-terms-download:hover[b-cko7hahw7k] {
    text-decoration: underline;
}

.taf-terms-pdf-unavailable[b-cko7hahw7k] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .taf-stats-grid[b-cko7hahw7k] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .taf-stats-grid[b-cko7hahw7k] {
        grid-template-columns: 1fr;
    }

    .taf-section-header[b-cko7hahw7k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .taf-table[b-cko7hahw7k] {
        font-size: 0.75rem;
    }

    .taf-table th[b-cko7hahw7k],
    .taf-table td[b-cko7hahw7k] {
        padding: 0.5rem;
    }
}

@media (max-width: 640px) {
    .taf-terms-pdf[b-cko7hahw7k] {
        height: 60vh;
    }
}
/* /Pages/ZinraiRewardsPage.razor.rz.scp.css */
/* ZiNRAi Rewards Page */

.rewards-page-container[b-sebw78lix3] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
}

.rewards-page-title[b-sebw78lix3] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 2rem 0;
}

/* ── Hero Card ── */

.rewards-hero-card[b-sebw78lix3] {
    background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-primary-bright) 50%, var(--accent-primary-hover) 100%);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-heading[b-sebw78lix3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-on-accent);
    margin: 0;
}

.hero-circle[b-sebw78lix3] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-warning), var(--chart-orange));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--color-warning-bg-strong);
}

.hero-count[b-sebw78lix3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-accent);
}

.hero-next-credit[b-sebw78lix3] {
    font-size: 0.95rem;
    color: var(--text-on-accent-soft);
    margin: 0;
}

.btn-view-ledger[b-sebw78lix3] {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border: 2px solid var(--text-on-accent);
    border-radius: 8px;
    color: var(--text-on-accent);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

.btn-view-ledger:hover[b-sebw78lix3] {
    background: var(--overlay-on-accent-light);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--text-on-accent);
}

/* ── Redeem Confirm ── */

.redeem-confirm[b-sebw78lix3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.redeem-confirm-message[b-sebw78lix3] {
    font-size: 0.9rem;
    color: var(--text-on-accent);
    margin: 0;
    text-align: center;
}

.redeem-confirm-actions[b-sebw78lix3] {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-redeem-cancel[b-sebw78lix3] {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border: 2px solid var(--overlay-on-accent-light);
    border-radius: 8px;
    background: transparent;
    color: var(--text-on-accent);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.btn-redeem-cancel:hover:not(:disabled)[b-sebw78lix3] {
    background: var(--overlay-on-accent-light);
    transform: translateY(-1px);
}

.btn-redeem-cancel:disabled[b-sebw78lix3] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Info Sections ── */

.info-section[b-sebw78lix3] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-card);
}

.intro-section p[b-sebw78lix3] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: center;
    margin: 0;
}

.section-heading[b-sebw78lix3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.info-list[b-sebw78lix3] {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-list li[b-sebw78lix3] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.info-list li strong[b-sebw78lix3] {
    color: var(--text-primary);
}

.info-section > p[b-sebw78lix3] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* ── Reward Types ── */

.reward-types-row[b-sebw78lix3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.reward-type-card[b-sebw78lix3] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    text-align: left;
}

/* ── Rules ── */

.rules-list[b-sebw78lix3] {
    list-style: none;
    padding-left: 0;
}

.rules-list li[b-sebw78lix3] {
    padding-left: 1.25rem;
    position: relative;
}

.rules-list li[b-sebw78lix3]::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    color: var(--color-error);
    font-size: 1rem;
}

.reminder-callout[b-sebw78lix3] {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-input);
    border-left: 3px solid var(--color-warning);
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.reminder-callout strong[b-sebw78lix3] {
    color: var(--text-primary);
}

/* ── Closing ── */

.closing-section[b-sebw78lix3] {
    text-align: center;
    padding: 2rem 0;
}

.closing-bold[b-sebw78lix3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

/* ── Footer ── */

.rewards-footer[b-sebw78lix3] {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .rewards-page-container[b-sebw78lix3] {
        padding: 1.5rem 1rem;
    }

    .rewards-page-title[b-sebw78lix3] {
        font-size: 1.5rem;
    }

    .rewards-hero-card[b-sebw78lix3] {
        padding: 2rem 1.25rem;
    }

    .hero-circle[b-sebw78lix3] {
        width: 80px;
        height: 80px;
    }

    .hero-count[b-sebw78lix3] {
        font-size: 2rem;
    }

    .reward-types-row[b-sebw78lix3] {
        grid-template-columns: 1fr;
    }

    .info-section[b-sebw78lix3] {
        padding: 1.25rem 1.25rem;
    }
}