@import url('../../default/css/config.css');

.spod-public-navbar ~ main {
    padding-top: 4rem;
}

.config-app-shell {
    position: relative;
    background:
        radial-gradient(circle at 12% 14%, rgba(127, 167, 216, 0.12) 0%, transparent 22%),
        linear-gradient(180deg, #0f141b 0%, #121821 100%);
}

html:not(.dark) .config-app-shell {
    background:
        radial-gradient(circle at 12% 14%, rgba(127, 167, 216, 0.1) 0%, transparent 22%),
        linear-gradient(180deg, #eef4fa 0%, #f7fbff 100%);
}

.config-theme-preview-host {
    background:
        radial-gradient(circle at top left, rgba(127, 167, 216, 0.08) 0%, transparent 24%),
        linear-gradient(180deg, #eef3f8 0%, #f7fbff 100%);
}

html.dark .config-theme-preview-host {
    background:
        radial-gradient(circle at top left, rgba(127, 167, 216, 0.12) 0%, transparent 22%),
        linear-gradient(180deg, #10161d 0%, #121821 100%);
}

.config-terminal-window {
    margin: 1.2rem;
    border: 1px solid rgba(198, 210, 224, 0.86);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
    box-shadow: 0 30px 54px rgba(103, 126, 153, 0.16);
}

html.dark .config-terminal-window {
    border-color: rgba(67, 71, 77, 0.74);
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.98) 0%, rgba(18, 20, 22, 0.99) 100%);
    box-shadow: 0 28px 60px rgba(2, 6, 12, 0.42);
}

.config-top-stack {
    background: linear-gradient(180deg, rgba(239, 244, 249, 0.98) 0%, rgba(234, 241, 248, 0.96) 100%);
    border-bottom: 1px solid rgba(198, 210, 224, 0.86);
    box-shadow: none;
}

html.dark .config-top-stack {
    background: linear-gradient(180deg, rgba(40, 42, 44, 0.98) 0%, rgba(30, 32, 34, 0.98) 100%);
    border-bottom-color: rgba(67, 71, 77, 0.78);
    box-shadow: none;
}

.config-page-header {
    min-height: 3rem;
    padding-inline: 1.5rem;
    background: transparent;
}

.config-page-header__identity {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.95rem;
    color: #eff6ff;
    background: linear-gradient(135deg, rgba(111, 144, 185, 0.92) 0%, rgba(169, 196, 225, 0.98) 100%);
    border-color: rgba(111, 144, 185, 0.28);
    box-shadow: 0 12px 24px rgba(111, 144, 185, 0.2);
}

html.dark .config-page-header__identity {
    color: #dbe4f2;
    background: linear-gradient(135deg, rgba(53, 80, 111, 0.9) 0%, rgba(110, 144, 185, 0.96) 100%);
    border-color: rgba(127, 167, 216, 0.35);
    box-shadow: 0 14px 28px rgba(53, 80, 111, 0.28);
}

.config-page-header__title {
    color: #223346;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
}

html.dark .config-page-header__title {
    color: #f3f7fc;
}

.config-page-sticky-shell {
    padding-inline: 1.5rem;
}

.config-top-stack--audit-log {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.config-page-header--audit-log {
    position: relative;
    z-index: 2;
    min-height: 3.35rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.config-page-sticky-shell--audit-log {
    position: relative;
    z-index: 1;
    padding-top: 0.2rem;
}

.config-action-bar-shell {
    width: 100%;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(239, 244, 249, 0.98) 100%) !important;
    border-color: rgba(198, 210, 224, 0.86) !important;
    box-shadow: none;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(198, 210, 224, 0.46);
    border-radius: 0 !important;
}

html.dark .config-action-bar-shell {
    background: linear-gradient(180deg, rgba(12, 14, 16, 0.98) 0%, rgba(12, 14, 16, 0.98) 100%) !important;
    border-color: rgba(67, 71, 77, 0.78) !important;
    border-top-color: rgba(67, 71, 77, 0.42) !important;
    box-shadow: none;
}

.config-action-tooltip {
    background: #203247;
    color: #f8fbff;
}

html.dark .config-action-tooltip {
    background: #06090d;
    color: #f7fbff;
}

.config-content-main {
    background: transparent;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.config-content-shell {
    width: min(90%, 112rem);
    max-width: none !important;
}

@media (max-width: 1023.98px) {
    .config-content-shell {
        width: 100%;
    }
}

.config-screen-body,
.config-user-editor-layout,
.config-user-editor-list {
    position: relative;
    z-index: 1;
}

.config-screen-body > *:first-child,
.config-user-editor-list > *:first-child {
    border-radius: 0.85rem;
}

.config-screen-body--nexus {
    position: relative;
}

.config-screen-body--nexus::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(244, 248, 252, 0.18) 100%),
        linear-gradient(90deg, rgba(107, 147, 196, 0.1) 0, rgba(107, 147, 196, 0.1) 1px, transparent 1px, transparent 100%);
    background-size: 100% 100%, 28px 28px;
    opacity: 0.9;
}

html.dark .config-screen-body--nexus::before {
    background:
        linear-gradient(180deg, rgba(18, 20, 22, 0.3) 0%, rgba(12, 14, 16, 0.12) 100%),
        linear-gradient(90deg, rgba(142, 180, 223, 0.09) 0, rgba(142, 180, 223, 0.09) 1px, transparent 1px, transparent 100%);
    background-size: 100% 100%, 28px 28px;
}

.config-content-shell--nexus > .config-screen-body > :is(div, section, article):first-child,
.config-content-shell--nexus .config-user-editor-list > :is(div, section, article):first-child,
.config-content-shell--nexus .config-user-editor-layout > :is(div, section, article) {
    position: relative;
    z-index: 1;
}

.config-content-shell--nexus :is(
    .bg-surface,
    .bg-surface-muted,
    .config-user-list-panel,
    .menu-editor-tree-card,
    .menu-editor-tree-filter,
    .config-action-bar-shell,
    [class*='bg-white'],
    [class*='bg-surface'],
    [class*='dark:bg-surface-dark'],
    [class*='dark:bg-slate-900/30']
) {
    border-color: rgba(198, 210, 224, 0.82) !important;
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(239, 244, 249, 0.98) 100%) !important;
    box-shadow: 0 14px 32px rgba(103, 126, 153, 0.12) !important;
}

html.dark .config-content-shell--nexus :is(
    .bg-surface,
    .bg-surface-muted,
    .config-user-list-panel,
    .menu-editor-tree-card,
    .menu-editor-tree-filter,
    .config-action-bar-shell,
    [class*='bg-white'],
    [class*='bg-surface'],
    [class*='dark:bg-surface-dark'],
    [class*='dark:bg-slate-900/30']
) {
    border-color: rgba(67, 71, 77, 0.82) !important;
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.98) 0%, rgba(18, 20, 22, 0.98) 100%) !important;
    box-shadow: 0 18px 34px rgba(2, 6, 12, 0.28) !important;
}

.config-content-shell--nexus :is(
    .rounded-xl.border,
    .rounded-2xl.border,
    .rounded-\[1\.75rem\].border,
    [class*='border-gray-200'],
    [class*='border-border'],
    [class*='border-slate-200']
) {
    border-color: rgba(198, 210, 224, 0.82) !important;
}

html.dark .config-content-shell--nexus :is(
    .rounded-xl.border,
    .rounded-2xl.border,
    .rounded-\[1\.75rem\].border,
    [class*='border-gray-200'],
    [class*='border-border'],
    [class*='border-slate-200']
) {
    border-color: rgba(67, 71, 77, 0.82) !important;
}

.config-content-shell--nexus :is(table thead, .overflow-x-auto, .user-list-container, .checks) {
    border-color: rgba(198, 210, 224, 0.82) !important;
}

html.dark .config-content-shell--nexus :is(table thead, .overflow-x-auto, .user-list-container, .checks) {
    border-color: rgba(67, 71, 77, 0.82) !important;
}

.config-content-shell--nexus :is(
    button,
    a.ue-btn-primary,
    a.ue-btn-secondary,
    a.ue-btn-tertiary,
    a.ue-btn-danger,
    .ps-icon-button,
    .ss-tools-tab,
    .ss-tools-subtab,
    .ss-tools-plan-item,
    .ss-tools-module-item,
    [data-ss-apply-plan-list]
):not(.config-action-button):not([hidden]) {
    border-radius: 0.8rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.config-content-shell--nexus :is(
    button,
    a.ue-btn-primary,
    a.ue-btn-secondary,
    a.ue-btn-tertiary,
    .ps-icon-button,
    .ss-tools-tab,
    .ss-tools-subtab,
    .ss-tools-plan-item,
    .ss-tools-module-item,
    [data-ss-apply-plan-list]
):not(.ue-btn-primary):not(.config-action-button):not([hidden]) {
    border: 1px solid rgba(198, 210, 224, 0.88);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(236, 242, 248, 0.98) 100%);
    color: #28415d;
    box-shadow: 0 10px 20px rgba(103, 126, 153, 0.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

html.dark .config-content-shell--nexus :is(
    button,
    a.ue-btn-primary,
    a.ue-btn-secondary,
    a.ue-btn-tertiary,
    .ps-icon-button,
    .ss-tools-tab,
    .ss-tools-subtab,
    .ss-tools-plan-item,
    .ss-tools-module-item,
    [data-ss-apply-plan-list]
):not(.ue-btn-primary):not(.config-action-button):not([hidden]) {
    border-color: rgba(67, 71, 77, 0.88);
    background: linear-gradient(180deg, rgba(40, 42, 44, 0.98) 0%, rgba(24, 27, 31, 0.98) 100%);
    color: #dfe8f5;
    box-shadow: 0 12px 24px rgba(2, 6, 12, 0.16);
}

.config-content-shell--nexus :is(
    button,
    a.ue-btn-primary,
    a.ue-btn-secondary,
    a.ue-btn-tertiary,
    .ps-icon-button,
    .ss-tools-tab,
    .ss-tools-subtab,
    .ss-tools-plan-item,
    .ss-tools-module-item,
    [data-ss-apply-plan-list]
):not(.config-action-button):not([hidden]):hover {
    transform: translateY(-1px);
    border-color: rgba(111, 144, 185, 0.72);
    color: #203247;
    box-shadow: 0 14px 26px rgba(103, 126, 153, 0.14);
}

html.dark .config-content-shell--nexus :is(
    button,
    a.ue-btn-primary,
    a.ue-btn-secondary,
    a.ue-btn-tertiary,
    .ps-icon-button,
    .ss-tools-tab,
    .ss-tools-subtab,
    .ss-tools-plan-item,
    .ss-tools-module-item,
    [data-ss-apply-plan-list]
):not(.config-action-button):not([hidden]):hover {
    border-color: rgba(142, 180, 223, 0.68);
    color: #f3f7fc;
    box-shadow: 0 16px 28px rgba(2, 6, 12, 0.22);
}

.config-content-shell--nexus :is(select, .ue-input:is(select)) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 2.75rem;
    padding: 0.65rem 2.4rem 0.55rem 0.9rem;
    border: 0;
    border-bottom: 2px solid rgba(198, 210, 224, 0.92);
    border-radius: 0.35rem 0.35rem 0 0;
    background:
        linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(237, 243, 249, 0.98) 100%),
        linear-gradient(135deg, transparent 50%, #6b7f96 50%);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 0.95rem) 1.15rem;
    background-size: 100% 100%, 0.5rem 0.5rem;
    color: #4e637a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

html.dark .config-content-shell--nexus :is(select, .ue-input:is(select)) {
    border-bottom-color: rgba(67, 71, 77, 0.92);
    background:
        linear-gradient(180deg, rgba(40, 42, 44, 0.98) 0%, rgba(24, 27, 31, 0.98) 100%),
        linear-gradient(135deg, transparent 50%, #8da0b7 50%);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 0.95rem) 1.15rem;
    background-size: 100% 100%, 0.5rem 0.5rem;
    color: #c9d5e4;
}

.config-content-shell--nexus :is(select, .ue-input:is(select)):focus {
    border-bottom-color: #6b93c4;
    box-shadow: none;
}

html.dark .config-content-shell--nexus :is(select, .ue-input:is(select)):focus {
    border-bottom-color: #8eb4df;
}

.config-content-shell--nexus :is(input[type='text'], input[type='email'], input[type='search'], input[type='number'], textarea):not(.config-action-label) {
    border-radius: 0.7rem;
    border: 1px solid rgba(198, 210, 224, 0.88);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(240, 245, 250, 0.98) 100%);
    color: #203247;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html.dark .config-content-shell--nexus :is(input[type='text'], input[type='email'], input[type='search'], input[type='number'], textarea):not(.config-action-label) {
    border-color: rgba(67, 71, 77, 0.88);
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.98) 0%, rgba(12, 14, 16, 0.96) 100%);
    color: #edf3fb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]),
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]),
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    border-radius: 0.32rem;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 98%, white) 0%, color-mix(in srgb, var(--color-background) 96%, var(--color-surface)) 100%);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.dark .config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]),
html.dark .nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]),
html.dark .spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]) {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, black) 0%, color-mix(in srgb, var(--color-background) 88%, var(--color-surface)) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(2, 6, 12, 0.24);
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden])::before,
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden])::before,
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden])::before {
    content: '';
    width: 0.68rem;
    height: 0.68rem;
    transform: scale(0);
    transition: transform .16s ease-in-out;
    clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 20%, 86% 6%, 38% 66%);
    background: currentColor;
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked,
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked,
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 36%, #1f2937) 0%, var(--color-primary) 100%);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

html.dark .config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked,
html.dark .nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked,
html.dark .spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 38%, #111827) 0%, var(--color-primary) 100%);
    box-shadow: 0 10px 18px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked::before,
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked::before,
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):checked::before {
    transform: scale(1);
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible,
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible,
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 24%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

html.dark .config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible,
html.dark .nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible,
html.dark .spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 26%, transparent), 0 10px 18px rgba(2, 6, 12, 0.24);
}

.config-content-shell--nexus :is(input[type='checkbox']):not(.sr-only):not([hidden]):disabled,
.nexus-settings-screen :is(input[type='checkbox']):not(.sr-only):not([hidden]):disabled,
.spod-app-shell :is(input[type='checkbox']):not(.sr-only):not([hidden]):disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.config-content-shell--nexus :is(table) {
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

.config-content-shell--nexus :is(thead th) {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #60758c;
}

html.dark .config-content-shell--nexus :is(thead th) {
    color: #98a9bc;
}

.config-content-shell--nexus :is(tbody tr) {
    background: rgba(248, 251, 255, 0.82);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.dark .config-content-shell--nexus :is(tbody tr) {
    background: rgba(18, 20, 22, 0.72);
}

.config-content-shell--nexus :is(tbody tr:hover) {
    background: rgba(231, 240, 250, 0.96);
    box-shadow: inset 3px 0 0 #6b93c4;
}

html.dark .config-content-shell--nexus :is(tbody tr:hover) {
    background: rgba(39, 49, 61, 0.92);
    box-shadow: inset 3px 0 0 #8eb4df;
}

.config-content-shell--nexus #ss-tools-root > .rounded-\[1\.75rem\],
.config-content-shell--nexus #ss-tools-root .rounded-\[1\.5rem\],
.config-content-shell--nexus #ss-tools-root .rounded-\[1\.25rem\],
.config-content-shell--nexus #ss-tools-root .rounded-2xl,
.config-content-shell--nexus #ss-tools-root [class*='rounded-\[1.5rem\]'],
.config-content-shell--nexus #ss-tools-root [class*='rounded-\[1.75rem\]'] {
    border-color: rgba(198, 210, 224, 0.82) !important;
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(239, 244, 249, 0.98) 100%) !important;
    box-shadow: 0 16px 32px rgba(103, 126, 153, 0.1) !important;
}

html.dark .config-content-shell--nexus #ss-tools-root > .rounded-\[1\.75rem\],
html.dark .config-content-shell--nexus #ss-tools-root .rounded-\[1\.5rem\],
html.dark .config-content-shell--nexus #ss-tools-root .rounded-\[1\.25rem\],
html.dark .config-content-shell--nexus #ss-tools-root .rounded-2xl,
html.dark .config-content-shell--nexus #ss-tools-root [class*='rounded-\[1.5rem\]'],
html.dark .config-content-shell--nexus #ss-tools-root [class*='rounded-\[1.75rem\]'] {
    border-color: rgba(67, 71, 77, 0.82) !important;
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.98) 0%, rgba(18, 20, 22, 0.98) 100%) !important;
    box-shadow: 0 18px 34px rgba(2, 6, 12, 0.24) !important;
}

.config-content-shell--nexus #ss-tools-root :is(.ss-tools-tab, .ss-tools-subtab, .ss-tools-plan-item, .ss-tools-module-item, [data-ss-apply-plan-list]) {
    border-radius: 0.95rem !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.config-content-shell--nexus #ss-tools-root :is(.ss-tools-tab, .ss-tools-subtab) {
    min-height: 2.85rem;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.config-content-shell--nexus #ss-tools-root :is(.ss-tools-tab, .ss-tools-subtab):not(.bg-primary) {
    border-color: rgba(198, 210, 224, 0.92) !important;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(236, 242, 248, 0.98) 100%) !important;
    color: #27415d !important;
}

html.dark .config-content-shell--nexus #ss-tools-root :is(.ss-tools-tab, .ss-tools-subtab):not(.bg-primary) {
    border-color: rgba(67, 71, 77, 0.9) !important;
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.98) 0%, rgba(12, 14, 16, 0.96) 100%) !important;
    color: #e8f0fb !important;
}

.config-content-shell--nexus #ss-tools-root :is(.bg-primary.text-white, .ss-tools-tab.bg-primary, .ss-tools-subtab.bg-primary) {
    border-color: color-mix(in srgb, var(--config-tab-active-bg) 68%, rgba(198, 210, 224, 0.82)) !important;
    background: var(--config-tab-active-bg) !important;
    color: var(--config-tab-active-text) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--config-tab-active-bg) 22%, transparent) !important;
}

html:not(.dark) .nexus-settings-screen {
    color: #203247;
}

html:not(.dark) .nexus-settings-screen :is(
    .border-white\/10,
    .border-white\/5,
    .border-slate-800,
    .border-slate-700,
    .border-blue-400\/25,
    .border-red-500\/20
) {
    border-color: rgba(198, 210, 224, 0.82) !important;
}

html:not(.dark) .nexus-settings-screen :is(
    .bg-slate-950,
    .bg-slate-950\/80,
    .bg-slate-900,
    .bg-slate-900\/70,
    .bg-slate-900\/60,
    .bg-blue-950\/50,
    .bg-teal-950,
    .spod-modal
) {
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(239, 244, 249, 0.98) 100%) !important;
    color: #203247 !important;
    box-shadow: 0 18px 34px rgba(103, 126, 153, 0.12) !important;
}

html:not(.dark) .nexus-settings-screen .spod-modal-backdrop {
    background: rgba(132, 151, 176, 0.24);
    backdrop-filter: blur(6px);
}

html:not(.dark) .nexus-settings-screen :is(
    .text-slate-50,
    .text-white,
    .text-slate-100,
    .text-slate-950
) {
    color: #203247 !important;
}

html:not(.dark) .nexus-settings-screen :is(
    .text-slate-500,
    .text-slate-400,
    .text-slate-300,
    .text-blue-200,
    .text-teal-200,
    .text-red-300
) {
    color: #627790 !important;
}

html:not(.dark) .nexus-settings-screen :is(
    .bg-blue-200,
    .bg-blue-950\/50,
    .bg-teal-950
) {
    background: linear-gradient(135deg, #314863 0%, #6b93c4 100%) !important;
    color: #f8fbff !important;
    border-color: rgba(111, 144, 185, 0.55) !important;
}

html:not(.dark) .nexus-settings-screen :is(
    input[type='text'],
    input[type='number'],
    select
) {
    border-bottom-color: rgba(198, 210, 224, 0.92) !important;
    background: linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(237, 243, 249, 0.98) 100%) !important;
    color: #203247 !important;
}

html:not(.dark) .nexus-settings-screen :is(input[type='checkbox']) {
    border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border)) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 98%, white) 0%, color-mix(in srgb, var(--color-background) 96%, var(--color-surface)) 100%) !important;
    color: #ffffff !important;
}

html:not(.dark) .nexus-settings-screen .ss-brand-logo-preview {
    border-color: rgba(198, 210, 224, 0.92) !important;
    background: linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(237, 243, 249, 0.98) 100%) !important;
    box-shadow: inset 0 0 0 4px rgba(226, 236, 247, 0.95);
}

html:not(.dark) .nexus-settings-screen .ue-token-sections > * {
    border-color: rgba(198, 210, 224, 0.82) !important;
    background: rgba(248, 251, 255, 0.9) !important;
}

.config-mobile-toolbar {
    background: linear-gradient(180deg, rgba(247, 250, 254, 0.96) 0%, rgba(239, 244, 249, 0.92) 100%);
    border-bottom-color: rgba(198, 210, 224, 0.95);
}

html.dark .config-mobile-toolbar {
    background: linear-gradient(180deg, rgba(12, 18, 26, 0.96) 0%, rgba(16, 23, 34, 0.92) 100%);
    border-bottom-color: rgba(39, 50, 67, 0.94);
}

.config-mobile-toolbar__toggle {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(198, 210, 224, 0.95);
    color: #203247;
}

html.dark .config-mobile-toolbar__toggle {
    background: rgba(20, 28, 39, 0.94);
    border-color: rgba(39, 50, 67, 0.94);
    color: #edf3fb;
}

.config-mobile-toolbar__copy strong {
    color: #203247;
}

html.dark .config-mobile-toolbar__copy strong {
    color: #f3f7fc;
}

.config-mobile-toolbar__eyebrow {
    color: #6b7f96;
}

html.dark .config-mobile-toolbar__eyebrow {
    color: #8da0b7;
}

@media (min-width: 1024px) {
    .config-workspace-shell--with-sidebar {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .config-sidebar-shell {
        position: sticky;
        top: 0;
        width: 7.5rem;
        height: calc(100vh - 4rem);
        align-self: stretch;
        z-index: 2;
    }

    .config-main-shell {
        padding: 0.35rem 0.85rem 0.85rem 0;
    }

    .config-sidebar-panel {
        border-right: 0 !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-bg) 98%, white) 0%, color-mix(in srgb, var(--sideactionbar-surface) 96%, var(--sideactionbar-bg)) 100%) !important;
        box-shadow: none;
    }

    html.dark .config-sidebar-panel {
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-dark-bg) 98%, black) 0%, color-mix(in srgb, var(--sideactionbar-dark-surface) 96%, var(--sideactionbar-dark-bg)) 100%) !important;
        box-shadow: none;
    }

    .spod-config-sidebar__user-card {
        padding: 0.25rem 0;
        border-radius: 0;
        background: transparent;
        border: 0;
    }

    html.dark .spod-config-sidebar__user-card {
        background: transparent;
        border-color: transparent;
    }

    .spod-config-sidebar__user-card-title,
    .spod-config-sidebar__user-email,
    .spod-config-sidebar__user-meta {
        display: none;
    }

    .spod-config-sidebar__user-card-shell {
        gap: 0.45rem;
    }

    .spod-config-sidebar__user-avatar {
        width: 2.7rem;
        height: 2.7rem;
        flex-basis: 2.7rem;
        font-size: 0.78rem;
        box-shadow: 0 12px 22px rgba(2, 6, 12, 0.18);
    }

    .spod-config-sidebar__user-name {
        display: block;
        font-size: 0.5rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-align: center;
        color: var(--sideactionbar-text-muted);
        line-height: 1.25;
    }

    html.dark .spod-config-sidebar__user-name {
        color: var(--sideactionbar-text-muted);
    }

    .spod-config-sidebar__nav {
        gap: 0.92rem !important;
        scroll-behavior: smooth;
    }

    .spod-config-sidebar__link,
    .spod-config-sidebar__footer-link {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        gap: 0.16rem !important;
        min-height: 5.05rem;
        padding: 0.94rem 0.42rem !important;
        border-radius: 0.8rem !important;
        text-align: center;
        color: var(--sideactionbar-text) !important;
        border: 1px solid color-mix(in srgb, var(--sideactionbar-border) 78%, transparent);
        background: color-mix(in srgb, var(--sideactionbar-surface) 58%, transparent);
    }

    html.dark .spod-config-sidebar__link,
    html.dark .spod-config-sidebar__footer-link {
        color: var(--sideactionbar-text) !important;
    }

    .spod-config-sidebar__icon {
        font-size: 1.82rem !important;
    }

    .spod-config-sidebar__label {
        display: block !important;
        font-size: 0.64rem !important;
        font-weight: 700 !important;
        line-height: 1.15;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: inherit;
    }

    .spod-config-sidebar__link:hover,
    .spod-config-sidebar__link--active {
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-primary) 16%, var(--sideactionbar-surface)) 0%, color-mix(in srgb, var(--sideactionbar-primary) 8%, var(--sideactionbar-surface)) 100%) !important;
        border-color: color-mix(in srgb, var(--sideactionbar-primary) 30%, var(--sideactionbar-border)) !important;
        color: var(--sideactionbar-text-hover) !important;
        box-shadow: inset -3px 0 0 0 var(--sideactionbar-primary), 0 10px 18px color-mix(in srgb, var(--sideactionbar-primary) 16%, transparent) !important;
    }

    html.dark .spod-config-sidebar__link:hover,
    html.dark .spod-config-sidebar__link--active {
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-primary) 16%, var(--sideactionbar-surface)) 0%, color-mix(in srgb, var(--sideactionbar-primary) 8%, var(--sideactionbar-surface)) 100%) !important;
        border-color: color-mix(in srgb, var(--sideactionbar-primary) 30%, var(--sideactionbar-border)) !important;
        color: var(--sideactionbar-text-hover) !important;
        box-shadow: inset -3px 0 0 0 var(--sideactionbar-primary), 0 10px 18px color-mix(in srgb, var(--sideactionbar-primary) 16%, transparent) !important;
    }

    .spod-config-sidebar__link--active .spod-config-sidebar__icon {
        color: var(--sideactionbar-primary) !important;
    }

    html.dark .spod-config-sidebar__link--active .spod-config-sidebar__icon {
        color: var(--sideactionbar-primary) !important;
    }

    .spod-config-sidebar__footer-link {
        color: var(--sideactionbar-text-muted) !important;
    }

    html.dark .spod-config-sidebar__footer-link {
        color: var(--sideactionbar-text-muted) !important;
    }

    .config-content-main {
        padding-inline: 1rem !important;
    }
}

.spod-app-shell {
    background:
        radial-gradient(circle at top left, rgba(127, 167, 216, 0.12) 0%, transparent 24%),
        linear-gradient(180deg, #f4f8fc 0%, #edf3f8 100%);
}

html.dark .spod-app-shell {
    background:
        radial-gradient(circle at top left, rgba(127, 167, 216, 0.12) 0%, transparent 24%),
        linear-gradient(180deg, #0d1218 0%, #101722 100%);
}

.spod-app-backdrop {
    opacity: 0.08;
    background-image:
        linear-gradient(to right, rgba(143, 163, 187, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(143, 163, 187, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

.spod-app-container {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

[data-role="actionbar-sticky"] > section {
    border-color: rgba(198, 210, 224, 0.95) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 252, 0.98) 100%) !important;
    box-shadow: 0 22px 44px rgba(103, 126, 153, 0.12);
}

html.dark [data-role="actionbar-sticky"] > section {
    border-color: rgba(39, 50, 67, 0.94) !important;
    background: linear-gradient(180deg, rgba(16, 23, 34, 0.96) 0%, rgba(12, 18, 26, 0.98) 100%) !important;
    box-shadow: 0 22px 44px rgba(2, 6, 12, 0.32);
}

#maintainer-filters,
#maintainer-list,
#maintainer-form,
.master-grid > .panel,
.split-maintainer-container > section,
#customers-list-panel,
#customer-editor,
#product-editor,
.product-split-sidebar-scroll {
    border-color: rgba(198, 210, 224, 0.95) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 248, 252, 0.99) 100%) !important;
    box-shadow: 0 18px 36px rgba(103, 126, 153, 0.12) !important;
}

html.dark #maintainer-filters,
html.dark #maintainer-list,
html.dark #maintainer-form,
html.dark .master-grid > .panel,
html.dark .split-maintainer-container > section,
html.dark #customers-list-panel,
html.dark #customer-editor,
html.dark #product-editor,
html.dark .product-split-sidebar-scroll {
    border-color: rgba(39, 50, 67, 0.94) !important;
    background: linear-gradient(180deg, rgba(22, 30, 42, 0.94) 0%, rgba(15, 20, 27, 0.98) 100%) !important;
    box-shadow: 0 24px 48px rgba(2, 6, 12, 0.3) !important;
}

.split-maintainer-container {
    align-items: start;
}

@media (min-width: 1024px) {
    .split-maintainer-container {
        gap: 1.25rem;
    }

    #customers-list-panel,
    .product-split-sidebar-scroll {
        max-height: calc(100vh - 10.8rem) !important;
    }
}

@media (max-width: 1023.98px) {
    .config-terminal-window {
        margin: 0;
        border-radius: 0;
        border-inline: 0;
        border-bottom: 0;
    }

    .spod-app-container {
        padding-top: 0.8rem;
    }

    #customers-list-panel,
    .product-split-sidebar-scroll,
    .split-maintainer-container > section {
        border-radius: 1.4rem !important;
    }
}