/* ============================================================
   冲突矿产合规助手 — 原型样式
   仅用于 conflict-minerals/protype/ 目录原型页面
   正式版将转化为 conflict-minerals/assets/css/ 下的持久样式
   配色：矿青 (cyan) → 岩灰 (slate)，呼应矿石与金属
   复用全站 /css/tailwind.css 的 --radius-* / --shadow-* / --surface
   ============================================================ */

:root {
  /* 矿青 cyan —— 主题主色，锚点 #0e7490 */
  --cyan-50:#ecfeff;  --cyan-100:#cffafe; --cyan-200:#a5f3fc; --cyan-300:#67e8f9;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-600:#0891b2; --cyan-700:#0e7490;
  --cyan-800:#155e75; --cyan-900:#164e63;
  /* 岩灰 slate —— 中性骨架，锚点 #334155 */
  --slate-50:#f8fafc;  --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  /* 两条轴：尽职调查(青) vs 供应安全(琥珀) */
  --dd:#0e7490;  --dd-bg:#ecfeff;  --dd-border:#a5f3fc;
  --ss:#b45309;  --ss-bg:#fffbeb;  --ss-border:#fde68a;
  /* 风险/红线 */
  --flag:#dc2626; --flag-bg:#fef2f2; --flag-border:#fecaca;
  --ok:#15803d;   --ok-bg:#f0fdf4;  --ok-border:#bbf7d0;
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
}

body { font-family:'Inter','Noto Sans SC',system-ui,sans-serif; color:var(--slate-800); }
.wrap { max-width:1200px; margin:0 auto; padding:0 1rem; }
@media (min-width:640px){ .wrap { padding:0 1.5rem; } }

/* 中文排版：消除孤字 / 优化断行 */
h1, h2, h3, .cm-hero .lead, .section-sub, .q-card h3, .reg-card h3, .ph-lead { text-wrap: balance; }
p, li, .cm-hero .desc, .q-card p, .oecd-step p, .mineral-body, .reg-row .v,
.term-def, .gl-def, .info-card p, .risk-items li { text-wrap: pretty; }

/* ---------- Hero ---------- */
.cm-hero { background:linear-gradient(135deg,var(--cyan-50) 0%,var(--slate-100) 100%); padding:3rem 0 2.25rem; border-bottom:1px solid var(--cyan-200); }
.cm-hero h1 { margin:0 0 .5rem; font-size:2rem; font-weight:700; color:var(--slate-900); }
.cm-hero .lead { font-size:1.1rem; color:var(--slate-700); margin-bottom:.5rem; }
.cm-hero .desc { font-size:.88rem; color:var(--slate-600); line-height:1.7; }
.cm-badge { display:inline-flex; align-items:center; gap:6px; background:var(--cyan-700); color:#fff; border-radius:20px; padding:4px 14px; font-size:.78rem; margin-bottom:1rem; font-weight:500; }
.cm-badge .dot { width:8px; height:8px; border-radius:50%; background:#67e8f9; }
.cm-cta-group { display:flex; gap:12px; margin-top:1.25rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.6rem 1.4rem; border-radius:var(--radius-md); font-weight:600; font-size:.92rem; text-decoration:none; transition:background .15s, transform .1s; }
.btn-primary { background:var(--cyan-700); color:#fff; }
.btn-primary:hover { background:var(--cyan-800); color:#fff; transform:translateY(-1px); }
.btn-ghost { border:1.5px solid var(--cyan-300); color:var(--cyan-700); background:#fff; }
.btn-ghost:hover { background:var(--cyan-50); }

/* ---------- 主线 OECD → RMI → 法规 ---------- */
.cm-flow { display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap; margin:1.5rem 0 .5rem; }
.flow-node { flex:1; min-width:200px; background:#fff; border:1px solid var(--slate-200); border-top:3px solid var(--cyan-600); border-radius:var(--radius-md); padding:1rem 1.15rem; }
.flow-node .fn-k { font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--cyan-700); margin-bottom:.3rem; }
.flow-node .fn-t { font-size:1rem; font-weight:600; color:var(--slate-900); margin-bottom:.3rem; }
.flow-node .fn-d { font-size:.82rem; color:var(--slate-600); line-height:1.6; }
.flow-arrow { display:flex; align-items:center; color:var(--slate-300); font-weight:700; font-size:1.2rem; }
@media (max-width:760px){ .flow-arrow { transform:rotate(90deg); justify-content:center; width:100%; } }
.cm-flow-note { background:var(--ok-bg); border:1px solid var(--ok-border); border-radius:var(--radius-md); padding:.7rem 1rem; font-size:.83rem; color:#166534; line-height:1.6; margin-top:.4rem; }
.cm-flow-note b { color:#14532d; }

/* ---------- 集群定位条 ---------- */
.cm-cluster { background:var(--slate-800); color:var(--slate-100); padding:.85rem 0; }
.cm-cluster-inner { display:flex; align-items:center; justify-content:center; gap:.5rem 1rem; flex-wrap:wrap; font-size:.83rem; }
.cm-cluster .cl-label { font-weight:700; color:#fff; }
.cm-cluster .cl-item { display:inline-flex; align-items:center; gap:.35rem; color:var(--slate-200); }
.cm-cluster .cl-item.here { color:var(--cyan-300); font-weight:600; }
.cm-cluster .cl-item a { color:var(--slate-200); text-decoration:underline; text-underline-offset:2px; }
.cm-cluster .cl-item a:hover { color:#fff; }
.cm-cluster .cl-sep { color:var(--slate-500); }

/* ---------- Stats strip ---------- */
.cm-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--slate-200); }
@media (max-width:768px){ .cm-stats { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .cm-stats { grid-template-columns:repeat(2,1fr); } }
.cm-stat { text-align:center; }
.cm-stat .stat-num { font-size:2rem; font-weight:700; color:var(--cyan-700); line-height:1.1; }
.cm-stat .stat-label { font-size:.82rem; color:var(--slate-600); margin-top:.15rem; }

/* ---------- 通用区块标题 ---------- */
.section { padding:2.5rem 0; }
.section.alt { background:var(--surface,#f8fafc); }
.section-h2 { text-align:center; margin:0 0 .3rem; font-size:1.5rem; color:var(--slate-900); }
.section-sub { text-align:center; color:var(--slate-600); margin:0 auto 2rem; font-size:.92rem; max-width:680px; line-height:1.6; }

/* ---------- 快捷卡 ---------- */
.cm-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
@media (max-width:880px){ .cm-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .cm-cards { grid-template-columns:1fr; } }
.q-card { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1.25rem 1.3rem; transition:transform .15s, box-shadow .15s, border-color .15s; }
.q-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--cyan-300); }
.q-card .q-ico { font-size:1.5rem; margin-bottom:.5rem; }
.q-card h3 { font-size:1rem; color:var(--slate-900); margin:0 0 .35rem; }
.q-card p { font-size:.83rem; color:var(--slate-600); line-height:1.6; margin:0 0 .6rem; }
.q-card .q-go { font-size:.82rem; color:var(--cyan-700); font-weight:600; }

/* ---------- 矿种卡 ---------- */
.mineral-group-label { font-size:.82rem; font-weight:700; color:var(--slate-500); margin:1.5rem 0 .7rem; display:flex; align-items:center; gap:.5rem; }
.mineral-group-label .tag { font-size:.66rem; font-weight:700; padding:1px 8px; border-radius:8px; background:var(--cyan-50); color:var(--cyan-700); }
.mineral-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.85rem; }
.mineral-card { background:#fff; border:1px solid var(--slate-200); border-left:4px solid; border-radius:var(--radius-md); padding:1rem 1.15rem; }
.mineral-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.mineral-symbol { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:var(--radius-sm); color:#fff; font-size:.9rem; font-weight:700; flex-shrink:0; }
.mineral-name { font-size:.98rem; font-weight:600; color:var(--slate-900); margin:0; }
.mineral-en { font-size:.72rem; color:var(--slate-400); margin-top:.1rem; }
.mineral-body { font-size:.8rem; color:var(--slate-600); line-height:1.6; margin:0 0 .4rem; }
.mineral-src { font-size:.76rem; color:var(--slate-500); line-height:1.55; }
.mineral-src b { color:var(--flag); font-weight:600; }

/* ---------- OECD 五步 ---------- */
.oecd-steps { display:flex; flex-direction:column; gap:.7rem; }
.oecd-step { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1.1rem 1.3rem; display:flex; gap:1rem; align-items:flex-start; }
.oecd-num { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--cyan-700); color:#fff; font-weight:700; flex-shrink:0; font-size:1.05rem; }
.oecd-step h3 { font-size:1rem; color:var(--slate-900); margin:0 0 .35rem; }
.oecd-step p { font-size:.85rem; color:var(--slate-700); line-height:1.65; margin:0 0 .5rem; }
.oecd-step .actions { list-style:none; padding:0; margin:0; }
.oecd-step .actions li { font-size:.8rem; color:var(--slate-600); padding:.2rem 0 .2rem 1.2rem; position:relative; line-height:1.55; }
.oecd-step .actions li::before { content:'·'; position:absolute; left:.3rem; color:var(--cyan-600); font-weight:700; }
.oecd-step .step-note { font-size:.78rem; color:var(--cyan-800); background:var(--cyan-50); border-radius:var(--radius-sm); padding:.45rem .7rem; margin-top:.5rem; line-height:1.55; }
.oecd-step.step6 .oecd-num { background:var(--ss); }
.oecd-step.step6 .actions li::before { color:var(--ss); }

/* ---------- 风险清单 ---------- */
.risk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
@media (max-width:760px){ .risk-grid { grid-template-columns:1fr; } }
.risk-cat { background:#fff; border:1px solid var(--slate-200); border-left:4px solid var(--flag); border-radius:var(--radius-md); padding:1rem 1.2rem; }
.risk-cat h4 { font-size:.92rem; color:var(--slate-900); margin:0 0 .5rem; }
.risk-items { list-style:none; padding:0; margin:0 0 .6rem; }
.risk-items li { font-size:.8rem; color:var(--slate-600); padding:.2rem 0 .2rem 1.1rem; position:relative; line-height:1.55; }
.risk-items li::before { content:'▸'; position:absolute; left:0; color:var(--flag); }
.risk-resp { font-size:.78rem; color:#991b1b; background:var(--flag-bg); border:1px solid var(--flag-border); border-radius:var(--radius-sm); padding:.45rem .7rem; line-height:1.5; }

/* ---------- 法规卡（两轴） ---------- */
.axis-legend { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.axis-chip { font-size:.8rem; font-weight:600; padding:.35rem .9rem; border-radius:20px; border:1px solid; }
.axis-chip.dd { color:var(--dd); background:var(--dd-bg); border-color:var(--dd-border); }
.axis-chip.ss { color:var(--ss); background:var(--ss-bg); border-color:var(--ss-border); }
.reg-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:820px){ .reg-grid { grid-template-columns:1fr; } }
.reg-card { background:#fff; border:1px solid var(--slate-200); border-top:4px solid var(--dd); border-radius:var(--radius-md); padding:1.25rem 1.4rem; position:relative; }
.reg-card.ss { border-top-color:var(--ss); }
.reg-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.2rem; }
.reg-card h3 { font-size:1.05rem; color:var(--slate-900); margin:0; }
.reg-card .reg-en { font-size:.74rem; color:var(--slate-400); margin-bottom:.7rem; }
.reg-flag { font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:8px; white-space:nowrap; background:var(--slate-100); color:var(--slate-600); }
.reg-card.dd .reg-flag { background:var(--dd-bg); color:var(--dd); }
.reg-card.ss .reg-flag { background:var(--ss-bg); color:var(--ss); }
.reg-row { display:grid; grid-template-columns:5.2rem 1fr; gap:.5rem; padding:.4rem 0; border-top:1px solid var(--slate-100); font-size:.82rem; }
.reg-row .k { color:var(--slate-400); font-weight:600; }
.reg-row .v { color:var(--slate-700); line-height:1.55; }
.reg-watch { margin-top:.7rem; font-size:.8rem; line-height:1.6; background:var(--cyan-50); border:1px solid var(--cyan-200); border-radius:var(--radius-sm); padding:.55rem .8rem; color:var(--cyan-900); }
.reg-card.ss .reg-watch { background:var(--ss-bg); border-color:var(--ss-border); color:#7c2d12; }
.reg-badge { display:inline-block; font-size:.66rem; font-weight:700; color:#166534; background:var(--ok-bg); border:1px solid var(--ok-border); padding:1px 7px; border-radius:8px; margin-bottom:.5rem; }
.reg-link { display:inline-block; margin-top:.6rem; font-size:.8rem; color:var(--cyan-700); font-weight:600; text-decoration:none; }
.reg-link:hover { text-decoration:underline; }

/* ---------- 工具卡（RMAP / CMRT / EMRT） ---------- */
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.tool-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1.2rem 1.4rem; }
.tool-card { border-top:4px solid var(--slate-400); }
.tool-card.rmap { border-top-color:var(--cyan-700); }
.tool-card.cmrt { border-top-color:var(--slate-700); }
.tool-card.emrt { border-top-color:var(--ss); }
.tool-head { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.1rem; }
.tool-card h3 { font-size:1.05rem; color:var(--slate-900); margin:0; }
.tool-meta { font-size:.72rem; color:var(--slate-400); }
.tool-ver { font-size:.68rem; font-weight:700; padding:1px 8px; border-radius:8px; background:var(--slate-100); color:var(--slate-600); }
.tool-body { font-size:.84rem; color:var(--slate-600); line-height:1.65; margin:.55rem 0 .6rem; }
.tool-sub { list-style:none; padding:0; margin:0 0 .6rem; }
.tool-sub li { font-size:.79rem; color:var(--slate-600); padding:.22rem 0 .22rem 1.1rem; position:relative; line-height:1.5; }
.tool-sub li::before { content:'›'; position:absolute; left:.1rem; color:var(--cyan-600); font-weight:700; }
.tool-link { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--cyan-700); font-weight:600; text-decoration:none; }
.tool-link:hover { text-decoration:underline; }
.tool-badge { display:inline-block; font-size:.66rem; font-weight:700; color:#166534; background:var(--ok-bg); border:1px solid var(--ok-border); padding:1px 7px; border-radius:8px; margin-top:.5rem; }

/* ---------- 对比表 ---------- */
.cmp-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp-table { width:100%; min-width:680px; border-collapse:collapse; font-size:.83rem; background:#fff; border-radius:var(--radius-md); overflow:hidden; }
.cmp-table th { background:var(--slate-700); color:#fff; padding:.7rem .8rem; text-align:left; font-weight:600; font-size:.78rem; }
.cmp-table th:first-child { background:var(--slate-800); }
.cmp-table td { padding:.65rem .8rem; border-bottom:1px solid var(--slate-200); border-right:1px solid var(--slate-100); vertical-align:top; color:var(--slate-700); line-height:1.55; }
.cmp-table tr:last-child td { border-bottom:none; }
.cmp-table td:first-child { font-weight:600; color:var(--slate-900); background:var(--slate-50); }
.cmp-table tr:hover td { background:var(--cyan-50); }

/* ---------- 信息卡 / CAHRA 框 ---------- */
.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:680px){ .info-grid { grid-template-columns:1fr; } }
.info-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1.2rem 1.4rem; }
.info-card h3 { font-size:1rem; color:var(--slate-900); margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.info-card p { font-size:.86rem; color:var(--slate-600); line-height:1.7; margin:0; }
.info-card ul { margin:.4rem 0 0; padding-left:1.2rem; }
.info-card li { font-size:.83rem; color:var(--slate-600); line-height:1.6; margin:.2rem 0; }
.callout { border-radius:var(--radius-lg); padding:1.3rem 1.5rem; }
.callout.warn { background:var(--ss-bg); border:1px solid var(--ss-border); }
.callout.warn h3 { color:#92400e; margin:0 0 .5rem; font-size:1rem; }
.callout.warn p, .callout.warn li { color:#7c2d12; font-size:.85rem; line-height:1.65; }

/* ---------- 术语表 ---------- */
.gl-controls { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); padding:1rem 0; border-bottom:1px solid var(--slate-200); }
.gl-search { width:100%; padding:.65rem 1rem; border:1px solid var(--slate-300); border-radius:var(--radius-md); font-size:.9rem; font-family:inherit; }
.gl-search:focus { outline:none; border-color:var(--cyan-400); box-shadow:0 0 0 3px var(--cyan-50); }
.gl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.85rem; padding-top:1.5rem; }
.gl-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1rem 1.2rem; }
.gl-card .gl-top { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.1rem; }
.gl-card .gl-cn { font-weight:700; color:var(--slate-900); font-size:.92rem; }
.gl-card .gl-en { color:var(--slate-400); font-size:.76rem; margin-bottom:.4rem; }
.gl-card .gl-src { font-size:.62rem; font-weight:600; padding:1px 7px; border-radius:8px; white-space:nowrap; background:var(--slate-100); color:var(--slate-500); }
.gl-card .gl-def { font-size:.82rem; color:var(--slate-600); line-height:1.6; }
.gl-empty { text-align:center; color:var(--slate-400); padding:2.5rem; font-size:.9rem; grid-column:1/-1; }

/* ---------- 子导航 / 面包屑 / 页头 ---------- */
.subnav { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--slate-200); }
.subnav .sn-label { font-size:.72rem; color:var(--slate-400); font-weight:700; margin-right:.3rem; }
.subnav a { font-size:.82rem; padding:.38rem .85rem; border-radius:20px; text-decoration:none; color:var(--slate-600); border:1px solid var(--slate-200); background:#fff; transition:all .12s; }
.subnav a:hover { border-color:var(--cyan-300); color:var(--cyan-700); }
.subnav a.active { background:var(--cyan-700); color:#fff; border-color:var(--cyan-700); }
.crumb { font-size:.8rem; color:var(--slate-500); padding:1rem 0 0; }
.crumb a { color:var(--cyan-700); text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
.crumb .sep { margin:0 .4rem; color:var(--slate-300); }
.page-hero { padding:1.25rem 0 1.5rem; border-bottom:1px solid var(--slate-200); }
.page-hero .ph-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:2px 9px; border-radius:4px; margin-bottom:.5rem; background:var(--cyan-100); color:var(--cyan-700); }
.page-hero h1 { font-size:1.9rem; color:var(--slate-900); margin:.2rem 0 .5rem; }
.page-hero .ph-lead { font-size:.95rem; color:var(--slate-600); line-height:1.7; }

/* ---------- CTA + 免责声明 ---------- */
.cm-cta-box { background:linear-gradient(135deg,var(--slate-800),var(--cyan-800)); border-radius:var(--radius-lg); padding:1.75rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:2.5rem 0 1rem; }
.cm-cta-box p { color:#fff; font-size:1rem; margin:0; }
.cm-cta-box .cta-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.cm-cta-primary { background:var(--cyan-500); color:#fff; padding:.6rem 1.3rem; border-radius:var(--radius-md); text-decoration:none; font-weight:600; font-size:.9rem; }
.cm-cta-primary:hover { background:var(--cyan-600); }
.cm-cta-secondary { background:rgba(255,255,255,.12); color:#fff; padding:.6rem 1.3rem; border-radius:var(--radius-md); text-decoration:none; font-weight:600; font-size:.9rem; border:1px solid rgba(255,255,255,.3); }
.cm-cta-secondary:hover { background:rgba(255,255,255,.2); }
.cm-disclaimer { font-size:.8rem; color:var(--slate-500); text-align:center; padding:.5rem 0 2.5rem; line-height:1.7; }
.cm-disclaimer a { color:var(--cyan-700); }
/* 正文内联链接缺省样式：仅作用于无 class 的内容链接（青色+下划线，明确可点击）；
   带 class 的导航/按钮/卡片/暗底链接因更高优先级不受影响 */
a:not([class]) { color:var(--cyan-700); text-decoration:underline; text-underline-offset:2px; }
a:not([class]):hover { color:var(--cyan-900); }
.cm-copyright { font-size:.75rem; color:var(--slate-400); line-height:1.6; padding:.5rem 0; }