/* ============================================================
   common.css —— 全站公共基础样式（由 index / uniform_acceleration
   / derivation_panel 三页抽取复用）
   各页面在 <head> 引入本文件后，仅在自身 <style> 中保留页面专属样式。
   ============================================================ */

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- 页面基础（字体 / 背景 / 文字色 为公共部分；padding 由各页自行设置） ---------- */
body {
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
    color: #e0e8f0;
    min-height: 100vh;
}

/* ---------- 页头（文字居中、标题渐变、副标题色为公共部分；字号/间距由各页自行设置） ---------- */
.header { text-align: center; }
.header h1 {
    background: linear-gradient(90deg, #60c5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header p { color: #8fa8c8; }

/* ---------- D3 图表 SVG 公共样式（uniform_acceleration / derivation_panel 共用） ---------- */
.chart-svg { width: 100%; display: block; }
.chart-svg .axis line,
.chart-svg .axis path { stroke: rgba(255,255,255,0.2); }
.chart-svg .axis text { fill: #8fa8c8; font-size: 13px; }
.chart-svg .axis-label { fill: #8fa8c8; font-size: 14px; font-weight: 600; }
.chart-svg .grid line { stroke: rgba(255,255,255,0.06); }
.chart-svg .data-line { fill: none; stroke-width: 2.5; }
.chart-svg .area-fill { opacity: 0.25; }
.chart-svg .object-dot { filter: drop-shadow(0 0 6px currentColor); }
.chart-svg .annotation { fill: #ffffff; font-size: 13px; }
.chart-svg .annotation-line { stroke: #fbbf24; stroke-dasharray: 4,3; opacity: 0.7; }

/* 移动端放大图表文字，提升可读性 */
@media (max-width: 600px) {
    .chart-svg .axis text { font-size: 15px; }
    .chart-svg .axis-label { font-size: 16px; }
    .chart-svg .annotation { font-size: 15px; }
}

/* ---------- 通用页脚（所有页面共用） ---------- */
.footer {
    text-align: center;
    margin-top: 50px;
    color: #5e7398;
    font-size: 0.82em;
}
