/* 全球汽车行业态势系统 - 主样式 v1.2.18（单页长滚动版，全本地化，无外链）
   结构：顶部粘性标题栏 + 六章节纵向堆叠滚动 + 回到顶部
   v1.2.18：「核心零部件企业名录」面板高度固定 757px（替换 v1.2.16 flex 拉伸方案），
            列表区弹性占满面板内剩余高度滚动；移动端(≤1100px)单列回退 640px 上限
   v1.2.16：曾以 .panel-fill flex 拉伸使名录与左列两面板总高对齐（v1.2.18 起改固定高度）
   v1.2.8：章节2 资讯流独占整行（移除大洲柱图 #ch-continent）；章节3 新增销量地图 #saleMapWrap，布局复用 g-prod 两列
   v1.2.7：移除 #mapTip DOM 提示层样式（世界地图悬浮提示已改为画布内绘制）
   v1.2.6：移除章节标题栏（screen-cap：章节名/副标题/滚动提示）整行，章节内容直接顶格
   v1.2.5：章节标题栏去掉数字序号徽章（01~06）
   v1.2.3：TOP10生产国/产量明细TOP10 上移至章节1地图右侧 */
:root{
  --bg:#050b14; --panel:rgba(9,22,40,.66); --line:rgba(0,180,255,.16);
  --cyan:#00eaff; --blue:#2f81f7; --green:#31d17c; --gold:#ffc53d; --red:#ff5c6c; --violet:#a06bff;
  --txt:#d8ecff; --sub:#6d8bab;
  --hdr:88px; --ftr:42px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  background:radial-gradient(1200px 700px at 20% -10%, #0a1c33 0%, transparent 60%),
             radial-gradient(1000px 600px at 90% 110%, #0a2030 0%, transparent 55%),
             var(--bg);
  background-attachment:fixed;
  color:var(--txt); font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(0,180,255,.25);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ===== 顶部（粘性标题栏） ===== */
header.top{
  position:sticky; top:0; z-index:50;
  height:var(--hdr); display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,18,34,.98), rgba(6,18,34,.88));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,#0b3b5e,#062038);border:1px solid rgba(0,234,255,.5);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(0,234,255,.25), inset 0 0 12px rgba(0,234,255,.12);
}
.brand .logo svg{width:24px;height:24px}
.brand h1{font-size:20px;letter-spacing:2px;font-weight:700;
  background:linear-gradient(90deg,#e8f7ff,#7fd8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .en{font-size:10px;color:var(--sub);letter-spacing:3px;margin-top:2px}
.top-right{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--sub)}
.clock{font-family:Consolas,monospace;font-size:15px;color:#9fe8ff;letter-spacing:1px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== 纵向章节（单页长滚动） ===== */
main#main{position:relative}
.screen{
  padding:18px 26px 30px;
  min-height:calc(100vh - var(--hdr));
  display:flex; flex-direction:column;
  scroll-margin-top:calc(var(--hdr) - 1px);
  border-bottom:1px solid rgba(0,180,255,.08);
}
.screen:last-of-type{border-bottom:none}

/* ===== 网格 ===== */
.grid{display:grid;gap:14px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.g-kpi{grid-template-columns:repeat(6,1fr)}
.g-kpi4{grid-template-columns:repeat(4,1fr);margin-bottom:14px}
.g-prod{grid-template-columns:1.55fr 1fr}
.g-city{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto}
.g-parts{grid-template-columns:1.2fr 1fr}
.g-tech{grid-template-columns:1.25fr 1fr}
@media(max-width:1100px){
  .g-kpi{grid-template-columns:repeat(3,1fr)}
  .g-kpi4{grid-template-columns:repeat(2,1fr)}
  .g-prod,.g-city,.g-parts,.g-tech{grid-template-columns:1fr}
}

/* ===== 面板 ===== */
.panel{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px 14px;backdrop-filter:blur(3px);
  box-shadow:0 4px 24px rgba(0,0,0,.35), inset 0 0 30px rgba(0,120,220,.05);
  overflow:hidden;
}
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,234,255,.55),transparent);
}
.panel h3{
  font-size:14px;color:#cfeaff;letter-spacing:1px;display:flex;align-items:center;gap:8px;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px dashed rgba(0,180,255,.18);font-weight:600;
}
.panel h3 .ico{width:6px;height:14px;border-radius:2px;background:linear-gradient(180deg,#00eaff,#2f81f7)}
.panel h3 .more{margin-left:auto;font-size:11px;color:var(--sub);font-weight:400}

/* v1.2.18：「核心零部件企业名录」面板高度固定 757px，
   标题固定、内部列表 #partsWrap 弹性占满剩余高度滚动；
   移动端(≤1100px 单列)回退为高度自适应 + 列表 640px 滚动上限 */
.panel-parts{height:757px;flex:none;display:flex;flex-direction:column;min-height:0}
#partsWrap{flex:1;min-height:0;overflow-y:auto}
@media(max-width:1100px){
  .panel-parts{height:auto}
  #partsWrap{max-height:640px;flex:none}
}

/* KPI 卡 */
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi .k-label{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px}
.kpi .k-value{font-family:Consolas,monospace;font-size:24px;font-weight:700;color:#eaffff;line-height:1.15}
.kpi .k-value small{font-size:12px;color:var(--sub);font-weight:400;margin-left:2px}
.kpi .k-bar{height:4px;border-radius:2px;background:rgba(0,180,255,.12);overflow:hidden;margin-top:2px}
.kpi .k-bar i{display:block;height:100%;border-radius:2px;width:0%;transition:width 1.2s ease}
.kpi.gold .k-value{color:#ffe4a3}
.kpi.gold .k-bar i{background:linear-gradient(90deg,#b8860b,#ffc53d)}
.kpi.green .k-value{color:#c8f7df}
.kpi.green .k-bar i{background:linear-gradient(90deg,#1d9d5f,#31d17c)}
.kpi.red .k-value{color:#ffd2d2}
.kpi.red .k-bar i{background:linear-gradient(90deg,#b03030,#ff5c6c)}
.kpi.violet .k-value{color:#e3d2ff}
.kpi.violet .k-bar i{background:linear-gradient(90deg,#6a3dc9,#a06bff)}

/* 图表容器（纵向布局使用固定高度，保证滚动前即完成渲染布局） */
.chart{width:100%;min-height:190px}
#news-feed{height:520px}

/* 全球地图（产量 / 销量共用样式） */
#worldMapWrap,#saleMapWrap{height:520px;border-radius:10px;overflow:hidden;border:1px solid rgba(0,180,255,.18)}
.map-legend{display:flex;gap:14px;font-size:11px;color:var(--sub);margin-top:8px;flex-wrap:wrap}
.map-legend b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{
  text-align:left;color:var(--sub);font-weight:400;padding:6px 8px;
  border-bottom:1px solid rgba(0,180,255,.2);letter-spacing:1px;font-size:11px;white-space:nowrap;
}
.tbl td{padding:6px 8px;border-bottom:1px solid rgba(0,180,255,.07);color:#c9e2f5}
.tbl tr:hover td{background:rgba(0,234,255,.045)}
.tbl .num{font-family:Consolas,monospace;color:#8fe6ff}
.tbl .rank{
  display:inline-flex;width:20px;height:20px;border-radius:5px;align-items:center;justify-content:center;
  font-size:11px;font-family:Consolas,monospace;background:rgba(0,180,255,.12);color:#8fd6ff;
}
.tbl .rank.r1{background:linear-gradient(135deg,#b8860b,#ffc53d);color:#201500;font-weight:700}
.tbl .rank.r2{background:linear-gradient(135deg,#5a6a7d,#9fb2c8);color:#0d141d;font-weight:700}
.tbl .rank.r3{background:linear-gradient(135deg,#8a5a2b,#d29b62);color:#1d0f00;font-weight:700}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;border:1px solid}
.tag.cyan{color:#7fe8ff;border-color:rgba(0,234,255,.4);background:rgba(0,234,255,.07)}
.tag.green{color:#8ef0bb;border-color:rgba(49,209,124,.4);background:rgba(49,209,124,.07)}
.tag.gold{color:#ffdf9e;border-color:rgba(255,197,61,.4);background:rgba(255,197,61,.07)}
.tag.red{color:#ffb3b3;border-color:rgba(255,92,108,.4);background:rgba(255,92,108,.07)}
.tag.blue{color:#9fc6ff;border-color:rgba(47,129,247,.4);background:rgba(47,129,247,.07)}
.tag.violet{color:#d9c2ff;border-color:rgba(160,107,255,.4);background:rgba(160,107,255,.07)}

/* 动态/新闻滚动列表 */
.feed{overflow-y:auto;padding-right:4px}
.feed::-webkit-scrollbar{width:5px}
.feed-item{display:flex;gap:10px;padding:8px 6px;border-bottom:1px dashed rgba(0,180,255,.09)}
.feed-item .dt{flex:0 0 74px;font-family:Consolas,monospace;color:var(--sub);font-size:11px;padding-top:2px}
.feed-item .bd{flex:1;min-width:0}
.feed-item .t{font-size:12.5px;color:#d8ecff;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-item a.t{color:#d8ecff;text-decoration:none}
.feed-item a.t:hover{color:#00eaff}
.feed-item .m{font-size:11px;color:var(--sub);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.feed-item .m .dom{color:#79a8cc}

/* 城市热力 */
.city-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.city-head .cn{font-size:18px;font-weight:700;color:#eaffff}
.city-head .sub{font-size:11px;color:var(--sub)}
.city-map-wrap{position:relative;height:320px;border-radius:10px;overflow:hidden;border:1px solid rgba(0,180,255,.18)}
.city-kpis{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.city-chip{
  flex:1;min-width:120px;background:rgba(0,180,255,.05);border:1px solid rgba(0,180,255,.15);
  border-radius:8px;padding:8px 12px;
}
.city-chip .l{font-size:11px;color:var(--sub)}
.city-chip .v{font-family:Consolas,monospace;font-size:16px;color:#eaffff;font-weight:700;margin-top:2px}
.poi-list{max-height:320px;overflow-y:auto}
.tier-legend{display:flex;gap:10px;font-size:11px;color:var(--sub);margin-top:8px;flex-wrap:wrap}
.tier-legend b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}

/* 事件时间线 */
.tl{position:relative;padding-left:18px;overflow-y:auto}
.tl::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(0,234,255,.5),rgba(0,180,255,.08))}
.tl-item{position:relative;padding:7px 0 9px}
.tl-item::before{content:'';position:absolute;left:-17px;top:12px;width:7px;height:7px;border-radius:50%;
  background:#00eaff;box-shadow:0 0 8px rgba(0,234,255,.8)}
.tl-item .d{font-family:Consolas,monospace;font-size:11px;color:var(--sub)}
.tl-item .n{font-size:12.5px;color:#d8ecff;line-height:1.45;margin-top:1px}
.tl-item .loc{font-size:11px;color:#79a8cc;margin-top:2px}

/* ===== 回到顶部 ===== */
#backtop{
  position:fixed;right:22px;bottom:56px;z-index:60;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#9fe8ff;
  background:rgba(6,18,34,.85);border:1px solid rgba(0,234,255,.4);
  box-shadow:0 0 14px rgba(0,234,255,.25);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:all .3s;
}
#backtop.show{opacity:1;pointer-events:auto;transform:none}
#backtop:hover{color:#04121f;background:linear-gradient(135deg,#00eaff,#31d17c);border-color:transparent}

/* ===== 底部 ===== */
footer{
  min-height:var(--ftr); padding:10px 28px; color:#3d5c7a;font-size:11px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(0,180,255,.08);letter-spacing:.5px;
  background:rgba(6,18,34,.6);
}
footer a{color:#5f87ab;text-decoration:none}
footer a:hover{color:#00eaff}
.data-badge{display:inline-flex;align-items:center;gap:6px}
.data-badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}