@charset "utf-8";
/* ==================== 1. 基础变量与重置 ==================== */

:root {
    /* ==================== 基础排版变量 ==================== */
    --app-base-font-family: var(--ant-font-family);
    --app-base-font-size: var(--ant-font-size);
    --app-base-font-size-sm: var(--ant-font-size-sm);
    --app-base-font-size-lg: var(--ant-font-size-lg);
    --app-base-font-size-xl: var(--ant-font-size-xl);
    --app-base-line-height: var(--ant-line-height);

    /* ==================== 布局尺寸变量 ==================== */
    --app-base-header-height: 64px;
    --app-base-sider-width: 224px;
    --app-base-sider-collapsed-width: 56px; /* 折叠宽度: 20+16+20 */
    --app-base-page-header-height: 84px; /* 面包屑(47px) + 标签页(37px) */
    --app-base-footer-height: 48px;
    --app-base-page-sider-width: 260px; /* 页面级侧边栏宽度 */
    
    /* ==================== 主题色系统（支持切换） ==================== */
    /* 默认主题：蓝色 - 只定义主色，其他颜色通过 oklch 感知均匀空间计算 */
    --app-base-theme-primary: #1677ff;
    /* 透明度梯度：主色 + 不同透明度，适用于背景、遮罩、强调等场景 */
    --app-base-theme-primary-alpha-5: color-mix(in srgb, var(--app-base-theme-primary) 5%, transparent);
    --app-base-theme-primary-alpha-10: color-mix(in srgb, var(--app-base-theme-primary) 10%, transparent);
    --app-base-theme-primary-alpha-15: color-mix(in srgb, var(--app-base-theme-primary) 15%, transparent);
    --app-base-theme-primary-alpha-25: color-mix(in srgb, var(--app-base-theme-primary) 25%, transparent);
    --app-base-theme-primary-alpha-50: color-mix(in srgb, var(--app-base-theme-primary) 50%, transparent);
    --app-base-theme-primary-alpha-75: color-mix(in srgb, var(--app-base-theme-primary) 75%, transparent);
    /* hover: 主色变亮（oklch 保持饱和度） */
    --app-base-theme-primary-hover: color-mix(in oklch, var(--app-base-theme-primary) 72%, white);
    /* active: 主色变暗 */
    --app-base-theme-primary-active: color-mix(in oklch, var(--app-base-theme-primary) 80%, black);
    /* border: 中等亮度边框 */
    --app-base-theme-primary-border: color-mix(in oklch, var(--app-base-theme-primary) 45%, white);
    /* bg: 极浅背景 */
    --app-base-theme-primary-bg: color-mix(in oklch, var(--app-base-theme-primary) 10%, transparent);
    
    /* ==================== 语义颜色（固定，不随主题变化） ==================== */
    /* 文本颜色 */
    --app-base-text-color: var(--ant-color-text);
    --app-base-text-color-secondary: var(--ant-color-text-secondary);
    --app-base-text-color-tertiary: var(--ant-color-text-tertiary);
    --app-base-text-color-disabled: var(--ant-color-text-disabled);

    /* 背景颜色 */
    --app-base-bg-layout: var(--ant-color-bg-layout);
    --app-base-bg-container: var(--ant-color-bg-container);
    --app-base-bg-elevated: var(--ant-color-bg-elevated);
    
    /* 边框颜色 */
    --app-base-border-color: var(--ant-color-border);
    --app-base-border-color-secondary: var(--ant-color-border-secondary);
    --app-base-border-color-light: rgba(5, 5, 5, 0.06); /* 轻量级边框，用于面包屑/标签页 */
    
    /* 填充颜色 */
    --app-base-fill-hover: var(--ant-color-fill-tertiary);
    --app-base-fill-active: var(--ant-color-fill-secondary);
    
    /* ==================== 反色系列（用于深色背景） ==================== */
    /* 深色侧边栏背景 */
    --app-base-dark-sider-bg: #001529;
    --app-base-dark-sider-bg-level2: #000c17;
    --app-base-dark-sider-bg-level3: #000814;

    /* 反色文字 */
    --app-base-text-inverse: #ffffff;
    --app-base-text-inverse-secondary: rgba(255, 255, 255, 0.85);
    --app-base-text-inverse-tertiary: rgba(255, 255, 255, 0.65);
    --app-base-text-inverse-quaternary: rgba(255, 255, 255, 0.45);
    
    /* 反色填充 */
    --app-base-fill-inverse-hover: rgba(255, 255, 255, 0.08);
    --app-base-fill-inverse-active: rgba(255, 255, 255, 0.15);
    --app-base-fill-inverse-selected: rgba(255, 255, 255, 0.25);
    --app-base-fill-inverse-selected-hover: rgba(255, 255, 255, 0.35);
    
    /* 反色边框/滚动条 */
    --app-base-border-inverse: rgba(255, 255, 255, 0.1);
    --app-base-scrollbar-inverse: rgba(255, 255, 255, 0.2);
    --app-base-scrollbar-inverse-hover: rgba(255, 255, 255, 0.3);
    
    /* ==================== 其他样式变量 ==================== */
    /* 阴影：使用轻量级自定义阴影 */
    --app-base-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --app-base-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
    --app-base-box-shadow-lg: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    
    /* 圆角 */
    --app-base-border-radius: var(--ant-border-radius);
    --app-base-border-radius-sm: var(--ant-border-radius-sm);
    --app-base-border-radius-lg: var(--ant-border-radius-lg);
    
    /* ==================== 排版语义变量 ==================== */
    /* 页面主标题，20px/28px 600 rgba(0, 0, 0, 0.88) */
    --app-base-page-title-font-size: var(--ant-font-size-xl);
    --app-base-page-title-line-height: var(--ant-font-height-xl);
    --app-base-page-title-font-weight: var(--ant-font-weight-strong);
    --app-base-page-title-color: var(--ant-color-text);
    
    /* 卡片/模块标题，16px/24px 600 rgba(0, 0, 0, 0.88) */
    --app-base-card-title-font-size: var(--ant-font-size-lg);
    --app-base-card-title-line-height: var(--ant-font-height-lg);
    --app-base-card-title-font-weight: var(--ant-font-weight-strong);
    --app-base-card-title-color: var(--ant-color-text);
    
    /* 正文内容，14px/22px 400 rgba(0, 0, 0, 0.88) */
    --app-base-content-font-size: var(--ant-font-size);
    --app-base-content-line-height: var(--ant-font-height);
    --app-base-content-font-weight: var(--ant-font-weight-normal);
    --app-base-content-color: var(--ant-color-text);
    
    /* 辅助/描述文字，12px/20px 400 rgba(0, 0, 0, 0.65) */
    --app-base-description-font-size: var(--ant-font-size-sm);
    --app-base-description-line-height: var(--ant-font-height-sm);
    --app-base-description-font-weight: var(--ant-font-weight-normal);
    --app-base-description-color: var(--ant-color-text-secondary);
    
    /* 表单字体 */
    --app-base-form-label-color: var(--ant-color-text-tertiary);
    --app-base-form-label-font-size: var(--ant-font-size);
    --app-base-form-label-line-height: var(--ant-font-height);
    --app-base-form-label-font-weight: var(--ant-font-weight-normal);
    /* 表单字段值（纯文本显示），rgba(0, 0, 0, 0.88) */
    --app-base-form-value-color: var(--ant-color-text);
    /* 表单占位符/空值，rgba(0, 0, 0, 0.25) */
    --app-base-form-placeholder-color: var(--ant-color-text-quaternary);
}

html {
    box-sizing: border-box;
}

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

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote {
    margin: 0;
}

body {
    width: 100%;
    height: 100%; /* 高度固定为 100% */
    line-height: var(--app-base-line-height);
    font-family: var(--app-base-font-family);
    font-size: var(--app-base-font-size);
    color: var(--app-base-text-color);
    background-color: var(--app-base-bg-layout);
}

ul, ol {
    padding: 0;
    list-style: none;
}

table {
    border-spacing: 0;
    border: none;
}

fieldset, img {
    border: none;
}

button, input, select, textarea {
	margin: 0;
	font-size: 100%;
	vertical-align: middle;
}

button, input {
	line-height: normal;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

a:not(.l-btn):not(.eu-link) {
    color: var(--ant-color-primary);
    text-decoration: none;
}

a:not(.l-btn):not(.eu-link):hover, a:not(.l-btn):not(.eu-link):focus {
    color: var(--ant-color-primary-hover);
    text-decoration: none;
}

a.text-danger:not(.l-btn):not(.eu-link) {
    color: var(--ant-color-error);
}

a.text-danger:not(.l-btn):not(.eu-link):hover, a.text-danger:not(.l-btn):not(.eu-link):focus {
    color: var(--ant-color-error-hover);
}

/* ==================== 2. 布局框架 - 基础样式 ==================== */

/* 根容器：使用 Flexbox 纵向布局，固定高度为视口高度 */
.app-base-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* 禁止整体页面滚动 */
}

/* 顶部导航栏：响应式布局 */
.app-base-header {
    height: var(--app-base-header-height);
    flex-shrink: 0; /* 防止被压缩 */
    background: var(--app-base-bg-container);
    display: flex;
    align-items: center;
    padding: 0 var(--ant-padding-sm);
    box-shadow: var(--app-base-box-shadow);
    z-index: 9000;
    min-width: 600px; /* 最小宽度保护 */
}

/* LOGO区：固定宽度，与侧边栏对齐（需扣除 Header 左边距） */
.app-base-header__left {
    width: calc(var(--app-base-sider-width) - var(--ant-padding-lg));
    flex-shrink: 0; /* 防止压缩 */
    display: flex;
    align-items: center;
    overflow: hidden; /* 隐藏溢出内容 */
}

.app-base-logo {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-sm);
}

.app-base-logo__icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--app-base-theme-primary) 0%, var(--app-base-theme-primary-hover) 100%);
    border-radius: var(--app-base-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-base-bg-container);
    font-size: var(--app-base-font-size-xl);
    font-weight: var(--ant-font-weight-strong);
    overflow: hidden;
}

/* 仅显示LOGO时（无系统名称），宽度200px */
.app-base-logo__icon:only-child {
    width: 200px;
}

.app-base-logo__icon:has(img) {
    background: none;
    border-radius: 0;
}

/* LOGO 图片自适应容器 */
.app-base-logo__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.app-base-logo__text {
    font-size: var(--ant-title-font-size-lg);
    font-weight: var(--ant-font-weight-strong);
    color: var(--app-base-text-color);
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 顶部菜单容器：响应式区域 */
.app-base-header__menu {
    flex: 1; /* 填充剩余空间 */
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    overflow: visible; /* 改为 visible，允许下拉菜单溢出 */
    min-width: 0; /* 允许 flex 子元素缩小 */
    padding: 0 var(--ant-padding-lg);
    position: relative; /* 为下拉菜单提供定位上下文 */
}

/* 右侧操作区：固定宽度，不压缩
 * flex-shrink: 0 确保该区域不会被 Flexbox 压缩
 */
.app-base-header__right {
    flex-shrink: 0; /* 防止压缩 */
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
}

/* 通用触发器 */
.app-base-header-right__trigger {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    padding: var(--ant-padding-xxs) var(--ant-padding-xs);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-base);
    position: relative;
}

.app-base-header-right__trigger:hover {
    background: var(--app-base-fill-hover);
}

/* 触发器展开状态 */
.app-base-header-right__trigger--open {
    background: var(--app-base-fill-hover);
}

/* 通用图标 */
.app-base-header-right__icon {
    width: 20px;
    height: 20px;
    color: var(--app-base-text-color-secondary);
    transition: var(--ant-transition-fast);
}

.app-base-header-right__trigger:hover .app-base-header-right__icon {
    color: var(--app-base-text-color);
}

/* 通用文字（主题适配） */
.app-base-header-right__text {
    color: var(--app-base-text-color);
}

/* 通用下拉箭头 */
.app-base-header-right__arrow {
    width: 20px;
    height: 20px;
    color: var(--app-base-text-color-tertiary);
    transition: transform var(--ant-transition-fast);
}

/* 展开时箭头旋转 */
.app-base-header-right__trigger--open .app-base-header-right__arrow {
    transform: rotate(180deg);
}

/* 通用弹出面板 */
.app-base-header-right__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--app-base-bg-elevated);
    border-radius: var(--app-base-border-radius);
    box-shadow: var(--app-base-box-shadow-lg);
    color: var(--app-base-text-color);  /* 重置颜色，不受主题影响 */
    z-index: 8001;
    cursor: default;
    display: none;
    overflow: hidden;
}

.app-base-header-right__panel--show {
    display: block;
}

/* 消息触发器（适应内容） */
.app-base-message {
    height: 32px;
    padding: 0 var(--ant-padding-xs);
}

/* 纯图标触发器（固定尺寸） */
.app-base-setting {
    width: 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
}

.app-base-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--app-base-font-size-sm);
    font-weight: var(--ant-font-weight-medium);
    line-height: 1;
    border-radius: 10px;
    background: var(--ant-color-error);
    color: var(--app-base-text-inverse);
}

/* 消息中心下拉面板 */
.app-base-message__panel {
    width: 520px;
    max-height: none;
    overflow-y: visible;
}

.app-base-message__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-base-border-color);
}

.app-base-message__title {
    font-size: var(--app-base-font-size-lg);
    font-weight: var(--ant-font-weight-strong);
    color: var(--app-base-text-color);
}

.app-base-message__read-all {
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-theme-primary);
    background: transparent;
    border: 1px solid var(--app-base-theme-primary);
    cursor: pointer;
    padding: 2px 10px;
    border-radius: var(--ant-border-radius);
    line-height: 22px;
    transition: all 0.2s;
    white-space: nowrap;
}

.app-base-message__read-all:hover {
    background: var(--app-base-theme-primary-bg);
}

.app-base-message__read-all:active {
    background: var(--app-base-theme-primary-bg);
}

.app-base-message__read-all:disabled {
    color: var(--app-base-text-color-disabled);
    border-color: var(--app-base-border-color);
    cursor: not-allowed;
    background: none;
}

.app-base-message__list {
    overflow-y: visible;
}

.app-base-message__list > .app-base-loading {
    min-height: 200px;
}

.app-base-message__list--modal {
    width: 800px;
}

.app-base-message__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 1px solid var(--app-base-border-color);
}

.app-base-message__item:last-child {
    border-bottom: none;
}

.app-base-message__item:hover {
    background: var(--ant-color-fill-quaternary);
}

.app-base-message__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ant-color-error);
    flex-shrink: 0;
    margin-top: 6px;
}

.app-base-message__content {
    flex: 1;
    min-width: 0;
}

.app-base-message__item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.app-base-message__item-title {
    font-size: var(--app-base-font-size);
    font-weight: var(--ant-font-weight-strong);
    color: var(--app-base-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-base-message__item-time {
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-tertiary);
    flex-shrink: 0;
    margin-left: 8px;
}

.app-base-message__item-desc {
    color: var(--app-base-text-color-secondary);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* 标准属性（未来兼容） */
    line-clamp: 2;
    box-orient: vertical;
}

.app-base-message__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--app-base-border-color);
    text-align: center;
}

.app-base-message__view-all {
    font-size: var(--app-base-font-size);
    color: var(--app-base-text-color-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

a.app-base-message__view-all:hover {
    color: var(--app-base-theme-primary);
}

a.app-base-message__view-all--disabled {
    color: var(--app-base-text-color-disabled);
    pointer-events: none;
    cursor: not-allowed;
}

.app-base-message__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--app-base-text-color-tertiary);
}

.app-base-message__empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.app-base-message__empty-text {
    font-size: var(--app-base-font-size);
}

/* 设置面板下拉面板 */
.app-base-setting__panel {
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
}

.app-base-setting__header {
    padding: var(--ant-padding-sm) var(--ant-padding-md);
    font-size: var(--app-base-font-size-lg);
    font-weight: var(--ant-font-weight-strong);
    border-bottom: 1px solid var(--app-base-border-color);
}

.app-base-setting__body {
    padding: var(--ant-padding-md);
}

.app-base-setting__section {
    margin-bottom: var(--ant-margin-lg);
}

.app-base-setting__section:last-child {
    margin-bottom: 0;
}

.app-base-setting__title {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    margin-bottom: var(--ant-margin-sm);
    font-weight: var(--ant-font-weight-medium);
    color: var(--app-base-text-color);
}

.app-base-setting__title-icon {
    width: 16px;
    height: 16px;
    color: var(--app-base-text-color-secondary);
}

/* 布局样式选择 */
.app-base-setting__layout-options {
    display: flex;
    gap: var(--ant-margin-md);
}

.app-base-setting__layout-card {
    flex: 1;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.app-base-setting__layout-preview {
    height: 56px;
    border-radius: var(--app-base-border-radius-sm);
    border: 2px solid var(--app-base-border-color);
    overflow: hidden;
    transition: border-color var(--ant-transition-fast);
}

.app-base-setting__layout-card:hover .app-base-setting__layout-preview {
    border-color: var(--app-base-theme-primary);
}

.app-base-setting__layout-card--active .app-base-setting__layout-preview {
    border-color: var(--app-base-theme-primary);
}

/* 顶部混合导航预览 */
.app-base-setting__layout-preview--top {
    display: flex;
    flex-direction: column;
}

.app-base-setting__layout-preview--top .preview-header {
    height: 12px;
    background: #1f2937;
}

.app-base-setting__layout-preview--top .preview-body {
    flex: 1;
    display: flex;
}

.app-base-setting__layout-preview--top .preview-sider {
    width: 20px;
    background: var(--app-base-bg-layout);
}

.app-base-setting__layout-preview--top .preview-content {
    flex: 1;
    background: var(--app-base-bg-container);
}

/* 侧边栏导航预览 */
.app-base-setting__layout-preview--side {
    display: flex;
}

.app-base-setting__layout-preview--side .preview-sider {
    width: 20px;
    background: #1f2937;
}

.app-base-setting__layout-preview--side .preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-base-setting__layout-preview--side .preview-header {
    height: 12px;
    background: var(--app-base-bg-container);
    border-bottom: 1px solid var(--app-base-border-color);
}

.app-base-setting__layout-preview--side .preview-content {
    flex: 1;
    background: var(--app-base-bg-layout);
}

.app-base-setting__layout-check {
    position: absolute;
    right: 4px;
    bottom: 20px;
    width: 20px;
    height: 20px;
    padding: 2px;
    background: var(--app-base-theme-primary);
    color: var(--app-base-text-inverse);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--ant-transition-fast);
}

.app-base-setting__layout-card--active .app-base-setting__layout-check {
    opacity: 1;
}

.app-base-setting__layout-label {
    display: block;
    margin-top: var(--ant-margin-xs);
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-secondary);
}

.app-base-setting__layout-card--active .app-base-setting__layout-label {
    color: var(--app-base-text-color);
}

/* 主题颜色选择 */
.app-base-setting__color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ant-margin-sm);
    margin-bottom: var(--ant-margin-md);
}

.app-base-setting__color-grid--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.app-base-setting__color-item {
    height: 32px;
    border-radius: var(--app-base-border-radius-sm);
    cursor: pointer;
    position: relative;
    transition: transform var(--ant-transition-fast), box-shadow var(--ant-transition-fast);
}

.app-base-setting__color-item:hover {
    transform: scale(1.05);
}

.app-base-setting__color-item--active::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* 选项行 */
.app-base-setting__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ant-padding-xs) 0;
}

.app-base-setting__option-label {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    font-size: var(--app-base-font-size);
    color: var(--app-base-text-color);
}

.app-base-setting__color-box {
    width: 24px;
    height: 24px;
    margin-right:12px;
}

/* 开关组件 */
.app-base-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
}

.app-base-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.app-base-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 22px;
    transition: var(--ant-transition-fast);
}

.app-base-switch__slider::before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: var(--ant-transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.app-base-switch input:checked + .app-base-switch__slider {
    background-color: var(--app-base-theme-primary);
}

.app-base-switch input:checked + .app-base-switch__slider::before {
    transform: translateX(22px);
}

.app-base-switch input:focus + .app-base-switch__slider {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-base-theme-primary) 20%, transparent);
}

/* 用户头像 */
.app-base-user__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-base-theme-primary) 0%, var(--app-base-theme-primary-hover) 100%);
    color: var(--app-base-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--app-base-font-size);
    font-weight: var(--ant-font-weight-strong);
}

.app-base-user__avatar img,
.app-base-user-menu__avatar img {
    pointer-events: none;
}

.app-base-user__name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 /* 个人中心下拉面板 */
.app-base-user__menu {
    width: 300px;
}

.app-base-user-menu__header {
    padding: var(--ant-padding);
    display: flex;
    gap: var(--ant-margin-sm);
    border-bottom: 1px solid var(--app-base-border-color-secondary);
}

.app-base-user-menu__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-base-theme-primary) 0%, var(--app-base-theme-primary-active) 100%);
    color: var(--app-base-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--app-base-font-size-xl);
    font-weight: var(--ant-font-weight-strong);
    flex-shrink: 0;
}

.app-base-user-menu__info {
    flex: 1;
    min-width: 0;
}

.app-base-user-menu__name {
    font-size: var(--app-base-font-size-lg);
    font-weight: var(--ant-font-weight-strong);
    color: var(--app-base-text-color);
    line-height: 24px;
    margin-bottom: 4px;
}

.app-base-user-menu__role {
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-tertiary);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-base-user-menu__depts {
    padding: var(--ant-padding-sm) var(--ant-padding);
    border-bottom: 1px solid var(--app-base-border-color-secondary);
}

.app-base-user-menu__depts-title {
    font-size: var(--app-base-font-size);
    color: var(--app-base-text-color-tertiary);
    margin-bottom: var(--ant-margin-xs);
}

.app-base-user-menu__dept-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color);
}

.app-base-user-menu__contact {
    padding: var(--ant-padding-sm) var(--ant-padding);
    border-bottom: 1px solid var(--app-base-border-color-secondary);
}

.app-base-user-menu__contact-item {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    padding: 4px 0;
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-secondary);
}

.app-base-user-menu__contact-item svg {
    width: 14px;
    height: 14px;
    color: var(--app-base-text-color-tertiary);
    flex-shrink: 0;
}

.app-base-user-menu__actions {
    padding: var(--ant-padding-xs) 0;
}

.app-base-user-menu__action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px var(--ant-padding-xs);
}

.app-base-user-menu__action {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    padding: 10px var(--ant-padding-xs);
    font-size: var(--app-base-font-size);
    color: var(--app-base-text-color);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
}

.app-base-user-menu__action:hover {
    background: var(--app-base-fill-hover);
}

.app-base-user-menu__action svg {
    width: 16px;
    height: 16px;
    color: var(--app-base-text-color-secondary);
    flex-shrink: 0;
}

.app-base-user-menu__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--app-base-border-color-secondary);
}

.app-base-user-menu__footer .app-base-user-menu__action {
    justify-content: center;
    padding: var(--ant-padding-sm);
    border-radius: 0;
}

.app-base-user-menu__footer .app-base-user-menu__action:first-child {
    border-right: 1px solid var(--app-base-border-color-secondary);
}

.app-base-user-menu__footer .app-base-user-menu__action--danger {
    color: var(--ant-color-error);
}

.app-base-user-menu__footer .app-base-user-menu__action--danger svg {
    color: var(--ant-color-error);
}

/* 主体容器：填充剩余空间，含 Header 下方到 Footer 上方的所有区域 */
.app-base-container {
    display: flex;
    flex: 1; /* 自动填充剩余高度 */
    overflow: hidden; /* 禁止容器本身滚动 */
    z-index: 1;
}

/* 左侧二级导航：不再使用 fixed 定位 */
.app-base-sider {
    width: var(--app-base-sider-width);
    flex-shrink: 0; /* 防止被压缩 */
    background: var(--app-base-bg-container);
    box-shadow: var(--app-base-box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 容器本身不滚动 */
}

/* 侧边栏折叠按钮 */
.app-base-sider-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-top: 1px solid var(--app-base-border-color);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    color: var(--app-base-text-color-secondary);
}

.app-base-sider-collapse:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-fill-hover);
}

.app-base-sider-collapse__icon {
    transition: transform var(--ant-transition-fast);
}

/* 折叠状态旋转箭头 */
.app-base-layout--collapsed .app-base-sider-collapse__icon {
    transform: rotate(180deg);
}

/* 主内容区：使用 Flexbox 纵向布局 */
.app-base-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 禁止主内容区滚动 */
    min-width: 0; /* 防止 flex 子元素溢出 */
    box-shadow: var(--app-base-box-shadow); /* 左侧阴影，与侧边栏分隔 */
}

/* 页面头部（面包屑 + 标签页） */
.app-base-page-header {
    flex-shrink: 0; /* 防止被压缩 */
    padding: 0;
    border-radius: 0;
    box-shadow: var(--app-base-box-shadow); /* 阴影 */
    z-index: 999;
}

.app-base-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    font-size: var(--app-base-font-size);
    padding: var(--ant-padding-sm) var(--ant-padding-lg);
    border-bottom: 1px solid var(--app-base-border-color-light);
}

.app-base-breadcrumb--hidden {
    display: none;
}

.app-base-breadcrumb__item {
    color: var(--app-base-text-color-tertiary);
    cursor: pointer;
}

.app-base-breadcrumb__item:hover {
    color: var(--app-base-theme-primary);
}

.app-base-breadcrumb__item--current {
    color: var(--app-base-text-color);
    cursor: default;
}

.app-base-breadcrumb__separator {
    color: var(--app-base-text-color-tertiary);
}

/* 折叠按钮 */
.app-base-collapse-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-base-bg-container);
    border: 1px solid var(--app-base-border-color);
    border-radius: var(--app-base-border-radius-sm);
    color: var(--app-base-text-color-secondary);
    transition: var(--ant-transition-fast);
    margin-right: var(--ant-margin-xs);
    flex-shrink: 0;
    cursor: pointer;
}

.app-base-collapse-btn:hover {
    background: var(--app-base-theme-primary-bg);
    border-color: var(--app-base-theme-primary);
    color: var(--app-base-theme-primary);
}

.app-base-collapse-btn__icon {
    transition: transform var(--ant-transition-fast);
}

/* 折叠状态下的图标旋转 */
.app-base-layout--collapsed .app-base-collapse-btn__icon {
    transform: rotate(90deg);
}

.app-base-page-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-base-border-color-light);
    padding: var(--ant-padding-xxs) var(--ant-padding-lg);
    position: relative;
}

.app-base-page-tabs__scroll {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xxs);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin: 0 var(--ant-margin-xs);
}

.app-base-page-tabs__scroll::-webkit-scrollbar {
    display: none;
}

.app-base-page-tabs__scroll-btn {
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--app-base-bg-container);
    border: 1px solid var(--app-base-border-color);
    border-radius: var(--app-base-border-radius-sm);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    flex-shrink: 0;
}

.app-base-page-tabs__scroll-btn:hover {
    background: var(--app-base-theme-primary-bg);
    border-color: var(--app-base-theme-primary);
    color: var(--app-base-theme-primary);
}

.app-base-page-tabs__scroll-btn--show {
    display: flex;
}

.app-base-page-tabs__toolbar {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
    margin-left: var(--ant-margin-xs);
    position: relative;
    border: 1px solid var(--app-base-border-color);
    border-radius: var(--app-base-border-radius-sm);
}

.app-base-page-tabs__menu-btn {
    padding: var(--ant-padding-xxs) var(--ant-padding-sm);
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-secondary);
    background: var(--app-base-bg-elevated);
    border: none;
    border-radius: var(--app-base-border-radius-sm);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xxs);
}

.app-base-page-tabs__menu-btn:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

.app-base-page-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ant-margin-xxs);
    padding: var(--ant-padding-xxs) var(--ant-padding-sm);
    background: var(--app-base-bg-elevated);
    border-radius: var(--app-base-border-radius-sm);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    white-space: nowrap;
    user-select: none;
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color-secondary);
    border: 1px solid var(--ant-color-border-secondary);
}

.app-base-page-tab:hover {
    background: var(--app-base-theme-primary-bg);
    color: var(--app-base-theme-primary);
}

.app-base-page-tab--active {
    background: var(--app-base-theme-primary);
    color: var(--app-base-bg-container);
}

.app-base-page-tab--active:hover {
    background: var(--app-base-theme-primary-hover);
    color: var(--app-base-bg-container);
}

.app-base-page-tab__name {
    margin-right: var(--ant-margin-xs);
}

.app-base-page-tab__refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--ant-transition-fast);
    opacity: 0.65;
}

.app-base-page-tab__refresh:hover {
    background: var(--app-base-fill-inverse-active);
    opacity: 1;
}

.app-base-page-tab__refresh + .app-base-page-tab__close {
    margin-left: 0;
}

.app-base-page-tab__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 50%;
    transition: var(--ant-transition-fast);
    opacity: 0.45;
}

.app-base-page-tab__close:hover {
    background: var(--ant-color-fill-tertiary);
    opacity: 0.75;
}

.app-base-page-tab--active .app-base-page-tab__close {
    opacity: 0.65;
}

.app-base-page-tab--active .app-base-page-tab__close:hover {
    background: var(--app-base-fill-inverse-active);
    opacity: 1;
}

.app-base-page-tabs--single .app-base-page-tab__close {
    display: none;
}

/* 下拉菜单 */
.app-base-dropdown {
    min-width: 120px;
    top: 100%;
    right: 0;
    margin-top: var(--ant-margin-xxs);
    background: var(--app-base-bg-elevated);
    border-radius: var(--app-base-border-radius);
    box-shadow: var(--app-base-box-shadow-lg);
    position: absolute;
    z-index: var(--ant-z-index-base);
    display: none;
    
}

.app-base-dropdown--visible {
    display: block;
}

.app-base-dropdown__item {
    padding: var(--ant-padding-xs) var(--ant-padding);
    font-size: var(--app-base-font-size-sm);
    color: var(--app-base-text-color);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    white-space: nowrap;
}

.app-base-dropdown__item:hover {
    background: var(--app-base-theme-primary-bg);
    color: var(--app-base-theme-primary);
}

.app-base-page-tabs__action-dropdown-item:first-child {
    border-radius: var(--app-base-border-radius) var(--app-base-border-radius) 0 0;
}

.app-base-page-tabs__action-dropdown-item:last-child {
    border-radius: 0 0 var(--app-base-border-radius) var(--app-base-border-radius);
}

/* 底部：固定高度 */
.app-base-footer {
    height: var(--app-base-footer-height);
    flex-shrink: 0; /* 防止被压缩 */
    background: var(--app-base-bg-container);
    border-top: 1px solid var(--app-base-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-base-text-color-secondary);
    font-size: var(--app-base-font-size-sm);
    padding: 0 var(--ant-padding-lg);
    z-index: 99;
}

.app-base-footer--hidden {
    display: none;
}

.app-base-footer__content {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-lg);
}

.app-base-footer__link {
    color: var(--app-base-text-color-secondary);
    text-decoration: none;
    transition: var(--ant-transition-fast);
}

.app-base-footer__link:hover {
    color: var(--app-base-theme-primary);
}

/* 顶部菜单 */
.app-base-top-menu__body {
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xs);
}

.app-base-top-menu__item {
    padding: var(--ant-padding-xs) var(--ant-padding-sm);
    color: var(--app-base-text-color-secondary);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
    white-space: nowrap;
    font-size: var(--app-base-font-size);
}

.app-base-top-menu__item:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

.app-base-top-menu__item--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
    font-weight: var(--ant-font-weight-medium);
}

/* 更多按钮容器 */
.app-base-top-menu__more {
    position: relative;
    flex-shrink: 0;
    display: none; /* 默认隐藏，JS控制显示 */
}

/* 更多按钮 */
.app-base-top-menu__more-btn {
    padding: var(--ant-padding-xs) var(--ant-padding);
    color: var(--app-base-text-color-secondary);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
    white-space: nowrap;
    font-size: var(--app-base-font-size);
    display: flex;
    align-items: center;
    gap: var(--ant-margin-xxs);
}

.app-base-top-menu__more-btn:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

/* 更多按钮激活状态（当前页面在下拉菜单中时） */
.app-base-top-menu__more--active .app-base-top-menu__more-btn {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

/* 更多按钮箭头 */
.app-base-top-menu__more-arrow {
    width: 14px;
    height: 14px;
    color: var(--app-base-text-color-tertiary);
    transition: transform var(--ant-transition-fast);
}

.app-base-top-menu__more:hover .app-base-top-menu__more-arrow {
    transform: rotate(180deg);
}

/* 下拉菜单 */
.app-base-top-menu__more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 120px;
    background: var(--app-base-bg-elevated);
    border-radius: var(--app-base-border-radius);
    box-shadow: var(--app-base-box-shadow-lg);
    padding: var(--ant-padding-xs) 0;
    padding-top: calc(var(--ant-padding-xs) + 4px); 
    display: none;
    z-index: 1000;
}

/* Hover显示下拉菜单 */
.app-base-top-menu__more:hover .app-base-top-menu__more-dropdown {
    display: block !important;
}

/* 下拉菜单项 */
.app-base-top-menu__more-item {
    padding: var(--ant-padding-xs) var(--ant-padding);
    color: var(--app-base-text-color-secondary);
    cursor: pointer;
    transition: var(--ant-transition-fast);
    white-space: nowrap;
}

.app-base-top-menu__more-item:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

/* 下拉菜单项激活状态（高亮） */
.app-base-top-menu__more-item--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
    font-weight: var(--ant-font-weight-medium);
}

/* 侧边栏菜单 */
.app-base-sider-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ant-padding-xs) 0;
}

/* 第一层分组（带图标） */
.app-base-sider-menu__group {
    margin-bottom: var(--ant-margin-xxs);
}

.app-base-sider-menu__title {
    display: flex;
    align-items: center;
    padding: var(--ant-padding-sm);
    color: var(--app-base-text-color);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
    margin: 0 var(--ant-margin-xs);
}

.app-base-sider-menu__title:hover {
    background: var(--app-base-fill-hover);
}

.app-base-sider-menu__title--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
    font-weight: var(--ant-font-weight-strong);
}

.app-base-sider-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: var(--ant-font-height); /* 与文字行高一致，确保垂直对齐 */
    flex-shrink: 0;
    margin-right: var(--ant-margin-sm);
    fill: currentColor; /* SVG 图标跟随文字颜色 */
    color: inherit; /* 字体图标继承颜色 */
}

.app-base-sider-menu__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.1s ease-out; /* 折叠时淡出 */
}

.app-base-sider-menu__arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--ant-transition-fast), opacity 0.1s ease-out;
    color: var(--app-base-text-color-tertiary);
}

.app-base-sider-menu__arrow--open {
    transform: rotate(90deg);
}

/* 子菜单容器 */
.app-base-sider-menu__children {
    display: none;
    overflow: hidden;
}

.app-base-sider-menu__children--open {
    display: block;
}

/* 菜单项（叶子节点） */
.app-base-sider-menu__item {
    display: flex;
    align-items: center;
    padding: var(--ant-padding-sm) var(--ant-padding-sm);
    color: var(--app-base-text-color-secondary);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
    margin: 0 var(--ant-margin-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-base-sider-menu__item:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-fill-hover);
}

.app-base-sider-menu__item--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
    font-weight: var(--ant-font-weight-strong);
}

/* 缩进控制：第二层与第一层文字对齐 */
.app-base-sider-menu__item--level2 {
    padding-left: calc(var(--ant-padding-sm) + 16px + var(--ant-margin-xs));
}

/* 第三层缩进1em */
.app-base-sider-menu__item--level3 {
    padding-left: calc(var(--ant-padding-sm) + 16px + var(--ant-margin-xs) + 1em);
}

/* 第四层缩进2em */
.app-base-sider-menu__item--level4 {
    padding-left: calc(var(--ant-padding-sm) + 16px + var(--ant-margin-xs) + 2em);
}

/* 子菜单分组（非第一层） */
.app-base-sider-menu__sub {
    margin-bottom: var(--ant-margin-xxs);
}

.app-base-sider-menu__sub-title {
    display: flex;
    align-items: center;
    padding: var(--ant-padding-xs) var(--ant-padding-sm);
    color: var(--app-base-text-color-secondary);
    cursor: pointer;
    border-radius: var(--app-base-border-radius-sm);
    transition: var(--ant-transition-fast);
    margin: 0 var(--ant-margin-xs);
}

.app-base-sider-menu__sub-title:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-fill-hover);
}

.app-base-sider-menu__sub-title--active {
    color: var(--app-base-theme-primary);
    font-weight: var(--ant-font-weight-strong);
}

/* 子菜单分组缩进 */
.app-base-sider-menu__sub--level2 .app-base-sider-menu__sub-title {
    padding-left: calc(var(--ant-padding-sm) + 16px + var(--ant-margin-sm));
}

.app-base-sider-menu__sub--level3 .app-base-sider-menu__sub-title {
    padding-left: calc(var(--ant-padding-sm) + 16px + var(--ant-margin-xs) + 1em);
}

/* Side 模式：隐藏顶部菜单 */
.app-base-layout--side .app-base-top-menu__body {
    display: none;
}

/* Top 模式下无子菜单时隐藏侧边栏 */
.app-base-layout--top.app-base-layout--no-sider .app-base-sider {
    display: none;
}

.app-base-layout--top.app-base-layout--no-sider .app-base-page-header {
    display: none;
}

/* 折叠状态侧边栏宽度 */
.app-base-layout--collapsed .app-base-sider {
    width: var(--app-base-sider-collapsed-width);
}

/* 折叠状态隐藏文字、箭头（淡出动画） */
.app-base-layout--collapsed .app-base-sider-menu__text,
.app-base-layout--collapsed .app-base-sider-menu__arrow {
    opacity: 0;
    width: 0;
    flex: 0;
    overflow: hidden;
}

/* 折叠状态隐藏子菜单 */
.app-base-layout--collapsed .app-base-sider-menu__children,
.app-base-layout--collapsed .app-base-sider-menu__sub {
    display: none;
}

/* 折叠状态菜单项居中 */
.app-base-layout--collapsed .app-base-sider-menu__title {
    justify-content: center;
    padding: var(--ant-padding-sm);
    margin: 0;
}

/* 折叠状态图标不需要右边距 */
.app-base-layout--collapsed .app-base-sider-menu__icon {
    margin-right: 0;
}

/* 折叠状态 hover 效果 */
.app-base-layout--collapsed .app-base-sider-menu__title:hover {
    background: var(--app-base-fill-hover);
}

/* 折叠图标高亮 */
.app-base-layout--collapsed .app-base-sider-menu__group--active .app-base-sider-menu__title {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

/* 折叠状态下侧边栏允许弹出菜单溢出 */
.app-base-layout--collapsed .app-base-sider,
.app-base-layout--collapsed .app-base-sider-menu {
    overflow: visible;
}

/* 菜单项相对定位 */
.app-base-layout--collapsed .app-base-sider-menu__group {
    position: relative;
}

/* 弹出面板样式 */
.app-base-sider-menu__popup {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    background: var(--app-base-bg-container);
    border-radius: var(--app-base-border-radius);
    box-shadow: var(--app-base-box-shadow-lg);
    padding: var(--ant-padding-xs) 0;
    z-index: 1000;
}

/* Hover 显示弹出菜单 */
.app-base-layout--collapsed .app-base-sider-menu__group:hover > .app-base-sider-menu__popup {
    display: block;
}

/* 弹出菜单项样式 */
.app-base-sider-menu__popup-item {
    padding: var(--ant-padding-xs) var(--ant-padding-md);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--app-base-text-color-secondary);
    transition: var(--ant-transition-fast);
    font-weight: var(--ant-font-weight-medium);
}

.app-base-sider-menu__popup-item:hover {
    background: var(--app-base-fill-hover);
}

/* 弹出菜单项高亮（路径上的所有项） */
.app-base-sider-menu__popup-item--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
    font-weight: var(--ant-font-weight-strong);
}

/* 弹出面板标题 */
.app-base-sider-menu__popup-title {
    padding: var(--ant-padding-xs) var(--ant-padding-md);
    font-weight: var(--ant-font-weight-strong);
    color: var(--app-base-text-color);
    border-bottom: 1px solid var(--app-base-border-color);
    margin-bottom: var(--ant-margin-xxs);
}

/* 可点击标题（无children时） */
.app-base-sider-menu__popup-title--clickable {
    cursor: pointer;
    border-bottom: none;
    margin-bottom: 0;
    transition: var(--ant-transition-fast);
}

.app-base-sider-menu__popup-title--clickable:hover {
    color: var(--app-base-theme-primary);
    background: var(--app-base-fill-hover);
}

/* 标题激活状态 */
.app-base-sider-menu__popup-title--active {
    color: var(--app-base-theme-primary);
    background: var(--app-base-theme-primary-bg);
}

/* 有子菜单的项显示箭头 */
.app-base-sider-menu__popup-item--has-children .app-base-sider-menu__popup-arrow {
    width: 12px;
    height: 12px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
}

/* 子弹出菜单 */
.app-base-sider-menu__popup-item--has-children {
    position: relative;
}

.app-base-sider-menu__popup-item--has-children > .app-base-sider-menu__popup {
    left: 100%;
    top: 0;
}

.app-base-sider-menu__popup-item--has-children:hover > .app-base-sider-menu__popup {
    display: block;
}

/* ==================== 3. 布局框架 - 主题模式 ==================== */

/* 主题色头部模式：在 .app-base-layout 上添加 class="app-base-layout--theme-header" */

.app-base-layout--theme-header .app-base-header {
    background: var(--app-base-theme-primary);
    border-bottom: none;
}

/* Logo 区域 */
.app-base-layout--theme-header .app-base-logo__icon {
    color: var(--app-base-text-inverse);
}

.app-base-layout--theme-header .app-base-logo__text {
    color: var(--app-base-text-inverse);
}

/* 顶部菜单 */
.app-base-layout--theme-header .app-base-top-menu__item {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout--theme-header .app-base-top-menu__item:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-active);
}

.app-base-layout--theme-header .app-base-top-menu__item--active {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-selected);
}

.app-base-layout--theme-header .app-base-top-menu__item--active:hover {
    background: var(--app-base-fill-inverse-selected-hover);
}

/* 更多按钮 */
.app-base-layout--theme-header .app-base-top-menu__more-btn {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout--theme-header .app-base-top-menu__more-btn:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-active);
}

.app-base-layout--theme-header .app-base-top-menu__more--active .app-base-top-menu__more-btn {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-selected);
}

/* 更多按钮箭头 */
.app-base-layout--theme-header .app-base-top-menu__more-arrow {
    color: var(--app-base-text-inverse-tertiary);
}

.app-base-layout--theme-header .app-base-top-menu__more-btn:hover .app-base-top-menu__more-arrow {
    color: var(--app-base-text-inverse-secondary);
}

/* 右侧操作区 */
.app-base-layout--theme-header .app-base-header-right__trigger:hover {
    background: var(--app-base-fill-inverse-active);
}

.app-base-layout--theme-header .app-base-header-right__trigger--open {
    background: var(--app-base-fill-inverse-active);
}

.app-base-layout--theme-header .app-base-header-right__icon {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout--theme-header .app-base-header-right__trigger:hover .app-base-header-right__icon {
    color: var(--app-base-text-inverse);
}

.app-base-layout--theme-header .app-base-header-right__text {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout--theme-header .app-base-header-right__trigger:hover .app-base-header-right__text {
    color: var(--app-base-text-inverse);
}

.app-base-layout--theme-header .app-base-header-right__arrow {
    color: var(--app-base-text-inverse-tertiary);
}

.app-base-layout--theme-header .app-base-header-right__trigger:hover .app-base-header-right__arrow {
    color: var(--app-base-text-inverse-secondary);
}

/* 深色侧边栏模式，使用方式：在 .app-base-layout 上添加 class="app-base-layout--dark-sider" */

/* 侧边栏背景 */
.app-base-layout.app-base-layout--dark-sider .app-base-sider {
    background: var(--app-base-dark-sider-bg);
}

/* 层级背景色（渐深法） */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__children {
    background: var(--app-base-dark-sider-bg-level2);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__children .app-base-sider-menu__children {
    background: var(--app-base-dark-sider-bg-level3);
}

/* ==================== 一级菜单组 ==================== */
/* 标题 */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__title {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__title:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-hover);
}

/* 激活状态（如工作台） */
.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__title--active {
    color: var(--app-base-text-inverse);
    background: var(--app-base-theme-primary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__title--active:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-theme-primary-hover);
}

/* 折叠状态高亮 */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__group--active > .app-base-sider-menu__title {
    color: var(--app-base-text-inverse);
}

/* ==================== 二级分组 ==================== */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__sub-title {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__sub-title:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-hover);
}

/* ==================== 菜单项（叶子节点） ==================== */
.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__item {
    color: var(--app-base-text-inverse-secondary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__item:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-hover);
}

/* 激活状态 */
.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__item--active {
    color: var(--app-base-text-inverse);
    background: var(--app-base-theme-primary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider .app-base-sider-menu__item--active:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-theme-primary-hover);
}

/* ==================== 箭头图标 ==================== */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__arrow {
    color: var(--app-base-text-inverse-quaternary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__title:hover .app-base-sider-menu__arrow,
.app-base-layout.app-base-layout--dark-sider .app-base-sider-menu__sub-title:hover .app-base-sider-menu__arrow {
    color: var(--app-base-text-inverse-tertiary);
}

/* ==================== 工具栏 ==================== */
.app-base-layout.app-base-layout--dark-sider .app-base-sider-toolbar {
    border-color: var(--app-base-border-inverse);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-toolbar__btn {
    color: var(--app-base-text-inverse-tertiary);
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider-toolbar__btn:hover {
    color: var(--app-base-text-inverse);
    background: var(--app-base-fill-inverse-hover);
}

/* ==================== 4. 页面内容区容器定义 ==================== */

/* 内容区容器：负责滚动，滚动条在最右侧 */
.app-base-page-container {
    flex: 1;
    padding: var(--ant-padding-lg);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 内容区隐藏滚动条，避免出现滚动条导致的easyui组件布局问题 */
.app-base-page-container::-webkit-scrollbar {
    display: none;
}

/* Loading 状态居中显示 */
.app-base-page-container > .app-base-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 页面加载覆盖层：绝对定位覆盖内容区 */
.app-base-page-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--app-base-bg-layout);
    z-index: 8000;
}

/* ==================== 5. 通用组件 ==================== */

.app-base-sider::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.app-base-sider-menu::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.app-base-sider-menu::-webkit-scrollbar-thumb:active {
    background-color: transparent;
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider::-webkit-scrollbar-thumb {
    background: transparent;
}

.app-base-layout.app-base-layout--dark-sider .app-base-sider::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

.app-base-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
}

.app-base-loading--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    background: var(--app-base-bg-container);
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.app-base-loading--fullscreen.app-base-loading--hidden {
    opacity: 0;
    pointer-events: none;
}

.app-base-loading__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-base-theme-primary, #1677ff);
    animation: app-base-loading-dot 1.2s ease-in-out infinite;
}

.app-base-loading__spinner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ant-margin-sm);
}

.app-base-loading--small .app-base-loading__dot {
    width: 10px;
    height: 10px;
}

.app-base-loading--small .app-base-loading__spinner {
    gap: var(--ant-margin-xxs);
}

.app-base-loading__dot:nth-child(1) { animation-delay: 0s; }
.app-base-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.app-base-loading__dot:nth-child(3) { animation-delay: 0.4s; }
.app-base-loading__dot:nth-child(4) { animation-delay: 0.6s; }

@keyframes app-base-loading-dot {
    0%, 100% {
opacity: 0.3;
transform: scale(0.8);
    }
    50% {
opacity: 1;
transform: scale(1);
    }
}