/* 贰捌植场 · 站点数据统计 小工具样式
 * 优先复用主题 CSS 变量，自动适配亮色 / 暗色模式。
 */
.erba-site-stats {
    display: grid;
    grid-template-columns: repeat(var(--erba-m-col, 2), 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .erba-site-stats {
        grid-template-columns: repeat(var(--erba-pc-col, 4), 1fr);
    }
}

.erba-ss-item {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 16px 10px;
    border-radius: var(--main-radius, 8px);
    background: #ffffff !important;
    border: 1px solid var(--main-border-color, rgba(125, 125, 125, 0.12));
}

/* 暗色主题：保持原半透明深底，不强制白底 */
html.dark-theme .erba-ss-item,
body.dark-theme .erba-ss-item {
    background: var(--muted-bg-color, rgba(125, 125, 125, 0.08)) !important;
}

.erba-ss-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* ── 图标：通用 ──
 * 重要：子比 main.css 有全局 `svg{width:1em;height:1em;fill:currentColor;overflow:hidden}`。
 * SVG 上的 fill="none" 属于 presentation attribute，优先级低于任何 CSS 规则，
 * 会被主题的 fill:currentColor 覆盖，导致线性图标被填充成实心色块。
 * 故此处必须用 !important 强制线性描边风格。
 */
.erba-ss-icon svg,
.erba-ss-ico-inline svg,
.erba-ss-wm svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle !important;
    overflow: visible !important;
}

/* 子元素同样兜底，防主题存在 `svg path{fill:...}` 之类的规则 */
.erba-ss-icon svg *,
.erba-ss-ico-inline svg *,
.erba-ss-wm svg * {
    fill: none !important;
    stroke: currentColor !important;
}

/* 内联小图标：数字左侧 */
.erba-ss-ico-inline {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--focus-color, var(--theme-color, #f04494));
}

/* 小尺寸下适当加粗描边，保证清晰度 */
.erba-ss-ico-inline svg {
    stroke-width: 1.9 !important;
}

/* 顶部独立图标：数字上方居中 */
.erba-ss-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
    color: var(--focus-color, var(--theme-color, #f04494));
}

.erba-ss-icon svg {
    stroke-width: 1.8 !important;
}

/* 卡片背景暗纹：右下角大图标 */
.erba-ss-wm {
    position: absolute;
    right: -10px;
    bottom: -12px;
    z-index: 0;
    width: 62px;
    height: 62px;
    color: var(--focus-color, var(--theme-color, #f04494));
    opacity: 0.09;
    pointer-events: none;
}

/* 大尺寸暗纹：描边收细，避免糊成一团 */
.erba-ss-wm svg {
    stroke-width: 1.2 !important;
}

html.dark-theme .erba-ss-wm,
body.dark-theme .erba-ss-wm {
    opacity: 0.16;
}

/* 标签文本：胶囊背景（默认跟随主题色 --focus-color / --theme-color） */
.erba-ss-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    font-size: 13px;
    margin-top: 8px;
    padding: 2px 10px;
    line-height: 1.5;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 模式 1：theme —— 主题色浅底 + 主题色文字（默认） ── */
/* 旧浏览器不支持 color-mix 时回退到中性灰底 */
.erba-labelbg-theme .erba-ss-label {
    background: rgba(125, 125, 125, 0.1) !important;
    background: color-mix(in srgb, var(--focus-color, var(--theme-color, #f04494)) 12%, transparent) !important;
    color: var(--focus-color, var(--theme-color, #f04494)) !important;
}

html.dark-theme .erba-labelbg-theme .erba-ss-label,
body.dark-theme .erba-labelbg-theme .erba-ss-label {
    background: rgba(255, 255, 255, 0.08) !important;
    background: color-mix(in srgb, var(--focus-color, var(--theme-color, #f04494)) 22%, transparent) !important;
}

/* ── 模式 2：solid —— 主题色实底 + 白字 ── */
.erba-labelbg-solid .erba-ss-label {
    background: var(--focus-color, var(--theme-color, #f04494)) !important;
    color: #ffffff !important;
}

/* ── 模式 3：gray —— 中性灰底 ── */
.erba-labelbg-gray .erba-ss-label {
    background: #f2f3f5 !important;
}

html.dark-theme .erba-labelbg-gray .erba-ss-label,
body.dark-theme .erba-labelbg-gray .erba-ss-label {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ── 模式 4：none —— 无背景（纯文本） ── */
.erba-labelbg-none .erba-ss-label {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 6px;
}