:root {
    --brand-font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --brand-primary: #1d4ed8;
    --brand-secondary: #111827;
    --brand-sidebar: #111827;
    --brand-chrome: #111827;
    --brand-on-chrome: #ffffff;
    --brand-accent: #0f766e;
    --brand-kicker: #0f766e;
    --brand-accent-2: #155e75;
    --brand-accent-muted: #ccfbf1;
    --brand-surface: #ffffff;
    --brand-surface-elevated: #ffffff;
    --brand-elevated-opacity: 100;
    --brand-elevated-fill: color-mix(
        in srgb,
        var(--brand-surface-elevated) calc(var(--brand-elevated-opacity) * 1%),
        transparent);
    --brand-text: #111827;
    --brand-muted: #4b5563;
    --brand-action: #1d4ed8;
    --brand-on-action: #ffffff;
    /* Page titles, section headings, emphasis, and active nav share secondary. */
    --brand-heading: var(--brand-secondary);
    --brand-emphasis: var(--brand-secondary);
    --border: #e2e8f0;
    --scrollbar-size: 0.4rem;
    --scrollbar-thumb: color-mix(in srgb, var(--brand-muted) 0%, transparent);
    --scrollbar-thumb-visible: color-mix(in srgb, var(--brand-muted) 38%, transparent);
    --scrollbar-thumb-active: color-mix(in srgb, var(--brand-muted) 58%, var(--brand-action) 10%);

    /* Keep Bootstrap utilities (text-muted, form-text, headings) on brand tokens. */
    --bs-body-color: var(--brand-text);
    --bs-body-bg: var(--brand-surface);
    --bs-secondary-color: var(--brand-muted);
    --bs-tertiary-color: var(--brand-muted);
    --bs-heading-color: var(--brand-heading);
    --bs-border-color: var(--border);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-primary) 82%, #000 18%);
    --bs-table-bg: transparent;
    --bs-table-color: var(--brand-text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: color-mix(in srgb, var(--brand-surface) 40%, var(--brand-elevated-fill));
    --bs-table-striped-color: var(--brand-text);
    --bs-table-hover-bg: color-mix(in srgb, var(--brand-action) 10%, var(--brand-elevated-fill));
    --bs-table-hover-color: var(--brand-text);
    --bs-table-active-bg: color-mix(in srgb, var(--brand-action) 14%, var(--brand-elevated-fill));
    --bs-table-active-color: var(--brand-text);
}

html, body {
    font-family: var(--brand-font);
    color: var(--brand-text);
    background: var(--brand-surface);
}

/* Clip on html only. overflow-x: clip on body as well makes body a
   scrollport, so position:sticky chrome (CMS sidebar/header) scrolls away. */
html {
    overflow-x: clip;
}

/* Cookie bar is position:fixed. Do not add body padding when it appears —
   that shifted footer / #main-content (homepage CLS). */

/* Overlay-style bars: no track, hidden until the scrolling surface is hovered. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

*:hover,
*:focus-within {
    scrollbar-color: var(--scrollbar-thumb-visible) transparent;
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-button {
    background: transparent;
    border: 0;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-visible);
}

*::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-active);
}

/* Helper / muted copy — driven by the CMS "Muted text" color. */
.text-muted,
.form-text {
    color: var(--brand-muted) !important;
}

.form-label {
    color: var(--brand-text);
}

/* Keep required fields obvious without changing the wording of optional labels. */
label.form-label:has(+ input[required])::after,
label.form-label:has(+ select[required])::after,
label.form-label:has(+ textarea[required])::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 700;
}

label.form-label:has(+ .form-control[aria-required="true"])::after,
label.form-label:has(+ .form-select[aria-required="true"])::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 700;
}

code {
    color: var(--brand-heading);
    background: color-mix(in srgb, var(--brand-surface) 70%, var(--brand-surface-elevated));
    border-radius: 0.3rem;
    padding: 0.1rem 0.35rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--brand-heading);
}

strong, b, em,
.fw-bold, .fw-semibold {
    color: inherit;
}

/* Emphasis that should pick up brand color when used as section labels */
.eyebrow,
.store-kicker,
.shop-kicker,
.gallery-kicker,
.admin-eyebrow {
    color: var(--brand-emphasis);
}

a {
    color: var(--brand-action);
}

a:hover {
    color: color-mix(in srgb, var(--brand-action) 82%, var(--brand-heading) 18%);
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    color: var(--brand-text);
    background-color: color-mix(in srgb, var(--brand-surface-elevated) 88%, var(--brand-surface) 12%);
    border-color: var(--border);
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--brand-muted) 80%, var(--brand-text) 20%);
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--brand-action) 55%, var(--border));
}

/* Header / footer nav links (NavLink child anchors) — secondary brand color. */
.public-header a.public-nav-link,
.public-footer a.public-nav-link,
a.public-nav-link {
    color: var(--brand-secondary) !important;
    text-decoration: none;
}

.public-header a.public-nav-link:hover,
.public-footer a.public-nav-link:hover,
a.public-nav-link:hover {
    color: color-mix(in srgb, var(--brand-secondary) 88%, #fff 12%) !important;
}

.public-header a.public-nav-link.active,
a.public-nav-link.active {
    color: var(--brand-chrome) !important;
}

.btn-outline-secondary {
    color: var(--brand-heading);
    border-color: color-mix(in srgb, var(--brand-heading) 32%, var(--border));
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--brand-on-action);
    background: color-mix(in srgb, var(--brand-action) 88%, var(--brand-heading) 12%);
    border-color: var(--brand-action);
}

.btn-link {
    color: var(--brand-secondary) !important;
}

.btn-link:hover,
.btn-link:focus {
    color: color-mix(in srgb, var(--brand-secondary) 82%, #000 18%) !important;
}

/* Always keep brand buttons readable when CMS primary is too close to the surface. */
.btn-brand {
    --btn-brand-fill: var(--brand-action);
    color: var(--brand-on-action) !important;
    background: var(--btn-brand-fill);
    border-color: color-mix(in srgb, var(--btn-brand-fill) 88%, #000 12%);
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.16);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active,
.btn-brand.active {
    color: var(--brand-on-action) !important;
    background: color-mix(in srgb, var(--btn-brand-fill) 88%, var(--brand-heading) 12%);
    border-color: color-mix(in srgb, var(--btn-brand-fill) 80%, #000 20%);
    filter: none;
}

.btn-brand:disabled,
.btn-brand.disabled {
    color: var(--brand-on-action) !important;
    background: color-mix(in srgb, var(--btn-brand-fill) 55%, #94a3b8 45%);
    border-color: transparent;
    opacity: 0.85;
    text-shadow: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 45%, white);
}

.top-tagline {
    color: var(--brand-muted);
    font-size: 0.95rem;
}

.hero {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-primary) 14%, var(--brand-surface-elevated)),
        color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface-elevated)) 55%);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.hero h1 {
    color: var(--brand-heading);
    margin-bottom: 0.5rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-emphasis);
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 1.15rem;
    color: var(--brand-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.info-card,
.panel {
    background: var(--brand-elevated-fill);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Public catalog / content cards share the branding elevated fill (opacity slider).
   !important beats leftover isolated CSS that still paints a solid elevated hex. */
.store-product-card,
.store-info-card,
.store-trust-item,
.store-about-inner,
.shop-product-card,
.gallery-item-card,
.blog-item-card,
.about-info-card,
.about-trust-item,
.contact-details-band,
.cart-line,
.shop-detail-grid:not(.is-embedded),
.gallery-detail-grid:not(.is-embedded),
.blog-detail-grid:not(.is-embedded) {
    background: var(--brand-elevated-fill) !important;
}

/* Header tools are chrome, not cards. Beat any leftover elevated-fill rule. */
.public-user-menu,
.public-cart-menu {
    background: transparent !important;
}

.info-card h2,
.panel h2 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

/* One glass layer only. Painting fill on .panel AND .table-responsive AND
   every td stacks opacities (50% × 50% × 50% looks solid). Keep grids
   transparent so the parent panel's slider fill shows through. */
.table-responsive,
.table,
.table-responsive :is(table, thead, tbody, tfoot, tr, th, td),
.table :is(thead, tbody, tfoot, tr),
.table > :not(caption) > * > *,
.table thead th,
.table tbody td,
.table tfoot td {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--brand-action) 12%, transparent) !important;
    --bs-table-active-bg: color-mix(in srgb, var(--brand-action) 16%, transparent) !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-color: var(--brand-text);
    --bs-table-border-color: var(--border);
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.table {
    color: var(--brand-text);
}

.table thead th {
    color: var(--brand-heading);
}

.table-hover > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--brand-action) 12%, transparent) !important;
    background-color: color-mix(in srgb, var(--brand-action) 12%, transparent) !important;
}

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border: 1px solid transparent;
    /* Dark text on a soft brand wash — stays readable with light brand palettes. */
    color: #0f172a;
    background: color-mix(in srgb, var(--brand-primary) 14%, #ffffff 86%);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, #cbd5e1 72%);
}

.status-pill.on {
    color: #fff;
    background: color-mix(in srgb, var(--brand-primary) 72%, #0f172a 28%);
    border-color: color-mix(in srgb, var(--brand-primary) 60%, #0f172a 40%);
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.18);
}

.status-pill.off {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
    text-shadow: none;
}

.status-pill.scheduled {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
    text-shadow: none;
}

.page-header {
    margin-bottom: 1.25rem;
}

.page-intro {
    max-width: 42rem;
    margin-bottom: 0;
}

.card-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 0.35rem;
}

.card-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

.content-stack {
    display: grid;
    gap: 1rem;
}

.status-page {
    max-width: 42rem;
    margin: 3rem auto;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
}

.status-page-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: var(--brand-action);
    background: color-mix(in srgb, var(--brand-action) 12%, transparent);
    border-radius: 1rem;
    font-size: 1.75rem;
}

.status-page-icon-error {
    color: #b42318;
    background: color-mix(in srgb, #dc3545 12%, transparent);
}

.status-page h1 {
    margin-bottom: 0.75rem;
}

.toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1300;
    display: grid;
    gap: 0.75rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    color: var(--brand-text);
    background: var(--brand-elevated-fill);
    border: 1px solid var(--border);
    border-left: 0.3rem solid var(--brand-action);
    border-radius: 0.7rem;
    box-shadow: 0 0.6rem 1.5rem rgba(15, 23, 42, 0.16);
    pointer-events: auto;
}

.toast-success { border-left-color: #198754; }
.toast-error { border-left-color: #dc3545; }
.toast-warning { border-left-color: #d39e00; }
.toast-info { border-left-color: var(--brand-action); }

.toast-icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.toast-success .toast-icon { color: #198754; }
.toast-error .toast-icon { color: #dc3545; }
.toast-warning .toast-icon { color: #a66b00; }
.toast-info .toast-icon { color: var(--brand-action); }

.toast-message {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.toast-dismiss {
    flex: 0 0 auto;
    margin: -0.2rem -0.2rem 0 0;
    padding: 0 0.25rem;
    color: var(--brand-muted);
    font-size: 1.35rem;
    line-height: 1;
    background: transparent;
    border: 0;
}

.toast-dismiss:hover,
.toast-dismiss:focus {
    color: var(--brand-text);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.55rem;
}

.feature-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
}

.feature-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.cta-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.contact-form .validation-message {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.contact-message {
    resize: vertical;
    min-height: 8rem;
}

.contact-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.45rem;
}

.contact-links a {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-heading);
}

.contact-links a:hover {
    text-decoration: underline;
}

.contact-aside {
    height: 100%;
}

.admin-shell {
    display: grid;
    gap: 1.25rem;
}

.admin-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    background: var(--brand-elevated-fill);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.25rem;
}

.admin-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 0.25rem;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.admin-nav-link {
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    color: var(--brand-text);
    background: var(--brand-surface);
}

.admin-nav-link.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.brand-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--border);
}

.brand-preview-logo {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    border-radius: 0.35rem;
    background: #fff;
}

.brand-preview-logo.is-lockup {
    width: auto;
    height: 2.25rem;
    max-width: 12rem;
    border-radius: 0;
}

.brand-media-preview {
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--brand-surface);
    overflow: hidden;
}

.brand-media-preview-logo {
    min-height: 7rem;
    padding: 0.75rem;
}

.brand-media-preview-logo img {
    max-width: 100%;
    max-height: 5.5rem;
    object-fit: contain;
}

.brand-media-preview-favicon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
}

.brand-media-preview-favicon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.brand-preview-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.brand-preview-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}

.brand-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.preview-chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.preview-chip.primary {
    background: var(--brand-primary);
    color: #fff;
}

.preview-chip.accent {
    background: var(--brand-accent);
    color: #fff;
}

.preview-chip.accent-2 {
    background: var(--brand-accent-2);
    color: #fff;
}

.color-picker-field {
    display: grid;
    gap: 0.25rem;
}

.color-picker-help {
    color: var(--brand-muted);
    margin-top: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.color-picker-controls {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem;
    align-items: center;
}

.color-picker-swatch {
    width: 3rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
}

.color-picker-swatch::-webkit-color-swatch-wrapper {
    padding: 0.2rem;
}

.color-picker-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 0.35rem;
}

.color-picker-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.card-opacity-control {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.card-opacity-label,
.card-opacity-value {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-muted);
    line-height: 1;
}

.card-opacity-value {
    font-variant-numeric: tabular-nums;
    min-width: 2.25rem;
    text-align: right;
}

.card-opacity-range {
    height: 0.85rem;
    padding: 0;
    margin: 0;
}

.profile-avatar-panel {
    text-align: center;
}

.profile-avatar-preview {
    width: 140px;
    height: 140px;
    margin: 0.5rem auto 1rem;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid var(--brand-accent-muted);
    background: var(--brand-surface);
    display: grid;
    place-items: center;
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}

.profile-avatar-fallback {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.avatar-editor-shell {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    margin: 0.25rem auto 0.85rem;
}

.avatar-editor-host,
.avatar-editor {
    width: 180px;
    height: 180px;
    position: relative;
    outline: none;
    user-select: none;
    touch-action: none;
}

/* Host grows when JS injects zoom controls under the circle */
.avatar-editor.avatar-editor {
    width: 180px;
    height: auto;
    min-height: 180px;
}

.avatar-editor-stage {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid var(--brand-accent-muted);
    background:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #f8fafc;
    cursor: grab;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    margin: 0 auto;
}

.avatar-editor.is-dragging .avatar-editor-stage {
    cursor: grabbing;
}

.avatar-editor-image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    pointer-events: none;
    will-change: transform, width, height;
    transform-origin: center center;
}

.avatar-editor-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-primary) 40%, white);
    pointer-events: none;
}

.avatar-editor-hint {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-muted);
    text-align: center;
}

.avatar-editor-controls {
    width: 180px;
    margin: 0.55rem auto 0;
    text-align: left;
}

.avatar-editor-controls .form-label {
    color: var(--brand-muted);
}

.home-bg-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--brand-surface);
    display: grid;
    place-items: center;
}

.home-bg-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-bg-preview-empty {
    display: grid;
    gap: 0.25rem;
    text-align: center;
    color: var(--brand-muted);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 1rem;
}

.home-bg-preview-empty span {
    font-size: 0.78rem;
    font-weight: 500;
}

.module-group {
    margin-top: 1.25rem;
}

.module-group:first-of-type {
    margin-top: 0.75rem;
}

.module-group-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-muted);
    margin-bottom: 0.65rem;
}

.module-list {
    display: grid;
    gap: 0.75rem;
}

.module-list h4 {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.module-unavailable {
    max-width: 40rem;
}

.module-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.module-row:last-child {
    border-bottom: 0;
}

.module-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.login-panel {
    max-width: 28rem;
    margin: 2rem auto;
}

.login-form {
    margin-top: 1.25rem;
}

.admin-nav-button {
    border: 1px solid var(--border);
    background: var(--brand-surface);
    cursor: pointer;
    font: inherit;
}

.role-checklist {
    display: grid;
    gap: 0.65rem;
}

.role-checklist .form-check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--brand-surface);
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.75rem 1.25rem;
    background: rgba(15, 23, 42, 0.62);
    overflow: auto;
}

.admin-modal {
    width: min(100%, 32rem);
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    color: var(--brand-text);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
    background: var(--brand-surface-elevated, var(--brand-surface));
}

.admin-modal-wide {
    width: min(100%, 56rem);
}

/* Public blog posts render inside .public-content (1100px). A % max-width
   never grew past that column; pin the overlay to the viewport instead. */
.admin-modal-backdrop-full {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    inset: 0 auto auto 50%;
    margin-left: -50vw;
    box-sizing: border-box;
}

.admin-modal-blog {
    width: min(94vw, 92rem);
    max-width: min(94vw, 92rem);
}

.admin-modal-catalog {
    width: min(100%, 72rem);
    max-height: min(86dvh, calc(100dvh - 5rem));
}

@media (min-width: 1200px) {
    .admin-modal-catalog {
        width: min(94vw, 92rem);
        max-height: min(84dvh, calc(100dvh - 5.5rem));
    }
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    isolation: isolate;
    background: var(--brand-surface-elevated, var(--brand-surface));
}

.admin-modal-body {
    padding: 1.25rem;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 0;
    isolation: isolate;
}

@media (max-width: 640.98px) {
    .admin-modal-backdrop {
        place-items: end center;
        padding: 0;
    }

    .admin-modal,
    .admin-modal-wide,
    .admin-modal-blog,
    .admin-modal-catalog {
        width: 100%;
        max-height: 88dvh;
        border-radius: 1rem 1rem 0 0;
    }
}


.brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 0.35rem;
    background: transparent;
    display: block;
    flex-shrink: 0;
}

.brand-logo.is-lockup {
    width: auto;
    height: 2.55rem;
    max-width: min(14rem, 100%);
    border-radius: 0;
}

.brand-lockup.is-lockup {
    text-decoration: none;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background-color: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}