:root {
    --yuanyu-blue-50: 239 246 255;
    --yuanyu-blue-100: 219 234 254;
    --yuanyu-blue-500: 59 130 246;
    --yuanyu-blue-600: 37 99 235;
    --yuanyu-blue-700: 29 78 216;
    --yuanyu-sky-500: 14 165 233;
    --yuanyu-cyan-400: 34 211 238;
    --yuanyu-slate-900: 15 23 42;
}

html {
    scrollbar-gutter: stable;
}

.fi-body {
    background:
        radial-gradient(circle at 18% 0%, rgb(var(--yuanyu-blue-100) / 0.42), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 42%, #f1f5f9 100%);
    overflow-y: auto;
}

.fi-sidebar {
    border-right-color: rgb(203 213 225 / 0.82);
    background:
        linear-gradient(180deg, rgb(248 250 252 / 0.98), rgb(241 245 249 / 0.96)),
        linear-gradient(135deg, rgb(var(--yuanyu-blue-50)), transparent);
}

.fi-sidebar-nav,
.fi-sidebar-nav-groups {
    overflow-anchor: none;
}

.fi-sidebar-nav {
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-gutter: stable;
}

.fi-sidebar-item,
.fi-sidebar-item-button {
    scroll-margin-block: 0;
}

.fi-main {
    min-width: 0;
}

@media (min-width: 1024px) {
    .fi-body {
        overflow: hidden;
    }

    .fi-layout {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .fi-main-ctn {
        height: 100dvh;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .fi-sidebar {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .fi-sidebar > .overflow-x-clip {
        flex: 0 0 auto;
    }

    .fi-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.fi-topbar nav {
    border-bottom-color: rgb(203 213 225 / 0.72);
    background: rgb(255 255 255 / 0.86);
    backdrop-filter: blur(16px);
}

.fi-logo {
    color: rgb(var(--yuanyu-slate-900));
    font-weight: 700;
    letter-spacing: 0;
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    border: 1px solid rgb(var(--yuanyu-blue-600) / 0.18);
    background: linear-gradient(135deg, rgb(var(--yuanyu-blue-600) / 0.12), rgb(var(--yuanyu-sky-500) / 0.08));
    box-shadow: inset 3px 0 0 rgb(var(--yuanyu-blue-600));
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: rgb(var(--yuanyu-blue-700));
}

.fi-btn-color-primary {
    background-image: linear-gradient(135deg, rgb(var(--yuanyu-blue-600)), rgb(var(--yuanyu-sky-500)));
    box-shadow: 0 10px 24px rgb(var(--yuanyu-blue-600) / 0.18);
}

.fi-btn-color-primary:hover {
    background-image: linear-gradient(135deg, rgb(var(--yuanyu-blue-700)), rgb(2 132 199));
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn {
    border-color: rgb(203 213 225 / 0.78);
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.06);
}

.fi-wi-stats-overview-stat {
    background:
        linear-gradient(135deg, rgb(255 255 255), rgb(248 250 252)),
        linear-gradient(135deg, rgb(var(--yuanyu-blue-50)), transparent);
}

.fi-tabs-item-active {
    color: rgb(var(--yuanyu-blue-700));
}

.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-ta-search-field:focus-within {
    border-color: rgb(var(--yuanyu-blue-500));
    box-shadow: 0 0 0 3px rgb(var(--yuanyu-blue-500) / 0.16);
}

.fi-badge-color-primary {
    background-color: rgb(var(--yuanyu-blue-50));
    color: rgb(var(--yuanyu-blue-700));
}

.fi-link {
    color: rgb(var(--yuanyu-blue-700));
}

.fi-link:hover {
    color: rgb(30 64 175);
}

.fi-simple-layout {
    background:
        radial-gradient(circle at 18% 14%, rgb(var(--yuanyu-cyan-400) / 0.24), transparent 22rem),
        radial-gradient(circle at 82% 0%, rgb(var(--yuanyu-blue-500) / 0.24), transparent 28rem),
        linear-gradient(135deg, #eff6ff 0%, #f8fafc 48%, #eef2ff 100%);
}

.fi-simple-main {
    border: 1px solid rgb(191 219 254 / 0.74);
    box-shadow: 0 28px 70px rgb(15 23 42 / 0.12);
}

@media (prefers-reduced-motion: no-preference) {
    .fi-sidebar-item-button,
    .fi-btn,
    .fi-link {
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    }
}

/* === 紧凑布局 v2 === */

/* 侧栏缩窄: 20rem → 15rem (240px) */
:root {
    --sidebar-width: 15rem;
}

/* 顶栏保持默认 64px */

/* 侧栏导航紧凑化 */
.fi-sidebar-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    row-gap: 1.25rem !important;
}
.fi-sidebar-nav-groups {
    row-gap: 1.25rem !important;
}

/* 菜单项缩小 */
.fi-sidebar-item-button {
    font-size: 0.875rem !important;
    line-height: 1.375rem !important;
    padding: 0.3125rem 0.5rem !important;
}
.fi-sidebar-group > .fi-sidebar-item-button,
.fi-sidebar-group > button {
    font-size: 0.875rem !important;
}

/* 分组标签缩小 */
.fi-sidebar-group-label {
    font-size: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* 图标缩小 */
.fi-sidebar-item-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
.fi-sidebar-item-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

/* 主内容区左移, 间距缩小 */
.fi-main {
    padding-left: 0 !important;
    padding-right: 1.25rem !important;
}

/* 内容最大宽度利用更多空间 */
.fi-main .fi-content {
    max-width: 100% !important;
}

/* 子菜单项缩进减小 */
.fi-sidebar-item .fi-sidebar-item {
    padding-left: 0.75rem !important;
}

/* === 滚动条美化 === */
.fi-main-ctn::-webkit-scrollbar,
.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.fi-main-ctn::-webkit-scrollbar-track,
.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.fi-main-ctn::-webkit-scrollbar-thumb,
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(148 163 184 / 0.35);
    border-radius: 2px;
}
.fi-main-ctn::-webkit-scrollbar-thumb:hover,
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(148 163 184 / 0.55);
}

/* Firefox */
.fi-main-ctn,
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.35) transparent;
}

/* === 表单间距优化 === */
.fi-section {
    padding: 1.5rem !important;
}
.fi-section-header {
    padding-bottom: 1rem !important;
}
.fi-fo-component-ctn {
    padding: 1.25rem 1.5rem !important;
}
.fi-fo-field-wrp {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.fi-input-wrp input,
.fi-select-input {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}