:root {
    --gold: #c8a45c;
    --gold-dark: #a8873a;
    --gold-light: #e8cc8a;
    --gold-glow: rgba(200, 164, 92, 0.35);
    --gold-subtle: rgba(200, 164, 92, 0.08);
    --navy: #0c1a2a;
    --navy-mid: #122240;
    --navy-light: #1a2d4a;
    --cream: #f5f7fb;
    --cream-dark: #eef1f6;
    --white: #ffffff;
    --charcoal: #1e293b;
    --charcoal-light: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,.16);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', 'Noto Sans SC', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    --sidebar-width: 250px;
    --navbar-height: 60px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--cream);
    color: var(--charcoal);
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.account-switch-page {
    max-width: 820px;
    margin: 0 auto;
}

.account-switch-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.account-switch-title {
    margin: 0 0 6px;
    font-size: 1.55rem;
    font-weight: 700;
}

.account-switch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 152px));
    justify-content: center;
    gap: 18px;
}

.account-switch-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 174px;
    border: 1px solid rgba(40, 44, 52, .12);
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(23, 27, 38, .05);
}

.account-switch-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 174px;
    padding: 18px 12px 16px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.account-switch-main:hover,
.account-switch-main:focus {
    color: inherit;
    background: rgba(202, 168, 92, .08);
    text-decoration: none;
}

.account-switch-main[aria-disabled="true"] {
    cursor: default;
    background: rgba(202, 168, 92, .06);
}

.account-switch-avatar {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    border-radius: 50%;
    background-color: #f3f4f6;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 18px rgba(15, 23, 42, .08);
}

.account-switch-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
}

.account-switch-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.account-switch-main .badge {
    margin-top: 2px;
    font-weight: 700;
}

.account-switch-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
}

.account-switch-empty {
    padding: 42px 18px;
    text-align: center;
    border: 1px dashed rgba(40, 44, 52, .18);
    border-radius: 8px;
    background: #fff;
}

.account-switch-empty .bi {
    display: block;
    margin-bottom: 10px;
    color: #caa85c;
    font-size: 2.1rem;
}

@media (max-width: 575.98px) {
    .account-switch-header {
        align-items: stretch;
        flex-direction: column;
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147481500;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(200,164,92,0), rgba(200,164,92,.95), rgba(26,45,74,.85));
    opacity: 0;
    transform: scaleX(.08);
    transform-origin: left center;
    transition: opacity .14s ease, transform .28s ease;
}

.mofang-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2147481400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(250, 248, 242, .88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.mofang-page-loader-box {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 46px;
    padding: .72rem 1rem;
    border: 1px solid rgba(191, 144, 0, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: var(--charcoal);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    font-size: .92rem;
    font-weight: 600;
}

.mofang-page-loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(191, 144, 0, .2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: mofang-loader-spin .72s linear infinite;
}

html.js body:not(.is-page-ready) .mofang-page-loader,
body.is-page-transitioning .mofang-page-loader,
body.is-page-submitting .mofang-page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@keyframes mofang-loader-spin {
    to { transform: rotate(360deg); }
}

body.is-page-transitioning::before {
    opacity: 1;
    transform: scaleX(.82);
}

body {
    animation: mofang-page-enter .16s ease-out both;
}

@keyframes mofang-page-enter {
    from { opacity: .985; }
    to { opacity: 1; }
}

html.js .select2-simple:not(.select2-hidden-accessible),
html.js .select2-admin-simple:not(.select2-hidden-accessible),
html.js .select2-country:not(.select2-hidden-accessible),
html.js .select2-country-admin:not(.select2-hidden-accessible),
html.js .select2-entity:not(.select2-hidden-accessible),
html.js .select2-tags:not(.select2-hidden-accessible),
html.js .select2-structure:not(.select2-hidden-accessible),
html.js .collection-puzzle-select:not(.select2-hidden-accessible) {
    display: block !important;
    height: 38px !important;
    min-height: 38px !important;
    opacity: 0 !important;
    color: transparent !important;
    pointer-events: none !important;
}

html.js select[multiple].select2-entity:not(.select2-hidden-accessible),
html.js select[multiple].select2-tags:not(.select2-hidden-accessible),
html.js select[multiple].style-entity-tags:not(.select2-hidden-accessible) {
    min-height: 42px !important;
}

html.js textarea[data-rich-editor],
html.js textarea.js-rich-editor {
    min-height: 360px;
    opacity: 0;
}

.mofang-editor-shell {
    position: relative;
    min-height: 360px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.55), rgba(255,255,255,.05)) 0 0 / 240px 100% no-repeat,
        #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    animation: mofang-skeleton-sweep 1.2s ease-in-out infinite;
}

.mofang-editor-shell::before {
    content: "";
    display: block;
    height: 42px;
    border-bottom: 1px solid var(--border);
    background: #fbfaf6;
}

.mofang-editor-shell::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 70px;
    height: 112px;
    border-radius: 8px;
    background:
        linear-gradient(#edf1f6, #edf1f6) 0 0 / 72% 12px no-repeat,
        linear-gradient(#f2f5f9, #f2f5f9) 0 34px / 88% 12px no-repeat,
        linear-gradient(#f2f5f9, #f2f5f9) 0 68px / 55% 12px no-repeat;
}

@keyframes mofang-skeleton-sweep {
    0% { background-position: -260px 0, 0 0; }
    100% { background-position: calc(100% + 260px) 0, 0 0; }
}

.mofang-enhanced-ready > .mofang-editor-shell,
.mofang-enhanced-failed > .mofang-editor-shell {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--charcoal);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

a {
    color: var(--gold-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--gold); }

.text-gold { color: var(--gold) !important; }
.text-gold-dark { color: var(--gold-dark) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-gold-subtle { background-color: var(--gold-subtle) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-cream { background-color: var(--cream) !important; }
.border-gold { border-color: var(--gold) !important; }

/* TinyMCE global theme */
.tox.tox-tinymce {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
    overflow: visible;
}
.tox .tox-editor-header {
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-statusbar {
    background: #fbfaf6 !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    gap: 2px;
}
.tox .tox-statusbar {
    border-top: 1px solid var(--border) !important;
}
.tox .tox-tbtn,
.tox .tox-mbtn,
.tox .tox-split-button {
    border-color: transparent !important;
    border-radius: 6px !important;
    color: var(--charcoal) !important;
    outline: 0 !important;
}
.tox .tox-tbtn:hover,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--select:hover,
.tox .tox-tbtn:focus,
.tox .tox-tbtn:focus-visible,
.tox .tox-mbtn:hover,
.tox .tox-mbtn--active,
.tox .tox-mbtn:focus,
.tox .tox-mbtn:focus-visible,
.tox .tox-mbtn[aria-expanded="true"],
.tox .tox-split-button:hover,
.tox .tox-split-button:focus,
.tox .tox-split-button:focus-visible {
    background: #f5ecd7 !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .22) !important;
    color: var(--gold-dark) !important;
    outline: 0 !important;
}
.tox .tox-mbtn:focus:not(:disabled)::after,
.tox .tox-mbtn--active:focus::after,
.tox .tox-mbtn[aria-expanded="true"]::after,
.tox .tox-mbtn[aria-expanded="true"]:focus::after,
.tox .tox-mbtn[aria-expanded="true"]:hover::after,
.tox .tox-tbtn:focus::after,
.tox .tox-tbtn:focus-visible::after {
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .32) !important;
    outline: 0 !important;
}
.tox .tox-edit-area::before {
    border: 0 !important;
}
.tox.tox-tinymce.tox-edit-focus .tox-edit-area::before {
    border: 1px solid var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .18) inset !important;
}
.tox .tox-menu,
.tox .tox-collection--list,
.tox .tox-dialog,
.tox .tox-pop,
.tox .tox-pop__dialog,
.tox .tox-swatches,
.tox .tox-autocompleter {
    border-color: var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12) !important;
}
.tox .tox-dialog {
    overflow: hidden;
}
.tox .tox-dialog__header,
.tox .tox-dialog__footer,
.tox .tox-dialog__body-nav {
    background: #fbfaf6 !important;
    border-color: var(--border) !important;
}
.tox .tox-dialog__title {
    color: var(--charcoal) !important;
    font-weight: 700 !important;
}
.tox .tox-collection__item--active,
.tox .tox-collection__item--enabled,
.tox .tox-collection__item:hover,
.tox .tox-collection__item:focus {
    background: #f5ecd7 !important;
    box-shadow: inset 3px 0 0 var(--gold) !important;
    color: var(--gold-dark) !important;
    outline: 0 !important;
}
.tox .tox-collection__item--active .tox-collection__item-icon,
.tox .tox-collection__item--enabled .tox-collection__item-icon,
.tox .tox-collection__item:hover .tox-collection__item-icon,
.tox .tox-collection__item:focus .tox-collection__item-icon {
    color: var(--gold-dark) !important;
}
.tox .tox-button {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    border-color: var(--gold-dark) !important;
    border-radius: 6px !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
}
.tox .tox-button:hover,
.tox .tox-button:focus,
.tox .tox-button:focus-visible {
    background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .22) !important;
    color: var(--navy) !important;
    outline: 0 !important;
}
.tox .tox-button--secondary {
    background: var(--white) !important;
    border-color: var(--border) !important;
    color: var(--charcoal) !important;
}
.tox .tox-button--secondary:hover,
.tox .tox-button--secondary:focus,
.tox .tox-button--secondary:focus-visible {
    background: var(--gold-subtle) !important;
    border-color: var(--gold-light) !important;
    color: var(--gold-dark) !important;
}
.tox .tox-button:disabled {
    opacity: .62 !important;
}
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-selectfield select,
.tox .tox-dialog textarea,
.tox .tox-dialog input {
    border-color: var(--border) !important;
    border-radius: 6px !important;
    color: var(--charcoal) !important;
}
.tox .tox-textfield:focus,
.tox .tox-textfield:focus-visible,
.tox .tox-textarea:focus,
.tox .tox-textarea:focus-visible,
.tox .tox-listboxfield .tox-listbox--select:focus,
.tox .tox-listboxfield .tox-listbox--select:focus-visible,
.tox .tox-selectfield select:focus,
.tox .tox-selectfield select:focus-visible,
.tox .tox-dialog textarea:focus,
.tox .tox-dialog textarea:focus-visible,
.tox .tox-dialog input:focus,
.tox .tox-dialog input:focus-visible,
.tox .tox-textarea-wrap:focus-within,
.tox .tox-dialog__body-content textarea:focus,
.tox .tox-dialog__body-content textarea:focus-visible {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .22) !important;
    outline: 0 !important;
}
.tox .tox-checkbox__input:focus + .tox-checkbox__icons,
.tox .tox-checkbox__input:focus-visible + .tox-checkbox__icons,
.tox .tox-dialog__body-nav-item:focus,
.tox .tox-dialog__body-nav-item:focus-visible,
.tox .tox-dialog__body-nav-item--active {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .22) !important;
    color: var(--gold-dark) !important;
    outline: 0 !important;
}
.tox .tox-dialog__body-nav-item--active {
    background: var(--gold-subtle) !important;
}

/* Admin datetime controls */
.admin-datetime-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: stretch;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: visible;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.admin-datetime-wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, .18);
}
.admin-datetime-display {
    height: 38px;
    min-height: 38px;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--charcoal);
    font-size: .88rem;
    line-height: 1.2;
    padding: .45rem .55rem;
    cursor: pointer;
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}
.admin-datetime-display:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}
.admin-datetime-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 48px;
    padding: 0 .55rem;
    border: 0;
    border-left: 1px solid var(--border);
    background: #fbfaf6;
    color: var(--gold-dark);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.admin-datetime-action:hover,
.admin-datetime-action:focus {
    background: var(--gold-subtle);
    color: var(--gold-dark);
    outline: 0;
}
.admin-datetime-action:last-of-type {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.admin-datetime-action.is-primary {
    background: linear-gradient(135deg, rgba(232, 204, 138, .38), rgba(200, 164, 92, .16));
}
.admin-datetime-panel {
    position: fixed;
    left: 0;
    top: calc(100% + 6px);
    z-index: 1060;
    display: none;
    width: min(100%, 360px);
    min-width: 320px;
    padding: .75rem;
    border: 1px solid var(--gold-light);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
}
.admin-datetime-wrap.is-open .admin-datetime-panel {
    display: block;
}
.admin-datetime-panel.is-open {
    display: block;
}
.admin-datetime-panel-grid {
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr .8fr .8fr;
    gap: .45rem;
    align-items: end;
}
.admin-datetime-panel label {
    display: block;
    margin-bottom: .2rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
}
.admin-datetime-panel select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: #fbfaf6;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-dark) 50%), linear-gradient(135deg, var(--gold-dark) 50%, transparent 50%);
    background-position: calc(100% - 13px) 14px, calc(100% - 8px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--charcoal);
    font-size: .82rem;
    outline: 0;
    padding: .35rem 1.35rem .35rem .5rem;
}
.admin-datetime-panel select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .2);
}
.admin-datetime-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .7rem;
}
.admin-datetime-panel-actions .btn {
    min-height: 32px;
}
.admin-datetime-hint {
    margin-top: .25rem;
    color: var(--text-muted);
    font-size: .72rem;
}

@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.page-header h2, .page-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 600;
}
.page-header h2 .icon, .page-header h3 .icon {
    color: var(--gold);
}
.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.return-list-button {
    min-width: 108px;
    min-height: 38px;
    padding: .45rem .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: .9rem;
    white-space: nowrap;
}
.front-list-header {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(320px, 760px) minmax(96px, 1fr);
    align-items: start;
    column-gap: 1.25rem;
}
.front-list-heading {
    grid-column: 2;
    min-width: 0;
    text-align: center;
}
.front-list-title {
    margin-bottom: .35rem;
    justify-content: center;
}
.front-list-description {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}
.front-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    grid-column: 3;
    margin-left: 0;
}
.front-list-action {
    min-height: 38px;
    padding: .48rem .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: nowrap;
}
.entity-list-search {
    max-width: 760px;
}
.entity-list-search .input-group {
    align-items: stretch;
}
@media (max-width: 576px) {
    .page-header {
        align-items: flex-start;
    }
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    .front-list-header {
        display: flex;
        align-items: flex-start;
        column-gap: 1rem;
    }
    .front-list-heading {
        text-align: center;
        width: 100%;
    }
    .front-list-actions {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
    .front-list-action {
        width: 100%;
    }
    .entity-list-search .input-group {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .5rem;
    }
    .entity-list-search .input-group-text {
        border-radius: var(--radius-sm);
    }
    .entity-list-search .form-control {
        border-radius: var(--radius-sm) !important;
    }
    .entity-list-search .btn {
        grid-column: span 1;
        border-radius: var(--radius-sm) !important;
    }
}

.admin-switch-button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 34px;
    padding: .28rem .68rem .28rem .34rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(31, 41, 55, .06);
    transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.admin-switch-button:hover {
    border-color: var(--gold-light);
    box-shadow: 0 2px 8px rgba(31, 41, 55, .1);
}
.admin-switch-button-track {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .16s ease;
}
.admin-switch-button-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .16s ease;
}
.admin-switch-button.is-on {
    color: #047857;
    border-color: rgba(16, 185, 129, .35);
}
.admin-switch-button.is-on .admin-switch-button-track {
    background: #10b981;
}
.admin-switch-button.is-on .admin-switch-button-thumb {
    transform: translateX(20px);
}
.admin-switch-button.is-off {
    color: #64748b;
}
.admin-switch-button-text {
    white-space: nowrap;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    margin-bottom: 0;
}
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item.active { color: var(--charcoal); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-light); }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty-state .icon {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 1rem;
}
.empty-state h4 {
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.empty-state p {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto 1rem;
}

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(200, 164, 92, 0.15);
    color: var(--gold-dark);
    border: 1px solid rgba(200, 164, 92, 0.3);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tag-chip:hover {
    background: rgba(200, 164, 92, 0.25);
    border-color: var(--gold-light);
}
.tag-chip-wca {
    background: rgba(16,185,129,0.15);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.3);
}
.tag-chip-wca:hover {
    background: rgba(16,185,129,0.25);
    border-color: rgba(16,185,129,0.5);
}
.tag-chip-mass {
    background: rgba(59,130,246,0.15);
    color: #2563eb;
    border: 1px solid rgba(59,130,246,0.3);
}
.tag-chip-mass:hover {
    background: rgba(59,130,246,0.25);
    border-color: rgba(59,130,246,0.5);
}
.tag-chip-limited {
    background: rgba(245,158,11,0.15);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.3);
}
.tag-chip-limited:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gold-light);
}
.stat-card-link {
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.stat-card-link:hover {
    color: inherit;
    text-decoration: none;
}
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.2;
}
.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.stat-card .stat-desc {
    margin-top: .15rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.25;
}
.home-legacy-stats + p {
    display: none;
}

.navbar {
    position: fixed;
    top: var(--site-announcement-height, 0px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 0 1.25rem;
    height: var(--navbar-height);
    z-index: 1050;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.navbar > .container-xl {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}
.admin-top-navbar > .container-xl {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
.navbar-collapse {
    min-width: 0;
}
.navbar .site-user-nav {
    flex: 0 0 auto;
    white-space: nowrap;
    align-items: center;
}
.navbar .site-user-nav .nav-item,
.navbar .site-user-nav .dropdown,
.navbar .site-user-nav .btn,
.navbar .site-user-nav .nav-link,
.navbar .site-user-nav .d-xl-block {
    flex-shrink: 0;
    white-space: nowrap;
}
.site-space-switcher .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    max-width: 210px;
    min-width: 152px;
}
.site-space-current {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-space-menu .dropdown-item.active {
    color: var(--gold-dark);
    background: var(--gold-subtle);
    font-weight: 700;
}
.navbar .site-nav-search {
    position: relative;
    flex: 0 0 270px;
    width: 270px;
    max-width: 270px;
}
.navbar .site-nav-search .input-group {
    width: 100%;
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) {
    background: transparent !important;
    border-bottom-color: transparent;
    box-shadow: none;
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .btn-outline-gold {
    color: var(--gold-light);
    border-color: rgba(232, 204, 138, 0.72);
    background: rgba(255, 255, 255, 0.04);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .btn-gold {
    color: var(--navy);
    background: rgba(232, 204, 138, 0.9);
    border-color: rgba(232, 204, 138, 0.9);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}
.site-main {
    padding-top: calc(var(--navbar-height) + var(--site-announcement-height, 0px));
}
.navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--navy) !important;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-brand .brand-icon {
    color: var(--gold);
    font-size: 1.4rem;
}
.navbar-brand a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.site-navbar-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}
.navbar .nav-link {
    color: var(--charcoal) !important;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    position: relative;
}
.navbar .nav-link:hover {
    color: var(--gold-dark) !important;
    background: var(--gold-subtle);
}
.navbar .nav-link.active {
    color: var(--gold-dark) !important;
}
.navbar .nav-link.active:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}
.navbar .site-primary-nav {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    overflow: visible;
    flex: 1 1 auto;
}
.navbar .site-primary-nav .nav-link {
    white-space: nowrap;
}
.navbar .site-nav-more > .nav-link::after {
    margin-left: .35rem;
}
.navbar .site-nav-more > .nav-link.active {
    background: var(--gold-subtle);
}
.navbar .site-nav-more .dropdown-menu {
    min-width: 180px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
    padding: .35rem;
}
.navbar .site-nav-more .dropdown-item,
.navbar .site-nav-more .site-nav-dropdown-link {
    display: flex;
    align-items: center;
    position: relative;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--charcoal);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar .site-nav-more .dropdown-item.active,
.navbar .site-nav-more .dropdown-item:hover,
.navbar .site-nav-more .site-nav-dropdown-link.active,
.navbar .site-nav-more .site-nav-dropdown-link:hover {
    color: var(--gold-dark) !important;
    background: var(--gold-subtle);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-brand,
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-brand a,
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .nav-link {
    color: rgba(255, 255, 255, 0.86) !important;
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .nav-link:hover,
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .nav-link.active {
    color: var(--gold-light) !important;
    background: rgba(255, 255, 255, 0.08);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .form-control {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .form-control::placeholder {
    color: rgba(255, 255, 255, 0.58);
}
body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .btn-search {
    color: var(--navy);
    background: rgba(232, 204, 138, 0.9);
}
body:not(.has-top-hero) .navbar.navbar-at-top {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
body:not(.has-top-hero) .navbar.navbar-at-top .navbar-brand,
body:not(.has-top-hero) .navbar.navbar-at-top .navbar-brand a,
body:not(.has-top-hero) .navbar.navbar-at-top .nav-link {
    color: var(--charcoal) !important;
}
.navbar .form-control {
    border: 1px solid var(--border);
    color: var(--charcoal);
    font-size: 0.85rem;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    padding: 0.4rem 1rem;
    height: 36px;
    background: var(--cream);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.navbar .form-control::placeholder { color: var(--text-light); }
.navbar .form-control:focus {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.navbar .btn-search {
    background: var(--gold);
    border: none;
    color: var(--navy);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    padding: 0.4rem 0.85rem;
    height: 36px;
    font-weight: 600;
    font-size: 0.85rem;
}
.navbar .btn-search:hover { background: var(--gold-light); }
.navbar-toggler { border: 1px solid var(--border); }

.hero-section {
    background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 40%, var(--navy-light) 100%);
    color: #fff;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin: -1rem -1rem 2.5rem;
    padding: 4rem 1.5rem 3.5rem;
    position: relative;
    overflow: hidden;
}
.site-main > .container-xl > .hero-section:first-child {
    width: 100vw;
    margin-top: calc(-1 * (var(--navbar-height) + 1.5rem));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: calc(5.75rem + var(--navbar-height)) !important;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(200, 164, 92, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.hero-section h1 { color: #fff; font-size: 2.5rem; font-weight: 700; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.hero-section .lead { color: rgba(255,255,255,.65); font-size: 1.05rem; font-weight: 300; position: relative; z-index: 1; }
.home-hero-carousel-section {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.home-hero-carousel {
    position: relative;
    z-index: 1;
    --home-hero-height: 360px;
}
.home-hero-carousel .carousel-inner {
    height: var(--home-hero-height);
}
.home-hero-carousel .carousel-item {
    height: var(--home-hero-height);
    overflow: hidden;
}
.home-hero-slide {
    height: var(--home-hero-height);
    width: min(1120px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 0 4rem 3.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, .62fr);
    gap: 2rem;
    align-items: center;
}
.home-hero-slide-main {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home-hero-slide-main .home-hero-copy {
    width: min(760px, 100%);
    text-align: center;
    margin-inline: auto;
}
.home-hero-slide-main .hero-search {
    margin-left: auto;
    margin-right: auto;
}
.home-hero-slide-main .home-hero-actions {
    justify-content: center;
}
.home-hero-slide-stats {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: .7rem;
}
.home-hero-slide-stats .home-hero-copy {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.home-hero-slide-stats .home-hero-copy h1 {
    margin-bottom: .35rem;
}
.home-hero-slide-stats .home-hero-copy .lead {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.45;
}
.home-hero-copy {
    min-width: 0;
    text-align: left;
}
.home-hero-copy .hero-search {
    margin-left: 0;
    margin-right: 0;
}
.home-hero-slide-main .home-hero-copy .hero-search {
    width: min(640px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.home-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.2rem;
}
.home-hero-feature {
    min-width: 0;
    display: grid;
    gap: .55rem;
    justify-items: center;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.home-hero-feature:hover {
    color: #fff;
    text-decoration: none;
}
.home-hero-feature img {
    width: min(230px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 22px 44px rgba(0,0,0,.22);
    padding: .9rem;
}
.home-hero-feature span {
    color: rgba(255,255,255,.66);
    font-size: .78rem;
    font-weight: 700;
}
.home-hero-feature strong {
    max-width: 260px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    line-height: 1.35;
}
.home-hero-stat-grid {
    width: min(800px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}
.home-hero-stat {
    min-height: 62px;
    padding: .44rem .55rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    backdrop-filter: blur(14px);
}
.home-hero-stat:hover {
    color: #fff;
    border-color: rgba(200,164,92,.72);
    background: rgba(255,255,255,.12);
    text-decoration: none;
}
.home-hero-stat i {
    color: var(--gold);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(200,164,92,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}
.home-hero-stat span {
    color: rgba(255,255,255,.72);
    min-width: 0;
    font-size: .76rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-hero-stat strong {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 800;
}
.home-hero-carousel .carousel-indicators {
    bottom: 1.1rem;
    margin-bottom: 0;
}
.home-hero-carousel .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255,255,255,.42);
}
.home-hero-carousel .carousel-indicators .active {
    background-color: var(--gold);
}
.home-hero-carousel .carousel-control-prev,
.home-hero-carousel .carousel-control-next {
    width: 4rem;
}
.home-content-section {
    margin-bottom: 3rem;
}
.home-content-section .page-header {
    margin-bottom: 1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(184, 134, 11, .14);
}
.home-content-section .page-header h3 {
    font-size: 1.08rem;
    line-height: 1.35;
}
.home-content-section .page-header .btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.hero-search {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 2rem auto 0;
}
.search-suggest-host {
    position: relative;
}
.hero-search .search-suggest-host {
    width: 100%;
}
.hero-search .form-control {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 1rem;
    border-radius: var(--radius-full);
    padding: 0.85rem 1.5rem;
    padding-right: 5rem;
    height: auto;
}
.hero-search .form-control::placeholder { color: rgba(255,255,255,.5); }
.hero-search .form-control:focus { background: rgba(255,255,255,.15); border-color: rgba(200,164,92,.5); box-shadow: 0 0 0 4px rgba(200,164,92,.15), var(--shadow-lg); }
.hero-search .btn-search-hero {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none;
    color: var(--navy);
    border-radius: var(--radius-full);
    padding: 0.55rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.hero-search .btn-search-hero:hover { transform: translateY(-50%) scale(1.03); box-shadow: 0 4px 16px var(--gold-glow); }

.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.search-suggestions .suggestion-item {
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
}
.search-suggestions .suggestion-item:last-child { border-bottom: none; }
.search-suggestions .suggestion-item:hover { background: var(--gold-subtle); }

.card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    overflow: hidden;
}
.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-header .card-header-icon {
    color: var(--gold);
    font-size: 1rem;
}
.card-body { padding: 1.25rem; }

:root {
    --detail-image-surface: #fff;
    --detail-thumb-image-surface: var(--detail-image-surface);
}

.puzzle-card {
    border: 1px solid var(--border-light);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.puzzle-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--gold);
    border-radius: var(--radius-lg);
}
.puzzle-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--cream);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.puzzle-card .card-img-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .08));
    box-shadow: 0 8px 14px -12px rgba(15, 23, 42, .5);
}
.puzzle-card .card-img-wrapper > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(135deg, #f2eee7 0%, #e8dfd1 52%, #f7f5f1 100%);
}
.puzzle-card .card-img-top {
    height: 100%;
    object-fit: cover;
    width: 100%;
    background: linear-gradient(135deg, #f2eee7 0%, #e8dfd1 52%, #f7f5f1 100%);
    transition: opacity .18s ease, transform var(--transition-smooth), filter .18s ease;
    border-radius: inherit;
}
.js .puzzle-card .card-img-top:not(.mofang-img-ready),
.js .series-card .card-img-top:not(.mofang-img-ready),
.js .home-hero-feature img:not(.mofang-img-ready),
.js .entity-card-image img:not(.mofang-img-ready),
.js .manufacturer-card-image img:not(.mofang-img-ready) {
    opacity: 0;
    filter: saturate(.9);
}
.js .mofang-img-host:not(.mofang-img-host-ready)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    transform: translateX(-120%);
    animation: mofang-image-skeleton 1.35s ease-in-out infinite;
    pointer-events: none;
}
.js .mofang-img-host {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f2eee7 0%, #e8dfd1 52%, #f7f5f1 100%);
}
@keyframes mofang-image-skeleton {
    to { transform: translateX(120%); }
}
.puzzle-card:hover .card-img-top { transform: scale(1.05); }
.puzzle-card .card-img-overlay-hover {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(12,26,42,.7) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
}
.puzzle-card:hover .card-img-overlay-hover { opacity: 1; }

.puzzle-card .puzzle-code {
    position: absolute;
    left: .55rem;
    bottom: .52rem;
    z-index: 3;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1.1rem);
    padding: .18rem .55rem .16rem;
    border: 1px solid rgba(200, 164, 92, .38);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .82);
    color: #745215;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
    font-weight: 800;
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.puzzle-card .card-body,
.series-card .card-body {
    padding: 0.9rem;
}

.entity-card-image {
    aspect-ratio: 1 / 1;
    padding: 0.85rem;
    background: linear-gradient(135deg,#f5f0e8 0%,#e8e0d4 50%,#f0ebe3 100%);
    border-bottom: 1px solid #e0d8cc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entity-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.entity-card-image .entity-card-placeholder {
    font-size: 2.5rem;
    color: #c0b8a8;
}

.manufacturer-card-image {
    aspect-ratio: 4 / 3;
    padding: .6rem;
}

.manufacturer-card-image img {
    object-fit: cover;
}

.series-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--gold);
}
.series-card {
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.series-card .home-series-card-body {
    display: grid;
    grid-template-rows: auto minmax(2.65rem, 1fr) auto;
    gap: .45rem;
    flex: 1 1 auto;
}
.home-series-desc {
    min-height: 2.65rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.home-series-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 1.35rem;
}
.home-series-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-series-meta span:last-child {
    text-align: right;
}
.series-cover-link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f8f5ef;
    isolation: isolate;
}
.series-cover-glass {
    position: absolute;
    inset: -18px;
    background-image: linear-gradient(rgba(72,52,25,.16), rgba(72,52,25,.16)), var(--series-cover);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.08);
    transform: scale(1.08);
    z-index: 0;
}
.series-cover-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,.2), rgba(72,52,25,.18));
    z-index: 1;
    pointer-events: none;
}
.series-cover-empty {
    background: #f8f5ef;
}
.series-cover-empty::after {
    display: none;
}
.series-cover-placeholder {
    padding: 1.35rem;
    object-fit: contain;
    filter: none;
    opacity: .82;
}
.series-cover-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .45rem;
    filter: drop-shadow(0 8px 18px rgba(38, 28, 14, .22));
    transition: transform .18s ease, opacity .18s ease;
}
.series-cover-link:hover .series-cover-image {
    transform: scale(1.015);
    opacity: .96;
}
.series-summary {
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}
.content-card-subtitle {
    min-height: 1.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.content-card-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.series-card-img {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    background: var(--cream);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.series-card-img .card-img-top {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: inherit;
}
.series-card-img-empty {
    background: #f8f5ef;
}
.series-card-img .series-card-placeholder {
    object-fit: cover;
    filter: none;
}

.timeline-preview {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 2rem 1.5rem;
}
.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    transform: translateY(-50%);
}
.timeline-point {
    text-align: center;
    position: relative;
}
.timeline-preview .timeline-marker {
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-radius: 50%;
    margin: 0 auto 0.5rem;
}
.home-timeline-preview {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 0;
    position: relative;
    overflow-x: auto;
    padding: .45rem .35rem 1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    min-height: 12rem;
    align-items: stretch;
}
.home-timeline-preview::before {
    content: none;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 3.65rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(202,168,106,.16), rgba(202,168,106,.82) 16%, rgba(202,168,106,.82) 84%, rgba(202,168,106,.16));
}
.home-timeline-item {
    position: relative;
    display: grid;
    grid-template-rows: 2.35rem 1.75rem minmax(6.8rem, auto);
    gap: 0;
    min-height: 11.2rem;
    padding: 0 .75rem .2rem;
    color: inherit;
    text-decoration: none;
    border: 0;
    background: transparent;
    scroll-snap-align: start;
}
.home-timeline-item::before {
    content: "";
    position: absolute;
    top: 3.65rem;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(202,168,106,.72);
}
.home-timeline-item:first-child::before {
    left: 50%;
    background: linear-gradient(to right, rgba(202,168,106,.16), rgba(202,168,106,.72) 28%);
}
.home-timeline-item:last-child::before {
    right: 50%;
    background: linear-gradient(to right, rgba(202,168,106,.72) 72%, rgba(202,168,106,.16));
}
.home-timeline-item:only-child::before {
    left: 50%;
    right: 50%;
    width: 0;
}
.home-timeline-item:hover {
    color: inherit;
    text-decoration: none;
}
.home-timeline-item::after {
    content: "";
    position: absolute;
    top: 3.65rem;
    left: 50%;
    width: 1px;
    height: 1.15rem;
    background: rgba(202,168,106,.5);
    transform: translateX(-50%);
}
.home-timeline-date {
    color: var(--gold-dark);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    align-self: end;
    padding: 0 .15rem .55rem;
}
.home-timeline-marker {
    width: 1rem;
    height: 1rem;
    justify-self: center;
    align-self: start;
    margin-top: .78rem;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(202,168,106,.68), 0 6px 14px rgba(64,48,22,.14);
    z-index: 2;
}
.home-timeline-content {
    min-width: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    text-align: left;
    padding: .55rem .65rem;
    border: 1px solid rgba(202,168,106,.22);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fff, rgba(255,250,240,.72));
    box-shadow: 0 8px 18px rgba(38,30,18,.06);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.home-timeline-item:hover .home-timeline-content {
    border-color: rgba(202,168,106,.58);
    box-shadow: 0 12px 24px rgba(38,30,18,.11);
    transform: translateY(-1px);
}
.home-timeline-thumb {
    width: 72px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(202,168,106,.24);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.home-timeline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-timeline-text {
    min-width: 0;
    display: grid;
    gap: .32rem;
}
.home-timeline-type {
    width: fit-content;
    padding: .1rem .48rem;
    border-radius: 999px;
    background: rgba(202,168,106,.12);
    color: var(--gold-dark);
    font-size: .72rem;
    font-weight: 700;
}
.home-timeline-content strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    font-size: .9rem;
}
.home-timeline-summary,
.home-timeline-meta {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.home-timeline-summary {
    -webkit-line-clamp: 2;
}
.home-timeline-meta {
    -webkit-line-clamp: 1;
}
@media (max-width: 575.98px) {
    .home-timeline-preview {
        grid-auto-columns: minmax(210px, 82%);
    }
    .home-timeline-item {
        min-height: 11rem;
        padding-left: .55rem;
        padding-right: .55rem;
    }
    .home-timeline-date {
        font-size: .74rem;
    }
    .home-timeline-content {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: .55rem;
    }
    .home-timeline-thumb {
        width: 64px;
    }
}

.text-bronze { color: #cd7f32 !important; }
.badge-rank { min-width: 24px; }
.home-leaderboard-strip {
    display: grid;
    grid-template-columns: repeat(10, minmax(82px, 1fr));
    gap: .75rem;
    overflow-x: auto;
    padding: .2rem .15rem .45rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.home-leaderboard-item {
    position: relative;
    min-width: 82px;
    min-height: 132px;
    padding: .45rem .35rem .55rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,241,228,.7));
    color: var(--text-main);
    display: grid;
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    align-content: start;
    gap: .32rem;
    text-align: center;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.home-leaderboard-item:hover {
    color: var(--text-main);
    border-color: rgba(184, 134, 11, .38);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transform: translateY(-2px);
}
.home-leaderboard-rank {
    min-width: 28px;
    height: 22px;
    padding: 0 .45rem;
    border-radius: 999px;
    background: rgba(107, 114, 128, .12);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
.home-leaderboard-avatar {
    width: 72px;
    height: 72px;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: var(--cream);
    background-position: center;
    background-size: cover;
    box-shadow: 0 8px 18px rgba(31, 41, 55, .14);
}
.home-leaderboard-name {
    width: 100%;
    min-width: 0;
    color: var(--charcoal);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-leaderboard-score {
    color: var(--gold-dark);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1;
}
.home-leaderboard-score::after {
    content: " 分";
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
}
.home-leaderboard-item.is-first {
    border-color: rgba(218, 165, 32, .45);
    background: linear-gradient(180deg, rgba(255,248,220,.98), rgba(255,255,255,.9));
}
.home-leaderboard-item.is-second {
    border-color: rgba(148, 163, 184, .5);
}
.home-leaderboard-item.is-third {
    border-color: rgba(205, 127, 50, .42);
}
.home-leaderboard-item.is-first .home-leaderboard-rank {
    background: rgba(218, 165, 32, .16);
    color: #a16207;
}
.home-leaderboard-item.is-second .home-leaderboard-rank {
    background: rgba(148, 163, 184, .16);
    color: #64748b;
}
.home-leaderboard-item.is-third .home-leaderboard-rank {
    background: rgba(205, 127, 50, .16);
    color: #9a3412;
}

.gallery-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.gallery-thumb-sm { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.gallery-filter-form {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fbfaf6;
}
.gallery-filter-form .form-label {
    font-weight: 700;
    color: var(--text-muted);
}
.gallery-filter-control {
    min-height: 34px;
    border-radius: var(--radius-sm);
    background-color: #fff;
}
.gallery-filter-form .select2-container--default .select2-selection--single {
    min-height: 34px;
    border-color: var(--border) !important;
    background: #fff !important;
}
.gallery-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: 32px;
    color: var(--charcoal);
    font-size: 0.84rem;
}
.gallery-filter-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 32px;
}
.gallery-filter-form .select2-container--default.select2-container--focus .select2-selection--single,
.gallery-filter-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 0 0.12rem rgba(191, 144, 0, 0.12) !important;
}
.gallery-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gallery-filter-actions .btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gallery-batch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}
.gallery-batch-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--charcoal);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.gallery-batch-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--gold);
}
.gallery-batch-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.gallery-batch-count {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}
.gallery-select-box {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    z-index: 2;
    margin: 0;
    cursor: pointer;
}
.gallery-select-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gallery-select-mark {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.92);
    color: transparent;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.gallery-select-input:checked + .gallery-select-mark {
    border-color: var(--gold-dark);
    background: var(--gold);
    color: var(--navy);
}
@media (max-width: 576px) {
    .gallery-batch-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .gallery-batch-actions {
        justify-content: space-between;
    }
}
.gallery-col { min-width: 0; }
.gallery-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #dfe3e8;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gallery-card:hover {
    border-color: #c9b57c;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1);
    transform: translateY(-1px);
}
.gallery-card * {
    min-width: 0;
}
.gallery-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: block;
    background: #f5f6f7;
    border-bottom: 1px solid #e7e9ec;
}
.gallery-card-img-contain {
    object-fit: contain;
    background: #fff;
    padding: 0.8rem;
}
.gallery-card-body {
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem;
    text-align: left;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
}
.gallery-card-title,
.gallery-card-meta,
.gallery-card-note {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-card-title {
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text-main);
}
.gallery-card-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 0.2rem;
}
.gallery-card-note {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.25;
    margin-top: 0.3rem;
}
.gallery-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: 0.35rem;
    min-width: 0;
}
.gallery-source-pill {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 65%;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
}
.gallery-source-puzzle {
    color: #206a43;
    background: #edf8f1;
    border-color: #cfe8d8;
}
.gallery-source-series {
    color: #0f5c72;
    background: #eaf7fb;
    border-color: #c8e6ef;
}
.gallery-source-style {
    color: #5b4b88;
    background: #f2f0fb;
    border-color: #d8d2ef;
}
.gallery-source-cabinet {
    color: #684b13;
    background: #fff5df;
    border-color: #efdba9;
}
.gallery-source-identification {
    color: #70411a;
    background: #fff1e7;
    border-color: #f0d0b8;
}
.gallery-source-brand {
    color: #5b3d78;
    background: #f5effa;
    border-color: #dfd0eb;
}
.gallery-source-manufacturer {
    color: #34495e;
    background: #eef3f7;
    border-color: #d4dde6;
}
.gallery-source-designer {
    color: #6b3f56;
    background: #fbedf3;
    border-color: #ead0dc;
}
.gallery-source-site {
    color: #1d5c63;
    background: #eaf8f8;
    border-color: #c8e7e8;
}
.gallery-source-badge {
    color: #745215;
    background: #fff7df;
    border-color: #ecd99f;
}
.gallery-source-orphan {
    color: #7a3d25;
    background: #fff0e8;
    border-color: #efc7b3;
}
.gallery-status-text {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
}
.gallery-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #adb5bd;
    flex: 0 0 auto;
}
.gallery-status-text.is-used .gallery-status-dot {
    background: #d4a017;
}
.gallery-status-text.is-unused .gallery-status-dot {
    background: #8b949e;
}
.gallery-primary-row {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 22px;
    margin-top: 0.32rem;
    padding: 0 0.45rem;
    border: 1px solid #ead3a1;
    border-radius: 999px;
    background: #fff8e8;
    color: #8a6425;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-primary-row i {
    color: #d4a017;
    flex: 0 0 auto;
}
.gallery-card form {
    display: block;
    max-width: 100%;
    margin-top: 0.35rem;
}
.gallery-card .btn,
.gallery-card .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-preview-item { width: 80px; }
.gallery-preview-img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }

.video-library-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #dfe3e8;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.video-library-card:hover {
    border-color: #c9b57c;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1);
    transform: translateY(-1px);
}
.video-library-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid #e7e9ec;
    background: #111827;
}
.video-library-preview iframe,
.video-library-preview video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111827;
}
.video-library-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(135deg, #202633, #111827);
    font-size: 0.82rem;
}
.video-library-placeholder i {
    font-size: 1.4rem;
    color: var(--gold);
}
.video-library-external {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.2), transparent 30%),
        linear-gradient(135deg, #202633, #111827);
}
.video-library-external:hover {
    color: #fff;
}
.video-library-external::after {
    content: "";
    position: absolute;
    inset: auto -15% -35% -15%;
    height: 55%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(-8deg);
}
.video-external-top {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.video-external-logo {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.video-external-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}
.video-external-play {
    display: none !important;
}
.video-external-platform,
.video-external-text {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 82%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-external-platform {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    font-weight: 800;
}
.video-external-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
}
.video-external-bilibili { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.24), transparent 30%), linear-gradient(135deg, #00a1d6, #1677ff); }
.video-external-youtube { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, #ff0033, #9f1239); }
.video-external-tencent { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, #00a66a, #047857); }
.video-external-youku { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.24), transparent 30%), linear-gradient(135deg, #1597ff, #f53680); }
.video-external-iqiyi { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, #00be06, #15803d); }
.video-external-douyin { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 30%), linear-gradient(135deg, #111827, #020617 58%, #e11d48); }
.video-external-ixigua { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, #ff4d4f, #b91c1c); }
.video-external-weibo { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, #f59e0b, #dc2626); }
.video-external-external { background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 30%), linear-gradient(135deg, #6b7280, #111827); }
.video-library-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0.75rem;
    background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
}
.video-library-card * {
    min-width: 0;
}
.video-library-title {
    overflow: hidden;
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-library-owner {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.2;
    text-decoration: none;
}
.video-library-owner span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-library-owner:hover {
    color: var(--gold-dark);
}
.video-library-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.video-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.45rem;
    max-width: 100%;
    padding: 0.1rem 0.45rem 0.1rem 0.18rem;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    background: #fff;
    color: var(--text-main);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    vertical-align: middle;
}
.video-platform-badge > span:not(.video-platform-logo) {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    line-height: 18px;
}
.video-platform-logo {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    overflow: hidden;
    border-radius: 5px;
    background: #6b7280;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
}
.video-platform-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.video-platform-bilibili .video-platform-logo { background: #00a1d6; }
.video-platform-youtube .video-platform-logo { background: #ff0033; }
.video-platform-tencent .video-platform-logo { background: #00a66a; }
.video-platform-youku .video-platform-logo { background: linear-gradient(135deg, #1597ff, #f53680); }
.video-platform-iqiyi .video-platform-logo { background: #00be06; }
.video-platform-douyin .video-platform-logo { background: #111827; }
.video-platform-ixigua .video-platform-logo { background: #ff4d4f; }
.video-platform-weibo .video-platform-logo { background: #f59e0b; }
.video-platform-local .video-platform-logo { background: var(--gold-dark); color: var(--navy); }
.video-platform-external .video-platform-logo { background: #6b7280; }
.video-governance-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(92px, 1fr)) auto;
    gap: 0.5rem;
    align-items: stretch;
}
.video-governance-item {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-muted);
    text-decoration: none;
}
.video-governance-item span {
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-governance-item strong {
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.25;
}
.video-governance-item:hover,
.video-governance-item.active {
    border-color: rgba(191, 144, 0, 0.35);
    background: rgba(191, 144, 0, 0.06);
    color: var(--gold-dark);
}
.video-governance-action {
    display: flex;
    align-items: stretch;
}
.video-governance-action .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    white-space: nowrap;
}
.video-library-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    margin-top: 0.5rem;
    color: var(--gold-dark);
    font-size: 0.74rem;
    line-height: 1.2;
    text-decoration: none;
}
.video-library-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-library-link:hover {
    color: var(--gold);
}
.video-link-repair-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.55fr) auto;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.55rem;
    padding: 0.55rem;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(220, 53, 69, 0.04);
}
.video-link-repair-form .btn {
    white-space: nowrap;
}
.video-governance-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.3;
}
.video-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.video-add-row {
    display: grid;
    gap: 0.55rem;
    align-items: end;
}
.video-add-row-main {
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
}
.video-add-row-source {
    grid-template-columns: minmax(280px, 1fr) minmax(170px, 0.35fr);
}
.video-add-row-description {
    grid-template-columns: minmax(0, 1fr);
}
.video-add-field,
.video-add-submit,
.video-add-platform {
    min-width: 0;
}
.video-add-source {
    grid-column: 1;
}
.video-add-platform-field {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}
.video-add-source-warning {
    grid-column: 1;
    grid-row: 2;
}
.video-add-form .form-control,
.video-add-form .form-select,
.video-add-form .select2-container {
    width: 100% !important;
}
.video-add-actions {
    display: flex;
    justify-content: flex-end;
}
.video-add-warning {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(220, 53, 69, 0.22);
    border-radius: var(--radius-sm);
    background: rgba(220, 53, 69, 0.06);
    color: #9f1239;
    font-size: 0.78rem;
    line-height: 1.35;
}
.video-add-warning a {
    color: #7f1d1d;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.video-add-warning a:hover {
    color: #b91c1c;
}
.video-add-actions .btn {
    min-width: 4.5rem;
    height: 31px;
    white-space: nowrap;
}
.video-add-platform,
.video-platform-detect {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: calc(1.5em + 1rem + 2px);
    min-height: calc(1.5em + 1rem + 2px);
    overflow: hidden;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.video-add-platform .video-platform-logo {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}
.video-add-platform.is-recognized {
    border-color: rgba(25, 135, 84, 0.22);
    background: rgba(25, 135, 84, 0.06);
}
.video-add-platform.is-unrecognized {
    border-color: rgba(108, 117, 125, 0.2);
    background: #fafafa;
}
.video-platform-detect-label {
    flex: 0 0 auto;
    color: var(--text-light);
}
.video-platform-detect-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-library-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-light);
}
.btn.video-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    line-height: 1.2;
    flex: 0 0 2rem;
}
.btn.video-action-btn i {
    line-height: 1;
}
.video-action-danger {
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
}
.video-action-danger:hover {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}
@media (max-width: 576px) {
    .video-link-repair-form {
        grid-template-columns: 1fr;
    }
    .video-governance-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .video-governance-action {
        grid-column: 1 / -1;
    }
    .video-governance-action .btn {
        width: 100%;
    }
    .video-add-row {
        grid-template-columns: 1fr;
    }
    .video-add-source,
    .video-add-platform-field,
    .video-add-source-warning {
        grid-column: auto;
        grid-row: auto;
    }
    .video-add-actions {
        justify-content: stretch;
    }
    .video-add-actions .btn {
        width: 100%;
    }
    .video-library-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .video-library-footer .d-flex {
        justify-content: space-between;
    }
    .btn.video-action-btn {
        flex: 0 0 2rem;
    }
}

@media (min-width: 577px) and (max-width: 767.98px) {
    .video-link-repair-form {
        grid-template-columns: 1fr;
    }
    .video-governance-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .video-governance-action {
        grid-column: 1 / -1;
    }
    .video-governance-action .btn {
        width: 100%;
    }
    .video-add-row-main,
    .video-add-row-source,
    .video-add-row-description {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .video-add-source {
        grid-column: 1;
    }
    .video-add-platform-field {
        grid-column: 2;
        grid-row: 1;
    }
    .video-add-source-warning {
        grid-column: 1;
        grid-row: 2;
    }
    .video-add-row-description .video-add-description {
        grid-column: 1 / -1;
    }
}

.info-table td:first-child {
    width: 100px;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    font-weight: 500;
}
.info-table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    font-size: 0.9rem;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--navy);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    font-size: 0.88rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--gold-glow);
    color: var(--navy);
}
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
    color: var(--gold);
    border: 1.5px solid var(--gold);
    background-color: transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    padding: 0.45rem 1.5rem;
    font-size: 0.88rem;
    transition: background-color var(--transition-base), color var(--transition-base);
}
.btn-outline-gold:hover { background-color: var(--gold); color: var(--navy); }

.merge-split-diagram {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .85rem 1rem;
    background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.merge-split-diagram-embedded {
    border: 1px solid rgba(122, 112, 98, .16);
    border-radius: 8px;
}

.merge-split-party {
    min-width: 0;
    display: grid;
    gap: .65rem;
    flex: 0 0 auto;
    max-width: none;
}

.merge-split-party-label {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    color: #6b5d48;
    font-size: .76rem;
    font-weight: 900;
}

.merge-split-node-grid {
    display: flex;
    gap: .55rem;
    min-width: 0;
    max-width: 100%;
    padding: .05rem .05rem .3rem;
    justify-content: flex-start;
}

.merge-split-node {
    flex: 0 0 210px;
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: .55rem;
    row-gap: .12rem;
    align-items: center;
    padding: .45rem .5rem;
    min-height: 68px;
    border: 1px solid rgba(122, 112, 98, .18);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(32, 28, 24, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.merge-split-node:hover {
    color: inherit;
    border-color: rgba(42, 112, 111, .58);
    box-shadow: 0 10px 20px rgba(32, 28, 24, .1);
    transform: translateY(-1px);
    text-decoration: none;
}

.merge-split-node.is-placeholder {
    background: #f8f7f3;
}

.merge-split-node-image {
    display: block;
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 1px solid rgba(122, 112, 98, .16);
    background: #f0eee8;
    overflow: hidden;
}

.merge-split-node-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.merge-split-node-code {
    position: static;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(42, 112, 111, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #1f6363;
    font-size: .68rem;
    font-weight: 900;
    padding: .08rem .45rem;
}

.merge-split-node strong {
    min-width: 0;
    color: #24211d;
    font-size: .82rem;
    line-height: 1.24;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.merge-split-connector {
    flex: 0 0 84px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    color: #8a5c13;
    font-weight: 900;
}

.merge-split-connector::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: rgba(138, 92, 19, .55);
}

.merge-split-connector::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(138, 92, 19, .7);
    border-right: 2px solid rgba(138, 92, 19, .7);
    transform: translateY(-50%) rotate(45deg);
}

.merge-split-connector span {
    position: relative;
    z-index: 1;
    background: #fbfaf7;
    border: 1px solid rgba(138, 92, 19, .28);
    border-radius: 999px;
    padding: .18rem .65rem;
    font-size: .74rem;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .merge-split-diagram {
        display: grid;
        grid-template-columns: 1fr;
    }

    .merge-split-party {
        max-width: 100%;
    }

    .merge-split-connector {
        flex-basis: auto;
        min-height: 42px;
        padding: .2rem 0;
    }

    .merge-split-connector::before {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        background: rgba(138, 92, 19, .55);
    }

    .merge-split-connector::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%) rotate(135deg);
    }
}

@media (max-width: 576px) {
    .merge-split-node {
        flex-basis: 190px;
    }
}

.filter-sidebar .card {
    position: sticky;
    top: calc(var(--navbar-height) + 1rem);
    border: 1px solid var(--border);
}
.filter-section {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.filter-section:last-child { border-bottom: none; margin-bottom: 0; }
.filter-title {
    color: var(--charcoal);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
}
.filter-scroll {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-light) transparent;
}
.filter-scroll::-webkit-scrollbar { width: 4px; }
.filter-scroll::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 2px; }
.filter-section .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.filter-section .form-check-input:focus { box-shadow: 0 0 0 3px var(--gold-glow); border-color: var(--gold); }

.front-control-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .48rem 1rem;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.front-control-button:hover,
.front-control-button:focus {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .09);
}
.front-control-button-compact {
    min-width: 68px;
    min-height: 32px;
    padding: .35rem .7rem;
    font-size: .82rem;
}
.front-control-select {
    width: auto;
    min-width: 136px;
    min-height: 36px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    border-radius: 7px;
    background-color: #fff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15, 23, 42, .04);
}
.front-control-select:hover {
    border-color: rgba(200, 164, 92, .45);
}
.front-control-label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.front-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .72rem .85rem;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,248,.9));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(15, 23, 42, .035);
}
.front-list-count {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--text-muted);
    font-size: .88rem;
}
.front-list-count strong {
    color: var(--gold-dark);
    font-weight: 800;
}
.front-list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.front-list-controls .select2-container {
    flex: 0 0 auto;
    width: 152px !important;
    min-width: 152px;
}
.front-list-controls .select2-container--default .select2-selection--single {
    min-height: 36px;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15, 23, 42, .04);
}
.front-list-controls .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: 34px;
    padding-left: .7rem;
    color: var(--charcoal);
    font-weight: 700;
    line-height: 34px;
}
.front-list-controls .select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 34px;
}
.front-filter-sidebar .card {
    border-color: rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px rgba(15, 23, 42, .055);
}
.front-filter-sidebar .card-header {
    padding: .78rem .95rem;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    border-bottom-color: rgba(226, 232, 240, .84);
}
.front-filter-mobile-toggle {
    min-width: 0;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font: inherit;
    font-weight: 800;
    text-align: left;
}
.front-filter-mobile-toggle span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.front-filter-toggle-icon {
    flex: 0 0 auto;
    transition: transform var(--transition-fast);
}
.front-filter-mobile-toggle[aria-expanded="true"] .front-filter-toggle-icon {
    transform: rotate(180deg);
}
.front-filter-sidebar .card-body {
    padding: .9rem .95rem .95rem;
}
.front-filter-sidebar .filter-section {
    padding-bottom: .75rem;
    margin-bottom: .75rem;
}
.front-filter-sidebar .filter-title {
    min-height: 32px;
    margin-bottom: .3rem;
    padding: .2rem .35rem;
    border-radius: 6px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.front-filter-sidebar .filter-title:hover,
.front-filter-sidebar .filter-title:focus {
    background: rgba(200, 164, 92, .07);
    color: var(--gold-dark);
}
.front-filter-sidebar .filter-title span {
    flex: 1 1 auto;
}
.front-filter-sidebar .form-check {
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .08rem;
    padding: .18rem .34rem .18rem 0;
    border-radius: 6px;
    transition: background-color var(--transition-fast);
}
.front-filter-sidebar .form-check:hover {
    background: rgba(15, 23, 42, .025);
}
.front-filter-sidebar .form-check.ms-3 {
    margin-left: .9rem !important;
}
.front-filter-sidebar .form-check-input {
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
    margin: 0;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04);
}
.front-filter-sidebar .form-check-input:hover {
    border-color: rgba(200, 164, 92, .72);
}
.front-filter-sidebar .form-check-input:checked {
    background-color: var(--gold-dark);
    border-color: var(--gold-dark);
}
.front-filter-sidebar .form-check-input:checked + .form-check-label {
    color: var(--charcoal);
    font-weight: 700;
}
.front-filter-sidebar .form-check-label {
    min-width: 0;
    color: var(--charcoal-light);
    font-size: .84rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: color var(--transition-fast), font-weight var(--transition-fast);
}
.front-filter-sidebar .filter-scroll {
    max-height: 220px;
    padding-right: .2rem;
}
.puzzle-index-toolbar {
    position: relative;
}
.front-puzzle-form {
    --front-form-border: rgba(226, 232, 240, .95);
    --front-form-surface: rgba(255, 255, 255, .96);
}
.front-puzzle-form > .row {
    row-gap: 1rem;
}
.front-puzzle-form.card,
.front-puzzle-form .card {
    border: 1px solid var(--front-form-border);
    border-radius: var(--radius-md);
    background: var(--front-form-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px rgba(15, 23, 42, .045);
    overflow: visible;
}
.front-puzzle-form .card-header {
    min-height: 46px;
    padding: .78rem .95rem;
    border-bottom-color: rgba(226, 232, 240, .84);
    background: linear-gradient(180deg, #fff, #fbfaf8);
    color: var(--charcoal);
    font-size: .9rem;
    font-weight: 800;
}
.front-puzzle-form .card-header .card-header-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(200, 164, 92, .12);
    color: var(--gold-dark);
}
.front-puzzle-form.card > .card-body,
.front-puzzle-form .card-body {
    padding: 1rem;
}
.front-puzzle-form .form-label {
    color: var(--charcoal-light);
    font-size: .78rem;
    font-weight: 800;
}
.front-puzzle-form .form-control,
.front-puzzle-form .form-select,
.front-puzzle-form .alias-tag-box {
    min-height: 36px;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15, 23, 42, .035);
}
.front-puzzle-form .form-control:hover,
.front-puzzle-form .form-select:hover,
.front-puzzle-form .alias-tag-box:hover {
    border-color: rgba(200, 164, 92, .38);
}
.front-puzzle-form .form-control:focus,
.front-puzzle-form .form-select:focus,
.front-puzzle-form .alias-tag-box:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, .18);
}
.front-puzzle-form .select2-container--default .select2-selection--single,
.front-puzzle-form .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15, 23, 42, .035);
}
.front-puzzle-form .select2-container--default.select2-container--focus .select2-selection--single,
.front-puzzle-form .select2-container--default.select2-container--focus .select2-selection--multiple,
.front-puzzle-form .select2-container--default.select2-container--open .select2-selection--single,
.front-puzzle-form .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(200, 164, 92, .16) !important;
}
.front-puzzle-form .alias-tag {
    border-color: rgba(200, 164, 92, .26);
    background: rgba(200, 164, 92, .09);
    color: #745215;
}
.front-puzzle-create-form .create-inline-field {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: stretch !important;
    gap: 0 !important;
    min-width: 0;
}
.front-puzzle-create-form .create-inline-field > .create-inline-label,
.front-puzzle-create-form .create-inline-field > .form-label:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 38px;
    height: auto;
    margin: 0 !important;
    padding: 0 .45rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: #fbfaf8;
    color: var(--charcoal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem !important;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}
.front-puzzle-create-form .create-inline-field .edit-label-text {
    display: block;
    width: 100%;
    text-align: justify;
    text-align-last: justify;
}
.front-puzzle-create-form .create-inline-field > .form-control,
.front-puzzle-create-form .create-inline-field > .form-select,
.front-puzzle-create-form .create-inline-field > .alias-tag-box,
.front-puzzle-create-form .create-inline-field > .select2-container,
.front-puzzle-create-form .create-inline-field > div:has(> .form-select),
.front-puzzle-create-form .create-inline-field > div:has(> .select2-container) {
    grid-column: 2;
    min-width: 0;
    width: 100% !important;
}
.front-puzzle-create-form .create-inline-field > .form-control,
.front-puzzle-create-form .create-inline-field > .form-select,
.front-puzzle-create-form .create-inline-field > .alias-tag-box,
.front-puzzle-create-form .create-inline-field > .select2-container .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.front-puzzle-create-form .create-inline-field > .select2-container--default .select2-selection--single,
.front-puzzle-create-form .create-inline-field > .select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border-left-color: rgba(226, 232, 240, .95) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.front-puzzle-create-form .create-inline-field > .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}
.front-puzzle-create-form .create-inline-field > div:has(> .select2-container) > .select2-container {
    width: 100% !important;
}
.front-puzzle-create-form .create-inline-field > div:has(> .select2-container) .select2-selection {
    min-height: 38px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.front-puzzle-create-form .create-inline-field > .text-danger {
    grid-column: 2;
}
.front-puzzle-create-form .create-inline-field > select.select2-hidden-accessible {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.front-puzzle-create-form .create-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem .85rem !important;
    margin: .75rem 0 0 !important;
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.front-puzzle-create-form .basic-name-row.create-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    grid-auto-rows: auto;
    overflow: visible;
}
.front-puzzle-create-form .basic-name-row.create-compact-grid:has([data-valmsg-for="Name"].field-validation-error) {
    margin-bottom: 1.05rem !important;
}
.front-puzzle-create-form .basic-name-row.create-compact-grid > [class*="col-"] {
    position: relative;
}
.front-puzzle-create-form .basic-name-row.create-compact-grid [data-valmsg-for="Name"] {
    position: absolute;
    left: 0;
    top: calc(100% + .15rem);
    z-index: 2;
    display: block;
    font-size: .76rem;
    line-height: 1.2;
    white-space: normal;
    max-width: 100%;
    pointer-events: none;
}
.front-puzzle-create-form .create-compact-grid:first-child {
    margin-top: 0 !important;
}
.front-puzzle-create-form .create-compact-grid > [class*="col-"],
.front-puzzle-create-form .create-compact-grid > .mt-1 {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    min-width: 0;
}
.front-puzzle-create-form .create-compact-grid + .create-compact-grid {
    margin-top: .75rem !important;
}
.front-puzzle-create-form .create-compact-grid .create-inline-field {
    height: 100%;
    width: 100%;
    align-items: stretch !important;
}
.front-puzzle-create-form .create-compact-grid .create-inline-field > .create-inline-label {
    height: auto;
}
.front-puzzle-create-form .create-compact-grid .create-inline-field > .form-control,
.front-puzzle-create-form .create-compact-grid .create-inline-field > .form-select,
.front-puzzle-create-form .create-compact-grid .create-inline-field > .alias-tag-box,
.front-puzzle-create-form .create-compact-grid .create-inline-field > .select2-container,
.front-puzzle-create-form .create-compact-grid .create-inline-field > div:has(> .select2-container) {
    height: auto;
    min-height: 38px;
    align-self: stretch;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default {
    display: flex;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default .selection {
    display: flex;
    width: 100%;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default .select2-selection--multiple {
    height: 100% !important;
    min-height: 38px !important;
    overflow: visible;
    align-items: center;
}
.front-puzzle-create-form .create-compact-grid .select2-selection--multiple .select2-selection__rendered {
    height: 100% !important;
    min-height: 36px !important;
    flex-wrap: wrap;
    overflow: visible;
    align-content: center;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default .select2-selection--multiple:has(.select2-selection__choice:nth-of-type(n+4)) {
    min-height: 64px !important;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default .select2-selection--single {
    height: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    width: 100%;
}
.front-puzzle-create-form .create-compact-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.2;
    display: flex;
    align-items: center;
}
.front-puzzle-create-form .create-compact-grid .select2-search--inline {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 3px;
    overflow: hidden;
}
.front-puzzle-create-form .create-compact-grid .select2-search--inline .select2-search__field {
    min-width: 0;
    max-width: 3px;
    text-align: left;
}
.front-puzzle-create-form .create-compact-grid .alias-tag-input {
    align-self: center;
    text-align: left;
}
.front-puzzle-create-form .create-inline-field > .form-control:focus,
.front-puzzle-create-form .create-inline-field > .form-select:focus,
.front-puzzle-create-form .create-inline-field > .alias-tag-box:focus-within,
.front-puzzle-create-form .create-inline-field .select2-container--focus .select2-selection,
.front-puzzle-create-form .create-inline-field .select2-container--open .select2-selection {
    position: relative;
    z-index: 1;
}
.front-puzzle-create-form .create-switch-row {
    align-items: center;
}
.front-puzzle-create-form .create-switch-row .form-check {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-left: 2.35rem;
}
.front-puzzle-create-form .style-action-row {
    flex-wrap: wrap;
    align-items: center;
}
.front-puzzle-create-form .style-action-btn {
    min-height: 28px !important;
    padding: .22rem .52rem !important;
    gap: .22rem;
    border-radius: 7px !important;
    font-size: .72rem !important;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
.front-puzzle-create-form .style-remove-btn {
    align-self: flex-start;
}
.front-puzzle-create-form .style-editor-block {
    margin: 0 !important;
}
.front-puzzle-create-form .style-section-field {
    display: block;
    min-width: 0;
}
.front-puzzle-create-form .style-section-label {
    display: none;
}
.front-puzzle-create-form .style-section-control {
    min-width: 0;
}
.front-puzzle-create-form .style-tabs-wrap {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: end;
    gap: 6px;
    min-height: 46px;
    margin-bottom: 0 !important;
    padding: 7px 7px 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--cream);
    overflow-y: hidden;
}
.front-puzzle-create-form .style-tabs-wrap:not(.has-overflow) {
    grid-template-columns: 0 minmax(0, 1fr) 0;
}
.front-puzzle-create-form .style-tabs-wrap:not(.has-overflow) .style-tabs-scroll {
    visibility: hidden;
    width: 0;
    border: 0;
    margin: 0;
}
.front-puzzle-create-form .style-tabs {
    display: flex;
    align-items: flex-end;
    height: 38px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.front-puzzle-create-form .style-tabs::-webkit-scrollbar {
    display: none;
}
.front-puzzle-create-form .style-tab {
    box-sizing: border-box;
    height: 38px;
    max-width: 196px;
    min-width: 96px;
    border: 1px solid var(--border);
    border-bottom-color: var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: #fbfaf6;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 5px;
    flex: 0 0 auto;
    text-align: left;
    line-height: 1;
    margin-bottom: -1px;
}
.front-puzzle-create-form .style-tabs .style-tab + .style-tab,
.front-puzzle-create-form .style-tabs .style-tab + .style-add-tab {
    margin-left: 4px;
}
.front-puzzle-create-form .style-tab.active,
.front-puzzle-create-form .style-add-tab:hover {
    border-color: var(--border);
    border-bottom-color: var(--white);
    background: var(--white);
    color: var(--gold-dark);
}
.front-puzzle-create-form .style-add-tab {
    color: var(--gold-dark);
    cursor: pointer;
}
.front-puzzle-create-form .style-tab-thumb {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    overflow: hidden;
    background: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.front-puzzle-create-form .style-tab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.front-puzzle-create-form .style-tab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    flex: 1 1 auto;
}
.front-puzzle-create-form .style-tab-remove {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 20px;
    line-height: 1;
}
.front-puzzle-create-form .style-tab-remove:hover {
    background: var(--gold-subtle);
    color: var(--gold-dark);
}
.front-puzzle-create-form .style-tabs-scroll {
    width: 28px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 7px;
}
.front-puzzle-create-form .style-tabs-scroll:hover {
    border-color: var(--gold-light);
    color: var(--gold-dark);
    background: var(--gold-subtle);
}
.front-puzzle-create-form #styleList {
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--white);
    padding: 10px;
}
.front-puzzle-create-form #styleList.style-tabs-ready .style-item {
    display: none;
}
.front-puzzle-create-form #styleList.style-tabs-ready .style-item.active {
    display: block;
}
.front-puzzle-create-form #styleList .style-item {
    display: block;
    overflow: visible;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.front-puzzle-create-form .sort-control {
    width: 28px;
    flex: 0 0 28px;
    display: grid;
    gap: 4px;
}
.front-puzzle-create-form .sort-control .btn {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
}
.front-puzzle-create-form .edit-action-row {
    flex-wrap: wrap;
    align-items: center;
}
.front-puzzle-create-form .edit-action-btn {
    min-height: 28px !important;
    padding: .22rem .52rem !important;
    gap: .22rem;
    border-radius: 7px !important;
    font-size: .72rem !important;
    font-weight: 700;
    white-space: nowrap;
}
.front-puzzle-create-form .style-row-combined {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .55rem !important;
}
.front-puzzle-create-form .style-row-combined > * {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    min-width: 0;
}
.front-puzzle-create-form .style-row-combined .create-inline-field {
    width: 100%;
    height: 100%;
}
.front-puzzle-create-form .style-row-combined .select2-container,
.front-puzzle-create-form .style-row-combined .select2-container .selection,
.front-puzzle-create-form .style-row-combined .select2-selection,
.front-puzzle-create-form .style-row-combined .select2-selection--multiple {
    width: 100% !important;
    min-width: 0;
}
.front-puzzle-create-form .style-date-combo {
    grid-column: 1 / -1;
    width: 100%;
}
.front-puzzle-create-form .create-multiline-single {
    margin: .75rem 0 0 !important;
}
.front-puzzle-create-form .create-multiline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}
.front-puzzle-create-form .create-multiline-grid > * {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex;
    min-width: 0;
}
.front-puzzle-create-form .create-multiline-grid .create-inline-field > .create-inline-label {
    height: auto;
    min-height: 38px;
}
.front-puzzle-create-form .create-multiline-grid .create-inline-field > .alias-tag-box {
    height: auto;
    min-height: 38px;
    overflow: visible;
    flex-wrap: wrap;
}
.front-puzzle-create-form .external-link-grid {
    display: grid;
    gap: .65rem;
}
.front-puzzle-create-form .reference-link-list {
    display: grid;
    gap: .75rem;
}
.front-puzzle-create-form .reference-link-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: var(--radius-md);
    background: #fff;
}
.front-puzzle-create-form .reference-link-remove {
    min-height: 32px !important;
    border-radius: 7px !important;
    white-space: nowrap;
}
.front-puzzle-create-form .reference-link-status {
    min-height: 18px;
    line-height: 1.35;
}
.front-puzzle-create-form .create-dock-bar {
    min-height: 59px;
    margin: 12px calc(50% - 50vw) 0;
}
.front-puzzle-create-form .create-dock-bar .edit-dock-inner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 10px max(18px, calc((100vw - 1320px) / 2 + 18px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-top: 1px solid rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 26px rgba(15,23,42,.10);
    backdrop-filter: blur(10px);
}
.front-puzzle-create-form .create-dock-bar .edit-dock-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: stretch;
}
.front-puzzle-create-form .create-dock-bar .edit-dock-summary .form-label {
    height: 38px;
    padding: 0 .55rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: #fbfaf8;
    color: var(--charcoal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem !important;
    font-weight: 800;
    white-space: nowrap;
}
.front-puzzle-create-form .create-dock-bar .edit-dock-summary .form-control {
    height: 38px;
    min-height: 38px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.front-puzzle-create-form .create-dock-bar .edit-dock-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.front-puzzle-create-form .create-dock-bar .edit-dock-actions .btn {
    height: 38px;
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.front-puzzle-form .dimension-tool,
.front-puzzle-form .weight-tool {
    border-color: rgba(226, 232, 240, .95) !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15, 23, 42, .035) !important;
}
.front-puzzle-form .dimension-summary-bar,
.front-puzzle-form .weight-summary-bar {
    min-height: 38px;
    background: #fff !important;
}
.front-puzzle-form .dimension-tool-title,
.front-puzzle-form .weight-tool-title {
    min-height: 38px;
    border-right-color: rgba(226, 232, 240, .9) !important;
    background: #fbfaf8 !important;
    color: var(--charcoal-light) !important;
    font-size: .78rem;
    font-weight: 800 !important;
}
.front-puzzle-form .dimension-tool-title i,
.front-puzzle-form .weight-tool-title i {
    color: var(--gold-dark) !important;
}
.front-puzzle-form .dimension-chip,
.front-puzzle-form .weight-chip {
    border-color: rgba(226, 232, 240, .95) !important;
    background: rgba(248, 250, 252, .95) !important;
    color: var(--charcoal) !important;
    box-shadow: none !important;
}
.front-puzzle-form .dimension-chip-empty,
.front-puzzle-form .weight-chip-empty {
    color: #94a3b8 !important;
}
.front-puzzle-form .dimension-tool-action,
.front-puzzle-form .weight-tool-action {
    min-height: 38px;
    border-left-color: rgba(226, 232, 240, .9) !important;
    background: #fff !important;
    color: var(--gold-dark) !important;
}
.front-puzzle-form .dimension-tool-action:hover,
.front-puzzle-form .dimension-tool-action:focus,
.front-puzzle-form .weight-tool-action:hover,
.front-puzzle-form .weight-tool-action:focus {
    background: rgba(200, 164, 92, .09) !important;
    color: #745215 !important;
}
.front-puzzle-form .dimension-dialog,
.front-puzzle-form .weight-dialog {
    border-color: rgba(226, 232, 240, .95) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16) !important;
}
.front-puzzle-form .dimension-dialog-head,
.front-puzzle-form .weight-dialog-head {
    border-bottom-color: rgba(226, 232, 240, .9) !important;
    background: #fff !important;
}
.front-puzzle-form .dimension-edit-head,
.front-puzzle-form .dimension-custom-panel,
.front-puzzle-form .weight-custom-panel {
    border-color: rgba(226, 232, 240, .9) !important;
    background: #fbfaf8 !important;
}
.front-puzzle-form .dimension-edit-row,
.front-puzzle-form .weight-edit-row {
    border-color: rgba(226, 232, 240, .95) !important;
    background: #fff !important;
}
.front-puzzle-create-form .style-item,
.front-puzzle-form .image-sort-item {
    border-color: rgba(226, 232, 240, .95) !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(180deg, #fff, #fbfaf8) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}
.front-puzzle-form .style-image-placeholder,
.front-puzzle-form .image-thumb {
    border-color: rgba(226, 232, 240, .95) !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.front-puzzle-form .dropzone {
    border-width: 1.5px;
    border-color: rgba(200, 164, 92, .34);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fff, #fbfaf8);
}
.front-puzzle-form .dropzone:hover,
.front-puzzle-form .dropzone.border-gold {
    border-color: var(--gold);
    background: rgba(200, 164, 92, .08);
}
.front-puzzle-form .dropzone .dropzone-icon {
    color: var(--gold);
}
.front-puzzle-form .input-group > .form-control {
    min-height: 38px;
}
.front-puzzle-form .btn:not(.front-control-button):not(.btn-close) {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: 7px;
}
.front-puzzle-form .tox.tox-tinymce {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .045) !important;
}
.front-submit-sticky-footer,
.front-entity-sticky-footer,
.entity-suggest-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: .85rem;
    align-items: end;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -10px 24px rgba(38, 28, 14, .08);
}
.front-entity-sticky-footer,
.entity-suggest-sticky-footer {
    position: static;
    flex: 0 0 auto;
}
.front-entity-create-modal .front-entity-create-form,
.entity-suggest-edit-modal form[data-suggest-edit-form] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.front-submit-card .card-body,
.front-entity-create-modal .modal-body,
.entity-suggest-edit-modal .modal-body {
    padding-bottom: calc(1rem + 86px);
}
.entity-suggest-edit-modal .modal-body {
    padding-bottom: 1rem;
}
.front-submit-page {
    padding-bottom: 160px;
}
.front-submit-card textarea,
.front-submit-card .tox.tox-tinymce,
.front-entity-create-modal textarea,
.entity-suggest-edit-modal textarea {
    scroll-margin-bottom: 180px;
}
.brand-founded-date-control {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    gap: 0;
    align-items: stretch;
}
.brand-founded-date-control > .form-select,
.brand-founded-date-control > .form-control,
.brand-founded-date-control > [data-brand-date-field] {
    min-width: 0;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-wrap,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap {
    position: relative;
    display: block;
    width: auto;
    flex: 0 0 auto;
    height: 100%;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-wrap {
    min-width: 82px;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap[data-part="year"] {
    width: 82px;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap[data-part="month"],
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap[data-part="day"] {
    width: 66px;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-native,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-button,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-button {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 0 1.45rem 0 .65rem;
    font-size: .75rem;
    line-height: 1.2;
    position: relative;
    white-space: nowrap;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-button {
    width: auto;
    min-width: 84px;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-value-button {
    border-left: 0;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-button:after,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-button:after {
    content: "";
    position: absolute;
    right: .62rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--text-muted);
    border-bottom: 1px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-button:focus,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-button:focus,
.brand-founded-date-control[data-brand-founded-date] .style-date-format-wrap.is-open .style-date-format-button,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap.is-open .style-date-value-button {
    border-color: var(--gold-light);
    box-shadow: 0 0 0 .12rem rgba(191, 144, 0, .12);
    z-index: 2;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-menu,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    display: none;
    max-height: 260px;
    overflow-y: auto;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-wrap.is-open .style-date-format-menu,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-picker-wrap.is-open .style-date-value-menu {
    display: block;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-option,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    text-align: center;
    padding: .32rem .45rem;
    border-radius: 3px;
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-format-option:hover,
.brand-founded-date-control[data-brand-founded-date] .style-date-format-option.is-selected,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-option:hover,
.brand-founded-date-control[data-brand-founded-date] .style-date-value-option.is-selected {
    background: var(--gold-subtle);
    color: var(--gold-dark);
}
.brand-founded-date-control[data-brand-founded-date] .style-date-value-wrap {
    width: auto;
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-value-select {
    min-width: 0;
    width: auto;
    height: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0;
    background-color: var(--white);
    color: var(--text-main);
    font-size: .75rem;
    line-height: 1.2;
    text-align: center;
    text-align-last: center;
    padding: 0 1.2rem 0 .35rem;
    box-shadow: none;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-controls > .style-date-end-group {
    min-width: 0;
    height: 100%;
    display: inline-flex;
    align-items: stretch;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-controls > .style-date-end-group.d-none {
    display: none !important;
}
.brand-founded-date-control[data-brand-founded-date] .style-date-controls:not(.is-range) .style-date-value-wrap:first-of-type .style-date-value-picker-wrap:last-child .style-date-value-button {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.brand-founded-date-control[data-brand-founded-date] .style-date-controls.is-range > .style-date-end-group .style-date-value-wrap .style-date-value-picker-wrap:last-child .style-date-value-button {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.brand-founded-date-control[data-brand-founded-date] > .style-date-value-picker-wrap:last-child .style-date-value-button {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.front-submit-footer-actions,
.front-entity-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.front-submit-summary-field,
.front-entity-summary-field {
    min-width: 0;
}
.front-submit-summary-field .form-label,
.front-entity-summary-field .form-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.front-entity-create-message,
[data-suggest-edit-message] {
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.front-entity-message-success {
    color: #14532d !important;
    background: #dcfce7 !important;
    border-color: #86efac !important;
}
.front-entity-message-danger {
    color: #7f1d1d !important;
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}
.brand-logo-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: .6rem;
}
.brand-logo-manage-item {
    display: grid;
    gap: .35rem;
    margin: 0;
    cursor: pointer;
}
.brand-logo-manage-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: .35rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #fff;
}
.brand-logo-manage-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-size: .78rem;
    color: var(--text-muted);
}

.brand-alias-editor .alias-tag-box {
    min-height: 2.35rem;
}

.brand-logo-editor {
    display: grid;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fffaf0;
}

.brand-logo-main-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
}

.brand-logo-main-preview {
    width: 88px;
    aspect-ratio: 1;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    overflow: hidden;
}

.brand-logo-main-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .4rem;
}

.brand-logo-main-preview.is-placeholder img {
    object-fit: cover;
    padding: 0;
}

.brand-logo-main-preview i {
    font-size: 1.6rem;
}

.brand-logo-main-copy {
    min-width: 0;
}

.brand-logo-editor-title {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.brand-logo-editor-muted {
    margin-top: .18rem;
    color: var(--muted);
    font-size: .82rem;
}

.brand-logo-editor-actions {
    margin-top: .55rem;
}

.brand-logo-extra-panel {
    display: grid;
    gap: .55rem;
}

.brand-logo-dropzone {
    min-height: 3.1rem;
    border: 1px dashed rgba(181, 136, 45, .65);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .72);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem .75rem;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.brand-logo-dropzone:hover,
.brand-logo-dropzone.is-dragover {
    border-color: var(--gold);
    background: #fff;
    color: var(--ink);
}

.brand-logo-extra-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .55rem;
}

.brand-logo-extra-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .45rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #fff;
}

.brand-logo-extra-item.is-marked-delete {
    opacity: .58;
    background: #fff5f5;
    border-color: rgba(220, 53, 69, .35);
}

.brand-logo-extra-thumb {
    width: 52px;
    aspect-ratio: 1;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fffaf0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--muted);
}

.brand-logo-extra-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .28rem;
}

.manufacturer-photo-main-preview img,
.manufacturer-photo-extra-thumb img {
    object-fit: cover;
    padding: 0;
}

.brand-logo-extra-meta {
    min-width: 0;
    display: grid;
    gap: .08rem;
}

.brand-logo-extra-meta span {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
}

.brand-logo-extra-meta small {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-logo-delete-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    color: #9f3a38;
    font-size: .78rem;
    white-space: nowrap;
}

.brand-logo-upload-remove {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .brand-logo-main-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .brand-logo-main-preview {
        width: 72px;
    }

    .brand-logo-extra-list {
        grid-template-columns: 1fr;
    }
}
.front-entity-avatar-picker {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    min-height: 76px;
}
.front-entity-avatar-preview {
    width: 72px;
    height: 72px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: #fffaf0;
    box-shadow: 0 6px 16px rgba(157, 112, 28, .14);
    object-fit: cover;
}
.front-entity-avatar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    min-width: 0;
}
.front-entity-avatar-actions .form-text {
    flex: 1 1 100%;
    margin-top: 0;
}
.create-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .65rem;
}
.create-image-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    aspect-ratio: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.create-image-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.create-image-main-badge {
    position: absolute;
    top: .35rem;
    left: .35rem;
    padding: .12rem .38rem;
    border-radius: 3px;
    background: var(--gold);
    color: var(--navy);
    font-size: .66rem;
    font-weight: 700;
}
.create-image-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .22rem .35rem;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    font-size: .72rem;
    min-height: 2.05rem;
    display: flex;
    align-items: center;
    transition: opacity .16s ease, transform .16s ease;
}
.create-image-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(15, 23, 42, .58);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .16s ease, transform .16s ease;
}
.create-image-card:hover .create-image-actions,
.create-image-card:focus-within .create-image-actions {
    opacity: 1;
    transform: translateY(0);
}
.create-image-card:hover .create-image-name,
.create-image-card:focus-within .create-image-name {
    opacity: 0;
    transform: translateY(100%);
}
.create-image-actions button {
    min-width: 0;
    height: 2.05rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.create-image-actions button + button {
    border-left: 1px solid rgba(255, 255, 255, .24);
}
.create-image-actions button:hover,
.create-image-actions button:focus {
    background: rgba(212, 160, 23, .86);
    color: var(--navy);
    outline: 0;
}
#pickerImageList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .75rem;
}
#pickerImageList::before,
#pickerImageList::after {
    content: none;
}
#pickerImageList > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0 !important;
}
.picker-image-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.picker-image-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    display: block;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
}
.picker-image-card .small {
    min-height: 1.65rem;
    padding: .24rem .36rem;
    background: #fff;
    color: var(--text-main);
    font-size: .68rem !important;
    line-height: 1.15;
}
.picker-image-card .badge {
    max-width: calc(100% - .5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.picker-image-card:hover,
.picker-image-card:focus {
    border-color: var(--gold);
    box-shadow: 0 8px 18px rgba(157, 112, 28, .18);
}
.front-entity-avatar-crop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 1rem;
    align-items: start;
}
.front-entity-avatar-crop-main {
    min-width: 0;
    max-height: 420px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}
.front-entity-avatar-crop-main img {
    display: block;
    max-width: 100%;
}
.front-entity-avatar-crop-main .cropper-view-box,
.front-entity-avatar-crop-main .cropper-face {
    border-radius: 50%;
}
.front-entity-avatar-crop-main .cropper-view-box {
    outline: 2px solid rgba(13, 110, 253, .95);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .42);
}
.front-entity-avatar-crop-main .cropper-face {
    background-color: transparent;
}
.front-entity-avatar-crop-main .cropper-line,
.front-entity-avatar-crop-main .cropper-point {
    background-color: #0d6efd;
}
.front-entity-avatar-crop-main .cropper-line.line-e,
.front-entity-avatar-crop-main .cropper-line.line-w {
    width: 2px;
}
.front-entity-avatar-crop-main .cropper-line.line-n,
.front-entity-avatar-crop-main .cropper-line.line-s {
    height: 2px;
}
.front-entity-avatar-crop-main .cropper-point {
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, .5);
}
.front-entity-avatar-crop-main .cropper-point.point-se {
    width: 10px;
    height: 10px;
}
.front-entity-avatar-crop-side {
    text-align: center;
}
.front-entity-avatar-crop-preview {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid var(--gold);
    border-radius: 50%;
    background: #fffaf0;
    box-shadow: 0 6px 16px rgba(157, 112, 28, .16);
}
.front-entity-avatar-crop-preview img {
    width: 100%;
    height: 100%;
}
.front-entity-avatar-crop-tools {
    display: grid;
    gap: .5rem;
    margin-top: .8rem;
}
.front-entity-avatar-crop-tools .btn {
    min-height: 34px;
    padding: .42rem .65rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
}
.front-entity-avatar-crop-tools .btn i {
    font-size: .95rem;
}
.front-avatar-crop-active .modal-backdrop.show {
    opacity: .72;
}
.front-entity-avatar-crop-modal {
    z-index: 1085;
}
.front-entity-avatar-crop-modal + .modal-backdrop,
.front-avatar-crop-active .modal-backdrop:last-of-type {
    z-index: 1080;
}
.front-entity-avatar-crop-modal .modal-content {
    border: 2px solid rgba(13, 110, 253, .42);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .34), 0 0 0 1px rgba(212, 160, 23, .24);
}
.front-entity-avatar-crop-modal .modal-header {
    background: linear-gradient(135deg, rgba(13, 110, 253, .08), rgba(212, 160, 23, .12));
    border-bottom-color: rgba(13, 110, 253, .18);
}
.front-puzzle-edit-form .edit-dock-inner {
    border-top-color: rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 26px rgba(15,23,42,.10);
}
@media (max-width: 767.98px) {
    .front-puzzle-form .card-body {
        padding: .9rem;
    }
    .front-puzzle-create-form .reference-link-item {
        grid-template-columns: 1fr;
    }
    .front-puzzle-create-form .reference-link-remove {
        justify-self: stretch;
    }
    .front-submit-sticky-footer,
    .front-entity-sticky-footer,
    .entity-suggest-sticky-footer {
        grid-template-columns: 1fr;
    }
    .front-submit-card .card-body,
    .front-entity-create-modal .modal-body,
    .entity-suggest-edit-modal .modal-body {
        padding-bottom: calc(1rem + 148px);
    }
    .brand-founded-date-control {
        grid-template-columns: 1fr;
    }
    .front-submit-footer-actions,
    .front-entity-footer-actions {
        justify-content: stretch;
    }
    .front-submit-footer-actions .btn,
    .front-entity-footer-actions .btn {
        flex: 1 1 auto;
    }
    .front-entity-avatar-picker {
        grid-template-columns: 60px minmax(0, 1fr);
    }
    .front-entity-avatar-preview {
        width: 60px;
        height: 60px;
    }
    .front-entity-avatar-crop-layout {
        grid-template-columns: 1fr;
    }
    .front-entity-avatar-crop-side {
        width: 100%;
    }
    .front-puzzle-create-form .create-dock-bar {
        min-height: 110px;
    }
    .front-puzzle-create-form .create-dock-bar .edit-dock-inner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 12px;
    }
    .front-puzzle-create-form .create-dock-bar .edit-dock-actions {
        justify-content: stretch;
    }
    .front-puzzle-create-form .create-dock-bar .edit-dock-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}
@media (max-width: 576px) {
    .front-list-toolbar,
    .front-list-controls {
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
    }
    .front-control-select {
        flex: 1 1 150px;
        width: 100%;
    }
    .front-list-controls .select2-container {
        flex: 1 1 150px;
        width: 100% !important;
        min-width: 0;
    }
    .front-control-button {
        width: 100%;
    }
}

.pagination { gap: 0.25rem; }
.pagination .page-item .page-link {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--charcoal);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    min-width: 34px;
    text-align: center;
    background: var(--white);
}
.pagination .page-item .page-link:hover { background: var(--gold-subtle); border-color: var(--gold-light); color: var(--gold-dark); }
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold);
    color: var(--navy);
    font-weight: 600;
}
.pagination .page-item.disabled .page-link { background: var(--cream); color: var(--text-light); }

.image-gallery .main-image {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    position: relative;
}
.image-gallery .main-image img {
    max-height: 400px;
    object-fit: contain;
    width: 100%;
    border-radius: var(--radius-sm);
}
.image-gallery .main-image #mainImage.has-transparent-surface {
    background: var(--detail-image-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 8px 20px rgba(38, 30, 18, .08);
}
.image-gallery .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--border);
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 2;
    box-shadow: var(--shadow-md);
    font-size: 1.1rem;
}
.image-gallery .gallery-arrow:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.image-gallery .gallery-arrow-left { left: 12px; }
.image-gallery .gallery-arrow-right { right: 12px; }
.image-gallery .gallery-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.image-gallery .image-name {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12,26,42,0.7);
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}
.thumbnail-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.thumbnail-wrapper { position: relative; display: inline-block; }
.thumbnail-wrapper .thumbnail-name-input {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    font-size: 0.6rem;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0 2px;
    line-height: 1.3;
}
.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--detail-thumb-image-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}
.thumbnail:hover { border-color: var(--gold-light); }
.thumbnail.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow); }

.detail-style-image {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--detail-thumb-image-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 3px 8px rgba(38, 30, 18, .08);
    flex-shrink: 0;
}

.rating-stars { display: inline-flex; gap: 0.1rem; align-items: center; }
.rating-stars .star { color: #d4d0c8; font-size: 1.1rem; cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.rating-stars .star.filled { color: var(--gold); }
.rating-stars .star:hover { color: var(--gold); transform: scale(1.2); }
.rating-value { font-weight: 600; color: var(--gold-dark); margin-left: 0.4rem; font-size: 0.95rem; }

.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before { content: ''; position: absolute; left: 0.65rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold), var(--gold-light), var(--border)); }
.timeline-year { margin-bottom: 2.5rem; }
.timeline-year-label { font-size: 1.3rem; font-weight: 700; color: var(--gold-dark); margin-bottom: 1.25rem; position: relative; }
.timeline-item { position: relative; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.timeline-marker { position: absolute; left: -2rem; top: 0.35rem; width: 13px; height: 13px; background: var(--gold); border-radius: 50%; border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--gold); z-index: 1; }
.timeline-content { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1rem 1.25rem; transition: box-shadow var(--transition-base); }
.timeline-content:hover { box-shadow: var(--shadow-md); border-color: var(--gold-light); }
.timeline-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }

.comment-item { padding: 1rem 0; border-bottom: 1px solid var(--border-light); }
.comment-item:last-child { border-bottom: none !important; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-author { font-weight: 600; font-size: 0.88rem; color: var(--charcoal); }
.comment-date { font-size: 0.78rem; color: var(--text-muted); }
.comment-body { font-size: 0.9rem; line-height: 1.6; color: var(--charcoal-light); }
.comment-reply { margin-left: 2.5rem; padding-left: 1rem; border-left: 3px solid var(--gold); }

.message-sent { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.message-received { display: flex; justify-content: flex-start; margin-bottom: 0.75rem; }
.message-bubble { padding: 0.6rem 1rem; max-width: 72%; font-size: 0.88rem; line-height: 1.55; word-wrap: break-word; }
.message-sent .message-bubble { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--navy); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); }
.message-received .message-bubble { background: var(--white); color: var(--charcoal); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; border: 1px solid var(--border-light); }
.message-time { font-size: 0.72rem; color: var(--text-light); margin-top: 0.25rem; }
.message-sent .message-time { text-align: right; }

.admin-sidebar {
    height: calc(100vh - var(--navbar-height) - var(--site-announcement-height, 0px));
    width: var(--sidebar-width);
    position: fixed;
    top: calc(var(--navbar-height) + var(--site-announcement-height, 0px));
    left: 0;
    z-index: 100;
    background: var(--navy);
    box-shadow: 4px 0 20px rgba(0,0,0,.1);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,164,92,.45) rgba(255,255,255,.06);
}

.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(200,164,92,.45);
    border-radius: 999px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(200,164,92,.65); }
.admin-sidebar .sidebar-brand {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 0.75rem;
}
.admin-sidebar .sidebar-brand h5 { color: var(--gold); font-weight: 700; font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.admin-sidebar-logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.admin-sidebar .sidebar-brand small { color: rgba(255,255,255,.4); font-size: 0.75rem; }
.admin-sidebar .nav-link {
    color: rgba(255,255,255,.6);
    padding: 0.55rem 1.25rem;
    border-radius: 0;
    margin-bottom: 1px;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.admin-sidebar .nav-link:hover { color: rgba(255,255,255,.9); background: rgba(200,164,92,.08); }
.admin-sidebar .nav-link.active { color: var(--gold); background: rgba(200,164,92,.1); border-left-color: var(--gold); font-weight: 500; }
.admin-sidebar .nav-link .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-sidebar .sidebar-section { padding: 0.5rem 1.25rem 0.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.3); font-weight: 600; }
.admin-sidebar .sidebar-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    padding: 0.6rem 1.25rem;
    margin-top: 0.25rem;
    transition: background var(--transition-fast);
}
.admin-sidebar .sidebar-toggle:hover { background: rgba(255,255,255,.05); }
.admin-sidebar .sidebar-collapsible { display: block; }

.admin-content {
    margin-left: var(--sidebar-width);
    background: var(--cream);
    min-height: 100vh;
    padding: calc(var(--navbar-height) + var(--site-announcement-height, 0px)) 0 0;
}
.admin-content .content-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-content .content-header h3 { font-size: 1.1rem; margin-bottom: 0; }
.admin-content .content-body { padding: 0 1.5rem 1.5rem; }

.admin-content .admin-flash-alert {
    display: flex;
    align-items: center;
    gap: .35rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    font-weight: 650;
    color: #102018;
}
.admin-content .admin-flash-alert .btn-close {
    margin-left: auto;
}
.admin-content .admin-flash-success {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}
.admin-content .admin-flash-danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #7f1d1d;
}
.admin-content .admin-flash-warning {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #78350f;
}

.admin-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: grid;
    gap: .75rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}
.admin-toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: auto;
}
.admin-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.admin-toast-icon {
    margin-top: .1rem;
    font-size: 1rem;
    color: var(--text-muted);
}
.admin-toast-loading .admin-toast-icon {
    color: var(--gold);
    animation: admin-toast-spin .9s linear infinite;
}
.admin-toast-success .admin-toast-icon { color: #059669; }
.admin-toast-error .admin-toast-icon { color: #dc2626; }
.admin-toast-warning .admin-toast-icon { color: #d97706; }
.admin-toast-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.admin-toast-message {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.admin-toast-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: .1rem;
    line-height: 1;
}
.admin-toast-close:hover { color: var(--text); }
@keyframes admin-toast-spin {
    to { transform: rotate(360deg); }
}

.admin-sidebar-toggle {
    display: none;
    position: fixed;
    top: calc(var(--site-announcement-height, 0px) + 72px);
    left: 12px;
    z-index: 200;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--navy);
    color: var(--gold);
    border: none;
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 90;
}

.table-vcenter td { vertical-align: middle; }
.admin-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.admin-content .table-responsive,
.admin-content .siteop-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.admin-table-wrap > table,
.admin-content .table-responsive > table,
.admin-content .siteop-table-wrap > table {
    width: max-content;
    min-width: 100%;
}
.admin-content-list-table,
.admin-content table.card-table,
.admin-content .siteop-table-wrap > table {
    min-width: 920px;
}
.admin-table-wrap::-webkit-scrollbar,
.admin-content .table-responsive::-webkit-scrollbar,
.admin-content .siteop-table-wrap::-webkit-scrollbar {
    height: 10px;
}
.admin-table-wrap::-webkit-scrollbar-track,
.admin-content .table-responsive::-webkit-scrollbar-track,
.admin-content .siteop-table-wrap::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, .7);
    border-radius: 999px;
}
.admin-table-wrap::-webkit-scrollbar-thumb,
.admin-content .table-responsive::-webkit-scrollbar-thumb,
.admin-content .siteop-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(184, 142, 67, .55);
    border-radius: 999px;
}
.card > .admin-table-wrap {
    width: calc(100% - 2rem);
    margin: 1rem;
}
@media (max-width: 576px) {
    .card > .admin-table-wrap {
        width: calc(100% - 1.5rem);
        margin: .75rem;
    }
}
.table-admin { font-size: 0.85rem; }
.table-admin thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--cream); border-bottom: 2px solid var(--border); padding: 0.6rem 0.75rem; white-space: nowrap; text-align: center; }
.table-admin td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; text-align: center; }
.table-admin tbody tr { transition: background var(--transition-fast); }
.table-admin tbody tr:hover { background: var(--gold-subtle); }
.admin-content-list-table thead th { text-align: center; }
.admin-content-list-table .admin-list-actions { text-align: center; white-space: nowrap; }
.admin-content-list-table .admin-list-status { text-align: center; }
.admin-content-list-table .admin-status-select { min-width: 8.5rem; }
.sticky-action-col,
.sticky-action-header {
    --sticky-action-bg: #fff;
    --sticky-action-hover-bg: #fdf9ef;
    --bs-table-bg: var(--sticky-action-bg);
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: var(--sticky-action-hover-bg);
    position: sticky;
    right: 0;
    z-index: 4;
    min-width: 5.5rem;
    background-color: var(--sticky-action-bg) !important;
    background-image: none !important;
    background-clip: border-box;
    box-shadow: -14px 0 18px -18px rgba(15, 23, 42, .7) !important;
    isolation: isolate;
}
.sticky-action-header {
    --sticky-action-bg: var(--cream);
    z-index: 6;
    background-color: var(--sticky-action-bg) !important;
}
.sticky-action-col::before,
.sticky-action-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .12));
}
.table-admin tbody tr:hover > .sticky-action-col {
    --sticky-action-bg: #fdf9ef;
    --bs-table-bg: var(--sticky-action-bg);
    --bs-table-accent-bg: transparent;
    background-color: var(--sticky-action-bg) !important;
}
.table > :not(caption) > * > .sticky-action-col,
.table > :not(caption) > * > .sticky-action-header {
    background-color: var(--sticky-action-bg) !important;
    box-shadow: -14px 0 18px -18px rgba(15, 23, 42, .7) !important;
}
.sticky-action-col .btn,
.sticky-action-col form {
    white-space: nowrap;
}
.admin-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    height: 32px;
}
.admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    min-width: 74px;
    height: 32px;
    min-height: 32px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0;
    font-size: 0.875rem;
}
.admin-action-btn i {
    margin-right: 0.25rem;
}
.admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.admin-detail-actions form {
    display: inline-flex;
    margin: 0;
}
.admin-detail-actions .btn {
    min-height: 38px;
    padding: .45rem .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: nowrap;
}

.entity-select2-add {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.entity-select2-add span {
    display: none;
}
.entity-select2-add .btn {
    min-height: 34px;
    height: 34px;
    padding: 0 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.entity-select2-option,
.entity-select2-selection {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.entity-select2-option {
    gap: 0.5rem;
    min-height: 32px;
    padding: 0.14rem 0;
}
.entity-select2-selection {
    gap: 0.32rem;
    height: 100%;
}
.entity-select2-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    max-width: 26px;
    max-height: 26px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: #fff;
    object-fit: contain;
    display: block;
}
.entity-select2-avatar.is-round {
    border-radius: 50%;
    object-fit: cover;
}
.entity-select2-fallback {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--gold-subtle);
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
}
.entity-select2-fallback.is-round {
    border-radius: 50%;
}
.entity-select2-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.16;
}
.entity-select2-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
}
.entity-select2-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.7rem;
}
.alias-tag-box {
    min-height: 34px;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.alias-tag-box:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.15rem rgba(191, 144, 0, 0.16);
}
.alias-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
}
.alias-tag-input {
    flex: 1 1 10rem;
    min-width: 7rem;
    border: 0;
    outline: 0;
    padding: 0.16rem 0;
    background: transparent;
    color: var(--text-main);
    font-size: 0.875rem;
    line-height: 1.4;
}
.brand-alias-editor .alias-tag-box {
    align-items: center;
}
.entity-suggest-edit-modal .modal-dialog,
#createModal .modal-dialog,
[id^="editModal-"].modal .modal-dialog {
    max-height: min(88vh, 980px);
}
.entity-suggest-edit-modal .modal-content,
#createModal .modal-content,
[id^="editModal-"].modal .modal-content {
    max-height: inherit;
}
#createModal .brand-admin-modal-form,
[id^="editModal-"].modal .brand-admin-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
#createModal .modal-body,
[id^="editModal-"].modal .modal-body {
    overflow-y: auto;
}
.brand-admin-modal-form .modal-footer {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}
.brand-admin-footer-summary {
    flex: 1 1 320px;
    min-width: 0;
}
.brand-admin-footer-actions {
    display: flex;
    gap: .5rem;
    flex: 0 0 auto;
}
.alias-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--cream);
    color: var(--text-main);
    padding: 0.18rem 0.28rem 0.18rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.2;
}
.alias-tag span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alias-tag-remove {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.alias-tag-remove:hover {
    background: var(--gold-subtle);
    color: var(--gold-dark);
}
.select2-dropdown.entity-select2-dropdown .select2-results__option {
    padding: 0.3rem 0.55rem;
}
.select2-dropdown.entity-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--gold-subtle);
    color: var(--text-main);
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
    color: var(--text-main);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 0 .12rem rgba(191, 144, 0, .12) !important;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-radius: var(--radius-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--text-light);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-muted) transparent;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-muted);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--gold-dark);
}
.select2-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
    background: var(--white);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 32px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    background: var(--white);
    padding: .28rem .5rem;
    outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 0 .12rem rgba(191, 144, 0, .12);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--gold-subtle) !important;
    color: var(--gold-dark) !important;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #f5ecd7 !important;
    color: var(--gold-dark) !important;
}
.select2-container--default .select2-selection--multiple:has(.entity-select2-selection) {
    min-height: 34px;
    border-color: var(--border);
}
.select2-container--default .select2-selection--single {
    min-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: 32px;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    float: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 2.4rem;
}
.select2-compact + .select2-container {
    min-width: 9rem;
}
.select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    width: 100%;
    min-height: 32px;
    padding: 2px 0;
    margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 3px;
    overflow: hidden;
    order: 999;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    min-height: 26px;
    max-width: calc(100% - 8px);
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(191, 144, 0, .32);
    border-radius: 999px;
    background: var(--gold-subtle);
    color: var(--text-main);
    padding: 2px 4px 2px 7px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 3px;
    margin-right: 2px;
    overflow: hidden;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0.2rem;
    order: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border: 0;
    color: var(--gold-dark);
    height: 100%;
    padding: 0 2px 0 5px;
    display: inline-flex;
    align-items: center;
    order: 2;
    position: static !important;
    margin-left: 0.2rem;
    margin-right: 0;
    font-size: 0.95rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: rgba(191, 144, 0, .14);
    color: var(--charcoal);
    outline: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .entity-select2-avatar,
.select2-container--default .select2-selection--multiple .select2-selection__choice .entity-select2-fallback {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    max-width: 20px;
    max-height: 20px;
    font-size: 0.62rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .entity-select2-title {
    max-width: 9rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .entity-select2-subtitle {
    display: none;
}
.select2-container--default .select2-selection--single .entity-select2-avatar,
.select2-container--default .select2-selection--single .entity-select2-fallback {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    max-width: 20px;
    max-height: 20px;
}
.select2-container--default .select2-selection--single .entity-select2-subtitle {
    display: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
}
.select2-container--default .select2-search--dropdown {
    display: block;
    padding: 0.45rem;
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--cream);
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar .select2-search--dropdown {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar .select2-search__field {
    display: block !important;
    min-width: 0;
    width: 100% !important;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
    outline: 0;
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar .select2-search__field:focus {
    border-color: var(--gold-light);
    box-shadow: 0 0 0 .12rem rgba(191, 144, 0, .12);
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar .entity-select2-add {
    flex: 0 0 auto;
}
.select2-dropdown.entity-select2-dropdown .entity-select2-toolbar .entity-select2-add .btn {
    white-space: nowrap;
}
.select2-container--default .select2-results__option .entity-select2-flag,
.select2-container--default .select2-selection__rendered .entity-select2-flag {
    width: 26px;
    flex: 0 0 26px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.select2-container--default .select2-selection__rendered .entity-select2-flag {
    width: 20px;
    flex-basis: 20px;
    height: 14px;
}
.entity-select2-flag-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    min-width: 0;
    max-width: 3px;
    height: 26px;
    line-height: 26px;
    margin: 0 0 0 3px;
    padding: 0;
    text-align: left;
}
.stat-card-admin {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.stat-card-admin:hover { box-shadow: var(--shadow-md); border-color: var(--gold-light); }
.stat-card-admin .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.stat-card-admin .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.1;
}
.stat-card-admin .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.data-quality-metric {
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    color: var(--text-main);
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.data-quality-metric:hover {
    color: var(--text-main);
    border-color: var(--gold-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.data-quality-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    background: rgba(191, 144, 0, 0.1);
    color: var(--gold-dark);
}
.data-quality-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.data-quality-body strong {
    font-size: 1.65rem;
    line-height: 1.05;
    color: var(--charcoal);
}
.data-quality-body span {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.data-quality-metric.dq-danger .data-quality-icon { background: rgba(220, 53, 69, 0.1); color: #b02a37; }
.data-quality-metric.dq-warning .data-quality-icon { background: rgba(255, 193, 7, 0.14); color: #9a6700; }
.data-quality-metric.dq-success .data-quality-icon { background: rgba(25, 135, 84, 0.1); color: #146c43; }
.data-quality-metric.dq-info .data-quality-icon { background: rgba(13, 110, 253, 0.08); color: #0a58ca; }
.data-quality-search-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    align-items: center;
}
.data-quality-search-state strong {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--charcoal);
}
.data-quality-search-state span:last-child {
    grid-column: 2;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.data-quality-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    min-height: 96px;
    padding: 0.95rem;
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: #fff;
}
.data-quality-action:hover {
    color: var(--text-main);
    border-color: var(--gold-light);
    background: rgba(191, 144, 0, 0.04);
}
.data-quality-action i {
    grid-row: 1 / span 2;
    color: var(--gold-dark);
    font-size: 1.1rem;
}
.data-quality-action strong {
    font-size: 0.92rem;
    line-height: 1.25;
}
.data-quality-action span {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
    color: var(--charcoal);
    background: var(--white);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); outline: none; }
.form-control::placeholder { color: var(--text-light); }
.form-label { font-weight: 500; font-size: 0.85rem; color: var(--charcoal); margin-bottom: 0.35rem; }
.form-label.form-label-sm { font-size: 0.78rem; margin-bottom: 0.2rem; }
.form-text { font-size: 0.78rem; color: var(--text-muted); }
.form-check-input {
    border-color: var(--border);
    background-color: var(--white);
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-check-input:focus {
    border-color: var(--gold-light);
    box-shadow: 0 0 0 .12rem rgba(191, 144, 0, .14);
}
.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold-dark);
}
.form-check-input[type="checkbox"]:checked {
    background-color: var(--gold);
}
.form-switch .form-check-input {
    width: 2.45em;
    height: 1.28em;
    border-color: rgba(108, 94, 69, .3);
    background-color: #e8e0d1;
    background-image: none !important;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    cursor: pointer;
}
.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    width: .88em;
    height: .88em;
    left: .17em;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: left var(--transition-base), background var(--transition-base);
}
.form-switch .form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold-dark);
}
.form-switch .form-check-input:checked::before {
    left: calc(100% - 1.05em);
    background: #fffaf0;
}
.form-check-label {
    color: var(--text-main);
    cursor: pointer;
}
.form-check-input:checked + .form-check-label,
.form-check-input:checked ~ .form-check-label {
    color: var(--gold-dark);
    font-weight: 600;
}

.footer {
    background: var(--navy);
    color: rgba(255,255,255,.6);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
.footer h6 { color: var(--gold); font-weight: 600; font-size: 0.88rem; margin-bottom: 0.75rem; }
.footer a { color: rgba(255,255,255,.55); font-size: 0.85rem; transition: color var(--transition-fast); }
.footer a:hover { color: var(--gold) !important; }
.footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 1.5rem; margin-top: 2rem; font-size: 0.8rem; color: rgba(255,255,255,.35); }

.badge { font-size: 0.72rem; font-weight: 600; padding: 0.25em 0.6em; border-radius: var(--radius-sm); }
.badge-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--navy); }
.badge-silver { background: linear-gradient(135deg, #c8c8c8, #a8a8a8); color: #333; }
.badge-bronze { background: linear-gradient(135deg, #cd8a3e, #a06a28); color: #fff; }
.bg-bronze { background: linear-gradient(135deg, #cd8a3e, #a06a28) !important; color: #fff !important; }
.bg-silver { background: linear-gradient(135deg, #c8c8c8, #a8a8a8) !important; color: #333 !important; }

.badge-version { background: var(--navy-mid); color: var(--gold-light); border: 1px solid rgba(200,164,92,0.3); }
.badge-create { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.badge-edit { background: rgba(59,130,246,0.12); color: #2563eb; border: 1px solid rgba(59,130,246,0.25); }
.badge-merge { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
.badge-split { background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }
.badge-revert { background: rgba(107,114,128,0.12); color: #4b5563; border: 1px solid rgba(107,114,128,0.25); }

.badge-status-producing { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.badge-status-pending { background: rgba(245,158,11,0.14); color: #b45309; border: 1px solid rgba(245,158,11,0.28); }
.badge-status-discontinued { background: rgba(107,114,128,0.12); color: #6b7280; border: 1px solid rgba(107,114,128,0.25); }
.badge-status-prototype { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
.badge-status-concept { background: rgba(139,92,246,0.12); color: #7c3aed; border: 1px solid rgba(139,92,246,0.25); }

.badge-notification {
    position: absolute;
    top: -4px;
    right: -8px;
    background: #e53935;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(229,57,53,.4);
    animation: notificationPulse 2s ease-in-out infinite;
}
@keyframes notificationPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(229,57,53,.4); }
    50% { box-shadow: 0 2px 12px rgba(229,57,53,.65); }
}

.notification-item {
    border-left: 4px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.notification-item-unread {
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(200, 164, 92, .13), rgba(255, 255, 255, .96) 42%);
}
.notification-item-unread .notification-title {
    color: var(--charcoal);
    font-weight: 700;
}
.notification-item-read {
    background: #f8fafc;
    opacity: .72;
}
.notification-item-read .notification-title,
.notification-item-read p,
.notification-item-read a,
.notification-item-read i {
    color: var(--text-muted) !important;
}

.notification-dropdown-menu {
    width: min(360px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(184, 142, 67, .22);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 36px rgba(17, 24, 39, .16);
}
.notification-dropdown-header {
    min-height: 42px;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(184, 142, 67, .16);
    background: linear-gradient(180deg, #fffaf0, #fff);
    color: var(--charcoal);
    font-size: .86rem;
    font-weight: 800;
}
.notification-dropdown-list {
    max-height: 360px;
    overflow-y: auto;
}
.notification-dropdown-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 10px;
    gap: .7rem;
    padding: .82rem .9rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(229, 220, 205, .72);
    background: #fff;
    transition: background-color var(--transition-fast);
}
.notification-dropdown-item:hover,
.notification-dropdown-item:focus {
    background: var(--gold-subtle);
    color: inherit;
    text-decoration: none;
}
.notification-dropdown-item.is-unread {
    background: linear-gradient(90deg, rgba(200, 164, 92, .14), #fff 46%);
}
.notification-dropdown-item.is-read {
    opacity: .76;
}
.notification-dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid rgba(184, 142, 67, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.message-dropdown-avatar {
    width: 32px;
    height: 32px;
    align-self: start;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(184, 142, 67, .16);
    box-shadow: 0 0 0 2px rgba(255, 250, 240, .9);
}
.notification-dropdown-body {
    min-width: 0;
    display: grid;
    gap: .18rem;
}
.notification-dropdown-title {
    color: var(--charcoal);
    font-size: .84rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-dropdown-content {
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-dropdown-time {
    color: var(--text-muted);
    font-size: .7rem;
}
.notification-dropdown-dot {
    width: 8px;
    height: 8px;
    align-self: start;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 142, 67, .16);
}
.notification-dropdown-empty {
    min-height: 128px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45rem;
    color: var(--text-muted);
    background: #fff;
    font-size: .84rem;
}
.notification-dropdown-empty i {
    color: rgba(184, 142, 67, .45);
    font-size: 1.6rem;
}
.notification-dropdown-footer {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: var(--gold-dark);
    background: var(--cream);
    border-top: 1px solid rgba(184, 142, 67, .18);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}
.notification-dropdown-footer:hover,
.notification-dropdown-footer:focus {
    color: var(--gold-dark);
    background: var(--gold-subtle);
    text-decoration: none;
}

.identification-review-status {
    padding: .9rem 1rem;
}
.identification-review-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
}
.identification-review-status-title {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    font-weight: 700;
    white-space: nowrap;
}
.identification-review-meta {
    display: grid;
    gap: .28rem;
    min-width: 0;
    font-size: .82rem;
}
.identification-review-meta div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    line-height: 1.35;
}
.identification-review-meta span {
    color: var(--text-muted);
    white-space: nowrap;
}
.identification-review-meta strong {
    color: inherit;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 575.98px) {
    .identification-review-status-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .identification-review-meta div {
        justify-content: flex-start;
    }
}

.avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar-md { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.vditor-content { line-height: 1.8; font-size: 0.92rem; }
.vditor-content img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.vditor-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }

.diff-old { background-color: #fde8e8; text-decoration: line-through; color: #b71c1c; padding: 0 2px; border-radius: 2px; }
.diff-new { background-color: #e8f5e9; color: #1b5e20; padding: 0 2px; border-radius: 2px; }

.skeleton { background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream) 50%, var(--cream-dark) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.fade-in { animation: fadeInUp 0.4s ease-out both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.gold-underline { position: relative; display: inline-block; }
.gold-underline::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; }

.table { font-size: 0.88rem; }
.table thead th { font-weight: 600; font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; border-bottom-width: 1px; background: var(--cream); }
.table td { vertical-align: middle; padding: 0.65rem 0.75rem; }
.table-hover tbody tr:hover { background-color: var(--gold-subtle); }

.modal-header { border-bottom: 1px solid var(--border-light); padding: 1rem 1.25rem; }
.modal-title { font-weight: 600; font-size: 1rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 0.75rem 1.25rem; }

.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    transition: border-color var(--transition-base), background var(--transition-base);
    cursor: pointer;
}
.dropzone:hover { border-color: var(--gold); background: var(--gold-subtle); }
.dropzone .dropzone-icon { font-size: 2.5rem; color: var(--gold-light); margin-bottom: 0.5rem; }

.puzzle-code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: var(--gold-subtle);
    color: var(--gold-dark);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.style-item button[onclick^="pickExistingImage"],
.style-item button[onclick^="recropStyleImage"],
.style-item button[onclick^="clearStyleImage"],
.image-sort-item button[onclick^="recropExistingImage"],
.image-sort-item button[onclick^="cropNewImage"],
.image-sort-item button[onclick^="deleteImage"],
.image-sort-item button[onclick^="deletePendingImage"] {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.select2-container--open { z-index: 99999 !important; }
.select2-container .select2-results__group { font-weight: 700; font-size: 0.85rem; color: var(--gold-dark); background: var(--cream); padding: 6px 10px; }
.select2-container .select2-results__group.is-collapsible {
    cursor: pointer;
    user-select: none;
}
.select2-container .select2-results__group .collapse-indicator {
    display: inline-block;
    width: 0.9rem;
    margin-right: 0.25rem;
    font-size: 0.68rem;
    line-height: 1;
    text-align: center;
}

.select2-dropdown { min-width: 0; }
.select2-results__options { max-height: 350px; }
.select2-results__option { padding: 6px 12px; font-size: 0.85rem; }
.select2-dropdown--single-column .select2-results__options {
    display: block !important;
}
.select2-dropdown--single-column .select2-results__options--nested {
    padding-left: 0;
}
.select2-dropdown--single-column .select2-results__option,
.select2-dropdown--single-column .select2-results__group {
    border-right: 0 !important;
}
.select2-dropdown--single-column .select2-results__group {
    display: block;
}
.select2-dropdown--single-column .entity-select2-option {
    width: 100%;
}
.select2-dropdown--country .select2-results__option[role="option"] {
    min-height: 42px;
    height: auto;
    overflow: visible;
}
.select2-dropdown--country .select2-results__option[role="group"] {
    padding: 0;
}
.select2-dropdown--country .select2-results__group {
    display: block;
    line-height: 1.25;
}
.select2-dropdown--country .select2-results__options--nested {
    display: block !important;
    max-height: none;
    overflow: visible;
    padding-left: 0;
}
.select2-dropdown--country .entity-select2-option {
    align-items: center;
    min-height: 32px;
    line-height: 1.2;
    width: 100%;
}
.select2-dropdown--country .entity-select2-text {
    min-width: 0;
    overflow: hidden;
}
.select2-dropdown--country .entity-select2-title,
.select2-dropdown--country .entity-select2-subtitle {
    display: block;
    max-width: 100%;
    line-height: 1.2;
}
.select2-container .select2-results__group.is-collapsed + .select2-results__options--nested,
.select2-dropdown--country .select2-results__group.is-collapsed + .select2-results__options--nested,
.select2-results__options--nested.is-collapsed {
    display: none !important;
}

@media (min-width: 768px) {
    .select2-results__options--multi-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .select2-results__options--multi-col .select2-results__option {
        border-right: 1px solid var(--border-light);
    }
    .select2-results__options--multi-col .select2-results__group {
        grid-column: 1 / -1;
        border-right: none;
    }
}

@media (min-width: 1200px) {
    .select2-dropdown.select2-dropdown--wide { min-width: 0; }
    .select2-results__options--multi-col-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
    }
    .select2-results__options--multi-col-3 .select2-results__option {
        border-right: 1px solid var(--border-light);
    }
    .select2-results__options--multi-col-3 .select2-results__group {
        grid-column: 1 / -1;
        border-right: none;
    }
}

@media (max-width: 1024px) {
    .filter-sidebar .card { position: static; }
    .hero-section h1 { font-size: 2rem; }
    .admin-sidebar { width: 210px; }
    .admin-content { margin-left: 210px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        font-size: .94rem;
    }
    .site-main > .container-xl,
    .navbar > .container-xl,
    .footer > .container-xl {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .row > .col-lg { flex: 1 0 0%; }
    .row > .col-lg-auto { flex: 0 0 auto; width: auto; }
    .row > .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .row > .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .row > .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .row > .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .row > .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .row > .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .row > .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .row > .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .row > .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .row > .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .row > .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .row > .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .row.g-4,
    .row.gx-4 {
        --bs-gutter-x: 1rem;
    }
    .row.g-4,
    .row.gy-4 {
        --bs-gutter-y: 1rem;
    }
    .page-header,
    .user-space-header {
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .page-header h3,
    .user-space-header h1 {
        font-size: 1.28rem;
    }
    .card-body {
        padding: .85rem;
    }
    .btn,
    .form-control,
    .form-select {
        font-size: .88rem;
    }
    .front-filter-sidebar .card-header,
    .front-puzzle-form .card-header {
        padding: .68rem .78rem;
    }
    .front-filter-sidebar .card-body {
        padding: .78rem;
    }
    .front-filter-sidebar .filter-scroll {
        max-height: 180px;
    }
    .puzzle-card .card-body {
        padding: .75rem;
    }
    .table > :not(caption) > * > * {
        padding: .45rem .5rem;
    }
    .admin-sidebar {
        width: 148px;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
    .admin-content {
        margin-left: 148px;
        font-size: .82rem;
    }
    .admin-sidebar .sidebar-brand {
        padding: 0 .75rem .75rem;
        margin-bottom: .45rem;
    }
    .admin-sidebar .sidebar-brand h5 {
        font-size: .88rem;
        gap: 0;
    }
    .admin-sidebar .sidebar-brand small {
        display: none;
    }
    .admin-sidebar-logo {
        width: 22px;
        height: 22px;
    }
    .admin-sidebar .nav-link {
        min-height: 28px;
        padding: .34rem .58rem;
        gap: .28rem;
        font-size: .68rem;
        line-height: 1.2;
    }
    .admin-sidebar .nav-link .nav-icon {
        width: 16px;
        font-size: .86rem;
    }
    .admin-sidebar .sidebar-section,
    .admin-sidebar .sidebar-toggle {
        padding-left: .68rem;
        padding-right: .68rem;
        font-size: .62rem;
    }
    .admin-content .content-header {
        padding: .62rem .75rem;
        margin-bottom: .72rem;
    }
    .admin-content .content-header h3 {
        font-size: .9rem;
    }
    .admin-content .content-body {
        padding: 0 .65rem .75rem;
    }
    .admin-content .row {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .7rem;
    }
    .admin-content .card-header,
    .admin-content .card-footer {
        padding: .55rem .65rem;
    }
    .admin-content .card-body {
        padding: .62rem;
    }
    .admin-content .table-responsive,
    .admin-content .admin-table-wrap,
    .admin-content .siteop-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    .admin-content .table-responsive > table,
    .admin-content .admin-table-wrap > table,
    .admin-content .siteop-table-wrap > table {
        width: max-content;
        min-width: 100%;
        font-size: .66rem;
    }
    .admin-content .admin-content-list-table,
    .admin-content table.card-table {
        min-width: 920px;
    }
    .admin-content .table > :not(caption) > * > * {
        padding: .24rem .3rem;
        vertical-align: middle;
    }
    .admin-content .table th,
    .admin-content .table td {
        max-width: 136px;
        overflow-wrap: normal;
        word-break: normal;
    }
    .admin-content .table th,
    .admin-content .table td,
    .admin-content .table .btn,
    .admin-content .badge,
    .admin-content .status {
        font-size: .72rem;
    }
    .admin-content .table .btn,
    .admin-content .btn-sm {
        min-height: 24px;
        padding: .18rem .32rem;
        line-height: 1.15;
    }
    .admin-content .admin-list-actions,
    .admin-content .text-end {
        white-space: nowrap;
    }
    .admin-content .form-control,
    .admin-content .form-select,
    .admin-content .select2-container .select2-selection--single {
        min-height: 28px;
        font-size: .72rem;
    }
    .admin-content .badge,
    .admin-content .status {
        min-height: 20px;
        padding: .14rem .34rem;
        line-height: 1.15;
    }
    .admin-content img.rounded,
    .admin-content img.rounded-circle,
    .admin-content .admin-thumb,
    .admin-content .table img {
        max-width: 42px;
        max-height: 42px;
    }
}
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }
    main {
        overflow-x: clip;
    }
    main > .container,
    main > .container-fluid,
    main > .container-xl {
        overflow-x: clip;
    }
    main .row {
        --bs-gutter-x: 0;
    }
    .puzzle-index-shell {
        row-gap: 1rem;
    }
    .front-filter-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .65rem;
        padding: .68rem .8rem;
    }
    .front-filter-card-header > span:not(.front-filter-count) {
        display: none;
    }
    .front-filter-card-header .front-control-button-compact {
        flex: 0 0 auto;
        min-height: 32px;
        height: 32px;
        padding-inline: .72rem;
        white-space: nowrap;
    }
    .front-filter-card-header .front-filter-mobile-toggle {
        width: 100%;
        min-height: 32px;
    }
    .front-filter-card-header .front-filter-toggle-icon {
        margin-left: .45rem;
    }
    .front-filter-sidebar .card {
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .front-filter-sidebar .card-body {
        padding: .78rem .8rem .86rem;
        max-height: min(70vh, 520px);
        overflow-y: auto;
        border-top: 1px solid rgba(226, 232, 240, .84);
    }
    .front-filter-sidebar .filter-section:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}
@media (max-width: 767.98px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    .navbar {
        height: var(--navbar-height);
        min-height: var(--navbar-height);
        padding: 0 .75rem;
        overflow: visible;
    }
    .navbar > .container-xl {
        min-height: var(--navbar-height);
        position: relative;
        gap: .45rem;
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-toggler {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        padding: 0;
        background: rgba(255, 255, 255, .92);
        border-color: var(--border);
        border-radius: var(--radius-sm);
    }
    .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 1rem;
    }
    .navbar-brand a {
        max-width: 100%;
    }
    .navbar-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .navbar .site-user-nav {
        margin-left: auto;
        gap: 0;
    }
    .navbar .site-user-nav .btn {
        height: 34px;
        padding: .35rem .55rem;
        font-size: .78rem;
    }
    .navbar .navbar-collapse {
        position: fixed;
        top: calc(var(--navbar-height) + var(--site-announcement-height, 0px) + .5rem);
        left: .75rem;
        right: .75rem;
        width: auto;
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100dvh - var(--navbar-height) - var(--site-announcement-height, 0px) - 1rem);
        overflow-y: auto;
        z-index: 1060;
        padding: .75rem;
        background: rgba(255, 255, 255, .98);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    }
    .navbar .navbar-collapse.collapsing {
        height: auto !important;
        overflow: hidden;
        transition: opacity var(--transition-fast), transform var(--transition-fast);
    }
    .navbar .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
    .navbar .site-primary-nav {
        width: 100%;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        overflow: visible;
    }
    .navbar .site-primary-nav .nav-item,
    .navbar .site-primary-nav .nav-link {
        width: 100%;
    }
    .navbar .site-primary-nav .nav-link {
        display: flex;
        align-items: center;
        padding: .62rem .75rem;
        white-space: normal;
    }
    .navbar .nav-link.active:not(.dropdown-toggle)::after {
        display: none;
    }
    .navbar .site-nav-more {
        display: none !important;
    }
    .navbar .site-nav-search {
        width: 100%;
        max-width: none;
        flex: none;
        margin: .65rem 0 0 !important;
    }
    .navbar .site-nav-search .input-group {
        width: 100%;
    }
    body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-collapse,
    body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-collapse .nav-link,
    body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-collapse .form-control {
        color: var(--charcoal) !important;
    }
    body.has-top-hero .navbar.navbar-at-top:not(.navbar-menu-open) .navbar-collapse .form-control {
        background: var(--cream);
        border-color: var(--border);
        backdrop-filter: none;
    }
    .hero-section { padding: 2.5rem 1rem 2rem; margin: -1rem -1rem 1.5rem; }
    .site-main > .container-xl > .hero-section:first-child {
        margin-top: calc(-1 * (var(--navbar-height) + 1.5rem));
        padding-top: calc(4.25rem + var(--navbar-height)) !important;
    }
    .hero-section h1 { font-size: 1.6rem; }
    .puzzle-card .card-img-wrapper { aspect-ratio: 1 / 1; }
    .puzzle-card .card-img-top { height: 100%; }
    .admin-sidebar { width: 200px; }
    .admin-content { margin-left: 200px; }
    .comment-reply { margin-left: 1.5rem; }
    .message-bubble { max-width: 85%; }
    .timeline { padding-left: 2rem; }
}
@media (max-width: 480px) {
    body { font-size: 13px; }
    h1 { font-size: 1.4rem; }
    .navbar {
        padding: 0 .5rem;
    }
    .navbar > .container-xl {
        gap: .35rem;
    }
    .navbar-toggler {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
    .navbar-brand {
        font-size: .95rem;
    }
    .site-navbar-logo {
        width: 26px;
        height: 26px;
    }
    .navbar .site-user-nav .btn {
        padding-left: .45rem;
        padding-right: .45rem;
    }
    .navbar .navbar-collapse {
        left: .5rem;
        right: .5rem;
        max-width: calc(100vw - 1rem);
        padding: .65rem;
    }
    .hero-section { padding: 2rem 0.75rem 1.5rem; }
    .site-main > .container-xl > .hero-section:first-child {
        padding-top: calc(3.75rem + var(--navbar-height)) !important;
    }
    .puzzle-card .card-img-wrapper { aspect-ratio: 1 / 1; }
    .puzzle-card .card-img-top { height: 100%; }
    .admin-sidebar { transform: translateX(-100%); transition: transform var(--transition-smooth); width: 260px; }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-sidebar-toggle { display: flex; }
    .admin-sidebar-overlay.show { display: block; }
    .admin-content { margin-left: 0; }
    .admin-content .content-header { padding-left: 60px; }
    .footer { padding: 2rem 0 1rem; }
}
@media print {
    .navbar, .admin-sidebar, .footer, .filter-sidebar, .pagination, .btn-gold, .btn-outline-gold { display: none !important; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    .admin-content { margin-left: 0; }
}
.country-flag-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    vertical-align: middle;
}

.country-flag-icon {
    width: 1.25em;
    height: .94em;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    flex: 0 0 auto;
}
/* Site announcements */
.site-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(90deg, #17120a 0%, #241a0d 50%, #17120a 100%);
    color: #f7d782;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(184,134,11,.2);
    font-size: .88rem;
    height: 34px;
    min-height: 34px;
}

.site-announcement-inner {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: min(1320px, calc(100% - 2rem));
    min-height: 34px;
    margin: 0 auto;
    overflow: hidden;
}

.site-announcement-inner > .bi {
    flex: 0 0 auto;
    color: #f0c96d;
}

.site-announcement-track {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
}

.site-announcement-marquee {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    min-width: 200%;
    will-change: transform;
    animation: site-announcement-slide 38s linear infinite;
}

.site-announcement-track:hover .site-announcement-marquee {
    animation-play-state: paused;
}

.site-announcement-item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    max-width: 100%;
}

.site-announcement-item strong {
    color: #ffe6a3;
    font-weight: 800;
}

.site-announcement-item em {
    max-width: 72vw;
    overflow: hidden;
    color: rgba(255, 246, 220, .86);
    font-style: normal;
    text-overflow: ellipsis;
}

@keyframes site-announcement-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.site-notice-modal .modal-header {
    background: #fffaf0;
    border-bottom-color: rgba(184,134,11,.22);
}
.site-notice-item + .site-notice-item {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border-light);
}
.site-notice-item h6 { color: var(--gold-dark); font-weight: 700; }
.site-notice-item p { margin-bottom: 0; color: var(--text-muted); line-height: 1.7; }
.img-crop-wrapper {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.img-crop-stage {
    flex: 1;
    min-width: 0;
}

.img-crop-main {
    height: min(70vh, 720px);
    min-height: 560px;
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8f9fa;
}

.img-crop-sidebar {
    width: 240px;
    flex-shrink: 0;
    text-align: center;
}

.img-crop-preview-wrapper {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    margin: 0 auto;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.img-crop-preview-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.crop-side-label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.crop-side-label span {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 500;
}

.crop-tool-stack {
    display: grid;
    gap: .45rem;
}

.crop-zoom-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.crop-zoom-actions .crop-tool-btn {
    min-width: 0;
    padding-left: .35rem;
    padding-right: .35rem;
}

.img-crop-main {
    position: relative;
}
.img-crop-main .cropper-view-box {
    outline: 1px solid rgba(13, 110, 253, .9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.img-crop-main .cropper-line {
    background-color: #0d6efd;
    opacity: .85;
}
.img-crop-main .cropper-line.line-e,
.img-crop-main .cropper-line.line-w {
    width: 2px;
}
.img-crop-main .cropper-line.line-n,
.img-crop-main .cropper-line.line-s {
    height: 2px;
}
.img-crop-main .cropper-line.line-e {
    right: 0;
}
.img-crop-main .cropper-line.line-w {
    left: 0;
}
.img-crop-main .cropper-line.line-n {
    top: 0;
}
.img-crop-main .cropper-line.line-s {
    bottom: 0;
}
.img-crop-main .cropper-point {
    width: 8px;
    height: 8px;
    background-color: #0d6efd;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
}
.img-crop-main .cropper-point.point-se {
    width: 10px;
    height: 10px;
}
.img-crop-main .cropper-point.point-e {
    right: -3px;
}
.img-crop-main .cropper-point.point-n {
    top: -3px;
}
.img-crop-main .cropper-point.point-w {
    left: -3px;
}
.img-crop-main .cropper-point.point-s {
    bottom: -3px;
}
.img-crop-main .cropper-point.point-ne {
    right: -4px;
    top: -4px;
}
.img-crop-main .cropper-point.point-nw {
    left: -4px;
    top: -4px;
}
.img-crop-main .cropper-point.point-sw {
    left: -4px;
    bottom: -4px;
}
.img-crop-main .cropper-point.point-se {
    right: -4px;
    bottom: -4px;
}
.img-crop-main .cropper-dashed {
    border-color: rgba(255, 255, 255, .9);
}

.crop-protect-canvas {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.img-crop-main.is-protect-painting .crop-protect-canvas {
    pointer-events: auto;
    cursor: var(--protect-brush-cursor), crosshair;
}

.img-crop-main.is-protect-painting.is-protect-erasing .crop-protect-canvas {
    cursor: var(--protect-erase-cursor), crosshair;
}

.protect-tool-panel {
    display: grid;
    gap: .45rem;
    padding: .55rem;
    border: 1px solid rgba(107, 114, 128, .18);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .72);
}

.crop-tool-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    border-bottom: 1px solid rgba(107, 114, 128, .18);
}

.crop-tool-tab {
    min-height: 34px;
    padding: .2rem .1rem .45rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.crop-tool-tab.active,
.crop-tool-tab:hover,
.crop-tool-tab:focus {
    border-bottom-color: var(--gold);
    background: transparent;
    color: var(--gold-dark);
    outline: 0;
}

.crop-tool-tab-content {
    margin-top: .55rem;
}

.protect-tool-panel .crop-tool-btn.active {
    color: var(--navy);
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.protect-tool-panel .protect-mode-actions .crop-tool-btn:not(.active) {
    color: var(--text-main);
    border-color: var(--border);
    background: var(--white);
}

.protect-mode-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.protect-mode-actions .crop-tool-btn {
    width: 100%;
    min-width: 0;
}

.protect-brush-label {
    margin: 0;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-align: left;
}

.protect-brush-range {
    --protect-brush-size: 28px;
    min-height: 56px;
    margin: -.2rem 0 -.35rem;
}

.protect-brush-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(107, 114, 128, .22);
}

.protect-brush-range::-webkit-slider-thumb {
    width: var(--protect-brush-size, 28px);
    height: var(--protect-brush-size, 28px);
    margin-top: calc((8px - var(--protect-brush-size, 28px)) / 2);
    border: 2px solid rgba(22, 163, 74, .95);
    border-radius: 50%;
    background: rgba(34, 197, 94, .28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset;
}

.protect-brush-range::-moz-range-track {
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(107, 114, 128, .22);
}

.protect-brush-range::-moz-range-thumb {
    width: var(--protect-brush-size, 28px);
    height: var(--protect-brush-size, 28px);
    border: 2px solid rgba(22, 163, 74, .95);
    border-radius: 50%;
    background: rgba(34, 197, 94, .28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset;
}

.protect-brush-value {
    margin-top: -.35rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.crop-tool-btn,
.crop-footer-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

.smart-bg-panel {
    padding: .65rem;
    border: 1px solid rgba(184, 142, 67, .24);
    border-radius: var(--radius-sm);
    background: rgba(248, 241, 228, .45);
    text-align: left;
}

.smart-bg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 800;
}

.smart-bg-head small {
    color: var(--gold-dark);
    font-size: .72rem;
    font-weight: 800;
}

.smart-bg-models {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin-bottom: .55rem;
}

.smart-bg-model {
    min-width: 0;
    min-height: 46px;
    padding: .35rem .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .9);
    color: var(--text-main);
    display: grid;
    gap: .08rem;
    text-align: center;
    line-height: 1.15;
}

.smart-bg-model strong {
    font-size: .8rem;
}

.smart-bg-model span {
    color: var(--text-muted);
    font-size: .68rem;
}

.smart-bg-model.active,
.smart-bg-model:hover,
.smart-bg-model:focus {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold-dark);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, .18);
}

.smart-bg-current {
    display: grid;
    gap: .15rem;
    margin-bottom: .55rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.35;
}

.smart-bg-current strong {
    color: var(--navy);
    font-size: .78rem;
}

.smart-bg-keep-detail {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .45rem;
    border: 1px solid rgba(184, 142, 67, .16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .68);
    color: var(--text-muted);
    font-size: .72rem;
    text-align: left;
}

.smart-bg-keep-detail .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.smart-bg-download {
    display: grid;
    gap: .4rem;
    margin-bottom: .55rem;
}

.smart-bg-progress {
    height: 8px;
    background: rgba(107, 114, 128, .18);
}

.smart-bg-progress .progress-bar {
    background: var(--gold);
}

.smart-bg-download-text {
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.25;
}

.smart-bg-download-actions {
    display: flex;
    gap: .35rem;
}

.smart-bg-download-actions .btn {
    min-height: 30px;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
}

.smart-bg-status,
.crop-help-text {
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 767.98px) {
    .img-crop-wrapper {
        flex-direction: column;
    }

    .img-crop-sidebar {
        width: 100%;
    }

    .img-crop-main {
        height: min(72vh, 620px);
        min-height: 420px;
    }
}

@media (max-width: 767.98px) {
    .home-hero-carousel {
        --home-hero-height: 430px;
    }
    .home-hero-slide {
        grid-template-columns: 1fr;
        gap: 1.35rem;
        padding-left: 3rem;
        padding-right: 3rem;
        text-align: center;
    }
    .home-hero-copy {
        text-align: center;
    }
    .home-hero-copy .hero-search {
        margin-left: auto;
        margin-right: auto;
    }
    .home-hero-actions {
        justify-content: center;
    }
    .home-hero-feature img {
        width: 170px;
    }
    .home-hero-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-hero-stat {
        min-height: 58px;
        padding: .4rem .5rem;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        justify-items: stretch;
        text-align: left;
        gap: .35rem;
    }
    .home-hero-stat i {
        width: 26px;
        height: 26px;
        font-size: .82rem;
    }
    .home-hero-stat span {
        max-width: 100%;
        font-size: .7rem;
    }
    .home-hero-stat strong {
        font-size: .96rem;
        justify-self: end;
    }
    .home-leaderboard-strip {
        grid-template-columns: repeat(10, minmax(96px, 96px));
    }
}

@media (max-width: 575.98px) {
    .home-hero-carousel {
        --home-hero-height: 560px;
    }
    .home-hero-slide {
        width: min(100vw, calc(100vw - 1rem));
        padding: 0 2.25rem 3.6rem;
    }
    .home-hero-slide-main .home-hero-copy {
        width: 100%;
    }
    .home-hero-actions {
        gap: .45rem;
    }
    .home-hero-actions .btn {
        min-width: min(9rem, 100%);
        flex: 1 1 calc(50% - .45rem);
        padding-left: .45rem;
        padding-right: .45rem;
        white-space: normal;
    }
    .home-hero-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }
    .home-hero-stat {
        min-height: 62px;
        padding: .38rem .5rem;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        justify-items: stretch;
        gap: .32rem;
        text-align: left;
    }
    .home-hero-stat i {
        width: 24px;
        height: 24px;
        font-size: .78rem;
    }
    .home-hero-stat span {
        max-width: 100%;
        font-size: .64rem;
    }
    .home-hero-stat strong {
        font-size: .9rem;
        justify-self: end;
    }
    .home-hero-feature img {
        width: 132px;
    }
    .home-hero-carousel .carousel-control-prev,
    .home-hero-carousel .carousel-control-next {
        width: 2.25rem;
    }
    .home-content-section {
        margin-bottom: 2.25rem;
    }
    .home-content-section .page-header {
        align-items: center;
        gap: .65rem;
        margin-bottom: .8rem;
    }
    .home-content-section .page-header h3 {
        font-size: 1rem;
    }
    .home-content-section .page-header .btn {
        min-height: 30px;
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: .78rem;
    }
    .home-timeline-preview {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(296px, calc(100vw - 2rem));
        grid-template-columns: none;
        gap: 0;
        max-width: 100%;
        min-height: 10.6rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        padding: .25rem .1rem .8rem;
        scroll-snap-type: x mandatory;
    }
    .home-timeline-preview::before {
        content: none;
    }
    .home-timeline-item {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: 1.65rem 1.9rem minmax(6.8rem, auto);
        align-items: stretch;
        gap: 0;
        min-width: 0;
        min-height: 10.6rem;
        padding: 0 .45rem;
        scroll-snap-align: start;
    }
    .home-timeline-item::before {
        content: "";
        top: 2.42rem;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(202,168,106,.72);
        border-radius: 0;
    }
    .home-timeline-item::after {
        top: 2.05rem;
        left: 50%;
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
        background: var(--gold);
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px rgba(202,168,106,.68), 0 6px 14px rgba(64,48,22,.14);
        transform: translateX(-50%);
    }
    .home-timeline-date {
        align-self: end;
        justify-self: center;
        padding: 0 .15rem .22rem;
        font-size: .76rem;
        line-height: 1.2;
        text-align: center;
    }
    .home-timeline-marker {
        display: none;
    }
    .home-timeline-content {
        grid-row: 3;
        grid-template-columns: 62px minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        align-items: center;
        gap: .62rem;
        padding: .62rem .7rem;
        min-height: 6.65rem;
        width: 100%;
        position: relative;
        z-index: 1;
        text-align: left;
    }
    .home-timeline-thumb {
        width: 62px;
    }
    .home-timeline-text {
        width: 100%;
        justify-items: start;
        gap: .28rem;
    }
    .home-timeline-type {
        max-width: 100%;
        white-space: nowrap;
    }
    .home-timeline-content strong {
        width: 100%;
        font-size: .86rem;
        line-height: 1.32;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: left;
    }
    .home-leaderboard-strip {
        grid-template-columns: repeat(10, minmax(92px, 92px));
        gap: .6rem;
        margin-left: -.15rem;
        margin-right: -.15rem;
    }
    .home-leaderboard-item {
        min-height: 124px;
        padding: .42rem .3rem .5rem;
    }
    .home-leaderboard-avatar {
        width: 64px;
        height: 64px;
    }
    .home-leaderboard-name {
        font-size: .76rem;
    }
}