/**
 * ============================================================
 *  TwoNav 后台现代极简风覆盖层（Modern Minimalist Overlay）
 *  文件：templates/admin/css/modern-overlay.css
 *  加载位置：① 外壳 templates/admin/index.php（头部）
 *           ② 内页 templates/admin/page/header.php（iframe 内所有页面）
 *  设计原则：
 *   1. 纯视觉覆盖：只改颜色/圆角/阴影/留白/动效，零 HTML/JS/后端改动；
 *   2. 作用域克制：全部规则限定在 .layui-* / .layuimini-* 类名内，
 *      第三方组件（wangEditor 的 w-e-*、验证码、layer 内部结构等）
 *      因不含这些类名而天然不被波及（见文末保护说明）；
 *   3. 对抗 miniTheme：凡 miniTheme.js 会往 #layuimini-bg-color 注入
 *      !important 配色的位置（顶栏/侧栏/logo/菜单选中态），本文件一律
 *      用「更高特异性选择器 + !important」压住，确保换肤残留不生效。
 * ============================================================
 */

/* ============ 1. 设计变量（外壳与内页两个文档各自生效） ============ */
:root {
    --tn-primary: #3B82F6;                 /* 现代蓝主色 */
    --tn-primary-hover: #2563EB;           /* 主色悬浮 */
    --tn-primary-light: rgba(59, 130, 246, .08);  /* 主色浅底（选中菜单等） */
    --tn-primary-ring: rgba(59, 130, 246, .15);   /* 聚焦外发光 */
    --tn-bg: #f4f7f9;                      /* 页面大背景：浅灰蓝 */
    --tn-card: #ffffff;                    /* 卡片/侧栏纯白 */
    --tn-text: #1f2937;                    /* 主文字 */
    --tn-text-2: #4b5563;                  /* 次级文字 */
    --tn-text-3: #6b7280;                  /* 弱文字 */
    --tn-line: #eef1f4;                    /* 极浅分隔线 */
    --tn-line-2: #f0f2f5;                  /* 表格横线 */
    --tn-input-bg: #f9f9f9;                /* 输入框浅灰底 */
    --tn-radius-card: 12px;                /* 卡片大圆角 */
    --tn-radius-ctrl: 8px;                 /* 按钮/输入框微圆角 */
    --tn-shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .05); /* 轻浮起 */
    --tn-shadow-pop: 0 8px 24px rgba(0, 0, 0, .08);   /* 下拉/弹层阴影 */
}

/* ============ 2. 通用基底 ============ */
/* 字体：现代系统栈（外壳+内页均生效） */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
/* 页面大背景：浅灰蓝（不加 !important，个别页面自定义 body 背景可优先） */
body {
    background: var(--tn-bg);
}

/* 内页滚动条细化（仅存在于 iframe 文档中的 .layuimini-container 作用域，
   外壳文档因 layuimini.css 的 display:none 不受影响） */
.layuimini-container ::-webkit-scrollbar { width: 6px; height: 6px; }
.layuimini-container ::-webkit-scrollbar-track { background: transparent; }
.layuimini-container ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.layuimini-container ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 侧栏独立细化滚动条（深底上 thumb 用暗蓝灰） */
.layuimini-menu-left::-webkit-scrollbar { display: block; width: 4px; }
.layuimini-menu-left::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }

/* ============================================================
 *  3. 外壳 —— 顶栏
 * ============================================================ */
/* 顶栏：纯白 + 底部极浅分隔线 + 微阴影（压住 miniTheme 的 !important 换肤） */
.layui-layout-body .layui-layout-admin .layui-header {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 var(--tn-line), 0 2px 8px rgba(0, 0, 0, .03);
}

/* 顶栏右侧图标文字颜色 */
.layui-layout-body .layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
    color: var(--tn-text-2) !important;
    transition: color .2s ease;
}

/* 顶栏右侧图标悬浮：主色文字 + 主色浅底 */
.layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this,
.layui-layout-body .layuimini-tool i:hover {
    background-color: var(--tn-primary-light) !important;
}
.layui-layout-body .layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover {
    color: var(--tn-primary) !important;
}

/* 侧栏收缩按钮图标 */
.layui-layout-body .layui-layout-admin .layui-header .layuimini-tool i {
    color: var(--tn-text-3) !important;
    border-radius: 6px;
    transition: all .2s ease;
}
.layui-layout-body .layuimini-tool i:hover {
    color: var(--tn-primary) !important;
}

/* 顶栏下拉菜单（用户名菜单/关闭页签菜单）：白卡片 + 圆角 + 轻阴影 */
.layui-layout-body .layui-header .layui-nav .layui-nav-child {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--tn-shadow-pop) !important;
    padding: 6px !important;
}
.layui-layout-body .layui-header .layui-nav .layui-nav-child dd a {
    color: var(--tn-text-2) !important;
    border-radius: 6px;
    line-height: 36px;
    padding: 0 12px;
    transition: all .2s ease;
}
.layui-layout-body .layui-header .layui-nav .layui-nav-child dd a:hover {
    background-color: var(--tn-bg) !important;
    color: var(--tn-primary) !important;
}
/* 下拉菜单选中项：主色底白字 */
.layui-layout-body .layui-header .layui-nav .layui-nav-child dd.layui-this a {
    background-color: var(--tn-primary) !important;
    color: #ffffff !important;
}
/* 下拉箭头颜色 */
.layui-layout-body .layui-header .layui-nav .layui-nav-more {
    border-top-color: #9ca3af !important;
}
.layui-layout-body .layui-header .layui-nav .layui-nav-mored,
.layui-layout-body .layui-header .layui-nav-itemed > a .layui-nav-more {
    border-color: transparent transparent #9ca3af !important;
}

/* ============================================================
 *  3.1 隐藏顶栏「配色方案」入口
 * ------------------------------------------------------------
 *  原因：miniTheme 换肤注入的样式会被本覆盖层的高特异性
 *  !important 全部压制（点击色块无效果）；原生 12 套配色
 *  与"现代极简风"冲突。为保证视觉统一，直接隐藏该按钮。
 *  面板样式（第 8 节）保留但不再可达；localStorage 残留的
 *  旧配色依然被覆盖层压制，不会影响外观。
 * ============================================================ */
.layui-layout-body .layui-header .layuimini-select-bgcolor {
    display: none !important;
}

/* ============================================================
 *  4. 外壳 —— Logo 区（与深色侧栏融为一体，文字纯白）
 * ============================================================ */
.layui-layout-body .layui-layout-admin .layuimini-logo {
    background-color: #1e293b !important;   /* 与侧栏同色：深空蓝灰 */
    color: #ffffff !important;
    /* 底部仅留一条极淡亮线，与菜单区做微妙分界（与侧栏同底即融为一体） */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.layui-layout-body .layui-layout-admin .layuimini-logo h1 {
    color: #ffffff !important;
}

/* ============================================================
 *  5. 外壳 —— 侧边栏与菜单（深空蓝灰 + 间距 + 蓝色选中态与小竖条）
 * ============================================================ */
/* 侧栏整体：深空蓝灰 #1e293b（slate-800），沉稳专业；
   右侧保留柔和外阴影，让深色侧栏与白内容区自然过渡 */
.layui-layout-body .layui-side.layui-bg-black {
    background-color: #1e293b !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
}
/* 菜单容器（正常态/收缩悬浮态）：与侧栏同色 */
.layui-layout-body .layui-side.layui-bg-black > .layuimini-menu-left > ul,
.layui-layout-body .layuimini-menu-left-zoom > ul,
.popup-tips .layuimini-menu-left-zoom > ul {
    background-color: #1e293b !important;
}

/* 菜单根 ul：上下留白 */
.layui-layout-body .layuimini-menu-left .layui-nav {
    padding: 6px 0 12px !important;
}

/* 顶部菜单项：增加间距（收缩态 .layuimini-mini 不加边距，保持图标居中） */
.layui-layout-body:not(.layuimini-mini) .layuimini-menu-left .layui-nav-tree > li.layui-nav-item {
    margin: 2px 8px;
}
/* 去掉原深色主题的第一项顶部边线 */
.layui-layout-body .layui-side.layui-bg-black > .layuimini-menu-left > ul > .layui-nav-item:first-child {
    border-top: none !important;
}

/* 菜单链接：未选中浅灰 #94a3b8 + 圆角 + 过渡 */
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-item a,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav .layui-nav-item a,
.popup-tips .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
    color: #94a3b8 !important;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}
/* 菜单链接悬浮：文字纯白 + 背景稍微变亮（白透明叠加，深底上的标准做法） */
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-item a:hover,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
.popup-tips .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    background-image: none !important;      /* 清掉旧版浅蓝渐变 */
    color: #ffffff !important;
}

/* 展开的子菜单区：与侧栏同色（压住 miniTheme 换肤深色残留） */
.layui-layout-body .layuimini-menu-left .layui-nav-itemed > .layui-nav-child,
.layui-layout-body .layuimini-menu-left-zoom .layui-nav-itemed > .layui-nav-child {
    background-color: #1e293b !important;
}

/* 选中态：浅蓝底 + 主色文字（清掉 li/dd 上的实色底，改到 a 上以便圆角生效） */
.layui-layout-body .layuimini-menu-left .layui-nav-tree li.layui-this,
.layui-layout-body .layuimini-menu-left .layui-nav-tree dd.layui-this,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree li.layui-this,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree dd.layui-this,
.popup-tips .layuimini-menu-left-zoom.layui-nav-tree li.layui-this,
.popup-tips .layuimini-menu-left-zoom.layui-nav-tree dd.layui-this {
    background-color: transparent !important;
}
.layui-layout-body .layuimini-menu-left .layui-nav-tree .layui-this > a,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a,
.popup-tips .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a {
    /* 选中：现代蓝低透明度渐变底 + 纯白文字 + 加粗；
       蓝色主调由渐变底与左侧小竖条共同承担，白字保证可读性 */
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(59, 130, 246, .32) 0%, rgba(59, 130, 246, .12) 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* 选中态：左侧小竖条高亮（伪元素挂在 a 上，不拦截任何点击） */
.layui-layout-body .layuimini-menu-left .layui-nav-tree .layui-this > a,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a {
    position: relative;
}
.layui-layout-body .layuimini-menu-left .layui-nav-tree .layui-this > a::before,
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background-color: var(--tn-primary);
}
/* 子菜单选中项竖条位置适配缩进 */
.layui-layout-body .layuimini-menu-left .layui-nav-tree dd.layui-this > a::before {
    left: 10px;
}

/* 展开箭头颜色（深底用中灰蓝，可见且不抢眼） */
.layui-layout-body .layuimini-menu-left .layui-nav-more,
.layui-layout-body .layuimini-menu-left-zoom .layui-nav-more {
    color: #64748b !important;
}
/* 菜单文字取消强制字距 */
.layui-layout-body .layuimini-menu-left .layui-nav-item a span {
    letter-spacing: 0;
}

/* ============================================================
 *  6. 外壳 —— 多标签页（Tab 栏）
 * ============================================================ */
/* 内容区大背景 */
.layui-layout-body .layui-layout-admin .layui-body {
    background-color: var(--tn-bg) !important;
}
.layui-layout-body .layui-layout-admin {
    background-color: var(--tn-bg);
}

/* Tab 标题栏：纯白、去掉所有边框、底部极浅线 */
.layui-layout-body .layuimini-tab .layui-tab-title {
    border: none !important;
    border-bottom: 1px solid var(--tn-line) !important;
    background-color: #ffffff;
}
.layui-layout-body .layuimini-tab .layui-tab-title li {
    border-right: none !important;
    color: var(--tn-text-3);
    transition: background-color .2s ease, color .2s ease;
}
.layui-layout-body .layuimini-tab .layui-tab-title li:hover {
    background-color: var(--tn-bg);
    color: var(--tn-text-2);
}
.layui-layout-body .layuimini-tab .layui-tab-title li.layui-this {
    background-color: #ffffff;
}
.layui-layout-body .layuimini-tab .layui-tab-title .layui-this span {
    color: var(--tn-text);
    font-weight: 600;
}

/* Tab 激活小圆点：主色（压住 miniTheme tabActiveColor） */
.layui-layout-body .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
    background-color: var(--tn-primary) !important;
}
.layui-layout-body .layuimini-tab .layui-tab-title .layuimini-tab-active {
    background-color: #cbd5e1;
}

/* Tab 内容区（iframe 承载区）底色 */
.layui-layout-body .layuimini-tab .layui-tab-content {
    background-color: var(--tn-bg);
}

/* Tab 栏左右滚动/关闭下拉按钮：弱化边框 */
.layui-layout-body .layuimini-tab .layui-tab-control > li {
    background-color: #ffffff;
    border-color: var(--tn-line);
    color: var(--tn-text-3);
}
.layui-layout-body .layuimini-tab .layuimini-tab-roll-left {
    border-left-color: var(--tn-line);
}
.layui-layout-body .layuimini-tab .layui-tab-tool,
.layui-layout-body .layuimini-tab .layuimini-tab-roll-right {
    border-left-color: var(--tn-line);
}
/* Tab 关闭工具下拉 */
.layui-layout-body .layuimini-tab .layui-tab-tool .layui-nav-child {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--tn-shadow-pop) !important;
}

/* ============================================================
 *  7. 外壳 —— 收缩态悬浮菜单（popup-tips）与深色侧栏统一
 * ============================================================ */
.popup-tips.layui-layer-tips {
    background-color: #1e293b !important;   /* 与深色侧栏统一（压掉 JS 内联背景） */
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
}
.popup-tips.layui-layer-tips .layui-layer-content {
    color: #e2e8f0 !important;
}

/* ============================================================
 *  8. 外壳 —— 配色方案面板轻量化
 * ============================================================ */
.layuimini-color .color-title {
    border-bottom-color: var(--tn-line);
}
.layuimini-color .color-content ul li {
    background-color: #f8fafc;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
}
.layuimini-color .color-content li.layui-this:after,
.layuimini-color .color-content li:hover:after {
    border-color: var(--tn-primary) !important;
}

/* ============================================================
 *  9. 内页 —— 容器与卡片
 * ============================================================ */
/* 内容容器：去边框、大圆角、轻浮起（!important 压过 public.css 与个别页面内联样式） */
.layuimini-container {
    border: none !important;
    border-radius: var(--tn-radius-card) !important;
    background-color: var(--tn-card);
    box-shadow: var(--tn-shadow-card);
}

/* 卡片：去边框 + 12px 圆角 + 微阴影 */
.layui-card {
    border: none !important;
    border-radius: var(--tn-radius-card) !important;
    background-color: #ffffff;
    box-shadow: var(--tn-shadow-card);
}
/* 卡片头：白色、底部极浅线、加粗深字 */
.layui-card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--tn-line-2) !important;
    border-radius: var(--tn-radius-card) var(--tn-radius-card) 0 0;
    height: auto;
    min-height: 42px;
    line-height: 24px;
    padding: 12px 20px;
    font-weight: 600;
    color: var(--tn-text);
}
/* 卡片体：加大留白 */
.layui-card-body {
    padding: 16px 20px;
    color: var(--tn-text-2);
}

/* 搜索区（table-search-fieldset）：去边框改浅灰底 */
.layuimini-container .table-search-fieldset {
    border: none !important;
    background-color: #f8fafc;
    border-radius: var(--tn-radius-card);
    padding: 12px 20px 6px 20px;
}

/* 首页快捷入口图标块：浅灰圆角底 + 主色悬浮 */
.layuimini-qiuck-module a i {
    background-color: #f4f7f9 !important;
    color: var(--tn-text-2) !important;
    border-radius: 10px !important;
    transition: all .2s ease !important;
}
.layuimini-qiuck-module a:hover i {
    background-color: var(--tn-primary-light) !important;
    color: var(--tn-primary) !important;
    transform: translateY(-2px);
}

/* 首页数据面板：浅灰圆角 */
.layui-bg-number {
    background-color: #f8fafc !important;
    border-radius: 10px;
}

/* ============================================================
 *  10. 内页 —— 表单与输入框
 * ============================================================ */
/* 表单标签：深字 + 中等字重 */
.layui-form-label {
    color: var(--tn-text-2);
    font-weight: 500;
}

/* 输入框/文本域：去掉硬边框 → 浅灰底 + 微圆角；聚焦 → 白底 + 主色外发光 */
.layui-input,
.layui-textarea,
.layui-form-select .layui-input {
    border: 1px solid transparent;
    border-radius: var(--tn-radius-ctrl);
    background-color: var(--tn-input-bg);
    color: var(--tn-text);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.layui-input:hover,
.layui-textarea:hover {
    border-color: #e2e8f0;
}
.layui-input:focus,
.layui-textarea:focus {
    border-color: var(--tn-primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px var(--tn-primary-ring);
}
.layui-input::placeholder,
.layui-textarea::placeholder {
    color: #9ca3af;
}
/* 只读/禁用态保持灰底 */
.layui-input[disabled],
.layui-input[readonly],
.layui-textarea[disabled] {
    background-color: #f3f4f6;
    color: #9ca3af;
}

/* 下拉框弹层：白卡片 + 圆角 + 轻阴影 + 主色选中 */
.layui-form-select dl {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--tn-shadow-pop) !important;
}
.layui-form-select dl dd.layui-this {
    background-color: var(--tn-primary-light) !important;
    color: var(--tn-primary);
}

/* ============================================================
 *  11. 内页 —— 按钮（扁平化 + 悬浮上浮）
 * ============================================================ */
/* 通用按钮：主色蓝、微圆角、0.2s 过渡 */
.layui-btn {
    background-color: var(--tn-primary);
    border: 1px solid var(--tn-primary);
    border-radius: var(--tn-radius-ctrl);
    box-shadow: none;
    transition: all .2s ease;
}
.layui-btn:hover {
    background-color: var(--tn-primary-hover);
    border-color: var(--tn-primary-hover);
    transform: translateY(-1px);            /* 轻微上浮 */
    box-shadow: 0 4px 10px rgba(59, 130, 246, .25);
}
.layui-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
/* 禁用态：不上浮、不发光 */
.layui-btn.layui-btn-disabled:hover,
.layui-btn.layui-btn-disabled:active {
    transform: none;
    box-shadow: none;
}

/* 默认蓝（layui-btn-normal）与主按钮统一为主色 */
.layui-btn-normal {
    background-color: var(--tn-primary) !important;
    border-color: var(--tn-primary) !important;
    color: #ffffff !important;
}
.layui-btn-normal:hover {
    background-color: var(--tn-primary-hover) !important;
    border-color: var(--tn-primary-hover) !important;
}

/* 白底描边按钮（primary）：弱边框 + 悬浮转主色 */
.layui-btn-primary {
    background-color: #ffffff;
    border: 1px solid #d8dee6;
    color: var(--tn-text-2);
}
.layui-btn-primary:hover {
    background-color: var(--tn-primary-light);
    border-color: var(--tn-primary);
    color: var(--tn-primary);
    box-shadow: 0 4px 10px rgba(59, 130, 246, .15);
}

/* 危险按钮：红色调同样上浮 */
.layui-btn-danger {
    background-color: #EF4444;
    border-color: #EF4444;
    border-radius: var(--tn-radius-ctrl);
}
.layui-btn-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, .25);
}
/* 暖色按钮：弱化圆角统一 */
.layui-btn-warm {
    border-radius: var(--tn-radius-ctrl);
}

/* ============================================================
 *  12. 内页 —— 表格（去竖线、极浅横线、斑马纹、表头加粗、行悬浮）
 * ============================================================ */
/* 表格容器（大数据表）：圆角 + 轻阴影 + 裁剪圆角 */
.layui-table-view {
    border: none !important;
    border-radius: var(--tn-radius-card);
    box-shadow: var(--tn-shadow-card);
    overflow: hidden;
}

/* 表格本体：去掉外框与竖线，只保留极浅横线 */
.layui-table {
    border: none !important;
}
.layui-table th,
.layui-table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--tn-line-2);
    color: var(--tn-text-2);
}
.layui-table tbody tr:last-child td {
    border-bottom: none;
}

/* 表头：浅灰底 + 加粗深字 */
.layui-table thead tr,
.layui-table-header {
    background-color: #f8fafc !important;
}
.layui-table th {
    color: var(--tn-text) !important;
    font-weight: 600;
}

/* 斑马纹（仅直接子行，不干扰树表/展开行的嵌套表） */
.layui-table tbody > tr:nth-child(even) {
    background-color: #fafbfc;
}

/* 行悬浮：浅蓝高亮 + 平滑过渡 */
.layui-table tbody tr:hover {
    background-color: #f4f9ff !important;
}
.layui-table tbody tr {
    transition: background-color .2s ease;
}

/* 分页：当前页主色、按钮圆角 */
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--tn-primary);
    border-radius: 6px;
}
.layui-laypage a,
.layui-laypage span {
    border-radius: 6px;
}
.layui-laypage a:hover {
    color: var(--tn-primary);
}

/* ============================================================
 *  13. 内页 —— 徽章 / 引用块等辅助组件
 * ============================================================ */
.layui-badge {
    border-radius: 999px;
}
.layui-elem-quote {
    background-color: #f8fafc;
    border-left: 4px solid var(--tn-primary);
    border-radius: 0 8px 8px 0;
    color: var(--tn-text-2);
}

/* ============================================================
 *  14. layer 弹窗（外壳+内页通用，仅表面化处理）
 * ============================================================ */
.layui-layer {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12) !important;
}
.layui-layer-title {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--tn-line-2) !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--tn-text);
    font-weight: 600;
}
/* 弹窗确定按钮统一主色 */
.layui-layer-btn .layui-layer-btn0 {
    background-color: var(--tn-primary) !important;
    border-color: var(--tn-primary) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* ============================================================
 *  16. 收尾优化①：隐藏「导出导入」菜单（纯 CSS，零后端改动）
 * ------------------------------------------------------------
 *  菜单数据硬编码于 system/api.php read_data 菜单数组
 *  （['title'=>'导出导入','href'=>'data_control']），渲染后
 *  子菜单 <a> 带 layuimini-href="data_control" 属性。
 *  此处用属性选择器精准隐藏（含收缩态悬浮菜单副本），
 *  不影响任何其他菜单；隐藏 a 后其所在 dd 自动塌缩为 0。
 *  若想彻底从数据层移除：删除 api.php 中该行数组即可
 *  （需动后端核心 API，本任务红线内不做，按站长偏好可选）。
 * ============================================================ */
.layui-layout-body .layuimini-menu-left .layui-nav-tree a[layuimini-href="data_control"],
.layui-layout-body .layuimini-menu-left-zoom.layui-nav-tree a[layuimini-href="data_control"],
.popup-tips .layuimini-menu-left-zoom.layui-nav-tree a[layuimini-href="data_control"] {
    display: none !important;
}

/* ============================================================
 *  17. 收尾优化②：移动端内容区排版适配（≤768px）
 * ============================================================ */
@media (max-width: 768px) {
    /* 1. 卡片内并排面板：两列紧凑排版（50%），避免单列过长 */
    .layuimini-main .layui-card .layui-col-xs6 {
        width: 50% !important;
    }
    /* 统计面板紧凑化：小字号/小 padding，保证 50% 宽度下文字不换行错位 */
    .layuimini-main .layui-card .panel-body {
        padding: 8px 10px !important;
    }
    .layuimini-main .layui-card .panel-title h5 {
        font-size: 12px !important;
        margin: 0 0 2px !important;
    }
    .layuimini-main .layui-card .panel-title .label {
        font-size: 10px !important;
        padding: 2px 5px;
    }
    .layuimini-main .layui-card .panel-content h1.no-margins {
        font-size: 22px !important;
        margin: 2px 0 !important;
    }
    .layuimini-main .layui-card .panel-content small {
        font-size: 11px !important;
        white-space: nowrap;            /* 描述文字不换行错位 */
    }
    /* 快捷入口图标块：手机端强制 4 列（25%），紧凑整齐 */
    .layuimini-main .layui-card .layuimini-qiuck-module {
        width: 25% !important;
    }
    .layuimini-main .layui-card .layuimini-qiuck-module a i {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 20px !important;     /* 图标 20px */
    }
    .layuimini-main .layui-card .layuimini-qiuck-module a cite {
        font-size: 12px !important;     /* 文字 12px */
        line-height: 16px !important;
        white-space: nowrap;            /* 不换行、不撑破 */
    }
    /* 概况页固定高度容器放开，避免内容被 210px 高度裁切 */
    .layuimini-main .layui-card .welcome-module {
        height: auto !important;
    }
    /* 2. 卡片内文字不溢出，该换行就换行 */
    .layuimini-main .layui-card {
        word-break: break-all;
        overflow-wrap: break-word;
    }
    /* 3. 内容区四周留白收紧，给手机屏幕腾空间 */
    .layuimini-main {
        margin: 6px 4px !important;
    }
    .layui-card-header {
        padding: 10px 12px;
    }
    .layui-card-body {
        padding: 12px;
    }
    .layuimini-container .table-search-fieldset {
        padding: 10px 12px 4px;
    }
}

/* ============================================================
 *  18. 收尾优化③：Logo 精细化 + 顶栏右侧图标精简
 * ============================================================ */
/* --- Logo：字号 18px、图标收敛、间距收紧、深色底中绝对垂直居中 --- */
.layui-layout-body .layui-layout-admin .layuimini-logo {
    display: flex !important;           /* 改弹性布局，垂直居中交给 align-items */
    align-items: center !important;
    padding-left: 14px;
    line-height: normal !important;     /* 去掉原 line-height:60px 的干扰 */
}
.layui-layout-body .layui-layout-admin .layuimini-logo a {
    display: flex !important;
    align-items: center;
}
.layui-layout-body .layui-layout-admin .layuimini-logo img {
    height: 30px !important;            /* 图标收敛：40px → 30px */
}
.layui-layout-body .layui-layout-admin .layuimini-logo h1 {
    font-size: 18px !important;         /* 文字缩小一档 */
    margin: 0 0 0 8px !important;       /* 与图标间距 12px → 8px */
    line-height: 30px !important;       /* 与图标同高，保证绝对居中 */
}
/* 收缩态只剩图标：取消左留白，图标水平居中 */
.layui-layout-body.layuimini-mini .layui-layout-admin .layuimini-logo {
    padding-left: 0;
    justify-content: center;
}

/* --- 手机端顶栏右侧图标整体缩小、间距收紧 --- */
@media (max-width: 768px) {
    .layui-layout-body .layui-layout-admin .layui-header .layui-nav.layui-layout-right > li:not(.layuimini-setting) {
        width: 36px !important;         /* 40px → 36px */
    }
    .layui-layout-body .layui-layout-admin .layui-header .layui-nav.layui-layout-right .layui-nav-item a {
        font-size: 14px !important;
        padding: 0 10px !important;     /* 左右间距收紧 */
    }
    .layui-layout-body .layui-layout-admin .layui-header .layui-nav.layui-layout-right .layui-nav-item a .fa {
        font-size: 14px !important;
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-tool i {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 15px;
    }
}

/* ============================================================
 *  19. 手机端侧栏行为优化（≤1024px，与 layuimini 断点一致）
 * ------------------------------------------------------------
 *  layuimini 手机端状态机：body.layuimini-all = 收起（菜单
 *  left:-200px 屏外）；点击折叠按钮 → layuimini-mini = 抽屉
 *  滑出；点击遮罩收起。以下用纯 CSS 强化该行为（零 JS 改动）。
 * ============================================================ */
@media (max-width: 1024px) {
    /* 1. 默认收起保障：all 状态下菜单与 logo 明确移出屏幕 */
    .layui-layout-body.layuimini-all .layui-layout-admin .layuimini-menu-left,
    .layui-layout-body.layuimini-all .layui-header .layuimini-logo {
        left: -220px !important;
    }
    /* 2. 抽屉从顶栏下方（60px）滑出，不遮挡右上角折叠/关闭按钮；
          高度同步缩短并允许滚动 */
    .layui-layout-body .layui-layout-admin .layui-side.layui-bg-black {
        top: 60px !important;
        height: calc(100% - 60px) !important;
        overflow-y: auto;
    }
    /* 3. 展开态菜单项触控加高（40px → 48px）、间距加大，手指易点 */
    .layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-item a {
        height: 48px !important;
        line-height: 48px !important;
    }
    .layui-layout-body .layuimini-menu-left .layui-nav-tree > li.layui-nav-item {
        margin: 4px 8px;
    }
}

/* ============================================================
 *  20. 手机端顶栏及账号区域防变形（≤768px）
 * ============================================================ */
@media (max-width: 768px) {
    /* 1. 右侧图标区：flex 靠右 + 强制垂直居中 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        height: 60px;
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul > li {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 60px !important;
        line-height: 60px !important;
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul > li > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        padding: 0 10px !important;
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul > li > a .fa {
        font-size: 14px !important;
    }
    /* 2. 账号（用户名）文字缩小、间距收紧，防挤压主页空间 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-setting > a {
        font-size: 13px !important;
        padding: 0 6px !important;
    }
    /* 3. 左侧折叠按钮位置微调：与首页图标间距更舒适 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-tool {
        width: 44px !important;
        left: 6px !important;
    }
}
/* 超窄屏（≤380px）：隐藏用户名文字，只留下拉三角，进一步防变形 */
@media (max-width: 380px) {
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-setting > a {
        font-size: 0 !important;         /* 文字隐藏，三角不受字号影响 */
        padding: 0 8px !important;
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-setting > a .layui-nav-more {
        border-top-color: #6b7280 !important;
    }
}

/* ============================================================
 *  21. 手机端顶栏规范适配（≤768px，纯 CSS，零 DOM/JS 改动）
 * ------------------------------------------------------------
 *  终版修复：撤销此前 position:absolute / width:0 / JS 删 DOM
 *  等极端手段，恢复系统原生定位基准，仅做规范视觉覆盖：
 *  1. 全屏图标隐藏；
 *  2. 账号 <a> 的文字（裸文本节点用 font-size:0 隐藏）与下拉
 *     三角隐藏，但保留 <a> 点击区域（28px 宽）；
 *  3. 账号下拉菜单强制向左弹出（right:0）并限制最大宽度，
 *     杜绝飞出屏幕/横向滚动条；
 *  4. 父容器规范 flex：右对齐 + 垂直居中 + 15px 间距。
 * ============================================================ */
@media (max-width: 768px) {
    /* 1. 全屏图标（四个箭头）隐藏 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layui-nav-item.mobile {
        display: none !important;
    }
    /* 2. 账号 a：隐藏文字与三角，保留 28px 宽的点击区域 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting {
        position: relative;             /* 原生定位基准（layui 默认行为），非 absolute */
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting > a {
        width: 28px !important;         /* 保留点击区域 */
        height: 60px;
        padding: 0 !important;
        font-size: 0 !important;        /* 隐藏裸文本节点（用户名） */
    }
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting > a .layui-nav-more {
        display: none !important;       /* 隐藏下拉小三角 */
    }
    /* 3. 账号下拉菜单：强制向左弹出 + 限制最大宽度，防止飞出屏幕 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting .layui-nav-child {
        right: 0 !important;
        left: auto !important;
        min-width: 120px !important;
        max-width: 80vw !important;
    }
    /* 3.1 菜单开合动画优化：取消 layui 原生 upbit 动画（移动端掉帧卡顿），
           开启硬件加速，保证秒开秒关 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting .layui-nav-child {
        transition: none !important;
        animation: none !important;
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
    }
    /* 3.2 消除触摸双击缩放手势延迟，点击瞬间响应 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content .layuimini-setting > a {
        touch-action: manipulation;
    }
    /* 4. 父容器规范 flex：右对齐、垂直居中、15px 均匀间距 */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-header-content > ul {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        height: 60px;
    }
    /* 5. "三个点"恢复显示（原配色入口，功能保持原样） */
    .layui-layout-body .layui-layout-admin .layui-header .layuimini-select-bgcolor {
        display: flex !important;
    }
}

/* ============================================================
 *  15. 第三方组件保护说明（重要，勿删）
 * ------------------------------------------------------------
 *  本文件所有规则均以 .layui-* / .layuimini-* / .popup-tips /
 *  .layui-layer 类名为选择器锚点，绝不使用裸标签选择器
 *  （input/table/button 等），因此：
 *  1. wangEditor（w-e-* 系列类名）不会被任何规则命中，样式原样；
 *  2. 验证码图片、canvas、第三方图表容器不被命中；
 *  3. 伪元素（::before 竖条）只挂在 <a> 自身，不产生遮挡层，
 *     不会影响点击区域、事件冒泡与表单提交；
 *  4. 按钮位移仅 transform，不改变布局流与命中区域（hover 目标不变）。
 *  若未来某页面引入特殊组件需要豁免，可在该组件容器上加类
 *  .mo-keep，并在上方对应规则末尾追加 :not(.mo-keep *) 排除。
 * ============================================================
 */