/* ============================================================
 * 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);
}

/* ---- 2. 页面基底 ---- */
body {
    background: var(--na-bg-page);
    color: var(--na-fg);
    font-family: 'Public Sans', -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); }
.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: margin-left .25s ease;
}

/* 侧边栏定位（Tabler 默认 fixed，需显式声明） */
.navbar-vertical {
    width: var(--na-sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    transition: width .25s ease, 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: max-height .2s ease, 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. 深色模式：跟随系统（prefers-color-scheme: dark）
 * 通过重定义 NEW API 变量让整站（含侧边栏）自动切换深浅色，
 * 并覆盖各页面内联 <style> 里硬编码的浅色。
 * 系统为浅色时本块不生效，桌面端浅色体验完全不变。
 * ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --na-primary: #3ea4ec;
        --na-primary-hover: #5ab1ef;
        --na-primary-soft: #1b2536;
        --na-primary-ring: #42a6ff;
        --na-sidebar-accent: #6cb4f5;

        --na-bg: #161b24;
        --na-bg-page: #0e1219;
        --na-fg: #e7eaee;
        --na-muted: #1e2530;
        --na-muted-fg: #93a0b4;
        --na-border: #262e3b;

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

        --na-shadow: 0 1px 2px 0 rgb(0 0 0 / .35);
    }

    /* 页面基底（覆盖页面内联 body{background:#f5f7fb}） */
    body {
        background: var(--na-bg-page) !important;
        color: var(--na-fg) !important;
    }

    /* 顶栏 / 侧边栏 / 标题 */
    .navbar.bg-white.border-bottom,
    .navbar-vertical {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
    }
    .page-title {
        color: var(--na-fg) !important;
    }

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

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

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

    /* 表格 */
    .table thead th {
        background: var(--na-bg-page) !important;
        color: var(--na-muted-fg) !important;
        border-color: var(--na-border) !important;
    }
    .table tbody td {
        border-color: var(--na-border) !important;
        color: var(--na-fg) !important;
    }
    .table tbody tr:hover {
        background: #1b2230 !important;
    }

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

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

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

    /* 分页 */
    .page-link {
        background: var(--na-bg) !important;
        border-color: var(--na-border) !important;
        color: var(--na-muted-fg) !important;
    }
    .page-item.active .page-link {
        background: var(--na-primary) !important;
        border-color: var(--na-primary) !important;
        color: #fff !important;
    }

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

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

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

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