/* ========================================
   电商利润分析系统 - 全屏白色现代风格
   Clean, Minimal, Full-screen Dashboard
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --error: #ef4444;
    --purple: #8b5cf6;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    --bg-card: #ffffff;
    --card-bg: #ffffff;
    --bg-subtle: #f8fafc;

    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== 全屏布局 ========== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ========== 顶部导航栏 ========== */
.header {
    height: 64px;
    min-height: 64px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    gap: 24px;
}

.header-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.header-title::before {
    content: '';
    width: 8px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 4px;
}

/* 日期选择器 */
.date-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.date-panel-quick {
    display: flex;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 4px;
    gap: 4px;
}

.quick-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.quick-btn:hover {
    color: var(--text-primary);
    background: var(--bg-white);
}

.quick-btn.active {
    background: var(--bg-white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.date-panel-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-label {
    font-size: 13px;
    color: var(--text-muted);
}

.date-to {
    color: var(--text-muted);
}

input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}

input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-query {
    padding: 8px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-query:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-target {
    padding: 8px 16px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-target:hover {
    background: var(--bg-white);
    border-color: var(--primary);
    color: var(--primary);
}

/* 工具栏 */
.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 最后更新时间 */
.last-update {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.last-update .update-icon {
    font-size: 14px;
}

.last-update:hover {
    background: var(--bg-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.last-update.updating {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
}

.last-update.updating .update-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.refresh-indicator.active {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.refresh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.refresh-indicator.active .refresh-dot {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.btn-icon-only {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    color: var(--text-secondary);
}

.btn-icon-only:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
    color: var(--primary);
}

/* ========== 错误提示 ========== */
.error-message {
    display: none;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    padding: 12px 24px;
    font-size: 14px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* ========== 主Tab导航 ========== */
.main-tabs {
    display: flex;
    background: var(--bg-white);
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    gap: 0;
}

.main-tab {
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.main-tab:hover {
    color: var(--text-primary);
}

.main-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ========== 主内容区域 ========== */
.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 32px;
    background: var(--bg-light);
}

.tab-content.active {
    display: block;
}

/* ========== 数据卡片 ========== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.data-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 1px solid var(--border-light);
}

.data-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.card-title {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.card-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* 同环比 */
.card-compare {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
}

.compare-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compare-label {
    color: var(--text-muted);
}

.compare-value {
    font-weight: 600;
}

.compare-up { color: var(--success); }
.compare-down { color: var(--danger); }
.compare-flat { color: var(--text-muted); }

/* ========== 仪表盘 ========== */
.gauge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.gauge-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gauge-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.gauge-card:hover .gauge-fill.success { stroke: #0d9668; }
.gauge-card:hover .gauge-fill.warning { stroke: #d97706; }
.gauge-card:hover .gauge-fill.danger { stroke: #dc2626; }

.gauge-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    position: relative;
}

.gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: var(--bg-light);
    stroke-width: 10;
}

.gauge-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
    animation: gaugeEnter 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes gaugeEnter {
    from {
        stroke-dashoffset: 283; /* 2 * PI * 45 */
    }
}

.gauge-fill.success { stroke: var(--success); }
.gauge-fill.warning { stroke: var(--warning); }
.gauge-fill.danger { stroke: var(--danger); }

.gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.gauge-label {
    font-size: 20px;
}

.gauge-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ========== 智能洞察 ========== */
.insight-section, .alert-section, .achievement-section, .forecast-section {
    margin-bottom: 24px;
}

.insight-container, .alert-container, .forecast-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.insight-header, .alert-header, .forecast-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.insight-icon, .alert-icon, .forecast-icon {
    font-size: 20px;
}

.insight-title, .alert-title, .forecast-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.forecast-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.insight-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.insight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insight-item:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
    transform: translateY(-2px);
}

.insight-item:hover::before {
    opacity: 1;
}

.insight-item.success::before { background: var(--success); }
.insight-item.warning::before { background: var(--warning); }
.insight-item.danger::before { background: var(--danger); }

.insight-emoji {
    font-size: 28px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
    border-radius: 8px;
}

.insight-content {
    flex: 1;
    min-width: 0;
}

.insight-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.insight-text {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.5;
}

.insight-action {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    transition: all 0.2s ease;
}

.insight-action:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

.insight-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 10px;
    border-radius: 12px;
}

/* 预警 */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}

.alert-item.danger {
    background: rgba(239, 68, 68, 0.08);
}

.alert-item.warning {
    background: rgba(245, 158, 11, 0.08);
}

.alert-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.alert-badge.danger {
    background: var(--danger);
    color: white;
}

.alert-badge.warning {
    background: var(--warning);
    color: white;
}

.alert-name {
    font-weight: 600;
    color: var(--text-primary);
}

.alert-message {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

.alert-value {
    font-size: 13px;
    color: var(--text-muted);
}

/* 预测 */
.forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.forecast-item {
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.forecast-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.forecast-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.forecast-value.positive { color: var(--success); }
.forecast-value.negative { color: var(--danger); }

.forecast-compare {
    font-size: 12px;
    margin-top: 6px;
}

.forecast-compare.success { color: var(--success); }
.forecast-compare.warning { color: var(--warning); }

/* 目标达成率 */
.achievement-bar {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.achievement-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.achievement-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.achievement-rate {
    font-size: 16px;
    font-weight: 700;
}

.achievement-rate.success { color: var(--success); }
.achievement-rate.warning { color: var(--warning); }
.achievement-rate.danger { color: var(--danger); }

.progress-bar {
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger { background: var(--danger); }

.achievement-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

/* ========== 统计概况 ========== */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stats-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.stats-box-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.stats-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.stats-label {
    font-size: 13px;
    color: var(--text-muted);
}

.stats-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.stats-value.positive { color: var(--success); }
.stats-value.negative { color: var(--danger); }

/* ========== 快速排行榜 ========== */
.quick-rank-section {
    margin-bottom: 24px;
}

.quick-rank-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.quick-rank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.quick-rank-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.rank-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.quick-rank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.rank-box {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.rank-box.warning-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
}

.rank-box-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-item.loss {
    background: rgba(239, 68, 68, 0.05);
    margin: 0 -8px;
    padding: 8px;
    border-radius: 6px;
}

.rank-num {
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-right: 10px;
}

.rank-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.rank-value.positive { color: var(--success); }
.rank-value.negative { color: var(--danger); }

.rank-box .no-data {
    text-align: center;
    color: var(--success);
    font-size: 13px;
    padding: 20px 0;
}

/* ========== 商品健康度分布 ========== */
.product-health-dist-section {
    margin-bottom: 24px;
}

.health-dist-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.health-dist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.health-dist-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.health-dist-header .total-count {
    font-size: 13px;
    color: var(--text-muted);
}

.health-dist-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.health-dist-chart {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.health-dist-stats {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dist-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.dist-stat-item .dist-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dist-stat-item.excellent .dist-dot { background: #22c55e; }
.dist-stat-item.good .dist-dot { background: #3b82f6; }
.dist-stat-item.warning .dist-dot { background: #f59e0b; }
.dist-stat-item.danger .dist-dot { background: #ef4444; }

.dist-stat-item .dist-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
}

.dist-stat-item .dist-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dist-stat-item .dist-percent {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 45px;
    text-align: right;
}

/* ========== 图表区域 ========== */
.chart-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.chart-container {
    height: 320px;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-light);
    padding: 4px;
    border-radius: var(--radius-sm);
}

.tab-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--bg-white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.rank-controls {
    display: flex;
    gap: 16px;
}

/* ========== ROI卡片 ========== */
.roi-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* ROI概览头部 */
.roi-overview-header {
    margin-bottom: 16px;
    grid-column: 1 / -1;
}

.roi-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-radius: var(--radius-sm);
    border: 1px solid #fde047;
}

.roi-label {
    font-size: 13px;
    color: #854d0e;
    font-weight: 500;
}

.roi-break-even {
    font-size: 20px;
    font-weight: 700;
    color: #a16207;
}

.roi-hint {
    font-size: 12px;
    color: #a16207;
    opacity: 0.8;
}

.roi-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    grid-column: 1 / -1;
}

.roi-card {
    position: relative;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.roi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.roi-card.success { border-left-color: var(--success); }
.roi-card.warning { border-left-color: var(--warning); }
.roi-card.danger { border-left-color: var(--danger); }
.roi-card.neutral { border-left-color: var(--text-muted); }

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-status-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.card-status-badge.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.card-status-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.card-status-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.card-progress {
    height: 4px;
    background: var(--bg-light);
    border-radius: 2px;
    margin: 8px 0;
    overflow: hidden;
}

.card-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-progress-bar.success { background: var(--success); }
.card-progress-bar.warning { background: var(--warning); }
.card-progress-bar.danger { background: var(--danger); }

/* ========== 建议卡片 ========== */
.suggestion-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.suggestion-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.suggestion-list {
    list-style: none;
}

.suggestion-list li {
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    padding-left: 20px;
    position: relative;
}

.suggestion-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.suggestion-list li:last-child {
    border-bottom: none;
}

/* ========== 表格区域 ========== */
.table-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.table-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.table-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

.dimension-selector {
    display: flex;
    background: var(--bg-light);
    padding: 4px;
    border-radius: var(--radius-sm);
    gap: 4px;
}

.dim-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.dim-btn:hover {
    color: var(--text-primary);
}

.dim-btn.active {
    background: var(--bg-white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.table-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input {
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 14px;
    width: 240px;
    outline: none;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-clear-search {
    width: 36px;
    height: 36px;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-search:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* 筛选面板 */
.filter-panel {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.filter-select:focus {
    border-color: var(--primary);
}

.filter-result {
    font-size: 13px;
    color: var(--text-muted);
}

.btn-export {
    padding: 10px 20px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.btn-export:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* 表格 */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th {
    padding: 14px 16px;
    text-align: left;
    background: var(--bg-light);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: 13px;
}

.data-table th.number {
    text-align: right;
}

.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.data-table td.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.data-table tr:hover {
    background: var(--bg-light);
}

.data-table .positive-value { color: var(--success); font-weight: 600; }
.data-table .negative-value { color: var(--danger); font-weight: 600; }

.data-table mark {
    background: rgba(245, 158, 11, 0.2);
    padding: 2px 4px;
    border-radius: 4px;
    color: inherit;
}

/* ========== 弹窗 ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-light);
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}

/* 表单 */
.target-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.input-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-unit {
    padding: 12px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
    font-size: 14px;
}

.form-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-default {
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-default:hover {
    background: var(--bg-white);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 下钻弹窗 */
.drill-down-modal {
    max-width: 420px;
}

.drill-down-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.drill-stat {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.drill-stat .label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.drill-stat .value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.drill-stat .value.positive { color: var(--success); }
.drill-stat .value.negative { color: var(--danger); }

.drill-down-hint {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Toast */
.toast-message {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--text-primary);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2000;
    box-shadow: var(--shadow-lg);
}

.toast-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========== 加载状态 ========== */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}

.empty-state svg {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========== 响应式 ========== */
@media (max-width: 1400px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gauge-grid, .roi-cards, .stats-summary, .forecast-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .header {
        padding: 0 20px;
        flex-wrap: wrap;
        height: auto;
        padding: 16px 20px;
        gap: 16px;
    }

    .date-panel {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .chart-row {
        grid-template-columns: 1fr;
    }

    .main-tabs {
        padding: 0 20px;
        overflow-x: auto;
    }

    .tab-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gauge-grid, .roi-cards, .stats-summary, .forecast-grid {
        grid-template-columns: 1fr;
    }

    .insight-grid {
        grid-template-columns: 1fr;
    }

    .main-tab {
        padding: 12px 16px;
        font-size: 13px;
    }

    .dimension-selector {
        flex-wrap: wrap;
    }

    .filter-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .date-panel-quick {
        flex-wrap: wrap;
    }

    .header-title {
        font-size: 18px;
    }
}

/* ========== 全屏模式 ========== */
.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: var(--bg-white) !important;
}

/* ========== 隐藏SVG定义 ========== */
svg[style*="position:absolute"] {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ========== 人效分析模块 ========== */
.efficiency-section {
    margin-bottom: 24px;
}

.efficiency-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.efficiency-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.efficiency-icon {
    font-size: 20px;
}

.efficiency-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.efficiency-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.efficiency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.efficiency-card {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
}

.efficiency-card:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.efficiency-card.highlight {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.eff-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.eff-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.eff-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.eff-value.positive { color: var(--success); }
.eff-value.negative { color: var(--danger); }

.eff-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.efficiency-ranking {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ranking-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.ranking-item:hover {
    box-shadow: var(--shadow);
}

.ranking-item.top {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.rank-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ranking-item.top .rank-num {
    background: var(--warning);
    color: white;
}

.rank-name {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 80px;
}

.rank-score {
    font-weight: 600;
    color: var(--primary);
    margin-left: auto;
}

.rank-detail {
    font-size: 12px;
    color: var(--text-muted);
}

/* ========== 店铺健康度评分卡 ========== */
.health-section {
    margin-bottom: 24px;
}

.health-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.health-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.health-icon {
    font-size: 20px;
}

.health-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.health-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.health-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    min-width: 80px;
}

.health-stat .num {
    font-size: 24px;
    font-weight: 700;
}

.health-stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

.health-stat.excellent .num { color: var(--success); }
.health-stat.good .num { color: var(--primary); }
.health-stat.fair .num { color: var(--warning); }
.health-stat.poor .num { color: var(--danger); }

.health-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.health-card {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    border-left: 4px solid var(--text-muted);
    transition: all 0.2s;
}

.health-card:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.health-card.excellent { border-left-color: var(--success); }
.health-card.good { border-left-color: var(--primary); }
.health-card.fair { border-left-color: var(--warning); }
.health-card.poor { border-left-color: var(--danger); }

.health-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.store-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.health-score {
    font-size: 18px;
    font-weight: 700;
}

.health-score.excellent { color: var(--success); }
.health-score.good { color: var(--primary); }
.health-score.fair { color: var(--warning); }
.health-score.poor { color: var(--danger); }

.health-level {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.health-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.health-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bar-label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
}

.bar-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.bar-score {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
}

.health-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* ========== 商品利润贡献度分析 ========== */
.contribution-section {
    margin-bottom: 24px;
}

.contribution-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.contribution-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.contribution-icon {
    font-size: 20px;
}

.contribution-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.contribution-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.contrib-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-num.positive { color: var(--success); }
.stat-num.negative { color: var(--danger); }

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

.contribution-chart-wrapper {
    margin-bottom: 20px;
}

.contribution-chart-wrapper .chart-container {
    height: 320px;
}

.contribution-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.contribution-insights .insight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.insight-bullet {
    font-size: 10px;
    margin-top: 4px;
}

.insight-bullet.success { color: var(--success); }
.insight-bullet.warning { color: var(--warning); }
.insight-bullet.danger { color: var(--danger); }

/* ========== 响应式调整 ========== */
@media (max-width: 1200px) {
    .efficiency-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contribution-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .efficiency-grid {
        grid-template-columns: 1fr;
    }

    .health-summary {
        flex-wrap: wrap;
    }

    .contribution-summary {
        grid-template-columns: 1fr;
    }

    .rank-detail {
        display: none;
    }
}

/* ========== 全屏表格样式 ========== */
.tab-fullscreen {
    display: none;
    padding: 16px 24px;
}

.tab-fullscreen.active {
    display: flex;
    flex-direction: column;
}

.fullscreen-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fullscreen-table .table-header {
    flex-shrink: 0;
}

.fullscreen-table .filter-panel {
    flex-shrink: 0;
}

.fullscreen-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.fullscreen-table .data-table {
    min-width: 100%;
}

/* 表头排序样式 */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
    transition: background 0.2s;
}

.data-table th.sortable:hover {
    background: var(--border);
}

.data-table th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.5;
}

.data-table th.sortable.asc::after {
    content: '↑';
    color: var(--primary);
    opacity: 1;
}

.data-table th.sortable.desc::after {
    content: '↓';
    color: var(--primary);
    opacity: 1;
}

.data-table th.sortable.asc,
.data-table th.sortable.desc {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
}

/* 排序提示 */
.sort-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 12px;
    background: rgba(37, 99, 235, 0.05);
    border-radius: var(--radius-sm);
    margin-left: auto;
    margin-right: 12px;
}

/* 表格行交替颜色 */
.data-table tbody tr:nth-child(even) {
    background: var(--bg-light);
}

.data-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

/* 固定表头 */
.fullscreen-container .data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-white);
}

.fullscreen-container .data-table thead th {
    box-shadow: 0 1px 0 var(--border);
}

/* ========== 周度对比分析 ========== */
.week-compare-section {
    margin-bottom: 24px;
}

.week-compare-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.week-compare-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.week-icon { font-size: 20px; }
.week-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.week-range {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.week-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.week-card {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.week-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.metric-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.week-metric-compare {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-item .period {
    font-size: 12px;
    color: var(--text-muted);
}

.metric-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.metric-item .value.muted {
    color: var(--text-muted);
    font-weight: 400;
}

.metric-item .value.positive { color: var(--success); }
.metric-item .value.negative { color: var(--danger); }

.week-trend-chart {
    height: 280px;
}

/* ========== 运营日历概览 ========== */
.calendar-section {
    margin-bottom: 24px;
}

.calendar-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.calendar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.calendar-icon { font-size: 20px; }
.calendar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.cal-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.cal-stat .cal-num {
    font-size: 28px;
    font-weight: 700;
}

.cal-stat .cal-label {
    font-size: 12px;
    color: var(--text-muted);
}

.cal-stat.profit .cal-num { color: var(--success); }
.cal-stat.loss .cal-num { color: var(--danger); }
.cal-stat.neutral .cal-num { color: var(--primary); }

.calendar-highlights {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.highlight-item {
    flex: 1;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.highlight-item.best {
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.highlight-item.worst {
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.hl-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.hl-date {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.hl-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--success);
}

.hl-value.negative { color: var(--danger); }

.calendar-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cal-day {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.cal-day:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow);
}

.cal-day.profit {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cal-day.loss {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cal-day.zero {
    background: var(--bg-light);
    border: 1px solid var(--border);
}

.day-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.day-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 4px;
}

.cal-day.profit .day-status { background: var(--success); }
.cal-day.loss .day-status { background: var(--danger); }
.cal-day.zero .day-status { background: var(--text-muted); }

/* ========== 利润波动预警 ========== */
.volatility-section {
    margin-bottom: 24px;
}

.volatility-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.volatility-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.volatility-icon { font-size: 20px; }
.volatility-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.volatility-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.volatility-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.volatility-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
}

.volatility-item.severe {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.vol-date {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.vol-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.vol-profit {
    font-size: 18px;
    font-weight: 700;
}

.vol-change {
    font-size: 13px;
    font-weight: 500;
}

.vol-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.vol-suggestion {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-white);
    border-radius: 4px;
}

/* ========== 成本优化建议 ========== */
.cost-opt-section {
    margin-bottom: 24px;
}

.cost-opt-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.cost-opt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.cost-opt-icon { font-size: 20px; }
.cost-opt-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cost-opt-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.cost-opt-ok {
    padding: 20px;
    text-align: center;
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
}

.cost-opt-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cost-opt-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
}

.cost-opt-item.danger {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.opt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.opt-category {
    font-weight: 600;
    color: var(--text-primary);
}

.opt-ratio {
    font-size: 16px;
    font-weight: 700;
    color: var(--danger);
}

.opt-threshold {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.opt-value {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.opt-suggestion {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========== 热力图 ========== */
.heatmap-section {
    margin-bottom: 24px;
}

.heatmap-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.heatmap-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.heatmap-icon { font-size: 20px; }
.heatmap-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.heatmap-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* ========== 第四阶段：商品波动监控 ========== */
.product-monitor-section {
    margin-bottom: 24px;
}

.monitor-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.monitor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.monitor-icon { font-size: 20px; }
.monitor-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.monitor-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.monitor-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.monitor-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.monitor-stat .num {
    font-size: 24px;
    font-weight: 700;
}

.monitor-stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

.monitor-stat.danger .num { color: var(--danger); }
.monitor-stat.warning .num { color: var(--warning); }
.monitor-stat.success .num { color: var(--success); }

.monitor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.monitor-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
    transition: all 0.2s;
}

.monitor-item:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.monitor-item.danger {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.monitor-item.warning {
    border-left-color: var(--warning);
}

.monitor-item.info {
    border-left-color: var(--primary);
}

.monitor-product-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 14px;
}

.monitor-alert-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 8px;
}

.monitor-alert-type.danger {
    background: var(--danger);
    color: white;
}

.monitor-alert-type.warning {
    background: var(--warning);
    color: white;
}

.monitor-metrics {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.monitor-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.monitor-metric .value {
    font-weight: 600;
}

.monitor-metric .value.negative { color: var(--danger); }
.monitor-metric .value.positive { color: var(--success); }

.monitor-suggestion {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--bg-white);
    border-radius: 4px;
}

/* ========== 第四阶段：利润结构瀑布图 ========== */
.profit-structure-section {
    margin-bottom: 24px;
}

.structure-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.structure-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.structure-icon { font-size: 20px; }
.structure-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.structure-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.structure-chart {
    height: 400px;
}

.structure-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.structure-stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.structure-stat .label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.structure-stat .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.structure-stat .value.positive { color: var(--success); }
.structure-stat .value.negative { color: var(--danger); }

/* ========== 第四阶段：每日运营简报 ========== */
.daily-brief-section {
    margin-bottom: 24px;
}

.brief-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.brief-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.brief-icon { font-size: 20px; }
.brief-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.brief-date {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.brief-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.brief-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brief-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.brief-kpi {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.brief-kpi .label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.brief-kpi .value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.brief-kpi .change {
    font-size: 12px;
    margin-top: 4px;
}

.brief-kpi .change.up { color: var(--success); }
.brief-kpi .change.down { color: var(--danger); }

.brief-highlights {
    padding: 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: var(--radius-sm);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.brief-highlights h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.brief-highlight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brief-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.brief-highlight-item .emoji {
    font-size: 14px;
}

.brief-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brief-alerts {
    padding: 16px;
    background: rgba(239, 68, 68, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.brief-alerts h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.brief-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brief-alert-item {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px;
    background: var(--bg-white);
    border-radius: 4px;
}

.brief-tips {
    padding: 16px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.brief-tips h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.brief-tip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brief-tip-item {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px;
    background: var(--bg-white);
    border-radius: 4px;
}

/* ========== 第四阶段：采购效率分析 ========== */
.purchase-analysis-section {
    margin-bottom: 24px;
}

.purchase-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.purchase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.purchase-icon { font-size: 20px; }
.purchase-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.purchase-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.purchase-card {
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
    transition: all 0.2s;
}

.purchase-card:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.purchase-card.excellent { border-left-color: var(--success); }
.purchase-card.good { border-left-color: var(--primary); }
.purchase-card.fair { border-left-color: var(--warning); }
.purchase-card.poor { border-left-color: var(--danger); }

.purchase-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 12px;
}

.purchase-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.purchase-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.purchase-metric .label {
    font-size: 11px;
    color: var(--text-muted);
}

.purchase-metric .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.purchase-metric .value.positive { color: var(--success); }
.purchase-metric .value.negative { color: var(--danger); }

.purchase-efficiency {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.efficiency-label {
    font-size: 12px;
    color: var(--text-muted);
}

.efficiency-score {
    font-size: 16px;
    font-weight: 700;
}

.efficiency-score.excellent { color: var(--success); }
.efficiency-score.good { color: var(--primary); }
.efficiency-score.fair { color: var(--warning); }
.efficiency-score.poor { color: var(--danger); }

/* ========== 第四阶段：退款风险商品 ========== */
.refund-risk-section {
    margin-bottom: 24px;
}

.refund-risk-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.refund-risk-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.refund-risk-icon { font-size: 20px; }
.refund-risk-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.refund-risk-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.refund-risk-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.risk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.risk-stat .num {
    font-size: 28px;
    font-weight: 700;
}

.risk-stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

.risk-stat.high .num { color: var(--danger); }
.risk-stat.medium .num { color: var(--warning); }
.risk-stat.low .num { color: var(--primary); }

.refund-risk-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.refund-risk-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
    transition: all 0.2s;
}

.refund-risk-item:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.refund-risk-item.high {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.refund-risk-item.medium {
    border-left-color: var(--warning);
}

.refund-risk-item.low {
    border-left-color: var(--primary);
}

.risk-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.risk-product-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.risk-level-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.risk-level-badge.high {
    background: var(--danger);
    color: white;
}

.risk-level-badge.medium {
    background: var(--warning);
    color: white;
}

.risk-level-badge.low {
    background: var(--primary);
    color: white;
}

.risk-metrics {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.risk-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.risk-metric .value {
    font-weight: 600;
}

.risk-metric .value.danger { color: var(--danger); }

.risk-suggestion {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--bg-white);
    border-radius: 4px;
}

/* ========== 数据准确性提示 ========== */
.data-accuracy-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--warning);
}

.data-accuracy-notice .icon {
    font-size: 16px;
}

.data-accuracy-notice .text {
    color: var(--text-secondary);
}

/* ========== 商品监控模块补充样式 ========== */
.monitor-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.summary-item .sum-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-item .sum-label {
    font-size: 12px;
    color: var(--text-muted);
}

.summary-item.danger .sum-num { color: var(--danger); }
.summary-item.warning .sum-num { color: var(--warning); }
.summary-item.success .sum-num { color: var(--success); }

.stat-alert {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.stat-ok {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.list-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.item-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-profit {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
}

.item-profit.negative {
    color: var(--danger);
}

.item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.item-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.issue-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.issue-tag.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.issue-tag.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.issue-tag.info {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.monitor-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
    color: var(--success);
    font-size: 14px;
}

.ok-icon {
    font-size: 20px;
}

/* ========== 利润结构补充样式 ========== */
.structure-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.cost-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-name {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 80px;
}

.bar-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 100px;
    text-align: right;
}

.bar-pct {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 50px;
    text-align: right;
}

.bar-track {
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.structure-rate {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}

.structure-rate.good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.structure-rate.fair {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.structure-rate.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ========== 运营简报补充样式 ========== */
.brief-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.brief-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.brief-metric.negative {
    background: rgba(239, 68, 68, 0.05);
}

.metric-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.brief-metric.negative .metric-value {
    color: var(--danger);
}

.metric-label {
    font-size: 12px;
    color: var(--text-muted);
}

.metric-change {
    font-size: 12px;
    font-weight: 500;
}

.metric-change .positive {
    color: var(--success);
}

.metric-change .negative {
    color: var(--danger);
}

.highlights-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.highlight-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.highlight-row:last-child {
    border-bottom: none;
}

.hl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 5px;
    flex-shrink: 0;
}

.highlight-row.success .hl-dot { background: var(--success); }
.highlight-row.warning .hl-dot { background: var(--warning); }
.highlight-row.danger .hl-dot { background: var(--danger); }

.hl-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ========== 采购分析补充样式 ========== */
.purchase-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purchase-item {
    display: grid;
    grid-template-columns: 40px 1fr 100px 120px 80px;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.purchase-item:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.purchase-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
}

.purchase-item:nth-child(1) .purchase-rank { background: #fbbf24; }
.purchase-item:nth-child(2) .purchase-rank { background: #94a3b8; }
.purchase-item:nth-child(3) .purchase-rank { background: #cd7c32; }

.purchase-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.purchase-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.purchase-profit {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
    text-align: right;
}

.purchase-profit.negative {
    color: var(--danger);
}

.purchase-contrib {
    position: relative;
    height: 24px;
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
}

.contrib-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #8b5cf6);
    border-radius: 12px;
    transition: width 0.6s ease;
}

.contrib-text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.purchase-eff {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
}

.purchase-eff.good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.purchase-eff.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ========== 退款风险补充样式 ========== */
.risk-icon {
    font-size: 20px;
}

.risk-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.risk-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.risk-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
    color: var(--success);
    font-size: 14px;
}

.risk-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
    transition: all 0.2s;
}

.risk-item:hover {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

.risk-item.high {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.risk-item.medium {
    border-left-color: var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.risk-item.low {
    border-left-color: var(--primary);
}

.risk-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.risk-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.risk-rate {
    font-size: 18px;
    font-weight: 700;
    color: var(--danger);
}

.risk-detail {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.risk-suggest {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px 12px;
    background: var(--bg-white);
    border-radius: 4px;
    line-height: 1.5;
}

/* ========== 简化卡片样式（第四阶段优化） ========== */

/* 简单状态卡片 */
.simple-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.simple-card.success-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
    border-color: rgba(16, 185, 129, 0.2);
}

.simple-card-icon {
    font-size: 32px;
}

.simple-card-content {
    flex: 1;
}

.simple-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.simple-card-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* 预警卡片 */
.alert-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 16px;
}

.alert-card.warning-card {
    border-left: 4px solid var(--warning);
}

.alert-card-header {
    margin-bottom: 16px;
}

.alert-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.alert-icon {
    font-size: 18px;
}

.alert-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-radius: 12px;
    margin-left: auto;
}

.alert-card-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* 预警统计行 */
.alert-stats-row {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.alert-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.alert-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.alert-stat-num.danger { color: var(--danger); }
.alert-stat-num.warning { color: var(--warning); }

.alert-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* 预警列表 */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--warning);
}

.alert-item.danger {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.03);
}

.alert-item-left {
    flex: 1;
    min-width: 0;
}

.alert-item-id {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.alert-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mini-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.mini-tag.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.alert-item-right {
    font-size: 15px;
    font-weight: 700;
    color: var(--success);
    text-align: right;
    flex-shrink: 0;
}

.alert-item-right.negative {
    color: var(--danger);
}

.alert-more {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

.alert-tip {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-top: 12px;
}

/* 运营快报卡片 */
.brief-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 16px;
}

.brief-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.brief-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.brief-card-date {
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 12px;
    background: var(--bg-light);
    border-radius: 12px;
}

.brief-card-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.brief-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.brief-kpi-item {
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.brief-kpi-item.negative {
    background: rgba(239, 68, 68, 0.05);
}

.kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.brief-kpi-item.negative .kpi-value {
    color: var(--danger);
}

.change-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.change-tag.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.change-tag.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.brief-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.brief-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.point-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.brief-point.success .point-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.brief-point.warning .point-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.brief-point.danger .point-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.point-text {
    flex: 1;
    line-height: 1.5;
}

/* 排行卡片 */
.ranking-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 16px;
}

.ranking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ranking-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.ranking-card-count {
    font-size: 12px;
    color: var(--text-muted);
}

.ranking-card-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.ranking-medal {
    font-size: 24px;
    width: 36px;
    text-align: center;
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.ranking-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.ranking-value {
    text-align: right;
}

.ranking-profit {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
}

.ranking-value.negative .ranking-profit {
    color: var(--danger);
}

.ranking-pct {
    font-size: 11px;
    color: var(--text-muted);
}

/* 退款列表 */
.refund-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refund-item {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--warning);
}

.refund-item.high {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.03);
}

.refund-item-id {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.refund-item-rate {
    font-size: 16px;
    font-weight: 700;
    color: var(--danger);
    text-align: center;
}

.refund-item-info {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

/* ========== 响应式补充 ========== */
@media (max-width: 1200px) {
    .week-compare-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .monitor-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .monitor-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .structure-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .brief-content {
        grid-template-columns: 1fr;
    }

    .brief-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .purchase-item {
        grid-template-columns: 40px 1fr 80px;
        gap: 12px;
    }

    .purchase-contrib,
    .purchase-eff {
        display: none;
    }

    .brief-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .week-compare-grid {
        grid-template-columns: 1fr;
    }

    .calendar-summary {
        flex-wrap: wrap;
    }

    .calendar-highlights {
        flex-direction: column;
    }

    .monitor-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .monitor-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .brief-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .brief-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .brief-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .refund-risk-summary {
        flex-wrap: wrap;
    }

    .risk-stat {
        padding: 12px 20px;
    }

    .purchase-item {
        grid-template-columns: 32px 1fr;
        gap: 10px;
    }

    .purchase-profit {
        display: none;
    }

    .item-id,
    .risk-id,
    .alert-item-id,
    .refund-item-id {
        max-width: 120px;
    }

    .bar-info {
        flex-wrap: wrap;
    }

    .alert-stats-row {
        gap: 16px;
    }

    .refund-item {
        grid-template-columns: 1fr 50px;
    }

    .refund-item-info {
        display: none;
    }

    .ranking-item {
        padding: 12px;
        gap: 12px;
    }

    .ranking-medal {
        font-size: 20px;
        width: 28px;
    }
}

@media (max-width: 480px) {
    .monitor-stats {
        grid-template-columns: 1fr;
    }

    .monitor-summary {
        grid-template-columns: 1fr;
    }

    .structure-summary {
        grid-template-columns: 1fr;
    }

    .brief-kpi-row {
        grid-template-columns: 1fr;
    }

    .brief-summary {
        grid-template-columns: 1fr;
    }

    .brief-kpi-grid {
        grid-template-columns: 1fr;
    }

    .purchase-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .purchase-rank {
        margin: 0 auto 8px;
    }

    .item-id,
    .risk-id,
    .alert-item-id,
    .refund-item-id {
        max-width: 100%;
    }

    .risk-detail {
        flex-direction: column;
        gap: 4px;
    }

    .alert-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .alert-item-right {
        align-self: flex-end;
    }

    .ranking-item {
        flex-wrap: wrap;
    }

    .ranking-value {
        width: 100%;
        text-align: left;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-light);
    }
}

/* ========== 商品诊断页面（现代化设计 v3.0 - 卡片式布局） ========== */

/* 诊断页面容器 */
#tab-diagnosis {
    padding: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0fdf4 100%);
    height: calc(100vh - 180px);
    overflow: hidden;
}

.diag-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 20px;
}

/* ===== 顶部概览区域 ===== */
.diag-overview {
    background: white;
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.overview-title h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overview-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

/* 视图切换按钮 */
.view-toggle {
    display: flex;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.view-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.view-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.view-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 统计卡片网格 */
.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-card.active {
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}

.stat-card.active::before {
    opacity: 1;
}

/* 统计卡片颜色主题 */
.stat-card.all::before { background: linear-gradient(180deg, #2563eb, #6366f1); }
.stat-card.all.active { background: linear-gradient(135deg, #eff6ff, #eef2ff); }

.stat-card.problem::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.stat-card.problem.active { background: linear-gradient(135deg, #fffbeb, #fef3c7); }

.stat-card.loss::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.stat-card.loss.active { background: linear-gradient(135deg, #fef2f2, #fee2e2); }

.stat-card.highRefund::before { background: linear-gradient(180deg, #f97316, #ea580c); }
.stat-card.highRefund.active { background: linear-gradient(135deg, #fff7ed, #ffedd5); }

.stat-card.star::before { background: linear-gradient(180deg, #22c55e, #16a34a); }
.stat-card.star.active { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }

.stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-card-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* 保留旧布局样式以兼容 */
.diag-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 200px);
    min-height: 500px;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* ===== 筛选工具栏 ===== */
.diag-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 8px 16px;
    border: none;
    background: var(--bg-light);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-tab:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--primary);
    color: white;
}

.filter-tab .count {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.filter-tab.active .count {
    background: rgba(255, 255, 255, 0.25);
}

.filter-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box {
    position: relative;
}

.search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 220px;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 13px;
    background: var(--bg-light);
    transition: all 0.2s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.sort-select {
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-primary);
    cursor: pointer;
}

/* ===== 主内容区域 ===== */
.diag-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== 商品卡片网格 ===== */
.diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 4px;
}

.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(37, 99, 235, 0.15);
}

.product-card:hover::before {
    opacity: 1;
}

.product-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 8px 24px rgba(37, 99, 235, 0.1);
}

.product-card.selected::before {
    opacity: 1;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.card-image {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-light);
    position: relative;
    cursor: pointer;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-image:hover img {
    transform: scale(1.1);
}

.card-image::after {
    content: '🔍';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card-image:hover::after {
    opacity: 1;
}

.card-info {
    flex: 1;
    min-width: 0;
}

.card-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.loss {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.status-badge.highRefund {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
}

.status-badge.star {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
}

.status-badge.normal {
    background: var(--bg-light);
    color: var(--text-secondary);
}

/* 健康度评分 */
.health-ring {
    width: 44px;
    height: 44px;
    position: relative;
}

.health-ring svg {
    transform: rotate(-90deg);
}

.health-ring .ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 4;
}

.health-ring .ring-progress {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.health-ring .ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
}

/* 卡片数据区域 */
.card-body {
    padding: 16px;
}

.card-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metric-item {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 12px;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value.positive { color: var(--success); }
.metric-value.negative { color: var(--danger); }

/* ===== 新版卡片布局 ===== */
.card-top {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(145deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-image-large {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-image-large:hover img {
    transform: scale(1.1);
}

.card-image-large::after {
    content: '🔍';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card-image-large:hover::after {
    opacity: 1;
}

.card-top-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-id-row .card-id {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.card-top-right .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* 健康度进度条 */
.health-bar-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.health-bar-mini .health-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.health-bar-mini .health-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.health-bar-mini .health-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.health-bar-mini .health-score {
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: right;
}

/* 指标网格 3x2 */
.card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: linear-gradient(180deg, #e8ecf1, #f1f5f9);
    padding: 1px;
}

.card-metrics-grid .metric-cell {
    background: white;
    padding: 14px 10px;
    text-align: center;
    transition: background 0.2s ease;
}

.card-metrics-grid .metric-cell:hover {
    background: #fafbfc;
}

.card-metrics-grid .metric-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.card-metrics-grid .metric-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.card-metrics-grid .metric-value.positive {
    color: var(--success);
}

.card-metrics-grid .metric-value.negative {
    color: var(--danger);
}

/* ===== 详情抽屉组件 ===== */
.diag-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.diag-drawer.open {
    pointer-events: auto;
    opacity: 1;
}

.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.drawer-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 75vw;
    max-width: 1400px;
    min-width: 600px;
    height: 100%;
    background: white;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.diag-drawer.open .drawer-content {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.drawer-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-light);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}

.drawer-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.drawer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.drawer-placeholder .placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.drawer-placeholder .placeholder-text {
    font-size: 14px;
}

/* ===== 空状态样式 ===== */
.diag-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-illustration {
    margin-bottom: 24px;
    opacity: 0.8;
}

.diag-empty .empty-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.diag-empty .empty-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== 分页样式 ===== */
.diag-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 8px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    background: white;
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.page-info {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 16px;
}

/* ===== 抽屉内部样式 ===== */
.drawer-product-header {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
}

.drawer-product-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-light);
}

.drawer-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drawer-product-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    word-break: break-all;
}

.drawer-product-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.status-badge.large {
    padding: 6px 14px;
    font-size: 12px;
}

.drawer-section {
    margin-bottom: 24px;
}

.drawer-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.drawer-metric {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 14px;
}

.drawer-metric .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.drawer-metric .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.drawer-metric .value.positive { color: var(--success); }
.drawer-metric .value.negative { color: var(--danger); }

.drawer-chart {
    height: 200px;
    background: var(--bg-light);
    border-radius: 12px;
}

/* 左侧主内容区 */
.diag-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
}

/* 顶部工具栏 - 现代玻璃态设计 */
.diag-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    flex-shrink: 0;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.diag-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.diag-title::before {
    content: '';
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, var(--primary), #8b5cf6);
    border-radius: 2px;
}

.diag-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.toolbar-select {
    padding: 8px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.toolbar-select:hover {
    border-color: var(--primary-light);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.toolbar-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.toolbar-search {
    position: relative;
}

.toolbar-search input {
    width: 200px;
    padding: 8px 14px 8px 36px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.25s ease;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") 12px center no-repeat;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.toolbar-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    width: 260px;
}

/* 快速统计条 - 现代胶囊设计 */
.diag-quick-stats {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow-x: auto;
}

.quick-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.quick-stat-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-stat-item.active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.quick-stat-item .stat-num {
    font-weight: 700;
    font-size: 15px;
}

.quick-stat-item .stat-text {
    font-size: 12px;
    opacity: 0.9;
}

/* 快速统计项 - 不同状态的颜色主题 */
.quick-stat-item.all {
    color: var(--text-secondary);
}
.quick-stat-item.all:hover,
.quick-stat-item.all.active {
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: white;
    border-color: transparent;
}

.quick-stat-item.problem {
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.2);
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.quick-stat-item.problem:hover,
.quick-stat-item.problem.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-color: transparent;
}

.quick-stat-item.loss {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.2);
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
.quick-stat-item.loss:hover,
.quick-stat-item.loss.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-color: transparent;
}

.quick-stat-item.highRefund {
    color: #ea580c;
    border-color: rgba(234, 88, 12, 0.2);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.quick-stat-item.highRefund:hover,
.quick-stat-item.highRefund.active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border-color: transparent;
}

.quick-stat-item.lowMargin {
    color: #ca8a04;
    border-color: rgba(202, 138, 4, 0.2);
    background: linear-gradient(135deg, #fefce8, #fef9c3);
}
.quick-stat-item.lowMargin:hover,
.quick-stat-item.lowMargin.active {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white;
    border-color: transparent;
}

.quick-stat-item.highCost {
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.2);
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}
.quick-stat-item.highCost:hover,
.quick-stat-item.highCost.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border-color: transparent;
}

.quick-stat-item.lowSales {
    color: #0891b2;
    border-color: rgba(8, 145, 178, 0.2);
    background: linear-gradient(135deg, #ecfeff, #cffafe);
}
.quick-stat-item.lowSales:hover,
.quick-stat-item.lowSales.active {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    border-color: transparent;
}

.quick-stat-item.star {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.2);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.quick-stat-item.star:hover,
.quick-stat-item.star.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-color: transparent;
}

/* 旧版快速统计样式兼容 */
.quick-stat-item.refund {
    color: #ea580c;
    border-color: rgba(234, 88, 12, 0.2);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.quick-stat-item.refund:hover,
.quick-stat-item.refund.active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border-color: transparent;
}

.quick-stat-item.margin {
    color: #ca8a04;
    border-color: rgba(202, 138, 4, 0.2);
    background: linear-gradient(135deg, #fefce8, #fef9c3);
}
.quick-stat-item.margin:hover,
.quick-stat-item.margin.active {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white;
    border-color: transparent;
}

.quick-stat-item.cost {
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.2);
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}
.quick-stat-item.cost:hover,
.quick-stat-item.cost.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border-color: transparent;
}

.quick-stat-item.sales {
    color: #0891b2;
    border-color: rgba(8, 145, 178, 0.2);
    background: linear-gradient(135deg, #ecfeff, #cffafe);
}
.quick-stat-item.sales:hover,
.quick-stat-item.sales.active {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    border-color: transparent;
}

/* 数据表格区域 */
.diag-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.diag-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.diag-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.diag-table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-light);
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diag-table th.col-checkbox {
    width: 48px;
    text-align: center;
}

.diag-table th.col-product {
    min-width: 180px;
}

.diag-table th.col-text {
    width: 100px;
    min-width: 80px;
}

.diag-table th.col-status {
    width: 100px;
}

.diag-table th.col-health {
    width: 90px;
}

.diag-table th.col-number {
    width: 100px;
    text-align: right;
}

.diag-table th.col-action {
    width: 70px;
    text-align: center;
}

.diag-table td.col-text {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diag-table tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.diag-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.04), rgba(139, 92, 246, 0.02)) !important;
}

.diag-table tbody tr.selected {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(139, 92, 246, 0.04)) !important;
    box-shadow: inset 4px 0 0 var(--primary);
}

.diag-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
    font-size: 13px;
}

.diag-table td.col-checkbox {
    text-align: center;
}

.diag-table input[type="checkbox"],
.row-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    border-radius: 4px;
}

.diag-table td.col-number {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 500;
}

.diag-table td.col-action {
    text-align: center;
}

/* 商品列样式 */
.product-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-id {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-size: 13px;
}

.product-tenant {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-tenant::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
}

.product-issue {
    font-size: 11px;
    color: var(--text-muted);
}

/* 表格行颜色 - 渐变背景 */
.diag-row.loss { background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent); }
.diag-row.highRefund { background: linear-gradient(90deg, rgba(249, 115, 22, 0.06), transparent); }
.diag-row.lowMargin { background: linear-gradient(90deg, rgba(234, 179, 8, 0.06), transparent); }
.diag-row.highCost { background: linear-gradient(90deg, rgba(139, 92, 246, 0.06), transparent); }
.diag-row.lowSales { background: linear-gradient(90deg, rgba(6, 182, 212, 0.06), transparent); }
.diag-row.star { background: linear-gradient(90deg, rgba(34, 197, 94, 0.06), transparent); }
.diag-row.potential { background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent); }
.diag-row.normal { background: white; }

/* 表格行入场动画 */
@keyframes diagRowEnter {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.diag-row {
    animation: diagRowEnter 0.3s ease forwards;
}

/* 搜索高亮 */
.search-highlight {
    background: linear-gradient(135deg, #fef08a, #fde047);
    color: #854d0e;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* 数值颜色 */
.col-number.positive { color: var(--success); font-weight: 600; }
.col-number.negative { color: var(--error); font-weight: 600; }

/* 状态标签 - 现代胶囊设计 */
.status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.status-tag.loss {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.status-tag.highRefund {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
}

.status-tag.lowMargin {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    color: #ca8a04;
}

.status-tag.highCost {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    color: #7c3aed;
}

.status-tag.lowSales {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    color: #0891b2;
}

.status-tag.star {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
}

.status-tag.potential {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
}

.status-tag.normal {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #64748b;
}

/* 数值着色 */
.value-positive { color: var(--success); }
.value-negative { color: var(--error); }
.value-warning { color: var(--warning); }

/* 操作按钮 */
.action-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: linear-gradient(135deg, var(--primary), #6366f1);
    border-color: transparent;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* 分页 - 现代设计 */
.diag-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
    flex-shrink: 0;
}

.pagination-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pagination-info,
.page-info {
    font-size: 13px;
    color: var(--text-muted);
}

.pagination-btns,
.page-btns {
    display: flex;
    gap: 6px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.page-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.1);
}

.page-btn.active {
    background: linear-gradient(135deg, var(--primary), #6366f1);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-dots {
    color: var(--text-muted);
    padding: 0 8px;
    user-select: none;
}

/* 空状态 */
.diag-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 56px;
    margin-bottom: 20px;
    opacity: 0.4;
}

.empty-text {
    font-size: 15px;
    color: var(--text-secondary);
}

/* 右侧详情面板 - 现代滑出设计 */
.diag-detail-panel {
    width: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.04);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.06);
}

.diag-detail-panel.open,
.diag-detail-panel.active {
    width: 420px;
}

.detail-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    flex-shrink: 0;
}

.detail-panel-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-panel-header h3::before {
    content: '📊';
    font-size: 18px;
}

.detail-close-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.detail-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.placeholder-text {
    font-size: 14px;
}

/* 详情内容区块 */
.detail-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detail-section-title,
.section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--primary), #8b5cf6);
    border-radius: 2px;
}

/* 详情头部区域 - 渐变背景 */
.detail-header-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    margin: -24px -24px 24px -24px;
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.detail-product-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.detail-product-header h4 {
    margin: 0;
}

.detail-product-id {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    word-break: break-all;
    line-height: 1.4;
}

/* 详情问题标签 */
.detail-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.issue-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
}

/* 状态标签 large */
.status-tag.large {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
}

.detail-product-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 详情指标网格 - 卡片设计 */
.detail-metrics,
.detail-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metric-item,
.detail-metric-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.metric-item:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
}

.metric-item.positive-bg {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: rgba(34, 197, 94, 0.2);
}

.metric-item.negative-bg {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: rgba(239, 68, 68, 0.2);
}

.metric-label,
.detail-metric-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.metric-value,
.detail-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.metric-value.positive,
.detail-metric-value.positive {
    color: var(--success);
}

.metric-value.negative,
.detail-metric-value.negative {
    color: var(--error);
}

/* 详情成本明细 - 列表设计 */
.cost-breakdown,
.detail-cost-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.cost-item:hover {
    border-color: rgba(37, 99, 235, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.cost-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cost-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cost-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    margin-right: 12px;
}

.cost-rate {
    font-size: 11px;
    color: var(--text-muted);
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 45px;
    text-align: center;
    font-weight: 600;
}

.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
    font-size: 13px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 10px;
}

/* 详情建议区域 */
.detail-advice {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 12px;
    padding: 18px;
    border-left: 4px solid var(--primary);
}

.advice-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.advice-title::before {
    content: '💡';
}

.advice-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* 详情图表区域 */
.detail-chart-container,
.detail-chart {
    height: 200px;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .diag-detail-panel.open,
    .diag-detail-panel.active {
        width: 380px;
    }
}

@media (max-width: 1024px) {
    .diag-layout {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .diag-detail-panel {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.04);
    }

    .diag-detail-panel.open,
    .diag-detail-panel.active {
        width: 100% !important;
        max-height: 500px;
    }

    .toolbar-right {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    #tab-diagnosis {
        padding: 12px;
    }

    .diag-toolbar {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
        padding: 16px 18px;
    }

    .toolbar-filters {
        flex-wrap: wrap;
    }

    .toolbar-search input {
        width: 100%;
    }

    .diag-quick-stats {
        padding: 12px 18px;
    }

    .quick-stat-item {
        padding: 6px 12px;
        font-size: 12px;
    }

    .diag-table th,
    .diag-table td {
        padding: 12px 14px;
    }

    .detail-metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .diag-table {
        font-size: 12px;
    }

    .product-id {
        max-width: 120px;
    }

    .status-tag {
        font-size: 10px;
        padding: 2px 8px;
    }
}

/* ========== 成本分析卡片增强样式 ========== */

/* 成本汇总条 */
.cost-summary-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: var(--radius);
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
    grid-column: 1 / -1;
}

.cost-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cost-summary-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.cost-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.cost-summary-value.success { color: var(--success); }
.cost-summary-value.warning { color: var(--warning); }
.cost-summary-value.danger { color: var(--danger); }

.cost-summary-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* 成本卡片网格 */
.cost-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    grid-column: 1 / -1;
}

/* 成本卡片 */
.cost-card {
    position: relative;
    overflow: hidden;
}

.cost-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--text-muted);
    border-radius: var(--radius) var(--radius) 0 0;
}

.cost-card.success::before { background: var(--success); }
.cost-card.warning::before { background: var(--warning); }
.cost-card.danger::before { background: var(--danger); }

/* 卡片头部行 */
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* 健康状态徽章 */
.card-health-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-light);
    color: var(--text-muted);
}

.card-health-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.card-health-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.card-health-badge.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* 成本比率进度条 */
.cost-ratio-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.cost-ratio-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--text-muted);
}

.cost-ratio-fill.success { background: var(--success); }
.cost-ratio-fill.warning { background: var(--warning); }
.cost-ratio-fill.danger { background: var(--danger); }

/* 响应式适配 */
@media (max-width: 1200px) {
    .cost-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cost-summary-bar {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .cost-summary-divider {
        width: 60px;
        height: 1px;
    }

    .cost-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== 表格统计汇总行样式 ========== */
.data-table .summary-row {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-top: 2px solid var(--primary);
    font-weight: 600;
}

.data-table .summary-row:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
}

.data-table .summary-row td {
    padding: 12px 16px;
    border-bottom: none;
    color: var(--text-primary);
}

.data-table .summary-row .summary-cell {
    font-weight: 700;
}

.data-table .summary-row .positive-value {
    color: var(--success);
    font-weight: 700;
}

.data-table .summary-row .negative-value {
    color: var(--danger);
    font-weight: 700;
}

/* 表格增强悬停效果 */
.data-table tbody tr {
    transition: all 0.15s ease;
}

.data-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.06) !important;
    transform: scale(1.001);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

/* 行点击选中效果 */
.data-table tbody tr.selected {
    background: rgba(37, 99, 235, 0.1) !important;
    box-shadow: inset 4px 0 0 var(--primary);
}

/* 清除搜索按钮增强 */
.btn-clear-search {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: var(--text-muted);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-search:hover .btn-clear-search,
.table-search:focus-within .btn-clear-search {
    opacity: 0.6;
}

.btn-clear-search:hover {
    opacity: 1 !important;
    background: var(--danger);
}

/* 表格搜索容器 */
.table-search {
    position: relative;
}

/* ========================================
   商品诊断 - 健康评分徽章样式
   ======================================== */

/* 健康度列 */
.col-health {
    width: 90px;
    text-align: center;
}

/* 健康评分徽章 */
.health-score-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.health-score-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.health-score-badge .score-value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.health-score-badge .score-label {
    font-size: 10px;
    opacity: 0.9;
    font-weight: 500;
}

/* 健康评分等级样式 */
.health-score-badge.excellent {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

.health-score-badge.good {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.health-score-badge.fair {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(250, 173, 20, 0.3);
}

.health-score-badge.poor {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

/* 健康评分详情弹出层 */
.health-score-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.health-score-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.health-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.health-tooltip-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.health-tooltip-score {
    font-size: 24px;
    font-weight: 700;
}

.health-tooltip-score.excellent { color: #52c41a; }
.health-tooltip-score.good { color: #1890ff; }
.health-tooltip-score.fair { color: #faad14; }
.health-tooltip-score.poor { color: #ff4d4f; }

.health-tooltip-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.health-tooltip-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.health-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.health-item-icon.profit { background: rgba(82, 196, 26, 0.1); }
.health-item-icon.refund { background: rgba(255, 77, 79, 0.1); }
.health-item-icon.cost { background: rgba(250, 173, 20, 0.1); }
.health-item-icon.sales { background: rgba(24, 144, 255, 0.1); }

.health-item-content {
    flex: 1;
}

.health-item-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.health-item-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.health-item-deduct {
    font-size: 12px;
    color: #ff4d4f;
    font-weight: 500;
}

/* 详情面板健康评分区域 */
.detail-health-section {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(82, 196, 26, 0.05) 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.detail-health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.detail-health-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-health-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-health-score .score-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.detail-health-score .score-circle.excellent {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}
.detail-health-score .score-circle.good {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}
.detail-health-score .score-circle.fair {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
}
.detail-health-score .score-circle.poor {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
}

.detail-health-score .score-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.detail-health-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.health-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.health-bar-label {
    width: 70px;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.health-bar-track {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.health-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.health-bar-fill.profit { background: linear-gradient(90deg, #52c41a, #73d13d); }
.health-bar-fill.refund { background: linear-gradient(90deg, #ff4d4f, #ff7875); }
.health-bar-fill.cost { background: linear-gradient(90deg, #faad14, #ffc53d); }
.health-bar-fill.sales { background: linear-gradient(90deg, #1890ff, #40a9ff); }

.health-bar-value {
    width: 50px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 健康评分说明列表 */
.health-deduct-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

.health-deduct-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.health-deduct-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
}

.health-deduct-item .deduct-icon {
    color: #ff4d4f;
}

.health-deduct-item .deduct-reason {
    flex: 1;
    color: var(--text-primary);
}

.health-deduct-item .deduct-score {
    color: #ff4d4f;
    font-weight: 600;
}

/* 快速统计条 - 健康度分组 */
.quick-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    margin: 0 8px;
    flex-shrink: 0;
}

.quick-stat-item.health-excellent {
    border-color: #52c41a;
}
.quick-stat-item.health-excellent:hover,
.quick-stat-item.health-excellent.active {
    background: rgba(82, 196, 26, 0.1);
    border-color: #52c41a;
}
.quick-stat-item.health-excellent .stat-num {
    color: #52c41a;
}

.quick-stat-item.health-good {
    border-color: #1890ff;
}
.quick-stat-item.health-good:hover,
.quick-stat-item.health-good.active {
    background: rgba(24, 144, 255, 0.1);
    border-color: #1890ff;
}
.quick-stat-item.health-good .stat-num {
    color: #1890ff;
}

.quick-stat-item.health-fair {
    border-color: #faad14;
}
.quick-stat-item.health-fair:hover,
.quick-stat-item.health-fair.active {
    background: rgba(250, 173, 20, 0.1);
    border-color: #faad14;
}
.quick-stat-item.health-fair .stat-num {
    color: #faad14;
}

.quick-stat-item.health-poor {
    border-color: #ff4d4f;
}
.quick-stat-item.health-poor:hover,
.quick-stat-item.health-poor.active {
    background: rgba(255, 77, 79, 0.1);
    border-color: #ff4d4f;
}
.quick-stat-item.health-poor .stat-num {
    color: #ff4d4f;
}

/* 无扣分项样式 */
.no-deduct {
    text-align: center;
    color: #52c41a;
    font-size: 12px;
    padding: 8px;
}

/* ========== 智能分析引擎 v2.0 样式 ========== */

/* 根因分析洞察卡片 */
.insight-item.root-cause {
    grid-column: span 2;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    padding: 16px;
}

.insight-item.root-cause.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.insight-item.root-cause.success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.root-cause-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.factor-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.factor-tag.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.factor-tag.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.insight-advice {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 组合预警样式 */
.alert-container.enhanced {
    border: 1px solid #fcd34d;
    background: linear-gradient(135deg, #fffbeb 0%, #fef9e7 100%);
}

.alert-container.enhanced .alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.alert-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

.alert-badge-combo {
    font-size: 11px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.alert-item.combo {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}

.alert-item.combo.danger {
    border-left: 4px solid #ef4444;
}

.alert-item.combo.warning {
    border-left: 4px solid #f59e0b;
}

.alert-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.alert-category {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
}

.alert-insight {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.alert-action-tip {
    font-size: 12px;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.4;
}

/* 生命周期标签 */
.lifecycle-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.lifecycle-badge.coldStart {
    background: rgba(24, 144, 255, 0.15);
    color: #1890ff;
}

.lifecycle-badge.growth {
    background: rgba(82, 196, 26, 0.15);
    color: #52c41a;
}

.lifecycle-badge.mature {
    background: rgba(250, 173, 20, 0.15);
    color: #d48806;
}

.lifecycle-badge.decline {
    background: rgba(255, 77, 79, 0.15);
    color: #ff4d4f;
}

/* 可操作建议卡片 */
.advice-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.advice-card.high {
    border-left: 4px solid #ef4444;
}

.advice-card.medium {
    border-left: 4px solid #f59e0b;
}

.advice-card.low {
    border-left: 4px solid #10b981;
}

.advice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.advice-action {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.advice-priority {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.advice-priority.high {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.advice-priority.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.advice-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 12px;
}

.advice-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.advice-item-label {
    color: var(--text-muted);
}

.advice-item-value {
    color: var(--text-primary);
    font-weight: 500;
}

.advice-steps {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.advice-steps-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.advice-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.advice-step-num {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}

/* 电商专属分析面板 */
.ecommerce-analysis {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.ecommerce-analysis-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.analysis-status.excellent {
    background: rgba(82, 196, 26, 0.15);
    color: #389e0d;
}

.analysis-status.healthy {
    background: rgba(24, 144, 255, 0.15);
    color: #1890ff;
}

.analysis-status.warning {
    background: rgba(250, 173, 20, 0.15);
    color: #d48806;
}

.analysis-status.danger {
    background: rgba(255, 77, 79, 0.15);
    color: #cf1322;
}

.analysis-status.neutral {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

.analysis-insight {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.analysis-suggestion {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
}

/* 退款损耗分解 */
.refund-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.breakdown-item {
    text-align: center;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 8px;
}

.breakdown-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.breakdown-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.breakdown-rate {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .insight-item.root-cause {
        grid-column: span 1;
    }

    .root-cause-factors {
        flex-direction: column;
    }

    .advice-body {
        grid-template-columns: 1fr;
    }

    .refund-breakdown {
        grid-template-columns: 1fr;
    }
}

/* ========== 商品图片组件样式 ========== */

/* 图片容器 */
.product-img-wrap {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 尺寸变体 */
.product-img-thumbnail {
    width: 40px;
    height: 40px;
}

.product-img-small {
    width: 60px;
    height: 60px;
}

.product-img-medium {
    width: 80px;
    height: 80px;
}

.product-img-large {
    width: 120px;
    height: 120px;
}

.product-img-xlarge {
    width: 300px;
    height: 300px;
}

/* 图片本身 */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 可点击样式 */
.img-clickable {
    cursor: pointer;
}

/* 加载中状态 */
.product-img.img-loading {
    opacity: 0.6;
    animation: imgPulse 1.5s ease-in-out infinite;
}

@keyframes imgPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* 加载完成状态 */
.product-img.img-loaded {
    opacity: 1;
    animation: imgFadeIn 0.3s ease;
}

@keyframes imgFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* 加载失败状态 */
.product-img.img-error {
    opacity: 0.5;
}

/* 图片悬停效果 */
.img-clickable:hover .product-img.img-loaded {
    transform: scale(1.05);
}

/* ========== 诊断表格商品列样式 ========== */
.diag-table .product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.diag-table .product-cell .product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* ========== 详情面板图片样式 ========== */
.diag-detail-panel .detail-product-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.diag-detail-panel .detail-product-header .product-img-wrap {
    box-shadow: var(--shadow-md);
}

.detail-product-info {
    flex: 1;
    min-width: 0;
}

/* ========== 数据表格商品列图片 ========== */
.table-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-product-cell .product-id-text {
    font-weight: 500;
}

/* ========== 大图弹窗样式 ========== */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-lightbox.active {
    display: flex;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.lightbox-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-image-wrap {
    width: 300px;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-light);
    box-shadow: var(--shadow-lg);
}

.lightbox-image-wrap .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-product-id {
    margin-top: 16px;
    font-size: 14px;
    color: #fff;
    opacity: 0.9;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========== 商品图片响应式适配 ========== */
@media (max-width: 1200px) {
    .product-img-thumbnail {
        width: 32px;
        height: 32px;
    }

    .product-img-small {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 768px) {
    .diag-table .product-cell {
        gap: 8px;
    }

    .product-img-thumbnail {
        width: 28px;
        height: 28px;
    }

    .lightbox-image-wrap {
        width: 250px;
        height: 250px;
    }

    .lightbox-close {
        top: -30px;
        right: -10px;
    }
}

/* ========== 商品诊断详情面板 - 多维度分析样式 ========== */

/* KPI卡片区 */
.detail-kpi-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.detail-kpi-card {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.detail-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-kpi-card .kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.detail-kpi-card .kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-kpi-card .kpi-value.positive {
    color: var(--success);
}

.detail-kpi-card .kpi-value.negative {
    color: var(--danger);
}

.detail-kpi-card .kpi-trend {
    font-size: 11px;
    margin-top: 4px;
}

.detail-kpi-card .kpi-trend.up {
    color: var(--success);
}

.detail-kpi-card .kpi-trend.down {
    color: var(--danger);
}

/* Tab导航 */
.detail-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.detail-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.detail-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
}

.detail-tab-btn.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tab内容区 */
.detail-tab-content {
    display: none;
}

.detail-tab-content.active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 图表网格布局 */
.detail-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.detail-chart-item {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.detail-chart-item .chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.detail-chart-item .chart-container {
    height: 200px;
}

/* 加载状态 */
.detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
}

.detail-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.detail-loading .loading-text {
    font-size: 13px;
}

/* 无数据状态 */
.detail-no-data {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.detail-no-data .no-data-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

/* 响应式适配 */
@media (max-width: 480px) {
    .detail-kpi-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .detail-kpi-card {
        padding: 10px;
    }

    .detail-kpi-card .kpi-value {
        font-size: 16px;
    }

    .detail-tab-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .detail-chart-item .chart-container {
        height: 180px;
    }
}

/* ========== 智能洞察模块样式 ========== */
.insight-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.insight-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.trend-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.trend-badge.positive {
    background: #d1fae5;
    color: #059669;
}

.trend-badge.negative {
    background: #fee2e2;
    color: #dc2626;
}

.trend-badge.neutral {
    background: #f3f4f6;
    color: #6b7280;
}

.insight-summary {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 20px;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.insight-section {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

.insight-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.change-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.change-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.change-item:hover {
    background: #f3f4f6;
    transform: translateX(4px);
}

.change-item.clickable {
    cursor: pointer;
}

.change-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-id {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.change-rate {
    font-size: 13px;
    font-weight: 600;
}

.change-rate.positive {
    color: #059669;
}

.change-rate.negative {
    color: #dc2626;
}

.change-reason {
    font-size: 12px;
    color: #9ca3af;
}

/* ========== 人效分析模块样式 ========== */
.efficiency-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.efficiency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.efficiency-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.team-summary {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
}

.operator-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.operator-card {
    background: #f9fafb;
    border-radius: 10px;
    padding: 16px;
    transition: all 0.2s;
}

.operator-card:hover {
    background: #f3f4f6;
}

.operator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.operator-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.operator-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.operator-metrics .metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.operator-metrics .label {
    font-size: 12px;
    color: #9ca3af;
}

.operator-metrics .value {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.operator-metrics .change {
    font-size: 12px;
}

.operator-metrics .change.positive {
    color: #059669;
}

.operator-metrics .change.negative {
    color: #dc2626;
}

.operator-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reason-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.reason-tag.positive {
    background: #d1fae5;
    color: #059669;
}

.reason-tag.negative {
    background: #fee2e2;
    color: #dc2626;
}

/* ========== 商品详情面板扩展样式 ========== */
.detail-panel-expanded {
    padding: 20px;
}

.detail-header {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.product-image-large {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.product-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-basic-info {
    flex: 1;
}

.product-basic-info h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.tag.status-loss {
    background: #fee2e2;
    color: #dc2626;
}

.tag.status-refund {
    background: #fef3c7;
    color: #d97706;
}

.tag.status-low-margin {
    background: #e0e7ff;
    color: #4f46e5;
}

.tag.health-excellent {
    background: #d1fae5;
    color: #059669;
}

.tag.health-good {
    background: #dbeafe;
    color: #2563eb;
}

.tag.health-fair {
    background: #fef3c7;
    color: #d97706;
}

.tag.health-poor {
    background: #fee2e2;
    color: #dc2626;
}

.product-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
}

/* KPI网格 */
.detail-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.kpi-card {
    background: #f9fafb;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpi-icon {
    font-size: 24px;
}

.kpi-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-label {
    font-size: 12px;
    color: #9ca3af;
}

.kpi-value {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

/* 建议区域 */
.suggestions-section {
    margin-top: 24px;
}

.suggestions-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggestion-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 8px;
}

.suggestion-item.priority-high {
    border-left: 3px solid #dc2626;
}

.suggestion-item.priority-medium {
    border-left: 3px solid #d97706;
}

.priority-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #fee2e2;
    color: #dc2626;
}

.suggestion-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.suggestion-content p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* 波动分析区域 */
.volatility-section {
    margin: 24px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.volatility-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.volatility-result {
    display: flex;
    align-items: center;
    gap: 20px;
}

.volatility-score-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#667eea 0%, #f3f4f6 0%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.volatility-score-ring .score {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

/* 图表Tab */
.chart-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.chart-tab {
    padding: 8px 16px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-tab:hover {
    background: #e5e7eb;
}

.chart-tab.active {
    background: #667eea;
    color: #fff;
}

/* 高亮动画 */
.highlight {
    animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
    0% { background-color: #fef3c7; }
    100% { background-color: transparent; }
}

/* ========== 商品诊断增强样式 v4.0 ========== */

/* ===== 问题标签样式 ===== */
.problem-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.problem-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.problem-tag.loss {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.problem-tag.high-refund {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.2);
}

.problem-tag.low-profit {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    color: #ca8a04;
    border: 1px solid rgba(202, 138, 4, 0.2);
}

.problem-tag.low-roi {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    color: #9333ea;
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.problem-tag.volatile {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    color: #0891b2;
    border: 1px solid rgba(8, 145, 178, 0.2);
}

/* ===== 迷你趋势图(Sparkline) ===== */
.sparkline-container {
    width: 80px;
    height: 30px;
    flex-shrink: 0;
}

.sparkline-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: sparkline-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes sparkline-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== 健康度进度条美化 ===== */
.health-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.health-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.health-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
}

.health-bar-fill.excellent {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.health-bar-fill.good {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.health-bar-fill.fair {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.health-bar-fill.poor {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.health-score-text {
    font-size: 12px;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

.health-score-text.excellent { color: #16a34a; }
.health-score-text.good { color: #2563eb; }
.health-score-text.fair { color: #d97706; }
.health-score-text.poor { color: #dc2626; }

/* ===== 抽屉Tab样式 ===== */
.drawer-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 0 4px;
    overflow-x: auto;
    flex-shrink: 0;
}

.drawer-tab {
    padding: 14px 18px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.drawer-tab:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.04);
}

.drawer-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.drawer-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

/* ===== Tab面板样式 ===== */
.tab-panel {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== KPI网格样式 ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: all 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.kpi-card .kpi-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

.kpi-card .kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.kpi-card .kpi-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-card .kpi-value.positive { color: var(--success); }
.kpi-card .kpi-value.negative { color: var(--danger); }

/* 第二行KPI - 效率指标 */
.kpi-grid.secondary {
    margin-bottom: 16px;
}

.kpi-card.mini {
    padding: 10px 12px;
    background: #f8fafc;
}

.kpi-card.mini .kpi-label {
    font-size: 10px;
}

.kpi-card.mini .kpi-value {
    font-size: 14px;
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== 诊断区域样式 ===== */
.diagnosis-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.diagnosis-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.diagnosis-section-title .icon {
    font-size: 16px;
}

/* 问题诊断列表 */
.diagnosis-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diagnosis-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.diagnosis-item.critical {
    border-left-color: #dc2626;
    background: linear-gradient(90deg, #fef2f2, var(--bg-light));
}

.diagnosis-item.warning {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, #fffbeb, var(--bg-light));
}

.diagnosis-item.info {
    border-left-color: #3b82f6;
    background: linear-gradient(90deg, #eff6ff, var(--bg-light));
}

.diagnosis-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.diagnosis-content {
    flex: 1;
    min-width: 0;
}

.diagnosis-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.diagnosis-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== 优化建议样式 ===== */
.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-light);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.suggestion-item:hover {
    background: #f1f5f9;
}

.suggestion-priority {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.suggestion-priority.high {
    background: #fee2e2;
    color: #dc2626;
}

.suggestion-priority.medium {
    background: #fef3c7;
    color: #d97706;
}

.suggestion-priority.low {
    background: #dbeafe;
    color: #2563eb;
}

.suggestion-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.suggestion-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ===== 图表容器样式 ===== */
.chart-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.chart-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.chart-wrapper {
    height: 220px;
    background: var(--bg-light);
    border-radius: 8px;
}

/* 图表无数据提示 */
.no-chart-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== 加载状态样式 ===== */
.panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 13px;
}

/* ===== 成本分析样式 ===== */
.cost-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 8px;
}

.cost-item .cost-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.cost-item .cost-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 退款分析样式 ===== */
.refund-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.refund-stat-card {
    text-align: center;
    padding: 14px;
    background: var(--bg-light);
    border-radius: 10px;
}

.refund-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.refund-stat-card .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== ROI分析样式 ===== */
.roi-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
    border-radius: 12px;
    margin-bottom: 16px;
}

.roi-score {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.roi-score .score-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.roi-score .score-label {
    font-size: 10px;
    color: var(--text-muted);
}

.roi-details {
    flex: 1;
}

.roi-details .roi-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.roi-details .roi-item:last-child {
    border-bottom: none;
}

.roi-details .roi-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.roi-details .roi-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 卡片迷你趋势图区域 ===== */
.card-sparkline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.card-sparkline .metric-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== Tab面板容器 ===== */
.drawer-tab-panels {
    flex: 1;
    overflow-y: auto;
}

.no-issues {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-light);
    border-radius: 8px;
}

/* ===== 抽屉加载状态 ===== */
.drawer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.drawer-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 新品期提示样式 ===== */
.new-product-hint {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
}

.refund-hint {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.new-product-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border: 1px solid rgba(202, 138, 4, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #92400e;
}

.new-product-notice .notice-icon {
    font-size: 16px;
}

/* ===== 销售KPI网格 ===== */
.sales-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sales-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}

.sales-kpi-card .kpi-icon {
    font-size: 24px;
}

.sales-kpi-card .kpi-content {
    flex: 1;
}

.sales-kpi-card .kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sales-kpi-card .kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 流量KPI区分样式 */
.traffic-kpi .sales-kpi-card {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
    border-color: rgba(139, 92, 246, 0.1);
}

/* ===== 数据洞察面板样式 ===== */
.insight-data-section {
    margin-bottom: 20px;
}

.insight-data-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.insight-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.insight-data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.insight-data-label {
    font-size: 12px;
    color: var(--text-muted);
}

.insight-data-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 成本总览样式 ===== */
.cost-summary {
    margin-bottom: 20px;
}

.cost-total {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 12px;
}

.cost-total .total-label {
    font-size: 14px;
    color: #991b1b;
}

.cost-total .total-value {
    font-size: 24px;
    font-weight: 700;
    color: #dc2626;
}

.cost-total .total-rate {
    font-size: 12px;
    color: #b91c1c;
    margin-left: auto;
}

.cost-item .cost-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-item .cost-rate {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===== ROI评级样式 ===== */
.roi-score .score-level {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
}

.roi-score.excellent .score-level {
    background: #dcfce7;
    color: #16a34a;
}

.roi-score.good .score-level {
    background: #dbeafe;
    color: #2563eb;
}

.roi-score.fair .score-level {
    background: #fef3c7;
    color: #d97706;
}

.roi-score.poor .score-level {
    background: #fee2e2;
    color: #dc2626;
}

.roi-value.positive {
    color: #16a34a;
}

.roi-value.negative {
    color: #dc2626;
}

/* ========================================
   智能洞察板块 - 重构版样式
   ======================================== */
.insight-main-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.insight-main-card.success {
    border-left: 4px solid var(--success);
}

.insight-main-card.warning {
    border-left: 4px solid var(--warning);
}

.insight-main-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.insight-change-value {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.insight-product-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.insight-section-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.insight-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.insight-product-item:hover {
    background: var(--border-light);
}

.insight-product-item .product-name {
    font-weight: 500;
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-product-item .product-id {
    font-size: 12px;
    color: var(--text-muted);
}

.insight-product-item .product-change {
    font-weight: 600;
    margin-left: auto;
}

.insight-product-item .product-change.negative {
    color: var(--danger);
}

.insight-product-item .product-change.positive {
    color: var(--success);
}

.insight-product-item .product-contrib {
    font-size: 12px;
    color: var(--text-muted);
}

.insight-product-item .product-action {
    font-size: 12px;
    color: var(--primary);
    margin-left: 8px;
}

.insight-stable {
    padding: 16px;
    text-align: center;
    color: var(--success);
    font-weight: 500;
}

/* ========================================
   异常预警板块 - 重构版样式
   ======================================== */
.alert-container.normal {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
}

.alert-normal-message {
    padding: 20px;
    text-align: center;
    color: var(--success);
    font-size: 16px;
    font-weight: 500;
}

.alert-container.anomaly {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
}

.alert-anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.alert-anomaly-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--border-light);
}

.alert-anomaly-card.severe {
    border-left: 4px solid var(--danger);
    background: #fef2f2;
}

.alert-anomaly-card.warning {
    border-left: 4px solid var(--warning);
    background: #fffbeb;
}

.anomaly-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.anomaly-level-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.anomaly-level-badge.severe {
    background: var(--danger);
    color: white;
}

.anomaly-level-badge.warning {
    background: var(--warning);
    color: white;
}

.anomaly-product-id {
    font-weight: 500;
    color: var(--text-primary);
}

.anomaly-metrics {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.anomaly-metric-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.anomaly-metric-item .metric-name {
    color: var(--text-secondary);
}

.anomaly-metric-item .metric-value {
    font-weight: 600;
    color: var(--text-primary);
}

.anomaly-metric-item .metric-change {
    font-size: 12px;
}

.anomaly-metric-item .metric-change.down {
    color: var(--danger);
}

.anomaly-metric-item .metric-change.up {
    color: var(--success);
}

.anomaly-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.anomaly-info {
    font-size: 12px;
    color: var(--text-muted);
}

.anomaly-detail-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.anomaly-detail-btn:hover {
    background: var(--primary-dark);
}

/* 商品卡片高亮效果 */
.diag-card.highlight,
[data-product-id].highlight {
    animation: highlightPulse 2s ease-out;
    box-shadow: 0 0 0 3px var(--primary);
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 3px var(--primary); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ========================================
   智能洞察 - 商品卡片样式
   ======================================== */
.insight-product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.insight-product-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.insight-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.insight-product-card.loss {
    border-left: 4px solid var(--danger);
}

.insight-product-card.gain {
    border-left: 4px solid var(--success);
}

.ipc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ipc-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.ipc-badge.loss {
    background: var(--danger);
}

.ipc-badge.gain {
    background: var(--success);
}

.ipc-id {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
}

.ipc-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 36px;
}

.ipc-metrics {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.ipc-metric {
    flex: 1;
}

.ipc-metric-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ipc-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ipc-metric-value.negative {
    color: var(--danger);
}

.ipc-metric-value.positive {
    color: var(--success);
}

.ipc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.ipc-store {
    font-size: 11px;
    color: var(--text-muted);
}

.ipc-action {
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
}

/* ========================================
   运营状态预警 - 问题商品样式
   ======================================== */
.alert-summary {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.severe-tag, .warning-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.severe-tag {
    background: #fee2e2;
    color: var(--danger);
}

.warning-tag {
    background: #fef3c7;
    color: #d97706;
}

.anomaly-product-name {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-weight: 500;
}

.anomaly-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.anomaly-issue-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-subtle);
}

.anomaly-issue-item.severe {
    background: #fee2e2;
    color: var(--danger);
}

.anomaly-issue-item.warning {
    background: #fef3c7;
    color: #d97706;
}

.anomaly-action {
    font-size: 12px;
    color: var(--primary);
}

.alert-anomaly-card {
    cursor: pointer;
}

.alert-anomaly-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ========================================
   利润波动分析 - 优化版样式
   ======================================== */
.volatility-container-v2 {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
}

.volatility-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.vol-stat-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

.vol-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.vol-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.vol-stat-value.positive {
    color: var(--success);
}

.vol-stat-value.negative {
    color: var(--danger);
}

/* 波动预警区域 */
.volatility-alerts-section {
    margin-top: 20px;
}

.vol-alerts-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vol-alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.vol-alert-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 12px;
    border-left: 3px solid var(--warning);
    transition: all 0.2s ease;
}

.vol-alert-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.vol-alert-card.positive {
    border-left-color: var(--success);
}

.vol-alert-card.negative {
    border-left-color: var(--danger);
}

.vol-alert-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.vol-alert-profit {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.vol-alert-profit.positive {
    color: var(--success);
}

.vol-alert-profit.negative {
    color: var(--danger);
}

.vol-alert-change {
    font-size: 12px;
    color: var(--text-muted);
}

.vol-alert-vs {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.vol-stable-message {
    text-align: center;
    padding: 24px;
    color: var(--success);
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

/* 趋势条形图 */
.volatility-trend {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.vol-trend-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.vol-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    padding: 0 4px;
}

.vol-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.vol-bar {
    width: 100%;
    max-width: 24px;
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.vol-bar:hover {
    opacity: 0.8;
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.vol-bar.positive {
    background: linear-gradient(to top, #10b981, #34d399);
}

.vol-bar.negative {
    background: linear-gradient(to top, #ef4444, #f87171);
}

.vol-bar.zero {
    background: var(--border);
    min-height: 2px;
}

.vol-bar-date {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 条形图tooltip */
.vol-bar[title] {
    position: relative;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .volatility-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .vol-alerts-grid {
        grid-template-columns: 1fr;
    }

    .vol-trend-bars {
        height: 60px;
    }

    .vol-bar-date {
        font-size: 9px;
    }
}

/* ========================================
   智能洞察卡片V2 - 带图片
   ======================================== */

/* 趋势卡片 - 智能洞察用 */
.trend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    min-width: 120px;
    flex: 0 0 auto;
}

.trend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tc-visual {
    position: relative;
    margin-bottom: 10px;
}

.tc-image {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}

.tc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-trend-icon {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    border: 2px solid white;
}

.tc-trend-icon.loss {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.tc-trend-icon.gain {
    background: linear-gradient(135deg, #10b981, #059669);
}

.tc-amount {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tc-amount.loss { color: #ef4444; }
.tc-amount.gain { color: #10b981; }

.tc-percent {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.tc-store {
    font-size: 11px;
    color: #94a3b8;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ic-content {
    flex: 1;
    min-width: 0;
}

.ic-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ic-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.ic-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.ic-badge.loss {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.ic-badge.gain {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.ic-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-change {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ic-change.positive { color: var(--success); }
.ic-change.negative { color: var(--danger); }

.ic-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.ic-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 16px;
    transition: transform 0.2s;
}

.insight-card-v2:hover .ic-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* ========================================
   问题卡片 - 需关注商品用
   ======================================== */
.alert-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.problem-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    min-width: 130px;
    flex: 0 0 auto;
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pc-visual {
    position: relative;
    margin-bottom: 10px;
}

.pc-image {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}

.pc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    border: 2px solid white;
}

.pc-level-badge.severe {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.pc-level-badge.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.pc-issues {
    text-align: center;
    margin-bottom: 6px;
}

.pc-issue {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.pc-store {
    font-size: 11px;
    color: #94a3b8;
}

.alert-card-v2.severe::before {
    background: linear-gradient(180deg, #ef4444, #f87171);
}

.alert-card-v2.warning::before {
    background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

.ac-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ac-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-content {
    flex: 1;
    min-width: 0;
}

.ac-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ac-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.ac-level {
    font-size: 12px;
}

.ac-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.ac-issue {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ac-issue.severe {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.ac-issue.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.ac-footer {
    font-size: 11px;
    color: var(--text-muted);
}

.ac-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 16px;
    transition: transform 0.2s;
}

.alert-card-v2:hover .ac-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .alert-cards-grid {
        grid-template-columns: 1fr;
    }

    .ic-image, .ac-image {
        width: 48px;
        height: 48px;
    }
}

/* ========================================
   通用商品详情弹窗
   ======================================== */
.product-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.product-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.product-modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.product-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

.product-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.product-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

.product-modal-close:hover {
    color: var(--text-primary);
}

.product-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 130px);
}

.product-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
}

/* 弹窗内容 - 简洁专业设计 */
.pm-header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pm-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.pm-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-info {
    flex: 1;
}

.pm-id {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, monospace;
}

.pm-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-meta-item {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pm-meta-item i {
    font-style: normal;
}

.pm-divider {
    height: 1px;
    background: #eee;
    margin: 16px 0;
}

/* 变化区域 */
.pm-changes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pm-change {
    padding: 12px;
    border-radius: 8px;
    background: #f9f9f9;
}

.pm-change.up { background: #f0fdf4; }
.pm-change.down { background: #fef2f2; }

.pm-change-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.pm-change-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

.pm-change.up .pm-change-value { color: #16a34a; }
.pm-change.down .pm-change-value { color: #dc2626; }

.pm-change-percent {
    font-size: 12px;
    font-weight: 500;
}

.pm-change.up .pm-change-percent { color: #22c55e; }
.pm-change.down .pm-change-percent { color: #ef4444; }

/* 数据列表 */
.pm-data {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pm-data-row:last-child {
    border-bottom: none;
}

.pm-data-label {
    font-size: 14px;
    color: #666;
}

.pm-data-value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.pm-data-value.positive { color: #16a34a; }
.pm-data-value.negative { color: #dc2626; }