/* Shared panel components. Palette overrides are loaded after this file.
   Artwork and semantic status colors are independent of the shared branded palette. */
:root {
    --panel-font: "Inter";
    --panel-paper: #f8fafc;
    --panel-inset: #f4f4f5;
    --panel-surface: #ffffff;
    --panel-raised: #fafafa;
    --panel-hover: #faf5ff;
    --panel-selected: #f4f0ff;
    --panel-ink: #18181b;
    --panel-muted: #71717a;
    --panel-border-rgb: 24,24,27;
    --panel-primary: #8b5cf6;
    --panel-primary-hover: #7c3aed;
    --panel-primary-strong: #6d28d9;
    --panel-primary-rgb: 139,92,246;
    --panel-primary-channels: 139 92 246;
    --panel-link: #7c3aed;
    --panel-link-rgb: 139,92,246;
    --panel-on-primary: #ffffff;
    --panel-artwork-mat: #ffffff;
}
html.dark {
    --panel-paper: #08080b;
    --panel-inset: #0d0d10;
    --panel-surface: #111116;
    --panel-raised: #18181f;
    --panel-hover: #15151a;
    --panel-selected: #24242b;
    --panel-ink: #f4f4f5;
    --panel-muted: #a1a1aa;
    --panel-border-rgb: 255,255,255;
    --panel-link: #c4b5fd;
    --panel-link-rgb: 196,181,253;
}

/* All native menus retain Filament's semantic item colors and viewport positioning. */
.fi-dropdown-panel {
    width: calc(100vw - 2rem);
    overscroll-behavior: contain;
}
.fi-dropdown-list-item-label { white-space: normal; text-align: start; }
.fi-dropdown-list-item-icon { flex-shrink: 0; }

/* Shared TagsInput: selected chips stay in the field, suggestions escape clipped modals. */
.panel-tags-input { width: 100%; }
.panel-tags-input__entry { display: flex; align-items: center; }
.panel-tags-input__entry .fi-input { min-width: 0; }
html body .fi-fo-tags-input .panel-tags-input__entry .fi-input {
    background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
}
.panel-tags-input__toggle {
    display: grid; flex: none; place-items: center;
    width: 2.5rem; height: 2.5rem; margin-inline-end: .25rem;
    color: var(--panel-muted); border-radius: .5rem;
}
.panel-tags-input__toggle:hover:not(:disabled) { color: var(--panel-link); background: var(--panel-hover); }
.panel-tags-input__toggle:focus-visible { outline: 2px solid var(--panel-primary); outline-offset: -3px; }
.panel-tags-input__toggle:disabled { opacity: .5; cursor: not-allowed; }
.panel-tags-input__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel-tags-suggestions {
    position: fixed; z-index: 100; box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain;
    padding: .375rem; border: 1px solid rgba(var(--panel-border-rgb), .14);
    border-radius: .625rem; color: var(--panel-ink); background: var(--panel-surface);
    box-shadow: 0 8px 24px rgba(var(--panel-border-rgb), .14);
    font-family: var(--panel-font), ui-sans-serif, system-ui, sans-serif;
}
.panel-tags-suggestions__option {
    display: flex; gap: .5rem; align-items: center;
    min-height: 2.5rem; padding: .5rem .625rem;
    border-radius: .375rem; font-size: .875rem; line-height: 1.5;
    overflow-wrap: anywhere; cursor: pointer;
}
.panel-tags-suggestions__option svg { flex: none; color: var(--panel-muted); }
.panel-tags-suggestions__option[aria-selected="true"] { color: var(--panel-link); background: var(--panel-selected); }
.panel-tags-suggestions__option[aria-selected="true"] svg { color: inherit; }
.panel-tags-suggestions__empty { padding: .5rem .625rem; color: var(--panel-muted); font-size: .8125rem; }

/* Native input wrappers and table toolbars are separate Filament surfaces. */
html:not(.dark) .fi-input-wrp, html.dark .fi-input-wrp,
html:not(.dark) .fi-ta-header-toolbar, html.dark .fi-ta-header-toolbar {
    background-color: var(--panel-surface) !important;
}
html:not(.dark) .fi-ta-header-toolbar, html.dark .fi-ta-header-toolbar {
    border-color: rgba(var(--panel-border-rgb),.08) !important;
}

/* ── Base font ──────────────────────────────────────────────────────── */
.fi-body,
.fi-sidebar,
.fi-topbar,
.fi-modal,
input, select, textarea, button {
    font-family: var(--panel-font), ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Root background – deeper than Zinc-900 default ─────────────────── */
.fi-layout,
.fi-main-ctn {
    background-color: var(--panel-paper) !important;
}

/* ── Page padding (with full-width content) ─────────────────────────── */
.fi-main {
    padding-inline: 2rem !important;
    max-width: 100% !important;
}
@media (min-width: 1280px) {
    .fi-main {
        padding-inline: 2.5rem !important;
    }
}
@media (min-width: 1920px) {
    .fi-main {
        padding-inline: 4rem !important;
    }
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.fi-sidebar {
    background-color: var(--panel-inset) !important;
    border-right: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
}

.fi-sidebar-header {
    background-color: var(--panel-inset) !important;
    border-bottom: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
    padding: 1.125rem 1rem 1rem !important;
}

/* Brand text */
.fi-logo {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.125rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    font-size: 0.98rem !important;
    line-height: 1.05 !important;
    color: var(--panel-ink) !important;
}
.fi-logo span,
.fi-sidebar-header span {
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    font-size: 0.98rem !important;
    line-height: 1.05 !important;
    color: var(--panel-ink) !important;
}
.fi-logo::after,
.fi-logo span::after,
.fi-sidebar-header .fi-logo span::after {
    content: "Mockup Generator" !important;
    display: block !important;
    font-size: 0.625rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--panel-link) !important;
}

/* Bigger, centred brand on the login / simple pages */
.fi-simple-page .fi-logo {
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    font-size: 1.85rem !important;
    line-height: 1 !important;
    text-align: center !important;
    margin-bottom: 0.25rem !important;
}
.fi-simple-page .fi-logo span {
    font-size: 1.85rem !important;
    line-height: 1 !important;
}
.fi-simple-page .fi-logo::after,
.fi-simple-page .fi-logo span::after {
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    margin-top: 0.15rem !important;
}
.fi-simple-page .fi-simple-main-ctn {
    padding-top: 2rem !important;
}

/* Nav group label */
.fi-sidebar-group-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--panel-muted) !important;
}

/* Nav item */
.fi-sidebar-item-button {
    border-radius: 0.5rem !important;
    margin-inline: 0.375rem !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

.fi-sidebar-item-button:hover:not(.fi-active) {
    background-color: rgba(255,255,255,0.04) !important;
}

/* Active nav item – violet tint */
.fi-sidebar-item-button.fi-active {
    background-color: rgba(var(--panel-primary-rgb),0.12) !important;
}
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label {
    color: var(--panel-link) !important;
}
.fi-sidebar-item-button.fi-active svg {
    color: var(--panel-link) !important;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.fi-topbar {
    background-color: var(--panel-inset) !important;
    border-bottom: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
    /* No backdrop-filter here: it makes the bar the containing block of every position:fixed child, and the notifications slide-over
       lives inside the bar, so its backdrop was cut to the height of the bar. The background above is opaque anyway. */
    backdrop-filter: none !important;
}

/* ── Page heading ────────────────────────────────────────────────────── */
.fi-header-heading {
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--panel-ink) !important;
}
.fi-breadcrumbs-item-label {
    letter-spacing: -0.01em !important;
}

/* ── Stats overview widget ───────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.06) !important;
    border-radius: 0.875rem !important;
    transition: border-color 0.2s ease !important;
}
.fi-wi-stats-overview-stat:hover {
    border-color: rgba(var(--panel-primary-rgb),0.25) !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--panel-muted) !important;
}
.fi-wi-stats-overview-stat-value {
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    font-size: 1.875rem !important;
}

/* ── Section / Card ──────────────────────────────────────────────────── */
.fi-section {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.06) !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
.fi-section-header {
    border-bottom: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
}
.fi-section-header-heading {
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}

/* Catalog top navigation */
.catalog-nav {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    border-radius: 1rem;
    border: 1px solid rgba(var(--panel-border-rgb),0.08);
    background: var(--panel-surface);
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* A menu of eight or more tabs is set tighter so it fits a laptop screen whole; when it still does not, the edge with more behind
   it fades out (the fades sit in the wrapper, so the nav keeps its own border and shadow). */
.catalog-nav-wrap { position: relative; }
.catalog-nav--dense { gap: 0.25rem; }
.catalog-nav--dense .catalog-nav__item { padding-left: 0.75rem; padding-right: 0.75rem; }
.catalog-nav__fade { position: absolute; top: 1px; bottom: 1px; width: 2.75rem; pointer-events: none; }
.catalog-nav__fade--start { left: 1px; border-radius: 1rem 0 0 1rem; background: linear-gradient(to right, var(--panel-surface) 30%, transparent); }
.catalog-nav__fade--end { right: 1px; border-radius: 0 1rem 1rem 0; background: linear-gradient(to left, var(--panel-surface) 30%, transparent); }
.catalog-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--panel-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.catalog-nav__item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--panel-ink);
}
.catalog-nav__item.is-active {
    background: rgba(var(--panel-primary-rgb),0.16);
    color: var(--panel-link);
}
.catalog-nav__item svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}
.catalog-detail-nav__count {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    padding: 0 .35rem;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
}
.catalog-nav__item.is-active .catalog-detail-nav__count {
    background: rgba(var(--panel-primary-rgb),.25);
}
.catalog-product-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    padding: 1.5rem;
}
.catalog-product-overview-media,
.catalog-product-overview-content {
    min-width: 0;
}
.catalog-product-overview-content {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .catalog-product-overview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}
.catalog-detail-variants__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(var(--panel-border-rgb),.10);
}
.catalog-detail-variants__table-wrap {
    overflow-x: auto;
}
.catalog-detail-variants__table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    color: var(--panel-ink);
    font-size: .875rem;
}
.catalog-detail-variants__table th,
.catalog-detail-variants__table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--panel-border-rgb),.07);
    text-align: left;
    vertical-align: middle;
}
.catalog-detail-variants__table th {
    color: var(--panel-muted);
    background: rgba(255,255,255,.025);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.catalog-detail-variants__table th.text-right,
.catalog-detail-variants__table td.text-right {
    text-align: right;
}
.catalog-detail-variants__table code {
    color: var(--panel-link);
    font-size: .8125rem;
}
.catalog-detail-variants__identity {
    display: flex;
    min-width: 10rem;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
}
.catalog-detail-variants__identity img {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: .5rem;
    background: #fff;
    object-fit: contain;
}
.catalog-detail-variants__attributes {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.catalog-detail-variants__attribute,
.catalog-detail-variants__status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border: 1px solid rgba(var(--panel-primary-rgb),.35);
    border-radius: 999px;
    background: rgba(var(--panel-primary-rgb),.08);
    padding: .25rem .6rem;
    color: var(--panel-link);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.catalog-detail-variants__attribute i {
    width: .625rem;
    height: .625rem;
    border: 1px solid rgba(var(--panel-border-rgb),.25);
    border-radius: 999px;
}
.catalog-detail-variants__status {
    border-color: rgba(var(--panel-border-rgb),.12);
    background: rgba(255,255,255,.04);
    color: var(--panel-muted);
}
.catalog-detail-variants__status.is-active {
    border-color: rgba(16,185,129,.35);
    background: rgba(16,185,129,.10);
    color: #6ee7b7;
}
.catalog-detail-variants__empty {
    padding: 3rem !important;
    color: var(--panel-muted);
    text-align: center !important;
}

/* Catalog product mockup collection mapping */
.catalog-mockup-collections__empty,
.catalog-mockup-modal__panel,
.catalog-mockup-modal__row,
.catalog-mockup-modal__mockup {
    background: var(--panel-raised) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
.catalog-mockup-collection-card {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
.catalog-mockup-collections__empty {
    color: var(--panel-muted) !important;
}
.catalog-mockup-modal {
    background: rgba(0,0,0,0.76) !important;
    backdrop-filter: blur(6px);
}
.catalog-mockup-modal__dialog,
.catalog-mockup-modal__table {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
    color: var(--panel-ink) !important;
}
.catalog-mockup-modal__table thead {
    background: var(--panel-raised) !important;
}
.catalog-mockup-modal__table tbody,
.catalog-mockup-modal__table tr,
.catalog-mockup-modal__table td {
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
}
.catalog-mockup-modal__dialog > .border-b,
.catalog-mockup-modal__dialog > .border-t,
.catalog-mockup-modal__panel > .border-b {
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
}
.catalog-mockup-modal__dialog > .border-t {
    background: var(--panel-raised) !important;
}
.catalog-mockup-modal__dialog select {
    background: var(--panel-raised) !important;
    border-color: rgba(var(--panel-border-rgb),0.16) !important;
    color: var(--panel-ink) !important;
}
.catalog-mockup-mapping__section,
.catalog-mockup-mapping__location,
.catalog-mockup-mapping__mockup {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
.catalog-mockup-collection-card {
    padding: 1.5rem !important;
}
.catalog-mockup-collection-card__details {
    display: grid;
    gap: .5rem;
}
.catalog-mockup-collection-card__actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--panel-border-rgb),.10);
}
.catalog-mockup-collection-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.625rem;
    border: 1px solid rgba(var(--panel-border-rgb),.20);
    border-radius: .625rem;
    background: var(--panel-surface);
    padding: .625rem 1rem;
    color: var(--panel-ink);
    font-size: .875rem;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.catalog-mockup-collection-card__button:hover {
    border-color: rgba(var(--panel-border-rgb),.38);
    background: var(--panel-raised);
}
.catalog-mockup-collection-card__button.is-danger {
    color: #f87171;
}
.catalog-mockup-collection-card__button.is-danger:hover {
    border-color: rgba(248,113,113,.55);
    background: rgba(248,113,113,.08);
    color: #fca5a5;
}
.catalog-mockup-mapping {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
}
.catalog-mockup-mapping__section-header {
    padding: 1.25rem 1.5rem;
}
.catalog-mockup-mapping__locations {
    display: grid;
    gap: .875rem;
    padding: 1.25rem 1.5rem;
}
.catalog-mockup-mapping__location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .9fr);
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
}
.catalog-mockup-mapping__location-select {
    display: grid;
    gap: .375rem;
    min-width: 0;
}
.catalog-mockup-mapping__location-select select {
    display: block;
    width: 100%;
    min-width: 0;
    padding: .625rem .875rem;
    color-scheme: dark;
    background: var(--panel-selected) !important;
    border-color: rgba(var(--panel-border-rgb),.22) !important;
    color: var(--panel-ink) !important;
}
.catalog-mockup-mapping__location-select select option {
    background: var(--panel-selected);
    color: var(--panel-ink);
}
.catalog-mockup-mapping__mockups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
}
.catalog-mockup-mapping__mockup {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    padding: 1.25rem;
}
.catalog-mockup-mapping__mockup-summary {
    min-width: 0;
}
.catalog-mockup-mapping__thumbnail {
    display: block;
    width: 100%;
    height: 13rem;
    border: 1px solid rgba(var(--panel-border-rgb),.10);
    border-radius: .75rem;
    background: #fff;
    object-fit: contain;
}
.catalog-mockup-mapping__mockup-name {
    margin-top: .75rem;
}
.catalog-mockup-mapping__attribute-selections {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}
.catalog-mockup-mapping__attribute-selections fieldset {
    min-width: 0;
}
.catalog-mockup-mapping__attribute-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.catalog-mockup-mapping__attribute-actions {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 600;
}
.catalog-mockup-mapping__attribute-actions button {
    color: var(--panel-link);
}
.catalog-mockup-mapping__attribute-actions button:hover {
    color: var(--panel-link);
}
.catalog-mockup-mapping__attribute-value {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 2rem;
    border: 1px solid rgba(var(--panel-border-rgb),.22);
    border-radius: 999px;
    background: var(--panel-surface);
    padding: .25rem .625rem;
    color: var(--panel-ink);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.catalog-mockup-mapping__attribute-value:hover {
    border-color: rgba(var(--panel-link-rgb),.72);
    color: var(--panel-link);
}
.catalog-mockup-mapping__attribute-value.is-selected {
    border-color: rgba(var(--panel-primary-rgb),.82);
    background: rgba(var(--panel-primary-rgb),.16);
    color: var(--panel-link);
}
@media (max-width: 1023px) {
    .catalog-mockup-mapping__mockups {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .catalog-mockup-collection-card,
    .catalog-mockup-mapping {
        padding: 1rem !important;
    }
    .catalog-mockup-mapping__section-header,
    .catalog-mockup-mapping__locations,
    .catalog-mockup-mapping__mockups {
        padding: 1rem;
    }
    .catalog-mockup-mapping__location,
    .catalog-mockup-mapping__mockup {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}
.fi-modal-window:has(.catalog-mockup-mapping) {
    display: flex !important;
    max-height: calc(100vh - 2rem) !important;
    flex-direction: column !important;
}
.fi-modal-window:has(.catalog-mockup-mapping) .fi-modal-content {
    min-height: 0 !important;
    overflow-y: auto !important;
}
html:not(.dark) .catalog-mockup-collections__empty,
html:not(.dark) .catalog-mockup-modal__panel,
html:not(.dark) .catalog-mockup-modal__row,
html:not(.dark) .catalog-mockup-modal__mockup {
    background: var(--panel-paper) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .catalog-mockup-collection-card {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .catalog-mockup-collections__empty {
    color: var(--panel-muted) !important;
}
html:not(.dark) .catalog-mockup-modal {
    background: rgba(24,24,27,0.42) !important;
}
html:not(.dark) .catalog-mockup-modal__dialog,
html:not(.dark) .catalog-mockup-modal__table {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .catalog-mockup-modal__table thead {
    background: var(--panel-inset) !important;
}
html:not(.dark) .catalog-mockup-modal__table tbody,
html:not(.dark) .catalog-mockup-modal__table tr,
html:not(.dark) .catalog-mockup-modal__table td {
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
}
html:not(.dark) .catalog-mockup-modal__dialog > .border-b,
html:not(.dark) .catalog-mockup-modal__dialog > .border-t,
html:not(.dark) .catalog-mockup-modal__panel > .border-b {
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
}
html:not(.dark) .catalog-mockup-modal__dialog > .border-t,
html:not(.dark) .catalog-mockup-modal__dialog select {
    background: var(--panel-paper) !important;
    border-color: rgba(var(--panel-border-rgb),0.14) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .catalog-mockup-mapping__section,
html:not(.dark) .catalog-mockup-mapping__location,
html:not(.dark) .catalog-mockup-mapping__mockup {
    background: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .catalog-mockup-collection-card__actions {
    border-color: rgba(var(--panel-border-rgb),.10);
}
html:not(.dark) .catalog-mockup-mapping__location-select select {
    color-scheme: light;
    background: #fff !important;
    border-color: rgba(var(--panel-border-rgb),.20) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .catalog-mockup-mapping__location-select select option {
    background: #fff;
    color: var(--panel-ink);
}
html:not(.dark) .catalog-mockup-collection-card__button {
    border-color: rgba(var(--panel-border-rgb),.22);
    background: #fff;
    color: var(--panel-ink);
}
html:not(.dark) .catalog-mockup-collection-card__button:hover {
    border-color: rgba(var(--panel-border-rgb),.42);
    background: var(--panel-paper);
}
html:not(.dark) .catalog-mockup-collection-card__button.is-danger {
    color: #dc2626;
}
html:not(.dark) .catalog-mockup-collection-card__button.is-danger:hover {
    border-color: rgba(220,38,38,.45);
    background: rgba(220,38,38,.06);
    color: #b91c1c;
}
html:not(.dark) .catalog-mockup-mapping__attribute-value {
    border-color: rgba(var(--panel-primary-rgb),.42);
    background: #fff;
    color: var(--panel-primary-strong);
}
html:not(.dark) .catalog-mockup-mapping__attribute-value:hover,
html:not(.dark) .catalog-mockup-mapping__attribute-value.is-selected {
    border-color: rgba(var(--panel-primary-rgb),.72);
    background: rgba(var(--panel-primary-rgb),.10);
    color: var(--panel-primary-strong);
}

/* ── Page sub-navigation above the content (Settings and its service pages) ────────────
   Filament centres this bar; the other tab bars of the panel are left-aligned and as wide as the content. */
.fi-page-sub-navigation-tabs {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    justify-content: flex-start;
    background: var(--panel-surface);
}
/* Filament's own dark background of a tab bar (gray-900) has the weight of a class and a `:is(.dark *)`; without this the bar was a cold grey stripe among the green cards. */
html.dark .fi-page-sub-navigation-tabs { background: var(--panel-surface); }
.fi-page-sub-navigation-tabs .fi-tabs-item { flex-shrink: 0; }
.fi-page-sub-navigation-tabs .fi-tabs-item-active { background: var(--panel-selected); }
.fi-page-sub-navigation-tabs .fi-tabs-item:focus-visible { outline: 2px solid var(--panel-link); outline-offset: -2px; }

/* The account menu (Settings | Tokens) is two short tabs. They fit a phone, so they stay tabs there instead of becoming Filament's select
   (HasAccountMenu puts the class on the body). The administrator's Settings, with its service pages, keeps the select on a phone. */
.mg-account-pages .fi-page-sub-navigation-select { display: none; }
.mg-account-pages .fi-page-sub-navigation-tabs { display: flex; }

/* ── Mockup detail modal tabs ───────────────────────────────────────── */
.mg-details-tabs > .fi-tabs {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}
.mg-details-tabs > .fi-tabs .fi-tabs-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.mg-details-tabs > .fi-tabs .fi-tabs-item-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.mg-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    border: 1px solid rgba(var(--panel-border-rgb),0.08);
    border-radius: 0.65rem;
    padding: 0.25rem;
    background: var(--panel-paper);
}
.mg-segment-input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.mg-segment-btn {
    min-height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    color: var(--panel-muted);
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    user-select: none;
}
.mg-segment-btn:hover {
    color: var(--panel-ink);
}
.mg-segment-input:checked + .mg-segment-btn {
    background: var(--panel-primary);
    color: #ffffff;
}
.mg-segment-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* ── Table ───────────────────────────────────────────────────────────── */
.fi-ta-ctn {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.06) !important;
    border-radius: 0.875rem !important;
    overflow: hidden !important;
}
.fi-ta-header-cell {
    background-color: var(--panel-inset) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--panel-muted) !important;
}
.fi-ta-row:hover > td {
    background-color: rgba(255,255,255,0.015) !important;
}
td.fi-ta-cell {
    border-top-color: rgba(var(--panel-border-rgb),0.04) !important;
}
.fi-ta-row > td,
.fi-ta-row > .fi-ta-cell,
.fi-ta-actions-cell {
    background-color: var(--panel-surface) !important;
}
.fi-ta-row:hover > td,
.fi-ta-row:hover > .fi-ta-cell {
    background-color: var(--panel-hover) !important;
}
.fi-ta-row:has(.fi-checkbox-input:checked) > td,
.fi-ta-row:has(.fi-ta-record-checkbox:checked) > td,
.fi-ta-row:has(input[type="checkbox"]:checked) > td {
    background-color: var(--panel-selected) !important;
}
.fi-ta-selection-cell {
    background-color: var(--panel-surface) !important;
}
.fi-ta-selection-indicator {
    background-color: var(--panel-selected) !important;
}
thead .fi-ta-selection-cell,
.fi-ta-header-cell.fi-ta-selection-cell,
th.fi-ta-actions-header-cell,
.fi-ta-actions-header-cell,
thead .fi-ta-actions-cell {
    background-color: var(--panel-inset) !important;
}
.fi-ta-row .fi-ta-actions,
.fi-ta-row .fi-ta-actions-cell,
.fi-ta-content-grid .fi-ta-actions {
    gap: 0.4rem !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn:not(:first-child),
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn:not(:first-child),
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn:not(:first-child) {
    margin-inline-start: 0.4rem !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn:not(:last-child),
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn:not(:last-child),
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn:not(:last-child) {
    margin-inline-end: 0 !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn,
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn,
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn {
    display: inline-grid !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    margin-inline: 0.2rem !important;
    place-items: center !important;
    border: 1px solid rgba(var(--panel-link-rgb),0.28) !important;
    border-radius: 0.55rem !important;
    background: rgba(var(--panel-link-rgb),0.045) !important;
    color: var(--panel-link) !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn:hover,
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn:hover,
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn:hover {
    border-color: rgba(var(--panel-link-rgb),0.58) !important;
    background: rgba(var(--panel-link-rgb),0.11) !important;
    color: var(--panel-link) !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn.fi-color-danger,
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn.fi-color-danger,
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn.fi-color-danger {
    border-color: rgba(248,113,113,0.30) !important;
    background: rgba(248,113,113,0.055) !important;
    color: #f87171 !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn.fi-color-danger:hover,
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn.fi-color-danger:hover,
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn.fi-color-danger:hover {
    border-color: rgba(252,165,165,0.62) !important;
    background: rgba(248,113,113,0.12) !important;
    color: #fca5a5 !important;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn svg,
.fi-ta-row .fi-ta-actions-cell .fi-icon-btn svg,
.fi-ta-content-grid .fi-ta-actions .fi-icon-btn svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* Text fallback for row actions that do not define an icon. */
.fi-ta-actions .mg-table-row-action.fi-btn {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: .25rem .625rem !important;
    border: 1px solid rgba(var(--panel-link-rgb), .28) !important;
    border-radius: .55rem !important;
    background: rgba(var(--panel-link-rgb), .045) !important;
    color: var(--panel-link) !important;
    box-shadow: none !important;
}
.fi-ta-actions .mg-table-row-action.fi-btn.fi-color-danger {
    border-color: rgb(var(--danger-600) / .28) !important;
    color: rgb(var(--danger-600)) !important;
}
.fi-ta-actions .mg-table-row-action.fi-btn:hover:not(:disabled) {
    border-color: rgba(var(--panel-link-rgb), .58) !important;
    background: rgba(var(--panel-link-rgb), .11) !important;
}
.fi-ta-actions .mg-table-row-action.fi-btn.fi-color-danger:hover:not(:disabled) {
    border-color: rgb(var(--danger-600) / .58) !important;
    background: rgb(var(--danger-600) / .11) !important;
}
.fi-ta-actions .mg-table-row-action:focus-visible {
    outline: 2px solid var(--panel-link) !important;
    outline-offset: 2px !important;
}
.fi-ta-actions .mg-table-row-action:disabled,
.fi-ta-actions .mg-table-row-action[aria-disabled="true"] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* ── Form inputs (scoped to fi-fo — avoids global search conflict) ─── */
.fi-fo-ctn .fi-input,
.fi-fo-ctn .fi-select-input,
.fi-fo-ctn .fi-textarea,
.fi-modal .fi-input,
.fi-modal .fi-select-input {
    background-color: var(--panel-inset) !important;
    border-color: rgba(var(--panel-border-rgb),0.09) !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.fi-fo-ctn .fi-input:focus-visible,
.fi-fo-ctn .fi-select-input:focus-visible,
.fi-fo-ctn .fi-textarea:focus-visible,
.fi-modal .fi-input:focus-visible {
    border-color: rgba(var(--panel-primary-rgb),0.6) !important;
    box-shadow: 0 0 0 2px rgba(var(--panel-primary-rgb),0.18) !important;
    outline: none !important;
}

/* Global search bar in topbar – subtle, not cyan */
.fi-global-search-field {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.07) !important;
    border-radius: 0.5rem !important;
    backdrop-filter: blur(4px) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}
.fi-global-search-field:focus-within {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: rgba(var(--panel-border-rgb),0.15) !important;
    box-shadow: none !important;
}
.fi-global-search-field input {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    color: var(--panel-ink) !important;
}
.fi-global-search-field input::placeholder {
    color: var(--panel-muted) !important;
}

/* Global search results dropdown */
.fi-global-search-results-ctn {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.08) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.fi-fo-field-wrp-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--panel-muted) !important;
    margin-bottom: 0.375rem !important;
}
.fi-fo-helper-text {
    font-size: 0.75rem !important;
    color: var(--panel-muted) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.fi-btn {
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-radius: 0.5rem !important;
    transition: opacity 0.15s ease, transform 0.1s ease !important;
}
.fi-btn:active {
    transform: translateY(1px) !important;
}
.fi-btn-color-primary {
    background-color: var(--panel-primary) !important;
    color: #ffffff !important;
}
.fi-btn-color-primary:hover {
    background-color: var(--panel-link) !important;
}

/* ── Badge ───────────────────────────────────────────────────────────── */
.fi-badge {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 9999px !important;
    padding: 0.125rem 0.625rem !important;
}

/* ── Notifications ───────────────────────────────────────────────────── */
.fi-notifications {
    font-family: var(--panel-font), ui-sans-serif, sans-serif !important;
}
.fi-notification {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.07) !important;
    border-radius: 0.875rem !important;
    backdrop-filter: blur(12px) !important;
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.fi-modal-window {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.07) !important;
    border-radius: 1rem !important;
}

/* ── Infolist entries ────────────────────────────────────────────────── */
.fi-in-entry-wrp-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--panel-muted) !important;
}
.fi-in-text-item-label {
    font-size: 0.9375rem !important;
    color: var(--panel-ink) !important;
}

/* ── Card record: strip Filament's default outer card background so only my
      inner Stack styling shows. ── */
.fi-ta-content-grid .fi-ta-record {
    position: relative !important;
    background: var(--panel-surface) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    min-width: 0 !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: border-color 0.15s ease !important;
}
.fi-ta-content-grid .fi-ta-record:hover {
    border-color: rgba(var(--panel-link-rgb),0.42) !important;
}
/* Neutralise the inner Stack's rounded/border chrome — it only wraps part
   of the card, so we move that styling up to .fi-ta-record above. */
.fi-ta-content-grid .fi-ta-record [class~="rounded-xl"][class~="overflow-hidden"][class~="border"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center {
    position: relative !important;
    display: grid !important;
    grid-template-areas:
        "card-header"
        "card-media"
        "card-body" !important;
    grid-template-rows: auto auto 1fr !important;
    height: 100% !important;
    padding: 0 !important;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center > .flex.w-full {
    display: contents !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center > .flex.w-full > .flex-1 {
    display: contents !important;
}
.fi-ta-content-grid .fi-ta-record .block.w-full {
    display: contents !important;
    padding-inline: 0 !important;
}
.fi-ta-content-grid .fi-ta-record .fi-ta-text,
.fi-ta-content-grid .fi-ta-record .fi-ta-text-item,
.fi-ta-content-grid .fi-ta-record .fi-badge {
    min-width: 0 !important;
    max-width: 100% !important;
}
.fi-ta-content-grid .fi-ta-record .fi-badge {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Mockup collections: card metadata and header actions follow the available width. */
.mg-mockup-card-meta {
    flex-wrap: wrap !important;
    min-width: 0;
}
.mg-mockup-card-meta > div {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}
.fi-resource-mockups .fi-ta-record > .flex.items-center {
    grid-template-columns: minmax(0, 1fr) !important;
}
.fi-resource-mockups .fi-ta-record .fi-ta-text-item-label {
    white-space: normal;
    overflow-wrap: anywhere;
}
.fi-resource-mockups .fi-header {
    flex-wrap: wrap;
}
.fi-resource-mockups .fi-header > div:first-child {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.fi-resource-mockups .fi-header > .flex.shrink-0 {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    margin-top: 0 !important;
    align-self: flex-end;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) {
    grid-area: card-header !important;
    position: relative !important;
    z-index: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    display: grid !important;
    width: 1.875rem !important;
    height: 1.875rem !important;
    place-items: center !important;
    margin: 0.75rem 0 0.75rem 0.875rem !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.12) !important;
    border-radius: 0.5rem !important;
    background: rgba(255,255,255,0.035) !important;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox):hover {
    border-color: rgba(var(--panel-link-rgb),0.42) !important;
    background: rgba(var(--panel-link-rgb),0.09) !important;
}
.fi-ta-content-grid .fi-ta-record-checkbox {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    border-radius: 0.3125rem !important;
    background-color: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
.fi-ta-content-grid .fi-ta-actions {
    grid-area: card-header !important;
    position: relative !important;
    z-index: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    border-top: none !important;
    padding: 0.75rem 0.875rem 0.75rem 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
}
.fi-ta-content-grid .fi-ta-record > .flex.items-center::before {
    content: "" !important;
    grid-area: card-header !important;
    display: block !important;
    min-height: 3.375rem !important;
    background: rgba(255,255,255,0.025) !important;
    border-bottom: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
}
/* Footer (the inner Stack with text content) gets the same tint as the
   header bar so the cover sits visually framed between two strips. */
.fi-ta-content-grid .fi-ta-record [class~="p-4"][class~="gap-1"] {
    background: rgba(255,255,255,0.025) !important;
    border-top: 1px solid rgba(var(--panel-border-rgb),0.05) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record > .flex.items-center::before,
html:not(.dark) .fi-ta-content-grid .fi-ta-record [class~="p-4"][class~="gap-1"] {
    background: rgba(24,24,27,0.03) !important;
    border-color: rgba(var(--panel-border-rgb),0.06) !important;
}

/* ── Gallery media: every card gets a square, centered art stage. ───── */
.mg-card-cover {
    grid-area: card-media !important;
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 25% 18%, rgba(var(--panel-link-rgb),0.13), transparent 28%),
        radial-gradient(circle at 78% 82%, rgba(34,211,238,0.08), transparent 30%),
        linear-gradient(135deg, var(--panel-raised) 0%, var(--panel-inset) 48%, var(--panel-paper) 100%) !important;
}
.mg-card-cover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.18 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%) !important;
    mask-image: linear-gradient(to bottom, black, transparent 82%) !important;
    pointer-events: none !important;
}
.mg-card-cover::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 70%) !important;
    background-size: 200% 100% !important;
    animation: mg-shimmer 1.2s ease-out 1 !important;
    pointer-events: none !important;
}
@keyframes mg-shimmer { to { background-position-x: -200%; } }
.mg-card-cover-link {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}
.mg-card-cover-img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 5px !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.mg-card-cover-empty {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--panel-muted) !important;
    font-size: 0.75rem !important;
}
.fi-ta-content-grid .fi-ta-actions .fi-btn {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.75rem !important;
}
.fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger .fi-btn {
    display: inline-grid !important;
    width: 2.5rem !important;
    height: 2.25rem !important;
    min-width: 2.5rem !important;
    place-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.13) !important;
    background-color: rgba(255,255,255,0.035) !important;
    color: var(--panel-muted) !important;
}
.fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger .fi-btn:hover {
    border-color: rgba(var(--panel-link-rgb),0.45) !important;
    background-color: rgba(var(--panel-link-rgb),0.09) !important;
    color: var(--panel-link) !important;
}
.fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger .fi-btn-label {
    display: none !important;
}
.fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger .fi-btn-icon,
.fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: 0 !important;
    transform: none !important;
}

/* ── Light mode: keep the custom skin coherent instead of half-dark. ── */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) .fi-body,
html:not(.dark) .fi-layout,
html:not(.dark) .fi-page,
html:not(.dark) .fi-main,
html:not(.dark) .fi-main-ctn {
    background-color: var(--panel-paper) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-nav,
html:not(.dark) .fi-sidebar-header,
html:not(.dark) .fi-topbar {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
}
html:not(.dark) .fi-logo,
html:not(.dark) .fi-logo span,
html:not(.dark) .fi-sidebar-header span,
html:not(.dark) .fi-header-heading {
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-sidebar-group-label,
html:not(.dark) .fi-sidebar-item-label,
html:not(.dark) .fi-breadcrumbs-item-label,
html:not(.dark) .fi-ta-header-cell,
html:not(.dark) .fi-wi-stats-overview-stat-label,
html:not(.dark) .fi-fo-helper-text,
html:not(.dark) .fi-in-entry-wrp-label {
    color: var(--panel-muted) !important;
}
html:not(.dark) .fi-wi-stats-overview-stat-value,
html:not(.dark) .fi-wi-stats-overview-stat-description,
html:not(.dark) .fi-section-header-heading,
html:not(.dark) .fi-ta-text,
html:not(.dark) .fi-ta-text-item {
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-sidebar-item-icon,
html:not(.dark) .fi-ta-icon,
html:not(.dark) .fi-wi-stats-overview-stat-icon {
    color: var(--panel-muted) !important;
}
html:not(.dark) .fi-sidebar-item-button:hover:not(.fi-active) {
    background-color: rgba(24,24,27,0.045) !important;
}
html:not(.dark) .fi-sidebar-item-button.fi-active {
    background-color: rgba(var(--panel-primary-rgb),0.11) !important;
}
html:not(.dark) .fi-sidebar-item-button.fi-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: var(--panel-primary-hover) !important;
}
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-modal-window,
html:not(.dark) .fi-notification,
html:not(.dark) .fi-dropdown-panel {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
    box-shadow: 0 10px 30px rgba(var(--panel-border-rgb),0.06) !important;
}
html:not(.dark) .fi-section-header {
    border-bottom-color: rgba(var(--panel-border-rgb),0.08) !important;
}
html:not(.dark) .catalog-nav {
    border-color: rgba(var(--panel-border-rgb),0.08) !important;
    background: var(--panel-surface) !important;
    box-shadow: 0 10px 30px rgba(var(--panel-border-rgb),0.06) !important;
}
html:not(.dark) .catalog-nav__item {
    color: var(--panel-muted) !important;
}
html:not(.dark) .catalog-nav__item:hover {
    background: rgba(24,24,27,0.045) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .catalog-nav__item.is-active {
    background: rgba(var(--panel-primary-rgb),0.11) !important;
    color: var(--panel-primary-hover) !important;
}
html:not(.dark) .catalog-detail-nav__count {
    background: rgba(24,24,27,.08);
}
html:not(.dark) .catalog-nav__item.is-active .catalog-detail-nav__count {
    background: rgba(var(--panel-primary-rgb),.18);
}
html:not(.dark) .catalog-detail-variants__header,
html:not(.dark) .catalog-detail-variants__table th,
html:not(.dark) .catalog-detail-variants__table td {
    border-color: rgba(var(--panel-border-rgb),.09);
}
html:not(.dark) .catalog-detail-variants__table {
    color: var(--panel-ink);
}
html:not(.dark) .catalog-detail-variants__table th {
    background: var(--panel-inset);
    color: var(--panel-muted);
}
html:not(.dark) .catalog-detail-variants__table code {
    color: var(--panel-primary-hover);
}
html:not(.dark) .catalog-detail-variants__attribute {
    color: var(--panel-primary-hover);
}
html:not(.dark) .catalog-detail-variants__status {
    border-color: rgba(var(--panel-border-rgb),.13);
    background: var(--panel-inset);
    color: var(--panel-muted);
}
html:not(.dark) .catalog-detail-variants__status.is-active {
    border-color: rgba(5,150,105,.3);
    background: rgba(16,185,129,.10);
    color: #047857;
}
html:not(.dark) .mg-segment {
    background-color: var(--panel-inset) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .mg-segment-btn {
    color: var(--panel-muted) !important;
}
html:not(.dark) .mg-segment-btn:hover {
    color: var(--panel-ink) !important;
}
html:not(.dark) .mg-segment-input:checked + .mg-segment-btn {
    background-color: var(--panel-primary) !important;
    color: #ffffff !important;
}
html:not(.dark) .fi-ta-header-cell {
    background-color: var(--panel-inset) !important;
}
html:not(.dark) .fi-ta-row:hover > td {
    background-color: rgba(var(--panel-primary-rgb),0.035) !important;
}
html:not(.dark) td.fi-ta-cell {
    border-top-color: rgba(var(--panel-border-rgb),0.07) !important;
}
html:not(.dark) .fi-ta-row > td,
html:not(.dark) .fi-ta-row > .fi-ta-cell,
html:not(.dark) .fi-ta-actions-cell {
    background-color: var(--panel-surface) !important;
}
html:not(.dark) .fi-ta-row:hover > td,
html:not(.dark) .fi-ta-row:hover > .fi-ta-cell {
    background-color: var(--panel-hover) !important;
}
html:not(.dark) .fi-ta-row:has(.fi-checkbox-input:checked) > td,
html:not(.dark) .fi-ta-row:has(.fi-ta-record-checkbox:checked) > td,
html:not(.dark) .fi-ta-row:has(input[type="checkbox"]:checked) > td {
    background-color: var(--panel-selected) !important;
}
html:not(.dark) .fi-ta-selection-cell {
    background-color: var(--panel-surface) !important;
}
html:not(.dark) .fi-ta-selection-indicator {
    background-color: var(--panel-selected) !important;
}
html:not(.dark) thead .fi-ta-selection-cell,
html:not(.dark) .fi-ta-header-cell.fi-ta-selection-cell,
html:not(.dark) th.fi-ta-actions-header-cell,
html:not(.dark) .fi-ta-actions-header-cell,
html:not(.dark) thead .fi-ta-actions-cell {
    background-color: var(--panel-inset) !important;
}
html:not(.dark) .fi-fo-field-wrp-label {
    color: var(--panel-muted) !important;
}
html:not(.dark) .fi-in-text-item-label {
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-fo-ctn .fi-input,
html:not(.dark) .fi-fo-ctn .fi-select-input,
html:not(.dark) .fi-fo-ctn .fi-textarea,
html:not(.dark) .fi-modal .fi-input,
html:not(.dark) .fi-modal .fi-select-input {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.12) !important;
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-global-search-field {
    background-color: rgba(24,24,27,0.035) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .fi-global-search-field:focus-within {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-primary-rgb),0.35) !important;
}
html:not(.dark) .fi-global-search-field input {
    color: var(--panel-ink) !important;
}
html:not(.dark) .fi-global-search-field input::placeholder {
    color: var(--panel-muted) !important;
}
html:not(.dark) .fi-global-search-results-ctn {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
    box-shadow: 0 18px 40px rgba(var(--panel-border-rgb),0.14) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record > .flex.items-center::before {
    border-bottom-color: rgba(var(--panel-border-rgb),0.08) !important;
    background: linear-gradient(180deg, rgba(24,24,27,0.035), rgba(24,24,27,0.012)) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox),
html:not(.dark) .fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger .fi-btn {
    border-color: rgba(var(--panel-border-rgb),0.12) !important;
    background-color: rgba(24,24,27,0.035) !important;
    color: var(--panel-muted) !important;
}
html:not(.dark) .fi-ta-row .fi-ta-actions .fi-icon-btn,
html:not(.dark) .fi-ta-row .fi-ta-actions-cell .fi-icon-btn,
html:not(.dark) .fi-ta-content-grid .fi-ta-actions .fi-icon-btn {
    border-color: rgba(var(--panel-primary-rgb),0.20) !important;
    background: rgba(var(--panel-primary-rgb),0.045) !important;
    color: var(--panel-primary-hover) !important;
}
html:not(.dark) .fi-ta-row .fi-ta-actions .fi-icon-btn:hover,
html:not(.dark) .fi-ta-row .fi-ta-actions-cell .fi-icon-btn:hover,
html:not(.dark) .fi-ta-content-grid .fi-ta-actions .fi-icon-btn:hover {
    border-color: rgba(var(--panel-primary-rgb),0.45) !important;
    background: rgba(var(--panel-primary-rgb),0.10) !important;
    color: var(--panel-primary-strong) !important;
}
html:not(.dark) .fi-ta-row .fi-ta-actions .fi-icon-btn.fi-color-danger,
html:not(.dark) .fi-ta-row .fi-ta-actions-cell .fi-icon-btn.fi-color-danger,
html:not(.dark) .fi-ta-content-grid .fi-ta-actions .fi-icon-btn.fi-color-danger {
    border-color: rgba(220,38,38,0.22) !important;
    background: rgba(220,38,38,0.055) !important;
    color: #dc2626 !important;
}
html:not(.dark) .fi-ta-row .fi-ta-actions .fi-icon-btn.fi-color-danger:hover,
html:not(.dark) .fi-ta-row .fi-ta-actions-cell .fi-icon-btn.fi-color-danger:hover,
html:not(.dark) .fi-ta-content-grid .fi-ta-actions .fi-icon-btn.fi-color-danger:hover {
    border-color: rgba(220,38,38,0.45) !important;
    background: rgba(220,38,38,0.11) !important;
    color: #b91c1c !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record-checkbox {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.18) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record [class*="bg-[#111116]"] {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.10) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record {
    background-color: var(--panel-surface) !important;
    border-color: rgba(var(--panel-border-rgb),0.14) !important;
    box-shadow: 0 12px 28px rgba(var(--panel-border-rgb),0.06) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record:hover {
    border-color: rgba(var(--panel-primary-rgb),0.55) !important;
}
html:not(.dark) .mg-card-cover {
    background:
        radial-gradient(circle at 25% 18%, rgba(var(--panel-primary-rgb),0.10), transparent 28%),
        radial-gradient(circle at 78% 82%, rgba(14,165,233,0.08), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, var(--panel-paper) 48%, var(--panel-hover) 100%) !important;
}
html:not(.dark) .mg-card-cover::before {
    opacity: 0.32 !important;
    background-image:
        linear-gradient(rgba(24,24,27,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24,24,27,0.08) 1px, transparent 1px) !important;
}
html:not(.dark) .mg-card-cover::after {
    background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(24,24,27,0.06) 50%, rgba(255,255,255,0) 70%) !important;
}
/* Previews page: rendered PNGs usually have a white backdrop. Drop the
   tinted gradient + grid/shimmer overlays so the image bg matches the
   card surface — no more visible rim around the preview. */
.fi-resource-previews .mg-card-cover {
    background: var(--panel-surface) !important;
}
.fi-resource-previews .mg-card-cover::before,
.fi-resource-previews .mg-card-cover::after {
    display: none !important;
}
/* Previews + Designs cards are clickable as a whole — show a pointer cursor. */
.fi-resource-previews .fi-ta-content-grid .fi-ta-record,
.fi-resource-designs .fi-ta-content-grid .fi-ta-record {
    cursor: pointer;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) {
    border-color: rgba(var(--panel-border-rgb),0.18) !important;
    background: rgba(24,24,27,0.04) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox):hover {
    border-color: rgba(var(--panel-primary-rgb),0.55) !important;
    background: rgba(var(--panel-primary-rgb),0.08) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record-checkbox {
    background-color: var(--panel-surface) !important;
    border: 1px solid rgba(var(--panel-border-rgb),0.32) !important;
}
html:not(.dark) .fi-ta-content-grid .fi-ta-record-checkbox:checked {
    background-color: var(--panel-primary) !important;
    border-color: var(--panel-primary) !important;
}
html:not(.dark) ::-webkit-scrollbar-thumb { background: #d4d4d8; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }