/*member/index页面css*/
body {           
background: #f4f6fa;
color: #1e293b;
}

/* 主容器 */
.dashboard-container {
margin: 0 auto;
}

/* 头部区域 */
.headers {
margin-bottom: 28px;
}
.headers h1 {
font-size: 1.9rem;
font-weight: 700;
background: linear-gradient(135deg, #1e3c72, #2b3b6e);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
}
.headers .sub {
color: #5b6e8c;
font-size: 0.95rem;
margin-top: 8px;
border-left: 4px solid #3b82f6;
padding-left: 14px;
}

/* KPI 卡片 */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.kpi-card {
background: white;
    border-radius: 1.2rem;
    padding: 1.2rem 1.2rem;
    transition: 0.1s;
    border-left: 5px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0,0,0,0.05);
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.12);
border-color: #cbdff2;
}
.kpi-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
color: #5b6e8c;
margin-bottom: 10px;
}
.kpi-value {
font-size: 2.1rem;
font-weight: 800;
color: #0f2b3d;
line-height: 1.2;
}
.kpi-unit {
font-size: 0.9rem;
font-weight: 500;
color: #6c86a3;
margin-left: 4px;
}
.kpi-trend {
font-size: 0.75rem;
color: #3b82f6;
margin-top: 8px;
font-weight: 500;
}

/* 双栏布局通用 */
.section-title {
font-size: 1.35rem;
font-weight: 700;
margin: 28px 0 16px 0;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
font-size: 1.5rem;
font-weight: 400;
}
.badge-icon {
background: #eef2ff;
padding: 5px 10px;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 600;
color: #1e40af;
}

/* 表格卡片 */
.table-wrapper {
background: white;
border-radius: 24px;
padding: 0px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
border: 1px solid #edf2f7;
overflow-x: auto;
margin-bottom: 32px;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
min-width: 860px;
}
.data-table th {
text-align: left;
padding: 16px 16px;
background-color: #f9fbfd;
font-weight: 600;
color: #334155;
border-bottom: 1.5px solid #e2e8f0;
font-size: 0.8rem;
}
.data-table td {
padding: 14px 16px;
border-bottom: 1px solid #f0f2f5;
font-weight: 500;
color: #1e293b;
}
.data-table tr:hover td {
background-color: #fafcff;
}
.business-type {
font-weight: 700;
color: #0f3b5c;
}
.highlight-number {
font-weight: 700;
color: #1e466e;
}
.badge-percent {
background: #eaf5ff;
border-radius: 20px;
padding: 4px 8px;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
min-width: 58px;
}
.efficiency-low {
color: #16a34a;
font-weight: 700;
}
.efficiency-high {
color: #e11d48;
}

/* 图表网格 */
.charts-grid {
margin-bottom: 30px;
}
.chart-card {
background: white;
border-radius: 24px;
padding: 18px 18px 12px 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
border: 1px solid #eef2f8;
transition: all 0.2s;
width:25%;
text-align:center;
}
.chart-card:not(:last-child){margin-right:20px;}
.chart-card h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 12px;
color: #2c3e66;
padding-left: 6px;
border-left: 3px solid #3b82f6;
text-align:left;margin-bottom:25px;
}
canvas {
width:120px;
height:120px;
}
.footnote {
font-size: 0.7rem;
color: #6c86a3;
margin-top: 12px;
text-align: center;
border-top: 1px solid #ecf3f9;
padding-top: 12px;
}
#kpiContainer .kpi-card:nth-of-type(1){border-left-color: #3b82f6;}
#kpiContainer .kpi-card:nth-of-type(2){border-left-color: #10b981;}
#kpiContainer .kpi-card:nth-of-type(3){border-left-color: #f59e0b;}
#kpiContainer .kpi-card:nth-of-type(4){border-left-color: #8b5cf6;}
#kpiContainer .kpi-card:nth-of-type(5){border-left-color: #ec489a;}
#kpiContainer .kpi-card:nth-of-type(6){border-left-color: #ef4444;}
#kpiContainer .kpi-card:nth-of-type(7){border-left-color: #0f172a;}