/* ==========================================================================
   卡密管理系统 · 统一设计系统
   ==========================================================================
   这一版把原来散落在各页面行内样式里的颜色、圆角、阴影、按钮渐变全部收敛到
   一处，目标是「一眼看成同一个系统」：

     1. 设计令牌（--kami-*）：颜色、圆角、阴影、间距只在这里定义；
     2. 组件层：导航、页头、卡片、表格、按钮、表单、弹窗、徽章、分页；
     3. 兼容层：旧类名（.stats-card / .table-database / .user-management-* …）
        全部保留并重新指向新令牌，页面即使没改到也不会花；
     4. 深色主题：自定义令牌 + Bootstrap 令牌一起覆盖（.data-theme="dark"）。

   同时去掉了三类「看着不精致」的效果：
     · 卡片 hover 整体位移 5px（一屏十几张卡同时漂移，很晕）
     · 表格行 hover 缩放 1.01（会造成文字抖动/错位）
     · 按钮涟漪、状态徽章呼吸、渐变底纹（视觉噪音）
   ========================================================================== */

/* ===================== 1. 设计令牌：浅色 ===================== */
:root {
    /* 页面与表面 */
    --kami-bg:            #f4f6fb;
    --kami-surface:       #ffffff;
    --kami-surface-2:     #f7f9fc;
    --kami-surface-3:     #eef1f8;
    --kami-border:        #e5e8f0;
    --kami-border-strong: #d5dae6;

    /* 文字 */
    --kami-text:          #1c2230;
    --kami-text-2:        #5a6478;
    --kami-text-3:        #8b94a7;

    /* 主色与语义色 */
    --kami-primary:       #4a6bff;
    --kami-primary-dark:  #3550d6;
    --kami-primary-soft:  #eef1ff;
    --kami-success:       #12a670;
    --kami-success-soft:  #e6f7f0;
    --kami-danger:        #dc4a3d;
    --kami-danger-soft:   #fdeceb;
    --kami-warning:       #b97900;
    --kami-warning-soft:  #fff5e3;
    --kami-info:          #1b8aa8;
    --kami-info-soft:     #e8f6fa;

    /* 圆角 / 阴影 / 焦点环 */
    --kami-radius-sm: 8px;
    --kami-radius:    12px;
    --kami-radius-lg: 16px;
    --kami-shadow-1:  0 1px 2px rgba(20, 28, 45, .06);
    --kami-shadow-2:  0 6px 18px rgba(20, 28, 45, .07);
    --kami-ring:      0 0 0 3px rgba(74, 107, 255, .18);
    --kami-nav-h:     60px;

    /* 兼容旧变量名（老样式里引用过） */
    --primary-color:   var(--kami-primary);
    --secondary-color: var(--kami-text-2);
    --success-color:   var(--kami-success);
    --danger-color:    var(--kami-danger);
    --warning-color:   var(--kami-warning);
    --info-color:      var(--kami-info);
    --light-color:     var(--kami-surface-2);
    --dark-color:      var(--kami-text);
    --card-shadow:     var(--kami-shadow-1);
    --card-hover-shadow: var(--kami-shadow-2);
    --border-radius:   var(--kami-radius);

    /* 让 Bootstrap 的工具类和组件也跟着走同一套色板
       （.bg-success / .text-primary / .border-primary 等用的是 *-rgb 变量） */
    --bs-primary: #4a6bff;      --bs-primary-rgb: 74, 107, 255;
    --bs-success: #12a670;      --bs-success-rgb: 18, 166, 112;
    --bs-danger:  #dc4a3d;      --bs-danger-rgb: 220, 74, 61;
    --bs-warning: #e0a800;      --bs-warning-rgb: 224, 168, 0;
    --bs-info:    #1b8aa8;      --bs-info-rgb: 27, 138, 168;
    --bs-link-color: #3550d6;
    --bs-link-color-rgb: 53, 80, 214;
    --bs-link-hover-color: #2a41b0;
    --bs-body-bg: #f4f6fb;
    --bs-body-color: #1c2230;
    --bs-border-color: #e5e8f0;
    --bs-secondary-color: #5a6478;
    --bs-tertiary-bg: #f7f9fc;
    --bs-emphasis-color: #1c2230;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
}

/* ===================== 2. 基础排版 ===================== */
body {
    background-color: var(--kami-bg);
    color: var(--kami-text);
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: .9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

main { padding-bottom: 2.5rem; }

h1, h2, h3, h4, h5, h6 { color: var(--kami-text); font-weight: 600; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* 数字统一等宽，统计值不会随位数跳动 */
.font-monospace, code, pre, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
code {
    background-color: var(--kami-primary-soft);
    color: var(--kami-primary-dark);
    padding: .1em .4em;
    border-radius: 6px;
    font-size: .875em;
}

::selection { background: rgba(74, 107, 255, .18); }

/* 顶部加载进度条：只保留一条细线，去掉原来的淡出动画噪音 */
#progress-container {
    height: 3px;
    width: 100%;
    background-color: transparent;
    position: fixed;
    top: 0; left: 0;
    z-index: 1080;
    pointer-events: none;
}
#progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--kami-primary), var(--kami-info));
    transition: width .25s ease;
}

/* ===================== 3. 顶部导航 ===================== */
.app-nav {
    position: sticky;
    top: 0;
    z-index: 1040;
    /* 先给一个实色兜底：color-mix() 在不支持的浏览器里整条声明会被丢弃，
       如果只写 color-mix 就会出现「导航没有背景、内容穿透」的难看效果 */
    background: var(--kami-surface);
    background: color-mix(in srgb, var(--kami-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--kami-border);
}
.app-nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--kami-nav-h);
    flex-wrap: wrap;
}

/* 品牌区 */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: var(--kami-text);
    font-weight: 700;
    letter-spacing: .2px;
    flex: 0 0 auto;
}
.app-brand:hover { color: var(--kami-text); }
.app-brand-mark {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--kami-primary), #6f8bff);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(74, 107, 255, .30);
}
.app-brand-text { display: flex; flex-direction: column; line-height: 1.15; font-size: 1rem; }
.app-brand-text small {
    font-size: .68rem;
    font-weight: 500;
    color: var(--kami-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* 小屏菜单按钮 */
.app-nav-toggle {
    margin-left: auto;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kami-border);
    background: var(--kami-surface);
    color: var(--kami-text-2);
    border-radius: 10px;
    font-size: 1.15rem;
    line-height: 1;
}
.app-nav-toggle:hover { background: var(--kami-surface-2); }

.app-nav-menu {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* 桌面端不走折叠：Bootstrap 的 .collapse:not(.show){display:none} 特异性高于 .app-nav-menu，
   不显式覆盖的话导航在宽屏上会直接消失（不依赖 navbar-expand-* 就是想甩开这套） */
@media (min-width: 992px) {
    .app-nav-menu.collapse:not(.show) { display: flex !important; }
}

/* 导航链接：分段式胶囊，选中态用浅色底 + 主色字（原来是一条橙色渐变，和主题无关） */
.app-nav-links {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    padding: .2rem;
    border-radius: 12px;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 9px;
    color: var(--kami-text-2);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.nav-btn i { font-size: .95rem; opacity: .9; }
.nav-btn:hover { background: var(--kami-surface-3); color: var(--kami-text); }
.nav-btn.active {
    background: var(--kami-primary-soft);
    color: var(--kami-primary-dark);
    font-weight: 600;
}
.nav-btn.active i { opacity: 1; }

/* 用户区 */
.app-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.app-user-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--kami-text-2);
    font-size: .85rem;
}
.app-user-actions { display: inline-flex; align-items: center; gap: .375rem; }
.app-role {
    display: inline-flex;
    align-items: center;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: var(--kami-surface-3);
    color: var(--kami-text-2);
}
.app-role.is-admin { background: var(--kami-danger-soft); color: var(--kami-danger); }
.app-role.is-agent { background: var(--kami-warning-soft); color: var(--kami-warning); }

/* ===================== 4. 页头 / 工具栏 ===================== */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .2px;
}
.page-title i { color: var(--kami-primary); font-size: 1.15rem; }
.page-title .badge { font-size: .75rem; font-weight: 600; }
.page-sub {
    margin: .3rem 0 0;
    color: var(--kami-text-3);
    font-size: .85rem;
}
.page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* 卡片内的搜索工具栏 */
.toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
/* 放在卡片头右侧的搜索栏：宽屏时右对齐、窄屏时占满整行 */
.search-toolbar { flex: 1 1 300px; max-width: 560px; margin-left: auto; }
@media (max-width: 991.98px) { .search-toolbar { margin-left: 0; max-width: none; } }
.search-field { position: relative; flex: 1 1 260px; min-width: 200px; }
.search-field .form-control { padding-left: 2.35rem; }
.search-field > i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kami-text-3);
    pointer-events: none;
}
.search-field:focus-within > i { color: var(--kami-primary); }

/* ===================== 5. 卡片 ===================== */
.card {
    --bs-card-border-color: var(--kami-border);
    background-color: var(--kami-surface);
    border: 1px solid var(--kami-border);
    border-radius: var(--kami-radius-lg);
    box-shadow: var(--kami-shadow-1);
    color: var(--kami-text);
}
/* 取消全局「卡片悬浮上移」——一屏多张卡时不希望整块漂移 */
.card:hover { transform: none; box-shadow: var(--kami-shadow-1); }

.card-header {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--kami-border);
    font-weight: 600;
}
/* 只有「没写过背景工具类」的卡片头才用中性底色，避免盖掉 .bg-warning 这类语义色 */
.card-header:not([class*="bg-"]) { background-color: var(--kami-surface-2); }
.card-header .card-title,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2px;
}
.card-header i { color: var(--kami-primary); }
.card-header.mb-0, .card-header h5.mb-0, .card-header h4.mb-0 { margin-bottom: 0 !important; }

.card-body { padding: 1.15rem; }
.card-footer {
    padding: .8rem 1.15rem;
    background-color: var(--kami-surface-2);
    border-top: 1px solid var(--kami-border);
}
.card-title { margin-bottom: 0; }

/* ===================== 6. 统计卡 ===================== */
.stats-card {
    border-radius: var(--kami-radius-lg);
    border: 1px solid var(--kami-border);
    box-shadow: var(--kami-shadow-1);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.stats-card:hover { border-color: var(--kami-border-strong); box-shadow: var(--kami-shadow-2); }
.stats-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.15rem;
}
.stats-icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: .55rem;
    font-size: 1rem;
    background: var(--kami-primary-soft);
    color: var(--kami-primary);
}
.stats-icon.is-success { background: var(--kami-success-soft); color: var(--kami-success); }
.stats-icon.is-danger  { background: var(--kami-danger-soft);  color: var(--kami-danger); }
.stats-icon.is-warning { background: var(--kami-warning-soft); color: var(--kami-warning); }
.stats-icon.is-info    { background: var(--kami-info-soft);    color: var(--kami-info); }

.stats-title {
    font-size: .8rem;
    font-weight: 500;
    color: var(--kami-text-3);
    margin: 0;
}
.stats-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--kami-text);
    font-variant-numeric: tabular-nums;
}
.stats-description { font-size: .78rem; color: var(--kami-text-3); }
.stats-percentage { color: var(--kami-text-2); font-weight: 600; }

.status-active   { color: var(--kami-success); }
.status-inactive { color: var(--kami-danger); }
.status-expired  { color: var(--kami-warning); }

/* ===================== 7. 表格 ===================== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kami-text);
    --bs-table-border-color: var(--kami-border);
    margin-bottom: 0;
    font-size: .875rem;
}
.table > thead th {
    background-color: var(--kami-surface-2);
    color: var(--kami-text-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border-bottom: 1px solid var(--kami-border);
    padding: .7rem .9rem;
}
.table > tbody td {
    padding: .7rem .9rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--kami-border);
}
.table > tbody tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--kami-surface-2);
    background-color: var(--kami-surface-2);
    color: var(--kami-text);
}
/* 行 hover 不再缩放，避免文字抖动 */
.table-database tr:hover, .user-management-table tr:hover { transform: none; box-shadow: none; }

.table-responsive { border-radius: 0; }
.table code { background: var(--kami-surface-3); color: var(--kami-text-2); }

/* 操作列：统一按钮组，右对齐、不换行 */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
    flex-wrap: nowrap;
}
.table-actions form { display: inline-flex; margin: 0; }
.table td .table-actions { white-space: nowrap; }
/* 旧类名兼容（用户管理里曾用 .user-management-actions，语义与 .table-actions 相同） */
.user-management-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
    flex-wrap: wrap;
}
.user-management-actions form { display: inline-flex; margin: 0; }

/* 兼容旧类名：.table-database / .user-management-table 指向同一套样式 */
.table-database, .user-management-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    border-radius: 0;
}
.table-database > thead th,
.user-management-table > thead th {
    position: static;
    background-color: var(--kami-surface-2);
    color: var(--kami-text-2);
    text-transform: none;
    letter-spacing: .02em;
    font-size: .78rem;
    font-weight: 600;
    text-align: left;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--kami-border);
}
.user-management-table > tbody td,
.table-database > tbody td {
    padding: .7rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--kami-border);
    transition: none;
}
.user-management-table > tbody tr:nth-child(even),
.table-database > tbody tr:nth-child(even) { background-color: transparent; }
.user-management-table > tbody tr:hover,
.table-database > tbody tr:hover { background-color: var(--kami-surface-2); }

/* ===================== 8. 按钮 ===================== */
.btn {
    --bs-btn-border-radius: 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .9rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    box-shadow: none;
    transform: none;
}
.btn:hover, .btn:active { transform: none; }
.btn:focus-visible { box-shadow: var(--kami-ring); outline: 0; }

.btn-sm { padding: .3rem .65rem; font-size: .8rem; border-radius: 8px; }
.btn-lg { padding: .6rem 1.15rem; font-size: .95rem; border-radius: 12px; }
.btn i { line-height: 1; }

/* 纯图标按钮（主题切换等） */
.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* 语义色：用实色替换原来的渐变 */
.btn-primary {
    --bs-btn-bg: var(--kami-primary);
    --bs-btn-border-color: var(--kami-primary);
    --bs-btn-hover-bg: var(--kami-primary-dark);
    --bs-btn-hover-border-color: var(--kami-primary-dark);
    --bs-btn-active-bg: var(--kami-primary-dark);
    --bs-btn-active-border-color: var(--kami-primary-dark);
    --bs-btn-disabled-bg: var(--kami-primary);
    --bs-btn-disabled-border-color: var(--kami-primary);
    background-image: none;
}
.btn-success {
    --bs-btn-bg: var(--kami-success);
    --bs-btn-border-color: var(--kami-success);
    --bs-btn-hover-bg: #0e8e5f;
    --bs-btn-hover-border-color: #0e8e5f;
    --bs-btn-active-bg: #0e8e5f;
    --bs-btn-active-border-color: #0e8e5f;
    background-image: none;
}
.btn-danger {
    --bs-btn-bg: var(--kami-danger);
    --bs-btn-border-color: var(--kami-danger);
    --bs-btn-hover-bg: #c33d31;
    --bs-btn-hover-border-color: #c33d31;
    --bs-btn-active-bg: #c33d31;
    --bs-btn-active-border-color: #c33d31;
    background-image: none;
}
.btn-warning {
    --bs-btn-bg: #f0b429;
    --bs-btn-border-color: #f0b429;
    --bs-btn-color: #4a3400;
    --bs-btn-hover-bg: #e0a800;
    --bs-btn-hover-border-color: #e0a800;
    --bs-btn-hover-color: #4a3400;
    --bs-btn-active-bg: #e0a800;
    --bs-btn-active-border-color: #e0a800;
    --bs-btn-active-color: #4a3400;
    background-image: none;
}
.btn-outline-secondary {
    --bs-btn-color: var(--kami-text-2);
    --bs-btn-border-color: var(--kami-border-strong);
    --bs-btn-hover-bg: var(--kami-surface-3);
    --bs-btn-hover-border-color: var(--kami-border-strong);
    --bs-btn-hover-color: var(--kami-text);
    --bs-btn-active-bg: var(--kami-surface-3);
    --bs-btn-active-border-color: var(--kami-border-strong);
    --bs-btn-active-color: var(--kami-text);
}
.btn-outline-primary {
    --bs-btn-color: var(--kami-primary-dark);
    --bs-btn-border-color: rgba(74, 107, 255, .45);
    --bs-btn-hover-bg: var(--kami-primary);
    --bs-btn-hover-border-color: var(--kami-primary);
    --bs-btn-active-bg: var(--kami-primary-dark);
    --bs-btn-active-border-color: var(--kami-primary-dark);
}
.btn-light {
    --bs-btn-bg: var(--kami-surface-2);
    --bs-btn-border-color: var(--kami-border);
    --bs-btn-color: var(--kami-text);
    --bs-btn-hover-bg: var(--kami-surface-3);
    --bs-btn-hover-border-color: var(--kami-border-strong);
    --bs-btn-hover-color: var(--kami-text);
}

/* 表格里的按钮统一尺寸 */
.table .btn-sm { min-width: 0; }
.table-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }

/* ===================== 9. 徽章与状态 ===================== */
.badge {
    font-weight: 500;
    letter-spacing: .01em;
    padding: .32em .6em;
}
.badge.rounded-pill { padding: .32em .7em; }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.status-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.status-badge.is-active   { background: var(--kami-success-soft); color: var(--kami-success); border-color: rgba(18, 166, 112, .2); }
.status-badge.is-inactive { background: var(--kami-danger-soft);  color: var(--kami-danger);  border-color: rgba(220, 74, 61, .2); }
.status-badge.is-expired  { background: var(--kami-surface-3);   color: var(--kami-text-2);  border-color: var(--kami-border); }
.status-badge.is-on       { background: var(--kami-success-soft); color: var(--kami-success); }
.status-badge.is-off      { background: var(--kami-surface-3);   color: var(--kami-text-2); }

/* 角色 / 天数（用户管理） */
.role-admin, .role-agent, .role-user {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.role-admin { background: var(--kami-danger-soft);  color: var(--kami-danger); }
.role-agent { background: var(--kami-warning-soft); color: var(--kami-warning); }
.role-user  { background: var(--kami-primary-soft); color: var(--kami-primary-dark); }

.days-high   { color: var(--kami-success); font-weight: 600; }
.days-medium { color: var(--kami-warning); font-weight: 600; }
.days-low    { color: var(--kami-danger);  font-weight: 600; }

/* 旧版呼吸动画徽章（保留类名，不再闪） */
.badge-pulse { display: none !important; }

/* ===================== 10. 表单 ===================== */
.form-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--kami-text-2);
    margin-bottom: .35rem;
}
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid var(--kami-border-strong);
    background-color: var(--kami-surface);
    color: var(--kami-text);
    font-size: .9rem;
    padding: .5rem .75rem;
}
.form-control::placeholder { color: var(--kami-text-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--kami-primary);
    background-color: var(--kami-surface);
    color: var(--kami-text);
    box-shadow: var(--kami-ring);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--kami-surface-2);
    color: var(--kami-text-2);
}
.form-text { font-size: .78rem; color: var(--kami-text-3); }
.input-group-text {
    background-color: var(--kami-surface-2);
    border-color: var(--kami-border-strong);
    color: var(--kami-text-3);
}
.form-check-input { border-color: var(--kami-border-strong); }
.form-check-input:checked { background-color: var(--kami-primary); border-color: var(--kami-primary); }
.form-check-input:focus { box-shadow: var(--kami-ring); }
.form-check-label { font-size: .875rem; color: var(--kami-text); }
mark, .bg-warning-subtle { border-radius: 4px; }

/* 功能权限勾选网格（用户管理弹窗） */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .5rem;
}
.perm-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--kami-border);
    border-radius: 10px;
    background: var(--kami-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.perm-item:hover { border-color: var(--kami-border-strong); background: var(--kami-surface-2); }
.perm-item .form-check-input { margin: .15rem 0 0; flex: 0 0 auto; }
.perm-item .perm-name { font-size: .85rem; font-weight: 600; }
.perm-item .perm-desc { font-size: .75rem; color: var(--kami-text-3); line-height: 1.45; }
/* 选中态（浏览器支持 :has 时高亮整块，不支持也能用，只是少了高亮） */
.perm-item:has(.form-check-input:checked) {
    border-color: rgba(74, 107, 255, .45);
    background: var(--kami-primary-soft);
}
/* 只读展示（非管理员查看别人的权限）：整块降透明度，且不可点 */
.perm-item:has(.perm-box:disabled) {
    opacity: .68;
    cursor: default;
    background: var(--kami-surface-2);
}
/* 旧版相邻兄弟写法保留，避免老标记漏改时样式丢失 */
.perm-box:disabled ~ .perm-name, .perm-box:disabled ~ .perm-desc { opacity: .6; }

/* 权限勾选区外框（弹窗里的滚动容器） */
.perm-wrap { max-height: 260px; overflow-y: auto; }

/* 角色导致权限锁死时的说明条（普通用户 / 管理员） */
.perm-locked-note {
    margin: .35rem 0 .5rem;
    padding: .4rem .6rem;
    border: 1px solid var(--kami-border-strong);
    border-left: 3px solid var(--kami-warning);
    border-radius: 8px;
    background: var(--kami-warning-soft);
    color: var(--kami-warning);
    font-size: .78rem;
    line-height: 1.5;
}

/* ===================== 11. 弹窗 ===================== */
.modal-content {
    border: 1px solid var(--kami-border);
    border-radius: var(--kami-radius-lg);
    box-shadow: 0 24px 60px rgba(16, 22, 38, .22);
    background-color: var(--kami-surface);
    color: var(--kami-text);
}
.modal-header {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--kami-border);
    background-color: var(--kami-surface-2);
    border-radius: var(--kami-radius-lg) var(--kami-radius-lg) 0 0;
}
.modal-title { font-size: .98rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.modal-body { padding: 1.15rem; }
.modal-footer {
    padding: .8rem 1.15rem;
    border-top: 1px solid var(--kami-border);
    background-color: var(--kami-surface-2);
    border-radius: 0 0 var(--kami-radius-lg) var(--kami-radius-lg);
    gap: .5rem;
}
.btn-close { opacity: .5; }
.btn-close:hover { opacity: .85; }

/* 兼容旧类名 */
.user-management-modal .modal-header {
    background: var(--kami-surface-2) !important;
    color: var(--kami-text) !important;
    padding: .9rem 1.15rem;
}
.user-management-modal .modal-title { font-weight: 600; }
.user-management-modal .form-label { color: var(--kami-text-2); }

/* ===================== 12. 提示条 ===================== */
.alert {
    border-radius: var(--kami-radius);
    border: 1px solid transparent;
    padding: .7rem .95rem;
    font-size: .875rem;
    /* 默认块级：纯文本 / 多个内联片段的告警按正常段落排版。
       之前无条件写 flex，api_keys 页「接口地址」那条里的裸文本 + 一串 <code>
       会被当成一个个 flex 项排成一行，出现「接口/址」「客户/端通/过」竖着劈开的乱象 */
    display: block;
    box-shadow: none;
}
/* 带图标或带关闭按钮的告警才用 flex：图标 | 内容 | 关闭按钮 */
.alert:has(> i.bi),
.alert:has(> .btn-close) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
.alert > i.bi { flex: 0 0 auto; margin-top: .12rem; }
.alert .btn-close { margin-left: auto; flex: 0 0 auto; }
.alert-success { background: var(--kami-success-soft); border-color: rgba(18, 166, 112, .22); color: #0b6c4b; }
.alert-danger  { background: var(--kami-danger-soft);  border-color: rgba(220, 74, 61, .22);  color: #a3342a; }
.alert-warning { background: var(--kami-warning-soft); border-color: rgba(224, 168, 0, .28);  color: #7d5400; }
.alert-info    { background: var(--kami-info-soft);    border-color: rgba(27, 138, 168, .22); color: #10657d; }

/* 接口信息卡（应用密钥页）：把原本塞在一条 alert 里的四段说明拆成格子 */
.api-info-item {
    height: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--kami-border);
    border-radius: var(--kami-radius);
    background: var(--kami-surface-2);
}
.api-info-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--kami-text-3);
    margin-bottom: .35rem;
}
.api-info-value {
    font-size: .875rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.api-info-value code { margin-right: .25rem; }
.sign-formula {
    margin-top: .75rem;
    padding: .7rem .85rem;
    border: 1px solid var(--kami-border);
    border-left: 3px solid var(--kami-primary);
    border-radius: var(--kami-radius);
    background: var(--kami-surface-2);
}
.sign-formula pre {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .82rem;
    line-height: 1.7;
    color: var(--kami-text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ===================== 13. 分页 ===================== */
.pagination { --bs-pagination-border-radius: 9px; gap: .25rem; }
.page-link {
    --bs-pagination-color: var(--kami-text-2);
    --bs-pagination-border-color: var(--kami-border);
    --bs-pagination-hover-bg: var(--kami-surface-2);
    --bs-pagination-hover-color: var(--kami-text);
    --bs-pagination-hover-border-color: var(--kami-border-strong);
    --bs-pagination-active-bg: var(--kami-primary);
    --bs-pagination-active-border-color: var(--kami-primary);
    --bs-pagination-disabled-color: var(--kami-text-3);
    --bs-pagination-disabled-bg: var(--kami-surface);
    --bs-pagination-disabled-border-color: var(--kami-border);
    font-size: .85rem;
    padding: .3rem .65rem;
    border-radius: 9px;
    box-shadow: none;
}
.page-item.active .page-link { font-weight: 600; }

/* ===================== 14. 空状态 / 加载 / 提示 ===================== */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--kami-text-3);
}
.empty-state i { font-size: 2rem; display: block; margin-bottom: .6rem; opacity: .7; }
.empty-state p { margin: 0; font-size: .875rem; }

.loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .75rem;
    background: rgba(244, 246, 251, .72);
    backdrop-filter: blur(2px);
    z-index: 1090;
}
.spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(74, 107, 255, .2);
    border-top-color: var(--kami-primary);
    border-radius: 50%;
    animation: kamiSpin .8s linear infinite;
}
@keyframes kamiSpin { to { transform: rotate(360deg); } }

/* 复制按钮等小工具按钮 */
.copy-btn { border-radius: 8px; }

/* list-group 去边框，用于说明类列表 */
.list-group-item { background: transparent; border-color: var(--kami-border); }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

/* ===================== 15. 登录页 ===================== */
/* 登录页占满整屏：抵消 <main> 的上下内边距，否则 100vh + 24px 会多出一条无意义的滚动条 */
main:has(.login-bg) { padding-top: 0; padding-bottom: 0; }
.login-bg { background: linear-gradient(180deg, var(--kami-surface-3) 0%, var(--kami-bg) 100%); }
.login-card {
    border-radius: 18px;
    border: 1px solid var(--kami-border);
    box-shadow: 0 20px 50px rgba(20, 28, 45, .10);
    overflow: hidden;
}
.login-head {
    padding: 1.6rem 1.5rem;
    text-align: center;
    background: var(--kami-surface-2);
    border-bottom: 1px solid var(--kami-border);
}
.login-head .login-mark {
    width: 52px; height: 52px;
    margin: 0 auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--kami-primary), #6f8bff);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(74, 107, 255, .28);
}
.login-head h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.login-head p { margin: .25rem 0 0; font-size: .82rem; color: var(--kami-text-3); }

/* ===================== 16. 深色主题 ===================== */
[data-theme="dark"] {
    color-scheme: dark;

    --kami-bg:            #0e1219;
    --kami-surface:       #161b24;
    --kami-surface-2:     #1a2029;
    --kami-surface-3:     #212936;
    --kami-border:        #262e3b;
    --kami-border-strong: #333d4d;

    --kami-text:          #e7ecf5;
    --kami-text-2:        #a6b1c2;
    --kami-text-3:        #7b8598;

    --kami-primary:       #6f8bff;
    --kami-primary-dark:  #8ea4ff;
    --kami-primary-soft:  rgba(111, 139, 255, .16);
    --kami-success:       #34d399;
    --kami-success-soft:  rgba(52, 211, 153, .14);
    --kami-danger:        #ff7b6f;
    --kami-danger-soft:   rgba(255, 123, 111, .15);
    --kami-warning:       #f5b544;
    --kami-warning-soft:  rgba(245, 181, 68, .15);
    --kami-info:          #4cc6e0;
    --kami-info-soft:     rgba(76, 198, 224, .14);

    --kami-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --kami-shadow-2: 0 8px 22px rgba(0, 0, 0, .5);
    --kami-ring: 0 0 0 3px rgba(111, 139, 255, .25);

    /* Bootstrap 令牌：必须在本块里再声明一次。
       Bootstrap 的 [data-bs-theme=dark] 与本文件的 :root 特异性相同，
       而本文件在 bootstrap.min.css 之后加载，浅色值会反过来盖掉深色值。 */
    --bs-primary: #6f8bff;  --bs-primary-rgb: 111, 139, 255;
    --bs-success: #34d399;  --bs-success-rgb: 52, 211, 153;
    --bs-danger:  #ff7b6f;  --bs-danger-rgb: 255, 123, 111;
    --bs-warning: #f5b544;  --bs-warning-rgb: 245, 181, 68;
    --bs-info:    #4cc6e0;  --bs-info-rgb: 76, 198, 224;
    --bs-body-bg: #0e1219;
    --bs-body-color: #e7ecf5;
    --bs-border-color: #262e3b;
    --bs-secondary-color: #a6b1c2;
    --bs-tertiary-bg: #1a2029;
    --bs-emphasis-color: #ffffff;
    --bs-link-color: #8ea4ff;
    --bs-link-color-rgb: 142, 164, 255;
    --bs-link-hover-color: #a9baff;

    --dark-color: var(--kami-text);
    --light-color: var(--kami-surface-3);
}

/* 深色下文字对比：这几处用的是「语义色」字，需要提亮 */
[data-theme="dark"] .alert-success { color: #7ce7bb; }
[data-theme="dark"] .alert-danger  { color: #ffab9f; }
[data-theme="dark"] .alert-warning { color: #f7d489; }
[data-theme="dark"] .alert-info    { color: #8ad9ea; }
[data-theme="dark"] code { color: #9fb4ff; }
[data-theme="dark"] .card-header.bg-danger,
[data-theme="dark"] .card-header.bg-warning,
[data-theme="dark"] .card-header.bg-success,
[data-theme="dark"] .card-header.bg-info { color: #10151d !important; }
[data-theme="dark"] .btn-warning { --bs-btn-color: #2a1d00; --bs-btn-hover-color: #2a1d00; --bs-btn-active-color: #2a1d00; }
[data-theme="dark"] .app-nav { background: rgba(22, 27, 36, .88); }
[data-theme="dark"] .app-brand-mark { box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
[data-theme="dark"] .loading-overlay { background: rgba(14, 18, 25, .75); }
[data-theme="dark"] .login-card { box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--kami-surface-2); }

/* 深色下 Bootstrap 那些「不跟随主题」的工具类 */
[data-theme="dark"] .bg-light { background-color: var(--kami-surface-3) !important; }
[data-theme="dark"] .bg-white { background-color: var(--kami-surface) !important; color: var(--kami-text) !important; }
[data-theme="dark"] .text-dark { color: var(--kami-text) !important; }
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light th {
    --bs-table-bg: var(--kami-surface-2);
    --bs-table-color: var(--kami-text-2);
    --bs-table-border-color: var(--kami-border);
}
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted { color: var(--kami-text-3) !important; }
[data-theme="dark"] .form-control::placeholder { color: #6b7587; }

/* ===================== 17. 响应式 ===================== */
@media (max-width: 991.98px) {
    .app-nav-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .5rem; padding-bottom: .75rem; }
    .app-nav-links { flex-direction: column; align-items: stretch; gap: .15rem; }
    .nav-btn { padding: .55rem .7rem; }
    .app-user { margin-left: 0; justify-content: space-between; border-top: 1px solid var(--kami-border); padding-top: .6rem; }
}

@media (max-width: 767.98px) {
    body { font-size: .9rem; }
    .page-head { align-items: flex-start; }
    .page-title { font-size: 1.15rem; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }
    .card-body { padding: 1rem; }
    .table > thead th, .table > tbody td { padding: .6rem .7rem; }
    .table-actions { justify-content: flex-start; flex-wrap: wrap; }
    .table-actions .btn { padding: .25rem .55rem; }
    .stats-value { font-size: 1.35rem; }
}

/* ===================== 18. 可用性 ===================== */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-btn:focus-visible,
.page-link:focus-visible,
.app-brand:focus-visible,
.app-nav-toggle:focus-visible {
    outline: 2px solid var(--kami-primary);
    outline-offset: 2px;
}

/* 图标字体（CDN）加载失败时隐藏空图标，保证文字可读可点 */
.icons-cdn-failed .bi { display: none !important; }
.icons-cdn-failed .nav-btn,
.icons-cdn-failed .btn,
.icons-cdn-failed .page-title,
.icons-cdn-failed .card-header .card-title { gap: 0; }

/* 页面里用到的 animate.css 类名，只保留一个轻量淡入 */
.animate__animated { animation-duration: .45s; animation-fill-mode: both; }
.animate__fadeIn { animation-name: kamiFadeIn; }
@keyframes kamiFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .animate__animated { animation: none; }
    * { transition-duration: .01ms !important; }
}