:root {
    --gap-surface-page: #e7eef6;
    --gap-surface-page-alt: #f5f8fc;
    --gap-surface-page-accent: rgba(14, 165, 233, 0.08);
    --gap-surface-sidebar: rgba(255, 255, 255, 0.94);
    --gap-surface-topbar: rgba(255, 255, 255, 0.94);
    --gap-surface-card: #ffffff;
    --gap-surface-card-strong: #f6f9fd;
    --gap-surface-card-soft: #eef4fa;
    --gap-surface-panel: rgba(255, 255, 255, 0.96);
    --gap-surface-panel-strong: #ffffff;
    --gap-surface-inset: #eaf1f8;
    --gap-border-soft: #d0dbea;
    --gap-border-strong: #bccadb;
    --gap-text: #162235;
    --gap-text-strong: #0f172a;
    --gap-text-muted: #526379;
    --gap-text-soft: #70829a;
    --gap-link: #0f766e;
    --gap-link-hover: #115e59;
    --gap-shadow-card: 0 20px 46px -32px rgba(15, 23, 42, 0.34), 0 10px 24px -24px rgba(15, 23, 42, 0.22);
    --gap-shadow-panel: -18px 0 48px rgba(15, 23, 42, 0.18);
    --gap-overlay: rgba(226, 232, 240, 0.5);
}

.dark {
    --gap-surface-page: #040b18;
    --gap-surface-page-alt: #07111f;
    --gap-surface-page-accent: rgba(45, 212, 191, 0.08);
    --gap-surface-sidebar: rgba(9, 14, 28, 0.94);
    --gap-surface-topbar: rgba(7, 13, 26, 0.92);
    --gap-surface-card: #121b2d;
    --gap-surface-card-strong: #172133;
    --gap-surface-card-soft: #0f172a;
    --gap-surface-panel: rgba(2, 6, 23, 0.96);
    --gap-surface-panel-strong: #020617;
    --gap-surface-inset: #0f172a;
    --gap-border-soft: #334155;
    --gap-border-strong: #475569;
    --gap-text: #e2e8f0;
    --gap-text-strong: #f8fafc;
    --gap-text-muted: #94a3b8;
    --gap-text-soft: #64748b;
    --gap-link: #5eead4;
    --gap-link-hover: #99f6e4;
    --gap-shadow-card: 0 24px 54px -38px rgba(2, 6, 23, 0.7);
    --gap-shadow-panel: -24px 0 52px rgba(2, 6, 23, 0.5);
    --gap-overlay: rgba(2, 6, 23, 0.62);
}

body,
.fi-layout,
.fi-main-ctn {
    background: var(--gap-surface-page);
    color: var(--gap-text);
}

.fi-main {
    background:
        radial-gradient(circle at top left, var(--gap-surface-page-accent), transparent 32%),
        linear-gradient(180deg, var(--gap-surface-page-alt) 0%, var(--gap-surface-page) 100%);
}

.fi-topbar-ctn,
.fi-sidebar,
.fi-sidebar-header,
.fi-topbar {
    background: var(--gap-surface-topbar);
}

.fi-sidebar {
    border-right: 1px solid var(--gap-border-soft);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

.fi-sidebar-header,
.fi-sidebar-nav,
.fi-topbar {
    backdrop-filter: blur(14px);
}

.fi-topbar {
    border-bottom: 1px solid var(--gap-border-soft);
    box-shadow: 0 8px 22px -22px rgba(15, 23, 42, 0.35);
}

.fi-sidebar-group,
.fi-sidebar-item-button,
.fi-topbar-item-btn,
.fi-user-menu-trigger {
    border-radius: 16px;
}

.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat {
    border: 1px solid var(--gap-border-soft);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--gap-surface-card) 0%, var(--gap-surface-card-strong) 100%);
    box-shadow: var(--gap-shadow-card);
}

.fi-wi-widget {
    min-width: 0;
}

.fi-section > .fi-section-header {
    border-bottom: 1px solid var(--gap-border-soft);
    background: transparent;
}

.fi-section > .fi-section-content-ctn > .fi-section-content,
.fi-section > .fi-section-content-ctn > .fi-section-footer {
    background: transparent;
}

.fi-section .fi-section-header-heading,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: var(--gap-text-strong);
}

.fi-section .fi-section-header-description,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat .fi-icon {
    color: var(--gap-text-muted);
}

.fi-wi-stats-overview-stat {
    border-color: var(--gap-border-soft);
    background: linear-gradient(180deg, var(--gap-surface-card) 0%, var(--gap-surface-card-soft) 100%);
}

.fi-ta-ctn,
.fi-ta-col-manager,
.fi-ta-filters,
.fi-modal-window {
    border: 1px solid var(--gap-border-soft);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--gap-surface-card) 0%, var(--gap-surface-card-strong) 100%);
    box-shadow: var(--gap-shadow-card);
}

.fi-ta-header-ctn,
.fi-ta-content-ctn,
.fi-ta-filters,
.fi-ta-col-manager-header,
.fi-ta-col-manager-actions-ctn {
    border-color: var(--gap-border-soft);
}

.fi-ta-header,
.fi-ta-content,
.fi-ta-filters,
.fi-ta-group-header,
.fi-ta-filter-indicators,
.fi-ta-selection-indicator {
    background: transparent;
}

.fi-ta-header-heading,
.fi-ta-group-heading,
.fi-ta-record-content,
.fi-ta-header-cell {
    color: var(--gap-text-strong);
}

.fi-ta-header-description,
.fi-ta-filter-indicators-label,
.fi-ta-group-description,
.fi-ta-empty-state,
.fi-ta-cell,
.fi-ta-col-manager-heading,
.fi-ta-col-manager-label {
    color: var(--gap-text-muted);
}

.fi-ta-record,
.fi-ta-group-header,
.fi-ta-summary-header-row,
.fi-ta-summary-row {
    background: var(--gap-surface-panel-strong);
}

.dark .fi-ta-record,
.dark .fi-ta-group-header,
.dark .fi-ta-summary-header-row,
.dark .fi-ta-summary-row {
    background: var(--gap-surface-card-soft);
}

.fi-input-wrp,
.fi-select-input,
.fi-input {
    border-color: var(--gap-border-soft);
}

.fi-input-wrp {
    background: var(--gap-surface-panel-strong);
}

.fi-modal-window,
.fi-dropdown-panel,
.fi-ta-filters-dropdown-panel,
.fi-user-menu-panel {
    border-color: var(--gap-border-soft);
    background: var(--gap-surface-panel);
    box-shadow: var(--gap-shadow-card);
}

.fi-dropdown-panel,
.fi-user-menu-panel {
    backdrop-filter: blur(10px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-topbar-item.fi-active > .fi-topbar-item-btn {
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12);
}