/* =========================================
   chart-parallel.css (完整版)
   ========================================= */

#parallel-chart-section { 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative; 
    z-index: 5; 
}

/* 2. 大标题渐变 (蓝紫) */
#parallel-chart-section .grand-section-title {
    background-image: linear-gradient(135deg, #00d4ff 0%, #7b2cbf 60%, #fff 100%);
}

/* 3. 容器样式 */
#parallel-chart-main-wrapper { 
    width: 66% !important;
    margin-left: 20px;
    margin-right: 20px;
    
    /* 基础磨砂样式 (暗色默认) */
    position: sticky; top: 15vh; z-index: 10;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--chart-radius);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    display: flex; flex-direction: column;
    overflow: hidden; 
    height: 70vh;
}
#parallel-chart-main-wrapper.free-mode-height { height: 70vh !important; }

#parallel-chart-main-container { 
    flex: 1; position: relative; width: 100%; height: 100%; 
    overflow: hidden; 
    background: transparent; 
}

.parallel-chart-svg { width: 100%; height: 100%; display: block; }

/* 4. UI 组件 */
.parallel-chart-header { 
    display: flex; justify-content: space-between; align-items: center; 
    min-height: 50px; padding: 10px 20px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all 0.5s ease; 
}
.parallel-chart-title { 
    font-size: 15px; color: #fff; font-weight: 600; 
    border-left: 4px solid var(--accent-color); padding-left: 10px; 
}

/* 控件隐藏/显示 */
.controls-hidden .parallel-chart-header { opacity: 0; height: 0; min-height: 0; padding: 0; margin: 0; pointer-events: none; border:none;}
.controls-visible .parallel-chart-header { opacity: 1; height: auto; min-height: 50px; padding: 10px 20px; pointer-events: auto; }

/* 下拉框与按钮 */
.parallel-chart-select { 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: #fff; 
    padding: 0 10px; border-radius: 6px; outline: none; 
    font-size: 13px; height: 32px; line-height: 32px; cursor: pointer; 
}
.parallel-chart-select option { background: #1a1a1a; color: white; }

.parallel-chart-button { 
    background: rgba(255, 255, 255, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: #cbd5e1; 
    padding: 0 15px; border-radius: 6px; height: 32px; cursor: pointer; 
    font-size: 13px; font-weight: 500; transition: all 0.2s ease; 
    display: inline-flex !important; align-items: center !important; justify-content: center !important; 
}
.parallel-chart-button:hover { 
    border-color: var(--accent-color); color: var(--accent-color); 
    background: rgba(255, 255, 255, 0.15); 
}
.parallel-chart-button.active { background: var(--accent-color); border-color: var(--accent-color); color: #000; }

/* 坐标轴 */
.parallel-chart-svg .axis path,
.parallel-chart-svg .axis line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    shape-rendering: crispEdges;
}
.parallel-chart-svg .axis text { fill: #cbd5e1; font-size: 11px; }
.parallel-chart-svg .axis-title { fill: #fff; font-weight: bold; }

/* 故事模式过渡效果 */
.story-card {
    opacity: 0.3;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-out;
    transform: translateY(20px); 
}
.story-step.active .story-card { opacity: 1; transform: translateY(0); }

/* 线条动画 */
.parallel-chart-svg path.base-line {
    transition: stroke-opacity 0.2s, stroke-width 0.2s, stroke 0.2s; 
}
.parallel-chart-svg path.base-line.inactive {
    stroke-opacity: 0.05 !important;
    opacity: 0.3;
}
.focus-layer path.focus-segment { pointer-events: none; }