:root {
    --admin-body-bg: #f8fbff;
    --admin-layout-bg:
        radial-gradient(circle at top left, rgba(47, 128, 237, .10), transparent 34rem),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    --admin-surface: rgba(255, 255, 255, .96);
    --admin-surface-solid: #ffffff;
    --admin-surface-soft: #f7fbff;
    --admin-border: #d9e4f2;
    --admin-text: #0b1f3a;
    --admin-muted: #61718b;
    --admin-active-bg: #eaf3ff;
    --admin-active-text: #0c4a8a;
    --admin-hover-bg: #f2f8ff;
    --admin-shadow: 0 24px 70px rgba(12, 74, 138, .12);
    --admin-primary-shadow: 0 10px 24px rgba(12, 74, 138, .18);
}

html.dark {
    --admin-body-bg: #07111f;
    --admin-layout-bg:
        radial-gradient(circle at top left, rgba(47, 128, 237, .18), transparent 34rem),
        linear-gradient(180deg, #07111f 0%, #0b1728 100%);
    --admin-surface: rgba(15, 23, 42, .96);
    --admin-surface-solid: #0f172a;
    --admin-surface-soft: #111c31;
    --admin-border: #26364f;
    --admin-text: #e6eefc;
    --admin-muted: #aab8cf;
    --admin-active-bg: rgba(47, 128, 237, .18);
    --admin-active-text: #9dccff;
    --admin-hover-bg: rgba(148, 163, 184, .10);
    --admin-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    --admin-primary-shadow: 0 10px 24px rgba(47, 128, 237, .22);
}

html,
body {
    background: var(--admin-body-bg);
}

.fi-simple-layout,
.fi-layout {
    background: var(--admin-layout-bg);
}

.fi-simple-main {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-solid);
    box-shadow: var(--admin-shadow);
}

.fi-sidebar,
.fi-topbar {
    background: var(--admin-surface);
    backdrop-filter: blur(18px);
}

.fi-sidebar,
.fi-topbar,
.fi-header,
.fi-section,
.fi-ta,
.fi-fo-field-wrp,
.fi-dropdown-panel,
.fi-modal-window {
    border-color: var(--admin-border);
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--admin-border);
}

.fi-logo,
.fi-main,
.fi-page,
.fi-header-heading {
    color: var(--admin-text);
}

.fi-logo {
    font-weight: 800;
}

.fi-header-heading {
    letter-spacing: 0;
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: var(--admin-active-bg);
    color: var(--admin-active-text);
}

.fi-sidebar-item-button:hover {
    background: var(--admin-hover-bg);
}

.fi-btn-color-primary {
    box-shadow: var(--admin-primary-shadow);
}

.fi-ta-header,
.fi-section-header {
    background: var(--admin-surface-solid);
}

.fi-ta-table thead {
    background: var(--admin-surface-soft);
}

.fi-ta-row:hover {
    background: var(--admin-hover-bg);
}

html.dark .fi-simple-main,
html.dark .fi-section,
html.dark .fi-ta,
html.dark .fi-dropdown-panel,
html.dark .fi-modal-window {
    background: var(--admin-surface-solid);
}

html.dark .fi-input-wrp,
html.dark .fi-select-input,
html.dark .fi-input,
html.dark .fi-ta-content {
    background-color: #0b1220;
}

@media (max-width: 768px) {
    .fi-simple-main {
        border-radius: 0;
        box-shadow: none;
    }

    .fi-main {
        padding-inline: .75rem;
    }

    .fi-header-heading {
        font-size: 1.35rem;
        line-height: 1.25;
    }
}