/* ============================================================
 * NEW API 风格主题覆盖层
 * 提炼自 QuantumNous/new-api 默认主题（React + Base UI + Tailwind）
 * 设计语言：纯白背景 / 浅灰边框 / 蓝色主色 / 1rem 圆角 / 浅色侧边栏
 * 用法：在 tabler.min.css 之后引入本文件即可覆盖为 NEW API 风格
 * ============================================================ */

/* ---- 1. 设计变量（NEW API oklch → hex） ---- */
:root {
    /* 主色蓝 NEW API: oklch(0.692 0.141 243.716) */
    --na-primary: #3ea4ec;
    --na-primary-hover: #2f97e3;
    --na-primary-soft: #eef7fe;
    --na-primary-ring: #42a6ff;

    /* 侧边栏强调蓝: oklch(0.64 0.197 253.892) */
    --na-sidebar-accent: #128bff;

    /* 中性色 */
    --na-bg: #ffffff;
    --na-bg-page: #fafafa;
    --na-fg: #0a0a0a;
    --na-muted: #f5f5f5;
    --na-muted-fg: #606060;
    --na-border: #e8e8e8;

    /* 语义色 */
    --na-success: #0f9d58;
    --na-warning: #f9ab00;
    --na-danger: #e7000b;
    --na-info: #3ea4ec;

    /* 圆角（NEW API: --radius: 1rem） */
    --na-radius: 1rem;
    --na-radius-sm: 0.6rem;
    --na-radius-lg: 1.4rem;

    /* 阴影（NEW API: shadow-sm 风格，轻量柔和） */
    --na-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);

    /* Site-level semantic aliases. Keep public and admin surfaces on one vocabulary. */
    --site-accent: var(--na-primary);
    --site-accent-hover: var(--na-primary-hover);
    --site-bg: var(--na-bg-page);
    --site-surface: var(--na-bg);
    --site-fg: var(--na-fg);
    --site-muted: var(--na-muted-fg);
    --site-border: var(--na-border);
    --site-success: var(--na-success);
    --site-warning: var(--na-warning);
    --site-danger: var(--na-danger);
    --site-info: var(--na-info);
    --site-radius: 0.75rem;
    --site-radius-sm: 0.5rem;
    --site-shadow: var(--na-shadow);
}

/* ---- 2. 页面基底 ---- */
body {
    background: var(--na-bg-page);
    color: var(--na-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* ---- 3. 侧边栏：NEW API 浅色风格（bg-sidebar + border-r） ---- */
.navbar-vertical {
    background: var(--na-bg) !important;
    border-right: 1px solid var(--na-border) !important;
    box-shadow: none !important;  /* 去掉 Tabler 默认深色 inset 阴影（黑色竖线） */
    color: var(--na-fg) !important;
}
.navbar-vertical .app-brand {
    color: var(--na-fg);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--na-border);
    margin-bottom: 0.5rem;
}
.navbar-vertical .app-brand .brand-icon {
    background: var(--na-primary);
    border-radius: 0.6rem;
}
.navbar-vertical .nav-link {
    color: var(--na-muted-fg) !important;
    font-size: 14px;
    border-radius: 0.5rem;
    margin: 1px 0.6rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease;
}
.navbar-vertical .nav-link:hover {
    background: var(--na-primary-soft);
    color: var(--na-fg) !important;
}
.navbar-vertical .nav-link.active {
    background: var(--na-primary-soft) !important;
    color: var(--na-sidebar-accent) !important;
    font-weight: 600;
}
.navbar-vertical .nav-link i {
    font-size: 18px;
}
.navbar-vertical .navbar-toggler {
    border-color: var(--na-border);
}

/* ---- 4. 卡片：NEW API rounded-xl + shadow-sm ---- */
.card {
    border-radius: var(--na-radius);
    border: 1px solid var(--na-border);
    box-shadow: var(--na-shadow);
    background: var(--na-bg);
}
.card .card-header {
    border-bottom: 1px solid var(--na-border);
    padding: 1rem 1.25rem;
    background: transparent;
}
/* 卡密列表工具条吸顶：滚动表格时操作按钮常驻可见 */
#cardList .card-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--na-bg);
    box-shadow: 0 1px 0 var(--na-border);
}
.card .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--na-fg);
}
.card .card-body {
    padding: 1.25rem;
}

/* ---- 5. 顶栏 ---- */
.navbar.bg-white.border-bottom {
    background: var(--na-bg) !important;
    border-bottom: 1px solid var(--na-border) !important;
    height: 48px;
}
.page-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--na-fg);
}

/* ---- 6. 按钮 ---- */
.btn {
    border-radius: 0.55rem;
    font-size: 14px;
    transition: all 0.15s ease;
}
.btn-primary {
    background: var(--na-primary);
    border-color: var(--na-primary);
}
.btn-primary:hover {
    background: var(--na-primary-hover);
    border-color: var(--na-primary-hover);
}
.btn-outline-primary {
    color: var(--na-primary);
    border-color: var(--na-primary);
}
.btn-outline-primary:hover {
    background: var(--na-primary);
    border-color: var(--na-primary);
}
.btn-success { background: var(--na-success); border-color: var(--na-success); }
.btn-danger { background: var(--na-danger); border-color: var(--na-danger); }
.btn-sm { border-radius: 0.45rem; }

/* ---- 7. 表单 ---- */
.form-control, .form-select, .input-group-text {
    border-radius: 0.55rem;
    border-color: var(--na-border);
    font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--na-primary);
    box-shadow: 0 0 0 0.2rem rgb(62 164 236 / 0.15);
}
.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--na-muted-fg);
    margin-bottom: 0.4rem;
}

/* ---- 8. 代码块（pre/code）----
   Tabler 默认 pre 文字为白色(--tblr-light)，在浅色背景上白字看不清，需覆盖 */
pre {
    color: #24292f !important;
    background: #f6f8fa !important;
}
pre code {
    color: #24292f !important;
}
code {
    color: #d63384;
    background: rgba(213, 59, 122, 0.06);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
}

/* ---- 8.1 表格 ---- */
.table thead th {
    background: var(--na-bg-page);
    color: var(--na-muted-fg);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--na-border);
    padding: 0.7rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    font-size: 13.5px;
    border-bottom: 1px solid var(--na-border);
    padding: 0.6rem 1rem;
    vertical-align: middle;
}
.table tbody tr:hover {
    background: #fafcfe;
}

/* ---- 9. 徽章：NEW API 柔和彩色（bg-*-lt 风格） ---- */
.badge, .status-badge, .type-badge {
    border-radius: 9999px;
    padding: 0.25em 0.75em;
    font-size: 12px;
    font-weight: 500;
}
.bg-primary-lt { background: var(--na-primary-soft); color: var(--na-sidebar-accent); }
.bg-success-lt { background: #e6f4ea; color: var(--na-success); }
.bg-danger-lt { background: #fce8e6; color: var(--na-danger); }
.bg-warning-lt { background: #fef7e0; color: var(--na-warning); }
.bg-secondary-lt { background: var(--na-muted); color: var(--na-muted-fg); }
.status-badge.unused { background: #e6f4ea; color: var(--na-success); }
.status-badge.used { background: var(--na-primary-soft); color: var(--na-sidebar-accent); }
.status-badge.disabled { background: #fce8e6; color: var(--na-danger); }
.status-badge.muted { background: var(--na-muted); color: var(--na-muted-fg); }
.status-badge.shipped { background: #fff4d6; color: #936b00; }
.status-badge.expired { background: #fde8e7; color: var(--na-danger); }
.type-badge.time { background: var(--na-primary-soft); color: var(--na-sidebar-accent); }
.type-badge.count { background: #e6f4ea; color: var(--na-success); }

/* ---- 10. 统计卡片：NEW API 仪表盘风格 ---- */
.stat-card {
    background: var(--na-bg);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    box-shadow: var(--na-shadow);
    padding: 1.1rem 1.25rem;
}
.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    font-size: 20px;
}
.stat-icon.blue { background: var(--na-primary-soft); color: var(--na-sidebar-accent); }
.stat-icon.green { background: #e6f4ea; color: var(--na-success); }
.stat-icon.yellow { background: #fef7e0; color: var(--na-warning); }
.stat-icon.red { background: #fce8e6; color: var(--na-danger); }
.stat-card .stat-value { font-size: 24px; font-weight: 600; }
.stat-card .stat-label { font-size: 12px; color: var(--na-muted-fg); }

/* ---- 11. 模态框 ---- */
.modal-content {
    border-radius: var(--na-radius);
    border: 1px solid var(--na-border);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.15);
}
.modal-header { border-bottom: 1px solid var(--na-border); }
.modal-footer { border-top: 1px solid var(--na-border); }

/* ---- 12. 分页 ---- */
.page-link {
    border-radius: 0.45rem;
    border-color: var(--na-border);
    color: var(--na-muted-fg);
    font-size: 13px;
    margin: 0 2px;
}
.page-item.active .page-link {
    background: var(--na-primary);
    border-color: var(--na-primary);
}
.page-item.disabled .page-link {
    color: var(--na-border);
}

/* ---- 13. 提示框 ---- */
.alert {
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 14px;
}
.alert-success {
    background: #e6f4ea;
    border-color: #b7e1c4;
    color: #1a7f37;
}
.alert-danger {
    background: #fce8e6;
    border-color: #f5c2bf;
    color: #c5221f;
}

/* ---- 14. 输入组（前台验证） ---- */
.input-group-flat .input-group-text {
    background: var(--na-bg-page);
    border-color: var(--na-border);
    color: var(--na-muted-fg);
}

/* ---- 16. 布局修复：侧边栏 fixed 与主内容避让 ---- */
:root {
    --na-sidebar-width: 15rem;   /* 240px，与 Tabler navbar-vertical 一致 */
    --na-sidebar-width-collapsed: 4rem; /* 64px 图标栏 */
    --na-header-height: 48px;
}

/* 主内容区让出侧边栏宽度 */
.layout-main {
    margin-left: var(--na-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: none;
}

/* 侧边栏定位（Tabler 默认 fixed，需显式声明） */
.navbar-vertical {
    width: var(--na-sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    transition: transform .25s ease;
}

/* 侧边栏菜单始终展开显示（不受 Bootstrap/Tabler 移动端断点影响）
   侧边栏收起是独立方案，窄屏时用 fixed 侧边栏 + 折叠按钮，不依赖汉堡菜单 */
.navbar-vertical .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex-basis: auto;
    align-items: stretch;
}
.navbar-vertical .navbar-nav {
    flex-direction: column;
    width: 100%;
}

/* 顶栏：左侧让出侧边栏宽度，内置折叠按钮 */
.layout-navbar-fixed .navbar.bg-white.border-bottom,
.layout .navbar.bg-white.border-bottom {
    position: fixed;
    top: 0;
    left: var(--na-sidebar-width);
    right: 0;
    z-index: 1020;
    height: var(--na-header-height);
    transition: left .25s ease;
}
.page-wrapper {
    padding-top: var(--na-header-height);
}

/* 折叠按钮（顶栏左侧） */
.sidebar-toggle {
    border: 1px solid var(--na-border);
    background: var(--na-bg);
    color: var(--na-muted-fg);
    border-radius: 0.5rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    margin-right: 8px;
}
.sidebar-toggle:hover {
    background: var(--na-primary-soft);
    color: var(--na-sidebar-accent);
    border-color: var(--na-primary);
}

/* ---- 17. 侧边栏折叠态 ---- */
body.sidebar-collapsed .navbar-vertical {
    width: var(--na-sidebar-width-collapsed);
}
body.sidebar-collapsed .layout-main {
    margin-left: var(--na-sidebar-width-collapsed);
}
body.sidebar-collapsed .navbar.bg-white.border-bottom {
    left: var(--na-sidebar-width-collapsed);
}
/* 收起时品牌区收缩并居中（避免撑出侧边栏宽度、挤压下方导航项） */
body.sidebar-collapsed .app-brand {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    margin: 0;
    gap: 0;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
}
body.sidebar-collapsed .app-brand .brand-icon {
    margin: 0;
    flex-shrink: 0;
}
/* 折叠时隐藏品牌文字与导航文字，只留图标 */
body.sidebar-collapsed .app-brand span:not(.brand-icon),
body.sidebar-collapsed .navbar-vertical .nav-link span {
    display: none;
}
body.sidebar-collapsed .navbar-vertical .nav-link {
    justify-content: center;
    padding: 0.55rem;
    margin: 2px 8px;
}
body.sidebar-collapsed .navbar-vertical .nav-link i {
    font-size: 20px;
    margin-right: 0 !important;
}
/* 折叠态悬浮展开提示（title 属性兜底） */
body.sidebar-collapsed .navbar-vertical .nav-link {
    position: relative;
}

/* ---- 18. 登录页：NEW API 风格 ---- */
.login-card {
    border-radius: var(--na-radius-lg);
    border: 1px solid var(--na-border);
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.08);
}
.login-brand .brand-icon {
    background: var(--na-primary);
    border-radius: 0.75rem;
}
.login-brand h1 {
    color: var(--na-fg);
    font-weight: 600;
}
.login-brand p {
    color: var(--na-muted-fg);
}

/* ---- 19. 级联筛选菜单（按有效期分类 + 未到期子分类悬停展开） ---- */
.filter-cascader {
    position: relative;
    display: inline-block;
}
.filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--na-bg);
    border: 1px solid var(--na-border);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.10);
    padding: 4px;
    z-index: 1050;
    font-size: 13px;
}
/* 用透明伪元素覆盖按钮与菜单的边界，保证平滑交互 */
.filter-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background: transparent;
}
/* 点击展开：.filter-cascader.open 时显示菜单 */
.filter-cascader.open .filter-menu,
.filter-menu:hover {
    display: block;
}
.filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 0.4rem;
    color: var(--na-fg);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.filter-item:hover {
    background: var(--na-primary-soft);
    color: var(--na-sidebar-accent);
}
.filter-item .badge {
    font-size: 11px;
    flex-shrink: 0;
}
/* 未到期父项：hover 时右侧展开子菜单 */
.filter-item.has-children {
    position: relative;
    padding: 0;
}
.filter-item.has-children > .filter-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    width: 100%;
    border-radius: 0.4rem;
    color: var(--na-fg);
    text-decoration: none;
}
.filter-item.has-children > .filter-item-main:hover {
    background: var(--na-primary-soft);
    color: var(--na-sidebar-accent);
}
.filter-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--na-muted-fg);
    pointer-events: none;
}
.filter-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -4px;
    min-width: 160px;
    background: var(--na-bg);
    border: 1px solid var(--na-border);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    padding: 4px;
    z-index: 1060;
}
/* 未到期父项：鼠标悬停时右侧展开子菜单 */
.filter-item.has-children:hover .filter-submenu,
.filter-submenu:hover {
    display: block;
}

/* ============================================================
 * 20. 移动端适配（<992px，即 Tabler navbar-expand-lg 断点）
 * 参考 Tabler 官方响应式行为：<lg 时垂直侧边栏折叠为抽屉式菜单。
 * 桌面端固定侧边栏（≥992px）样式完全不受影响。
 * ============================================================ */
@media (max-width: 991.98px) {

    /* ---- 20.1 侧边栏：抽屉式，默认隐藏，位于顶栏下方 ---- */
    .navbar-vertical {
        width: 200px;
        max-width: 70vw;
        top: var(--na-header-height);   /* 在顶栏之下，不遮挡顶栏切换按钮 */
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease, box-shadow .25s ease;
        box-shadow: none;
    }
    /* 抽屉内容改为纵向排列：品牌置顶、菜单紧随其后。
       否则 Tabler 把 .container-fluid 当水平导航（row + align-items:center），
       在撑满高度的抽屉里会把品牌和菜单垂直居中、中间空出一大块 */
    .navbar-vertical .container-fluid {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 0;
        padding-bottom: 0;
    }
    /* 抽屉内菜单保持完整展开 */
    .navbar-vertical .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        flex-basis: auto;
        align-items: stretch;
    }
    /* 隐藏抽屉顶部无用的汉堡按钮（顶栏已有切换按钮） */
    .navbar-vertical .navbar-toggler {
        display: none;
    }
    /* 打开态：滑入 + 阴影 */
    body.sidebar-mobile-open .navbar-vertical {
        transform: translateX(0);
        box-shadow: 0 0 0 1px var(--na-border), 10px 0 32px rgb(15 23 42 / .20);
    }
    /* 遮罩层（顶栏之下、抽屉之下，顶栏保持可见可点） */
    body.sidebar-mobile-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgb(15 23 42 / .45);
        z-index: 1024;
    }
    /* 顶栏提到遮罩和抽屉之上：切换按钮始终可见、可点，解决"关不掉" */
    body.sidebar-mobile-open .navbar.bg-white.border-bottom {
        z-index: 1040;
    }
    /* 抽屉顶部关闭按钮 */
    .sidebar-mobile-close {
        display: none;
    }
    body.sidebar-mobile-open .sidebar-mobile-close {
        display: inline-flex;
        position: absolute;
        top: 0.6rem;
        right: 0.9rem;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--na-border);
        background: var(--na-bg);
        color: var(--na-muted-fg);
        border-radius: 0.5rem;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        z-index: 1035;
    }
    body.sidebar-mobile-open .sidebar-mobile-close:hover {
        background: var(--na-primary-soft);
        color: var(--na-sidebar-accent);
        border-color: var(--na-primary);
    }

    /* ---- 20.2 内容区 / 顶栏：全宽 ---- */
    .layout-main {
        margin-left: 0 !important;
    }
    .navbar.bg-white.border-bottom {
        left: 0 !important;
    }
    .page-wrapper {
        padding-top: var(--na-header-height);
    }
    .container-fluid.py-4 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* ---- 20.3 覆盖桌面折叠态，避免手机端误用图标栏 ---- */
    body.sidebar-collapsed .navbar-vertical {
        width: 200px;
        max-width: 70vw;
    }
    /* 抽屉内品牌区（卡密系统）下方留白减半 */
    .navbar-vertical .app-brand {
        padding: 0.6rem 1rem 0.375rem;
        margin-bottom: 0.25rem;
    }
    body.sidebar-collapsed .navbar-vertical .navbar-collapse {
        display: flex !important;
    }
    body.sidebar-collapsed .app-brand {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
    }
    body.sidebar-collapsed .app-brand span:not(.brand-icon),
    body.sidebar-collapsed .navbar-vertical .nav-link span {
        display: inline;
    }
    body.sidebar-collapsed .navbar-vertical .nav-link {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
        margin: 1px 0.6rem;
    }
    body.sidebar-collapsed .navbar-vertical .nav-link i {
        font-size: 18px;
        margin-right: 0.5rem !important;
    }

    /* ---- 20.4 卡密列表工具条：不吸顶，避免遮挡 ---- */
    #cardList .card-header {
        position: static;
    }

    /* ---- 20.5 筛选菜单：移动端像「批量操作」下拉框；未到期点击后展开子菜单 ---- */
    .filter-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: auto;
        min-width: 200px;
        max-width: calc(100vw - 1.5rem);
        max-height: 62vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.5rem;
        box-shadow: 0 8px 24px rgb(0 0 0 / .18);
        padding: 0.25rem 0;
        animation: kamiFilterIn .15s ease-out;
        z-index: 1055;
    }
    @keyframes kamiFilterIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .filter-menu::before {
        display: none;
    }
    /* 菜单项：与「批量操作」下拉项一致（紧凑、无间距、hover 高亮） */
    .filter-menu .filter-item,
    .filter-menu .filter-item.has-children > .filter-item-main {
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        margin-bottom: 0;
        font-size: 14px;
        white-space: nowrap;
    }
    .filter-menu .filter-item .badge {
        font-size: 11px;
    }
    /* 「未到期」父项：block 布局，与普通菜单项同高同色；
       箭头保持绝对定位（桌面级联本就如此）放在数量徽章右侧，不参与行高 */
    .filter-item.has-children {
        display: block;
        position: relative;
        padding: 0;
    }
    .filter-item.has-children > .filter-item-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0.5rem 0.75rem;
        padding-right: 1.75rem !important;   /* 给右侧箭头让位，避免徽章压到箭头 */
        font-weight: 400;
        border-radius: 0.375rem;
    }
    .filter-arrow {
        position: absolute;
        right: 0.6rem;
        top: 1.125rem;   /* 固定在首行（文字+数量）垂直中间，展开子菜单后不移动 */
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--na-muted-fg);
        transition: transform .15s ease;
    }
    .filter-item.has-children.open .filter-arrow {
        transform: translateY(-50%) rotate(90deg);
    }
    /* 未到期徽章颜色与其他项一致 */
    .filter-item.has-children > .filter-item-main .badge {
        background: var(--na-muted);
        color: var(--na-muted-fg);
    }
    /* 子菜单：与主菜单同宽，点击未到期后展开，项靠内边距缩进。
       收起时 margin/padding 必须为 0，否则会把「未到期」行撑高 */
    .filter-submenu {
        display: block;
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
        border-radius: 0.375rem;
        background: var(--na-muted);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity .15s ease;
    }
    .filter-item.has-children.open .filter-submenu {
        max-height: 380px;
        opacity: 1;
        padding: 2px 0;
    }
    .filter-submenu .filter-item {
        padding: 0.45rem 0.6rem 0.45rem 1.25rem;
        margin-bottom: 0;
        font-size: 13.5px;
        border-radius: 0.25rem;
    }
    .filter-submenu .filter-item:hover {
        background: var(--na-primary-soft);
    }

    /* ---- 20.6 统计卡片：移动端收紧间距 ---- */
    .stat-card {
        padding: 0.9rem 0.9rem;
        gap: 12px;
    }
    .stat-card .stat-value {
        font-size: 20px;
    }
    .stat-card .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    /* ---- 20.7 生成卡密按钮：全宽，方便点击 ---- */
    #generateForm .btn-primary {
        width: 100%;
    }

    /* ---- 20.8 表格：收紧单元格间距，减少横向滚动距离 ---- */
    .table thead th,
    .table tbody td {
        padding: 0.5rem 0.6rem;
    }

    /* ---- 20.9 登录页提示条：不超宽 ---- */
    .alert-fixed {
        min-width: 0;
        width: calc(100vw - 2rem);
        max-width: 420px;
    }

    /* ---- 20.10 代码块横向滚动，避免撑破页面 ---- */
    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
        word-break: break-all;
    }
}

/* ============================================================
 * 21. 深色模式：手动切换（data-theme="dark"）
 * 侧边栏「主题切换」按钮控制 <html data-theme="dark">，
 * 通过重定义 NEW API 变量让整站（含侧边栏）自动切换深浅色，
 * 并覆盖各页面内联 <style> 里硬编码的浅色。
 * 无 data-theme 属性时保持浅色（默认）。
 * ============================================================ */

    html[data-theme="dark"] {
        --na-primary: #3ea4ec;
        --na-primary-hover: #5ab1ef;
        --na-primary-soft: #192b4a;
        --na-primary-ring: #42a6ff;
        --na-sidebar-accent: #6cb4f5;

        /* moligod-inspired dark terminal: near-black canvas, one quiet
           surface layer, and restrained cool-gray separators. */
        --na-bg: #15171d;
        --na-bg-page: #0d0f13;
        --na-fg: #eceef2;
        --na-muted: #1b1e25;
        --na-muted-fg: #8f98a8;
        --na-border: #292d36;

        --na-success: #4ac26b;
        --na-warning: #e8a33d;
        --na-danger: #f0453e;
        --na-info: #3ea4ec;

        --na-shadow: 0 1px 2px 0 rgb(0 0 0 / .34), 0 8px 24px 0 rgb(0 0 0 / .08);
    }

    /* 页面基底（覆盖页面内联 body{background:#f5f7fb}） */
    [data-theme="dark"] body {
        background: var(--na-bg-page) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .layout-main,
    [data-theme="dark"] .page-wrapper {
        background: var(--na-bg-page) !important;
    }
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6 {
        color: var(--na-fg) !important;
    }

    /* 顶栏 / 侧边栏 / 标题 */
    [data-theme="dark"] .navbar.bg-white.border-bottom,
    [data-theme="dark"] .navbar-vertical {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .card {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
        box-shadow: var(--na-shadow) !important;
    }
    [data-theme="dark"] .page-title {
        color: var(--na-fg) !important;
    }

    /* 统计卡片与图标（覆盖页面内联 .stat-card/.stat-icon 硬编码浅色） */
    [data-theme="dark"] .stat-card {
        background: var(--na-bg) !important;
        box-shadow: var(--na-shadow) !important;
    }
    [data-theme="dark"] .stat-icon.blue,
    [data-theme="dark"] .stat-icon.green,
    [data-theme="dark"] .stat-icon.yellow,
    [data-theme="dark"] .stat-icon.red {
        background: var(--na-muted) !important;
    }
    [data-theme="dark"] .stat-icon.blue { color: var(--na-sidebar-accent) !important; }
    [data-theme="dark"] .stat-icon.green { color: var(--na-success) !important; }
    [data-theme="dark"] .stat-icon.yellow { color: var(--na-warning) !important; }
    [data-theme="dark"] .stat-icon.red { color: var(--na-danger) !important; }

    /* 卡密输入框 */
    [data-theme="dark"] .card-key-input {
        background: #1a2130 !important;
        border-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .card-key-input:hover {
        background: #212a3b !important;
        border-color: #374257 !important;
    }
    [data-theme="dark"] .card-key-input:focus {
        border-color: var(--na-primary) !important;
        box-shadow: 0 0 0 2px rgb(62 164 236 / .25) !important;
    }

    /* 状态/类型徽章（覆盖页面内联硬编码浅色） */
    [data-theme="dark"] .status-badge.unused { background: rgba(74,194,107,.14) !important; color: var(--na-success) !important; }
    [data-theme="dark"] .status-badge.used { background: rgba(62,164,236,.16) !important; color: var(--na-sidebar-accent) !important; }
    [data-theme="dark"] .status-badge.disabled { background: rgba(240,69,62,.14) !important; color: var(--na-danger) !important; }
    [data-theme="dark"] .type-badge.time { background: rgba(62,164,236,.16) !important; color: var(--na-sidebar-accent) !important; }
    [data-theme="dark"] .type-badge.count { background: rgba(74,194,107,.14) !important; color: var(--na-success) !important; }

    /* 表格 */
    [data-theme="dark"] .table {
        --tblr-table-bg: transparent;
        --tblr-table-color: var(--na-fg);
    }
    [data-theme="dark"] .table thead th {
        background: #111318 !important;
        color: var(--na-muted-fg) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .table tbody td {
        border-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .table tbody tr {
        background: transparent !important;
    }
    [data-theme="dark"] .table tbody tr:hover {
        background: #1a1d24 !important;
    }

    /* 复制按钮 */
    [data-theme="dark"] .copy-btn:hover {
        background: var(--na-muted) !important;
        border-color: var(--na-primary) !important;
        color: var(--na-sidebar-accent) !important;
    }

    /* 表单 */
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select,
    [data-theme="dark"] .input-group-text {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .form-control::placeholder {
        color: var(--na-muted-fg) !important;
    }
    [data-theme="dark"] .form-label {
        color: var(--na-muted-fg) !important;
    }

    /* 模态框 / 下拉菜单 */
    [data-theme="dark"] .modal-content {
        background: var(--na-bg) !important;
    }
    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-footer {
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .dropdown-menu {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .dropdown-item {
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .dropdown-item:hover {
        background: var(--na-muted) !important;
    }

    /* 分页 */
    [data-theme="dark"] .page-link {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
        color: var(--na-muted-fg) !important;
    }
    [data-theme="dark"] .page-item.active .page-link {
        background: var(--na-primary) !important;
        border-color: var(--na-primary) !important;
        color: #fff !important;
    }
    [data-theme="dark"] .card-footer {
        background: var(--na-bg) !important;
        border-top-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .btn-outline-secondary {
        color: var(--na-muted-fg) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .btn-outline-secondary:hover {
        color: var(--na-fg) !important;
        background: var(--na-muted) !important;
    }

    /* 筛选级联菜单 */
    [data-theme="dark"] .filter-menu,
    [data-theme="dark"] .filter-submenu {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .filter-item {
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] .filter-item:hover {
        background: var(--na-primary-soft) !important;
    }

    /* 代码块 */
    [data-theme="dark"] pre {
        background: #1a2130 !important;
        color: #d0d7e0 !important;
    }
    [data-theme="dark"] code {
        background: rgba(62,164,236,.12) !important;
        color: var(--na-sidebar-accent) !important;
    }

    /* 登录页 / 头像 / 切换按钮 */
    [data-theme="dark"] .login-card {
        background: var(--na-bg) !important;
    }
    [data-theme="dark"] .avatar.bg-primary-lt {
        background: var(--na-primary-soft) !important;
        color: var(--na-sidebar-accent) !important;
    }
    [data-theme="dark"] .sidebar-toggle,
    [data-theme="dark"] .sidebar-mobile-close {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
        color: var(--na-muted-fg) !important;
    }
    [data-theme="dark"] .sidebar-toggle:hover {
        background: var(--na-primary-soft) !important;
        color: var(--na-sidebar-accent) !important;
        border-color: var(--na-primary) !important;
    }

    /* 徽章 lt 色跟随变量 */
    [data-theme="dark"] .badge.bg-primary-lt { background: var(--na-primary-soft) !important; color: var(--na-sidebar-accent) !important; }
    [data-theme="dark"] .badge.bg-success-lt { background: rgba(74,194,107,.14) !important; color: var(--na-success) !important; }
    [data-theme="dark"] .badge.bg-danger-lt { background: rgba(240,69,62,.14) !important; color: var(--na-danger) !important; }
    [data-theme="dark"] .badge.bg-warning-lt { background: rgba(232,163,61,.14) !important; color: var(--na-warning) !important; }
    [data-theme="dark"] .badge.bg-secondary-lt { background: var(--na-muted) !important; color: var(--na-muted-fg) !important; }

    /* 勾选框 */
    [data-theme="dark"] .form-check-input {
        background-color: var(--na-muted) !important;
        border-color: var(--na-border) !important;
    }
    [data-theme="dark"] .form-check-input:checked {
        background-color: var(--na-primary) !important;
        border-color: var(--na-primary) !important;
    }
    [data-theme="dark"] .form-check-label {
        color: var(--na-fg) !important;
    }
    /* 分页容器 */
    [data-theme="dark"] .status-badge.shipped,
    [data-theme="dark"] .status-badge.expired,
    [data-theme="dark"] .platform-badge.platform-any,
    [data-theme="dark"] .platform-badge.platform-pc,
    [data-theme="dark"] .platform-badge.platform-mobile,
    [data-theme="dark"] .platform-badge.platform-single {
        background: var(--na-muted) !important;
        color: var(--na-fg) !important;
    }

    [data-theme="dark"] .pagination {
        background: transparent !important;
    }

/* Shared badge language for pages that still carry local markup. */
.platform-badge { display: inline-block; padding: 0.25em 0.75em; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.platform-badge.platform-any { background: var(--na-muted); color: var(--na-muted-fg); }
.platform-badge.platform-pc { background: var(--na-primary-soft); color: var(--na-sidebar-accent); }
.platform-badge.platform-mobile { background: #e7f6ec; color: var(--na-success); }
.platform-badge.platform-single { background: #fff4d6; color: #936b00; }

@media (max-width: 991.98px) {
    #cardList .table-responsive { overflow: visible; }
    #cardList table thead { display: none; }
    #cardList table, #cardList tbody, #cardList tr, #cardList td { display: block; width: 100%; }
    #cardList tbody tr { margin: 0.75rem; border: 1px solid var(--na-border); border-radius: var(--na-radius-sm); background: var(--na-bg); }
    #cardList tbody td { border: 0; padding: 0.45rem 0.75rem; }
    #cardList tbody td:first-child { display: none; }
    #cardList tbody td:last-child { text-align: left !important; border-top: 1px solid var(--na-border); padding-top: 0.65rem; }
    #cardList .row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
}
.form-section-label {
    color: var(--na-muted-fg);
    font-size: 12px;
    font-weight: 600;
    padding-top: 0.2rem;
    border-top: 1px solid var(--na-border);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
    /* 输入框 */
    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] input[type="number"],
    [data-theme="dark"] input[type="password"],
    [data-theme="dark"] input[type="search"],
    [data-theme="dark"] select,
    [data-theme="dark"] textarea {
        background-color: var(--na-muted) !important;
        border-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
        color: var(--na-muted-fg) !important;
    }

/* ============================================================
 * 22. 暗色模式统一层
 * 以实时行情「利润列表」为暗色视觉基准：
 * 页面画布 #0b0d11、内容行 #0f1115、表头 #090b0f、悬停层 #181b22。
 * 所有后台页面和公共购买页只通过这组语义变量取色，避免控件各自发灰或发白。
 * ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    --na-bg-page: #0b0d11;
    --na-bg: #0f1115;
    --na-muted: #181b22;
    --na-fg: #f1f3f4;
    --na-muted-fg: #9aa0a6;
    --na-border: #22262e;
    --na-table-head: #090b0f;
    --na-border-strong: #242831;

    --na-primary-soft: #192b4a;
    --na-primary: #3ea4ec;
    --na-primary-hover: #5ab1ef;
    --na-sidebar-accent: #6cb4f5;
    --na-success: #4ac26b;
    --na-warning: #e8a33d;
    --na-danger: #f0453e;
    --na-info: #3ea4ec;
    --na-shadow: 0 1px 3px rgb(0 0 0 / .42), 0 8px 24px rgb(0 0 0 / .12);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .layout-main,
html[data-theme="dark"] .page-wrapper {
    background: var(--na-bg-page) !important;
    color: var(--na-fg) !important;
}

/* 页面内联浅色值的公共组件兜底 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
    background-color: var(--na-bg) !important;
    border-color: var(--na-border) !important;
    color: var(--na-fg) !important;
    box-shadow: var(--na-shadow) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: transparent !important;
    border-color: var(--na-border) !important;
    color: var(--na-fg) !important;
}

/* Tabler/页面内联的灰字和黑字统一到可读的前景层级 */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .kv-label,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-card .stat-label {
    color: var(--na-muted-fg) !important;
}
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .card-key-text,
html[data-theme="dark"] .duration-badge,
html[data-theme="dark"] .stat-card .stat-value {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .text-info {
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .text-success {
    color: #73dc90 !important;
}
html[data-theme="dark"] .text-warning {
    color: #f4bd62 !important;
}
html[data-theme="dark"] .text-danger {
    color: #ff7770 !important;
}
html[data-theme="dark"] .card-key-text:hover {
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .stat-num:not(.text-primary):not(.text-success):not(.text-danger) {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] [style*="color:#6c757d"],
html[data-theme="dark"] [style*="color: #6c757d"],
html[data-theme="dark"] [style*="color:#5f6368"],
html[data-theme="dark"] [style*="color: #5f6368"] {
    color: var(--na-muted-fg) !important;
}

/* 表格：普通表格与利润表共享同一层级；利润表页面的精确规则可继续覆盖。 */
html[data-theme="dark"] .table {
    --tblr-table-bg: transparent;
    --tblr-table-color: var(--na-fg);
    --tblr-table-border-color: var(--na-border);
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .table thead th {
    background: var(--na-table-head) !important;
    color: var(--na-muted-fg) !important;
    border-color: var(--na-border-strong) !important;
}
html[data-theme="dark"] .table tbody td {
    background: var(--na-bg) !important;
    color: var(--na-fg) !important;
    border-color: var(--na-border) !important;
}
html[data-theme="dark"] .table tbody tr:hover td {
    background: var(--na-muted) !important;
}
html[data-theme="dark"] .table-active > td,
html[data-theme="dark"] .table-active > th {
    background: color-mix(in srgb, var(--na-primary) 12%, var(--na-bg)) !important;
}

/* 表单控件：包含原生 input/select/textarea，避免只修到 Bootstrap 类名。 */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--na-bg) !important;
    border-color: var(--na-border) !important;
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .form-control:hover,
html[data-theme="dark"] .form-select:hover,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] textarea:hover {
    border-color: color-mix(in srgb, var(--na-primary) 55%, var(--na-border)) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--na-primary) !important;
    box-shadow: 0 0 0 3px rgb(62 164 236 / .22) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
    color: var(--na-muted-fg) !important;
    opacity: 1;
}
html[data-theme="dark"] select option {
    background: var(--na-bg);
    color: var(--na-fg);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled {
    background: var(--na-muted) !important;
    color: var(--na-muted-fg) !important;
    border-color: var(--na-border) !important;
    opacity: .72;
}
html[data-theme="dark"] .form-check-input {
    background-color: var(--na-muted) !important;
    border-color: var(--na-border-strong) !important;
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--na-primary) !important;
    border-color: var(--na-primary) !important;
}
html[data-theme="dark"] .form-check-label {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background: var(--na-border-strong);
}
html[data-theme="dark"] .form-range::-moz-range-track {
    background: var(--na-border-strong);
}
html[data-theme="dark"] .form-range::-webkit-slider-thumb,
html[data-theme="dark"] .form-range::-moz-range-thumb {
    background: var(--na-primary);
    border-color: var(--na-bg);
}

/* 按钮：轮廓按钮在暗底上保持明确的文字、边界和悬停反馈。 */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-ghost-secondary {
    background: var(--na-muted) !important;
    border-color: var(--na-border-strong) !important;
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-ghost-secondary:hover {
    background: color-mix(in srgb, var(--na-primary) 16%, var(--na-muted)) !important;
    border-color: var(--na-primary) !important;
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .btn-outline-primary {
    background: transparent !important;
    border-color: var(--na-primary) !important;
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus-visible {
    background: var(--na-primary) !important;
    border-color: var(--na-primary) !important;
    color: #071018 !important;
}
html[data-theme="dark"] .btn-outline-success {
    background: transparent !important;
    border-color: var(--na-success) !important;
    color: #73dc90 !important;
}
html[data-theme="dark"] .btn-outline-success:hover {
    background: var(--na-success) !important;
    color: #07120b !important;
}
html[data-theme="dark"] .btn-outline-warning {
    background: transparent !important;
    border-color: var(--na-warning) !important;
    color: #f4bd62 !important;
}
html[data-theme="dark"] .btn-outline-warning:hover {
    background: var(--na-warning) !important;
    color: #171107 !important;
}
html[data-theme="dark"] .btn-outline-danger {
    background: transparent !important;
    border-color: var(--na-danger) !important;
    color: #ff7770 !important;
}
html[data-theme="dark"] .btn-outline-danger:hover {
    background: var(--na-danger) !important;
    color: #1a0807 !important;
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

/* 徽章和提示框采用语义色的暗色 tint，不再把所有状态染成同一种灰。 */
html[data-theme="dark"] .bg-primary-lt,
html[data-theme="dark"] .badge.bg-primary-lt {
    background: color-mix(in srgb, var(--na-primary) 18%, var(--na-bg)) !important;
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .bg-success-lt,
html[data-theme="dark"] .badge.bg-success-lt {
    background: color-mix(in srgb, var(--na-success) 16%, var(--na-bg)) !important;
    color: #73dc90 !important;
}
html[data-theme="dark"] .bg-warning-lt,
html[data-theme="dark"] .badge.bg-warning-lt {
    background: color-mix(in srgb, var(--na-warning) 18%, var(--na-bg)) !important;
    color: #f4bd62 !important;
}
html[data-theme="dark"] .bg-danger-lt,
html[data-theme="dark"] .badge.bg-danger-lt {
    background: color-mix(in srgb, var(--na-danger) 16%, var(--na-bg)) !important;
    color: #ff7770 !important;
}
html[data-theme="dark"] .bg-info-lt,
html[data-theme="dark"] .badge.bg-info-lt {
    background: color-mix(in srgb, var(--na-info) 18%, var(--na-bg)) !important;
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .bg-secondary-lt,
html[data-theme="dark"] .badge.bg-secondary-lt,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light-subtle,
html[data-theme="dark"] .bg-body-tertiary {
    background: var(--na-muted) !important;
    color: var(--na-muted-fg) !important;
    border-color: var(--na-border) !important;
}
html[data-theme="dark"] .category-tuncang,
html[data-theme="dark"] .status-badge.shipped {
    background: color-mix(in srgb, var(--na-warning) 18%, var(--na-bg)) !important;
    color: #f4bd62 !important;
}
html[data-theme="dark"] .category-saohuo {
    background: color-mix(in srgb, var(--na-success) 16%, var(--na-bg)) !important;
    color: #73dc90 !important;
}
html[data-theme="dark"] .alert-success {
    background: color-mix(in srgb, var(--na-success) 14%, var(--na-bg)) !important;
    border-color: color-mix(in srgb, var(--na-success) 45%, var(--na-border)) !important;
    color: #73dc90 !important;
}
html[data-theme="dark"] .alert-warning {
    background: color-mix(in srgb, var(--na-warning) 15%, var(--na-bg)) !important;
    border-color: color-mix(in srgb, var(--na-warning) 45%, var(--na-border)) !important;
    color: #f4bd62 !important;
}
html[data-theme="dark"] .alert-danger {
    background: color-mix(in srgb, var(--na-danger) 14%, var(--na-bg)) !important;
    border-color: color-mix(in srgb, var(--na-danger) 45%, var(--na-border)) !important;
    color: #ff7770 !important;
}
html[data-theme="dark"] .alert-secondary {
    background: var(--na-muted) !important;
    border-color: var(--na-border) !important;
    color: var(--na-fg) !important;
}

/* 代码、下拉菜单和导航上的浏览器/框架默认色也要进入同一套主题。 */
html[data-theme="dark"] pre {
    background: var(--na-table-head) !important;
    color: #d9dee7 !important;
    border-color: var(--na-border) !important;
}
html[data-theme="dark"] pre code {
    color: #d9dee7 !important;
}
html[data-theme="dark"] code {
    background: color-mix(in srgb, var(--na-primary) 14%, var(--na-bg)) !important;
    color: var(--na-sidebar-accent) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--na-muted) !important;
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .avatar.bg-primary-lt {
    background: var(--na-primary-soft) !important;
    color: var(--na-sidebar-accent) !important;
}

/* 保持公共页面与后台相同的暗色画布与控件层级。 */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-vertical,
html[data-theme="dark"] .navbar.bg-white.border-bottom {
    background: var(--na-bg) !important;
    border-color: var(--na-border) !important;
}
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .sidebar-mobile-close {
    background: var(--na-bg) !important;
    border-color: var(--na-border) !important;
    color: var(--na-muted-fg) !important;
}
html[data-theme="dark"] .sidebar-toggle:hover,
html[data-theme="dark"] .sidebar-mobile-close:hover {
    background: var(--na-muted) !important;
    border-color: var(--na-primary) !important;
    color: var(--na-sidebar-accent) !important;
}

/* ============================================================
 * 23. 暗色文字可读性兜底
 * Tabler 同时使用 --tblr-* 与 --bs-* 变量；旧页面还会在片段内
 * 注入 .form-text / .stat-value / 内联颜色。统一在这里收口，避免
 * 页面出现“背景已变暗、文字仍是浅色主题深蓝”的低对比度状态。
 * ============================================================ */
html[data-theme="dark"] {
    --tblr-body-color: var(--na-fg);
    --tblr-body-color-rgb: 241, 243, 244;
    --tblr-body-bg: var(--na-bg-page);
    --tblr-body-bg-rgb: 11, 13, 17;
    --tblr-emphasis-color: var(--na-fg);
    --tblr-emphasis-color-rgb: 241, 243, 244;
    --tblr-secondary-color: var(--na-muted-fg);
    --tblr-secondary-color-rgb: 154, 160, 166;
    --tblr-tertiary-color: var(--na-muted-fg);
    --tblr-tertiary-color-rgb: 154, 160, 166;
    --tblr-heading-color: var(--na-fg);
    --tblr-border-color: var(--na-border);
    --tblr-secondary-bg: var(--na-muted);
    --tblr-tertiary-bg: var(--na-muted);
    --tblr-card-bg: var(--na-bg);
    --tblr-card-border-color: var(--na-border);
    --tblr-link-color: var(--na-sidebar-accent);
    --tblr-link-hover-color: #9ad0fa;

    --bs-body-color: var(--na-fg);
    --bs-body-color-rgb: 241, 243, 244;
    --bs-body-bg: var(--na-bg-page);
    --bs-body-bg-rgb: 11, 13, 17;
    --bs-emphasis-color: var(--na-fg);
    --bs-secondary-color: var(--na-muted-fg);
    --bs-tertiary-color: var(--na-muted-fg);
    --bs-heading-color: var(--na-fg);
    --bs-border-color: var(--na-border);
    --bs-secondary-bg: var(--na-muted);
    --bs-tertiary-bg: var(--na-muted);
    --bs-link-color: var(--na-sidebar-accent);
    --bs-link-hover-color: #9ad0fa;
}

html[data-theme="dark"] body {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] a:not(.btn):not(.nav-link) {
    color: var(--na-sidebar-accent);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):hover {
    color: #9ad0fa;
}
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .description,
html[data-theme="dark"] .hint {
    color: var(--na-muted-fg) !important;
}
html[data-theme="dark"] .stat-num,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .stat-card .stat-value,
html[data-theme="dark"] .card-key-text,
html[data-theme="dark"] .duration-badge {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] .stat-num.text-primary,
html[data-theme="dark"] .stat-value.text-primary,
html[data-theme="dark"] .text-primary { color: var(--na-sidebar-accent) !important; }
html[data-theme="dark"] .stat-num.text-success,
html[data-theme="dark"] .stat-value.text-success,
html[data-theme="dark"] .text-success { color: #73dc90 !important; }
html[data-theme="dark"] .stat-num.text-warning,
html[data-theme="dark"] .stat-value.text-warning,
html[data-theme="dark"] .text-warning { color: #f4bd62 !important; }
html[data-theme="dark"] .stat-num.text-danger,
html[data-theme="dark"] .stat-value.text-danger,
html[data-theme="dark"] .text-danger { color: #ff7770 !important; }

/* 动态命名确认面板的普通文本也明确继承正文层级。 */
html[data-theme="dark"] #nc-list,
html[data-theme="dark"] #nc-list .fw-semibold,
html[data-theme="dark"] #nc-list .text-truncate {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] #nc-list .text-muted {
    color: var(--na-muted-fg) !important;
}
html[data-theme="dark"] #nc-list > div > span:first-child,
html[data-theme="dark"] #nc-list > div > span[style*="min-width"],
html[data-theme="dark"] #nc-list > div > span[style*="font-weight"] {
    color: var(--na-fg) !important;
}

/* 原生文件选择器在深色表面上不再显示突兀的白色按钮。 */
html[data-theme="dark"] input[type="file"] {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background: var(--na-muted) !important;
    color: var(--na-fg) !important;
    border: 0;
    border-right: 1px solid var(--na-border);
}

/* 兼容历史页面留下的常见内联浅色值。 */
html[data-theme="dark"] [style*="color:#202124"],
html[data-theme="dark"] [style*="color: #202124"],
html[data-theme="dark"] [style*="color:#1b2a3d"],
html[data-theme="dark"] [style*="color: #1b2a3d"],
html[data-theme="dark"] [style*="color:#182433"],
html[data-theme="dark"] [style*="color: #182433"],
html[data-theme="dark"] [style*="color:#2c3e50"],
html[data-theme="dark"] [style*="color: #2c3e50"] {
    color: var(--na-fg) !important;
}
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#6c757d"],
html[data-theme="dark"] [style*="color: #6c757d"],
html[data-theme="dark"] [style*="color:#5f6368"],
html[data-theme="dark"] [style*="color: #5f6368"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"] {
    color: var(--na-muted-fg) !important;
}