.charts{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 48px;
    /* background-color: antiquewhite; */
    height: calc(100vh - 90px); /* 让元素高度等于视口高度，实现全屏高度 */
    margin: 0 auto; /* 上下外边距为0，左右自动分配，实现水平居中 */
    overflow: hidden;
}
.charts .charts-nav{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 42px 0 0 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
    padding-bottom: 12px;
}
.charts .charts-nav .charts-nav-left{ 
    display: flex;
    align-items: center;
    cursor: pointer;
    
}
.charts .charts-nav .charts-nav-left .charts-nav-back-upload{
    display: flex;
    align-items: center;
    gap: 8px;
}
.charts .charts-nav .charts-nav-left svg{ 
    width: 16px;
    height: 16px;
}
.charts .charts-nav .charts-nav-left span{ 
    font-size: 16px;
    color: #1F2937;
}

.charts .charts-nav .charts-nav-suggest-form{
    position: relative;
    width: 60%;
    
    display: flex;
    align-items: center;
    margin-left: 24px;
}

.charts .charts-nav .charts-nav-suggest-input{
    width: 100%;
    padding: 6px 36px 6px 12px;
    border-radius: 8px;
    height: 24px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    color: #1F2937;
    outline: none;
}

.charts .charts-nav .charts-nav-suggest-input:focus{
    border-color: #3B82F6;
}

.charts .charts-nav .charts-nav-suggest-btn{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9CA3AF;
}

.charts .charts-nav .charts-nav-suggest-btn svg{
    width: 16px;
    height: 16px;
}

.charts .charts-nav .charts-nav-suggest-btn:hover{
    color: #3B82F6;
}

.charts .charts-nav .charts-nav-right{ 
    display: flex;
    align-items: center;
    gap: 16px;
}
.charts .charts-nav .charts-nav-right .charts-select-all{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #1F2937;
}

.charts .charts-nav .charts-nav-right .charts-download-btn{
    width: 120px;
    height: 32px;
    background-color: #3B82F6;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.charts .charts-area{
            flex: 0.97;
            min-height: 0;
            overflow: hidden;
            /* border-bottom: 10px solid #F59E0B; */

        }
/* 图表样式设置，后续根据实际图表生成情况修改 */
        /* 图表网格布局 */
.charts .charts-area .charts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 24px;
            height: 100%;
            overflow: hidden;
        }
        

        
        /* 图表卡片样式 */
.charts .chart-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            position: relative;
            transition: box-shadow 0.2s, border-color 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #fff;            
        }

        .chart-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border-color: #d0d0d0;
        }

        .chart-card .chart-header { 
            display: flex;
            /* flex-direction: column; */
            align-items: center;
            justify-content: center;
            background-color: #F8FAFC;
            height: 32px;
        }

        .chart-card .chart-header .chart-checkbox {
            position: flex;
            margin:auto;
            margin-left: 16px;
            width: 16px;
            height: 16px;
            accent-color: #165DFF;
            cursor: pointer;
        }
        .chart-card .chart-header .chart-actions {
            position: flex;
            margin:auto;
            margin-right: 16px;
            color: #1F2937;
            font-weight: 800;
            cursor: pointer;
            font-size: 16px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background-color 0.2s, color 0.2s;
        }
        .chart-card .chart-main {
            display: flex;
            flex-direction: column;
            height: 100%;
            /* padding: 0 16px 16px 16px; */
            min-height: 0;
            overflow: hidden;
            /* background: #165DFF; */
        }
        .chart-card .chart-header .chart-actions:hover {
            background-color: #f5f5f5;
            color: #666666;
        }
        
        .chart-card .chart-main .chart-title {
            margin-top: 8px;
            margin-bottom: 16px;
            font-size: 16px;
            font-weight: 500;
            color: #1F2937;
        }
        
        /* 图表内容样式 */
.chart-content {
            width: 100%;
            flex: 1;
            height: auto;
            min-height: 0;
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-rows: minmax(0, 1fr) auto;
            grid-template-columns: 100%;
        }
        
.chart-bars {
            grid-row: 1;
            grid-column: 1;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 100%;
            min-height: 0;
            padding-bottom: 20px;
            position: relative;
            z-index: 2;
        }
        
.chart-bar {
            width: 24px;
            border-radius: 4px 4px 0 0;
            position: relative;
        }
        
.chart-bar.blue {
            background-color: #4080FF;
        }
        
.chart-bar.teal {
            background-color: #2FC2B0;
        }
        
.chart-axis {
            grid-row: 1;
            grid-column: 1;
            align-self: end;
            position: relative;
            width: 100%;
            height: 1px;
            background-color: #e0e0e0;
            z-index: 3;
        }
        
.chart-labels {
            grid-row: 2;
            grid-column: 1;
            display: flex;
            justify-content: space-around;
            margin-top: 8px;
        }
        
.chart-labels .chart-label {
            font-size: 12px;
            color: #999999;
            width: 24px;
            text-align: center;
        }
        
.chart-y-axis {
            grid-row: 1;
            grid-column: 1;
            position: relative;
            height: 100%;
            width: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1;
            pointer-events: none;
        }
        
.chart-y-tick {
            font-size: 12px;
            color: #999999;
            text-align: right;
            padding-right: 8px;
            position: relative;
        }
        
chart-y-tick::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            width: 4px;
            height: 1px;
            background-color: #e0e0e0;
        }
        
        /* 响应式调整 */
        @media (max-width: 1200px) {
            .charts-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .chart-controls {
                width: 100%;
                justify-content: space-between;
            }
        }

/* Modal Styles */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(31, 41, 55, 0.8);
}

.modal-content {
    background-color: #F8FAFC;
    margin: 5% auto; 
    padding: 0;
    border: 1px solid #888;
    width: 100%; 
    height: 70%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

.close-btn {
    color: #aaa;
    float: left;
    font-size: 24px;
    /* font-weight: bold; */
    padding: 10px 20px;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 20px 24px 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.modal-body {
    padding: 24px;
    height: 70%; /* Fixed height for chart area in modal */
    display: flex;
    flex-direction: column;
}

.modal-chart-container {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    /* flex-direction: column; */
}

/* Ensure chart content inside modal expands */
.chart-content {
    width: 100%;
    height: 100% !important; /* Force full height */
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: 100%;
}

.modal-footer {
    background-color: #f5f5f5;
    padding: 20px 24px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.ai-section {
    margin-bottom: 16px;
}

.ai-section:last-child {
    margin-bottom: 0;
}

.ai-label {
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
    margin-bottom: 8px;
}

.ai-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-height: 40px;
    padding: 8px;
    color: #1F2937;
    font-size: 14px;
}