/**
 * 统一设计系统：卡片容器/头部/数据强调 通用规范
 * 各模块CSS可以复用这些class，或者在自身variant样式里参照同样的变量组合，
 * 目的是让不同模块的卡片视觉语言（背景/圆角/阴影/间距/标题排布/数字强调）保持统一，
 * 而不是各模块各自决定一套间距和圆角数值。
 */

.card-panel {
    background: var(--color-tint, #fff);
    border: 1px solid var(--color-tint-border, #e5e7eb);
    border-radius: var(--radius-base, 10px);
    box-shadow: var(--shadow-base, 0 2px 10px rgba(0,0,0,.06));
    padding: calc(var(--spacing-unit, 8px) * 2.5);
}

.card-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit, 8px) * 2);
}

.card-panel__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading, var(--color-dark, #111));
    margin: 0;
}

.card-panel__action {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #2563eb);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.card-panel__body {
    color: var(--text-body, #666);
}

.stat-number {
    font-weight: 800;
    color: var(--color-primary, #2563eb);
}

.stat-label {
    font-size: 12px;
    color: var(--text-meta, #999);
}