@import '_content/NAVR.SharedUI/NAVR.SharedUI.g7l1ruwobt.bundle.scp.css';

/* /Components/Cms/BlockEditorShell.razor.rz.scp.css */
/* Block editor frame — scoped via Blazor CSS isolation. Palette variables only, so it follows the Admin theme
   (light / dark) and matches the Card, Header and Footer settings workspaces. Layout follows the width the block
   actually has (a size container), never the viewport alone, and never scrolls horizontally. */

.navr-block-editor[b-7b5eioi0ue] {
    --navr-be-accent: var(--mud-palette-primary);
    container: navr-block-editor / inline-size;
    min-width: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 4px solid var(--navr-be-accent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-block-editor--richtext[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-info); }
.navr-block-editor--mediagallery[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-secondary); }
.navr-block-editor--cta[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-warning); }
.navr-block-editor--faq[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-tertiary); }
.navr-block-editor--testimonial[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-success); }
.navr-block-editor--whynarail[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-dark); }
.navr-block-editor--custom[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-info); }

/* ── Header ── */
.navr-block-editor__head[b-7b5eioi0ue] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
}

.navr-block-editor--open > .navr-block-editor__head[b-7b5eioi0ue] {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* ── Main header context colour (Page = blue, Article = green; tokens in wwwroot/app.css) ──
   The whole header band is highlighted so each block starts with a clearly visible heading, above the softer
   semantic sub-header colours of its groups. The radii follow the frame's inner edge (12px corner minus the 4px
   accent border at the start, 1px elsewhere) so the band never pokes past the rounded corners. */
.navr-block-editor--context > .navr-block-editor__head[b-7b5eioi0ue] {
    border-start-start-radius: 8px;
    border-start-end-radius: 11px;
    background: var(--navr-tone-head-bg);
}

.navr-block-editor--context:not(.navr-block-editor--open) > .navr-block-editor__head[b-7b5eioi0ue] {
    border-end-start-radius: 8px;
    border-end-end-radius: 11px;
}

.navr-block-editor--context.navr-block-editor--open > .navr-block-editor__head[b-7b5eioi0ue] {
    border-bottom-color: var(--navr-tone-line);
}

.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__icon[b-7b5eioi0ue] {
    background: color-mix(in srgb, var(--navr-be-accent) 14%, var(--mud-palette-surface));
}

/* The Page / Article badge carries the context colour, so the owner reads at a glance. */
.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__meta[b-7b5eioi0ue] {
    border-color: var(--navr-tone-line);
    font-weight: 600;
    color: var(--navr-tone-ink);
    background: var(--mud-palette-surface);
}

/* Neutral chips and the outlined Working Details button sit on the surface colour, crisp against the band. */
.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip:not(.navr-block-chip--ok):not(.navr-block-chip--warn) {
    background: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__head-actions[b-7b5eioi0ue]  .navr-block-editor__guide {
    background: var(--mud-palette-surface);
}

/* Block Number — the primary visual identity of the block (01, 02, …). A solid disc in the block's own accent,
   deepened so the white digits stay readable on every accent (warning orange included). min-width + padding let
   three-digit numbers (100+) widen into a pill instead of being clipped. */
.navr-block-editor__number[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #fff;
    background: color-mix(in srgb, var(--navr-be-accent) 72%, #000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--navr-be-accent) 18%, transparent);
    user-select: none;
}

.navr-block-editor__sr[b-7b5eioi0ue] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.navr-block-editor__icon[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--navr-be-accent);
    background: color-mix(in srgb, var(--navr-be-accent) 12%, transparent);
}

.navr-block-editor__identity[b-7b5eioi0ue] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-block-editor__eyebrow[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.navr-block-editor__type[b-7b5eioi0ue] {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--navr-be-accent);
}

.navr-block-editor__meta[b-7b5eioi0ue] {
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.navr-block-editor__title[b-7b5eioi0ue] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-block-editor__description[b-7b5eioi0ue] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__chips[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip--ok {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip--warn {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-block-editor__head-actions[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.navr-block-editor__actions[b-7b5eioi0ue] {
    display: inline-flex;
    align-items: center;
}

/* ── Body ── */
.navr-block-editor__body[b-7b5eioi0ue] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    min-width: 0;
}

.navr-block-editor__toolbar[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.navr-block-editor__toolbar-label[b-7b5eioi0ue] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__toolbar-actions[b-7b5eioi0ue] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.navr-block-editor__groups[b-7b5eioi0ue] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Save bar ── */
.navr-block-editor__savebar[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-block-editor__savehint[b-7b5eioi0ue] {
    flex: 1 1 16rem;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__save[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Narrow blocks (tablet portrait / phone) ── */
@container navr-block-editor (max-width: 640px) {
    .navr-block-editor__head[b-7b5eioi0ue] {
        flex-wrap: wrap;
        gap: 0.625rem;
        padding: 0.75rem;
    }

    .navr-block-editor__number[b-7b5eioi0ue] {
        min-width: 2.375rem;
        height: 2.375rem;
        font-size: 1.0625rem;
    }

    .navr-block-editor__icon[b-7b5eioi0ue] {
        width: 2.125rem;
        height: 2.125rem;
    }

    /* Number + icon + two gaps sit beside the identity column. */
    .navr-block-editor__identity[b-7b5eioi0ue] {
        flex-basis: calc(100% - 5.875rem);
    }

    .navr-block-editor__head-actions[b-7b5eioi0ue] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .navr-block-editor__body[b-7b5eioi0ue] {
        padding: 0.625rem 0.625rem 0.75rem;
    }

    .navr-block-editor__save[b-7b5eioi0ue] {
        flex: 1 1 100%;
    }

    .navr-block-editor__save[b-7b5eioi0ue]  .mud-button-root {
        flex: 1 1 auto;
    }
}

/* ── Phone-width blocks: the number stays; the decorative type icon steps aside (the type pill still names it). ── */
@container navr-block-editor (max-width: 400px) {
    .navr-block-editor__icon[b-7b5eioi0ue] {
        display: none;
    }

    .navr-block-editor__identity[b-7b5eioi0ue] {
        flex-basis: calc(100% - 3.125rem);
    }
}
/* /Components/Cms/BlockTemplateEditorForm.razor.rz.scp.css */
/* Block Template Fields — the Field Number badge (01, 02, …) beside each field's controls. Scoped via Blazor CSS
   isolation and drawn in the same visual language as the Page / Article Block Number (BlockEditorShell.razor.css):
   a solid disc in the Admin primary, deepened so the white digits stay readable, tabular digits, and a min-width
   that widens into a pill for 100+ instead of clipping. Palette variables only, so it follows light / dark. */

.navr-tf-row[b-62vqxsr1g8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.navr-tf-number[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.375rem;
    /* MudGrid's spacing margin reaches past its box; keep the badge clear of the first control. */
    margin-inline-end: 0.5rem;
    border-radius: 999px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #fff;
    background: color-mix(in srgb, var(--mud-palette-primary) 72%, #000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    user-select: none;
}

.navr-tf-sr[b-62vqxsr1g8] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The controls take the rest of the row and may shrink; nothing forces horizontal scrolling. */
.navr-tf-row[b-62vqxsr1g8]  .navr-tf-controls {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below MudGrid's md breakpoint the controls stack; the badge stays at the top of the stack, beside the Label. */
@media (max-width: 959.98px) {
    .navr-tf-row[b-62vqxsr1g8] {
        align-items: flex-start;
    }

    .navr-tf-number[b-62vqxsr1g8] {
        margin-top: 0.5rem;
    }
}

/* Phone width: the badge leads the field on its own line, so the stacked controls keep their full width — beside
   them it would squeeze the Type / Required pair past the screen edge. */
@media (max-width: 599.98px) {
    .navr-tf-row[b-62vqxsr1g8] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .navr-tf-number[b-62vqxsr1g8] {
        align-self: flex-start;
        min-width: 2.375rem;
        height: 2.375rem;
        margin: 0.25rem 0 0 0.25rem;
        font-size: 1.0625rem;
    }

    /* Type and Required stack here (xs="12"), so the Required switch starts at the row's leading edge. MudSwitch pulls
       itself 11px outward so its thumb lines up with text; limit that to the field card's own padding (pa-2) so the
       switch's hover / focus circle stays inside the card instead of crossing its border. */
    .navr-tf-row[b-62vqxsr1g8]  .mud-switch {
        margin-inline-start: -0.5rem;
    }
}

/* ── Main header — the Block Template's highlighted heading band ──
   Same visual language as the Page / Article block header (BlockEditorShell.razor.css), in the template's own purple
   context colour. Tokens (navr-tone--template, --navr-tone-*) live in wwwroot/app.css, so light / dark follow the
   Admin theme. It wraps instead of scrolling: identity and actions stack on narrow screens. */
.navr-bt-head[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 0.875rem;
    min-width: 0;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 12px;
    background: var(--navr-tone-head-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-bt-head__icon[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: #fff;
    background: var(--navr-tone-solid);
}

.navr-bt-head__identity[b-62vqxsr1g8] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-bt-head__eyebrow[b-62vqxsr1g8],
.navr-bt-head__chips[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.navr-bt-head__type[b-62vqxsr1g8] {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--navr-tone-solid);
}

.navr-bt-head__meta[b-62vqxsr1g8] {
    min-width: 0;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--navr-tone-line);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--navr-tone-ink);
    background: var(--mud-palette-surface);
    overflow-wrap: anywhere;
}

.navr-bt-head__title[b-62vqxsr1g8] {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-bt-head__chip[b-62vqxsr1g8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-bt-head__actions[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.navr-bt-head__actions[b-62vqxsr1g8]  .mud-button-root {
    background: var(--mud-palette-surface);
}

/* ── Sub headers — Basic information / Fields (the settings groups of the template) ──
   Full-bleed across the top of their panel in the group's semantic tone (the same tone the block editor gives the
   same kind of group); the accent bar comes from the shared .navr-tone-bar. */
.navr-bt-subhead[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
    min-height: 3.5rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--navr-tone-line);
    border-start-start-radius: var(--mud-default-borderradius, 4px);
    border-start-end-radius: var(--mud-default-borderradius, 4px);
    background: var(--navr-tone-bg-open);
}

.navr-bt-subhead__icon[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-bt-subhead__title[b-62vqxsr1g8],
.navr-bt-subhead[b-62vqxsr1g8]  .navr-bt-subhead__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-bt-subhead[b-62vqxsr1g8]  .navr-bt-subhead__action {
    flex: 0 0 auto;
}

/* Narrow screens: the header band stacks — icon + identity, then the Working Details action on its own line. */
@media (max-width: 599.98px) {
    .navr-bt-head[b-62vqxsr1g8] {
        padding: 0.75rem;
    }

    .navr-bt-head__icon[b-62vqxsr1g8] {
        width: 2.125rem;
        height: 2.125rem;
    }

    .navr-bt-head__actions[b-62vqxsr1g8] {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .navr-bt-subhead[b-62vqxsr1g8] {
        padding-inline: 0.75rem;
    }
}
/* /Components/Cms/CardContentItem.razor.rz.scp.css */
/* One Card Content row — scoped via Blazor CSS isolation. Same visual language as the Card Settings workspace
   (CollapsibleSettingsSection): MudBlazor palette variables, 10px bordered containers, a primary-tinted open state.
   The row is its own size container, so the summary and the actions re-flow by the width the editor actually has
   (beside the Media panel, in a narrow drawer, on a phone) instead of the viewport. */

.navr-card-item[b-3au4y15vnd] {
    container-type: inline-size;
    list-style: none;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-card-item:hover[b-3au4y15vnd] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-card-item--expanded[b-3au4y15vnd] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Summary row ── */
.navr-card-item__row[b-3au4y15vnd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    border-radius: 9px;
}

.navr-card-item--expanded > .navr-card-item__row[b-3au4y15vnd] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

/* The whole summary is one real button: order, thumbnail and text are a single click / keyboard target. */
.navr-card-item__summary[b-3au4y15vnd] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.navr-card-item__summary:hover[b-3au4y15vnd] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-card-item__summary:focus[b-3au4y15vnd] {
    outline: none;
}

.navr-card-item__summary:focus-visible[b-3au4y15vnd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-card-item__order[b-3au4y15vnd] {
    flex: 0 0 auto;
    min-width: 2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-card-item--expanded .navr-card-item__order[b-3au4y15vnd] {
    color: var(--mud-palette-primary);
}

.navr-card-item__thumb[b-3au4y15vnd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.625rem;
    overflow: hidden;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
}

.navr-card-item__thumb img[b-3au4y15vnd] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navr-card-item__text[b-3au4y15vnd] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-card-item__meta[b-3au4y15vnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    min-width: 0;
}

/* Card type — a chip with a label, never colour alone. */
.navr-card-item__kind[b-3au4y15vnd],
.navr-card-item__chip[b-3au4y15vnd],
.navr-card-item__editing[b-3au4y15vnd] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__kind--image[b-3au4y15vnd] {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.navr-card-item__kind--text[b-3au4y15vnd] {
    color: var(--mud-palette-info, #2196f3);
    background: color-mix(in srgb, var(--mud-palette-info, #2196f3) 12%, transparent);
}

.navr-card-item__kind--missing[b-3au4y15vnd] {
    color: var(--mud-palette-warning-darken, #b26a00);
    background: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 16%, transparent);
}

.navr-card-item__chip[b-3au4y15vnd] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    padding-block: 0;
}

.navr-card-item__editing[b-3au4y15vnd] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-card-item__title[b-3au4y15vnd] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__title--empty[b-3au4y15vnd] {
    font-weight: 500;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.navr-card-item__desc[b-3au4y15vnd] {
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__media[b-3au4y15vnd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 16rem;
    font-size: 0.71875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.5));
}

.navr-card-item__media-name[b-3au4y15vnd] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Actions ── */
.navr-card-item__actions[b-3au4y15vnd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.navr-card-item__actions[b-3au4y15vnd]  .navr-card-item__edit {
    margin-inline: 0.25rem;
    min-width: 5.5rem;
}

/* ── Editor (only the card being edited) ── */
.navr-card-item__editor[b-3au4y15vnd] {
    min-width: 0;
    padding: 0.75rem 0.875rem 0.875rem;
}

/* Narrow rows (a phone, or a narrow editor column): actions move under the summary, full width, so the title and
   description keep their room and every action stays a comfortable touch target. */
@container (max-width: 520px) {
    .navr-card-item__row[b-3au4y15vnd] {
        flex-wrap: wrap;
        padding: 0.5rem;
    }

    .navr-card-item__summary[b-3au4y15vnd] {
        flex-basis: 100%;
        gap: 0.5rem;
    }

    .navr-card-item__order[b-3au4y15vnd] {
        min-width: 1.5rem;
    }

    .navr-card-item__thumb[b-3au4y15vnd] {
        width: 3rem;
        height: 2.25rem;
    }

    .navr-card-item__actions[b-3au4y15vnd] {
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    }

    .navr-card-item__actions[b-3au4y15vnd]  .navr-card-item__edit {
        margin-inline-start: auto;
    }

    /* Inline padding stays >= the editor MudGrid's 12px negative gutter, so its fields never poke past the card. */
    .navr-card-item__editor[b-3au4y15vnd] {
        padding: 0.625rem 0.75rem 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-card-item[b-3au4y15vnd] {
        transition: none;
    }
}
/* /Components/Cms/CardContentList.razor.rz.scp.css */
/* Card Content workspace shell — scoped via Blazor CSS isolation, in the Card Settings workspace's visual language. */

.navr-card-list[b-zqes6oc3bl] {
    margin-top: 0.5rem;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.navr-card-list--open[b-zqes6oc3bl] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-card-list__header[b-zqes6oc3bl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
}

.navr-card-list--open > .navr-card-list__header[b-zqes6oc3bl] {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
}

.navr-card-list__toggle[b-zqes6oc3bl] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.375rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.navr-card-list__toggle:hover[b-zqes6oc3bl] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-card-list__toggle:focus[b-zqes6oc3bl] {
    outline: none;
}

.navr-card-list__toggle:focus-visible[b-zqes6oc3bl] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-card-list__icon[b-zqes6oc3bl] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-card-list__heading[b-zqes6oc3bl] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-card-list__chevron[b-zqes6oc3bl] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease;
}

.navr-card-list--open .navr-card-list__chevron[b-zqes6oc3bl] {
    transform: rotate(180deg);
}

.navr-card-list__body[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.75rem;
}

.navr-card-list__hint[b-zqes6oc3bl] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-card-list__items[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.navr-card-list__empty[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-card-list__empty-title[b-zqes6oc3bl] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-card-list__empty-text[b-zqes6oc3bl] {
    margin: 0 0 0.5rem;
    font-size: 0.78125rem;
    line-height: 1.45;
    max-width: 32rem;
}

@media (max-width: 599.98px) {
    .navr-card-list__body[b-zqes6oc3bl] {
        padding: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-card-list__chevron[b-zqes6oc3bl] {
        transition: none;
    }
}
/* /Components/Cms/CardPresentationPanel.razor.rz.scp.css */
/* Card & Gallery settings workspace — scoped via Blazor CSS isolation.
   The workspace is a size container, so its two-column layout follows the width the editor actually has (the
   Admin sidebar open or closed, a laptop or a wide monitor) instead of the viewport. */

.navr-card-workspace[b-zsg7czn07j] {
    container-type: inline-size;
    min-width: 0;
}

/* Narrow: one column, live preview first so the result is visible without scrolling past thirteen groups. */
.navr-card-workspace__layout[b-zsg7czn07j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.navr-card-workspace__settings[b-zsg7czn07j] {
    min-width: 0;
    order: 2;
}

.navr-card-workspace__preview[b-zsg7czn07j] {
    min-width: 0;
    order: 1;
}

.navr-card-workspace__toolbar[b-zsg7czn07j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.navr-card-workspace__sections[b-zsg7czn07j] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Live preview ── */
.navr-card-workspace__preview-inner[b-zsg7czn07j] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.navr-card-workspace__preview-head[b-zsg7czn07j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.navr-card-workspace__preview-title[b-zsg7czn07j] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

/* A neutral stage so the card's own surface, border and shadow read clearly against it. */
.navr-card-workspace__preview-stage[b-zsg7czn07j] {
    padding: 1rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #f5f5f5);
    overflow: hidden;
}

/* The card container is laid out the way the public gallery lays out ONE cell (CustomBlockSection.razor.css
   .cblock__gallery): a grid whose card is a grid item, so the card's own justify-self / width / media-only sizing
   rules behave exactly as on the site. Roughly one gallery column wide, so the sample card has realistic
   proportions even when the preview spans the full width on a tablet, and does not push the settings far down. */
.navr-card-preview[b-zsg7czn07j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 24rem;
    margin-inline: auto;
    min-width: 0;
}

/* Card presentation "Card width": the public track becomes min(card width, 100%) wide, placed by the horizontal
   alignment — the same expression here, so a configured width is visible in the preview instead of ignored. */
.navr-card-preview.cblock__gallery--fixed-w[b-zsg7czn07j] {
    grid-template-columns: min(var(--nc-card-w, 320px), 100%);
    justify-content: var(--nc-grid-justify, center);
    max-width: 100%;
}

.navr-card-workspace__preview-hint[b-zsg7czn07j] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: settings left, preview right and sticky, so every change is visible next to the control that made it. */
@container (min-width: 860px) {
    .navr-card-workspace__layout[b-zsg7czn07j] {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 34%);
        align-items: start;
    }

    .navr-card-workspace__settings[b-zsg7czn07j] {
        order: 1;
    }

    .navr-card-workspace__preview[b-zsg7czn07j] {
        order: 2;
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + 1rem);
    }

    .navr-card-workspace__preview-inner[b-zsg7czn07j] {
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - 2rem);
        overflow-y: auto;
    }
}
/* /Components/Cms/CmsBackgroundSection.razor.rz.scp.css */
/* Background section — swatch grid, image preview and picker. Scoped via Blazor CSS isolation. */

.cms-bg-swatches[b-1qfcz6zyub] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cms-bg-swatch[b-1qfcz6zyub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 5.25rem;
    padding: 0.35rem;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 0.6rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.cms-bg-swatch:hover[b-1qfcz6zyub] {
    border-color: rgba(0, 0, 0, 0.18);
}

.cms-bg-swatch--on[b-1qfcz6zyub] {
    border-color: #1f5130;
    background: rgba(31, 81, 48, 0.07);
}

.cms-bg-swatch__chip[b-1qfcz6zyub] {
    display: block;
    width: 100%;
    height: 2.1rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.cms-bg-swatch__label[b-1qfcz6zyub] {
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.cms-bg-preview[b-1qfcz6zyub] {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #eee 0 8px, #f8f8f8 8px 16px);
}

.cms-bg-preview img[b-1qfcz6zyub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-bg-preview__empty[b-1qfcz6zyub] {
    font-size: 0.78rem;
    opacity: 0.7;
}

.cms-bg-picker[b-1qfcz6zyub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.4rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.6rem;
}

.cms-bg-picker__item[b-1qfcz6zyub] {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.45rem;
    overflow: hidden;
    cursor: pointer;
    background: none;
    aspect-ratio: 4 / 3;
}

.cms-bg-picker__item--on[b-1qfcz6zyub] {
    border-color: #1f5130;
}

.cms-bg-picker__item img[b-1qfcz6zyub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cms-bg-sources[b-1qfcz6zyub] {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.cms-bg-sources li[b-1qfcz6zyub] {
    margin-bottom: 0.2rem;
}

.cms-bg-sources span[b-1qfcz6zyub] {
    opacity: 0.75;
}
/* /Components/Cms/CmsPublishBar.razor.rz.scp.css */
/* Publishing strip — scoped via Blazor CSS isolation. The same palette and radius as the Block Editor frame and the
   shared dialogs; a coloured start border says pending (amber), live (green) or informational (blue). Wraps to a
   stacked layout on narrow screens and never scrolls horizontally. */

.navr-publish-bar[b-zj7150p9lv] {
    --navr-pb-accent: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.875rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 4px solid var(--navr-pb-accent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-publish-bar--pending[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-warning); }
.navr-publish-bar--live[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-success); }
.navr-publish-bar--info[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-info); }

.navr-publish-bar__icon[b-zj7150p9lv] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--navr-pb-accent);
    background: color-mix(in srgb, var(--navr-pb-accent) 13%, transparent);
}

.navr-publish-bar__status[b-zj7150p9lv] {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-publish-bar__badges[b-zj7150p9lv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.navr-publish-bar__message[b-zj7150p9lv] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-publish-bar__status[b-zj7150p9lv]  .navr-publish-bar__progress {
    max-width: 16rem;
}

.navr-publish-bar__actions[b-zj7150p9lv] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 599.98px) {
    .navr-publish-bar[b-zj7150p9lv] {
        padding: 0.625rem 0.75rem;
    }

    .navr-publish-bar__icon[b-zj7150p9lv] {
        width: 2.125rem;
        height: 2.125rem;
    }

    .navr-publish-bar__status[b-zj7150p9lv] {
        flex-basis: calc(100% - 3rem);
    }

    .navr-publish-bar__actions[b-zj7150p9lv] {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .navr-publish-bar__actions[b-zj7150p9lv]  .mud-button-root:not(.mud-icon-button) {
        flex: 1 1 auto;
    }
}
/* /Components/Cms/ContentBlockEditor.razor.rz.scp.css */
/* Content block editor — scoped styles for the pieces inside the Block Editor groups: the media workspace, the Why
   Narail card list, the template card-settings summary and small tags / empty states. Palette variables only, sized
   by the width each area actually has, never wider than its group. MudBlazor components are reached with ::deep. */

/* ── Small shared pieces ── */
.cbe-tag[b-efudo8bzth] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.cbe-tag--muted[b-efudo8bzth] {
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    color: var(--mud-palette-text-secondary);
    background: transparent;
}

.cbe-tag--ok[b-efudo8bzth] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
}

.cbe-tag--warn[b-efudo8bzth] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.cbe-note[b-efudo8bzth] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.cbe-empty[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-empty__title[b-efudo8bzth] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-empty__text[b-efudo8bzth] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ── Text colour field with a live swatch ── */
.cbe-color[b-efudo8bzth] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.cbe-color__swatch[b-efudo8bzth] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
    background-size: 10px 10px;
}

.cbe-color[b-efudo8bzth]  .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── List heading (count + add) ── */
.cbe-list-head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cbe-list-head__count[b-efudo8bzth] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Why Narail feature cards ── */
.cbe-why-cards[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cbe-why-card[b-efudo8bzth] {
    container: cbe-why-card / inline-size;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.cbe-why-card--hidden[b-efudo8bzth] {
    border-style: dashed;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-why-card__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.cbe-why-card__icon[b-efudo8bzth] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 1.125rem;
    background: var(--mud-palette-surface);
}

.cbe-why-card__name[b-efudo8bzth] {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cbe-why-card__number[b-efudo8bzth] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cbe-why-card__label[b-efudo8bzth] {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.cbe-why-card__tools[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

.cbe-why-card__fields[b-efudo8bzth] {
    display: grid;
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.75rem 0.75rem;
}

.cbe-why-card__desc[b-efudo8bzth] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

@container cbe-why-card (max-width: 30rem) {
    .cbe-why-card__fields[b-efudo8bzth],
    .cbe-why-card__desc[b-efudo8bzth] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cbe-why-card__tools[b-efudo8bzth] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/* ── Custom: media field notes, gallery field sections, template settings summary ── */
.cbe-field-note[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
}

.cbe-field-note__label[b-efudo8bzth] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-field-note__hint[b-efudo8bzth] {
    flex: 1 1 12rem;
    font-size: 0.75rem;
}

.cbe-gallery-field[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.cbe-gallery-field + .cbe-gallery-field[b-efudo8bzth] {
    padding-top: 0.875rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.cbe-gallery-field__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.cbe-gallery-field__title[b-efudo8bzth] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-template-settings[b-efudo8bzth] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-template-settings__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

.cbe-template-settings__title[b-efudo8bzth] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cbe-template-settings__list[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}

.cbe-template-settings__list dt[b-efudo8bzth] {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.cbe-template-settings__list dd[b-efudo8bzth] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.cbe-template-settings__note[b-efudo8bzth] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ── Media workspace ── */
.cbe-media[b-efudo8bzth] {
    container: cbe-media / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cbe-media__toolbar[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.cbe-media__summary[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cbe-media__toolbar[b-efudo8bzth]  .cbe-media__target {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.cbe-media__actions[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-inline-start: auto;
}

.cbe-media__fields[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cbe-media__grid[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cbe-media__grid--single[b-efudo8bzth] {
    grid-template-columns: minmax(0, 22rem);
}

.cbe-media-item[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.cbe-media-item__thumb[b-efudo8bzth] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.cbe-media-item__thumb img[b-efudo8bzth],
.cbe-media-item__thumb video[b-efudo8bzth] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbe-media-item__badge[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-start: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
}

.cbe-media-item__order[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.cbe-media-item__body[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem 0.25rem;
    min-width: 0;
}

.cbe-media-item__name[b-efudo8bzth] {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.cbe-media-item__actions[b-efudo8bzth] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-top: auto;
    padding: 0.25rem 0.375rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.cbe-media-item__spacer[b-efudo8bzth] {
    flex: 1 1 auto;
}

/* ── Media library picker ── */
.cbe-library[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-library__head[b-efudo8bzth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cbe-library__title[b-efudo8bzth] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-library__hint[b-efudo8bzth] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cbe-library__selection[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cbe-library__grid[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
    gap: 0.625rem;
}

.cbe-library__tile[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.25rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.cbe-library__tile--selected[b-efudo8bzth] {
    border: 2px solid var(--mud-palette-primary);
    padding: calc(0.25rem - 1px);
}

.cbe-library__pick[b-efudo8bzth] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.cbe-library__pick:focus-visible[b-efudo8bzth] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cbe-library__pick img[b-efudo8bzth],
.cbe-library__pick video[b-efudo8bzth] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbe-library__check[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    display: inline-flex;
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.cbe-library__name[b-efudo8bzth] {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
}

.cbe-library__tile-actions[b-efudo8bzth] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

@container cbe-media (max-width: 34rem) {
    .cbe-media__actions[b-efudo8bzth] {
        margin-inline-start: 0;
        width: 100%;
    }

    .cbe-media__actions[b-efudo8bzth]  .mud-button-root {
        flex: 1 1 auto;
    }

    .cbe-media__toolbar[b-efudo8bzth]  .cbe-media__target {
        max-width: none;
        flex-basis: 100%;
    }

    .cbe-media__grid--single[b-efudo8bzth] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Cms/PublishDialog.razor.rz.scp.css */
/* Publish / Versions dialog content — scoped via Blazor CSS isolation. The frame and section cards come from
   AdminDialogFrame / AdminDialogSection; this file styles what is specific to publishing: the warning, the two version
   cards, the history list (its own scroll area) and the publish button. Palette variables only; nothing scrolls
   horizontally at any width. */

.pd-loading[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0.25rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* ── 1. Warning ── */
.pd-warning[b-fcy36cdaqn] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

.pd-warning[b-fcy36cdaqn]  .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.pd-warning > div[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.55;
}

.pd-warning strong[b-fcy36cdaqn] {
    font-weight: 600;
}

/* ── 2. Version cards ── */
.pd-versions[b-fcy36cdaqn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.625rem;
}

.pd-card[b-fcy36cdaqn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-top: 3px solid var(--pd-card-accent, var(--mud-palette-lines-default));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.pd-card--draft[b-fcy36cdaqn] { --pd-card-accent: var(--mud-palette-warning); }
.pd-card--live[b-fcy36cdaqn] { --pd-card-accent: var(--mud-palette-success); }

.pd-card__head[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
}

.pd-card__label[b-fcy36cdaqn] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pd-card__version[b-fcy36cdaqn] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.pd-card__version--none[b-fcy36cdaqn] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.pd-card__empty[b-fcy36cdaqn] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pd-card__facts[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.pd-card__facts > div[b-fcy36cdaqn] {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.pd-card__facts dt[b-fcy36cdaqn] {
    color: var(--mud-palette-text-secondary);
}

.pd-card__facts dd[b-fcy36cdaqn] {
    margin: 0;
    min-width: 0;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* ── 6. History: its own scroll area ── */
.pd-count[b-fcy36cdaqn] {
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.05));
}

.pd-history[b-fcy36cdaqn] {
    position: relative;
    max-height: min(18rem, 40dvh);
    margin: 0;
    padding: 0.25rem 0.25rem 0.25rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.pd-history:focus-visible[b-fcy36cdaqn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.pd-history__item[b-fcy36cdaqn] {
    --pd-dot: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.3));
    position: relative;
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem 0.5rem 0.25rem;
}

.pd-history__item + .pd-history__item[b-fcy36cdaqn] {
    border-top: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.pd-history__item--draft[b-fcy36cdaqn] { --pd-dot: var(--mud-palette-warning); }
.pd-history__item--live[b-fcy36cdaqn] { --pd-dot: var(--mud-palette-success); }

.pd-history__item--live[b-fcy36cdaqn] {
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

.pd-history__dot[b-fcy36cdaqn] {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background: var(--pd-dot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-dot) 22%, transparent);
}

.pd-history__main[b-fcy36cdaqn] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pd-history__row[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.pd-history__version[b-fcy36cdaqn] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pd-history__meta[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.pd-history__note[b-fcy36cdaqn] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .pd-card__facts > div[b-fcy36cdaqn] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* /Components/Cms/SectionMediaChooser.razor.rz.scp.css */
/* One section / card image in the section editor: thumbnail, source tag, actions, and an inline library grid. Palette
   variables only; wraps inside the width its settings field has. */
.smc[b-ni2nz17ac0] {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: start;
    width: 100%;
}

.smc__thumb[b-ni2nz17ac0] {
    width: 88px;
    height: 66px;
    border-radius: 6px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    color: var(--mud-palette-text-secondary);
}

.smc__thumb img[b-ni2nz17ac0],
.smc__thumb video[b-ni2nz17ac0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.smc__body[b-ni2nz17ac0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.smc__actions[b-ni2nz17ac0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.smc__tag[b-ni2nz17ac0] {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--mud-palette-primary);
}

.smc__tag--ok[b-ni2nz17ac0] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
}

.smc__tag--muted[b-ni2nz17ac0] {
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    color: var(--mud-palette-text-secondary);
}

.smc__library[b-ni2nz17ac0] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.375rem;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
}

.smc__tile[b-ni2nz17ac0] {
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, 0.04));
    display: grid;
    place-items: center;
}

.smc__tile img[b-ni2nz17ac0],
.smc__tile video[b-ni2nz17ac0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smc__tile--selected[b-ni2nz17ac0] {
    border-color: var(--mud-palette-primary);
}

.smc__tile:focus-visible[b-ni2nz17ac0] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}
/* /Components/Cms/SiteIconPicker.razor.rz.scp.css */
.sip[b-nbw2nhc2wq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.sip__preview[b-nbw2nhc2wq] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.sip[b-nbw2nhc2wq]  .sip__field {
    flex: 1 1 auto;
    min-width: 0;
}

.sip__option[b-nbw2nhc2wq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sip__glyph[b-nbw2nhc2wq] {
    display: inline-grid;
    color: var(--mud-palette-primary);
}
/* /Components/Cms/TemplateBackgroundSection.razor.rz.scp.css */
/* Template Background section — scoped via Blazor CSS isolation. Same visual language as the settings sections
   (CollapsibleSettingsSection) and the card workspace preview: MudBlazor palette variables only, so it follows the
   Admin theme (light / dark). Mobile first: one column, the preview stacks under the controls. */

.navr-tbg[b-ztts29x8c9] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-width: 0;
}

/* ── Header ── */
.navr-tbg__header[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-tbg__icon[b-ztts29x8c9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-tbg__heading[b-ztts29x8c9] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-tbg__title[b-ztts29x8c9] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tbg__purpose[b-ztts29x8c9] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-tbg__scope[b-ztts29x8c9] {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* ── Toned header (Block Template editor) — the "design & layout" group takes the shared mint content tone
   (tokens in wwwroot/app.css), matching the Section header group of the Page / Article block editor. ── */
.navr-tbg--toned[b-ztts29x8c9] {
    border-color: color-mix(in srgb, var(--navr-tone) 48%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-tbg--toned > .navr-tbg__header[b-ztts29x8c9] {
    position: relative;
    border-bottom-color: var(--navr-tone-line);
    background: var(--navr-tone-bg-open);
}

.navr-tbg--toned > .navr-tbg__header .navr-tbg__icon[b-ztts29x8c9] {
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-tbg--toned > .navr-tbg__header .navr-tbg__scope[b-ztts29x8c9] {
    border-color: var(--navr-tone-line);
    background: var(--mud-palette-surface);
}

/* ── Body ── */
.navr-tbg__body[b-ztts29x8c9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

/* The settings column sizes to its own content — it is never stretched to match the preview. */
.navr-tbg__controls[b-ztts29x8c9] {
    min-width: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.navr-tbg__field[b-ztts29x8c9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.navr-tbg__label[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Source buttons: a segmented control that wraps on narrow screens. */
.navr-tbg__sources[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.navr-tbg__source[b-ztts29x8c9] {
    flex: 1 1 9rem;
    min-width: 0;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.navr-tbg__source:hover[b-ztts29x8c9] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-tbg__source:focus-visible[b-ztts29x8c9],
.navr-tbg__swatch:focus-visible[b-ztts29x8c9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-tbg__source--on[b-ztts29x8c9] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.navr-tbg__count[b-ztts29x8c9] {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Current colour row */
.navr-tbg__current[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.75rem;
    min-width: 0;
}

.navr-tbg__swatch[b-ztts29x8c9] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px var(--mud-palette-surface);
    cursor: pointer;
}

.navr-tbg__value[b-ztts29x8c9] {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.navr-tbg__name[b-ztts29x8c9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tbg__code[b-ztts29x8c9] {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
}

.navr-tbg__detail[b-ztts29x8c9] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Choose Color above Reset to Automatic, right of the selected colour. */
.navr-tbg__actions[b-ztts29x8c9] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

/* About / help area */
.navr-tbg__about[b-ztts29x8c9] {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 7%, transparent);
    min-width: 0;
}

.navr-tbg__about[b-ztts29x8c9]  .navr-tbg__about-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
    color: var(--mud-palette-info);
}

.navr-tbg__about-text[b-ztts29x8c9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-tbg__about-head[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

.navr-tbg__about-lang[b-ztts29x8c9] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    overflow: hidden;
}

.navr-tbg__about-lang-btn[b-ztts29x8c9] {
    padding: 0.0625rem 0.625rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    line-height: 1.5;
    cursor: pointer;
}

.navr-tbg__about-lang-btn--on[b-ztts29x8c9] {
    background: color-mix(in srgb, var(--mud-palette-info) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.navr-tbg__about-lang-btn:focus-visible[b-ztts29x8c9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.navr-tbg__about-title[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tbg__about-text p[b-ztts29x8c9] {
    margin: 0;
    font-size: 0.78125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ── Preview ── */
.navr-tbg__preview[b-ztts29x8c9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.navr-tbg__preview-head[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.navr-tbg__preview-title[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

/* The stage IS the section: its background is the Template Background (inline style), the card inside keeps its
   own Card Background. A dashed outline marks the section's edge so a white section is still visible. */
.navr-tbg__stage[b-ztts29x8c9] {
    display: flex;
    border-radius: 8px;
    outline: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    outline-offset: -1px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.navr-tbg__sample[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;               /* centred in the stage, yet never clipped when the stage scrolls */
    padding: 1rem;
    min-width: 0;
    width: 100%;
}

/* The card container, laid out like one public gallery cell (see CardPresentationPanel.razor.css). */
.navr-tbg__sample .navr-card-preview[b-ztts29x8c9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 23rem;               /* one public gallery cell (~3 columns of the 72rem section); the inline zoom scales it */
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
    text-align: start;
}

.navr-tbg__sample .navr-card-preview.cblock__gallery--fixed-w[b-ztts29x8c9] {
    grid-template-columns: min(var(--nc-card-w, 320px), 100%);
    justify-content: var(--nc-grid-justify, center);
    max-width: 100%;
}

.navr-tbg__preview-hint[b-ztts29x8c9] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: controls beside the preview. The SETTINGS decide the section height: the preview is size-contained, so its
   (possibly tall) card never stretches the panel — it fills the row the settings create (with a sensible
   minimum) and scrolls inside its own stage when the card is taller. */
@media (min-width: 960px) {
    .navr-tbg__body[b-ztts29x8c9] {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .navr-tbg__preview[b-ztts29x8c9] {
        contain: size;
        min-height: 30rem;
    }

    .navr-tbg__stage[b-ztts29x8c9] {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .navr-tbg__preview-hint[b-ztts29x8c9] {
        flex: 0 0 auto;
    }
}

/* Tablet / mobile: settings and preview stack; the preview keeps a sensible cap and scrolls inside itself. */
@media (max-width: 959.98px) {
    .navr-tbg__stage[b-ztts29x8c9] {
        max-height: 24rem;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 599.98px) {
    .navr-tbg__header[b-ztts29x8c9],
    .navr-tbg__body[b-ztts29x8c9] {
        padding-inline: 0.75rem;
    }

    .navr-tbg__preview[b-ztts29x8c9] {
        padding: 0.75rem;
    }

    .navr-tbg__actions[b-ztts29x8c9] {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-tbg__source[b-ztts29x8c9],
    .navr-tbg__stage[b-ztts29x8c9] {
        transition: none;
    }
}
/* /Components/Pages/Appearance/CursorSettings.razor.rz.scp.css */
/* Component-scoped styles for Admin → Appearance → Cursor Settings.
   Page chrome uses MudBlazor palette variables so it re-themes with the Admin theme. The preview box sets its
   own --navr-theme-primary/--navr-gold so the engine's "theme" colour resolves inside it exactly as it would
   on the public site. The custom cursor itself is drawn by the shared navr-cursor.css — nothing here styles it. */

.cur-head[b-26p0q5jsi8] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cur-head__title[b-26p0q5jsi8] { flex: 1 1 320px; min-width: 0; }
.cur-head__intro[b-26p0q5jsi8] { opacity: .7; max-width: 78ch; margin-top: 4px; }
.cur-hint[b-26p0q5jsi8] { display: block; opacity: .62; }

.cur-layout[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 960px) {
    .cur-layout[b-26p0q5jsi8] { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
    .cur-preview-col[b-26p0q5jsi8] { position: sticky; top: 76px; }
}

.cur-settings[b-26p0q5jsi8] { min-width: 0; }

.cur-panel[b-26p0q5jsi8] {
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.cur-panel__head[b-26p0q5jsi8] { margin-bottom: 8px; }
.cur-panel__toggle[b-26p0q5jsi8] { margin-left: -8px; }
.cur-inline[b-26p0q5jsi8] { padding: 4px 16px 10px; }

.cur-slider[b-26p0q5jsi8] { padding: 2px 4px; }
.cur-slider__label[b-26p0q5jsi8] { display: flex; justify-content: space-between; font-size: .85rem; opacity: .85; }

/* ── gallery filters (100 presets / 50 icons) ── */
.cur-filters[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}
.cur-count[b-26p0q5jsi8] { text-align: right; margin-bottom: 6px; }

/* ── preset gallery ── */
.cur-presets[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.cur-preset[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 10px;
    text-align: left;
    color: inherit;
    font: inherit;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cur-preset:hover[b-26p0q5jsi8] { transform: translateY(-1px); border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider)); }
.cur-preset.is-selected[b-26p0q5jsi8] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-preset__body[b-26p0q5jsi8] { grid-row: 1; grid-column: 2; min-width: 0; }
.cur-preset__name[b-26p0q5jsi8] { display: block; font-weight: 600; font-size: .9rem; }
.cur-preset__desc[b-26p0q5jsi8] { display: block; font-size: .74rem; opacity: .65; line-height: 1.3; }
.cur-preset__family[b-26p0q5jsi8] {
    grid-row: 2; grid-column: 2;
    justify-self: start;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Tiny CSS-only thumbnail per family: the same three parts (dot / ring / ring2) styled by data-family. */
.cur-preset__thumb[b-26p0q5jsi8] {
    grid-row: 1 / span 2; grid-column: 1;
    position: relative;
    width: 56px; height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)), var(--mud-palette-surface));
    --p: var(--mud-palette-primary);
    --a: var(--mud-palette-secondary, #c9a227);
}
.cur-preset__thumb > i[b-26p0q5jsi8] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.cur-preset__dot[b-26p0q5jsi8]  { width: 7px; height: 7px; border-radius: 50%; background: var(--p); }
.cur-preset__ring[b-26p0q5jsi8] { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--p); }
.cur-preset__ring2[b-26p0q5jsi8] { display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--a); opacity: .6; }

.cur-preset__thumb[data-family="dot"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="dot"] .cur-preset__dot[b-26p0q5jsi8] { width: 14px; height: 14px; }
.cur-preset__thumb[data-family="ring"] .cur-preset__dot[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="dual"] .cur-preset__ring2[b-26p0q5jsi8],
.cur-preset__thumb[data-family="signature"] .cur-preset__ring2[b-26p0q5jsi8] { display: block; }
.cur-preset__thumb[data-family="signature"] .cur-preset__dot[b-26p0q5jsi8] { background: var(--a); box-shadow: 0 0 6px var(--a); }
.cur-preset__thumb[data-family="spotlight"] .cur-preset__ring[b-26p0q5jsi8] { border: 0; width: 40px; height: 40px; background: radial-gradient(circle, color-mix(in srgb, var(--p) 45%, transparent), transparent 70%); }
.cur-preset__thumb[data-family="lens"] .cur-preset__ring[b-26p0q5jsi8] { width: 32px; height: 32px; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.05)); border-color: var(--a); }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 0; border: 0; }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::before,
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--p); transform: translate(-50%, -50%); }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::before { width: 100%; height: 1.5px; }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::after { width: 1.5px; height: 100%; }
.cur-preset__thumb[data-family="arrow"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="arrow"] .cur-preset__dot[b-26p0q5jsi8] { width: 0; height: 0; border-radius: 0; background: none; border-left: 8px solid var(--p); border-top: 4px solid transparent; border-bottom: 12px solid transparent; transform: translate(-40%, -60%) rotate(-25deg); }
.cur-preset__thumb[data-family="hand"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="hand"] .cur-preset__dot[b-26p0q5jsi8] { width: 14px; height: 18px; border-radius: 6px 6px 8px 8px; background: var(--p); }
.cur-preset__thumb[data-family="trail"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="trail"] .cur-preset__dot[b-26p0q5jsi8] { width: 10px; height: 10px; box-shadow: -9px 4px 0 -1px color-mix(in srgb, var(--p) 70%, transparent), -17px 9px 0 -2px color-mix(in srgb, var(--p) 45%, transparent), -24px 15px 0 -3px color-mix(in srgb, var(--p) 25%, transparent); }
.cur-preset__thumb[data-family="orbit"] .cur-preset__ring2[b-26p0q5jsi8] { display: block; border-color: transparent; }
.cur-preset__thumb[data-family="orbit"] .cur-preset__ring2[b-26p0q5jsi8]::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--a); }
.cur-preset__thumb[data-family="morph"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
.cur-preset__thumb[data-family="square"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 4px; rotate: 45deg; }
.cur-preset__thumb[data-family="square"] .cur-preset__dot[b-26p0q5jsi8] { border-radius: 2px; }
.cur-preset__thumb[data-family="icon"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 6px; border-style: dashed; }

/* ── icon picker (Mode = icon) ── */
.cur-icons[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.cur-icon[b-26p0q5jsi8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    color: inherit;
    font: inherit;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cur-icon:hover[b-26p0q5jsi8] { transform: translateY(-1px); border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider)); }
.cur-icon.is-selected[b-26p0q5jsi8] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-icon__art[b-26p0q5jsi8] { display: block; width: 32px; height: 32px; color: var(--mud-palette-primary); }
.cur-icon__art svg[b-26p0q5jsi8] { display: block; width: 100%; height: 100%; }
.cur-icon__name[b-26p0q5jsi8] {
    font-size: .68rem;
    line-height: 1.15;
    text-align: center;
    opacity: .78;
    overflow-wrap: anywhere;
}

/* ── live preview ── */
.cur-preview-head[b-26p0q5jsi8] { margin-bottom: 8px; }

.cur-preview[b-26p0q5jsi8] {
    --navr-theme-primary: var(--mud-palette-primary);
    --navr-gold: #c9a227;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider));
    background: var(--mud-palette-background);
    min-height: 320px;
    overflow: hidden;
}

.cur-preview__text[b-26p0q5jsi8] { margin: 0; font-size: .9rem; line-height: 1.5; }
.cur-preview__text a[b-26p0q5jsi8] { color: var(--mud-palette-primary); text-decoration: underline; }
.cur-preview__row[b-26p0q5jsi8] { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

.cur-preview__btn[b-26p0q5jsi8],
.cur-preview__cta[b-26p0q5jsi8] {
    font: inherit;
    font-size: .82rem;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-primary);
    background: transparent;
    color: var(--mud-palette-primary);
    text-decoration: none;
}
.cur-preview__btn[disabled][b-26p0q5jsi8] { opacity: .45; }
.cur-preview__cta[b-26p0q5jsi8] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); }

.cur-preview__card[b-26p0q5jsi8] {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}
.cur-preview__card-body[b-26p0q5jsi8] { padding: 8px 10px; font-size: .8rem; display: flex; flex-direction: column; gap: 2px; }
.cur-preview__img[b-26p0q5jsi8] { display: block; width: 100%; height: 72px; object-fit: cover; }

.cur-preview__hit[b-26p0q5jsi8] {
    flex: 1 1 130px;
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: none;
    font: inherit;
}
.cur-preview__hit .cur-preview__img[b-26p0q5jsi8] { height: 100%; min-height: 110px; }
.cur-preview__hit-label[b-26p0q5jsi8] {
    position: absolute; left: 8px; bottom: 8px;
    font-size: .7rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(0,0,0,.55); color: #fff;
}

.cur-preview__car[b-26p0q5jsi8] {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    overflow: hidden;
    user-select: none;
}
.cur-preview__car span[b-26p0q5jsi8] { flex: 0 0 56px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-preview__car em[b-26p0q5jsi8] { position: absolute; right: 10px; bottom: 6px; font-size: .68rem; font-style: normal; opacity: .6; }

.cur-preview__input[b-26p0q5jsi8] {
    font: inherit;
    font-size: .85rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: inherit;
}

.cur-foot[b-26p0q5jsi8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 24px 0 8px;
    margin-top: 20px;
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Components/Pages/Appearance/FooterManagement.razor.rz.scp.css */
/* Footer Management — page layout (header, top settings navigation, tab content) and page-specific pieces (master switch, template gallery, the link /
   social / policy lists). Scoped via Blazor CSS isolation; MudBlazor palette variables only. */

/* ── Master switch ── */
.ftr-master[b-46b6a27icn] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-success);
}

.ftr-master--off[b-46b6a27icn] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
}

.ftr-master[b-46b6a27icn]  .ftr-master__icon {
    margin-top: 0.625rem;
}

.ftr-master__text[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--mud-palette-text-primary);
}

.ftr-master__hint[b-46b6a27icn] {
    margin-top: -0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ── Templates ── */
.ftr-template-bar[b-46b6a27icn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ftr-template-bar__actions[b-46b6a27icn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ftr-templates[b-46b6a27icn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: 0.625rem;
    min-width: 0;
}

.ftr-custom-template[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.ftr-custom-template__name[b-46b6a27icn] {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ftr-custom-template__description[b-46b6a27icn] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.ftr-custom-template__actions[b-46b6a27icn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* ── Lists: link columns, social links, policy links ── */
.ftr-list[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.ftr-list__head[b-46b6a27icn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.ftr-list__hint[b-46b6a27icn] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.ftr-list__empty[b-46b6a27icn] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.ftr-card[b-46b6a27icn] {
    min-width: 0;
    padding: 0.5rem 0.625rem 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.ftr-card__row[b-46b6a27icn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.ftr-card__title[b-46b6a27icn] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ftr-card__tools[b-46b6a27icn],
.ftr-link__tools[b-46b6a27icn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.ftr-card__fields[b-46b6a27icn] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
    min-width: 0;
}

.ftr-card__switch[b-46b6a27icn] {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.ftr-card__links[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    list-style: none;
}

.ftr-link[b-46b6a27icn] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border-inline-start: 2px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
}

.ftr-link--boxed[b-46b6a27icn] {
    padding: 0.5rem 0.5rem 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.ftr-link__tools[b-46b6a27icn] {
    padding-top: 0.25rem;
}

/* Narrow: the row tools move under the fields instead of squeezing them. */
@container (max-width: 30rem) {
    .ftr-link[b-46b6a27icn] {
        flex-direction: column;
    }
}

.ftr-preview-off[b-46b6a27icn] {
    font-weight: 600;
    color: var(--mud-palette-warning);
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   Page layout: header → top Footer-settings navigation → tab content. Palette variables only (light / dark):
   WARNING marks the active tab, INFO the secondary actions, SUCCESS saving / styles available.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ftr-page[b-46b6a27icn] {
    --ftr-accent: var(--mud-palette-warning);
    --ftr-accent-text: color-mix(in srgb, var(--mud-palette-warning) 78%, var(--mud-palette-text-primary));
    --ftr-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    container: ftrpage / inline-size;
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
}

/* ── Page header ── */
.ftr-head[b-46b6a27icn] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-width: 0; }
.ftr-head__main[b-46b6a27icn] { flex: 1 1 26rem; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ftr-head__icon[b-46b6a27icn] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px;
    color: #fff; background: var(--ftr-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--ftr-accent) 30%, transparent);
}
.ftr-head__icon[b-46b6a27icn]  .mud-icon-root { font-size: 1.7rem; }
.ftr-head__text[b-46b6a27icn] { min-width: 0; }
.ftr-head__title[b-46b6a27icn] { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.ftr-head__description[b-46b6a27icn] { margin: 3px 0 0; font-size: .84rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.ftr-head__actions[b-46b6a27icn] { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.ftr-head__actions[b-46b6a27icn]  .mud-button-root { min-height: 40px; }
.ftr-head__count[b-46b6a27icn] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 6px;
    font-size: .88rem; font-weight: 700; white-space: nowrap;
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

/* ── Top Footer-settings navigation: every group, one row, scrolling inside the bar on narrow screens ── */
.ftr-tabs[b-46b6a27icn] {
    min-width: 0; border-radius: 10px; background: var(--mud-palette-surface); border: 1px solid var(--ftr-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ftr-tabs__list[b-46b6a27icn] {
    list-style: none; margin: 0; padding: 6px; display: flex; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.ftr-tabs__list > li[b-46b6a27icn] { flex: 1 0 auto; }
.ftr-tab[b-46b6a27icn] {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-primary);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ftr-tab:hover[b-46b6a27icn] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.ftr-tab:focus-visible[b-46b6a27icn] { outline: 2px solid var(--ftr-accent); outline-offset: -2px; }
.ftr-tab.is-active[b-46b6a27icn] {
    color: var(--ftr-accent-text); background: color-mix(in srgb, var(--ftr-accent) 12%, transparent);
    border-bottom-color: var(--ftr-accent); border-radius: 8px 8px 0 0;
}
.ftr-tab.is-active[b-46b6a27icn]  .mud-icon-root { color: var(--ftr-accent); }

/* Narrow page: the header actions share the full width instead of stacking against the right edge. */
@container ftrpage (max-width: 599px) {
    .ftr-head__actions[b-46b6a27icn] { flex-basis: 100%; justify-content: stretch; }
    .ftr-head__actions > *[b-46b6a27icn], .ftr-head__actions[b-46b6a27icn]  .mud-button-root { flex: 1 1 auto; }
    .ftr-head__count[b-46b6a27icn] { justify-content: center; }
}

/* Wide page: every tab stays visible — the row wraps (evenly filled) instead of hiding tabs behind a scroll. */
@container ftrpage (min-width: 900px) {
    .ftr-tabs__list[b-46b6a27icn] { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
}

.ftr-panel[b-46b6a27icn] { container: ftrpanel / inline-size; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ftr-library[b-46b6a27icn] { min-width: 0; scroll-margin-top: 80px; }
.ftr-library:focus[b-46b6a27icn] { outline: none; }

/* ── Footer Design strip: master switch + the current style in one row ── */
.ftr-design-bar[b-46b6a27icn] { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; min-width: 0; }
.ftr-design-bar > .ftr-master[b-46b6a27icn] { flex: 1 1 18rem; margin: 0; }
.ftr-current[b-46b6a27icn] {
    flex: 999 1 30rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; box-sizing: border-box;
    padding: 8px 12px; border-radius: 10px; background: var(--mud-palette-surface); border: 1px solid var(--ftr-line);
}
.ftr-current__thumb[b-46b6a27icn] { flex: 0 0 132px; min-width: 0; border-radius: 6px; overflow: hidden; }
.ftr-current__text[b-46b6a27icn] { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ftr-current__label[b-46b6a27icn] { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.ftr-current__line[b-46b6a27icn] { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ftr-current__code[b-46b6a27icn] { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .84rem; color: var(--mud-palette-error); }
.ftr-current__name[b-46b6a27icn] { min-width: 0; font-weight: 700; font-size: .88rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.ftr-current__cat[b-46b6a27icn] { font-size: .76rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ftr-current__none[b-46b6a27icn] { flex: 1 1 auto; margin: 0; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.ftr-current__actions[b-46b6a27icn] { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.ftr-current__note[b-46b6a27icn] {
    flex: 1 1 100%; margin: 0; padding: 6px 10px; border-radius: 8px; font-size: .75rem; line-height: 1.45; color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}

.ftr-status__item[b-46b6a27icn] { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: .8rem; overflow-wrap: anywhere; }
.ftr-status__item--saved[b-46b6a27icn] { font-weight: 600; color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
.ftr-status__item--unsaved[b-46b6a27icn] { font-weight: 600; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.ftr-status__item[b-46b6a27icn]  .mud-icon-root { color: inherit; }

/* ── A settings tab: the group's settings beside the live footer (preview below on narrow screens) ── */
.ftr-editor[b-46b6a27icn] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ftr-editor__settings[b-46b6a27icn] { min-width: 0; }
.ftr-editor__preview[b-46b6a27icn] {
    min-width: 0; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 12px;
    border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--ftr-line);
}
.ftr-editor__preview-head[b-46b6a27icn] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ftr-editor__preview-title[b-46b6a27icn] { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ftr-editor__preview-title[b-46b6a27icn]  .mud-icon-root { color: var(--mud-palette-info); }
.ftr-editor__preview-badge[b-46b6a27icn] {
    padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

@container ftrpanel (min-width: 960px) {
    .ftr-editor[b-46b6a27icn] { flex-direction: row; align-items: flex-start; }
    .ftr-editor__settings[b-46b6a27icn] { flex: 1 1 0; }
    .ftr-editor__preview[b-46b6a27icn] { flex: 1.25 1 0; position: sticky; top: 76px; }
}
/* /Components/Pages/Appearance/FooterStyleGallery.razor.rz.scp.css */
/* Footer Style Library — Footer Design on Footer Management: the Categories panel (Main | Sub) on the left, the library
   (controls, style cards, pager) on the right. Scoped; MudBlazor palette variables only, so it follows the Admin theme
   (light / dark): WARNING is the active-selection accent, INFO the secondary action, SUCCESS the Use Style action.
   Both halves lay out by the width they actually have and never scroll the page horizontally. */

.fsg[b-ad5pvo64w2] {
    container: fsgroot / inline-size;
    min-width: 0;
    --fsg-accent: var(--mud-palette-warning);
    --fsg-accent-text: color-mix(in srgb, var(--mud-palette-warning) 78%, var(--mud-palette-text-primary));
    --fsg-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}
.fsg__layout[b-ad5pvo64w2] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ════════════ LEFT: Categories ════════════ */
.fsg__cats[b-ad5pvo64w2] {
    container: fsgcats / inline-size;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--fsg-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}
.fsg__cats-title[b-ad5pvo64w2] {
    margin: 0; padding: 14px 16px 12px; font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--fsg-line);
}
.fsg__nav[b-ad5pvo64w2] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.fsg__nav-col[b-ad5pvo64w2] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fsg__nav-col--sub[b-ad5pvo64w2] { border-top: 1px solid var(--fsg-line); }
.fsg__nav-title[b-ad5pvo64w2] { margin: 0; padding: 12px 16px 6px; font-size: .86rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.fsg__nav-list[b-ad5pvo64w2] {
    list-style: none; margin: 0; padding: 2px 6px 10px; display: flex; flex-direction: column; gap: 1px;
    max-height: 300px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.fsg__nav-list > li[b-ad5pvo64w2] { min-width: 0; }
.fsg__nav-item[b-ad5pvo64w2] {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box;
    padding: 7px 8px 7px 10px; border-radius: 8px; cursor: pointer; text-align: start;
    font: inherit; font-size: .84rem; font-weight: 500; line-height: 1.3; color: var(--mud-palette-text-primary);
    background: transparent; border: 0;
    transition: background-color .15s ease, color .15s ease;
}
.fsg__nav-item:hover[b-ad5pvo64w2] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.fsg__nav-item:focus-visible[b-ad5pvo64w2] { outline: 2px solid var(--fsg-accent); outline-offset: -2px; }
.fsg__nav-item[b-ad5pvo64w2]  .fsg__nav-icon { flex: 0 0 auto; font-size: 1.15rem; color: var(--mud-palette-text-primary); opacity: .85; }
.fsg__nav-name[b-ad5pvo64w2] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fsg__nav-count[b-ad5pvo64w2] { flex: 0 0 auto; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.fsg__nav-item[b-ad5pvo64w2]  .fsg__nav-chev { flex: 0 0 auto; font-size: 1.1rem; color: var(--mud-palette-text-secondary); transform: rotate(90deg); }
.fsg__nav-item.is-active[b-ad5pvo64w2] { color: var(--fsg-accent-text); font-weight: 600; background: color-mix(in srgb, var(--fsg-accent) 12%, transparent); }
.fsg__nav-item.is-active .fsg__nav-count[b-ad5pvo64w2],
.fsg__nav-item.is-active[b-ad5pvo64w2]  .fsg__nav-icon,
.fsg__nav-item.is-active[b-ad5pvo64w2]  .fsg__nav-chev { color: var(--fsg-accent-text); opacity: 1; }

.fsg__nav-empty[b-ad5pvo64w2] { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px 32px; text-align: center; }
.fsg__nav-empty[b-ad5pvo64w2]  .fsg__nav-empty-icon { font-size: 2.6rem; color: var(--mud-palette-text-secondary); opacity: .6; margin-bottom: 6px; }
.fsg__nav-empty-title[b-ad5pvo64w2] { margin: 0; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.fsg__nav-empty-hint[b-ad5pvo64w2] { margin: 0; max-width: 16rem; font-size: .78rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

/* Side by side: Main Category | Sub Category, each list scrolling in its own column to the panel's height. */
@container fsgcats (min-width: 340px) {
    .fsg__nav[b-ad5pvo64w2] { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .fsg__nav-col--sub[b-ad5pvo64w2] { border-top: 0; border-inline-start: 1px solid var(--fsg-line); }

    .fsg__nav-item[b-ad5pvo64w2]  .fsg__nav-chev { transform: none; }
    .fsg__nav-item:dir(rtl)[b-ad5pvo64w2]  .fsg__nav-chev { transform: scaleX(-1); }
}

/* ════════════ RIGHT: the library ════════════ */
.fsg__main[b-ad5pvo64w2] {
    container: fsg / inline-size;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fsg__head[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.fsg__head-text[b-ad5pvo64w2] { flex: 1 1 16rem; min-width: 0; }
.fsg__title[b-ad5pvo64w2] { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.fsg__meta[b-ad5pvo64w2] { margin: 3px 0 0; font-size: .82rem; color: var(--mud-palette-text-secondary); }

.fsg__controls[b-ad5pvo64w2] { flex: 1 1 36rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.fsg__search[b-ad5pvo64w2] { flex: 1 1 15rem; min-width: 0; max-width: 20rem; }
.fsg__status[b-ad5pvo64w2] { flex: 0 1 10rem; min-width: 8rem; }
.fsg__sort[b-ad5pvo64w2] { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fsg__sort-label[b-ad5pvo64w2] { font-size: .84rem; color: var(--mud-palette-text-primary); white-space: nowrap; }
.fsg__sort[b-ad5pvo64w2]  .mud-select { min-width: 10rem; }
.fsg[b-ad5pvo64w2]  .fsg__controls .mud-input-control { margin: 0; }
.fsg__views[b-ad5pvo64w2] { display: inline-flex; gap: 4px; }
.fsg__view[b-ad5pvo64w2] {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--fsg-line);
    transition: background-color .15s ease, color .15s ease;
}
.fsg__view.is-active[b-ad5pvo64w2] { color: var(--mud-palette-info-text, #fff); background: var(--mud-palette-info); border-color: var(--mud-palette-info); }
.fsg__view:focus-visible[b-ad5pvo64w2] { outline: 2px solid var(--mud-palette-info); outline-offset: 2px; }

.fsg__showing-row[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 30px; }
.fsg__showing[b-ad5pvo64w2] { margin: 0; font-size: .86rem; color: var(--mud-palette-text-secondary); }
.fsg__scope[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: .82rem; color: var(--mud-palette-text-primary); }
.fsg__scope-label[b-ad5pvo64w2] { color: var(--mud-palette-text-secondary); }
.fsg__scope[b-ad5pvo64w2]  .fsg__scope-chev { font-size: 1.05rem; color: var(--fsg-accent-text); }
.fsg__scope:dir(rtl)[b-ad5pvo64w2]  .fsg__scope-chev { transform: scaleX(-1); }
.fsg__scope-chip[b-ad5pvo64w2] { padding: 0 8px; border-radius: 999px; font-size: .76rem; background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); overflow-wrap: anywhere; }
.fsg__showing-row[b-ad5pvo64w2]  .fsg__reset { margin-inline-start: auto; }
.fsg__empty[b-ad5pvo64w2] { margin: 0; padding: 28px 18px; text-align: center; border-radius: 12px; font-size: .88rem; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }

/* ── style cards ── */
.fsg__grid[b-ad5pvo64w2] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fsg__grid > li[b-ad5pvo64w2] { min-width: 0; }
.fsg__card[b-ad5pvo64w2] {
    position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; min-width: 0;
    padding: 0 0 12px; box-sizing: border-box; overflow: hidden;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--fsg-line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fsg__card:hover[b-ad5pvo64w2] { box-shadow: 0 10px 24px rgba(16, 24, 40, .10); transform: translateY(-1px); }
.fsg__card.is-selected[b-ad5pvo64w2] { border-color: var(--mud-palette-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 35%, transparent), 0 8px 22px rgba(16, 24, 40, .10); }
.fsg__card-preview[b-ad5pvo64w2] {
    display: block; width: 100%; padding: 0; margin: 0; border: 0; cursor: zoom-in;
    background: transparent; font: inherit; color: inherit; overflow: hidden; border-radius: 10px 10px 0 0;
}
.fsg__card-preview:focus-visible[b-ad5pvo64w2] { outline: 2px solid var(--mud-palette-info); outline-offset: -2px; }
.fsg__card-text[b-ad5pvo64w2] { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 12px 0; }
.fsg__card-line[b-ad5pvo64w2] { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fsg__card-code[b-ad5pvo64w2] { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .86rem; color: var(--mud-palette-error); }
.fsg__card-name[b-ad5pvo64w2] { min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fsg__card-cat[b-ad5pvo64w2] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; min-width: 0; font-size: .8rem; line-height: 1.35; color: var(--mud-palette-text-primary); }
.fsg__card-cat[b-ad5pvo64w2]  .fsg__card-chev { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.fsg__card-cat:dir(rtl)[b-ad5pvo64w2]  .fsg__card-chev { transform: scaleX(-1); }
.fsg__card-sub[b-ad5pvo64w2] { color: var(--mud-palette-info); }
.fsg__card-tags[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fsg__tag[b-ad5pvo64w2] {
    padding: 1px 8px; border-radius: 4px; font-size: .72rem; font-weight: 600; line-height: 1.5;
    color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
}
.fsg__card-actions[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 0; margin-top: auto; }
.fsg__card-actions[b-ad5pvo64w2]  .mud-button-root { flex: 1 1 6rem; min-width: 0; }
.fsg__badge[b-ad5pvo64w2] {
    position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
    color: var(--mud-palette-warning-darken, #7a4b00); background: color-mix(in srgb, #fff 88%, var(--mud-palette-warning));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.fsg__badge--current[b-ad5pvo64w2] { color: var(--mud-palette-success-darken, #1b5e20); background: color-mix(in srgb, #fff 86%, var(--mud-palette-success)); }

/* ── list view: thumbnail | text | actions in one row ── */
.fsg__grid--list[b-ad5pvo64w2] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
.fsg__grid--list .fsg__card[b-ad5pvo64w2] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px; }
.fsg__grid--list .fsg__card-preview[b-ad5pvo64w2] { flex: 0 1 240px; min-width: 160px; border-radius: 8px; }
.fsg__grid--list .fsg__card-text[b-ad5pvo64w2] { flex: 1 1 14rem; padding: 0; }
.fsg__grid--list .fsg__card-actions[b-ad5pvo64w2] { flex: 0 1 15rem; padding: 0; margin-top: 0; }

/* ── pager ── */
.fsg__pager[b-ad5pvo64w2] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 6px; }
.fsg__pager-spacer[b-ad5pvo64w2] { flex: 1 1 0; }
.fsg__pages-wrap[b-ad5pvo64w2] { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.fsg__pageof[b-ad5pvo64w2] { font-size: .84rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.fsg[b-ad5pvo64w2]  .fsg__pages { display: none; }
.fsg__goto[b-ad5pvo64w2] { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: .84rem; color: var(--mud-palette-text-primary); white-space: nowrap; }
.fsg__goto-input[b-ad5pvo64w2] {
    width: 4.5rem; height: 34px; box-sizing: border-box; padding: 0 10px; border-radius: 6px; font: inherit; font-size: .86rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--fsg-line);
}
.fsg__goto-input:focus-visible[b-ad5pvo64w2] { outline: 2px solid var(--mud-palette-info); outline-offset: 1px; }
.fsg__goto-of[b-ad5pvo64w2] { color: var(--mud-palette-text-secondary); }

@container fsg (min-width: 540px) {
    .fsg__grid[b-ad5pvo64w2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fsg[b-ad5pvo64w2]  .fsg__pages { display: flex; }
    .fsg__pageof[b-ad5pvo64w2] { display: none; }
}

@container fsg (min-width: 820px) {
    .fsg__grid[b-ad5pvo64w2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container fsg (min-width: 1300px) {
    .fsg__grid[b-ad5pvo64w2] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Narrow library: the pager stacks, go-to under the page buttons. */
@container fsg (max-width: 539px) {
    .fsg__pager-spacer[b-ad5pvo64w2] { display: none; }
    .fsg__pages-wrap[b-ad5pvo64w2], .fsg__goto[b-ad5pvo64w2] { flex: 1 1 100%; justify-content: center; }
    .fsg__search[b-ad5pvo64w2] { max-width: none; flex-basis: 100%; }
}

/* Wide: Categories LEFT (sticky, as tall as the viewport allows, each list scrolling inside) | library RIGHT.
   Narrower: the Categories panel sits above the library, not sticky, each list capped at 300px. */
@container fsgroot (min-width: 900px) {
    .fsg__layout[b-ad5pvo64w2] { flex-direction: row; align-items: flex-start; }
    .fsg__cats[b-ad5pvo64w2] { flex: 0 0 clamp(380px, 30%, 460px); position: sticky; top: 76px; height: calc(100vh - 92px); max-height: 1100px; }
    .fsg__main[b-ad5pvo64w2] { flex: 1 1 0; }
    .fsg__nav-list[b-ad5pvo64w2] { max-height: none; flex: 1 1 auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fsg__card[b-ad5pvo64w2], .fsg__nav-item[b-ad5pvo64w2], .fsg__view[b-ad5pvo64w2] { transition: none; }
    .fsg__card:hover[b-ad5pvo64w2] { transform: none; }
}
/* /Components/Pages/Appearance/FooterStyleInfo.razor.rz.scp.css */
/* Footer style information — inside the Preview & Customize popup. Scoped; MudBlazor palette variables only. */

.fsi[b-xsx7k0ltru] {
    container: fsi / inline-size;
    min-width: 0;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}
.fsi__title[b-xsx7k0ltru] {
    display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-primary);
}
.fsi__title[b-xsx7k0ltru]  .mud-icon-root { color: var(--mud-palette-primary); }
.fsi__body[b-xsx7k0ltru] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fsi__thumb[b-xsx7k0ltru] { min-width: 0; }
.fsi__text[b-xsx7k0ltru] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fsi__name[b-xsx7k0ltru] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fsi__code[b-xsx7k0ltru] {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: .82rem; padding: 2px 8px; border-radius: 999px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.fsi__style-name[b-xsx7k0ltru] { font-weight: 700; font-size: 1rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.fsi__status[b-xsx7k0ltru] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.fsi__status--current[b-xsx7k0ltru] { color: var(--mud-palette-success-darken, var(--mud-palette-success)); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.fsi__status--selected[b-xsx7k0ltru] { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.fsi__family[b-xsx7k0ltru] { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.fsi__description[b-xsx7k0ltru] { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-primary); }
.fsi__facts[b-xsx7k0ltru] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 0; align-items: start; }
.fsi__facts dt[b-xsx7k0ltru] { font-size: .72rem; font-weight: 700; color: var(--mud-palette-text-secondary); padding-top: 3px; }
.fsi__facts dd[b-xsx7k0ltru] { margin: 0; min-width: 0; }
.fsi__category[b-xsx7k0ltru] {
    display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}
.fsi__tags[b-xsx7k0ltru] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.fsi__tags li[b-xsx7k0ltru] {
    padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
.fsi__actions[b-xsx7k0ltru] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fsi__none[b-xsx7k0ltru] { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

@container fsi (min-width: 460px) {
    .fsi__body[b-xsx7k0ltru] { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
}
.fsi__facts dd.fsi__fact[b-xsx7k0ltru] { font-size: .78rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }

.fsi[b-xsx7k0ltru] { display: flex; flex-direction: column; gap: 8px; }
.fsi__title[b-xsx7k0ltru] { margin-bottom: 2px; }
.fsi__name[b-xsx7k0ltru] { margin-bottom: 2px; }
.fsi__mono[b-xsx7k0ltru] { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.fsi__facts dd[b-xsx7k0ltru] { font-size: .8rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.fsi__category--sub[b-xsx7k0ltru] { color: var(--mud-palette-secondary, var(--mud-palette-primary)); background: color-mix(in srgb, var(--mud-palette-secondary, var(--mud-palette-primary)) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-secondary, var(--mud-palette-primary)) 28%, transparent); }
.fsi__sub[b-xsx7k0ltru] { margin: 6px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.fsi__features[b-xsx7k0ltru] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fsi__features li[b-xsx7k0ltru] { display: flex; align-items: flex-start; gap: 6px; font-size: .79rem; line-height: 1.35; color: var(--mud-palette-text-primary); }
.fsi__features[b-xsx7k0ltru]  .mud-icon-root { flex: 0 0 auto; color: var(--mud-palette-success); font-size: 1rem; margin-top: 1px; }
@container fsi (min-width: 520px) {
    .fsi__features[b-xsx7k0ltru] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}
/* /Components/Pages/Appearance/FooterStylePreviewDialog.razor.rz.scp.css */
/* Footer Preview & Customize popup. Scoped; MudBlazor palette variables only, so it follows the Admin theme (light / dark).
   A preview-first visual editor: the live footer is the dominant surface (left on desktops, top on tablets and phones), the
   settings are a collapsed accordion beside / below it, and categories and style information are drawers.
   Separation comes from soft surfaces, shadows and whitespace — not from borders around every box.
   The panel is a size container (its layout follows the width it really has) and never scrolls sideways. */

.fpd[b-n9j1t4txjk] {
    position: fixed;
    inset: 0;
    /* Above the app bar (1300) and drawer; below snackbars (1500). MudBlazor popovers (selects inside the popup) are lifted above
       it while it is open (app.css, html.navr-modal-open: --mud-zindex-popover). */
    z-index: 1350;
    display: grid;
    place-items: stretch;
    /* ≈ 94vh × 96vw on desktops; the whole screen on phones. */
    padding: clamp(0px, 3vh, 32px) clamp(0px, 2vw, 36px);
}

.fpd__backdrop[b-n9j1t4txjk] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #0b1117 55%, transparent);
    backdrop-filter: blur(6px);
}

.fpd__panel[b-n9j1t4txjk] {
    container: fpd / inline-size;
    /* The workspace canvas the white surfaces sit on. */
    --fpd-canvas: color-mix(in srgb, var(--mud-palette-text-primary) 3.5%, var(--mud-palette-surface));
    --fpd-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -6px rgba(16, 24, 40, .10);
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: clamp(0px, 1.4vw, 20px);
    background: var(--fpd-canvas);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .55), 0 20px 40px -20px rgba(0, 0, 0, .3);
    outline: none;
}

.fpd__sr[b-n9j1t4txjk] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Header ─────────────────────────────────────────────────────────────────────────────────────────────── */
.fpd__head[b-n9j1t4txjk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 14px 20px 10px;
}

.fpd__heading[b-n9j1t4txjk] { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fpd__eyebrow[b-n9j1t4txjk] { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.fpd__title[b-n9j1t4txjk] { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fpd__code[b-n9j1t4txjk] {
    display: inline-block;
    margin-inline-end: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Main category › sub category as chips; the whole row is the category drawer's button. */
.fpd__crumbs[b-n9j1t4txjk] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin: 2px 0 0 -4px;
    padding: 3px 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: start;
    color: var(--mud-palette-text-secondary);
    transition: background-color .15s ease;
}
.fpd__crumbs:hover[b-n9j1t4txjk], .fpd__crumbs.is-open[b-n9j1t4txjk] { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.fpd__crumbs:focus-visible[b-n9j1t4txjk] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.fpd__chip[b-n9j1t4txjk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.fpd__chip[b-n9j1t4txjk]  .mud-icon-root { font-size: .95rem; color: var(--mud-palette-primary); }
.fpd__chip--sub[b-n9j1t4txjk] { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)); box-shadow: none; }
.fpd__crumbs[b-n9j1t4txjk]  .fpd__crumb-sep { font-size: 1rem; }
.fpd__crumbs[b-n9j1t4txjk]  .fpd__crumb-more { font-size: 1.1rem; }

.fpd__tools[b-n9j1t4txjk] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; min-width: 0; }
.fpd__stepper[b-n9j1t4txjk] { display: inline-flex; align-items: center; gap: 6px; }
.fpd__position[b-n9j1t4txjk] { min-width: 4.5rem; text-align: center; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }

/* ── Body: preview + settings; tablets and phones stack them, desktops put the settings on the right ─────── */
.fpd__body[b-n9j1t4txjk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(190px, 52%) minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 4px 20px 14px;
    overflow: hidden;
}

/* ── Live preview: the dominant surface ────────────────────────────────────────────────────────────────── */
.fpd__preview[b-n9j1t4txjk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: var(--fpd-shadow);
    overflow: hidden;
}
.fpd__preview-head[b-n9j1t4txjk] { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 9px 16px; }
.fpd__live[b-n9j1t4txjk] { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.fpd__live-dot[b-n9j1t4txjk] { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 22%, transparent); }
.fpd__preview-note[b-n9j1t4txjk] { font-size: .72rem; color: var(--mud-palette-text-secondary); }
/* The footer is fitted to the stage width (DevicePreviewFrame zoom) and starts at its top; the stage scrolls vertically only
   when the footer is taller than the space it has. */
.fpd__stage[b-n9j1t4txjk] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 10px 10px;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--fpd-canvas);
}

/* ── Customize footer: the settings accordion ──────────────────────────────────────────────────────────── */
.fpd__aside[b-n9j1t4txjk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: var(--fpd-shadow);
    overflow: hidden;
}
.fpd__aside-head[b-n9j1t4txjk] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 2px 18px; }
.fpd__aside-title[b-n9j1t4txjk] { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.fpd__aside-title[b-n9j1t4txjk]  .mud-icon-root { color: var(--mud-palette-primary); }
.fpd__aside[b-n9j1t4txjk]  .fpd__collapse-all { text-transform: none; font-size: .76rem; }
.fpd__aside-hint[b-n9j1t4txjk] { flex: 0 0 auto; margin: 0; padding: 2px 18px 10px; font-size: .74rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

.fpd__groups[b-n9j1t4txjk] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 2px 12px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Each group has its own soft tint (--g); every colour is mixed into the theme surface, so it stays subtle in light and dark. */
.fpd__group[b-n9j1t4txjk] {
    --g: #3b82f6;
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--g) 6%, var(--mud-palette-surface));
    transition: background-color .15s ease, box-shadow .15s ease;
}
.fpd__group:hover[b-n9j1t4txjk] { background: color-mix(in srgb, var(--g) 10%, var(--mud-palette-surface)); }
.fpd__group.is-open[b-n9j1t4txjk] {
    background: color-mix(in srgb, var(--g) 8%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 28%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--g) 60%, transparent);
}

.fpd__group--footer[b-n9j1t4txjk] { --g: #3b82f6; }
.fpd__group--templates[b-n9j1t4txjk] { --g: #14b8a6; }
.fpd__group--layout[b-n9j1t4txjk] { --g: #22c55e; }
.fpd__group--branding[b-n9j1t4txjk] { --g: #eab308; }
.fpd__group--links[b-n9j1t4txjk] { --g: #a855f7; }
.fpd__group--contact[b-n9j1t4txjk] { --g: #0ea5e9; }
.fpd__group--newsletter[b-n9j1t4txjk] { --g: #10b981; }
.fpd__group--social[b-n9j1t4txjk] { --g: #f97316; }
.fpd__group--bottom[b-n9j1t4txjk] { --g: #8b5cf6; }
.fpd__group--colors[b-n9j1t4txjk] { --g: #06b6d4; }
.fpd__group--decoration[b-n9j1t4txjk] { --g: #ec4899; }
.fpd__group--typography[b-n9j1t4txjk] { --g: #f59e0b; }
.fpd__group--effects[b-n9j1t4txjk] { --g: #6366f1; }
.fpd__group--responsive[b-n9j1t4txjk] { --g: #84cc16; }

.fpd__group-heading[b-n9j1t4txjk] { margin: 0; font: inherit; }
.fpd__group-btn[b-n9j1t4txjk] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: start;
    color: var(--mud-palette-text-primary);
}
.fpd__group-btn:focus-visible[b-n9j1t4txjk] { outline: 2px solid color-mix(in srgb, var(--g) 70%, var(--mud-palette-text-primary)); outline-offset: -2px; }
.fpd__group-icon[b-n9j1t4txjk] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: color-mix(in srgb, var(--g) 72%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--g) 16%, var(--mud-palette-surface));
}
.fpd__group-icon[b-n9j1t4txjk]  .mud-icon-root { font-size: 1.15rem; }
.fpd__group-text[b-n9j1t4txjk] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fpd__group-title[b-n9j1t4txjk] { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.fpd__group-desc[b-n9j1t4txjk] { font-size: .74rem; line-height: 1.35; color: var(--mud-palette-text-secondary); }
.fpd__group-btn[b-n9j1t4txjk]  .fpd__group-chev { flex: 0 0 auto; color: var(--mud-palette-text-secondary); transition: transform .2s ease; }
.fpd__group.is-open .fpd__group-btn[b-n9j1t4txjk]  .fpd__group-chev { transform: rotate(180deg); color: color-mix(in srgb, var(--g) 72%, var(--mud-palette-text-primary)); }

.fpd__group-panel[b-n9j1t4txjk] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 4px 14px 16px;
}
/* The existing settings sub-groups: plain sections inside the tinted group (no boxes within boxes). */
.fpd__group-panel[b-n9j1t4txjk]  .navr-settings-group__title { font-size: .68rem; font-weight: 700; margin-bottom: 10px; color: var(--mud-palette-text-secondary); }
.fpd__group-panel[b-n9j1t4txjk]  .navr-settings-group__title::after { background: color-mix(in srgb, var(--g) 22%, transparent); }
.fpd__group-panel[b-n9j1t4txjk]  .navr-settings-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 12px 14px; }
/* Inputs sit on the surface colour so they read cleanly on the tint. */
.fpd__group-panel[b-n9j1t4txjk]  .mud-input.mud-input-outlined { background: var(--mud-palette-surface); }

/* ── Drawers: categories (start) and style information (end), over the workspace ───────────────────────── */
.fpd__scrim[b-n9j1t4txjk] {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: color-mix(in srgb, #0b1117 22%, transparent);
    backdrop-filter: blur(1.5px);
}

.fpd__drawer[b-n9j1t4txjk] {
    position: absolute;
    top: 4px;
    bottom: 14px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45), 0 8px 20px -10px rgba(0, 0, 0, .2);
    overflow: hidden;
}
.fpd__drawer--start[b-n9j1t4txjk] { inset-inline-start: 20px; width: min(600px, calc(100% - 40px)); }
.fpd__drawer--end[b-n9j1t4txjk] { inset-inline-end: 20px; width: min(440px, calc(100% - 40px)); }
.fpd__drawer-head[b-n9j1t4txjk] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 6px 18px; }
.fpd__drawer-title[b-n9j1t4txjk] { font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.fpd__drawer-body[b-n9j1t4txjk] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 14px 14px; }
/* The style information sits directly on the drawer surface (no card inside the card). */
.fpd__drawer-body[b-n9j1t4txjk]  .fsi { padding: 4px; border: 0; box-shadow: none; background: transparent; }

.fpd__cats-cols[b-n9j1t4txjk] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 6px 16px 16px;
}

.fpd__cat-group[b-n9j1t4txjk] { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.fpd__cat-title[b-n9j1t4txjk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.fpd__cat-title[b-n9j1t4txjk]  .mud-icon-root { color: var(--mud-palette-primary); }
.fpd__cat-of[b-n9j1t4txjk] { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mud-palette-text-primary); }

.fpd__cat-list[b-n9j1t4txjk] {
    list-style: none;
    margin: 0;
    padding: 0 4px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.fpd__cat-list > li[b-n9j1t4txjk] { flex: 0 0 auto; min-width: 0; }

.fpd__cat[b-n9j1t4txjk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 5px 8px 5px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: start;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}
.fpd__cat:hover[b-n9j1t4txjk] { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.fpd__cat:focus-visible[b-n9j1t4txjk] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.fpd__cat.is-open[b-n9j1t4txjk] { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); }
.fpd__cat.is-current[b-n9j1t4txjk] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}
.fpd__cat-name[b-n9j1t4txjk] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fpd__cat-count[b-n9j1t4txjk] {
    flex: 0 0 auto;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}
.fpd__cat.is-current .fpd__cat-count[b-n9j1t4txjk] { color: var(--mud-palette-primary); background: var(--mud-palette-primary-text, #fff); }

/* ── Action bar: light, sticky at the bottom, no border ────────────────────────────────────────────────── */
.fpd__foot[b-n9j1t4txjk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 20px 14px;
}
.fpd__foot[b-n9j1t4txjk]  .fpd__info-toggle { text-transform: none; font-weight: 600; }
.fpd__actions[b-n9j1t4txjk] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-inline-start: auto; }

/* ── Desktops: preview LEFT (≈ 68%), settings RIGHT (≈ 32%) ────────────────────────────────────────────── */
@container fpd (min-width: 1100px) {
    .fpd__body[b-n9j1t4txjk] { grid-template-columns: minmax(0, 1fr) clamp(360px, 32%, 560px); grid-template-rows: minmax(0, 1fr); gap: 16px; }
}

/* ── Phones ────────────────────────────────────────────────────────────────────────────────────────────── */
@container fpd (max-width: 640px) {
    .fpd__head[b-n9j1t4txjk] { padding: 10px 12px 8px; gap: 8px; }
    .fpd__title[b-n9j1t4txjk] { font-size: 1rem; }
    .fpd__tools[b-n9j1t4txjk] { flex: 1 1 100%; justify-content: space-between; gap: 6px 8px; }
    .fpd__position[b-n9j1t4txjk] { min-width: 3.5rem; }
    .fpd__body[b-n9j1t4txjk] { grid-template-rows: minmax(170px, 42%) minmax(0, 1fr); gap: 10px; padding: 2px 10px 10px; }
    .fpd__stage[b-n9j1t4txjk] { margin: 0 6px 6px; }
    .fpd__groups[b-n9j1t4txjk] { padding: 2px 8px 10px; }
    .fpd__group-btn[b-n9j1t4txjk] { gap: 10px; padding: 9px 10px; }
    .fpd__group-panel[b-n9j1t4txjk] { padding: 2px 10px 14px; }
    .fpd__drawer--start[b-n9j1t4txjk], .fpd__drawer--end[b-n9j1t4txjk] { inset-inline: 10px; width: auto; bottom: 10px; }
    .fpd__cats-cols[b-n9j1t4txjk] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); padding: 6px 12px 12px; }
    .fpd__foot[b-n9j1t4txjk] { padding: 8px 10px 10px; }
    .fpd__actions[b-n9j1t4txjk] { width: 100%; }
    .fpd__actions[b-n9j1t4txjk]  .mud-button-root { flex: 1 1 auto; }
}

@media (max-width: 640px) {
    .fpd__panel[b-n9j1t4txjk] { border-radius: 0; }
}

/* ── Short windows (landscape phones): one scrolling column instead of fixed rows ──────────────────────── */
@media (max-height: 560px) {
    .fpd__body[b-n9j1t4txjk] { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
    .fpd__body > *[b-n9j1t4txjk] { flex: 0 0 auto; }
    .fpd__stage[b-n9j1t4txjk] { max-height: 75dvh; }
    .fpd__aside[b-n9j1t4txjk], .fpd__groups[b-n9j1t4txjk] { overflow: visible; }
    .fpd__drawer[b-n9j1t4txjk] { position: fixed; top: 8px; bottom: 8px; } /* over the whole panel: the body itself scrolls here */
}

@media (prefers-reduced-motion: reduce) {
    .fpd__cat[b-n9j1t4txjk], .fpd__crumbs[b-n9j1t4txjk], .fpd__group[b-n9j1t4txjk], .fpd__group-btn[b-n9j1t4txjk]  .fpd__group-chev { transition: none; }
}
/* /Components/Pages/Appearance/FooterStyleThumb.razor.rz.scp.css */
/* Footer Style thumbnail — a miniature drawn from the style's real silhouette geometry and composition plan (em units, so the
   large variant scales). Purely decorative (aria-hidden). */

.fst[b-3v3wbeazju] {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    min-width: 0;
    height: 12.6em;
    border-radius: .8em;
    overflow: hidden;
    background: linear-gradient(180deg, #f5f2ea, #ebe5d9);
}

.fst--lg[b-3v3wbeazju] { font-size: 14px; height: 13.4em; }

/* The page the footer rises out of. */
.fst__page[b-3v3wbeazju] { flex: 0 0 2.2em; padding: .7em 1.2em 0; box-sizing: border-box; }
.fst__page i[b-3v3wbeazju] { display: block; height: .38em; width: 46%; margin-bottom: .35em; border-radius: .2em; background: #d6cfc0; }
.fst__page i + i[b-3v3wbeazju] { width: 30%; }

.fst__edge[b-3v3wbeazju] { position: relative; flex: 0 0 2.4em; margin-bottom: -1px; }
.fst__edge svg[b-3v3wbeazju] { display: block; width: 100%; height: 100%; }
.fst__far[b-3v3wbeazju] { fill: var(--fst-far); opacity: .8; }
.fst__mid[b-3v3wbeazju] { fill: var(--fst-mid); }
.fst__front[b-3v3wbeazju] { fill: var(--fst-edge); }

.fst__body[b-3v3wbeazju] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .45em;
    padding: .7em 1em .4em;
    background: var(--fst-ground);
    overflow: hidden;
}

.fst__row[b-3v3wbeazju] { display: grid; gap: .4em .7em; align-items: start; }
.fst__cell[b-3v3wbeazju] { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.fst__cell--panel[b-3v3wbeazju], .fst__cell--tile[b-3v3wbeazju] { padding: .35em; border-radius: .35em; background: color-mix(in srgb, var(--fst-text) 10%, transparent); }
.fst__cell--stage[b-3v3wbeazju] { min-height: 2.6em; border-radius: .35em; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--fst-accent) 45%, transparent) 0 22%, transparent 23%), color-mix(in srgb, var(--fst-text) 8%, transparent); }
.fst__row--center[b-3v3wbeazju] { justify-items: center; }
.fst__row--tier[b-3v3wbeazju], .fst__row--wordmark[b-3v3wbeazju], .fst__row--directory[b-3v3wbeazju] { padding-bottom: .3em; border-bottom: 1px solid color-mix(in srgb, var(--fst-text) 18%, transparent); }
.fst__row--ruled > .fst__cell + .fst__cell[b-3v3wbeazju] { border-left: 1px solid color-mix(in srgb, var(--fst-text) 20%, transparent); padding-left: .5em; }

.fst__s[b-3v3wbeazju] { display: block; min-width: 0; }

/* about: a mark, a tagline in the accent, a line of copy */
.fst__s--about[b-3v3wbeazju] {
    height: 1.9em;
    width: 100%;
    background:
        radial-gradient(circle at .55em .5em, var(--fst-accent) 0 .38em, transparent .42em) no-repeat,
        linear-gradient(var(--fst-accent) 0 0) 1.3em .32em / 48% .34em no-repeat,
        linear-gradient(var(--fst-muted) 0 0) 0 1.05em / 82% .22em no-repeat,
        linear-gradient(var(--fst-muted) 0 0) 0 1.45em / 64% .22em no-repeat;
}
.fst__row--center .fst__s--about[b-3v3wbeazju], .fst__cell--center .fst__s--about[b-3v3wbeazju] { width: 60%; margin-inline: auto; }

/* links: three columns of short lines */
.fst__s--links[b-3v3wbeazju] {
    height: 2.2em;
    width: 100%;
    background:
        repeating-linear-gradient(180deg, var(--fst-muted) 0 .2em, transparent .2em .5em) 0 .55em / 26% 1.6em no-repeat,
        repeating-linear-gradient(180deg, var(--fst-muted) 0 .2em, transparent .2em .5em) 36% .55em / 26% 1.6em no-repeat,
        repeating-linear-gradient(180deg, var(--fst-muted) 0 .2em, transparent .2em .5em) 72% .55em / 26% 1.6em no-repeat,
        linear-gradient(var(--fst-accent) 0 0) 0 0 / 16% .26em no-repeat,
        linear-gradient(var(--fst-accent) 0 0) 36% 0 / 16% .26em no-repeat,
        linear-gradient(var(--fst-accent) 0 0) 72% 0 / 16% .26em no-repeat;
    opacity: .9;
}
.fst--links-pills .fst__s--links[b-3v3wbeazju], .fst--links-inline .fst__s--links[b-3v3wbeazju] {
    height: 1.3em;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 45%, transparent) 0 1.4em, transparent 1.4em 1.9em) 0 .1em / 100% .45em no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 30%, transparent) 0 1.1em, transparent 1.1em 1.6em) 0 .8em / 80% .45em no-repeat;
}
.fst--links-cards .fst__s--links[b-3v3wbeazju] {
    background:
        linear-gradient(color-mix(in srgb, var(--fst-text) 12%, transparent) 0 0) 0 0 / 30% 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--fst-text) 12%, transparent) 0 0) 50% 0 / 30% 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--fst-text) 12%, transparent) 0 0) 100% 0 / 30% 100% no-repeat;
}
.fst__row--ledger .fst__s--links[b-3v3wbeazju] {
    height: 1.8em;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--fst-text) 28%, transparent) 0 1px, transparent 1px .6em),
        repeating-linear-gradient(180deg, var(--fst-muted) 0 .2em, transparent .2em .6em) 30% .2em / 60% 100% no-repeat;
}

/* contact: icon dots with values */
.fst__s--contact[b-3v3wbeazju] {
    height: 1.9em;
    width: 100%;
    background:
        repeating-linear-gradient(180deg, var(--fst-accent) 0 .34em, transparent .34em .62em) 0 0 / .34em 1.9em no-repeat,
        repeating-linear-gradient(180deg, var(--fst-text) 0 .22em, transparent .22em .62em) .7em .06em / 70% 1.9em no-repeat;
    opacity: .85;
}
.fst__row--strip .fst__s--contact[b-3v3wbeazju] {
    height: 1em;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 16%, transparent) 0 23%, transparent 23% 25.6%);
    border-radius: .25em;
}

/* newsletter: a panel with a field and a button */
.fst__s--news[b-3v3wbeazju] {
    height: 1.4em;
    width: 100%;
    border-radius: .35em;
    background:
        linear-gradient(var(--fst-cta) 0 0) calc(100% - .3em) 50% / 22% .55em no-repeat,
        linear-gradient(color-mix(in srgb, var(--fst-text) 22%, transparent) 0 0) .3em 50% / 60% .55em no-repeat,
        color-mix(in srgb, var(--fst-text) 9%, transparent);
}
.fst__row--hero .fst__s--news[b-3v3wbeazju], .fst__row--band .fst__s--news[b-3v3wbeazju] { height: 1.6em; }

.fst__s--lead[b-3v3wbeazju], .fst__s--banner[b-3v3wbeazju] { height: 1em; width: 46%; margin-left: auto; border-radius: 999px; background: var(--fst-cta); }
.fst__s--wordmark[b-3v3wbeazju] { height: 1.9em; width: 62%; background: linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 40%, transparent), color-mix(in srgb, var(--fst-text) 12%, transparent)); clip-path: polygon(0 0, 22% 0, 22% 100%, 26% 100%, 26% 0, 48% 0, 48% 100%, 52% 100%, 52% 0, 74% 0, 74% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.fst__s--social[b-3v3wbeazju] { height: .7em; width: 5em; margin-inline: auto; background: radial-gradient(circle, var(--fst-accent) 0 .3em, transparent .32em) 0 0 / 1.25em .7em repeat-x; }
.fst__s--stage[b-3v3wbeazju] { display: none; }

.fst__overlay[b-3v3wbeazju] { align-self: flex-end; height: 1.4em; width: 44%; margin-top: -2em; border-radius: .4em; background: color-mix(in srgb, var(--fst-edge) 86%, var(--fst-text)); box-shadow: 0 .3em .6em rgba(0, 0, 0, .25); }
.fst__overlay--crest[b-3v3wbeazju] { align-self: center; width: 2.4em; height: 2.4em; border-radius: 50%; margin-top: -2.2em; }
.fst__overlay--banner[b-3v3wbeazju], .fst__overlay--float[b-3v3wbeazju] { align-self: center; width: 64%; }

.fst__bar[b-3v3wbeazju] { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: .3em; border-top: 1px solid color-mix(in srgb, var(--fst-text) 16%, transparent); }
.fst__bar i[b-3v3wbeazju] { display: block; height: .22em; width: 28%; border-radius: .2em; background: var(--fst-muted); opacity: .8; }
.fst__bar--centered[b-3v3wbeazju], .fst__bar--stacked-logo[b-3v3wbeazju] { justify-content: center; gap: .6em; }
.fst__bar--ribbon[b-3v3wbeazju] { margin-inline: -1em; margin-bottom: -.4em; padding: .35em 1em; background: var(--fst-cta); border-top: 0; }
.fst__bar--inverted[b-3v3wbeazju] { margin-inline: -1em; margin-bottom: -.4em; padding: .35em 1em; background: var(--fst-text); border-top: 0; }
.fst__bar--inverted i[b-3v3wbeazju] { background: var(--fst-edge); }
.fst__bar--pill[b-3v3wbeazju], .fst__bar--boxed[b-3v3wbeazju] { padding: .3em .6em; border: 1px solid color-mix(in srgb, var(--fst-text) 22%, transparent); border-radius: 999px; }
.fst__bar--boxed[b-3v3wbeazju] { border-radius: .3em; }

/* Foundations */
.fst--fnd-floating-card .fst__body > .fst__row:first-of-type[b-3v3wbeazju],
.fst--fnd-elevated-platform .fst__body > .fst__row:first-of-type[b-3v3wbeazju],
.fst--fnd-arch-window .fst__body > .fst__row:first-of-type[b-3v3wbeazju] { padding: .35em; border-radius: .45em; background: color-mix(in srgb, var(--fst-text) 9%, transparent); }
.fst--fnd-arch-window .fst__body > .fst__row:first-of-type[b-3v3wbeazju] { border-radius: 40% 40% .45em .45em / 1.2em 1.2em .45em .45em; padding-top: .8em; }
.fst--fnd-floating-card .fst__body > .fst__row:first-of-type[b-3v3wbeazju] { margin-top: -1.3em; box-shadow: 0 .3em .7em rgba(0, 0, 0, .3); background: color-mix(in srgb, var(--fst-edge) 85%, var(--fst-text)); }
.fst--fnd-tone-split .fst__body[b-3v3wbeazju] { background: linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 10%, transparent) 0 36%, transparent 36%), var(--fst-ground); }
.fst--fnd-diagonal-split .fst__body[b-3v3wbeazju] { background: linear-gradient(102deg, color-mix(in srgb, var(--fst-text) 10%, transparent) 0 42%, transparent 42.2%), var(--fst-ground); }
.fst--fnd-blueprint-grid .fst__body[b-3v3wbeazju] { background: linear-gradient(color-mix(in srgb, var(--fst-text) 8%, transparent) 1px, transparent 1px) 0 0 / 1.2em 1.2em, linear-gradient(90deg, color-mix(in srgb, var(--fst-text) 8%, transparent) 1px, transparent 1px) 0 0 / 1.2em 1.2em, var(--fst-ground); }
.fst--fnd-framed .fst__body[b-3v3wbeazju] { box-shadow: inset 0 0 0 .3em transparent, inset 0 0 0 calc(.3em + 1px) color-mix(in srgb, var(--fst-accent) 45%, transparent); }
.fst--fnd-inset-dock .fst__body[b-3v3wbeazju] { margin-inline: .6em; border-radius: .7em .7em 0 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fst-text) 16%, transparent); }
.fst--fnd-stacked-panels .fst__row[b-3v3wbeazju] { padding: .25em; border-radius: .35em; background: color-mix(in srgb, var(--fst-text) 8%, transparent); }
.fst--fnd-side-rail .fst__body[b-3v3wbeazju] { box-shadow: inset .25em 0 0 color-mix(in srgb, var(--fst-accent) 70%, transparent); }
.fst--fnd-ribbon-band .fst__body[b-3v3wbeazju] { background: linear-gradient(177deg, transparent 0 66%, color-mix(in srgb, var(--fst-accent) 24%, transparent) 66% 74%, transparent 74%), var(--fst-ground); }
.fst--fnd-terraced-bands .fst__body[b-3v3wbeazju] { background: linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, var(--fst-text) 6%, transparent) 70% 86%, color-mix(in srgb, var(--fst-text) 11%, transparent) 86%), var(--fst-ground); }
.fst--fnd-layered-plates .fst__body[b-3v3wbeazju] { background: linear-gradient(color-mix(in srgb, var(--fst-text) 7%, transparent) 0 0) 50% .4em / 90% 62% no-repeat, var(--fst-ground); }
.fst--fnd-cut-corners .fst__body > .fst__row:first-of-type[b-3v3wbeazju] { padding: .35em; background: color-mix(in srgb, var(--fst-text) 9%, transparent); clip-path: polygon(.6em 0, calc(100% - .6em) 0, 100% .6em, 100% calc(100% - .6em), calc(100% - .6em) 100%, .6em 100%, 0 calc(100% - .6em), 0 .6em); }
.fst--fnd-folded-corner .fst__body[b-3v3wbeazju] { background: linear-gradient(225deg, color-mix(in srgb, var(--fst-text) 22%, transparent) 0 1.2em, transparent 1.2em), var(--fst-ground); }
.fst--fnd-recessed-well .fst__body[b-3v3wbeazju] { box-shadow: inset 0 .8em 1em -.8em rgba(0, 0, 0, .45); }
/* /Components/Pages/Appearance/HeaderManagement.razor.rz.scp.css */
/* Header Management — page layout (header, the eleven-setting row, tab content, status bar) and page-specific pieces (the
   Navigation Menu editor). The Header Style Library (HeaderStyleGallery.razor.css) and the Preview & Customize panel
   (HeaderStylePreviewPanel.razor.css) have their own scoped stylesheets.
   Scoped via Blazor CSS isolation; MudBlazor palette variables only, so it follows the Admin theme. */

/* ── Navigation Menu editor ── */
.hdr-menu[b-w52rrncsrw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.hdr-menu__head[b-w52rrncsrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.hdr-menu__hint[b-w52rrncsrw] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__empty[b-w52rrncsrw] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__list[b-w52rrncsrw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Nesting is shown by a left indent (capped so a deep tree never pushes fields off a phone) and a lighter rail. */
.hdr-menu__item[b-w52rrncsrw] {
    min-width: 0;
    margin-inline-start: min(calc(var(--hdr-depth, 0) * 1.25rem), 3.75rem);
    padding: 0.5rem 0.625rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 3px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.hdr-menu__item--top[b-w52rrncsrw] {
    border-inline-start-color: var(--mud-palette-primary);
}

.hdr-menu__row[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.hdr-menu__spacer[b-w52rrncsrw] {
    flex: 0 0 30px;
    width: 30px;
}

.hdr-menu__title[b-w52rrncsrw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.hdr-menu__tag[b-w52rrncsrw] {
    flex: 0 0 auto;
    padding: 0 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__tools[b-w52rrncsrw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.hdr-menu__fields[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
    margin-top: 0.25rem;
    min-width: 0;
}

.hdr-menu__switch[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.hdr-menu__media[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
    min-width: 0;
}

.hdr-menu__thumb[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.hdr-menu__thumb img[b-w52rrncsrw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hdr-menu__media-actions[b-w52rrncsrw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.hdr-menu__media[b-w52rrncsrw]  .hdr-menu__desc {
    grid-column: 1 / -1;
    min-width: 0;
}

@container (min-width: 36rem) {
    .hdr-menu__media[b-w52rrncsrw] {
        grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
    }

    .hdr-menu__media[b-w52rrncsrw]  .hdr-menu__desc {
        grid-column: auto;
    }
}

.hdr-menu__picker[b-w52rrncsrw] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.hdr-menu__picker-head[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__library[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    max-height: 16rem;
    overflow: auto;
}

.hdr-menu__asset[b-w52rrncsrw] {
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
    cursor: pointer;
}

.hdr-menu__asset:focus-visible[b-w52rrncsrw] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.hdr-menu__asset--selected[b-w52rrncsrw] {
    border: 2px solid var(--mud-palette-primary);
}

.hdr-menu__asset img[b-w52rrncsrw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Bottom information bar items ── */
.hdr-status__item[b-w52rrncsrw] { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; overflow-wrap: anywhere; }
.hdr-status__item[b-w52rrncsrw]  .mud-icon-root { color: var(--mud-palette-primary); }
.hdr-status__item--strong[b-w52rrncsrw] { font-weight: 600; color: var(--mud-palette-text-primary); }
.hdr-status__item--saved[b-w52rrncsrw] { font-weight: 600; color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
.hdr-status__item--saved[b-w52rrncsrw]  .mud-icon-root { color: inherit; }
.hdr-status__item--unsaved[b-w52rrncsrw] { font-weight: 600; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.hdr-status__item--unsaved[b-w52rrncsrw]  .mud-icon-root { color: inherit; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   Page layout: header → the eleven Header settings → tab content → status bar — the Footer Management grammar.
   Palette variables only (light / dark): WARNING marks the active setting, INFO the secondary actions, SUCCESS saving.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hdr-page[b-w52rrncsrw] {
    --hdr-accent: var(--mud-palette-warning);
    --hdr-accent-text: color-mix(in srgb, var(--mud-palette-warning) 78%, var(--mud-palette-text-primary));
    --hdr-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    container: hdrpage / inline-size;
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
}

/* ── Page header ── */
.hdr-head[b-w52rrncsrw] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-width: 0; }
.hdr-head__main[b-w52rrncsrw] { flex: 1 1 26rem; display: flex; align-items: center; gap: 14px; min-width: 0; }
.hdr-head__icon[b-w52rrncsrw] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px;
    color: #fff; background: var(--hdr-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--hdr-accent) 30%, transparent);
}
.hdr-head__icon[b-w52rrncsrw]  .mud-icon-root { font-size: 1.7rem; }
.hdr-head__text[b-w52rrncsrw] { min-width: 0; }
.hdr-head__title[b-w52rrncsrw] { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.hdr-head__description[b-w52rrncsrw] { margin: 3px 0 0; font-size: .84rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.hdr-head__actions[b-w52rrncsrw] { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.hdr-head__actions[b-w52rrncsrw]  .mud-button-root { min-height: 40px; }
.hdr-head__count[b-w52rrncsrw] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 6px;
    font-size: .88rem; font-weight: 700; white-space: nowrap;
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

/* ── The eleven Header settings: one row, scrolling inside the bar on narrow screens ── */
.hdr-tabs[b-w52rrncsrw] {
    min-width: 0; border-radius: 10px; background: var(--mud-palette-surface); border: 1px solid var(--hdr-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.hdr-tabs__list[b-w52rrncsrw] {
    list-style: none; margin: 0; padding: 6px; display: flex; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.hdr-tabs__list > li[b-w52rrncsrw] { flex: 1 0 auto; }
.hdr-tab[b-w52rrncsrw] {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-primary);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hdr-tab:hover[b-w52rrncsrw] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.hdr-tab:focus-visible[b-w52rrncsrw] { outline: 2px solid var(--hdr-accent); outline-offset: -2px; }
.hdr-tab.is-active[b-w52rrncsrw] {
    color: var(--hdr-accent-text); background: color-mix(in srgb, var(--hdr-accent) 12%, transparent);
    border-bottom-color: var(--hdr-accent); border-radius: 8px 8px 0 0;
}
.hdr-tab.is-active[b-w52rrncsrw]  .mud-icon-root { color: var(--hdr-accent); }

@container hdrpage (max-width: 599px) {
    .hdr-head__actions[b-w52rrncsrw] { flex-basis: 100%; justify-content: stretch; }
    .hdr-head__actions > *[b-w52rrncsrw], .hdr-head__actions[b-w52rrncsrw]  .mud-button-root { flex: 1 1 auto; }
    .hdr-head__count[b-w52rrncsrw] { justify-content: center; }
}

/* Wide page: every setting stays visible — the row wraps instead of hiding settings behind a scroll. */
@container hdrpage (min-width: 900px) {
    .hdr-tabs__list[b-w52rrncsrw] { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
}

.hdr-panel[b-w52rrncsrw] { container: hdrpanel / inline-size; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hdr-library[b-w52rrncsrw] { min-width: 0; scroll-margin-top: 80px; }
.hdr-library:focus[b-w52rrncsrw] { outline: none; }

/* ── A settings tab: the group's settings beside the live header (preview below on narrow screens) ── */
.hdr-editor[b-w52rrncsrw] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hdr-editor__settings[b-w52rrncsrw] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hdr-editor__preview[b-w52rrncsrw] {
    min-width: 0; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 12px;
    border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--hdr-line);
}
.hdr-editor__preview-head[b-w52rrncsrw] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.hdr-editor__preview-title[b-w52rrncsrw] { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.hdr-editor__preview-title[b-w52rrncsrw]  .mud-icon-root { color: var(--mud-palette-info); }
.hdr-editor__preview-badge[b-w52rrncsrw] {
    padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}
.hdr-editor__preview-tools[b-w52rrncsrw] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hdr-editor__preview-hint[b-w52rrncsrw] { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

@container hdrpanel (min-width: 960px) {
    .hdr-editor[b-w52rrncsrw] { flex-direction: row; align-items: flex-start; }
    .hdr-editor__settings[b-w52rrncsrw] { flex: 1 1 0; }
    .hdr-editor__preview[b-w52rrncsrw] { flex: 1.25 1 0; position: sticky; top: 76px; }
}

/* ── Status bar ── */
.hdr-status[b-w52rrncsrw] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 14px; border-radius: 10px;
    font-size: .8rem; color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface); border: 1px solid var(--hdr-line);
}

/* Header text language switch (English / বাংলা) — one control for every header text field and the live preview. */
.hdr-lang[b-w52rrncsrw] { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.hdr-lang__row[b-w52rrncsrw] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hdr-lang__label[b-w52rrncsrw] { font-weight: 600; font-size: .9rem; }
[b-w52rrncsrw] .hdr-lang__hint { opacity: .75; }
/* /Components/Pages/Appearance/HeaderStyleGallery.razor.rz.scp.css */
/* Header Style Library — Header Design on Header Management, in the same grammar as the Footer Style Library: the Categories
   panel (Main | Sub) on the left, the library (controls, style cards, pager) on the right. Scoped; MudBlazor palette variables
   only, so it follows the Admin theme (light / dark): WARNING is the active-selection accent, INFO the secondary action,
   SUCCESS the Use action. Both halves lay out by the width they actually have and never scroll the page horizontally. */
.hsg[b-x8gkgcue8l] {
    container: hsgroot / inline-size;
    min-width: 0;
    --hsg-accent: var(--mud-palette-warning);
    --hsg-accent-text: color-mix(in srgb, var(--mud-palette-warning) 78%, var(--mud-palette-text-primary));
    --hsg-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}
.hsg__layout[b-x8gkgcue8l] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ════════════ LEFT: Categories ════════════ */
.hsg__cats[b-x8gkgcue8l] {
    container: hsgcats / inline-size;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--hsg-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}
.hsg__cats-title[b-x8gkgcue8l] {
    margin: 0; padding: 14px 16px 12px; font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--hsg-line);
}
.hsg__nav[b-x8gkgcue8l] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.hsg__nav-col[b-x8gkgcue8l] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hsg__nav-col--sub[b-x8gkgcue8l] { border-top: 1px solid var(--hsg-line); }
.hsg__nav-title[b-x8gkgcue8l] { margin: 0; padding: 12px 16px 6px; font-size: .86rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.hsg__nav-list[b-x8gkgcue8l] {
    list-style: none; margin: 0; padding: 2px 6px 10px; display: flex; flex-direction: column; gap: 1px;
    max-height: 300px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.hsg__nav-list > li[b-x8gkgcue8l] { min-width: 0; }
.hsg__nav-item[b-x8gkgcue8l] {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box;
    padding: 7px 8px 7px 10px; border-radius: 8px; cursor: pointer; text-align: start;
    font: inherit; font-size: .84rem; font-weight: 500; line-height: 1.3; color: var(--mud-palette-text-primary);
    background: transparent; border: 0;
    transition: background-color .15s ease, color .15s ease;
}
.hsg__nav-item:hover[b-x8gkgcue8l] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.hsg__nav-item:focus-visible[b-x8gkgcue8l] { outline: 2px solid var(--hsg-accent); outline-offset: -2px; }
.hsg__nav-item[b-x8gkgcue8l]  .hsg__nav-icon { flex: 0 0 auto; font-size: 1.15rem; color: var(--mud-palette-text-primary); opacity: .85; }
.hsg__nav-name[b-x8gkgcue8l] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hsg__nav-count[b-x8gkgcue8l] { flex: 0 0 auto; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.hsg__nav-item[b-x8gkgcue8l]  .hsg__nav-chev { flex: 0 0 auto; font-size: 1.1rem; color: var(--mud-palette-text-secondary); transform: rotate(90deg); }
.hsg__nav-item.is-active[b-x8gkgcue8l] { color: var(--hsg-accent-text); font-weight: 600; background: color-mix(in srgb, var(--hsg-accent) 12%, transparent); }
.hsg__nav-item.is-active .hsg__nav-count[b-x8gkgcue8l],
.hsg__nav-item.is-active[b-x8gkgcue8l]  .hsg__nav-icon,
.hsg__nav-item.is-active[b-x8gkgcue8l]  .hsg__nav-chev { color: var(--hsg-accent-text); opacity: 1; }

.hsg__nav-empty[b-x8gkgcue8l] { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px 32px; text-align: center; }
.hsg__nav-empty[b-x8gkgcue8l]  .hsg__nav-empty-icon { font-size: 2.6rem; color: var(--mud-palette-text-secondary); opacity: .6; margin-bottom: 6px; }
.hsg__nav-empty-title[b-x8gkgcue8l] { margin: 0; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.hsg__nav-empty-hint[b-x8gkgcue8l] { margin: 0; max-width: 16rem; font-size: .78rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

/* Side by side: Main Category | Sub Category, each list scrolling in its own column to the panel's height. */
@container hsgcats (min-width: 340px) {
    .hsg__nav[b-x8gkgcue8l] { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .hsg__nav-col--sub[b-x8gkgcue8l] { border-top: 0; border-inline-start: 1px solid var(--hsg-line); }

    .hsg__nav-item[b-x8gkgcue8l]  .hsg__nav-chev { transform: none; }
    .hsg__nav-item:dir(rtl)[b-x8gkgcue8l]  .hsg__nav-chev { transform: scaleX(-1); }
}

/* ════════════ RIGHT: the library ════════════ */
.hsg__main[b-x8gkgcue8l] {
    container: hsg / inline-size;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hsg__head[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.hsg__head-text[b-x8gkgcue8l] { flex: 1 1 16rem; min-width: 0; }
.hsg__title[b-x8gkgcue8l] { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.hsg__meta[b-x8gkgcue8l] { margin: 3px 0 0; font-size: .82rem; color: var(--mud-palette-text-secondary); }

.hsg__controls[b-x8gkgcue8l] { flex: 1 1 36rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.hsg__search[b-x8gkgcue8l] { flex: 1 1 15rem; min-width: 0; max-width: 20rem; }
.hsg__status[b-x8gkgcue8l] { flex: 0 1 12rem; min-width: 9rem; }
.hsg__style[b-x8gkgcue8l] { flex: 0 1 10rem; min-width: 8rem; }
.hsg__sort[b-x8gkgcue8l] { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hsg__sort-label[b-x8gkgcue8l] { font-size: .84rem; color: var(--mud-palette-text-primary); white-space: nowrap; }
.hsg__sort[b-x8gkgcue8l]  .mud-select { min-width: 10rem; }
.hsg[b-x8gkgcue8l]  .hsg__controls .mud-input-control { margin: 0; }
.hsg__views[b-x8gkgcue8l] { display: inline-flex; gap: 4px; }
.hsg__view[b-x8gkgcue8l] {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--hsg-line);
    transition: background-color .15s ease, color .15s ease;
}
.hsg__view.is-active[b-x8gkgcue8l] { color: var(--mud-palette-info-text, #fff); background: var(--mud-palette-info); border-color: var(--mud-palette-info); }
.hsg__view:focus-visible[b-x8gkgcue8l] { outline: 2px solid var(--mud-palette-info); outline-offset: 2px; }

.hsg__showing-row[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 30px; }
.hsg__showing[b-x8gkgcue8l] { margin: 0; font-size: .86rem; color: var(--mud-palette-text-secondary); }
.hsg__scope[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: .82rem; color: var(--mud-palette-text-primary); }
.hsg__scope-label[b-x8gkgcue8l] { color: var(--mud-palette-text-secondary); }
.hsg__scope[b-x8gkgcue8l]  .hsg__scope-chev { font-size: 1.05rem; color: var(--hsg-accent-text); }
.hsg__scope:dir(rtl)[b-x8gkgcue8l]  .hsg__scope-chev { transform: scaleX(-1); }
.hsg__scope-chip[b-x8gkgcue8l] { padding: 0 8px; border-radius: 999px; font-size: .76rem; background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); overflow-wrap: anywhere; }
.hsg__showing-row[b-x8gkgcue8l]  .hsg__reset { margin-inline-start: auto; }
.hsg__empty[b-x8gkgcue8l] { margin: 0; padding: 28px 18px; text-align: center; border-radius: 12px; font-size: .88rem; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }

/* ── style cards ── */
.hsg__grid[b-x8gkgcue8l] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hsg__grid > li[b-x8gkgcue8l] { min-width: 0; }
.hsg__card[b-x8gkgcue8l] {
    position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; min-width: 0;
    padding: 0 0 12px; box-sizing: border-box; overflow: hidden;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--hsg-line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hsg__card:hover[b-x8gkgcue8l] { box-shadow: 0 10px 24px rgba(16, 24, 40, .10); transform: translateY(-1px); }
.hsg__card.is-selected[b-x8gkgcue8l] { border-color: var(--mud-palette-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 35%, transparent), 0 8px 22px rgba(16, 24, 40, .10); }
.hsg__card-preview[b-x8gkgcue8l] {
    display: block; width: 100%; padding: 0; margin: 0; border: 0; cursor: zoom-in;
    background: transparent; font: inherit; color: inherit; overflow: hidden; border-radius: 10px 10px 0 0;
}
.hsg__card-preview:focus-visible[b-x8gkgcue8l] { outline: 2px solid var(--mud-palette-info); outline-offset: -2px; }
.hsg__card-text[b-x8gkgcue8l] { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 12px 0; }
.hsg__card-line[b-x8gkgcue8l] { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hsg__card-code[b-x8gkgcue8l] { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .86rem; color: var(--mud-palette-error); }
.hsg__card-name[b-x8gkgcue8l] { min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hsg__card-cat[b-x8gkgcue8l] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; min-width: 0; font-size: .8rem; line-height: 1.35; color: var(--mud-palette-text-primary); }
.hsg__card-cat[b-x8gkgcue8l]  .hsg__card-chev { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.hsg__card-cat:dir(rtl)[b-x8gkgcue8l]  .hsg__card-chev { transform: scaleX(-1); }
.hsg__card-sub[b-x8gkgcue8l] { color: var(--mud-palette-info); }
.hsg__card-tags[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.hsg__tag[b-x8gkgcue8l] {
    padding: 1px 8px; border-radius: 4px; font-size: .72rem; font-weight: 600; line-height: 1.5;
    color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
}
.hsg__card-actions[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 0; margin-top: auto; }
.hsg__card-actions[b-x8gkgcue8l]  .mud-button-root { flex: 1 1 6rem; min-width: 0; }
.hsg__badge[b-x8gkgcue8l] {
    position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
    color: var(--mud-palette-warning-darken, #7a4b00); background: color-mix(in srgb, #fff 88%, var(--mud-palette-warning));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.hsg__badge--current[b-x8gkgcue8l] { color: var(--mud-palette-success-darken, #1b5e20); background: color-mix(in srgb, #fff 86%, var(--mud-palette-success)); }

/* ── list view: thumbnail | text | actions in one row ── */
.hsg__grid--list[b-x8gkgcue8l] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
.hsg__grid--list .hsg__card[b-x8gkgcue8l] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px; }
.hsg__grid--list .hsg__card-preview[b-x8gkgcue8l] { flex: 0 1 240px; min-width: 160px; border-radius: 8px; }
.hsg__grid--list .hsg__card-text[b-x8gkgcue8l] { flex: 1 1 14rem; padding: 0; }
.hsg__grid--list .hsg__card-actions[b-x8gkgcue8l] { flex: 0 1 15rem; padding: 0; margin-top: 0; }

/* ── pager ── */
.hsg__pager[b-x8gkgcue8l] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 6px; }
.hsg__pager-spacer[b-x8gkgcue8l] { flex: 1 1 0; }
.hsg__pages-wrap[b-x8gkgcue8l] { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.hsg__pageof[b-x8gkgcue8l] { font-size: .84rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.hsg[b-x8gkgcue8l]  .hsg__pages { display: none; }
.hsg__goto[b-x8gkgcue8l] { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: .84rem; color: var(--mud-palette-text-primary); white-space: nowrap; }
.hsg__goto-input[b-x8gkgcue8l] {
    width: 4.5rem; height: 34px; box-sizing: border-box; padding: 0 10px; border-radius: 6px; font: inherit; font-size: .86rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--hsg-line);
}
.hsg__goto-input:focus-visible[b-x8gkgcue8l] { outline: 2px solid var(--mud-palette-info); outline-offset: 1px; }
.hsg__goto-of[b-x8gkgcue8l] { color: var(--mud-palette-text-secondary); }

@container hsg (min-width: 540px) {
    .hsg__grid[b-x8gkgcue8l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsg[b-x8gkgcue8l]  .hsg__pages { display: flex; }
    .hsg__pageof[b-x8gkgcue8l] { display: none; }
}

@container hsg (min-width: 820px) {
    .hsg__grid[b-x8gkgcue8l] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container hsg (min-width: 1300px) {
    .hsg__grid[b-x8gkgcue8l] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Narrow library: the pager stacks, go-to under the page buttons. */
@container hsg (max-width: 539px) {
    .hsg__pager-spacer[b-x8gkgcue8l] { display: none; }
    .hsg__pages-wrap[b-x8gkgcue8l], .hsg__goto[b-x8gkgcue8l] { flex: 1 1 100%; justify-content: center; }
    .hsg__search[b-x8gkgcue8l] { max-width: none; flex-basis: 100%; }
}

/* Wide: Categories LEFT (sticky, as tall as the viewport allows, each list scrolling inside) | library RIGHT.
   Narrower: the Categories panel sits above the library, not sticky, each list capped at 300px. */
@container hsgroot (min-width: 900px) {
    .hsg__layout[b-x8gkgcue8l] { flex-direction: row; align-items: flex-start; }
    .hsg__cats[b-x8gkgcue8l] { flex: 0 0 clamp(380px, 30%, 460px); position: sticky; top: 76px; height: calc(100vh - 92px); max-height: 1100px; }
    .hsg__main[b-x8gkgcue8l] { flex: 1 1 0; }
    .hsg__nav-list[b-x8gkgcue8l] { max-height: none; flex: 1 1 auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hsg__card[b-x8gkgcue8l], .hsg__nav-item[b-x8gkgcue8l], .hsg__view[b-x8gkgcue8l] { transition: none; }
    .hsg__card:hover[b-x8gkgcue8l] { transform: none; }
}
/* /Components/Pages/Appearance/HeaderStyleInfo.razor.rz.scp.css */
/* Selected Style Information — under the live preview. Scoped; MudBlazor palette variables only. */

.hsi[b-wujaz14evs] {
    container: hsi / inline-size;
    min-width: 0;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}
.hsi__title[b-wujaz14evs] {
    display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-primary);
}
.hsi__title[b-wujaz14evs]  .mud-icon-root { color: var(--mud-palette-primary); }
.hsi__body[b-wujaz14evs] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hsi__thumb[b-wujaz14evs] { min-width: 0; }
.hsi__text[b-wujaz14evs] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hsi__name[b-wujaz14evs] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hsi__code[b-wujaz14evs] {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: .82rem; padding: 2px 8px; border-radius: 999px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.hsi__style-name[b-wujaz14evs] { font-weight: 700; font-size: 1rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.hsi__status[b-wujaz14evs] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.hsi__status--current[b-wujaz14evs] { color: var(--mud-palette-success-darken, var(--mud-palette-success)); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.hsi__status--selected[b-wujaz14evs] { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.hsi__family[b-wujaz14evs] { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.hsi__description[b-wujaz14evs] { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-primary); }
.hsi__facts[b-wujaz14evs] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 0; align-items: start; }
.hsi__facts dt[b-wujaz14evs] { font-size: .72rem; font-weight: 700; color: var(--mud-palette-text-secondary); padding-top: 3px; }
.hsi__facts dd[b-wujaz14evs] { margin: 0; min-width: 0; }
.hsi__category[b-wujaz14evs] {
    display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}
.hsi__tags[b-wujaz14evs] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.hsi__tags li[b-wujaz14evs] {
    padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
.hsi__actions[b-wujaz14evs] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hsi__none[b-wujaz14evs] { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }

@container hsi (min-width: 460px) {
    .hsi__body[b-wujaz14evs] { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
}
/* /Components/Pages/Appearance/HeaderStylePreviewPanel.razor.rz.scp.css */
/* Header Style Preview & Customize — a large panel sliding in from the RIGHT edge (the inline end) over Header Management,
   which stays visible, dimmed, behind it. Scoped; MudBlazor palette variables only, so it follows the Admin theme (light /
   dark). WARNING marks the open settings group (as on the page's settings row), INFO the live preview, SUCCESS saved state.
   Desktop: a wide side panel. Tablet: nearly full width. Phone: full width. Fullscreen: the whole viewport. */

.hpp[b-08owinw2ne] {
    --hpp-accent: var(--mud-palette-warning);
    --hpp-accent-text: color-mix(in srgb, var(--mud-palette-warning) 78%, var(--mud-palette-text-primary));
    --hpp-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: flex;
    justify-content: flex-end;
}

.hpp__backdrop[b-08owinw2ne] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46);
    animation: hpp-fade-b-08owinw2ne .2s ease-out;
}

.hpp__panel[b-08owinw2ne] {
    container: hpp / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1240px, 92vw);
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    border-inline-start: 1px solid var(--hpp-line);
    box-shadow: -18px 0 48px rgba(15, 23, 42, .28);
    animation: hpp-slide-b-08owinw2ne .26s cubic-bezier(.2, .8, .2, 1);
    outline: none;
}
.hpp__panel:dir(rtl)[b-08owinw2ne] { animation-name: hpp-slide-rtl-b-08owinw2ne; box-shadow: 18px 0 48px rgba(15, 23, 42, .28); }
.hpp.is-full .hpp__panel[b-08owinw2ne] { width: 100vw; border-inline-start: 0; }

@keyframes hpp-fade-b-08owinw2ne { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpp-slide-b-08owinw2ne { from { transform: translateX(48px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes hpp-slide-rtl-b-08owinw2ne { from { transform: translateX(-48px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ── Head: the style ── */
.hpp__head[b-08owinw2ne] {
    flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 20px 12px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--hpp-line);
}
.hpp__heading[b-08owinw2ne] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hpp__eyebrow[b-08owinw2ne] {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.hpp__eyebrow[b-08owinw2ne]  .mud-icon-root { color: var(--hpp-accent); }
.hpp__title[b-08owinw2ne] { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.hpp__code[b-08owinw2ne] { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--mud-palette-error); }
.hpp__chips[b-08owinw2ne] { display: flex; flex-wrap: wrap; gap: 6px; }
.hpp__chip[b-08owinw2ne] {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
    color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
.hpp__chip[b-08owinw2ne]  .mud-icon-root { font-size: 1rem; }
.hpp__chip-sep[b-08owinw2ne] { opacity: .55; }
.hpp__chip--cat[b-08owinw2ne] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent); }
.hpp__chip--premium[b-08owinw2ne] { color: var(--hpp-accent-text); background: color-mix(in srgb, var(--hpp-accent) 14%, transparent); border-color: color-mix(in srgb, var(--hpp-accent) 32%, transparent); }
.hpp__chip--saved[b-08owinw2ne] { color: var(--mud-palette-success-darken, var(--mud-palette-success)); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); border-color: transparent; }
.hpp__chip--selected[b-08owinw2ne] { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-color: transparent; }
.hpp__desc[b-08owinw2ne] { margin: 0; max-width: 80ch; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.hpp__tools[b-08owinw2ne] { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* ── The eleven Header settings ── */
.hpp__settings[b-08owinw2ne] { flex: 0 0 auto; background: var(--mud-palette-surface); border-bottom: 1px solid var(--hpp-line); }
.hpp__settings-list[b-08owinw2ne] {
    list-style: none; margin: 0; padding: 6px 14px; display: flex; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.hpp__settings-list > li[b-08owinw2ne] { flex: 1 0 auto; }
.hpp__setting[b-08owinw2ne] {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-primary);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hpp__setting:hover[b-08owinw2ne] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.hpp__setting:focus-visible[b-08owinw2ne] { outline: 2px solid var(--hpp-accent); outline-offset: -2px; }
.hpp__setting.is-active[b-08owinw2ne] {
    color: var(--hpp-accent-text); background: color-mix(in srgb, var(--hpp-accent) 12%, transparent);
    border-bottom-color: var(--hpp-accent); border-radius: 8px 8px 0 0;
}
.hpp__setting.is-active[b-08owinw2ne]  .mud-icon-root { color: var(--hpp-accent); }

/* ── Body: [settings group |] explore → live preview → details ── */
.hpp__body[b-08owinw2ne] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding: 16px 20px 20px;
}
.hpp__main[b-08owinw2ne] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.hpp__editor[b-08owinw2ne] {
    min-width: 0; display: flex; flex-direction: column; box-sizing: border-box;
    border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid color-mix(in srgb, var(--hpp-accent) 40%, var(--hpp-line));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.hpp__editor-head[b-08owinw2ne] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0 14px; }
.hpp__editor-title[b-08owinw2ne] { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.hpp__editor-title[b-08owinw2ne]  .mud-icon-root { color: var(--hpp-accent); }
.hpp__editor-hint[b-08owinw2ne] { margin: 2px 14px 8px; font-size: .74rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.hpp__editor-body[b-08owinw2ne] { min-width: 0; padding: 0 12px 12px; max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }

.hpp__explore[b-08owinw2ne], .hpp__preview[b-08owinw2ne], .hpp__card[b-08owinw2ne] {
    min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--hpp-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* Explore */
.hpp__explore[b-08owinw2ne] { display: flex; flex-direction: column; gap: 10px; }
.hpp__pickers[b-08owinw2ne] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hpp__picker[b-08owinw2ne] { flex: 1 1 14rem; min-width: 0; }
.hpp__picker[b-08owinw2ne]  .mud-input-control { margin: 0; }
.hpp__stepper[b-08owinw2ne] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.hpp__position[b-08owinw2ne] { min-width: 4.5rem; text-align: center; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.hpp__strip[b-08owinw2ne] {
    list-style: none; margin: 0; padding: 2px 2px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr);
    gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.hpp__strip-item[b-08owinw2ne] {
    display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 4px; box-sizing: border-box; cursor: pointer;
    font: inherit; color: var(--mud-palette-text-primary); background: transparent;
    border: 1px solid var(--hpp-line); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease;
}
.hpp__strip-item:hover[b-08owinw2ne] { border-color: color-mix(in srgb, var(--mud-palette-info) 50%, var(--hpp-line)); }
.hpp__strip-item:focus-visible[b-08owinw2ne] { outline: 2px solid var(--mud-palette-info); outline-offset: 1px; }
.hpp__strip-item.is-current[b-08owinw2ne] { border-color: var(--hpp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hpp-accent) 35%, transparent); }
.hpp__strip-code[b-08owinw2ne] { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mud-palette-error); }

/* Live preview */
.hpp__preview[b-08owinw2ne] { display: flex; flex-direction: column; gap: 10px; }
.hpp__preview-head[b-08owinw2ne] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hpp__live[b-08owinw2ne] { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.hpp__live-dot[b-08owinw2ne] { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-success) 22%, transparent); }
.hpp__preview-tools[b-08owinw2ne] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.hpp__stage[b-08owinw2ne] { min-width: 0; }
.hpp__preview-note[b-08owinw2ne] { margin: 0; font-size: .74rem; color: var(--mud-palette-text-secondary); }

/* Details */
.hpp__details[b-08owinw2ne] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hpp__card-title[b-08owinw2ne] {
    display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-primary);
}
.hpp__card-title[b-08owinw2ne]  .mud-icon-root { color: var(--mud-palette-primary); }
.hpp__facts[b-08owinw2ne] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.hpp__facts dt[b-08owinw2ne] { font-size: .74rem; font-weight: 700; color: var(--mud-palette-text-secondary); padding-top: 1px; }
.hpp__facts dd[b-08owinw2ne] { margin: 0; min-width: 0; font-size: .82rem; line-height: 1.45; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.hpp__features[b-08owinw2ne] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hpp__features li[b-08owinw2ne] { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; line-height: 1.4; color: var(--mud-palette-text-primary); }
.hpp__features[b-08owinw2ne]  .mud-icon-root { flex: 0 0 auto; font-size: 1rem; margin-top: 1px; color: var(--mud-palette-success); }
.hpp__tags[b-08owinw2ne] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hpp__tags li[b-08owinw2ne] {
    padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
}

/* ── Actions ── */
.hpp__foot[b-08owinw2ne] {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 10px 20px; background: var(--mud-palette-surface); border-top: 1px solid var(--hpp-line);
    box-shadow: 0 -6px 16px rgba(16, 24, 40, .06);
}
.hpp__actions[b-08owinw2ne] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-inline-start: auto; }
.hpp__actions[b-08owinw2ne]  .mud-button-root { min-height: 38px; }

/* Medium panel: details side by side. */
@container hpp (min-width: 760px) {
    .hpp__details[b-08owinw2ne] { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Wide panel: every setting visible (the row wraps); an open settings group sits beside the preview, scrolling on its own,
   so the live header stays in view while the settings change. */
@container hpp (min-width: 1000px) {
    .hpp__settings-list[b-08owinw2ne] { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
    .hpp__body.has-editor[b-08owinw2ne] { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; }
    .hpp__body.has-editor .hpp__editor[b-08owinw2ne] { position: sticky; top: 0; max-height: calc(100vh - 250px); }
    .hpp__body.has-editor .hpp__editor-body[b-08owinw2ne] { max-height: none; flex: 1 1 auto; min-height: 0; }
    .hpp__body.has-editor .hpp__details[b-08owinw2ne] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hpp__body.has-editor .hpp__details > :first-child[b-08owinw2ne] { grid-column: 1 / -1; }
}

/* Phones: the whole width, compact padding, actions sharing the row. */
@container hpp (max-width: 599px) {
    .hpp__head[b-08owinw2ne], .hpp__body[b-08owinw2ne], .hpp__foot[b-08owinw2ne] { padding-inline: 12px; }
    .hpp__title[b-08owinw2ne] { font-size: 1.08rem; }
    .hpp__desc[b-08owinw2ne] { display: none; }
    .hpp__stepper[b-08owinw2ne] { flex: 1 1 100%; justify-content: center; }
    .hpp__actions[b-08owinw2ne] { flex: 1 1 100%; }
    .hpp__actions[b-08owinw2ne]  .mud-button-root { flex: 1 1 auto; }
}

@media (max-width: 1023px) {
    .hpp__panel[b-08owinw2ne] { width: 96vw; }
}

@media (max-width: 640px) {
    .hpp__panel[b-08owinw2ne] { width: 100vw; border-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hpp__panel[b-08owinw2ne], .hpp__backdrop[b-08owinw2ne] { animation: none; }
    .hpp__setting[b-08owinw2ne], .hpp__strip-item[b-08owinw2ne] { transition: none; }
}
/* /Components/Pages/Appearance/HeaderStyleThumb.razor.rz.scp.css */
/* Header Style thumbnail — a miniature of the style's STRUCTURE drawn with spans (em units, so the large variant
   scales). Mirrors the shared header primitives: composition (hst--layout-*), bar geometry (hst--frame-*), menu
   container (hst--track-*), item shape (hst--item-*), width and shape. Purely decorative (aria-hidden). */

.hst[b-cx20hb0y3u] {
    --hst-radius: 1.2em;
    display: block;
    font-size: 10px;
    width: 100%;
    min-width: 0;
}
.hst--lg[b-cx20hb0y3u] { font-size: 14px; }

/* The "page" the header sits on: a soft scene, so light, glass and transparent styles all read. */
.hst__stage[b-cx20hb0y3u] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 6.4em;
    padding: .9em .8em;
    box-sizing: border-box;
    border-radius: .8em;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 110%, rgba(72, 112, 78, .55), transparent 60%),
        linear-gradient(135deg, #cfdcc8 0%, #eef0e6 55%, #d9d2c0 100%);
}
.hst--dark .hst__stage[b-cx20hb0y3u] { background: radial-gradient(120% 90% at 80% 120%, rgba(90, 130, 100, .55), transparent 60%), linear-gradient(135deg, #7c8f7f 0%, #b8c2b1 60%, #9aa58f 100%); }
.hst--surface-transparent .hst__stage[b-cx20hb0y3u] { background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 55%), linear-gradient(135deg, #3f6b4c 0%, #8fb99a 55%, #c8b27c 100%); }
.hst--surface-transparent.hst--light .hst__stage[b-cx20hb0y3u] { background: linear-gradient(135deg, #f4efe2 0%, #e3eadb 60%, #d7ccb2 100%); }
.hst--lg .hst__stage[b-cx20hb0y3u] { height: 7.4em; }

/* ── the bar ─────────────────────────────────────────────────────────────────────────────────────────── */
.hst__bar[b-cx20hb0y3u] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7em;
    width: 88%;
    min-height: 2.6em;
    padding: 0 .9em;
    box-sizing: border-box;
    color: var(--hst-text);
    background: var(--hst-bg);
    border-radius: var(--hst-radius);
    box-shadow: 0 .4em 1em rgba(0, 0, 0, .18);
}
.hst--w-full .hst__stage[b-cx20hb0y3u] { padding-left: 0; padding-right: 0; padding-top: 0; }
.hst--w-full .hst__bar[b-cx20hb0y3u] { width: 100%; border-radius: 0; }
.hst--w-contained .hst__bar[b-cx20hb0y3u] { width: 76%; }
.hst--shape-square .hst__bar[b-cx20hb0y3u] { --hst-radius: .15em; }
.hst--shape-rounded .hst__bar[b-cx20hb0y3u] { --hst-radius: .5em; }
.hst--shape-large .hst__bar[b-cx20hb0y3u] { --hst-radius: .9em; }
.hst--shape-pill .hst__bar[b-cx20hb0y3u] { --hst-radius: 99em; }
.hst--surface-glass .hst__bar[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-bg) 72%, transparent); backdrop-filter: blur(3px); box-shadow: 0 .4em 1em rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.hst--surface-transparent .hst__bar[b-cx20hb0y3u] { background: transparent; box-shadow: none; }

/* brand / nav / utils / cta */
.hst__brand[b-cx20hb0y3u] { display: inline-flex; align-items: center; gap: .35em; flex: 0 0 auto; }
.hst__logo[b-cx20hb0y3u] { width: 1.2em; height: 1.2em; border-radius: 50%; border: .14em solid var(--hst-accent); box-sizing: border-box; }
.hst__name[b-cx20hb0y3u] { width: 3.2em; height: .42em; border-radius: .3em; background: var(--hst-text); opacity: .9; }
.hst__nav[b-cx20hb0y3u] { display: inline-flex; align-items: center; gap: .45em; flex: 1 1 auto; justify-content: center; min-width: 0; }
.hst--menu-left .hst__nav[b-cx20hb0y3u] { justify-content: flex-start; }
.hst--menu-right .hst__nav[b-cx20hb0y3u] { justify-content: flex-end; }
.hst__item[b-cx20hb0y3u] { position: relative; width: 2em; height: .38em; border-radius: .3em; background: var(--hst-text); opacity: .55; }
.hst__item.is-active[b-cx20hb0y3u] { opacity: 1; background: var(--hst-accent); }
.hst__utils[b-cx20hb0y3u] { display: inline-flex; flex: 0 0 auto; }
.hst__utils i[b-cx20hb0y3u] { width: 1.3em; height: .7em; border-radius: .5em; border: .1em solid color-mix(in srgb, var(--hst-text) 45%, transparent); }
.hst__cta[b-cx20hb0y3u] { flex: 0 0 auto; width: 2.8em; height: 1.25em; border-radius: .7em; background: var(--hst-cta); }
.hst--shape-square .hst__cta[b-cx20hb0y3u], .hst--frame-angled .hst__cta[b-cx20hb0y3u], .hst--frame-notched .hst__cta[b-cx20hb0y3u] { border-radius: .15em; }
.hst--cta-left .hst__bar[b-cx20hb0y3u] { flex-direction: row-reverse; }

/* ── compositions ────────────────────────────────────────────────────────────────────────────────────── */
.hst--layout-center-brand .hst__nav[b-cx20hb0y3u] { order: 1; justify-content: flex-start; flex: 1 1 0; }
.hst--layout-center-brand .hst__brand[b-cx20hb0y3u] { order: 2; }
.hst--layout-center-brand .hst__utils[b-cx20hb0y3u] { order: 3; flex: 1 1 0; justify-content: flex-end; }
.hst--layout-center-brand .hst__cta[b-cx20hb0y3u] { order: 4; }
.hst--layout-spread .hst__nav[b-cx20hb0y3u] { justify-content: space-evenly; }

.hst--layout-stacked .hst__bar[b-cx20hb0y3u],
.hst--layout-stacked-center .hst__bar[b-cx20hb0y3u],
.hst--layout-utility-top .hst__bar[b-cx20hb0y3u] {
    display: grid; align-items: center; column-gap: .6em; row-gap: 0; padding-top: .25em; padding-bottom: .25em;
}
.hst--layout-stacked .hst__bar[b-cx20hb0y3u] { grid-template-columns: 1fr auto auto; }
.hst--layout-stacked .hst__brand[b-cx20hb0y3u] { grid-column: 1; grid-row: 1; min-height: 1.9em; }
.hst--layout-stacked .hst__utils[b-cx20hb0y3u] { grid-column: 2; grid-row: 1; }
.hst--layout-stacked .hst__cta[b-cx20hb0y3u] { grid-column: 3; grid-row: 1; }
.hst--layout-stacked .hst__nav[b-cx20hb0y3u],
.hst--layout-stacked-center .hst__nav[b-cx20hb0y3u] { grid-column: 1 / -1; grid-row: 2; padding: .35em 0; border-top: 1px solid color-mix(in srgb, var(--hst-text) 22%, transparent); }
.hst--layout-stacked-center .hst__bar[b-cx20hb0y3u] { grid-template-columns: 1fr auto 1fr; }
.hst--layout-stacked-center .hst__utils[b-cx20hb0y3u] { grid-column: 1; grid-row: 1; justify-self: start; }
.hst--layout-stacked-center .hst__brand[b-cx20hb0y3u] { grid-column: 2; grid-row: 1; min-height: 1.9em; flex-direction: column; justify-content: center; gap: .2em; }
.hst--layout-stacked-center .hst__cta[b-cx20hb0y3u] { grid-column: 3; grid-row: 1; justify-self: end; }
.hst--layout-stacked-center .hst__nav[b-cx20hb0y3u] { justify-content: center; }
.hst--layout-utility-top .hst__bar[b-cx20hb0y3u] { grid-template-columns: auto 1fr auto; }
.hst--layout-utility-top .hst__utils[b-cx20hb0y3u] { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; padding-bottom: .2em; border-bottom: 1px solid color-mix(in srgb, var(--hst-text) 18%, transparent); }
.hst--layout-utility-top .hst__utils i[b-cx20hb0y3u] { height: .45em; }
.hst--layout-utility-top .hst__brand[b-cx20hb0y3u] { grid-column: 1; grid-row: 2; min-height: 1.9em; }
.hst--layout-utility-top .hst__nav[b-cx20hb0y3u] { grid-column: 2; grid-row: 2; }
.hst--layout-utility-top .hst__cta[b-cx20hb0y3u] { grid-column: 3; grid-row: 2; }
.hst--layout-drawer .hst__nav[b-cx20hb0y3u] { visibility: hidden; }
.hst--layout-drawer .hst__utils i[b-cx20hb0y3u] { width: 1.1em; height: .8em; border: 0; border-radius: .1em; background: linear-gradient(var(--hst-text) 0 0) top / 100% .12em no-repeat, linear-gradient(var(--hst-text) 0 0) center / 100% .12em no-repeat, linear-gradient(var(--hst-text) 0 0) bottom / 100% .12em no-repeat; }

/* ── frames ──────────────────────────────────────────────────────────────────────────────────────────── */
.hst--frame-islands .hst__bar[b-cx20hb0y3u] { background: transparent; box-shadow: none; padding: 0; }
.hst--frame-islands .hst__brand[b-cx20hb0y3u], .hst--frame-islands .hst__nav[b-cx20hb0y3u], .hst--frame-islands .hst__cta[b-cx20hb0y3u] {
    background: var(--hst-bg); border-radius: var(--hst-radius); box-shadow: 0 .3em .8em rgba(0, 0, 0, .16); min-height: 2.2em; padding: 0 .6em;
}
.hst--frame-islands .hst__nav[b-cx20hb0y3u] { flex: 0 1 auto; margin-inline: auto; }
.hst--frame-islands .hst__cta[b-cx20hb0y3u] { padding: 0; min-height: 0; background: var(--hst-cta); }
.hst--frame-islands .hst__utils[b-cx20hb0y3u] { display: none; }
.hst--frame-angled .hst__bar[b-cx20hb0y3u] { clip-path: polygon(1.2em 0, 100% 0, calc(100% - 1.2em) 100%, 0 100%); border-radius: 0; box-shadow: inset 0 -.18em 0 var(--hst-accent); padding: 0 1.6em; }
.hst--frame-notched .hst__bar[b-cx20hb0y3u] { clip-path: polygon(.9em 0, 100% 0, 100% calc(100% - .9em), calc(100% - .9em) 100%, 0 100%, 0 .9em); border-radius: 0; box-shadow: inset 0 -.18em 0 var(--hst-accent); }
.hst--frame-curved .hst__bar[b-cx20hb0y3u] { border-radius: 0 0 50% 50% / 0 0 1em 1em; padding-bottom: .5em; }
.hst--frame-underline .hst__bar[b-cx20hb0y3u] { background: transparent; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--hst-text) 35%, transparent); border-radius: 0; }
.hst--frame-underline.hst--light .hst__bar[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-bg) 55%, transparent); }
.hst--frame-underline .hst__bar[b-cx20hb0y3u]::after { content: ""; position: absolute; left: .9em; bottom: 0; width: 3em; height: .18em; background: var(--hst-accent); }
.hst--frame-layered .hst__bar[b-cx20hb0y3u] { box-shadow: .45em .45em 0 0 color-mix(in srgb, var(--hst-accent) 50%, transparent), 0 .4em 1em rgba(0, 0, 0, .18); }
.hst--frame-ribbon .hst__bar[b-cx20hb0y3u] { border-top: .25em solid var(--hst-accent); }
.hst--frame-split-tone .hst__brand[b-cx20hb0y3u] { align-self: stretch; margin-left: -.9em; padding: 0 .8em 0 .9em; background: color-mix(in srgb, var(--hst-accent) 30%, transparent); border-radius: var(--hst-radius) 0 0 var(--hst-radius); }
.hst--frame-inset .hst__bar[b-cx20hb0y3u]::before { content: ""; position: absolute; inset: .25em; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--hst-accent) 60%, transparent); pointer-events: none; }

/* ── menu tracks ─────────────────────────────────────────────────────────────────────────────────────── */
.hst--track-capsule .hst__nav[b-cx20hb0y3u], .hst--track-boxed .hst__nav[b-cx20hb0y3u], .hst--track-segmented .hst__nav[b-cx20hb0y3u], .hst--track-inset .hst__nav[b-cx20hb0y3u] { flex: 0 1 auto; margin-inline: auto; padding: .3em .45em; }
.hst--track-capsule .hst__nav[b-cx20hb0y3u] { border-radius: 99em; background: color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--track-boxed .hst__nav[b-cx20hb0y3u] { border-radius: .2em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-text) 35%, transparent); }
.hst--track-segmented .hst__nav[b-cx20hb0y3u] { gap: 0; padding: .25em 0; border-radius: .4em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-text) 35%, transparent); }
.hst--track-segmented .hst__item[b-cx20hb0y3u] { margin: 0 .35em; }
.hst--track-segmented .hst__item + .hst__item[b-cx20hb0y3u] { box-shadow: -.35em 0 0 -.05em color-mix(in srgb, var(--hst-text) 30%, transparent); }
.hst--track-rail .hst__nav[b-cx20hb0y3u] { padding-bottom: .3em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--hst-text) 35%, transparent); }
.hst--track-inset .hst__nav[b-cx20hb0y3u] { border-radius: .6em; background: rgba(0, 0, 0, .18); box-shadow: inset 0 .1em .3em rgba(0, 0, 0, .3); }
.hst--layout-spread .hst__nav[b-cx20hb0y3u] { flex: 1 1 auto; margin-inline: 0; }

/* ── active item shapes ──────────────────────────────────────────────────────────────────────────────── */
.hst--item-pill .hst__item.is-active[b-cx20hb0y3u], .hst--item-soft .hst__item.is-active[b-cx20hb0y3u], .hst--item-icon-text .hst__item.is-active[b-cx20hb0y3u] { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--hst-accent) 30%, transparent); }
.hst--item-box .hst__item.is-active[b-cx20hb0y3u], .hst--item-block .hst__item.is-active[b-cx20hb0y3u], .hst--item-border .hst__item.is-active[b-cx20hb0y3u] { border-radius: .1em; box-shadow: 0 0 0 .3em color-mix(in srgb, var(--hst-accent) 28%, transparent); }
.hst--item-underline .hst__item.is-active[b-cx20hb0y3u], .hst--item-accent-line .hst__item.is-active[b-cx20hb0y3u], .hst--item-reveal .hst__item.is-active[b-cx20hb0y3u] { background: var(--hst-text); }
.hst--item-underline .hst__item.is-active[b-cx20hb0y3u]::after, .hst--item-accent-line .hst__item.is-active[b-cx20hb0y3u]::after, .hst--item-reveal .hst__item.is-active[b-cx20hb0y3u]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4em; height: .16em; background: var(--hst-accent); }
.hst--item-overline .hst__item.is-active[b-cx20hb0y3u] { background: var(--hst-text); }
.hst--item-overline .hst__item.is-active[b-cx20hb0y3u]::after { content: ""; position: absolute; left: 0; right: 0; top: -.4em; height: .16em; background: var(--hst-accent); }
.hst--item-tab .hst__item.is-active[b-cx20hb0y3u] { border-radius: .3em .3em 0 0; box-shadow: 0 .3em 0 0 var(--hst-accent); }
.hst--item-slant .hst__item.is-active[b-cx20hb0y3u] { transform: skewX(-18deg); box-shadow: 0 0 0 .25em color-mix(in srgb, var(--hst-accent) 30%, transparent); }
.hst--item-bracket .hst__item.is-active[b-cx20hb0y3u] { box-shadow: -.35em -.3em 0 -.2em var(--hst-accent), .35em .3em 0 -.2em var(--hst-accent); background: var(--hst-text); }
.hst--item-glow .hst__item.is-active[b-cx20hb0y3u] { box-shadow: 0 0 .6em .1em color-mix(in srgb, var(--hst-accent) 80%, transparent); }
.hst--item-split .hst__item + .hst__item[b-cx20hb0y3u]::before { content: ""; position: absolute; left: -.28em; top: -.25em; bottom: -.25em; width: 1px; background: color-mix(in srgb, var(--hst-text) 45%, transparent); }
.hst--item-text .hst__item.is-active[b-cx20hb0y3u]::after { content: ""; position: absolute; left: 50%; bottom: -.45em; width: .3em; height: .3em; margin-left: -.15em; border-radius: 50%; background: var(--hst-accent); }

/* ── category collection frames and tracks (#521 onwards) ─────────────────────────────────────────────── */
.hst--frame-wave .hst__bar[b-cx20hb0y3u]::after {
    content: ""; position: absolute; left: 8%; right: 8%; bottom: -.45em; height: .5em; pointer-events: none;
    background: var(--hst-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4 Q7 0 14 4 T28 4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") left center / 1.4em .5em repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4 Q7 0 14 4 T28 4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") left center / 1.4em .5em repeat-x;
}
.hst--frame-leaf .hst__bar[b-cx20hb0y3u] { border-radius: 1.3em .3em 1.3em .3em; box-shadow: 0 .4em 1em rgba(0, 0, 0, .18), inset .12em .12em 0 color-mix(in srgb, var(--hst-accent) 70%, transparent), inset -.12em -.12em 0 color-mix(in srgb, var(--hst-accent) 70%, transparent); }
.hst--frame-neon .hst__bar[b-cx20hb0y3u] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hst-accent) 70%, transparent), 0 0 .9em color-mix(in srgb, var(--hst-accent) 55%, transparent); }
.hst--frame-double-rule .hst__bar[b-cx20hb0y3u] { border-top: .22em double color-mix(in srgb, var(--hst-text) 55%, transparent); border-bottom: .22em double color-mix(in srgb, var(--hst-text) 55%, transparent); }
.hst--frame-stripe .hst__bar[b-cx20hb0y3u] { border-bottom: .3em solid transparent; border-image: repeating-linear-gradient(-45deg, var(--hst-accent) 0 .45em, transparent .45em .9em) 1; }
.hst--frame-corners .hst__bar[b-cx20hb0y3u]::before {
    content: ""; position: absolute; inset: .25em; pointer-events: none;
    background:
        linear-gradient(var(--hst-accent) 0 0) top left / .8em 1px no-repeat, linear-gradient(var(--hst-accent) 0 0) top left / 1px .8em no-repeat,
        linear-gradient(var(--hst-accent) 0 0) bottom right / .8em 1px no-repeat, linear-gradient(var(--hst-accent) 0 0) bottom right / 1px .8em no-repeat;
}
.hst--frame-spine .hst__bar[b-cx20hb0y3u] { box-shadow: inset .35em 0 0 var(--hst-accent), 0 .4em 1em rgba(0, 0, 0, .18); padding-left: 1.2em; }
.hst--frame-spectrum .hst__bar[b-cx20hb0y3u]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .16em; background: linear-gradient(90deg, transparent, var(--hst-accent), var(--hst-text), var(--hst-accent), transparent); }
.hst--frame-crest .hst__brand[b-cx20hb0y3u] { align-self: stretch; margin-bottom: -.9em; padding: 0 .6em .7em; background: var(--hst-bg); border-radius: 0 0 .8em .8em; box-shadow: inset 0 -.14em 0 var(--hst-accent), 0 .4em .6em -.3em rgba(0, 0, 0, .3); }
.hst--frame-crest .hst__stage[b-cx20hb0y3u] { height: 7.2em; }
.hst--shape-custom .hst__bar[b-cx20hb0y3u] { --hst-radius: 1.2em; }

.hst--track-outline .hst__nav[b-cx20hb0y3u], .hst--track-raised .hst__nav[b-cx20hb0y3u], .hst--track-glass .hst__nav[b-cx20hb0y3u] { flex: 0 1 auto; margin-inline: auto; padding: .3em .45em; }
.hst--track-outline .hst__nav[b-cx20hb0y3u] { border-radius: 99em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-accent) 70%, transparent); }
.hst--track-raised .hst__nav[b-cx20hb0y3u] { border-radius: .5em; background: color-mix(in srgb, var(--hst-text) 12%, transparent); box-shadow: 0 .3em .6em -.2em rgba(0, 0, 0, .35); }
.hst--track-glass .hst__nav[b-cx20hb0y3u] { border-radius: .6em; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-text) 20%, transparent); }
.hst--layout-spread.hst--track-outline .hst__nav[b-cx20hb0y3u], .hst--layout-spread.hst--track-raised .hst__nav[b-cx20hb0y3u], .hst--layout-spread.hst--track-glass .hst__nav[b-cx20hb0y3u] { flex: 1 1 auto; margin-inline: 0; }

/* ── Header Design System: the composed structure of #521 – #1520 ─────────────────────────────────────── */
/* The hem carries the style's REAL silhouette mask (the component writes it inline from the shared geometry),
   so a card shows the same lower edge the live preview and the public site draw. */
.hst__hem[b-cx20hb0y3u] {
    position: absolute; left: 0; right: 0; top: 100%; height: .85em; pointer-events: none;
    background: var(--hst-bg);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hst--surface-glass .hst__hem[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-bg) 72%, transparent); }
.hst--silf-curve .hst__hem[b-cx20hb0y3u], .hst--silf-ribbon .hst__hem[b-cx20hb0y3u] { height: 1.05em; }
.hst--silf-horizon .hst__hem[b-cx20hb0y3u] { height: .6em; }
.hst__crown[b-cx20hb0y3u] {
    position: absolute; left: 0; right: 0; top: 0; height: .7em; pointer-events: none;
    border-radius: var(--hst-radius) var(--hst-radius) 0 0;
    background: color-mix(in srgb, var(--hst-accent) 24%, transparent);
}
.hst--crown-arch .hst__crown[b-cx20hb0y3u], .hst--crown-marquee .hst__crown[b-cx20hb0y3u] { left: 22%; right: 22%; border-radius: 0 0 99em 99em; }
.hst--crown-tab .hst__crown[b-cx20hb0y3u] { right: 62%; border-radius: 0 0 .6em 0; }
.hst--crown-dock .hst__crown[b-cx20hb0y3u] { left: 58%; border-radius: 0 0 0 .6em; }
.hst--crown-rail .hst__crown[b-cx20hb0y3u], .hst--crown-band .hst__crown[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-text) 14%, transparent); }
.hst--crown-split .hst__crown[b-cx20hb0y3u] { background: linear-gradient(90deg, color-mix(in srgb, var(--hst-accent) 26%, transparent) 0 32%, transparent 32% 68%, color-mix(in srgb, var(--hst-accent) 26%, transparent) 68% 100%); }
.hst--crown-strip .hst__crown[b-cx20hb0y3u] { left: 10%; right: 10%; border-radius: 0 0 .5em .5em; }
.hst--crown-ribbon .hst__crown[b-cx20hb0y3u] { clip-path: polygon(0 0, 100% 0, 100% 100%, .8em 100%, 0 55%); }
.hst--crown-ledge .hst__crown[b-cx20hb0y3u] { background: transparent; box-shadow: inset 0 -.12em 0 var(--hst-accent); }
[class*="hst--crown-"] .hst__bar[b-cx20hb0y3u] { padding-top: .7em; min-height: 3.1em; }

/* Appended bar geometries. */
.hst--frame-tray .hst__bar[b-cx20hb0y3u] { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--hst-text) 14%, transparent), 0 .4em 1em rgba(0, 0, 0, .18); }
.hst--frame-shelf .hst__bar[b-cx20hb0y3u] { box-shadow: 0 .28em 0 color-mix(in srgb, var(--hst-accent) 65%, transparent), 0 .4em 1em rgba(0, 0, 0, .18); }
.hst--frame-tab-top .hst__bar[b-cx20hb0y3u]::before { content: ""; position: absolute; left: 8%; width: 28%; top: -.45em; height: .5em; border-radius: .4em .4em 0 0; background: var(--hst-bg); }
.hst--frame-pinched .hst__bar[b-cx20hb0y3u] { border-radius: 99em .6em 99em .6em / 99em .9em 99em .9em; }
.hst--frame-clip-start .hst__bar[b-cx20hb0y3u] { clip-path: polygon(.9em 0, 100% 0, 100% 100%, 0 100%, 0 .7em); padding-left: 1.3em; }
.hst--frame-double-plate .hst__bar[b-cx20hb0y3u]::before { content: ""; position: absolute; left: .4em; right: .4em; top: .35em; bottom: -.35em; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--hst-accent) 30%, transparent); }

/* Appended menu containers. */
.hst--track-tray .hst__nav[b-cx20hb0y3u], .hst--track-dock .hst__nav[b-cx20hb0y3u], .hst--track-arc .hst__nav[b-cx20hb0y3u],
.hst--track-notch .hst__nav[b-cx20hb0y3u], .hst--track-double-rule .hst__nav[b-cx20hb0y3u] { flex: 0 1 auto; margin-inline: auto; padding: .3em .5em; }
.hst--track-tray .hst__nav[b-cx20hb0y3u] { border-radius: .2em; background: color-mix(in srgb, var(--hst-text) 16%, transparent); box-shadow: inset 0 .12em .22em rgba(0, 0, 0, .35); }
.hst--track-dock .hst__nav[b-cx20hb0y3u] { align-self: flex-end; border-radius: .4em .4em 0 0; background: color-mix(in srgb, var(--hst-text) 12%, transparent); box-shadow: inset 0 .1em 0 var(--hst-accent); }
.hst--track-arc .hst__nav[b-cx20hb0y3u] { border-radius: 0 0 99em 99em; background: color-mix(in srgb, var(--hst-text) 10%, transparent); }
.hst--track-notch .hst__nav[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-text) 12%, transparent); clip-path: polygon(.5em 0, calc(100% - .5em) 0, 100% 50%, calc(100% - .5em) 100%, .5em 100%, 0 50%); }
.hst--track-double-rule .hst__nav[b-cx20hb0y3u] { box-shadow: inset 0 .1em 0 color-mix(in srgb, var(--hst-text) 30%, transparent), inset 0 -.1em 0 color-mix(in srgb, var(--hst-text) 30%, transparent); }

/* Brand docks. */
.hst--dock-bridge .hst__brand[b-cx20hb0y3u], .hst--dock-pillar .hst__brand[b-cx20hb0y3u], .hst--dock-panel .hst__brand[b-cx20hb0y3u] { align-self: stretch; align-items: center; padding-inline: .5em; background: color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--dock-pillar .hst__brand[b-cx20hb0y3u] { box-shadow: inset -.14em 0 0 var(--hst-accent); }
.hst--dock-panel .hst__brand[b-cx20hb0y3u] { background: linear-gradient(90deg, color-mix(in srgb, var(--hst-accent) 28%, transparent), transparent); }
.hst--dock-island .hst__brand[b-cx20hb0y3u], .hst--dock-plaque .hst__brand[b-cx20hb0y3u] { padding: .2em .45em; border-radius: .4em; background: color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--dock-badge .hst__brand[b-cx20hb0y3u] { padding: .15em .45em; border-radius: 99em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-accent) 70%, transparent); }
.hst--dock-arch .hst__brand[b-cx20hb0y3u] { padding: .15em .5em; border-radius: 99em 99em .2em .2em; background: color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--dock-medallion .hst__logo[b-cx20hb0y3u] { box-shadow: 0 0 0 .18em color-mix(in srgb, var(--hst-accent) 55%, transparent); border-radius: 50%; }
.hst--dock-ribbon .hst__brand[b-cx20hb0y3u] { padding: .15em .7em .15em .4em; background: color-mix(in srgb, var(--hst-accent) 30%, transparent); clip-path: polygon(0 0, 100% 0, calc(100% - .4em) 50%, 100% 100%, 0 100%); }
.hst--dock-cutout .hst__brand[b-cx20hb0y3u], .hst--dock-crest .hst__brand[b-cx20hb0y3u], .hst--dock-dock .hst__brand[b-cx20hb0y3u] { align-self: stretch; align-items: center; padding: 0 .5em; background: var(--hst-bg); }
.hst--dock-crest .hst__brand[b-cx20hb0y3u] { margin-bottom: -.8em; padding-bottom: .6em; border-radius: 0 0 .7em .7em; box-shadow: inset 0 -.14em 0 var(--hst-accent); }
.hst--dock-cutout .hst__brand[b-cx20hb0y3u] { border-radius: 0 0 .7em .7em; box-shadow: inset 0 -.12em 0 color-mix(in srgb, var(--hst-accent) 60%, transparent); }
.hst--dock-dock .hst__brand[b-cx20hb0y3u] { border-radius: 0 .6em 0 0; background: color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--dock-column .hst__brand[b-cx20hb0y3u] { box-shadow: inset 0 -.12em 0 color-mix(in srgb, var(--hst-accent) 60%, transparent); }
.hst--dock-stack .hst__brand[b-cx20hb0y3u] { flex-direction: column; gap: .15em; }

/* Navigation shells. */
.hst--shell-island .hst__nav[b-cx20hb0y3u], .hst--shell-raised .hst__nav[b-cx20hb0y3u], .hst--shell-floating .hst__nav[b-cx20hb0y3u],
.hst--shell-framed .hst__nav[b-cx20hb0y3u], .hst--shell-recessed .hst__nav[b-cx20hb0y3u], .hst--shell-bay .hst__nav[b-cx20hb0y3u],
.hst--shell-arc .hst__nav[b-cx20hb0y3u], .hst--shell-ribbon .hst__nav[b-cx20hb0y3u] { flex: 0 1 auto; margin-inline: auto; padding: .28em .5em; }
.hst--shell-island .hst__nav[b-cx20hb0y3u] { border-radius: .5em; background: color-mix(in srgb, var(--hst-text) 10%, transparent); }
.hst--shell-recessed .hst__nav[b-cx20hb0y3u] { border-radius: .45em; background: rgba(0, 0, 0, .18); box-shadow: inset 0 .12em .22em rgba(0, 0, 0, .4); }
.hst--shell-raised .hst__nav[b-cx20hb0y3u] { border-radius: .45em; transform: translateY(-.14em); background: color-mix(in srgb, var(--hst-text) 12%, transparent); box-shadow: 0 .25em .5em -.2em rgba(0, 0, 0, .5); }
.hst--shell-framed .hst__nav[b-cx20hb0y3u] { border-radius: .3em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-text) 28%, transparent); }
.hst--shell-floating .hst__nav[b-cx20hb0y3u] { border-radius: 99em; background: var(--hst-bg); box-shadow: 0 .3em .6em -.2em rgba(0, 0, 0, .45); }
.hst--shell-offset .hst__nav[b-cx20hb0y3u] { transform: translateY(.22em); }
.hst--shell-overlap .hst__nav[b-cx20hb0y3u] { transform: translateY(.5em); border-radius: 99em; padding: .2em .5em; background: var(--hst-bg); box-shadow: 0 .3em .6em -.2em rgba(0, 0, 0, .45); }
.hst--shell-deck .hst__nav[b-cx20hb0y3u] { align-self: stretch; align-items: center; background: color-mix(in srgb, var(--hst-text) 8%, transparent); }
.hst--shell-ladder .hst__item + .hst__item[b-cx20hb0y3u] { box-shadow: inset .1em 0 0 color-mix(in srgb, var(--hst-text) 28%, transparent); padding-left: .35em; }
.hst--shell-ribbon .hst__nav[b-cx20hb0y3u] { background: color-mix(in srgb, var(--hst-accent) 26%, transparent); clip-path: polygon(.4em 0, calc(100% - .4em) 0, 100% 100%, 0 100%); }
.hst--shell-arc .hst__nav[b-cx20hb0y3u] { border-radius: 0 0 1.2em 1.2em; background: color-mix(in srgb, var(--hst-text) 10%, transparent); }
.hst--shell-bay .hst__nav[b-cx20hb0y3u] { border-radius: 0 0 .5em .5em; background: rgba(0, 0, 0, .16); box-shadow: inset 0 -.1em 0 color-mix(in srgb, var(--hst-accent) 55%, transparent); }

/* Action docks. */
.hst--act-dock .hst__cta[b-cx20hb0y3u] { box-shadow: 0 0 0 .22em color-mix(in srgb, var(--hst-text) 12%, transparent); }
.hst--act-tray .hst__cta[b-cx20hb0y3u] { box-shadow: 0 0 0 .22em rgba(0, 0, 0, .2); }
.hst--act-bank .hst__cta[b-cx20hb0y3u] { margin-left: .45em; box-shadow: -.35em 0 0 -.3em color-mix(in srgb, var(--hst-text) 32%, transparent); }
.hst--act-split .hst__cta[b-cx20hb0y3u] { margin-left: .55em; box-shadow: -.45em 0 0 -.4em color-mix(in srgb, var(--hst-text) 36%, transparent); }
.hst--act-stack .hst__cta[b-cx20hb0y3u] { height: .9em; }
.hst--act-corner .hst__cta[b-cx20hb0y3u] { border-radius: .2em; box-shadow: 0 0 0 .3em color-mix(in srgb, var(--hst-accent) 22%, transparent); }
.hst--act-ribbon .hst__cta[b-cx20hb0y3u] { clip-path: polygon(.35em 0, 100% 0, 100% 100%, .35em 100%, 0 50%); }
.hst--act-pillar .hst__cta[b-cx20hb0y3u] { box-shadow: -.5em 0 0 -.42em var(--hst-accent); }
.hst--act-tab .hst__cta[b-cx20hb0y3u] { transform: translateY(.3em); }
/* /Components/Pages/Appearance/PaymentFormAssignDialog.razor.rz.scp.css */
/* Assign Payment Form dialog. Scoped; MudBlazor palette variables only, so it follows the Admin theme (light / dark). */
.pfa[b-f8ojnqjgm6] { display: flex; flex-direction: column; gap: 14px; min-width: 0; --pfa-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12)); }

.pfa-form[b-f8ojnqjgm6] { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pfa-form__label[b-f8ojnqjgm6] { font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.pfa-form__name[b-f8ojnqjgm6] { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.pfa-code[b-f8ojnqjgm6] {
    display: inline-block; margin-inline-end: 6px; padding: 0 7px; border-radius: 6px;
    font-size: .82em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.pfa-dest[b-f8ojnqjgm6] { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pfa-dest__legend[b-f8ojnqjgm6] { margin-bottom: 6px; padding: 0; font-size: .92rem; font-weight: 700; color: var(--mud-palette-text-primary); }

.pfa-opt[b-f8ojnqjgm6] {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--pfa-line); background: var(--mud-palette-surface);
}
.pfa-opt.is-on[b-f8ojnqjgm6] { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface)); }
.pfa-opt.is-locked[b-f8ojnqjgm6] { cursor: not-allowed; opacity: .7; }
.pfa-opt input[b-f8ojnqjgm6] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mud-palette-primary); }
.pfa-opt__text[b-f8ojnqjgm6] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pfa-opt__title[b-f8ojnqjgm6] { font-weight: 700; color: var(--mud-palette-text-primary); }
.pfa-opt__help[b-f8ojnqjgm6] { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pfa-opt__current[b-f8ojnqjgm6] { font-size: .82rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }

.pfa-chip[b-f8ojnqjgm6] {
    display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: .74rem; font-weight: 600;
    color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.pfa-summary[b-f8ojnqjgm6] {
    margin: 0; padding: 10px 14px 10px 30px; border-radius: 10px; font-size: .86rem; line-height: 1.5;
    color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
}
.pfa-note[b-f8ojnqjgm6] { margin: 0; font-size: .78rem; color: var(--mud-palette-text-secondary); }
/* /Components/Pages/Appearance/PaymentFormGallery.razor.rz.scp.css */
/* The Payment Form Library gallery (shared by the library page and the Order Settings picker). Scoped; MudBlazor palette
   variables only, so it follows the Admin theme. Categories on the left, the library on the right; both lay out by the width
   the gallery actually has (container queries) and it never scrolls the page sideways. */

.pfl-gallery[b-g8luiygpx8] {
    container: pflroot / inline-size;
    min-width: 0;
    --pfl-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    --pfl-accent: var(--mud-palette-primary);
}

.pfl-code[b-g8luiygpx8] {
    display: inline-block; margin-inline-end: 6px; padding: 0 7px; border-radius: 6px;
    font-size: .82em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* ── Layout ── */
.pfl-layout[b-g8luiygpx8] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container pflroot (min-width: 980px) {
    .pfl-layout[b-g8luiygpx8] { grid-template-columns: 270px minmax(0, 1fr); }
    .pfl-cats[b-g8luiygpx8] { position: sticky; top: 76px; }
}

/* ── Categories ── */
.pfl-cats[b-g8luiygpx8] {
    min-width: 0; border-radius: 12px; overflow: hidden;
    background: var(--mud-palette-surface); border: 1px solid var(--pfl-line);
}
.pfl-cats__title[b-g8luiygpx8] { margin: 0; padding: 14px 16px 6px; font-size: 1.1rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.pfl-cats__search[b-g8luiygpx8] { padding: 0 12px 8px; border-bottom: 1px solid var(--pfl-line); }
.pfl-cats__none[b-g8luiygpx8] { margin: 0; padding: 10px 16px 14px; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pfl-cats__more[b-g8luiygpx8] {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--pfl-line);
    background: transparent; font: inherit; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-primary); cursor: pointer; text-align: start;
}
.pfl-cats__more:hover[b-g8luiygpx8] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.pfl-cats__more:focus-visible[b-g8luiygpx8] { outline: 2px solid var(--pfl-accent); outline-offset: -2px; }
.pfl-cats__list[b-g8luiygpx8] { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.pfl-cat[b-g8luiygpx8] {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box;
    padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: start;
    font: inherit; font-size: .86rem; color: var(--mud-palette-text-primary);
    transition: background-color .15s ease;
}
.pfl-cat:hover[b-g8luiygpx8] { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.pfl-cat:focus-visible[b-g8luiygpx8] { outline: 2px solid var(--pfl-accent); outline-offset: -2px; }
.pfl-cat[b-g8luiygpx8]  .mud-icon-root { flex: 0 0 auto; font-size: 1.15rem; opacity: .8; }
.pfl-cat__name[b-g8luiygpx8] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pfl-cat__count[b-g8luiygpx8] {
    flex: 0 0 auto; min-width: 34px; padding: 1px 8px; border-radius: 999px; text-align: center;
    font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray);
}
.pfl-cat.is-active[b-g8luiygpx8] { font-weight: 600; color: #fff; background: var(--mud-palette-primary); }
.pfl-cat.is-active[b-g8luiygpx8]  .mud-icon-root { color: #fff; opacity: 1; }
.pfl-cat.is-active .pfl-cat__count[b-g8luiygpx8] { color: var(--mud-palette-primary); background: #fff; }
.pfl-cat.is-active:hover[b-g8luiygpx8] { background: color-mix(in srgb, var(--mud-palette-primary) 88%, #000); }
@container pflroot (max-width: 979px) {
    .pfl-cats__list[b-g8luiygpx8] { flex-direction: row; overflow-x: auto; scrollbar-width: thin; gap: 6px; padding: 8px; }
    .pfl-cats__list > li[b-g8luiygpx8] { flex: 0 0 auto; }
    .pfl-cat[b-g8luiygpx8] { border: 1px solid var(--pfl-line); border-radius: 999px; white-space: nowrap; }
    .pfl-cat__name[b-g8luiygpx8] { overflow-wrap: normal; }
}

/* ── Library controls ── */
.pfl-main[b-g8luiygpx8] { container: pfl / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pfl-controls[b-g8luiygpx8] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--pfl-line);
}
.pfl-controls__heading[b-g8luiygpx8] { flex: 1 1 240px; min-width: 0; }
.pfl-controls__title[b-g8luiygpx8] { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.pfl-controls__tools[b-g8luiygpx8] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.pfl-search[b-g8luiygpx8] { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pfl-search[b-g8luiygpx8]  .mud-input-control { flex: 1 1 auto; }
.pfl-select[b-g8luiygpx8] { flex: 0 1 180px; min-width: 140px; }
.pfl-select--narrow[b-g8luiygpx8] { flex: 0 1 110px; min-width: 96px; }
.pfl-views[b-g8luiygpx8] { display: inline-flex; border: 1px solid var(--pfl-line); border-radius: 8px; overflow: hidden; }
.pfl-view[b-g8luiygpx8] {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; background: transparent;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--mud-palette-text-secondary); cursor: pointer;
}
.pfl-view.is-active[b-g8luiygpx8] { color: #fff !important; background: var(--mud-palette-primary) !important; }
.pfl-view.is-active[b-g8luiygpx8]  .mud-icon-root { color: #fff; }
.pfl-view + .pfl-view[b-g8luiygpx8] { border-inline-start: 1px solid var(--pfl-line); }
.pfl-view.is-active[b-g8luiygpx8] { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent); }
.pfl-view:focus-visible[b-g8luiygpx8] { outline: 2px solid var(--pfl-accent); outline-offset: -2px; }
.pfl-showing[b-g8luiygpx8] { margin: 2px 0 0; font-size: .86rem; color: var(--mud-palette-text-secondary); }
@container pfl (max-width: 640px) {
    .pfl-controls__tools[b-g8luiygpx8] { justify-content: flex-start; }
    .pfl-view__text[b-g8luiygpx8] { display: none; }
}
.pfl-empty[b-g8luiygpx8] {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center;
    border-radius: 12px; border: 1px dashed var(--pfl-line); color: var(--mud-palette-text-secondary);
}
.pfl-empty[b-g8luiygpx8]  .mud-icon-root { font-size: 2.6rem; opacity: .6; }
.pfl-empty p[b-g8luiygpx8] { margin: 0; }

/* ── Cards ── */
/* Four cards a row on a desktop library (more than 880 px of content), three, two, then one on a phone. */
.pfl-grid[b-g8luiygpx8] { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container pfl (max-width: 880px) { .pfl-grid[b-g8luiygpx8] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container pfl (max-width: 660px) { .pfl-grid[b-g8luiygpx8] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pfl (max-width: 420px) { .pfl-grid[b-g8luiygpx8] { grid-template-columns: minmax(0, 1fr); } }
.pfl-card[b-g8luiygpx8] {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--pfl-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.pfl-card:hover[b-g8luiygpx8] { box-shadow: 0 14px 30px -18px rgba(16, 24, 40, .45); border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--pfl-line)); }
.pfl-card.is-selected[b-g8luiygpx8] { border: 2px solid var(--mud-palette-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 18%, transparent); }
.pfl-card.is-inactive .pfl-card__thumb[b-g8luiygpx8] { filter: grayscale(.85); opacity: .7; }
.pfl-card__thumb[b-g8luiygpx8] { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px 12px 0 0; overflow: hidden; }
.pfl-card__thumb:focus-visible[b-g8luiygpx8] { outline: 3px solid var(--pfl-accent); outline-offset: -3px; }
.pfl-card__text[b-g8luiygpx8] { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 4px; min-width: 0; }
.pfl-card__line[b-g8luiygpx8] { margin: 0; display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.pfl-card__line .pfl-code[b-g8luiygpx8] { flex: 0 0 auto; }
.pfl-card__name[b-g8luiygpx8] { min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.pfl-card__meta[b-g8luiygpx8] { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .76rem; color: var(--mud-palette-text-secondary); }
.pfl-card__desc[b-g8luiygpx8] { margin: 2px 0 0; font-size: .8rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.pfl-card__tags[b-g8luiygpx8] { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pfl-tag[b-g8luiygpx8] { padding: 1px 7px; border-radius: 6px; font-size: .7rem; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.pfl-status[b-g8luiygpx8] {
    margin-inline-start: auto; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700;
    color: var(--mud-palette-warning-darken); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}
.pfl-status.is-active[b-g8luiygpx8] { color: var(--mud-palette-success-darken); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.pfl-card__actions[b-g8luiygpx8] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px 12px; margin-top: auto; }
.pfl-card__actions[b-g8luiygpx8]  .mud-button-root { flex: 1 1 auto; }
.pfl-card__new[b-g8luiygpx8] {
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; padding: 2px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 6px 16px -6px rgba(225, 29, 72, .6);
}
.pfl-card__badge[b-g8luiygpx8] {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: #fff; background: var(--mud-palette-success);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}

/* List view: a thumbnail beside the text and actions. */
.pfl-grid--list[b-g8luiygpx8] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pfl-grid--list .pfl-card[b-g8luiygpx8] { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; }
.pfl-grid--list .pfl-card__thumb[b-g8luiygpx8] { border-radius: 10px; margin: 8px; width: auto; }
.pfl-grid--list .pfl-card__actions[b-g8luiygpx8] { flex-direction: column; align-items: stretch; margin: 0; padding: 12px; }
@container pfl (max-width: 700px) {
    .pfl-grid--list .pfl-card[b-g8luiygpx8] { grid-template-columns: 140px minmax(0, 1fr); }
    .pfl-grid--list .pfl-card__actions[b-g8luiygpx8] { grid-column: 1 / -1; flex-direction: row; }
    .pfl-grid--list .pfl-card__desc[b-g8luiygpx8] { display: none; }
}

/* ── Pager ── */
.pfl-pager[b-g8luiygpx8] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px 0 12px; }
.pfl-pager__of[b-g8luiygpx8] { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-inline: 6px; }

@media (prefers-reduced-motion: reduce) {
    .pfl-card[b-g8luiygpx8], .pfl-cat[b-g8luiygpx8] { transition: none; }
}
/* /Components/Pages/Appearance/PaymentFormLibrary.razor.rz.scp.css */
/* Appearance → Payment Form Library. Scoped; MudBlazor palette variables only, so it follows the Admin theme (light / dark).
   Categories on the left, the library on the right; both lay out by the width they actually have (container queries) and the
   page never scrolls sideways. */

.pfl-page[b-w1ffwug7u6] {
    container: pflroot / inline-size;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    --pfl-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    --pfl-accent: var(--mud-palette-primary);
}

/* ── Page header ── */
.pfl-head[b-w1ffwug7u6] { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.pfl-head__icon[b-w1ffwug7u6] {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.pfl-head__text[b-w1ffwug7u6] { min-width: 0; }
.pfl-head__title[b-w1ffwug7u6] { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.pfl-head__intro[b-w1ffwug7u6] { margin: 4px 0 0; max-width: 72rem; font-size: .92rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.pfl-loading[b-w1ffwug7u6] { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; color: var(--mud-palette-text-secondary); }

/* ── Headline numbers ── */
.pfl-stats[b-w1ffwug7u6] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pfl-stat[b-w1ffwug7u6] {
    --pfl-tone: var(--mud-palette-primary);
    display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 16px 18px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pfl-tone) 9%, var(--mud-palette-surface)), var(--mud-palette-surface) 70%);
    border: 1px solid color-mix(in srgb, var(--pfl-tone) 22%, var(--pfl-line));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 26px -22px color-mix(in srgb, var(--pfl-tone) 70%, #000);
}
.pfl-stat[b-w1ffwug7u6]  .mud-icon-root { flex: 0 0 auto; font-size: 1.8rem; color: var(--pfl-tone); }
.pfl-stat__tile[b-w1ffwug7u6] {
    flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    background: color-mix(in srgb, var(--pfl-tone) 14%, transparent);
}
.pfl-stat__tile[b-w1ffwug7u6]  .mud-icon-root { font-size: 1.75rem; }
.pfl-stat--total[b-w1ffwug7u6] { --pfl-tone: #2e7d32; }
.pfl-stat--ok[b-w1ffwug7u6] { --pfl-tone: #1e88e5; }
.pfl-stat--cats[b-w1ffwug7u6] { --pfl-tone: #7c3aed; }
.pfl-stat--new[b-w1ffwug7u6] { --pfl-tone: #e8590c; }
.pfl-stat--ok[b-w1ffwug7u6]  .mud-icon-root { color: var(--pfl-tone); }
.pfl-stat--sel[b-w1ffwug7u6] { grid-column: span 2; border-color: color-mix(in srgb, var(--mud-palette-success) 55%, var(--pfl-line)); background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface)); }
.pfl-stat--sel[b-w1ffwug7u6]  .mud-icon-root { color: var(--mud-palette-success); }
.pfl-stat__value[b-w1ffwug7u6] { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.pfl-stat__label[b-w1ffwug7u6] { margin: 0; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.pfl-stat__sel[b-w1ffwug7u6] { flex: 1 1 auto; min-width: 0; }
.pfl-stat__name[b-w1ffwug7u6] { margin: 2px 0 0; font-size: .95rem; font-weight: 700; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.pfl-stat__row[b-w1ffwug7u6] { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pfl-stat__row .pfl-stat__name[b-w1ffwug7u6] { flex: 1 1 auto; min-width: 0; }
.pfl-stat__row[b-w1ffwug7u6]  .pfl-stat__preview { flex: 0 0 auto; }
.pfl-stat__name--none[b-w1ffwug7u6] { font-weight: 500; color: var(--mud-palette-text-secondary); }
.pfl-stat__meta[b-w1ffwug7u6] { margin: 2px 0 0; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.pfl-code[b-w1ffwug7u6] {
    display: inline-block; margin-inline-end: 6px; padding: 0 7px; border-radius: 6px;
    font-size: .82em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

@container pflroot (max-width: 600px) {
    .pfl-stat--sel[b-w1ffwug7u6] { grid-column: auto; }
}
/* /Components/Pages/Appearance/PaymentFormPreviewDialog.razor.rz.scp.css */
/* Payment Form preview popup. Large and centred (94vw × 92vh, capped), MudBlazor palette variables only so it follows the
   Admin theme. The preview area scrolls on its own; the page behind never scrolls sideways. Full screen fills the viewport. */

.pfd[b-lrzczlajnn] { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; }
.pfd__backdrop[b-lrzczlajnn] { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }

.pfd__panel[b-lrzczlajnn] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(94vw, 1600px);
    height: min(92vh, 1100px);
    min-width: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
    overflow: hidden;
    outline: none;
}
.pfd__panel.is-full[b-lrzczlajnn] { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }

/* ── Header ── */
.pfd__head[b-lrzczlajnn] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.pfd__heading[b-lrzczlajnn] { min-width: 0; flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; }
.pfd__eyebrow[b-lrzczlajnn] { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.pfd__title[b-lrzczlajnn] { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pfd__code[b-lrzczlajnn] {
    display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: 6px;
    font-variant-numeric: tabular-nums; font-size: .9rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary);
}
.pfd__chips[b-lrzczlajnn] { display: flex; flex-wrap: wrap; gap: 6px; }
.pfd__chip[b-lrzczlajnn] {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 600; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary);
}
.pfd__chip[b-lrzczlajnn]  .mud-icon-root { font-size: 1rem; }
.pfd__chip--ok[b-lrzczlajnn] { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success-darken); }
.pfd__chip--off[b-lrzczlajnn] { background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning-darken); }
.pfd__chip--sel[b-lrzczlajnn] { background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); color: var(--mud-palette-success-darken); }
.pfd__tools[b-lrzczlajnn] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pfd__stepper[b-lrzczlajnn] { display: inline-flex; align-items: center; gap: 6px; }
.pfd__position[b-lrzczlajnn] { min-width: 56px; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }

/* ── Body ── */
.pfd__body[b-lrzczlajnn] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pfd__body.has-details[b-lrzczlajnn] { grid-template-columns: minmax(0, 1fr) 320px; }
.pfd__stage[b-lrzczlajnn] {
    min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 18px;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent) 75%) 0 0 / 22px 22px,
        var(--mud-palette-background-gray);
}
.pfd__frame[b-lrzczlajnn] { margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(15, 23, 42, .45); background: #fff; }
.pfd__frame[data-device="tablet"][b-lrzczlajnn] { max-width: 860px; }
.pfd__frame[data-device="mobile"][b-lrzczlajnn] { max-width: 410px; border: 10px solid #1f2937; border-radius: 34px; }
.pfd__panel.is-full .pfd__stage[b-lrzczlajnn] { padding: 10px; }

.pfd__details[b-lrzczlajnn] {
    min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 18px 20px; border-inline-start: 1px solid var(--mud-palette-lines-default);
    display: flex; flex-direction: column; gap: 10px;
}
.pfd__desc[b-lrzczlajnn] { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.pfd__h[b-lrzczlajnn] { margin: 8px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.pfd__dl[b-lrzczlajnn] { margin: 0; display: flex; flex-direction: column; }
.pfd__dl div[b-lrzczlajnn] { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); font-size: .84rem; }
.pfd__dl dt[b-lrzczlajnn] { color: var(--mud-palette-text-secondary); }
.pfd__dl dd[b-lrzczlajnn] { margin: 0; font-weight: 600; text-align: end; }
.pfd__swatches[b-lrzczlajnn] { display: flex; gap: 6px; }
.pfd__swatch[b-lrzczlajnn] { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); }
.pfd__sections[b-lrzczlajnn] { margin: 0; padding-inline-start: 20px; font-size: .84rem; line-height: 1.7; }
.pfd__tags[b-lrzczlajnn] { display: flex; flex-wrap: wrap; gap: 6px; }
.pfd__tag[b-lrzczlajnn] { padding: 2px 8px; border-radius: 6px; font-size: .74rem; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.pfd__version[b-lrzczlajnn] { margin: 6px 0 0; font-size: .74rem; color: var(--mud-palette-text-disabled); }

/* ── Footer ── */
.pfd__foot[b-lrzczlajnn] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--mud-palette-lines-default);
}
.pfd__demo[b-lrzczlajnn] { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mud-palette-text-secondary); min-width: 0; }
.pfd__actions[b-lrzczlajnn] { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }

@media (max-width: 1100px) {
    .pfd__body.has-details[b-lrzczlajnn] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .pfd__details[b-lrzczlajnn] { max-height: 34vh; border-inline-start: 0; border-top: 1px solid var(--mud-palette-lines-default); }
}

@media (max-width: 700px) {
    .pfd__panel[b-lrzczlajnn] { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    .pfd__head[b-lrzczlajnn] { padding: 10px 12px; }
    .pfd__stage[b-lrzczlajnn] { padding: 8px; }
    .pfd__frame[data-device="mobile"][b-lrzczlajnn] { border-width: 6px; border-radius: 22px; }
    .pfd__actions[b-lrzczlajnn] { width: 100%; }
    .pfd__actions[b-lrzczlajnn]  .mud-button-root { flex: 1 1 auto; }
}
/* /Components/Pages/Appearance/PaymentFormThumb.razor.rz.scp.css */
/* Card thumbnail: a fixed-ratio window onto the top of the real rendered form. The canvas is laid out at 1180px and zoomed
   to the card's width by fitDevicePreview (it sets --navr-device-zoom on the stage); .22 is the pre-script fallback. */
.pft[b-57eru77e0x] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: var(--mud-palette-background-gray);
    isolation: isolate;
}
.pft--compact[b-57eru77e0x] { aspect-ratio: 16 / 10; border-radius: 8px; }
.pft__stage[b-57eru77e0x] { position: absolute; inset: 0; overflow: hidden; }
.pft__canvas[b-57eru77e0x] { zoom: var(--navr-device-zoom, .22); pointer-events: none; user-select: none; }
.pft__missing[b-57eru77e0x] {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 800; font-size: 1.6rem; letter-spacing: .08em; color: var(--mud-palette-text-disabled);
}
/* /Components/Pages/Appearance/ThemeSettings.razor.rz.scp.css */
/* Component-scoped styles for Admin → Appearance → Theme Settings.
   Two colour systems live here and never mix:
   - the PAGE chrome uses MudBlazor palette variables, so the screen re-themes with the active Admin theme;
   - the CARD MINIATURES use only the --t-* variables set inline per card from that theme's own tokens, so a
     card always shows its own theme and never the one the Admin panel happens to be wearing.
   No global selector is touched. */

/* ── page chrome ───────────────────────────────────────────────────────────── */

.thm-head[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.thm-head__title[b-jkeyrh94tp] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.thm-head__count[b-jkeyrh94tp] { opacity: .58; }

.thm-panel[b-jkeyrh94tp] {
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.thm-panel__intro[b-jkeyrh94tp] { opacity: .7; margin-bottom: 18px; max-width: 78ch; }
.thm-panel__switch[b-jkeyrh94tp] { margin-top: 6px; }

/* Toolbar rows collapse from three columns to one without a width-specific rule. */
.thm-row[b-jkeyrh94tp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.thm-avail[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.thm-avail__text[b-jkeyrh94tp] { flex: 1 1 260px; min-width: 0; }
.thm-avail__hint[b-jkeyrh94tp] { display: block; opacity: .6; }
.thm-avail__actions[b-jkeyrh94tp] { display: flex; gap: 8px; flex: 0 0 auto; }

.thm-foot[b-jkeyrh94tp] {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0 8px;
    margin-top: 24px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── the catalogue grid ────────────────────────────────────────────────────── */
/* auto-fill with a fixed minimum keeps the card's internal proportions constant and lets the column count
   fall 5 → 4 → 3 → 2 → 1 on its own. Nothing here is tied to a specific viewport width. */
.thm-grid[b-jkeyrh94tp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 16px;
}

.thm-card[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.thm-card:hover[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.thm-card.is-admin[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
/* Released state is marked POSITIVELY, on the card's own chrome — a tinted footer strip and a firmer border.
   Dimming or desaturating the miniature instead would have been easier to scan but would misrepresent the one
   thing the card exists to show: the theme's real colours. The checkbox and its label carry the same state in
   words, so it is never communicated by colour alone. */
.thm-card:not(.is-muted)[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); }
.thm-card:not(.is-muted) .thm-card__release[b-jkeyrh94tp] { background: var(--mud-palette-primary-hover); }
.thm-card:not(.is-muted) .thm-card__release span[b-jkeyrh94tp] { opacity: 1; font-weight: 600; }

.thm-card__apply[b-jkeyrh94tp] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    font: inherit;
    text-align: left;
    background: transparent;
}

.thm-card__apply:focus-visible[b-jkeyrh94tp] { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }

/* ── the miniature (painted only from --t-* tokens) ────────────────────────── */

.thm-mock[b-jkeyrh94tp] {
    display: block;
    background: var(--t-bg);
    color: var(--t-text);
    font-size: 7.5px;
    line-height: 1.35;
    user-select: none;
}

.thm-mock__bar[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    background: var(--t-appbar);
    color: var(--t-on-appbar);
    font-size: 6.5px;
}

.thm-mock__mark[b-jkeyrh94tp] { width: 7px; height: 7px; border-radius: 2px; background: var(--t-tertiary); flex: 0 0 auto; }
.thm-mock__barlabel[b-jkeyrh94tp] { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.thm-mock__win[b-jkeyrh94tp] { letter-spacing: 2px; opacity: .75; flex: 0 0 auto; }

/* The card's headline. Coloured with the theme's primary, which is the single strongest signal of identity. */
.thm-mock__heading[b-jkeyrh94tp] {
    display: block;
    padding: 7px 10px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--t-primary);
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thm-mock__heading b[b-jkeyrh94tp] { font-weight: 700; opacity: .85; }

.thm-mock__body[b-jkeyrh94tp] { display: grid; grid-template-columns: 34% 1fr; min-height: 88px; }

.thm-mock__side[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 0;
    background: var(--t-drawer);
    border-right: 1px solid var(--t-line);
}

.thm-mock__nav[b-jkeyrh94tp] { padding: 3px 8px; color: var(--t-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thm-mock__nav.is-active[b-jkeyrh94tp] { background: var(--t-active); color: var(--t-text); font-weight: 600; }

.thm-mock__main[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px 8px;
    background: var(--t-surface);
}

.thm-mock__label[b-jkeyrh94tp] { color: var(--t-text2); font-size: 6.5px; }

/* The nine-shade ramp: the theme's primary → secondary → tertiary, ordered darkest first. */
.thm-mock__ramp[b-jkeyrh94tp] { display: flex; gap: 2px; }
.thm-mock__chip[b-jkeyrh94tp] { flex: 1 1 0; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--t-line); }

.thm-mock__btns[b-jkeyrh94tp] { display: flex; gap: 4px; }
.thm-mock__foot[b-jkeyrh94tp] { display: flex; gap: 4px; justify-content: flex-end; margin-top: auto; padding-top: 4px; }

.thm-mock__btn[b-jkeyrh94tp] {
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 6.5px;
    font-weight: 600;
    white-space: nowrap;
}

.thm-mock__btn--primary[b-jkeyrh94tp] { background: var(--t-primary); color: var(--t-on-primary); }
.thm-mock__btn--ghost[b-jkeyrh94tp] { background: transparent; color: var(--t-primary); box-shadow: inset 0 0 0 1px var(--t-primary); }
.thm-mock__btn--plain[b-jkeyrh94tp] { background: transparent; color: var(--t-text2); box-shadow: inset 0 0 0 1px var(--t-line); }

/* ── card footer: identity, tags, state, release toggle ────────────────────── */

.thm-card__meta[b-jkeyrh94tp] { display: flex; align-items: center; gap: 8px; padding: 9px 11px 0; }

.thm-card__name[b-jkeyrh94tp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thm-card__num[b-jkeyrh94tp] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.thm-card__tags[b-jkeyrh94tp] { display: inline-flex; gap: 4px; flex: 0 0 auto; }

.thm-tag[b-jkeyrh94tp] {
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .72;
    white-space: nowrap;
}

.thm-card__badges[b-jkeyrh94tp] { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 11px 0; }

.thm-badge[b-jkeyrh94tp] {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.thm-badge--admin[b-jkeyrh94tp] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.thm-badge--default[b-jkeyrh94tp] { background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }

.thm-card__release[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 11px 10px;
    font-size: .78rem;
    cursor: pointer;
    min-height: 36px;
}

.thm-card__release input[b-jkeyrh94tp] { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; accent-color: var(--mud-palette-primary); }
.thm-card__release input:disabled[b-jkeyrh94tp] { cursor: default; }
.thm-card__release input:focus-visible[b-jkeyrh94tp] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.thm-card__release span[b-jkeyrh94tp] { opacity: .78; }
.thm-card__release input:disabled + span[b-jkeyrh94tp] { opacity: .5; }

/* ── responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .thm-grid[b-jkeyrh94tp] { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
    .thm-panel[b-jkeyrh94tp] { padding: 16px; }
}

@media (max-width: 560px) {
    /* One column below ~560px: two cards plus the gutter no longer fit, and shrinking them further would make
       the miniature illegible rather than merely small. The single card is then wide enough to carry a larger
       type scale, which is what the rules below do. */
    .thm-grid[b-jkeyrh94tp] { grid-template-columns: 1fr; }
    .thm-mock[b-jkeyrh94tp] { font-size: 9px; }
    .thm-mock__heading[b-jkeyrh94tp] { font-size: 15px; }
    .thm-mock__label[b-jkeyrh94tp], .thm-mock__btn[b-jkeyrh94tp], .thm-mock__bar[b-jkeyrh94tp] { font-size: 8px; }
    .thm-mock__body[b-jkeyrh94tp] { min-height: 112px; }
    .thm-card__release[b-jkeyrh94tp] { min-height: 44px; }
    .thm-card__release input[b-jkeyrh94tp] { width: 18px; height: 18px; }
    .thm-avail__actions[b-jkeyrh94tp] { width: 100%; }
    .thm-avail__actions .mud-button-root[b-jkeyrh94tp] { flex: 1 1 0; }
    .thm-foot .mud-button-root[b-jkeyrh94tp] { width: 100%; }
}
/* /Components/Pages/Assistant/AiAssistant.razor.rz.scp.css */
/* AISITE AI Assistant page — MudBlazor palette variables only, like the rest of the Admin. */

.ai-page[b-odvaa28tlo] {
    max-width: 88rem;
}

[b-odvaa28tlo] .ai-chat {
    display: flex;
    flex-direction: column;
    height: min(78vh, 56rem);
    min-height: 28rem;
}

.ai-chat__log[b-odvaa28tlo] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ai-chat__empty[b-odvaa28tlo] {
    margin: auto;
    max-width: 30rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ai-chat__composer[b-odvaa28tlo] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

[b-odvaa28tlo] .ai-chat__input {
    flex: 1 1 auto;
}

.ai-msg[b-odvaa28tlo] {
    display: flex;
    flex-direction: column;
    max-width: 92%;
}

.ai-msg--user[b-odvaa28tlo] {
    align-self: flex-end;
    align-items: flex-end;
}

.ai-msg--bot[b-odvaa28tlo] {
    align-self: flex-start;
}

.ai-msg__who[b-odvaa28tlo] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.ai-msg__bubble[b-odvaa28tlo] {
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.ai-msg--user .ai-msg__bubble[b-odvaa28tlo] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ai-msg--error .ai-msg__bubble[b-odvaa28tlo] {
    border: 1px solid var(--mud-palette-warning);
}

.ai-md[b-odvaa28tlo] {
    white-space: normal;
}

.ai-md[b-odvaa28tlo]  p {
    margin: 0 0 0.45rem;
}

.ai-md[b-odvaa28tlo]  ul,
.ai-md[b-odvaa28tlo]  ol {
    margin: 0.15rem 0 0.5rem;
    padding-left: 1.3rem;
}

.ai-md[b-odvaa28tlo]  li {
    margin: 0.1rem 0;
}

.ai-facts[b-odvaa28tlo],
.ai-templates[b-odvaa28tlo],
[b-odvaa28tlo] .ai-refs {
    margin-top: 0.5rem;
}

[b-odvaa28tlo] .ai-template {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}

[b-odvaa28tlo] .ai-template--top {
    border-color: var(--mud-palette-primary) !important;
}

.ai-chips[b-odvaa28tlo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

.ai-chips__label[b-odvaa28tlo] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-right: 0.25rem;
}

.ai-ref[b-odvaa28tlo] {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.ai-ref:last-child[b-odvaa28tlo] {
    border-bottom: none;
}

.ai-ref__path[b-odvaa28tlo],
.ai-ref__row[b-odvaa28tlo] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin: 0.15rem 0;
}

.ai-ref__path span[b-odvaa28tlo],
.ai-ref__row span[b-odvaa28tlo] {
    font-weight: 600;
}

.ai-suggestions[b-odvaa28tlo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (max-width: 600px) {
    [b-odvaa28tlo] .ai-chat {
        height: 72vh;
    }

    .ai-msg[b-odvaa28tlo] {
        max-width: 100%;
    }

    .ai-chat__composer[b-odvaa28tlo] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Client Storage Overview — scoped. Clean white cards, rounded corners, subtle shadows; MudBlazor palette variables only,
   so the Dashboard follows the Admin theme (light / dark). Mobile first: everything stacks, then widens. */

.navr-dash[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Header ── */
.navr-dash__header[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.navr-dash__heading[b-7trigi19rc] {
    min-width: 0;
    flex: 1 1 18rem;
}

.navr-dash__title[b-7trigi19rc] {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dash__subtitle[b-7trigi19rc] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dash__live[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.navr-dash__status[b-7trigi19rc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.navr-dash__dot[b-7trigi19rc] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.navr-dash__status--live[b-7trigi19rc] {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

.navr-dash__status--live .navr-dash__dot[b-7trigi19rc] {
    animation: navr-dash-pulse-b-7trigi19rc 2s ease-in-out infinite;
}

.navr-dash__status--stale[b-7trigi19rc],
.navr-dash__status--loading[b-7trigi19rc] {
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-dash__status--unavailable[b-7trigi19rc] {
    color: var(--mud-palette-error-darken, var(--mud-palette-error));
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

@keyframes navr-dash-pulse-b-7trigi19rc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.navr-dash__live[b-7trigi19rc]  .navr-dash__refresh--spin .mud-icon-root {
    animation: navr-dash-spin-b-7trigi19rc 0.9s linear infinite;
}

@keyframes navr-dash-spin-b-7trigi19rc {
    to { transform: rotate(360deg); }
}

.navr-dash__updated[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.navr-dash__updated-label[b-7trigi19rc] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__updated-value[b-7trigi19rc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* ── Summary cards ──
   ONE grid for all eight cards (storage row, then content row): every card sits on the same column tracks with the same
   horizontal and vertical gap, and grid-auto-rows: 1fr gives every row the same height. */
.navr-dash__cards[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
}

/* Pastel card language (tone tokens in wwwroot/app.css): soft semantic fill, matching border, a coloured accent at the
   inline start and a soft shadow. The fill is mixed into the theme surface, so light and dark mode both stay readable. */
.navr-dash__card[b-7trigi19rc],
.navr-dash__panel[b-7trigi19rc] {
    border: 1px solid var(--navr-tone-line, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
    border-inline-start: 4px solid var(--navr-tone, var(--mud-palette-primary));
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
    min-width: 0;
}

.navr-dash__card[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    background: var(--navr-tone-bg, var(--mud-palette-surface));
}

.navr-dash__card-icon[b-7trigi19rc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-dash__card-body[b-7trigi19rc] {
    min-width: 0;
}

.navr-dash__card-title[b-7trigi19rc] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__card-value[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dash__card-hint[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Analytics panels ── */
.navr-dash__grid[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Panels: a lighter wash of the same tone than the cards, so tables, charts and lists keep a calm background. Each panel
   is a size container, so its inner layout follows the width it actually has (main column or right column). */
.navr-dash__panel[b-7trigi19rc] {
    container-type: inline-size;
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--navr-tone-panel, var(--mud-palette-surface));
}

.navr-dash__panel--wide[b-7trigi19rc] {
    grid-column: 1 / -1;
}

.navr-dash__panel-title[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__panel-title[b-7trigi19rc]  .mud-icon-root {
    box-sizing: content-box;
    padding: 0.375rem;
    border-radius: 8px;
    color: var(--navr-tone-ink, var(--mud-palette-primary));
    background: var(--navr-tone-chip, transparent);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line, transparent);
}

/* ── Main column + right column ── */
.navr-dash__layout[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    min-width: 0;
}

.navr-dash__aside[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

/* Donut + legend */
.navr-dash__usage[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
}

.navr-dash__legend[b-7trigi19rc] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navr-dash__legend-row[b-7trigi19rc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-dash__legend-row dt[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__legend-row dd[b-7trigi19rc] {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.navr-dash__legend-row--total[b-7trigi19rc] {
    border-bottom: 0;
    padding-bottom: 0;
}

.navr-dash__legend-row--total dt[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__swatch[b-7trigi19rc] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.navr-dash__swatch--used[b-7trigi19rc] { background: var(--mud-palette-primary); }
.navr-dash__swatch--reserved[b-7trigi19rc] { background: var(--mud-palette-warning); }
.navr-dash__swatch--available[b-7trigi19rc] { background: color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }

/* Purposes */
.navr-dash__purposes[b-7trigi19rc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.navr-dash__purpose[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.navr-dash__purpose-icon[b-7trigi19rc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.navr-dash__purpose-icon--audio[b-7trigi19rc] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); }
.navr-dash__purpose-icon--video[b-7trigi19rc] { color: var(--mud-palette-secondary); background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent); }
.navr-dash__purpose-icon--document[b-7trigi19rc] { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.navr-dash__purpose-icon--other[b-7trigi19rc] { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent); }

.navr-dash__purpose-body[b-7trigi19rc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-dash__purpose-head[b-7trigi19rc] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.navr-dash__purpose-name[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__purpose-pct[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.navr-dash__purpose-meta[b-7trigi19rc] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__empty[b-7trigi19rc],
.navr-dash__note[b-7trigi19rc] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Table — real <table> semantics; on phones the (only four) columns stay inside the card. */
.navr-dash__table-wrap[b-7trigi19rc] {
    width: 100%;
    overflow-x: auto;
}

.navr-dash__table[b-7trigi19rc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.navr-dash__table caption[b-7trigi19rc] {
    caption-side: bottom;
    padding-top: 0.5rem;
    text-align: start;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__table th[b-7trigi19rc],
.navr-dash__table td[b-7trigi19rc] {
    padding: 0.6rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    color: var(--mud-palette-text-primary);
}

.navr-dash__table thead th[b-7trigi19rc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

.navr-dash__table tbody th[b-7trigi19rc] {
    font-weight: 500;
}

.navr-dash__table .num[b-7trigi19rc] {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.navr-dash__table tfoot th[b-7trigi19rc],
.navr-dash__table tfoot td[b-7trigi19rc] {
    font-weight: 700;
    border-top: 2px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.16));
    border-bottom: 0;
}

/* Progress */
.navr-dash__progress-head[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    color: var(--mud-palette-text-primary);
}

.navr-dash__progress-head span:last-child[b-7trigi19rc] {
    color: var(--mud-palette-text-secondary);
}

.navr-dash__health[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    color: var(--navr-dash-health);
    background: color-mix(in srgb, var(--navr-dash-health) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--navr-dash-health) 28%, transparent);
}

.navr-dash__health--plenty[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-success); }
.navr-dash__health--moderate[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-info); }
.navr-dash__health--low[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-warning); }
.navr-dash__health--nearlyfull[b-7trigi19rc],
.navr-dash__health--full[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-error); }

.navr-dash__health-title[b-7trigi19rc] {
    margin: 0;
    font-weight: 700;
}

.navr-dash__health-text[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.navr-dash__limits[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.navr-dash__limits-title[b-7trigi19rc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__limit-list[b-7trigi19rc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.navr-dash__limit-list li[b-7trigi19rc] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.navr-dash__limit-list strong[b-7trigi19rc] {
    color: var(--mud-palette-text-primary);
}

.navr-dash__readonly[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Breakpoints ── */
@media (min-width: 600px) {
    .navr-dash__cards[b-7trigi19rc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Donut beside its legend when the panel itself has room (it may sit in the narrower main column next to the aside). */
@container (min-width: 26rem) {
    .navr-dash__usage[b-7trigi19rc] {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    }
}

/* Tablet / small desktop: the right-column panels sit side by side under the main panels. */
@media (min-width: 760px) {
    .navr-dash__aside[b-7trigi19rc] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }
}

@media (min-width: 1100px) {
    .navr-dash__cards[b-7trigi19rc] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .navr-dash__grid[b-7trigi19rc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: the lower dashboard uses the SAME four equal tracks and gap as the summary-card grid above (both grids span
   the full .navr-dash width), so the grid lines run straight down: the storage and content panels span columns 1–3 and
   Quick Actions / Recent Pages / Recent Articles sit exactly in column 4, under the Total Files and Users cards. */
@media (min-width: 1280px) {
    .navr-dash__layout[b-7trigi19rc] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .navr-dash__grid[b-7trigi19rc] {
        grid-column: 1 / span 3;
    }

    .navr-dash__aside[b-7trigi19rc] {
        grid-column: 4;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-dash__status--live .navr-dash__dot[b-7trigi19rc],
    .navr-dash__live[b-7trigi19rc]  .navr-dash__refresh--spin .mud-icon-root {
        animation: none;
    }
}
/* /Components/Pages/Identity/Roles/RoleEditor.razor.rz.scp.css */
/* Role editor — role card, module/page navigator and page-wise permission matrix.
   Every colour is a MudBlazor palette variable, so all SharedUI themes (light, dark, RTL) apply unchanged.
   Layout tiers: >=1280 wide navigator | 960–1279 narrower navigator | <960 stacked, navigator collapsible |
   <768 the matrix turns each row into a card of labelled controls. Nothing ever scrolls the page sideways. */

.navr-rp[b-lyrki9yeqn] {
    --rp-radius: 12px;
    --rp-line: var(--mud-palette-lines-default);
    --rp-muted: var(--mud-palette-text-secondary);
    --rp-primary: var(--mud-palette-primary);
    --rp-hover: var(--mud-palette-action-default-hover);
    --rp-col-view: var(--mud-palette-success);
    --rp-col-create: var(--mud-palette-info);
    --rp-col-edit: var(--mud-palette-warning);
    --rp-col-delete: var(--mud-palette-error);
    --rp-col-manage: var(--mud-palette-secondary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}

.navr-rp *[b-lyrki9yeqn], .navr-rp *[b-lyrki9yeqn]::before, .navr-rp *[b-lyrki9yeqn]::after {
    box-sizing: border-box;
}

.navr-rp-sr[b-lyrki9yeqn] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.navr-rp-muted[b-lyrki9yeqn] {
    color: var(--rp-muted);
    font-size: .875rem;
    margin: 0;
}

.navr-rp-pad[b-lyrki9yeqn] {
    padding: 16px;
}

.navr-rp-spacer[b-lyrki9yeqn] {
    flex: 1 1 auto;
}

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

.navr-rp-head[b-lyrki9yeqn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.navr-rp-title[b-lyrki9yeqn] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.navr-rp-sub[b-lyrki9yeqn] {
    margin: 4px 0 0;
    color: var(--rp-muted);
}

/* ── Cards ──────────────────────────────────────────────────────────────────────────────────────────── */

.navr-rp-card[b-lyrki9yeqn] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    min-width: 0;
}

.navr-rp-role[b-lyrki9yeqn] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.navr-rp-fields[b-lyrki9yeqn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
}

.navr-rp-admin[b-lyrki9yeqn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.navr-rp-admin-info[b-lyrki9yeqn] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 9%, var(--mud-palette-surface));
}

.navr-rp[b-lyrki9yeqn]  .navr-rp-admin-icon {
    color: var(--mud-palette-warning);
    flex: 0 0 auto;
}

.navr-rp-admin-title[b-lyrki9yeqn] {
    font-weight: 700;
}

.navr-rp-admin-text[b-lyrki9yeqn] {
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    opacity: .85;
}

.navr-rp-admin-toggle[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--rp-line);
    border-radius: 10px;
}

.navr-rp-summary[b-lyrki9yeqn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.navr-rp-stat[b-lyrki9yeqn] {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray, var(--rp-hover));
    min-width: 0;
}

.navr-rp-stat dt[b-lyrki9yeqn] {
    font-size: .75rem;
    color: var(--rp-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.navr-rp-stat dd[b-lyrki9yeqn] {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* ── Body: navigator + matrix ───────────────────────────────────────────────────────────────────────── */

.navr-rp-body[b-lyrki9yeqn] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.navr-rp-nav[b-lyrki9yeqn] {
    padding: 12px;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
}

.navr-rp-nav-head[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
}

.navr-rp-h2[b-lyrki9yeqn] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.navr-rp-nav-toggle[b-lyrki9yeqn] {
    display: none;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rp-line);
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    min-height: 36px;
}

.navr-rp-nav-panel[b-lyrki9yeqn] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.navr-rp[b-lyrki9yeqn]  .navr-rp-search {
    margin: 0 0 8px !important;
}

.navr-rp-nav-list[b-lyrki9yeqn],
.navr-rp-nav-sub[b-lyrki9yeqn] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navr-rp-nav-list[b-lyrki9yeqn] {
    overflow-y: auto;
    min-height: 0;
}

.navr-rp-nav-sub[b-lyrki9yeqn] {
    margin: 2px 0 4px 18px;
    padding-left: 8px;
    border-left: 1px solid var(--rp-line);
}

.navr-rp-nav-item[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .925rem;
    text-align: start;
    cursor: pointer;
}

.navr-rp-nav-item.is-sub[b-lyrki9yeqn] {
    min-height: 36px;
    font-size: .875rem;
}

.navr-rp-nav-item:hover[b-lyrki9yeqn] {
    background: var(--rp-hover);
}

.navr-rp-nav-item.is-active[b-lyrki9yeqn] {
    background: color-mix(in srgb, var(--rp-primary) 12%, transparent);
    color: var(--rp-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--rp-primary);
}

.navr-rp[b-lyrki9yeqn]  .navr-rp-nav-icon {
    flex: 0 0 auto;
    opacity: .85;
}

.navr-rp-nav-label[b-lyrki9yeqn] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.navr-rp-count[b-lyrki9yeqn] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--rp-muted);
    white-space: nowrap;
}

.navr-rp-count[b-lyrki9yeqn]  .mud-icon-root {
    font-size: 1rem;
}

.navr-rp-count.is-full[b-lyrki9yeqn] {
    color: var(--mud-palette-success);
}

.navr-rp-count.is-partial[b-lyrki9yeqn] {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

/* ── Matrix card ────────────────────────────────────────────────────────────────────────────────────── */

.navr-rp-main[b-lyrki9yeqn] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.navr-rp-ctx[b-lyrki9yeqn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.navr-rp[b-lyrki9yeqn]  .navr-rp-ctx-icon {
    margin-top: 2px;
    font-size: 1.75rem !important;
}

.navr-rp-ctx-text[b-lyrki9yeqn] {
    flex: 1 1 260px;
    min-width: 0;
}

.navr-rp-crumb[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.navr-rp-ctx-actions[b-lyrki9yeqn] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.navr-rp-group[b-lyrki9yeqn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.navr-rp-group-head[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.navr-rp-h3[b-lyrki9yeqn] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.navr-rp-matrix[b-lyrki9yeqn] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--rp-line);
    border-radius: 10px;
    overflow: hidden;
}

.navr-rp-matrix th[b-lyrki9yeqn],
.navr-rp-matrix td[b-lyrki9yeqn] {
    border-bottom: 1px solid var(--rp-line);
    padding: 6px 8px;
    vertical-align: middle;
}

.navr-rp-matrix tbody tr:last-child > *[b-lyrki9yeqn] {
    border-bottom: 0;
}

.navr-rp-matrix thead th[b-lyrki9yeqn] {
    font-size: .85rem;
    font-weight: 600;
    background: var(--mud-palette-background-gray, var(--rp-hover));
}

.navr-rp-th-feature[b-lyrki9yeqn] {
    width: 34%;
    text-align: start;
    padding-inline-start: 14px !important;
}

.navr-rp-th[b-lyrki9yeqn] {
    text-align: center;
}

.navr-rp-matrix.has-extra .navr-rp-th-feature[b-lyrki9yeqn] {
    width: 28%;
}

.navr-rp-matrix.has-extra .navr-rp-col-other[b-lyrki9yeqn] {
    width: 22%;
}

.navr-rp-th-inner[b-lyrki9yeqn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Column tints echo the action, but the header TEXT is what identifies it. */
.navr-rp-matrix thead .navr-rp-col-view[b-lyrki9yeqn] { background: color-mix(in srgb, var(--rp-col-view) 12%, var(--mud-palette-surface)); }
.navr-rp-matrix thead .navr-rp-col-create[b-lyrki9yeqn] { background: color-mix(in srgb, var(--rp-col-create) 12%, var(--mud-palette-surface)); }
.navr-rp-matrix thead .navr-rp-col-edit[b-lyrki9yeqn] { background: color-mix(in srgb, var(--rp-col-edit) 14%, var(--mud-palette-surface)); }
.navr-rp-matrix thead .navr-rp-col-delete[b-lyrki9yeqn] { background: color-mix(in srgb, var(--rp-col-delete) 12%, var(--mud-palette-surface)); }
.navr-rp-matrix thead .navr-rp-col-manage[b-lyrki9yeqn] { background: color-mix(in srgb, var(--rp-col-manage) 12%, var(--mud-palette-surface)); }

.navr-rp-row:hover > *[b-lyrki9yeqn] {
    background: color-mix(in srgb, var(--rp-primary) 4%, transparent);
}

.navr-rp-row.is-module-wide > *[b-lyrki9yeqn] {
    background: color-mix(in srgb, var(--rp-primary) 5%, transparent);
}

.navr-rp-feature[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: start;
    font-weight: normal;
}

.navr-rp-feature-text[b-lyrki9yeqn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.navr-rp-feature-name[b-lyrki9yeqn] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.navr-rp-feature-sub[b-lyrki9yeqn] {
    font-size: .78rem;
    color: var(--rp-muted);
}

.navr-rp-cell[b-lyrki9yeqn] {
    text-align: center;
}

/* The permission control: a real button with role=checkbox — Space/Enter toggle, focus is visible, 40px target. */
.navr-rp-check[b-lyrki9yeqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rp-muted);
    font: inherit;
    cursor: pointer;
}

.navr-rp-check:hover[b-lyrki9yeqn] {
    background: var(--rp-hover);
}

.navr-rp-check:focus-visible[b-lyrki9yeqn],
.navr-rp-nav-item:focus-visible[b-lyrki9yeqn],
.navr-rp-nav-toggle:focus-visible[b-lyrki9yeqn] {
    outline: 2px solid var(--rp-primary);
    outline-offset: 2px;
}

.navr-rp-check[aria-checked="true"][b-lyrki9yeqn],
.navr-rp-check[aria-checked="mixed"][b-lyrki9yeqn] {
    color: var(--rp-primary);
}

.navr-rp-check[aria-disabled="true"][b-lyrki9yeqn] {
    cursor: not-allowed;
}

.navr-rp-check.is-inherited[b-lyrki9yeqn] {
    color: color-mix(in srgb, var(--rp-primary) 55%, var(--mud-palette-surface));
}

.navr-rp-check-box[b-lyrki9yeqn] {
    position: relative;
    display: inline-flex;
}

/* Inherited = ticked box + a link badge: a shape difference, not only a colour one. */
.navr-rp-check-box[b-lyrki9yeqn]  .navr-rp-badge {
    position: absolute;
    right: -7px;
    bottom: -5px;
    font-size: .85rem;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.navr-rp-cell-label[b-lyrki9yeqn] {
    display: none;
}

.navr-rp-na[b-lyrki9yeqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 6px;
    color: var(--mud-palette-text-disabled);
}

.navr-rp-dash[b-lyrki9yeqn] {
    font-weight: 600;
}

.navr-rp-extra[b-lyrki9yeqn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.navr-rp-check.has-label[b-lyrki9yeqn] {
    justify-content: flex-start;
    text-align: start;
    color: inherit;
}

.navr-rp-check.has-label[b-lyrki9yeqn]  .mud-icon-root {
    color: var(--rp-muted);
}

.navr-rp-check.has-label[aria-checked="true"][b-lyrki9yeqn]  .mud-icon-root {
    color: var(--rp-primary);
}

.navr-rp-extra-label[b-lyrki9yeqn] {
    font-size: .8rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ── Save bar ───────────────────────────────────────────────────────────────────────────────────────── */

.navr-rp-actions[b-lyrki9yeqn] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.navr-rp-unsaved[b-lyrki9yeqn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
}

/* ── Tablet ─────────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
    .navr-rp-body[b-lyrki9yeqn] {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .navr-rp-th-inner[b-lyrki9yeqn]  .mud-icon-root {
        display: none;
    }

    .navr-rp-matrix th[b-lyrki9yeqn],
    .navr-rp-matrix td[b-lyrki9yeqn] {
        padding: 4px;
    }
}

/* Stacked: role → navigator (collapsible) → matrix. */
@media (max-width: 959.98px) {
    .navr-rp-body[b-lyrki9yeqn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .navr-rp-nav[b-lyrki9yeqn] {
        position: static;
        max-height: none;
    }

    .navr-rp-nav-toggle[b-lyrki9yeqn] {
        display: inline-flex;
    }

    .navr-rp-nav-panel[b-lyrki9yeqn] {
        display: none;
    }

    .navr-rp-nav-panel.is-open[b-lyrki9yeqn] {
        display: flex;
    }

    .navr-rp-nav-list[b-lyrki9yeqn] {
        max-height: 50vh;
    }

    .navr-rp-summary[b-lyrki9yeqn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .navr-rp-fields[b-lyrki9yeqn],
    .navr-rp-admin[b-lyrki9yeqn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .navr-rp-title[b-lyrki9yeqn] {
        font-size: 1.4rem;
    }

    .navr-rp-main[b-lyrki9yeqn] {
        padding: 12px;
    }

    /* Each row becomes a card: the page name on top, then its actions as labelled controls that wrap. */
    .navr-rp-matrix[b-lyrki9yeqn],
    .navr-rp-matrix tbody[b-lyrki9yeqn] {
        display: block;
        border: 0;
        overflow: visible;
    }

    .navr-rp-matrix thead[b-lyrki9yeqn] {
        display: none;
    }

    .navr-rp-matrix tr[b-lyrki9yeqn] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: 2px 4px;
        padding: 8px;
        margin-bottom: 8px;
        border: 1px solid var(--rp-line);
        border-radius: 10px;
    }

    .navr-rp-matrix th[b-lyrki9yeqn],
    .navr-rp-matrix td[b-lyrki9yeqn] {
        border: 0;
        padding: 0;
        background: transparent !important;
    }

    .navr-rp-matrix .navr-rp-feature[b-lyrki9yeqn],
    .navr-rp-matrix .navr-rp-col-other[b-lyrki9yeqn] {
        grid-column: 1 / -1;
    }

    .navr-rp-cell[b-lyrki9yeqn] {
        text-align: start;
    }

    .navr-rp-check[b-lyrki9yeqn],
    .navr-rp-na[b-lyrki9yeqn] {
        width: 100%;
        justify-content: flex-start;
    }

    /* The row's own checkbox stays a box beside the page name, never a full-width bar that squeezes the name. */
    .navr-rp-feature .navr-rp-check[b-lyrki9yeqn] {
        width: auto;
        flex: 0 0 auto;
    }

    .navr-rp-feature-text[b-lyrki9yeqn] {
        flex: 1 1 auto;
    }

    /* A card lists only the actions this page has; "not available" columns are a desktop-grid concept. */
    .navr-rp-matrix td.is-na[b-lyrki9yeqn] {
        display: none;
    }

    .navr-rp-cell-label[b-lyrki9yeqn] {
        display: inline;
        font-size: .85rem;
        color: var(--mud-palette-text-primary);
    }

    .navr-rp-na .navr-rp-cell-label[b-lyrki9yeqn] {
        color: var(--mud-palette-text-disabled);
    }

    .navr-rp-extra[b-lyrki9yeqn] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        width: 100%;
    }

    .navr-rp-actions[b-lyrki9yeqn] {
        padding: 10px 12px;
    }
}

@media (max-width: 599.98px) {
    .navr-rp-summary[b-lyrki9yeqn] {
        gap: 6px;
    }

    .navr-rp-stat[b-lyrki9yeqn] {
        padding: 8px 10px;
    }

    .navr-rp-ctx-actions[b-lyrki9yeqn] {
        width: 100%;
    }

    .navr-rp-ctx-actions[b-lyrki9yeqn]  .mud-button-root {
        flex: 1 1 0;
    }

    .navr-rp-actions .navr-rp-spacer[b-lyrki9yeqn] {
        display: none;
    }

    .navr-rp-actions[b-lyrki9yeqn]  .mud-button-root {
        flex: 1 1 0;
    }

    .navr-rp-unsaved[b-lyrki9yeqn] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (pointer: coarse) {
    .navr-rp-check[b-lyrki9yeqn],
    .navr-rp-nav-item[b-lyrki9yeqn] {
        min-height: 44px;
    }

    .navr-rp[b-lyrki9yeqn]  .mud-button-root {
        min-height: 40px;
    }
}
/* /Components/Pages/Identity/Roles/Roles.razor.rz.scp.css */
/* Roles grid. The grid is table-layout: fixed; its fixed columns (Permissions 140 + System 110 + Actions 180 = 430px) are
   served first and Role name / Description share what is left — at a 480px viewport that was 8px each, so role names
   vanished. A minimum table width (430px + ~145px for each of the two auto columns) keeps both readable; on a narrow
   screen the grid scrolls horizontally INSIDE its own scroll area, and on a desktop the table still fills the space
   exactly as before. Same approach as the Users grid. */
.navr-roles-grid[b-uvrj2u8ft5]  .rz-grid-table {
    min-width: 720px;
}
/* /Components/Pages/Identity/Users/UserEditor.razor.rz.scp.css */
/* Users → Create / Edit. Wide enough for paired fields on a desktop, never wider than the content area. */
.navr-user-editor[b-nluhrkrz7a] {
    max-width: 1080px;
    min-width: 0;
}

/* Role checkboxes flow into as many columns as fit (one per line on a phone) instead of one long vertical list.
   minmax(0, …) lets a long role name wrap inside its column rather than widening the page. */
.navr-user-roles-grid[b-nluhrkrz7a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    column-gap: 16px;
    row-gap: 2px;
}

.navr-user-roles-grid[b-nluhrkrz7a]  .mud-checkbox {
    min-width: 0;
}

.navr-user-roles-grid[b-nluhrkrz7a]  .mud-checkbox .mud-typography {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Identity/Users/Users.razor.rz.scp.css */
/* Role column: several role names wrap inside the cell (the grid's cells are single-line by default), so a user with
   many roles makes the row taller instead of pushing the table wider or hiding names behind an ellipsis. */
.navr-user-roles[b-qu5hdqbcyr] {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* The grid is table-layout: fixed. Its fixed columns (Status, Last login, Created, Actions = 620px) are served first and
   the five auto columns (Username, Full name, Email, Phone, Role) share what is left — at a 1024px viewport that was
   28px each, so names and e-mails were unreadable. A minimum table width (620px + ~100px per auto column) keeps every
   column readable; on a narrow screen the grid scrolls horizontally INSIDE its own scroll area instead of collapsing
   columns, and on a wide screen the table still fills the space exactly as before. */
.navr-users-grid[b-qu5hdqbcyr]  .rz-grid-table {
    min-width: 1120px;
}
/* /Components/Pages/Settings/DefaultWebsiteMedia.razor.rz.scp.css */
.dm-grid[b-g9gnizuinq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .85rem;
}

.dm-card[b-g9gnizuinq] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.dm-card--retired[b-g9gnizuinq] { opacity: .55; }

.dm-thumb[b-g9gnizuinq] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--mud-palette-background-gray);
}

.dm-thumb img[b-g9gnizuinq] { width: 100%; height: 100%; object-fit: cover; }

/* A video preview fills the same tile as an image thumbnail. `contain` rather than `cover` so the controls stay
   reachable and no part of the frame is cropped away; the dark tile reads as letterboxing. */
.dm-thumb video[b-g9gnizuinq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.dm-status[b-g9gnizuinq] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
}

.dm-body[b-g9gnizuinq] { display: flex; flex-direction: column; gap: .25rem; padding: .55rem .65rem .6rem; }

.dm-title[b-g9gnizuinq] { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-meta[b-g9gnizuinq] { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.dm-actions[b-g9gnizuinq] { display: flex; gap: .15rem; margin-top: .15rem; }
/* /Components/Pages/Training/TutorialEditor.razor.rz.scp.css */
/* One language version panel of the tutorial editor. */

.navr-tutorial-lang[b-zkyqgul6cl] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-tutorial-lang__head[b-zkyqgul6cl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.navr-tutorial-lang__name[b-zkyqgul6cl] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tutorial-lang__facts[b-zkyqgul6cl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.375rem 1rem;
    margin: 0;
}

.navr-tutorial-lang__facts dt[b-zkyqgul6cl] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-lang__facts dd[b-zkyqgul6cl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tutorial-lang__empty[b-zkyqgul6cl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-lang__actions[b-zkyqgul6cl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
}
/* /Components/Pages/Website/MyWebsite.razor.rz.scp.css */
.mw-steps[b-hhx2ky4q3a] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.mw-step[b-hhx2ky4q3a] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem .3rem .3rem;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.mw-step__dot[b-hhx2ky4q3a] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    font-size: .75rem;
    font-weight: 700;
}

.mw-step--on[b-hhx2ky4q3a] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.mw-step--on .mw-step__dot[b-hhx2ky4q3a] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
/* /Components/Pages/Website/OrderDetails.razor.rz.scp.css */
/* Website → Order details (page frame). The order itself is styled by OrderDetailsPanel.razor.css. */

.ord-page[b-515wpavx30] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ord-page[b-515wpavx30]  .ord-back { align-self: flex-start; }
.ord-sr[b-515wpavx30] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* /Components/Pages/Website/OrderDetailsPanel.razor.rz.scp.css */
/* One order (the details page and the dashboard's side panel). Scoped; MudBlazor palette variables only. Two columns on wide
   screens, one below 900px — and always one in the compact side panel. */

.ord-panel[b-o686zg0m1n] { display: flex; flex-direction: column; gap: 16px; min-width: 0; --ord-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12)); }

.ord-head[b-o686zg0m1n] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ord-head__title[b-o686zg0m1n] { margin: 6px 0 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.ord-head__intro[b-o686zg0m1n] { margin: 4px 0 0; font-size: .92rem; color: var(--mud-palette-text-secondary); }
.ord-chips[b-o686zg0m1n] { display: flex; flex-wrap: wrap; gap: 6px; }

.ord-grid[b-o686zg0m1n] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ord-card[b-o686zg0m1n] {
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 16px 18px; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--ord-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ord-card--wide[b-o686zg0m1n] { grid-column: 1 / -1; }
.ord-card__title[b-o686zg0m1n] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ord-card__sub[b-o686zg0m1n] { margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ord-card p[b-o686zg0m1n] { margin: 0; }

.ord-dl[b-o686zg0m1n] { margin: 0; display: grid; gap: 10px; }
.ord-dl--cols[b-o686zg0m1n], .ord-values[b-o686zg0m1n] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; }
.ord-dl div[b-o686zg0m1n] { min-width: 0; }
.ord-dl dt[b-o686zg0m1n] { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.ord-dl dd[b-o686zg0m1n] { margin: 2px 0 0; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; color: var(--mud-palette-text-primary); }

.ord-muted[b-o686zg0m1n] { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.ord-help[b-o686zg0m1n] { font-size: .85rem; color: var(--mud-palette-text-primary); }
.ord-actions[b-o686zg0m1n] { display: flex; flex-wrap: wrap; gap: 8px; }

.ord-history[b-o686zg0m1n] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ord-history li[b-o686zg0m1n] {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding-inline-start: 12px;
    border-inline-start: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}
.ord-history__when[b-o686zg0m1n] { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ord-history__what[b-o686zg0m1n] { font-size: .9rem; font-weight: 600; }
.ord-history__who[b-o686zg0m1n] { grid-column: 2; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ord-history__note[b-o686zg0m1n] { grid-column: 2; font-size: .85rem; font-style: italic; overflow-wrap: anywhere; }

/* The side panel: one column, a smaller title, lists that do not try to fit two 220px columns. */
.ord-panel--compact[b-o686zg0m1n] { gap: 12px; }
.ord-panel--compact .ord-grid[b-o686zg0m1n] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ord-panel--compact .ord-head__title[b-o686zg0m1n] { font-size: 1.25rem; }
.ord-panel--compact .ord-card[b-o686zg0m1n] { padding: 12px 14px; }
.ord-panel--compact .ord-dl--cols[b-o686zg0m1n], .ord-panel--compact .ord-values[b-o686zg0m1n] { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

@media (max-width: 900px) {
    .ord-grid[b-o686zg0m1n] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .ord-head__title[b-o686zg0m1n] { font-size: 1.3rem; }
    .ord-card[b-o686zg0m1n] { padding: 12px; }
    .ord-history li[b-o686zg0m1n] { grid-template-columns: minmax(0, 1fr); }
    .ord-history__who[b-o686zg0m1n], .ord-history__note[b-o686zg0m1n] { grid-column: 1; }
}
/* /Components/Pages/Website/OrderReports.razor.rz.scp.css */
/* Website → Order Reports. Scoped; MudBlazor palette variables only. Breakdown cards wrap two per row on wide screens, one below. */

.rep-page[b-f0mlqfvpy3] { display: flex; flex-direction: column; gap: 16px; min-width: 0; --rep-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12)); }

.rep-head[b-f0mlqfvpy3] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.rep-head__icon[b-f0mlqfvpy3] {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
/* A small basis so the title stays beside its icon on a phone (320px pushed it onto a row of its own). */
.rep-head__text[b-f0mlqfvpy3] { flex: 1 1 200px; min-width: 0; }
.rep-head__title[b-f0mlqfvpy3] { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.rep-head__intro[b-f0mlqfvpy3] { margin: 4px 0 0; max-width: 72rem; font-size: .92rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.rep-head__actions[b-f0mlqfvpy3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.rep-card[b-f0mlqfvpy3] {
    display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--rep-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rep-card__title[b-f0mlqfvpy3] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }

.rep-filters[b-f0mlqfvpy3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: center; }
.rep-filters__actions[b-f0mlqfvpy3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rep-page[b-f0mlqfvpy3]  .rep-filters__wide { grid-column: 1 / -1; }

.rep-scope[b-f0mlqfvpy3] { margin: 0; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); }

.rep-kpis[b-f0mlqfvpy3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rep-kpi[b-f0mlqfvpy3] {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--rep-line);
}
.rep-kpi span[b-f0mlqfvpy3] { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.rep-kpi strong[b-f0mlqfvpy3] { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }

.rep-grid[b-f0mlqfvpy3] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

.rep-table[b-f0mlqfvpy3] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rep-table th[b-f0mlqfvpy3], .rep-table td[b-f0mlqfvpy3] { padding: 8px 6px; text-align: start; border-bottom: 1px solid var(--rep-line); }
.rep-table thead th[b-f0mlqfvpy3] { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.rep-table tbody th[b-f0mlqfvpy3] { font-weight: 500; color: var(--mud-palette-text-primary); }
.rep-table tfoot th[b-f0mlqfvpy3], .rep-table tfoot td[b-f0mlqfvpy3] { font-weight: 700; border-bottom: 0; }
.rep-table .rep-num[b-f0mlqfvpy3] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-share[b-f0mlqfvpy3] { display: inline-flex; align-items: center; gap: 8px; }
.rep-bar[b-f0mlqfvpy3] { display: inline-block; width: 64px; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.rep-bar span[b-f0mlqfvpy3] { display: block; height: 100%; border-radius: inherit; background: var(--mud-palette-primary); }
.rep-muted[b-f0mlqfvpy3] { margin: 0; font-size: .8rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 900px) {
    .rep-grid[b-f0mlqfvpy3] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .rep-head__title[b-f0mlqfvpy3] { font-size: 1.3rem; }
    .rep-card[b-f0mlqfvpy3] { padding: 12px; }
    .rep-filters[b-f0mlqfvpy3] { grid-template-columns: minmax(0, 1fr); }
    .rep-kpis[b-f0mlqfvpy3] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .rep-bar[b-f0mlqfvpy3] { display: none; }
}
/* /Components/Pages/Website/Orders.razor.rz.scp.css */
/* Website → Orders Management. Scoped; MudBlazor palette variables only (follows the Admin light / dark theme). The cards and
   filters wrap into as many columns as fit; the table stacks into labelled cards below the Sm breakpoint (MudTable Breakpoint);
   the side panel is full width on a phone. */

.ord-page[b-h0614csam3] { display: flex; flex-direction: column; gap: 16px; min-width: 0; --ord-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12)); }

.ord-head[b-h0614csam3] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.ord-head__icon[b-h0614csam3] {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
/* A small basis so the title stays beside its icon on a phone (320px pushed it onto a row of its own). */
.ord-head__text[b-h0614csam3] { flex: 1 1 200px; min-width: 0; }
.ord-head__title[b-h0614csam3] { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.ord-head__intro[b-h0614csam3] { margin: 4px 0 0; max-width: 72rem; font-size: .92rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.ord-head__actions[b-h0614csam3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Summary cards */
.ord-cards[b-h0614csam3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ord-stat[b-h0614csam3] {
    --ord-tone: var(--mud-palette-primary);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0;
    padding: 14px 16px; border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--ord-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ord-stat--info[b-h0614csam3] { --ord-tone: var(--mud-palette-info); }
.ord-stat--secondary[b-h0614csam3] { --ord-tone: var(--mud-palette-secondary); }
.ord-stat--warning[b-h0614csam3] { --ord-tone: var(--mud-palette-warning); }
.ord-stat--success[b-h0614csam3] { --ord-tone: var(--mud-palette-success); }
.ord-stat--error[b-h0614csam3] { --ord-tone: var(--mud-palette-error); }
.ord-stat__text[b-h0614csam3] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ord-stat__label[b-h0614csam3] { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.ord-stat__value[b-h0614csam3] { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.ord-stat__hint[b-h0614csam3] { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.ord-stat__icon[b-h0614csam3] {
    flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    color: var(--ord-tone); background: color-mix(in srgb, var(--ord-tone) 14%, transparent);
}

/* The list card: tabs on top, filters and table below */
.ord-card[b-h0614csam3] {
    display: flex; flex-direction: column; min-width: 0; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--ord-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ord-body[b-h0614csam3] { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }

/* overflow-x:auto would make overflow-y auto too, and the active tab's 1px underline overhang then showed a stray vertical
   scrollbar — so the strip scrolls sideways only. */
.ord-tabs[b-h0614csam3] { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--ord-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ord-tab[b-h0614csam3] {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 12px 12px; margin-bottom: -1px;
    border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .92rem; font-weight: 600; color: var(--mud-palette-text-secondary);
}
.ord-tab:hover[b-h0614csam3] { color: var(--mud-palette-text-primary); }
.ord-tab:focus-visible[b-h0614csam3] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.ord-tab--active[b-h0614csam3] { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.ord-tab__count[b-h0614csam3] {
    min-width: 24px; padding: 1px 7px; border-radius: 999px; font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.ord-note[b-h0614csam3] { margin: 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

.ord-filters[b-h0614csam3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: center; }
.ord-filters__actions[b-h0614csam3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ord-page[b-h0614csam3]  .ord-filters__wide { grid-column: 1 / -1; }

.ord-total[b-h0614csam3] { margin: 0; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.ord-number[b-h0614csam3] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-date[b-h0614csam3] { display: block; white-space: nowrap; }
.ord-sub[b-h0614csam3] { display: block; font-size: .78rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ord-row-actions[b-h0614csam3] { display: inline-flex; gap: 2px; }
.ord-cell[b-h0614csam3] { min-width: 0; }
.ord-items[b-h0614csam3] { display: flex; flex-direction: column; gap: 2px; }
.ord-thumbs[b-h0614csam3] { display: flex; gap: 4px; }
.ord-thumb[b-h0614csam3] {
    display: block; width: 32px; height: 32px; overflow: hidden; border-radius: 6px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.ord-thumb img[b-h0614csam3] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-money[b-h0614csam3] { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }

/* The stacked (phone / narrow) table: MudTable turns each cell into a "label … value" row below its Sm breakpoint (960px).
   Values align to the end and may wrap — a long payment-status chip otherwise set the width of every row and pushed the
   phone numbers and the action buttons out of the card. */
@media (max-width: 959.98px) {
    .ord-cell[b-h0614csam3] { text-align: end; }
    .ord-items[b-h0614csam3] { align-items: flex-end; }
    .ord-date[b-h0614csam3] { white-space: normal; overflow-wrap: anywhere; }
    .ord-page[b-h0614csam3]  .mud-table-cell { min-width: 0; gap: 12px; }
    .ord-page[b-h0614csam3]  .mud-table-cell .mud-chip { height: auto; min-height: 24px; max-width: 100%; white-space: normal; text-align: center; }
    .ord-page[b-h0614csam3]  .mud-table-cell .mud-chip-content { white-space: normal; }
}
.ord-empty[b-h0614csam3] { margin: 12px 0; text-align: center; color: var(--mud-palette-text-secondary); }
.ord-page[b-h0614csam3]  .ord-row { cursor: pointer; }

/* Side panel (its width is min(600px, 100vw), set on the drawer) */
.ord-drawer__head[b-h0614csam3] {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}
.ord-drawer__title[b-h0614csam3] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ord-drawer__actions[b-h0614csam3] { display: flex; align-items: center; gap: 4px; }
.ord-drawer__body[b-h0614csam3] { padding: 16px; background: var(--mud-palette-background); min-height: 100%; }

@media (max-width: 600px) {
    .ord-head__title[b-h0614csam3] { font-size: 1.3rem; }
    .ord-body[b-h0614csam3] { padding: 12px; }
    .ord-cards[b-h0614csam3] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ord-stat[b-h0614csam3] { padding: 12px; }
    .ord-stat__value[b-h0614csam3] { font-size: 1.3rem; }
    .ord-filters[b-h0614csam3] { grid-template-columns: minmax(0, 1fr); }
    .ord-drawer__body[b-h0614csam3] { padding: 12px; }
}
/* /Components/Pages/Website/OrderTypeChip.razor.rz.scp.css */
.ord-type[b-acsuosncpp] {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
    font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.ord-type--general[b-acsuosncpp] { color: var(--mud-palette-info-darken, var(--mud-palette-info)); background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); }
.ord-type--product[b-acsuosncpp] { color: var(--mud-palette-secondary-darken, var(--mud-palette-secondary)); background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent); }
/* /Components/Pages/Website/WebsiteOrderSettings.razor.rz.scp.css */
/* Website → Order Settings. Scoped; MudBlazor palette variables only (follows the Admin light / dark theme). Two columns on wide
   screens (settings | assigned form), one column below, and a save bar that stays in reach at the bottom. */

.wos-page[b-cgrh4t4frz] {
    container: wos / inline-size;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding-bottom: 8px;
    --wos-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
}

.wos-head[b-cgrh4t4frz] { display: flex; align-items: flex-start; gap: 14px; }
.wos-head__icon[b-cgrh4t4frz] {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.wos-head__title[b-cgrh4t4frz] { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--mud-palette-text-primary); }
.wos-head__intro[b-cgrh4t4frz] { margin: 4px 0 0; max-width: 72rem; font-size: .92rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }

.wos-card[b-cgrh4t4frz] {
    display: flex; flex-direction: column; gap: 14px; min-width: 0;
    padding: 16px 18px; border-radius: 12px;
    background: var(--mud-palette-surface); border: 1px solid var(--wos-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.wos-card__title[b-cgrh4t4frz] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.wos-muted[b-cgrh4t4frz] { margin: 0; font-size: .8rem; color: var(--mud-palette-text-secondary); }

.wos-site__row[b-cgrh4t4frz] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wos-identity[b-cgrh4t4frz] { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; }
.wos-identity div[b-cgrh4t4frz] { min-width: 0; }
.wos-identity dt[b-cgrh4t4frz] { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.wos-identity dd[b-cgrh4t4frz] { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; overflow-wrap: anywhere; }
.wos-key[b-cgrh4t4frz], .wos-code[b-cgrh4t4frz] {
    display: inline-block; padding: 0 7px; border-radius: 6px; white-space: nowrap;
    font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.wos-host[b-cgrh4t4frz] { padding: 1px 8px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--wos-line); }
.wos-chip[b-cgrh4t4frz] {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 600; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary);
}
.wos-chip[b-cgrh4t4frz]  .mud-icon-root { font-size: 1rem; }
.wos-chip--on[b-cgrh4t4frz] { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: var(--mud-palette-success-darken); }
.wos-chip--warn[b-cgrh4t4frz] { background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning-darken); }

.wos-layout[b-cgrh4t4frz] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container wos (min-width: 900px) {
    .wos-layout[b-cgrh4t4frz] { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); }
}

.wos-field[b-cgrh4t4frz] { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wos-help[b-cgrh4t4frz] { margin: 0; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.wos-samples[b-cgrh4t4frz] { display: flex; flex-wrap: wrap; gap: 6px; }
.wos-sample[b-cgrh4t4frz] {
    padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--wos-line); background: transparent; cursor: pointer;
    font: inherit; font-size: .78rem; color: var(--mud-palette-text-primary);
}
.wos-sample:hover:not(:disabled)[b-cgrh4t4frz] { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.wos-sample:disabled[b-cgrh4t4frz] { cursor: default; opacity: .5; }
.wos-button-preview[b-cgrh4t4frz] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wos-fake-btn[b-cgrh4t4frz] {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 10px;
    font-weight: 700; color: var(--wos-ink, #fff); background: var(--wos-accent, var(--mud-palette-primary));
    box-shadow: 0 8px 18px -12px var(--wos-accent, var(--mud-palette-primary));
}
.wos-fake-btn.is-off[b-cgrh4t4frz] { opacity: .45; filter: grayscale(.7); }

.wos-legend[b-cgrh4t4frz] { padding: 0; margin-bottom: 4px; font-size: .86rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.wos-modes[b-cgrh4t4frz] { gap: 8px; }
.wos-mode[b-cgrh4t4frz] {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--wos-line); background: var(--mud-palette-surface);
}
.wos-mode input[b-cgrh4t4frz] { margin-top: 3px; accent-color: var(--mud-palette-primary); }
.wos-mode.is-on[b-cgrh4t4frz] { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); }
.wos-mode[b-cgrh4t4frz]  .mud-icon-root { color: var(--mud-palette-primary); }
.wos-mode__text[b-cgrh4t4frz] { display: flex; flex-direction: column; min-width: 0; }
.wos-mode__title[b-cgrh4t4frz] { font-weight: 600; font-size: .9rem; }
.wos-mode__help[b-cgrh4t4frz] { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.wos-modes:disabled .wos-mode[b-cgrh4t4frz] { cursor: default; opacity: .7; }

.wos-form__thumb[b-cgrh4t4frz] { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.wos-form__thumb:focus-visible[b-cgrh4t4frz] { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.wos-form__name[b-cgrh4t4frz] { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.wos-form__chips[b-cgrh4t4frz] { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wos-form__actions[b-cgrh4t4frz] { display: flex; flex-wrap: wrap; gap: 8px; }
.wos-form__actions[b-cgrh4t4frz]  .mud-button-root { flex: 1 1 auto; }
.wos-empty[b-cgrh4t4frz] {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center;
    border: 1px dashed var(--wos-line); border-radius: 10px; color: var(--mud-palette-text-secondary);
}
.wos-empty[b-cgrh4t4frz]  .mud-icon-root { font-size: 2.6rem; opacity: .6; }
.wos-empty p[b-cgrh4t4frz] { margin: 0; }

.wos-bar[b-cgrh4t4frz] {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
    padding: 10px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent); border: 1px solid var(--wos-line);
    box-shadow: 0 -10px 24px -18px rgba(16, 24, 40, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.wos-bar__state[b-cgrh4t4frz] { margin-inline-end: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--mud-palette-text-secondary); }

/* Picker: the library gallery in a large panel. */
.wos-picker[b-cgrh4t4frz] { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; }
.wos-picker__backdrop[b-cgrh4t4frz] { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.wos-picker__panel[b-cgrh4t4frz] {
    position: relative; display: flex; flex-direction: column; width: min(96vw, 1500px); height: min(94vh, 1100px);
    border-radius: 14px; overflow: hidden; background: var(--mud-palette-background); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}
.wos-picker__head[b-cgrh4t4frz] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
    background: var(--mud-palette-surface); border-bottom: 1px solid var(--wos-line);
}
.wos-picker__eyebrow[b-cgrh4t4frz] { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.wos-picker__title[b-cgrh4t4frz] { margin: 0; font-size: 1.15rem; font-weight: 700; }
.wos-picker__body[b-cgrh4t4frz] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }

@media (max-width: 700px) {
    .wos-picker__panel[b-cgrh4t4frz] { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    .wos-picker__body[b-cgrh4t4frz] { padding: 10px; }
    .wos-bar[b-cgrh4t4frz] { justify-content: stretch; }
    .wos-bar[b-cgrh4t4frz]  .mud-button-root { flex: 1 1 auto; }
}
/* /Components/Profile/ProfileMenu.razor.rz.scp.css */
/* Profile menu activator in the top app bar. Colours derive from the app bar's own text colour (currentColor), so the
   avatar contrasts with the bar on every SharedUI theme — light or dark bar alike — without naming a palette colour. */

.navr-profile-activator[b-m3xrfx7zdi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-inline-start: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.navr-profile-activator:focus-visible[b-m3xrfx7zdi] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.navr-profile-activator[b-m3xrfx7zdi]  .navr-profile-avatar {
    color: inherit;
    background-color: color-mix(in srgb, currentColor 18%, transparent);
    border: 2px solid currentColor;
    font-weight: 600;
}

.navr-profile-activator:hover[b-m3xrfx7zdi]  .navr-profile-avatar {
    background-color: color-mix(in srgb, currentColor 28%, transparent);
}
/* /Components/Shared/AdminDialogFrame.razor.rz.scp.css */
/* Shared Admin dialog frame — scoped via Blazor CSS isolation. Palette variables only, so it follows the Admin theme
   (light / dark) and matches the Block Editor and settings workspaces. A column flex box whose body is the only
   scrolling part: the header, the toolbar and the footer stay in place at every width. */

.navr-dialog[b-493xhp3llk] {
    --navr-dialog-accent: var(--mud-palette-primary);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.navr-dialog--publish[b-493xhp3llk] {
    --navr-dialog-accent: var(--mud-palette-success);
}

/* ── Header ── */
.navr-dialog__head[b-493xhp3llk] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 0.75rem 0.875rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: linear-gradient(180deg, color-mix(in srgb, var(--navr-dialog-accent) 7%, transparent), transparent);
}

.navr-dialog__icon[b-493xhp3llk] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    color: var(--navr-dialog-accent);
    background: color-mix(in srgb, var(--navr-dialog-accent) 14%, transparent);
}

.navr-dialog__heading[b-493xhp3llk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-dialog__eyebrow[b-493xhp3llk] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navr-dialog-accent);
}

.navr-dialog__title[b-493xhp3llk] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dialog__subtitle[b-493xhp3llk] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dialog__head[b-493xhp3llk]  .navr-dialog__close {
    flex: 0 0 auto;
    margin-top: -0.25rem;
}

/* ── Toolbar (language tabs) ── */
.navr-dialog__toolbar[b-493xhp3llk] {
    flex: 0 0 auto;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* ── Body: the only scrolling part ── */
.navr-dialog__body[b-493xhp3llk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-dialog__body:focus-visible[b-493xhp3llk] {
    outline: 2px solid var(--navr-dialog-accent);
    outline-offset: -2px;
}

/* ── Footer ── */
.navr-dialog__foot[b-493xhp3llk] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: var(--mud-palette-surface);
}

/* ── Phones ── */
@media (max-width: 599.98px) {
    .navr-dialog[b-493xhp3llk] {
        max-height: calc(100dvh - 1rem);
    }

    .navr-dialog__head[b-493xhp3llk] {
        gap: 0.625rem;
        padding: 0.875rem 0.5rem 0.75rem 0.875rem;
    }

    .navr-dialog__icon[b-493xhp3llk] {
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 10px;
    }

    .navr-dialog__title[b-493xhp3llk] {
        font-size: 1rem;
    }

    .navr-dialog__toolbar[b-493xhp3llk] {
        padding: 0.5rem 0.875rem;
    }

    .navr-dialog__body[b-493xhp3llk] {
        padding: 0.75rem 0.875rem 0.875rem;
    }

    .navr-dialog__foot[b-493xhp3llk] {
        padding: 0.625rem 0.875rem;
    }

    .navr-dialog__foot[b-493xhp3llk]  .mud-button-root {
        flex: 1 1 auto;
    }
}
/* /Components/Shared/AdminDialogSection.razor.rz.scp.css */
/* Dialog section card — scoped via Blazor CSS isolation. One card style and one body typography for every section
   of the Help and Publish dialogs; ::deep reaches the host's content so paragraphs and lists read the same in both. */

.navr-dsec[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-primary);
    min-width: 0;
    padding: 0.75rem 0.875rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.navr-dsec--accent[b-brg4qm3qje] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.navr-dsec--success[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.navr-dsec--warning[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-warning);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.navr-dsec--info[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-info);
    border-color: color-mix(in srgb, var(--mud-palette-info) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface));
}

.navr-dsec__head[b-brg4qm3qje] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.navr-dsec__icon[b-brg4qm3qje] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    color: var(--navr-dsec-accent);
    background: color-mix(in srgb, var(--navr-dsec-accent) 13%, transparent);
}

.navr-dsec__title[b-brg4qm3qje] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.navr-dsec__aside[b-brg4qm3qje] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.navr-dsec__body[b-brg4qm3qje] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.navr-dsec__body[b-brg4qm3qje]  p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--mud-palette-text-primary);
}

.navr-dsec__body[b-brg4qm3qje]  p + p {
    margin-top: 0.375rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points {
    margin: 0;
    padding-inline-start: 1.125rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points li + li {
    margin-top: 0.25rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-muted {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/AdminStatusBadge.razor.rz.scp.css */
/* Status pill — scoped via Blazor CSS isolation. Darkened palette colours on a light tint keep the text readable. */

.navr-badge[b-qvu3wvosm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.0625rem 0.5rem 0.0625rem 0.375rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.navr-badge[b-qvu3wvosm3]  .mud-icon-root {
    font-size: 0.9375rem;
}

.navr-badge--draft[b-qvu3wvosm3] {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-badge--live[b-qvu3wvosm3] {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
}

.navr-badge--scheduled[b-qvu3wvosm3],
.navr-badge--unsaved[b-qvu3wvosm3] {
    color: var(--mud-palette-info-darken, var(--mud-palette-info));
    border-color: color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
}

.navr-badge--previous[b-qvu3wvosm3] {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-badge--none[b-qvu3wvosm3] {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: transparent;
}
/* /Components/Shared/CollapsibleSettingsSection.razor.rz.scp.css */
/* Settings section shell — scoped via Blazor CSS isolation. Colours come from the MudBlazor palette variables so
   the section follows the Admin theme (light / dark) and never introduces a separate visual style. */

.navr-settings-section[b-u8dv0ybem2] {
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-settings-section--open[b-u8dv0ybem2] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Header ── */
.navr-settings-section__header[b-u8dv0ybem2] {
    position: relative;                     /* anchors the stretched toggle */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding-block: 0.5rem;
    padding-inline: 1rem 0.625rem;
    border-radius: 9px;
    transition: background-color 0.15s ease;
}

.navr-settings-section__header:hover[b-u8dv0ybem2] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-settings-section--open > .navr-settings-section__header[b-u8dv0ybem2] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-settings-section__toggle[b-u8dv0ybem2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* The toggle covers the whole header, so the title, the empty space and the chevron are all one click target. */
.navr-settings-section__toggle[b-u8dv0ybem2]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.navr-settings-section__toggle:focus[b-u8dv0ybem2] {
    outline: none;
}

.navr-settings-section__toggle:focus-visible[b-u8dv0ybem2]::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 9px;
}

.navr-settings-section__icon[b-u8dv0ybem2] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-settings-section__text[b-u8dv0ybem2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-settings-section__title[b-u8dv0ybem2] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-settings-section__purpose[b-u8dv0ybem2] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-settings-section__category[b-u8dv0ybem2] {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* Layered above the stretched toggle so it stays independently clickable and focusable. */
.navr-settings-section__help[b-u8dv0ybem2] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
}

.navr-settings-section__chevron[b-u8dv0ybem2] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.navr-settings-section--open > .navr-settings-section__header .navr-settings-section__chevron[b-u8dv0ybem2] {
    transform: rotate(180deg);
}

/* ── Body ── */
.navr-settings-section__body[b-u8dv0ybem2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 1rem 1.125rem;
    min-width: 0;
}

/* ── Prominent (workspace-level) variant ── */
.navr-settings-section--prominent > .navr-settings-section__header[b-u8dv0ybem2] {
    min-height: 4rem;
}

.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__title[b-u8dv0ybem2] {
    font-size: 0.875rem;
}

.navr-settings-section--prominent > .navr-settings-section__body[b-u8dv0ybem2] {
    padding: 1rem;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
    border-end-start-radius: 9px;
    border-end-end-radius: 9px;
}

/* ── Toned (semantic) header — block editors only ──
   The header takes its group's own soft colour (tokens in wwwroot/app.css), open or collapsed, with a slim accent
   bar at the inline start so the group reads at a glance. Title and purpose keep the theme text colours; the icon
   ink is the tone mixed into the theme text colour, so both stay readable in light and dark mode. */
.navr-settings-section--toned[b-u8dv0ybem2] {
    border-color: var(--navr-tone-line);
}

.navr-settings-section--toned > .navr-settings-section__header[b-u8dv0ybem2] {
    background: var(--navr-tone-bg);
}

.navr-settings-section--toned.navr-settings-section--open[b-u8dv0ybem2] {
    border-color: color-mix(in srgb, var(--navr-tone) 48%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-settings-section--toned.navr-settings-section--open > .navr-settings-section__header[b-u8dv0ybem2] {
    border-bottom-color: var(--navr-tone-line);
    background: var(--navr-tone-bg-open);
}

.navr-settings-section--toned > .navr-settings-section__header:hover[b-u8dv0ybem2] {
    background: var(--navr-tone-bg-hover);
}

.navr-settings-section--toned > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-settings-section--toned > .navr-settings-section__header .navr-settings-section__category[b-u8dv0ybem2] {
    border-color: var(--navr-tone-line);
    background: var(--mud-palette-surface);
}

.navr-settings-section--toned.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    color: #fff;
    background: var(--navr-tone-solid);
}

/* Narrow screens: the category tag is supplementary, the title and purpose are not. */
@media (max-width: 599.98px) {
    .navr-settings-section__category[b-u8dv0ybem2] {
        display: none;
    }

    .navr-settings-section__header[b-u8dv0ybem2] {
        padding-inline: 0.75rem 0.375rem;
    }

    .navr-settings-section__body[b-u8dv0ybem2] {
        padding: 0.875rem 0.75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-settings-section[b-u8dv0ybem2],
    .navr-settings-section__header[b-u8dv0ybem2],
    .navr-settings-section__chevron[b-u8dv0ybem2] {
        transition: none;
    }
}
/* /Components/Shared/ColorSourcePickerDialog.razor.rz.scp.css */
/* Colour source picker content — scoped via Blazor CSS isolation. The frame (header, scroll area, footer) comes from
   AdminDialogFrame; this file styles the source tabs, the current-selection strip, the swatch grid and the Custom
   editor. Palette variables only; the grid reflows to the dialog's width and nothing scrolls horizontally. */

/* ── Source tabs ── */
.csp-tabs[b-wwi9m2gro6] {
    display: flex;
    gap: 0.25rem;
    padding: 0.1875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.csp-tabs__tab[b-wwi9m2gro6] {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.625rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.csp-tabs__tab:hover[b-wwi9m2gro6] {
    color: var(--mud-palette-text-primary);
}

.csp-tabs__tab:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.csp-tabs__tab--active[b-wwi9m2gro6],
.csp-tabs__tab--active:hover[b-wwi9m2gro6] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.csp-tabs__count[b-wwi9m2gro6] {
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.5;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

/* ── Current selection ── */
.csp-current[b-wwi9m2gro6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.csp-current__swatch[b-wwi9m2gro6] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.csp-current__text[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.csp-current__label[b-wwi9m2gro6] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.csp-current__name[b-wwi9m2gro6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.csp-current__detail[b-wwi9m2gro6] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.csp-panel[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.csp-note[b-wwi9m2gro6] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ── Swatch grid ── */
.csp-grid[b-wwi9m2gro6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.25rem), 1fr));
    gap: 0.5rem;
}

.csp-swatch[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    font: inherit;
    text-align: start;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.csp-swatch:hover[b-wwi9m2gro6] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

.csp-swatch:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.csp-swatch--selected[b-wwi9m2gro6] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.csp-swatch__color[b-wwi9m2gro6] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.csp-swatch__check[b-wwi9m2gro6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.csp-swatch__name[b-wwi9m2gro6] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.csp-swatch__hex[b-wwi9m2gro6] {
    font-size: 0.6875rem;
    line-height: 1.3;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--mud-palette-text-secondary);
}

/* ── Custom ── */
.csp-custom[b-wwi9m2gro6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.csp-custom__preview[b-wwi9m2gro6] {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
}

.csp-custom__fields[b-wwi9m2gro6] {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.csp-custom__picker[b-wwi9m2gro6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.csp-custom__picker input[type="color"][b-wwi9m2gro6] {
    width: 2.75rem;
    height: 2.25rem;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.csp-custom__picker input[type="color"]:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (max-width: 599.98px) {
    .csp-tabs__tab[b-wwi9m2gro6] {
        flex-direction: column;
        gap: 0.125rem;
        padding: 0.25rem 0.25rem;
        font-size: 0.75rem;
    }

    .csp-grid[b-wwi9m2gro6] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.25rem), 1fr));
    }
}
/* /Components/Shared/DesignPresetCard.razor.rz.scp.css */
.navr-preset-card[b-ltfx0os4l5] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-preset-card:hover[b-ltfx0os4l5] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navr-preset-card:focus-visible[b-ltfx0os4l5] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-preset-card--selected[b-ltfx0os4l5] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.navr-preset-card__swatch[b-ltfx0os4l5] {
    display: block;
    height: 2.25rem;
    margin-bottom: 0.25rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.navr-preset-card__name[b-ltfx0os4l5] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-preset-card__description[b-ltfx0os4l5] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-preset-card__active[b-ltfx0os4l5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-preset-card[b-ltfx0os4l5] {
        transition: none;
    }
}
/* /Components/Shared/DevicePreviewFrame.razor.rz.scp.css */
/* Device preview stage. Horizontal overflow is CLIPPED (never scrolled), so the page cannot scroll sideways even
   before the fit script has run; vertical overflow stays visible so an opened dropdown / mega panel is not cut. */

.navr-device-frame[b-houde2y4ao] {
    position: relative;
    min-width: 0;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

.navr-device-frame__canvas[b-houde2y4ao] {
    max-width: none;
    margin-inline: auto;
    zoom: var(--navr-device-zoom, 1);
}
/* /Components/Shared/MediaUploadField.razor.rz.scp.css */
.navr-media-field[b-ovz27cxxzu] {
    grid-column: 1 / -1;
    min-width: 0;
}

.navr-media-field__label[b-ovz27cxxzu] {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.navr-media-field__row[b-ovz27cxxzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.navr-media-field__thumb[b-ovz27cxxzu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 3.75rem;
    overflow: hidden;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-media-field__thumb img[b-ovz27cxxzu] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.navr-media-field__thumb--cover img[b-ovz27cxxzu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navr-media-field__empty[b-ovz27cxxzu] {
    padding: 0 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-media-field__actions[b-ovz27cxxzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.navr-media-field__hint[b-ovz27cxxzu] {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/PreviewDeviceSwitcher.razor.rz.scp.css */
/* Segmented Desktop | Tablet | Mobile control — MudBlazor palette variables only, so it follows the Admin theme. */

.navr-device-switch[b-cl7m38lpqo] {
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
    max-width: 100%;
}

.navr-device-switch__btn[b-cl7m38lpqo] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navr-device-switch__btn:hover[b-cl7m38lpqo] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-device-switch__btn:focus-visible[b-cl7m38lpqo] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-device-switch__btn--active[b-cl7m38lpqo] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Very narrow: icons only; the title attribute and aria-pressed still name each device. */
@media (max-width: 420px) {
    .navr-device-switch__label[b-cl7m38lpqo] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-device-switch__btn[b-cl7m38lpqo] {
        transition: none;
    }
}
/* /Components/Shared/SettingsHelpDialog.razor.rz.scp.css */
/* Working Details / Help dialog content — scoped via Blazor CSS isolation. The frame (header, scroll area, footer)
   and the section cards come from AdminDialogFrame / AdminDialogSection; this file styles only what is specific to
   help: the language tabs, the "controls" tags, the settings list, the Working Details cards and the preview tip.
   Comfortable Bangla line height throughout; every long word wraps. */

/* ── Language tabs (বাংলা / English) ── */
.navr-help-tabs[b-sznuj9w80q] {
    display: inline-flex;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.1875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-help-tabs__tab[b-sznuj9w80q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    min-height: 2.125rem;
    padding: 0.25rem 1rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.navr-help-tabs__tab:hover[b-sznuj9w80q] {
    color: var(--mud-palette-text-primary);
}

.navr-help-tabs__tab:focus-visible[b-sznuj9w80q] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-help-tabs__tab--active[b-sznuj9w80q] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.navr-help-tabs__tab--active:hover[b-sznuj9w80q] {
    color: var(--mud-palette-primary-text, #fff);
}

.navr-help-tabs__single[b-sznuj9w80q] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ── Content ── */
.navr-help[b-sznuj9w80q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.navr-help__tags[b-sznuj9w80q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navr-help__tags li[b-sznuj9w80q] {
    max-width: 100%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-help__list[b-sznuj9w80q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.navr-help__item[b-sznuj9w80q] {
    padding: 0.5rem 0.75rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    border-radius: 6px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-help__item dt[b-sznuj9w80q] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.navr-help__item dd[b-sznuj9w80q] {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

/* Working Details: one card per setting, its behaviour as a short bullet list. */
.navr-help__working[b-sznuj9w80q] {
    display: grid;
    gap: 0.5rem;
}

.navr-help__detail[b-sznuj9w80q] {
    min-width: 0;
    padding: 0.5rem 0.75rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-help__detail-name[b-sznuj9w80q] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

/* ── Preview tip (last line of the content) ── */
.navr-help__tip[b-sznuj9w80q] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .navr-help-tabs[b-sznuj9w80q] {
        display: flex;
    }

    .navr-help-tabs__tab[b-sznuj9w80q] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* /Components/Shared/SettingsSubgroup.razor.rz.scp.css */
/* Settings sub-group — scoped via Blazor CSS isolation. The field classes below are applied by the component that
   renders the controls (its own markup), so they are reached with ::deep. */

.navr-settings-group[b-mis1lrv4nw] {
    min-width: 0;
}

.navr-settings-group__title[b-mis1lrv4nw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-settings-group__title[b-mis1lrv4nw]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* Auto-fitting columns: as many ~200px columns as the available width allows, never narrower than the box. */
.navr-settings-fields[b-mis1lrv4nw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
    min-width: 0;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field {
    min-width: 0;
}

/* A switch has no outlined box, so centre it on the height of a dense outlined input beside it. */
.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field--switch {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field--full {
    grid-column: 1 / -1;
}

/* A full-width row holding up to two wider controls side by side (they stack when space is short). auto-fill keeps a lone
   control at half width instead of stretching it across the whole group. */
.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem 1rem;
    min-width: 0;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-settings-group__hint[b-mis1lrv4nw] {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/SettingsWorkspace.razor.rz.scp.css */
/* Settings workspace shell (Header / Footer Management) — scoped via Blazor CSS isolation. Colours come from the
   MudBlazor palette variables so the workspace follows the Admin theme (light / dark), matching the Card Settings
   workspace and the CollapsibleSettingsSection groups it hosts. */

.navr-workspace[b-8ewcjjqbnd] {
    min-width: 0;
    --navr-ws-head-h: 4.5rem;
}

/* ── Page header: title, purpose, Preview + Save. Sticky under the app bar so Save is always one click away. ── */
.navr-workspace__head[b-8ewcjjqbnd] {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-height: var(--navr-ws-head-h);
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-workspace__head-main[b-8ewcjjqbnd] {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.navr-workspace__head-icon[b-8ewcjjqbnd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-workspace__head-text[b-8ewcjjqbnd] {
    min-width: 0;
}

.navr-workspace__title[b-8ewcjjqbnd] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-workspace__description[b-8ewcjjqbnd] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-workspace__actions[b-8ewcjjqbnd] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ── Workspace body ── */
.navr-workspace__body[b-8ewcjjqbnd] {
    container-type: inline-size;
    min-width: 0;
}

/* Narrow: one column, live preview first so the result is visible without scrolling past every group. */
.navr-workspace__layout[b-8ewcjjqbnd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.navr-workspace__settings[b-8ewcjjqbnd] {
    order: 2;
    min-width: 0;
}

.navr-workspace__preview[b-8ewcjjqbnd] {
    order: 1;
    min-width: 0;
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
}

.navr-workspace__preview:focus[b-8ewcjjqbnd] {
    outline: none;
}

.navr-workspace__settings-head[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.625rem;
}

.navr-workspace__panel-title[b-8ewcjjqbnd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.navr-workspace__panel-title[b-8ewcjjqbnd]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

.navr-workspace__toolbar[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.navr-workspace__intro[b-8ewcjjqbnd] {
    margin-bottom: 0.625rem;
    min-width: 0;
}

.navr-workspace__sections[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Live preview ── */
.navr-workspace__preview-inner[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    min-width: 0;
}

.navr-workspace__preview-head[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.navr-workspace__preview-badge[b-8ewcjjqbnd] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.navr-workspace__preview-toolbar[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.navr-workspace__preview-stage[b-8ewcjjqbnd] {
    min-width: 0;
}

.navr-workspace__preview-footer[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: settings left, preview right and sticky, so every change is visible next to the control that made it.
   The preview column gets the larger share — a header or footer is a wide object. */
@container (min-width: 1000px) {
    .navr-workspace__layout[b-8ewcjjqbnd] {
        grid-template-columns: minmax(22rem, 5fr) minmax(0, 6fr);
        align-items: start;
    }

    .navr-workspace__settings[b-8ewcjjqbnd] {
        order: 1;
    }

    .navr-workspace__preview[b-8ewcjjqbnd] {
        order: 2;
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
    }

    .navr-workspace__preview-inner[b-8ewcjjqbnd] {
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - var(--navr-ws-head-h) - 2rem);
        overflow-y: auto;
    }
}

/* Phones: a compact sticky header — the title and Save stay reachable, the description does not eat the screen. */
@media (max-width: 599.98px) {
    .navr-workspace[b-8ewcjjqbnd] {
        --navr-ws-head-h: 3.5rem;
    }

    .navr-workspace__head[b-8ewcjjqbnd] {
        padding: 0.5rem 0;
    }

    .navr-workspace__head-icon[b-8ewcjjqbnd],
    .navr-workspace__description[b-8ewcjjqbnd] {
        display: none;
    }

    .navr-workspace__title[b-8ewcjjqbnd] {
        font-size: 1.125rem;
    }

    .navr-workspace__preview-inner[b-8ewcjjqbnd] {
        padding: 0.625rem;
    }
}

/* ── Three-column mode (a page that passes a Library): settings | library | preview. Narrow: preview, library, settings
   stacked. Medium: the library spans the top, settings and preview below. Wide: three columns, the library and the
   preview column sticky with their own scroll. Two-column pages never get this class. ── */
.navr-workspace__layout--three[b-8ewcjjqbnd] {
    grid-template-areas: "preview" "library" "settings";
}

.navr-workspace__layout--three > .navr-workspace__settings[b-8ewcjjqbnd] { grid-area: settings; }
.navr-workspace__layout--three > .navr-workspace__library[b-8ewcjjqbnd] { grid-area: library; min-width: 0; }
.navr-workspace__layout--three > .navr-workspace__preview[b-8ewcjjqbnd] { grid-area: preview; }

.navr-workspace__library[b-8ewcjjqbnd] {
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
}

.navr-workspace__library:focus[b-8ewcjjqbnd] {
    outline: none;
}

.navr-workspace__preview-aside[b-8ewcjjqbnd] {
    margin-top: 0.75rem;
    min-width: 0;
}

@container (min-width: 1000px) {
    .navr-workspace__layout--three[b-8ewcjjqbnd] {
        grid-template-columns: minmax(22rem, 5fr) minmax(0, 6fr);
        grid-template-areas: "library library" "settings preview";
    }
}

@container (min-width: 1360px) {
    .navr-workspace__layout--three[b-8ewcjjqbnd] {
        grid-template-columns: minmax(19rem, 0.74fr) minmax(0, 1.16fr) minmax(24rem, 1.22fr);
        grid-template-areas: "settings library preview";
    }

    .navr-workspace__layout--three > .navr-workspace__library[b-8ewcjjqbnd],
    .navr-workspace__layout--three > .navr-workspace__preview[b-8ewcjjqbnd] {
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - var(--navr-ws-head-h) - 5.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .navr-workspace__layout--three .navr-workspace__preview-inner[b-8ewcjjqbnd] {
        max-height: none;
        overflow: visible;
    }
}

/* ── Information / status bar under the workspace, kept in view at the bottom of the screen. ── */
.navr-workspace__status[b-8ewcjjqbnd] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1.25rem;
    margin-top: 1rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.06);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

/* Settings | library (no permanent preview column — Footer Management previews in its popup). */
.navr-workspace__layout--library[b-8ewcjjqbnd] {
    grid-template-areas: "library" "settings";
}
.navr-workspace__layout--library > .navr-workspace__settings[b-8ewcjjqbnd] { grid-area: settings; }
.navr-workspace__layout--library > .navr-workspace__library[b-8ewcjjqbnd] { grid-area: library; min-width: 0; }

@container (min-width: 1000px) {
    .navr-workspace__layout--library[b-8ewcjjqbnd] {
        grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.6fr);
        grid-template-areas: "settings library";
        align-items: start;
    }
}
/* /Components/Shared/UploadLockOverlay.razor.rz.scp.css */
/* Component-scoped styles for the upload overlay + page lock.

   Every colour comes from the MudBlazor palette variables the active NAVR theme publishes, so the overlay
   re-themes with the rest of the Admin panel and no palette is hard-coded. The only literals are the neutral
   black of the scrim and pure white on the filled ring, which read the same in every theme. */

.uplock[b-v15nc2uxpw] {
    position: fixed;
    inset: 0;
    z-index: 2100; /* above MudBlazor's drawers (1100-1300) and dialogs (1400) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* The element itself is the interaction barrier: nothing behind it can be clicked, hovered or dragged. */
    cursor: progress;
    outline: none;
}

.uplock__scrim[b-v15nc2uxpw] {
    position: absolute;
    inset: 0;
    background: rgba(9, 14, 11, .58);
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    animation: uplock-fade-b-v15nc2uxpw .22s ease-out both;
}

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

.uplock__card[b-v15nc2uxpw] {
    position: relative;
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 34px 32px 30px;
    border-radius: 22px;
    text-align: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 4px 12px rgba(0, 0, 0, .22);
    animation: uplock-rise-b-v15nc2uxpw .28s cubic-bezier(.22, .8, .3, 1) both;
}

/* A hairline of the theme's own primary along the top edge — the one piece of brand on the card. */
.uplock__card[b-v15nc2uxpw]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, transparent, var(--mud-palette-primary), transparent);
}

.uplock__card--error[b-v15nc2uxpw]::before { background: linear-gradient(90deg, transparent, var(--mud-palette-error), transparent); }
.uplock__card--success[b-v15nc2uxpw]::before { background: linear-gradient(90deg, transparent, var(--mud-palette-success), transparent); }

/* ── progress ring ─────────────────────────────────────────────────────────── */

.uplock__ring[b-v15nc2uxpw] {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 18px;
}

.uplock__ring svg[b-v15nc2uxpw] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* start the arc at 12 o'clock */
    overflow: visible;
}

.uplock__ringtrack[b-v15nc2uxpw] {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 7;
    opacity: .55;
}

.uplock__ringarc[b-v15nc2uxpw] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .12));
}

/* Determinate: the arc animates to each real percentage rather than snapping. */
.uplock__ring svg.is-determinate .uplock__ringarc[b-v15nc2uxpw] {
    transition: stroke-dashoffset .28s ease-out;
}

/* Indeterminate: a fixed quarter arc that orbits. Used ONLY when the transport gives no byte counts —
   it deliberately shows no number, so it can never be mistaken for real progress. */
.uplock__ring svg.is-indeterminate[b-v15nc2uxpw] {
    animation: uplock-spin-b-v15nc2uxpw 1.1s linear infinite;
}

.uplock__card--error .uplock__ringarc[b-v15nc2uxpw] { stroke: var(--mud-palette-error); }
.uplock__card--success .uplock__ringarc[b-v15nc2uxpw] { stroke: var(--mud-palette-success); }

.uplock__ringtext[b-v15nc2uxpw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.uplock__pctsign[b-v15nc2uxpw] {
    font-size: .95rem;
    font-weight: 500;
    opacity: .6;
    margin-left: 2px;
    align-self: flex-start;
    margin-top: .45rem;
}

.uplock__glyph[b-v15nc2uxpw] { display: inline-flex; color: var(--mud-palette-primary); }
.uplock__card--error .uplock__glyph[b-v15nc2uxpw] { color: var(--mud-palette-error); }
.uplock__card--success .uplock__glyph[b-v15nc2uxpw] { color: var(--mud-palette-success); }

/* ── copy ──────────────────────────────────────────────────────────────────── */

.uplock__title[b-v15nc2uxpw] {
    margin: 0 0 6px;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.uplock__file[b-v15nc2uxpw] {
    margin: 0 0 4px;
    font-size: .9rem;
    opacity: .78;
    /* A long file name truncates instead of stretching the card. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uplock__count[b-v15nc2uxpw],
.uplock__bytes[b-v15nc2uxpw] {
    margin: 0 0 2px;
    font-size: .8rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.uplock__hint[b-v15nc2uxpw] {
    margin: 16px 0 0;
    font-size: .78rem;
    opacity: .55;
    line-height: 1.5;
}

.uplock__error[b-v15nc2uxpw] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.45;
    text-align: start;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error-hover);
    border: 1px solid var(--mud-palette-error);
    word-break: break-word;
}

.uplock__dismiss[b-v15nc2uxpw] {
    margin-top: 18px;
    min-height: 44px; /* touch target */
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    transition: filter .18s ease, transform .18s ease;
}

.uplock__dismiss:hover[b-v15nc2uxpw] { filter: brightness(1.08); }
.uplock__dismiss:active[b-v15nc2uxpw] { transform: translateY(1px); }
.uplock__dismiss:focus-visible[b-v15nc2uxpw] { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }

/* ── motion / responsive ───────────────────────────────────────────────────── */

@keyframes uplock-fade-b-v15nc2uxpw { from { opacity: 0; } to { opacity: 1; } }

@keyframes uplock-rise-b-v15nc2uxpw {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes uplock-spin-b-v15nc2uxpw { to { transform: rotate(270deg); } }

@media (max-width: 480px) {
    .uplock[b-v15nc2uxpw] { padding: 16px; }
    .uplock__card[b-v15nc2uxpw] { padding: 28px 20px 24px; border-radius: 18px; }
    .uplock__ring[b-v15nc2uxpw] { width: 96px; height: 96px; }
    .uplock__ringtext[b-v15nc2uxpw] { font-size: 1.6rem; }
}

/* A visitor who asked for less motion still gets the overlay and the real percentage — just no orbit, no
   rise and no arc easing. The indeterminate ring becomes a static three-quarter arc, which still reads as
   "working" beside the animated wording. */
@media (prefers-reduced-motion: reduce) {
    .uplock__scrim[b-v15nc2uxpw],
    .uplock__card[b-v15nc2uxpw] { animation: none; }

    .uplock__ring svg.is-indeterminate[b-v15nc2uxpw] { animation: none; }
    .uplock__ring svg.is-determinate .uplock__ringarc[b-v15nc2uxpw] { transition: none; }
    .uplock__dismiss[b-v15nc2uxpw] { transition: none; }
}
/* /Components/Training/TutorialVideoButton.razor.rz.scp.css */
/* The Watch Tutorial action inside the Working Details / Help dialog. Palette variables only (light / dark themes). */

.navr-tutorial-cta[b-dgql70onvb] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.navr-tutorial-cta__icon[b-dgql70onvb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.navr-tutorial-cta__text[b-dgql70onvb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.navr-tutorial-cta__eyebrow[b-dgql70onvb] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.navr-tutorial-cta__title[b-dgql70onvb] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navr-tutorial-cta__meta[b-dgql70onvb] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-cta__fallback[b-dgql70onvb] {
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-tutorial-cta[b-dgql70onvb]  .navr-tutorial-cta__button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .navr-tutorial-cta[b-dgql70onvb] {
        flex-wrap: wrap;
    }

    .navr-tutorial-cta[b-dgql70onvb]  .navr-tutorial-cta__button {
        flex: 1 1 100%;
    }
}
/* /Components/Training/TutorialVideoDialog.razor.rz.scp.css */
/* Tutorial video dialog body. The frame (header / scrolling body / footer) is AdminDialogFrame's. */

.navr-tutorial-player[b-v14sbsz5ue] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

/* A true 16:9 stage: the video is letter-boxed (object-fit: contain), never stretched or cropped. */
.navr-tutorial-player__stage[b-v14sbsz5ue] {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 16rem);
    overflow: hidden;
    border-radius: 12px;
    background: #0b0f0c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.navr-tutorial-player__video[b-v14sbsz5ue] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b0f0c;
}

.navr-tutorial-player__video:focus-visible[b-v14sbsz5ue] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.navr-tutorial-player__state[b-v14sbsz5ue] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.875rem;
}

.navr-tutorial-player__state--error[b-v14sbsz5ue] {
    color: rgba(255, 255, 255, 0.92);
}

.navr-tutorial-player__state--error[b-v14sbsz5ue]  .mud-button-root {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.navr-tutorial-player__error-title[b-v14sbsz5ue] {
    font-size: 1rem;
    font-weight: 600;
}

.navr-tutorial-player__error-text[b-v14sbsz5ue] {
    max-width: 32rem;
    color: rgba(255, 255, 255, 0.72);
}

.navr-tutorial-player__description[b-v14sbsz5ue] {
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.navr-tutorial-player__facts[b-v14sbsz5ue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.navr-tutorial-player__facts > div[b-v14sbsz5ue] {
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}

.navr-tutorial-player__facts dt[b-v14sbsz5ue] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-player__facts dt[b-v14sbsz5ue]::after {
    content: ":";
}

.navr-tutorial-player__facts dd[b-v14sbsz5ue] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tutorial-player__note[b-v14sbsz5ue] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .navr-tutorial-player__stage[b-v14sbsz5ue] {
        border-radius: 8px;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-tutorial-player__stage[b-v14sbsz5ue] {
        box-shadow: none;
    }
}
/* /Components/Website/AlbumLibraryView.razor.rz.scp.css */
/* Album Template Library — the photographic layout (reference design). Responsive by CONTAINER width, so it adapts to the Admin's
   drawer as well as to the window: three zones — category strip, template grid, preview panel. */

.alv[b-21nzl530fs] { container-type: inline-size; container-name: alv; display: block; }

/* ── Category strip ─────────────────────────────────────────────────────────────────────────────── */
.alv-strip[b-21nzl530fs] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.alv-cat[b-21nzl530fs] {
    flex: 0 0 132px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.alv-cat:hover[b-21nzl530fs] { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-1px); }

.alv-cat--on[b-21nzl530fs] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.alv-cat__img[b-21nzl530fs] {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(120, 120, 120, .18), rgba(120, 120, 120, .06));
}

.alv-cat__img img[b-21nzl530fs] { display: block; width: 100%; height: 100%; object-fit: cover; }

.alv-cat__name[b-21nzl530fs] { font-size: .84rem; font-weight: 600; line-height: 1.2; min-height: 2.4em; }

.alv-cat__count[b-21nzl530fs] {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .7rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

@container alv (min-width: 1100px) {
    .alv-strip[b-21nzl530fs] { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; }
    .alv-cat[b-21nzl530fs] { flex: none; }
}

/* ── Gallery + panel ────────────────────────────────────────────────────────────────────────────── */
.alv-main[b-21nzl530fs] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

@container alv (min-width: 1000px) {
    .alv-main[b-21nzl530fs] { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
    .alv-panel[b-21nzl530fs] { position: sticky; top: 12px; }
}

.alv-head[b-21nzl530fs] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }

.alv-head__text[b-21nzl530fs] { min-width: 0; flex: 1 1 260px; }

.alv-title[b-21nzl530fs] { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }

.alv-title span[b-21nzl530fs] { color: var(--mud-palette-text-secondary); font-weight: 600; }

.alv-sub[b-21nzl530fs] { margin: 4px 0 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

.alv-tools[b-21nzl530fs] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; max-width: 100%; }

.alv-tools[b-21nzl530fs]  .alv-search { flex: 1 1 200px; min-width: 160px; max-width: 280px; margin: 0; }

.alv-tools[b-21nzl530fs]  .alv-sort { flex: 0 0 150px; margin: 0; }

.alv-grid[b-21nzl530fs] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* ── Template card ──────────────────────────────────────────────────────────────────────────────── */
.alv-card[b-21nzl530fs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.alv-card:hover[b-21nzl530fs] { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); transform: translateY(-2px); }

.alv-card--sel[b-21nzl530fs] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.alv-card--off[b-21nzl530fs] { opacity: .55; }

.alv-thumb[b-21nzl530fs] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    text-align: left;
}

.alv-thumb__img[b-21nzl530fs] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.alv-thumb__shade[b-21nzl530fs] { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }

.alv-thumb__tag[b-21nzl530fs] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.alv-thumb__bar[b-21nzl530fs] { position: absolute; left: 12px; bottom: 8px; width: 38px; height: 3px; border-radius: 3px; }

.alv-badge[b-21nzl530fs] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.alv-badge--premium[b-21nzl530fs] { background: #f6c33a; color: #3a2a00; }

.alv-badge--feat[b-21nzl530fs] { right: auto; left: 8px; background: rgba(255, 255, 255, .92); color: #333; text-transform: none; letter-spacing: 0; font-weight: 600; }

.alv-badge--inline[b-21nzl530fs] { position: static; display: inline-block; }

.alv-play[b-21nzl530fs] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    border: 1.5px solid rgba(255, 255, 255, .9);
    color: #fff;
    pointer-events: none;
}

.alv-play--big[b-21nzl530fs] { width: 56px; height: 56px; }

.alv-chips[b-21nzl530fs] { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }

.alv-chip[b-21nzl530fs] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.alv-chip[b-21nzl530fs]  .mud-icon-root { font-size: .85rem; }

.alv-card__foot[b-21nzl530fs] { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }

.alv-card__name[b-21nzl530fs] { font-size: .92rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alv-card__sub[b-21nzl530fs] { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.alv-card__actions[b-21nzl530fs] { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

.alv-link[b-21nzl530fs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    border-radius: 6px;
}

.alv-link:hover[b-21nzl530fs] { color: var(--mud-palette-primary); }

/* ── Preview panel ──────────────────────────────────────────────────────────────────────────────── */
.alv-panel[b-21nzl530fs] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.alv-panel__head[b-21nzl530fs] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.alv-panel__head h3[b-21nzl530fs] { margin: 0; font-size: 1rem; font-weight: 700; }

.alv-hero[b-21nzl530fs] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    text-align: left;
}

.alv-hero img[b-21nzl530fs] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.alv-hero__text[b-21nzl530fs] { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }

.alv-hero__name[b-21nzl530fs] { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }

.alv-hero__tag[b-21nzl530fs] { font-size: .82rem; opacity: .95; }

.alv-caps[b-21nzl530fs] { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.alv-caps li[b-21nzl530fs] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; font-size: .74rem; color: var(--mud-palette-text-secondary); }

.alv-caps li strong[b-21nzl530fs] { font-size: .8rem; color: var(--mud-palette-text-primary); }

.alv-caps li[b-21nzl530fs]  .mud-icon-root { color: var(--mud-palette-primary); font-size: 1.7rem; }

@container alv (min-width: 1000px) {
    .alv-caps[b-21nzl530fs] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.alv-gal-head[b-21nzl530fs] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.alv-gal-head h4[b-21nzl530fs] { margin: 0; font-size: .92rem; font-weight: 700; }

.alv-tabs[b-21nzl530fs] { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.alv-tab[b-21nzl530fs] {
    min-height: 36px;
    padding: 4px 14px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.alv-tab--on[b-21nzl530fs] { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--mud-palette-primary); }

.alv-tiles[b-21nzl530fs] { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }

.alv-tile[b-21nzl530fs] {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #1c1c1c;
}

.alv-tile img[b-21nzl530fs] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.alv-tile .alv-play[b-21nzl530fs] { width: 28px; height: 28px; }

.alv-more[b-21nzl530fs] { margin-top: 8px; font-size: .78rem; color: var(--mud-palette-text-secondary); text-align: center; }

.alv-empty[b-21nzl530fs] { padding: 18px 12px; text-align: center; font-size: .86rem; color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; }

/* ── Focus (keyboard) ───────────────────────────────────────────────────────────────────────────── */
.alv-cat:focus-visible[b-21nzl530fs], .alv-thumb:focus-visible[b-21nzl530fs], .alv-hero:focus-visible[b-21nzl530fs], .alv-tile:focus-visible[b-21nzl530fs], .alv-tab:focus-visible[b-21nzl530fs], .alv-link:focus-visible[b-21nzl530fs] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Small screens: a single column of cards, controls with comfortable touch targets, never a horizontal page scroll ── */
@container alv (max-width: 640px) {
    .alv-grid[b-21nzl530fs] { grid-template-columns: minmax(0, 1fr); }
    .alv-tools[b-21nzl530fs] { width: 100%; }
    .alv-tools[b-21nzl530fs]  .alv-search { max-width: none; flex: 1 1 100%; }
    .alv-tools[b-21nzl530fs]  .alv-sort { flex: 1 1 140px; }
    .alv-link[b-21nzl530fs], .alv-tab[b-21nzl530fs] { min-height: 44px; }
    .alv-tiles[b-21nzl530fs] { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .alv-card[b-21nzl530fs], .alv-cat[b-21nzl530fs] { transition: none; }
    .alv-card:hover[b-21nzl530fs], .alv-cat:hover[b-21nzl530fs] { transform: none; }
}
/* /Components/Website/CustomCollectionView.razor.rz.scp.css */
.ccv[b-oc217tpqjz] { container-type: inline-size; }
.ccv__head[b-oc217tpqjz] { margin-bottom: 14px; }
.ccv__title[b-oc217tpqjz] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ccv__new[b-oc217tpqjz] { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mud-palette-error); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.ccv__count[b-oc217tpqjz] { color: var(--mud-palette-text-secondary); font-weight: 600; }
.ccv__sub[b-oc217tpqjz] { margin: 4px 0 0; font-size: .86rem; color: var(--mud-palette-text-secondary); }
.ccv__grid[b-oc217tpqjz] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ccv__empty[b-oc217tpqjz] { padding: 18px 12px; text-align: center; font-size: .86rem; color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; }
/* /Components/Website/CustomTemplateCard.razor.rz.scp.css */
/* A card of the My Custom Website Templates collection - container-responsive like the other library views; admin cards may crop the thumbnail. */
.ctc[b-12x1bvjeiw] { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); overflow: hidden; }
.ctc--off[b-12x1bvjeiw] { opacity: .6; }
.ctc__thumb[b-12x1bvjeiw] { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; cursor: pointer; overflow: hidden; color: inherit; }
.ctc__img[b-12x1bvjeiw] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctc__art[b-12x1bvjeiw] { position: absolute; inset: 0; display: grid; place-items: center; }
.ctc__body[b-12x1bvjeiw] { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; min-width: 0; flex: 1 1 auto; }
.ctc__name[b-12x1bvjeiw] { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ctc__desc[b-12x1bvjeiw] { margin: 0; font-size: .86rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ctc__ref[b-12x1bvjeiw] { margin: 0; font-size: .82rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ctc__ref a[b-12x1bvjeiw] { color: var(--mud-palette-primary); text-decoration: underline; }
.ctc__meta[b-12x1bvjeiw] { margin: 0; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.ctc__actions[b-12x1bvjeiw] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.ctc__actions[b-12x1bvjeiw]  .mud-button-root { flex: 1 1 110px; min-width: 0; }
/* /Components/Website/CustomTemplatesSection.razor.rz.scp.css */
.cts[b-eyge1zz1du] { margin-top: 24px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--mud-palette-error) 14%, transparent); container-type: inline-size; }
.cts__head[b-eyge1zz1du] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.cts__text[b-eyge1zz1du] { min-width: 0; flex: 1 1 260px; }
.cts__title[b-eyge1zz1du] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.cts__new[b-eyge1zz1du] { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mud-palette-error); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.cts__sub[b-eyge1zz1du] { margin: 4px 0 0; font-size: .86rem; color: var(--mud-palette-text-secondary); }
.cts__grid[b-eyge1zz1du] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* /Components/Website/WebsiteCategoryLibraryView.razor.rz.scp.css */
/* Website Template Library — category screen + category gallery (the Album library's browsing pattern, its own wcl-* names). Responsive by
   CONTAINER width, so it adapts to the Admin's drawer as well as to the window. Admin cards may crop (object-fit: cover) exactly like the Album
   cards; the public websites' no-crop rule is unaffected. */

.wcl[b-4gy80csaam] { container-type: inline-size; container-name: wcl; display: block; }

/* ── Shared head ────────────────────────────────────────────────────────────────────────────────── */
.wcl-head[b-4gy80csaam] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }

.wcl-head__text[b-4gy80csaam] { min-width: 0; flex: 1 1 260px; }

.wcl-title[b-4gy80csaam] { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }

.wcl-title span[b-4gy80csaam] { color: var(--mud-palette-text-secondary); font-weight: 600; }

.wcl-sub[b-4gy80csaam] { margin: 4px 0 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

.wcl-tools[b-4gy80csaam] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; max-width: 100%; }

.wcl-tools[b-4gy80csaam]  .wcl-search { flex: 1 1 220px; min-width: 160px; max-width: 300px; margin: 0; }

.wcl-tools[b-4gy80csaam]  .wcl-sort { flex: 0 0 150px; margin: 0; }

.wcl-empty[b-4gy80csaam] { padding: 18px 12px; text-align: center; font-size: .86rem; color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; }

/* ── Category screen ────────────────────────────────────────────────────────────────────────────── */
.wcl-catgrid[b-4gy80csaam] { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }

.wcl-cat[b-4gy80csaam] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.wcl-cat:hover[b-4gy80csaam] { box-shadow: 0 8px 22px rgba(0, 0, 0, .13); transform: translateY(-2px); border-color: var(--mud-palette-primary); }

.wcl-cat--off[b-4gy80csaam] { opacity: .55; }

.wcl-cat__img[b-4gy80csaam] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), color-mix(in srgb, var(--mud-palette-primary) 6%, transparent));
}

.wcl-cat__img img[b-4gy80csaam] { display: block; width: 100%; height: 100%; object-fit: cover; }

.wcl-cat__art[b-4gy80csaam] { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mud-palette-primary); opacity: .75; }

.wcl-cat__name[b-4gy80csaam] { font-size: .9rem; font-weight: 600; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }

.wcl-cat__foot[b-4gy80csaam] { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.wcl-cat__count[b-4gy80csaam] {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.wcl-cat__go[b-4gy80csaam] { display: inline-flex; align-items: center; gap: 2px; font-size: .76rem; font-weight: 600; color: var(--mud-palette-primary); }

.wcl-cat__go[b-4gy80csaam]  .mud-icon-root { font-size: 1rem; }

/* ── Gallery: category strip (the Album library's pattern; scrolls sideways, never widens the page) ── */
.wcl-strip[b-4gy80csaam] { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }

.wcl-chipcat[b-4gy80csaam] {
    flex: 0 0 128px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.wcl-chipcat:hover[b-4gy80csaam] { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

.wcl-chipcat--on[b-4gy80csaam] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.wcl-chipcat__img[b-4gy80csaam] {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), color-mix(in srgb, var(--mud-palette-primary) 6%, transparent));
}

.wcl-chipcat__img img[b-4gy80csaam] { display: block; width: 100%; height: 100%; object-fit: cover; }

.wcl-chipcat__name[b-4gy80csaam] { font-size: .8rem; font-weight: 600; line-height: 1.2; min-height: 2.4em; overflow-wrap: anywhere; }

.wcl-chipcat .wcl-cat__count[b-4gy80csaam] { align-self: flex-start; font-size: .68rem; }

.wcl-chipcat:focus-visible[b-4gy80csaam] { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── Gallery: navigation ────────────────────────────────────────────────────────────────────────── */
.wcl-crumbs[b-4gy80csaam] { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.wcl-back[b-4gy80csaam] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.wcl-back:hover[b-4gy80csaam] { border-color: var(--mud-palette-primary); }

.wcl-crumbs[b-4gy80csaam]  .wcl-jump { flex: 0 1 320px; min-width: 200px; margin: 0; }

/* ── Gallery + panel ────────────────────────────────────────────────────────────────────────────── */
.wcl-main[b-4gy80csaam] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

@container wcl (min-width: 1000px) {
    .wcl-main[b-4gy80csaam] { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
    .wcl-panel[b-4gy80csaam] { position: sticky; top: 12px; }
}

.wcl-grid[b-4gy80csaam] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* ── Template card ──────────────────────────────────────────────────────────────────────────────── */
.wcl-card[b-4gy80csaam] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.wcl-card:hover[b-4gy80csaam] { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); transform: translateY(-2px); }

.wcl-card--sel[b-4gy80csaam] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px var(--mud-palette-primary); }

.wcl-card--off[b-4gy80csaam] { opacity: .55; }

.wcl-thumb[b-4gy80csaam] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    text-align: left;
}

.wcl-thumb__img[b-4gy80csaam] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wcl-thumb__shade[b-4gy80csaam] { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }

.wcl-thumb__art[b-4gy80csaam] { position: absolute; inset: 0 0 26px; display: grid; place-items: center; opacity: .9; pointer-events: none; }

.wcl-thumb__tag[b-4gy80csaam] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wcl-thumb__bar[b-4gy80csaam] { position: absolute; left: 12px; bottom: 8px; width: 38px; height: 3px; border-radius: 3px; }

.wcl-badge[b-4gy80csaam] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wcl-badge--premium[b-4gy80csaam] { background: #f6c33a; color: #3a2a00; }

.wcl-badge--feat[b-4gy80csaam] { right: auto; left: 8px; background: rgba(255, 255, 255, .92); color: #333; text-transform: none; letter-spacing: 0; font-weight: 600; }

.wcl-badge--inline[b-4gy80csaam] { position: static; display: inline-block; }

.wcl-chips[b-4gy80csaam] { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }

.wcl-chip[b-4gy80csaam] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.wcl-chip[b-4gy80csaam]  .mud-icon-root { font-size: .85rem; }

.wcl-card__foot[b-4gy80csaam] { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1; }

.wcl-card__name[b-4gy80csaam] { font-size: .92rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wcl-card__sub[b-4gy80csaam] { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.wcl-card__actions[b-4gy80csaam] { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

.wcl-link[b-4gy80csaam] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    border-radius: 6px;
}

.wcl-link:hover[b-4gy80csaam] { color: var(--mud-palette-primary); }

/* ── Preview panel ──────────────────────────────────────────────────────────────────────────────── */
.wcl-panel[b-4gy80csaam] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.wcl-panel__head[b-4gy80csaam] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.wcl-panel__head h3[b-4gy80csaam] { margin: 0; font-size: 1rem; font-weight: 700; }

.wcl-hero[b-4gy80csaam] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    text-align: left;
}

.wcl-hero img[b-4gy80csaam] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wcl-hero__text[b-4gy80csaam] { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }

.wcl-hero__name[b-4gy80csaam] { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }

.wcl-hero__tag[b-4gy80csaam] { font-size: .82rem; opacity: .95; }

.wcl-facts[b-4gy80csaam] { margin: 12px 0; display: grid; gap: 6px; font-size: .8rem; }

.wcl-facts div[b-4gy80csaam] { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }

.wcl-facts dt[b-4gy80csaam] { color: var(--mud-palette-text-secondary); }

.wcl-facts dd[b-4gy80csaam] { margin: 0; overflow-wrap: anywhere; }

.wcl-gal-head[b-4gy80csaam] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.wcl-gal-head h4[b-4gy80csaam] { margin: 0; font-size: .92rem; font-weight: 700; }

.wcl-tiles[b-4gy80csaam] { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }

.wcl-tile[b-4gy80csaam] {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #1c1c1c;
}

.wcl-tile img[b-4gy80csaam] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wcl-more[b-4gy80csaam] { margin-top: 8px; font-size: .78rem; color: var(--mud-palette-text-secondary); text-align: center; }

/* ── Focus (keyboard) ───────────────────────────────────────────────────────────────────────────── */
.wcl-cat:focus-visible[b-4gy80csaam], .wcl-thumb:focus-visible[b-4gy80csaam], .wcl-hero:focus-visible[b-4gy80csaam], .wcl-tile:focus-visible[b-4gy80csaam], .wcl-link:focus-visible[b-4gy80csaam], .wcl-back:focus-visible[b-4gy80csaam] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Small screens: two category columns, a single column of template cards, touch-size controls, never a horizontal page scroll ── */
@container wcl (max-width: 640px) {
    .wcl-catgrid[b-4gy80csaam] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wcl-cat__name[b-4gy80csaam] { font-size: .84rem; }
    .wcl-grid[b-4gy80csaam] { grid-template-columns: minmax(0, 1fr); }
    .wcl-tools[b-4gy80csaam] { width: 100%; }
    .wcl-tools[b-4gy80csaam]  .wcl-search { max-width: none; flex: 1 1 100%; }
    .wcl-tools[b-4gy80csaam]  .wcl-sort { flex: 1 1 140px; }
    .wcl-crumbs[b-4gy80csaam]  .wcl-jump { flex: 1 1 100%; }
    .wcl-link[b-4gy80csaam], .wcl-back[b-4gy80csaam] { min-height: 44px; }
    .wcl-tiles[b-4gy80csaam] { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .wcl-card[b-4gy80csaam], .wcl-cat[b-4gy80csaam] { transition: none; }
    .wcl-card:hover[b-4gy80csaam], .wcl-cat:hover[b-4gy80csaam] { transform: none; }
}
/* /Components/Website/WebsitePreviewDialog.razor.rz.scp.css */
.wpd-toolbar[b-mii6pdflws] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
}

.wpd-pages[b-mii6pdflws] {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
}

.wpd-tab[b-mii6pdflws] {
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.wpd-tab--on[b-mii6pdflws] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Language · device · width: three small segmented groups. Real toggle buttons with aria-pressed; the active one is also
   bold and filled, so the state never relies on colour alone. */
.wpd-controls[b-mii6pdflws] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.wpd-seg[b-mii6pdflws] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    overflow: hidden;
}

.wpd-seg__btn[b-mii6pdflws] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 32px;
    padding: .2rem .7rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.wpd-seg__btn + .wpd-seg__btn[b-mii6pdflws] {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.wpd-seg__btn--on[b-mii6pdflws] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.wpd-seg__btn:focus-visible[b-mii6pdflws] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

@media (max-width: 599.98px) {
    .wpd-seg__label[b-mii6pdflws] {
        display: none;
    }
}

/* The stage: the preview viewport sits centred in it. Its size is DEFINITE so navr-website-preview.js can make the iframe
   exactly the selected width and as tall as the stage; the website scrolls inside the iframe, as on the device. */
.wpd-stage[b-mii6pdflws] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(100dvh - 15rem);
    min-height: 420px;
    padding: 12px;
    overflow: auto;
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
}

.wpd-viewport[b-mii6pdflws] {
    position: relative;
    flex: none;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default), 0 10px 28px rgba(0, 0, 0, .14);
}

.wpd-stage[data-device="mobile"] .wpd-viewport[b-mii6pdflws] {
    border-radius: 14px;
}

.wpd-frame[b-mii6pdflws] {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    border: 0;
    border-radius: inherit;
    background: #fff;
    transform-origin: 0 0;
}

.wpd-meta[b-mii6pdflws] {
    margin-right: auto;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Website/WebsiteThemePicker.razor.rz.scp.css */
/* Theme selection — follows the Admin's own MudBlazor palette; the cards themselves are painted with each theme. */
.wtp[b-6dvxw3jd9d] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    padding: 18px;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.wtp__head[b-6dvxw3jd9d] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wtp__title[b-6dvxw3jd9d] { margin: 0; font-size: 1.15rem; font-weight: 700; }
.wtp__lede[b-6dvxw3jd9d] { margin: 4px 0 0; opacity: .75; font-size: .9rem; max-width: 46rem; }

.wtp__current[b-6dvxw3jd9d] {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    font-size: .9rem;
}

.wtp__current-label[b-6dvxw3jd9d] { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }

.wtp__filters[b-6dvxw3jd9d] { display: flex; flex-wrap: wrap; gap: 6px; }

.wtp__chip[b-6dvxw3jd9d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.wtp__chip span[b-6dvxw3jd9d] { opacity: .6; font-size: .75rem; }
.wtp__chip.is-on[b-6dvxw3jd9d] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.wtp__chip.is-on span[b-6dvxw3jd9d] { opacity: .85; }
.wtp__chip:focus-visible[b-6dvxw3jd9d], .wtp-card:focus-visible[b-6dvxw3jd9d] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.wtp__grid[b-6dvxw3jd9d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding: 2px;
}

.wtp-card[b-6dvxw3jd9d] {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.wtp-card:hover:not(:disabled)[b-6dvxw3jd9d] { border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); transform: translateY(-1px); }
.wtp-card.is-selected[b-6dvxw3jd9d] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); }
.wtp-card:disabled[b-6dvxw3jd9d] { cursor: not-allowed; opacity: .6; }

.wtp-card__shot[b-6dvxw3jd9d] {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 6px;
    height: 104px;
    padding: 6px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
}

.wtp-card__shot--own[b-6dvxw3jd9d] {
    place-items: center;
    grid-template-rows: 1fr;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent) 0 10px, transparent 10px 20px);
    color: var(--mud-palette-primary);
}

.wtp-card__bar[b-6dvxw3jd9d] { display: flex; align-items: center; gap: 5px; height: 16px; padding: 0 5px; border-radius: 4px; border-bottom: 1px solid; }
.wtp-card__logo[b-6dvxw3jd9d] { width: 10px; height: 10px; border-radius: 3px; }
.wtp-card__nav[b-6dvxw3jd9d] { flex: 1; height: 3px; border-radius: 2px; opacity: .55; }
.wtp-card__btn[b-6dvxw3jd9d] { width: 18px; height: 8px; border-radius: 3px; }
.wtp-card__hero[b-6dvxw3jd9d] { display: grid; align-content: center; gap: 4px; padding: 6px 7px; border-radius: 5px; }
.wtp-card__h[b-6dvxw3jd9d] { width: 72%; height: 6px; border-radius: 2px; }
.wtp-card__s[b-6dvxw3jd9d] { width: 52%; height: 3px; border-radius: 2px; opacity: .7; }
.wtp-card__actions[b-6dvxw3jd9d] { display: flex; gap: 4px; margin-top: 2px; }
.wtp-card__cta[b-6dvxw3jd9d] { width: 26px; height: 9px; border-radius: 3px; }
.wtp-card__ghost[b-6dvxw3jd9d] { width: 22px; height: 9px; border-radius: 3px; border: 1.5px solid; }
.wtp-card__swatches[b-6dvxw3jd9d] { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 3px; }
.wtp-card__swatches i[b-6dvxw3jd9d] { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }

.wtp-card__meta[b-6dvxw3jd9d] { display: grid; gap: 1px; min-width: 0; }
.wtp-card__name[b-6dvxw3jd9d] { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtp-card__name b[b-6dvxw3jd9d] { opacity: .55; font-weight: 600; }
.wtp-card__note[b-6dvxw3jd9d] { font-size: .74rem; opacity: .65; }

.wtp-card__tick[b-6dvxw3jd9d] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.wtp__visitors[b-6dvxw3jd9d] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.wtp__visitors-note[b-6dvxw3jd9d] { font-size: .82rem; opacity: .8; }
.wtp__visitors-note a[b-6dvxw3jd9d] { color: var(--mud-palette-primary); font-weight: 600; }

.wtp__foot[b-6dvxw3jd9d] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wtp__hint[b-6dvxw3jd9d] { margin-right: auto; font-size: .82rem; opacity: .7; }

@media (max-width: 560px) {
    .wtp[b-6dvxw3jd9d] { padding: 14px; }
    .wtp__grid[b-6dvxw3jd9d] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
    .wtp-card__shot[b-6dvxw3jd9d] { height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .wtp-card[b-6dvxw3jd9d] { transition: none; }
    .wtp-card:hover:not(:disabled)[b-6dvxw3jd9d] { transform: none; }
}
/* /Dashboard/DashboardContentOverview.razor.rz.scp.css */
/* Content Overview — one pastel row per content type (shared tone palette, wwwroot/app.css) with a stacked status bar.
   Rows sit side by side when the Dashboard panel around it (a size container) is wide enough, stacked otherwise. */

.navr-dco[b-65l3mzwl3y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@container (min-width: 36rem) {
    .navr-dco[b-65l3mzwl3y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.navr-dco__row[b-65l3mzwl3y] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 10px;
    background: var(--navr-tone-bg);
}

.navr-dco__head[b-65l3mzwl3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
}

.navr-dco__icon[b-65l3mzwl3y] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-dco__name[b-65l3mzwl3y] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dco__total[b-65l3mzwl3y] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.navr-dco__bar[b-65l3mzwl3y] {
    display: flex;
    height: 0.625rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-surface);
}

.navr-dco__seg[b-65l3mzwl3y] {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 3px;
}

.navr-dco__seg--published[b-65l3mzwl3y] { background: var(--mud-palette-success); }
.navr-dco__seg--draft[b-65l3mzwl3y] { background: color-mix(in srgb, var(--mud-palette-text-secondary) 60%, transparent); }
.navr-dco__seg--scheduled[b-65l3mzwl3y] { background: var(--mud-palette-info); }
.navr-dco__seg--archived[b-65l3mzwl3y] { background: var(--mud-palette-warning); }

.navr-dco__legend[b-65l3mzwl3y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dco__legend li[b-65l3mzwl3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.navr-dco__legend strong[b-65l3mzwl3y] {
    color: var(--mud-palette-text-primary);
}

.navr-dco__swatch[b-65l3mzwl3y] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
}

.navr-dco__empty[b-65l3mzwl3y] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dco__sr[b-65l3mzwl3y] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Dashboard/DashboardQuickActions.razor.rz.scp.css */
/* Quick Actions — pastel link tiles in the shared tone palette (wwwroot/app.css). Two per row where there is room,
   one per row on narrow panels; the panel's own width decides, never the viewport. */

.navr-dq[b-6x2dxtuj8q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.625rem;
}

.navr-dq__action[b-6x2dxtuj8q] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    height: 100%;
    padding: 0.5rem 0.625rem 0.5rem 0.75rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 10px;
    background: var(--navr-tone-bg);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-dq__action:hover[b-6x2dxtuj8q] {
    background: var(--navr-tone-bg-hover);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.navr-dq__action:focus-visible[b-6x2dxtuj8q] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-dq__icon[b-6x2dxtuj8q] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-dq__label[b-6x2dxtuj8q] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.navr-dq__action[b-6x2dxtuj8q]  .navr-dq__go {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.navr-dq__none[b-6x2dxtuj8q] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-dq__action[b-6x2dxtuj8q] {
        transition: none;
    }
}
/* /Dashboard/DashboardRecentContent.razor.rz.scp.css */
/* Recent Pages / Articles — compact rows on the panel's soft tone; titles wrap instead of widening the panel. */

.navr-dr[b-0jomi84m8f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.navr-dr__item[b-0jomi84m8f] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-dr__item:hover[b-0jomi84m8f] {
    border-color: var(--navr-tone-line);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

.navr-dr__item:focus-visible[b-0jomi84m8f],
.navr-dr__all:focus-visible[b-0jomi84m8f] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-dr__text[b-0jomi84m8f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-dr__title[b-0jomi84m8f] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.navr-dr__meta[b-0jomi84m8f] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dr__status[b-0jomi84m8f] {
    flex: 0 0 auto;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--navr-dr-status-ink);
    background: color-mix(in srgb, var(--navr-dr-status) 14%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--navr-dr-status) 35%, transparent);
    --navr-dr-status-ink: color-mix(in srgb, var(--navr-dr-status) 62%, var(--mud-palette-text-primary));
}

.navr-dr__status--published[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-success); }
.navr-dr__status--draft[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-text-secondary); }
.navr-dr__status--scheduled[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-info); }
.navr-dr__status--archived[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-warning); }

.navr-dr__all[b-0jomi84m8f] {
    align-self: flex-end;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navr-tone-ink);
    text-decoration: none;
}

.navr-dr__all:hover[b-0jomi84m8f] {
    text-decoration: underline;
}

.navr-dr__note[b-0jomi84m8f] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-dr__item[b-0jomi84m8f] {
        transition: none;
    }
}
/* /Dashboard/StorageDonut.razor.rz.scp.css */
/* Storage donut — scoped. MudBlazor palette variables only (follows light / dark Admin theme). */

.navr-donut[b-xb1c2bp5o5] {
    position: relative;
    width: 100%;
    max-width: 13rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.navr-donut__svg[b-xb1c2bp5o5] {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.navr-donut__track[b-xb1c2bp5o5],
.navr-donut__segment[b-xb1c2bp5o5] {
    fill: none;
    stroke-width: 5;
}

.navr-donut__track[b-xb1c2bp5o5] {
    stroke: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
}

.navr-donut__segment[b-xb1c2bp5o5] {
    transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease;
}

.navr-donut__center[b-xb1c2bp5o5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.navr-donut__value[b-xb1c2bp5o5] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.navr-donut__label[b-xb1c2bp5o5] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-donut__segment[b-xb1c2bp5o5] {
        transition: none;
    }
}