/* ============================================================
 * 康灵wp统计 · 统计模块前台样式
 *
 * 设计要点（针对「背景压文字 / 夜间切换丢字」的修正）：
 *   1. 卡片底色默认是不透明的（亮色纯白、暗色实底），文字永远有对比度；
 *   2. 内边距加大、行高加大，文字不会贴着背景边；
 *   3. 夜间模式可选：跟随主题 / 强制亮色 / 强制暗色（后台设置），
 *      自动识别子比主题的 dark-theme 等类，识别不到就手动指定即可；
 *   4. 顶部装饰线与悬停上浮都可以在后台单独开关。
 *
 * 颜色优先级：后台「详细设置」的内联变量 > 样式预设 > 这里的默认令牌。
 * ============================================================ */

.klbk-stats {
    /* ---------- 颜色令牌（亮色） ---------- */
    --klbk-token-bg: #ffffff;
    --klbk-token-bg-soft: #f5f7fa;
    --klbk-token-border: #e9ecf1;
    --klbk-token-label: #5b6473;
    --klbk-token-line: #e3e7ee;
    --klbk-accent: var(--klbk-accent-custom, #0aa34a);

    /* ---------- 可被后台覆盖的量 ---------- */
    --klbk-num-color: var(--klbk-accent);
    --klbk-label-color: var(--klbk-token-label);
    --klbk-item-bg: var(--klbk-token-bg);
    --klbk-item-border: var(--klbk-token-border);
    --klbk-item-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --klbk-radius: 12px;
    --klbk-num-size: 26px;
    --klbk-num-weight: 800;
    --klbk-label-size: 12px;
    --klbk-pad: 16px 11px;
    --klbk-gap: 10px;

    display: grid;
    grid-template-columns: repeat(var(--klbk-col, 3), minmax(0, 1fr));
    gap: var(--klbk-gap);
}

/* ---------- 夜间模式：强制暗色 ---------- */
.klbk-stats.klbk-mode-dark {
    --klbk-token-bg: #262b33;
    --klbk-token-bg-soft: rgba(255, 255, 255, .06);
    --klbk-token-border: rgba(255, 255, 255, .12);
    --klbk-token-label: rgba(255, 255, 255, .74);
    --klbk-token-line: rgba(255, 255, 255, .16);
    --klbk-accent: var(--klbk-accent-custom, #4ade80);
    --klbk-item-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* ---------- 夜间模式：自动（识别子比等主题的暗色类） ---------- */
body.dark-theme .klbk-stats.klbk-mode-auto,
html.dark-theme .klbk-stats.klbk-mode-auto,
.dark-theme .klbk-stats.klbk-mode-auto,
[data-theme="dark"] .klbk-stats.klbk-mode-auto,
body.dark .klbk-stats.klbk-mode-auto,
html.dark .klbk-stats.klbk-mode-auto {
    --klbk-token-bg: #262b33;
    --klbk-token-bg-soft: rgba(255, 255, 255, .06);
    --klbk-token-border: rgba(255, 255, 255, .12);
    --klbk-token-label: rgba(255, 255, 255, .74);
    --klbk-token-line: rgba(255, 255, 255, .16);
    --klbk-accent: var(--klbk-accent-custom, #4ade80);
    --klbk-item-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* ---------- 卡片 ---------- */
.klbk-stats-item {
    position: relative;
    padding: var(--klbk-pad);
    text-align: center;
    border: 1px solid var(--klbk-item-border);
    border-radius: var(--klbk-radius);
    background: var(--klbk-item-bg);
    box-shadow: var(--klbk-item-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.klbk-stats-num {
    font-size: var(--klbk-num-size);
    font-weight: var(--klbk-num-weight);
    line-height: 1.15;
    letter-spacing: -.2px;
    color: var(--klbk-num-color) !important;
    font-variant-numeric: tabular-nums;
}

.klbk-stats-label {
    margin-top: 6px;
    font-size: var(--klbk-label-size);
    font-weight: 500;
    line-height: 1.4;
    color: var(--klbk-label-color) !important;
}

/* ---------- 顶部装饰线（后台可关，默认关） ---------- */
.klbk-stats-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--klbk-accent);
    opacity: .9;
    transform: translateX(-50%);
}

.klbk-stats.klbk-deco-0 .klbk-stats-item::before {
    display: none;
}

/* ---------- 悬停上浮（后台可关） ---------- */
.klbk-stats.klbk-hover-1 .klbk-stats-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
}

.klbk-stats.klbk-mode-dark.klbk-hover-1 .klbk-stats-item:hover,
body.dark-theme .klbk-stats.klbk-mode-auto.klbk-hover-1 .klbk-stats-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

/* ---------- 手机端强制隐藏（不影响手机端主题） ---------- */
@media (max-width: 768px) {
    .klbk-stats {
        display: none !important;
    }
}

/* ============================================================
 * 样式预设（后台：设置 → 康灵wp统计 → 统计样式）
 * 预设只覆盖变量；后台「详细设置」里填的值以内联变量优先。
 * ============================================================ */

/* 卡片式（默认） */
.klbk-stats.klbk-style-card {
    --klbk-item-bg: var(--klbk-token-bg);
    --klbk-item-border: var(--klbk-token-border);
    --klbk-item-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --klbk-radius: 12px;
    --klbk-pad: 16px 11px;
    --klbk-num-size: 26px;
}

/* 柔和浅底：浅底、无边框、圆角更大 */
.klbk-stats.klbk-style-soft {
    --klbk-item-bg: var(--klbk-token-bg-soft);
    --klbk-item-border: transparent;
    --klbk-item-shadow: none;
    --klbk-radius: 16px;
    --klbk-pad: 18px 12px;
}

/* 极简无底：只有数字和文字 */
.klbk-stats.klbk-style-minimal {
    --klbk-item-bg: transparent;
    --klbk-item-border: transparent;
    --klbk-item-shadow: none;
    --klbk-radius: 0;
    --klbk-pad: 10px 4px;
    --klbk-num-size: 30px;
}

/* 竖线分隔：数据条 */
.klbk-stats.klbk-style-line {
    --klbk-item-bg: transparent;
    --klbk-item-border: transparent;
    --klbk-item-shadow: none;
    --klbk-radius: 0;
    --klbk-pad: 12px 6px;
}

.klbk-stats.klbk-style-line .klbk-stats-item {
    border-left: 1px solid var(--klbk-token-line);
}

.klbk-stats.klbk-style-line .klbk-stats-item:first-child {
    border-left: 0;
}

.klbk-stats.klbk-style-line .klbk-stats-item::before {
    display: none;
}

/* 紧凑小巧：适合窄侧栏 */
.klbk-stats.klbk-style-compact {
    --klbk-gap: 6px;
    --klbk-pad: 10px 6px;
    --klbk-radius: 8px;
    --klbk-num-size: 19px;
    --klbk-label-size: 11px;
}

/* 描边卡片：透明底 + 强调色描边 */
.klbk-stats.klbk-style-outline {
    --klbk-item-bg: transparent;
    --klbk-item-border: var(--klbk-accent);
    --klbk-item-shadow: none;
    --klbk-radius: 12px;
}

/* 强调色渐变：整块渐变底 + 白字 */
.klbk-stats.klbk-style-gradient {
    --klbk-item-bg: linear-gradient(135deg, var(--klbk-accent), rgba(0, 0, 0, .34));
    --klbk-item-border: transparent;
    --klbk-item-shadow: 0 6px 18px rgba(16, 24, 40, .16);
    --klbk-num-color: #fff;
    --klbk-label-color: rgba(255, 255, 255, .9);
    --klbk-radius: 14px;
    --klbk-num-size: 28px;
    --klbk-pad: 18px 12px;
}

.klbk-stats.klbk-style-gradient .klbk-stats-item::before {
    background: rgba(255, 255, 255, .7);
}