/* 中资关键矿产全球图 — 内容页共用样式
   变量与主站 template.html 保持一致；--mc 为每页矿种主题色 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f6f8;--panel:#fff;--border:#e5e7eb;--text:#2b2f36;--sub:#8a919e;
  --accent:#b3541e;--accent-light:#fdf3ec;--mc:#b3541e;--maxw:1060px;
}
html{-webkit-text-size-adjust:100%}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:var(--text);
  background:var(--bg);font-size:15px;line-height:1.8}

/* ============ 顶栏 ============ */
/* 单行结构：品牌 | 站点级入口（关于/隐私/联系，紧贴站名） … 同分类矿种 | 打开地图
   实测宽度（1280px）：品牌 254 + 合规 220 + 矿种 316 + 打开地图 97 + 间距 42 = 929，
   故 ≥1030px 可全部并在一行；<1030px 收起矿种导航，剩 品牌+合规+打开地图 ≈ 639。
   <520px 空间确实不够，才允许换行（合规入口落到第二行居中）。 */
.topbar{position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.tbrow{min-height:60px;display:flex;align-items:center;gap:14px;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#8f3f12,#d98032);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.btitle{font-size:16px;font-weight:700;letter-spacing:.4px;line-height:1.25;white-space:nowrap}
.bsub{font-size:9.5px;color:var(--sub);letter-spacing:.5px;white-space:nowrap}
.tnav{display:flex;gap:2px;margin-left:auto}
.tnav a{font-size:13.5px;color:#5c6470;text-decoration:none;padding:6px 12px;border-radius:8px;white-space:nowrap}
.tnav a:hover{background:var(--bg);color:var(--text)}
.tnav a.on{color:var(--accent);background:var(--accent-light);font-weight:600}
.tmap{flex:none;font-size:13px;text-decoration:none;color:#fff;background:var(--accent);
  padding:7px 14px;border-radius:9px;font-weight:500;white-space:nowrap}
.tmap:hover{background:#9c4316}
/* 索引页（minerals.html）没有矿种导航，靠这里的 auto 让「打开地图」自己顶到最右；
   其余页面由 .tnav 的 margin-left:auto 把它推过去。 */
.tmap-end{margin-left:auto}
/* 站点级入口：与站名同一行，紧跟品牌右侧，用一条细分隔线与站名区分 */
.tnavc{display:flex;align-items:center;gap:2px;flex:none;margin-left:4px;padding-left:14px;
  border-left:1px solid var(--border)}
.tnavc a{font-size:12.5px;color:var(--sub);text-decoration:none;padding:5px 10px;border-radius:7px;white-space:nowrap}
.tnavc a:hover{background:var(--bg);color:var(--accent)}
.tnavc a.cur{color:var(--accent);font-weight:600}
/* 1030px 以下：品牌+合规+打开地图 需 633px，矿种导航（316px）已放不下，收起 */
@media(max-width:1030px){.tnav{display:none}}
/* 700px 以下：收起英文副标题并压缩间距，单行继续撑住（≈538px） */
@media(max-width:700px){
  .bsub{display:none}
  .tbrow{gap:10px}
  .tnavc{margin-left:2px;padding-left:10px}
  .tnavc a{font-size:12px;padding:5px 8px}
  .tmap{padding:7px 11px;font-size:12.5px}
}
/* 560px 以下：单行最少需 ≈538px，加上左右内边距确实放不下，才允许换行
   （品牌与打开地图留在第一行，合规入口 `order:9` 落到第二行居中） */
@media(max-width:560px){
  .tbrow{flex-wrap:wrap;padding:7px 14px;row-gap:2px}
  .tmap{margin-left:auto}
  .tnavc{order:9;flex:0 0 100%;justify-content:center;margin:0;padding:2px 0 0;border-left:0}
}

/* ============ 面包屑 ============ */
.crumb{max-width:var(--maxw);margin:0 auto;padding:16px 20px 0;font-size:12.5px;color:var(--sub)}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;margin:0 7px;color:#c3c8d0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 56px}

/* ============ Hero ============ */
.hero{padding:20px 0 4px}
.tag{display:inline-block;font-size:12px;padding:3px 11px;border-radius:999px;color:#fff;
  background:var(--mc);letter-spacing:.3px;margin-bottom:12px}
h1{font-size:29px;line-height:1.35;font-weight:700;letter-spacing:-.2px}
h1 em{font-style:normal;color:var(--mc)}
.lede{font-size:15.5px;color:#4a515c;margin-top:12px;max-width:830px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 4px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 16px}
.kpi b{display:block;font-size:23px;line-height:1.35;color:var(--mc);font-weight:700}
.kpi span{font-size:12px;color:var(--sub)}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}h1{font-size:23px}}

/* ============ 卡片 / 正文 ============ */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px 30px;margin-top:18px}
.card>h2:first-child{margin-top:0}
.prose h2{font-size:18px;font-weight:700;margin:28px 0 8px;padding-left:11px;
  border-left:3px solid var(--mc);line-height:1.5}
.prose h3{font-size:15px;font-weight:600;margin:18px 0 4px;color:#3a414c}
.prose p{margin:9px 0}
.prose ul{margin:8px 0 8px 21px}
.prose li{margin:5px 0}
.prose strong{font-weight:600;color:#1f242b}
.prose .note{font-size:12.5px;color:var(--sub);margin-top:16px;padding-top:13px;border-top:1px dashed var(--border)}
.src{font-size:11.5px;color:#a0a6b0;margin-top:8px;line-height:1.7}
@media(max-width:760px){.card{padding:20px 17px;border-radius:12px}}

/* ============ 世界地图示意图 ============ */
.worldmap{display:block;width:100%;height:auto}

/* ============ 表格 ============ */
.tblwrap{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--sub);padding:9px 10px;
  border-bottom:1.5px solid var(--border);white-space:nowrap;background:#fafbfc}
td{padding:9px 10px;border-bottom:1px solid #f0f2f5;vertical-align:top}
td:nth-child(1),td:nth-child(2){white-space:nowrap}
td:nth-child(3){min-width:230px}
td:nth-child(4){white-space:nowrap}
tbody tr:hover{background:#fafbfc}
tbody tr:last-child td{border-bottom:none}
.star{color:#e0a018;font-size:11px;margin-left:2px}
.mname{font-weight:600}
.mloc{font-size:11.5px;color:var(--sub);display:block;margin-top:1px;line-height:1.5}
.pill{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;white-space:nowrap}
.p-prod{background:#e8f5ec;color:#2e7d43}
.p-build{background:#fdf0e3;color:#b3541e}
.p-expl{background:#eef0f3;color:#6b7280}
.own{font-size:12.5px;color:#4a515c}
.tags{font-size:11.5px;color:#6b7280;line-height:1.6}
.dash{color:#c3c8d0}
.tfoot{font-size:11.5px;color:var(--sub);margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.tfoot i{font-style:normal;color:#e0a018}

/* ============ 分布条 ============ */
.bars{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.bar{display:grid;grid-template-columns:112px 1fr 52px;align-items:center;gap:10px;font-size:12.5px}
.bar .bl{color:#4a515c;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bt{height:15px;background:#f0f2f5;border-radius:4px;overflow:hidden}
.bar .bt i{display:block;height:100%;background:var(--mc);border-radius:4px;opacity:.85}
.bar .bn{color:var(--sub);font-size:11.5px}
@media(max-width:760px){.bar{grid-template-columns:80px 1fr 42px;gap:8px}}

/* ============ 公司卡 ============ */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px}
.ccard{border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:#fff;
  text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.ccard:hover{border-color:var(--mc);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ccard .cn{font-size:14px;font-weight:600}
.ccard .cm{font-size:11px;color:var(--sub);margin-top:2px}
.ccard .cc{font-size:11.5px;margin-top:7px;color:#4a515c}

/* ============ 相关链接 ============ */
.rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rel a{font-size:13px;padding:5px 13px;border:1px solid var(--border);border-radius:999px;
  text-decoration:none;color:#4a515c;background:#fff}
.rel a:hover{border-color:var(--mc);color:var(--mc)}
.rel .soon{font-size:13px;padding:5px 13px;border:1px dashed var(--border);border-radius:999px;color:#b6bcc6}
.secttl{font-size:16px;font-weight:700;margin-bottom:2px}
.sectsub{font-size:12.5px;color:var(--sub)}

/* ============ 页脚 ============ */
footer{border-top:1px solid var(--border);background:var(--panel);padding:24px 20px;font-size:12.5px;color:var(--sub)}
.fwrap{max-width:var(--maxw);margin:0 auto}
.fnav{margin-bottom:10px}
.fnav+.fnav{margin-top:-4px}
footer a{color:var(--sub);text-decoration:none;margin-right:16px}
footer a:hover{color:var(--accent)}
footer a.cur{color:var(--accent);font-weight:600}
.fdisc{line-height:1.8;max-width:760px}