/* ============================================================
   蓝白主题 · 公共基础层
   ------------------------------------------------------------
   来源：与「重点产业链图景」(industry-chain-v2.html) :root 完全一致的色板。
   适用：经贸政策模块（policy-theme.css）、关键供应链流向模块（flow-theme.css）
         等所有要并入产业链风格的页面。
   引入顺序（必须）：
     vendor/tailwind.css  →  vendor/theme-blue.css  →  模块主题 css
   ------------------------------------------------------------
   覆盖技巧：Tailwind 的原子类是单类（特异性 0,1,0），这里一律用
   `.pg-body .text-gray-800`（0,2,0）这类后代选择器压过去，因此页面里
   静态或 JS 动态生成的 text-gray-* / bg-gray-* 都不需要逐个改。
   ============================================================ */

:root{
  /* 与 industry-chain-v2.html :root 完全一致的色板 */
  --bg:#E9F2FD; --card:#FFFFFF; --text:#0A2E63; --text2:#3D5E8C; --text3:#7C96B8;
  --border:#D5E6F9; --border2:#AECBEE;
  --accent:#0B6BE0; --accent2:#1689FF; --accent-bg:#E6F1FE;
  --up:#2E8BEB; --mid:#6E4BE8; --down:#0FB8C4;
  --red:#E0604F; --yellow:#E0A93C; --green:#3FA96B;
  --strat:#3C7FC4; --future:#7A63D8; --trad:#3E9AA8;
  --strat-bg:#E8F2FE; --future-bg:#EEEBFB; --trad-bg:#E6F5F7;
  --shadow-sm:0 1px 3px rgba(11,88,164,.07);
  --shadow-md:0 8px 22px rgba(11,88,164,.14);
  --r6:8px; --r8:10px; --r10:12px; --r14:16px;

  /* ---- co-* 页面（co-country / co-companies）内联样式使用的变量别名 ----
     这两个页自带 :root，本文件在其 <style> 之后加载，同名变量由本文件取胜，
     因此只需重定义这几个别名即可把它们整体换色，不必改动页面。 */
  --ink:#0A2E63;      /* 正文主色（原 #1a2230） */
  --sub:#3D5E8C;      /* 次级文字（原 #5b6675） */
  --blue:#0B6BE0;     /* 主蓝（原 #1668c4） */
  --blue-l:#E6F1FE;   /* 浅蓝底（原 #e8f1fb） */
  --line:#C6DBF4;     /* 分隔线 / 描边（原 #c3cedd / #d3dce8） */
  --amber:#B9822A;
  --green2:#2C7D55;
}

/* ---------- 页面底 ---------- */
.pg-body{
  min-height:100vh;
  font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,sans-serif;
  color:var(--text);
  background:linear-gradient(175deg,#F0F7FF 0%,#E4EFFC 46%,#DCEAFB 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* 内容宽度对齐产业链（atlas-inner max-width:1420px） */
.pg-body>.container,.pg-body>main.container{max-width:1440px;padding:22px 22px 40px}

/* ---------- Tailwind 中性色 → 蓝白主题 ---------- */
.pg-body .text-gray-800,.pg-body .text-gray-900{color:var(--text)}
.pg-body .text-gray-700,.pg-body .text-gray-600{color:var(--text2)}
.pg-body .text-gray-500,.pg-body .text-gray-400{color:var(--text3)}
.pg-body .text-blue-600,.pg-body .text-blue-700,.pg-body .text-blue-800{color:var(--accent)}
.pg-body .bg-gray-50,.pg-body .bg-gray-100{background:var(--accent-bg)}
.pg-body .border-gray-200,.pg-body .border-gray-100{border-color:var(--border)}
.pg-body h2,.pg-body h3{color:var(--text)}
.pg-body p{color:var(--text3)}
.pg-body a{text-decoration:none}

/* Tailwind 色族 → 产业链三族 + 琥珀，统一饱和度与明度档位 */
.pg-body .text-purple-600{color:#5B47C4}
.pg-body .text-purple-700{color:#5B47C4}
.pg-body .bg-purple-50{background:var(--future-bg)}
.pg-body .text-stone-600,.pg-body .text-stone-700{color:#2A7F8C}
.pg-body .bg-stone-50{background:var(--trad-bg)}
.pg-body .text-amber-600,.pg-body .text-amber-700{color:#A9762B}
.pg-body .bg-amber-50{background:#FDF1E3}
.pg-body .bg-blue-50{background:var(--strat-bg)}
.pg-body .bg-blue-700{
  background:linear-gradient(135deg,#168fff,#0757e8);border-color:transparent;color:#fff
}
.pg-body .hover\:bg-blue-100:hover,.pg-body .hover\:bg-blue-50:hover{background:var(--accent-bg)}

/* 主按钮（加载更多等） */
.load-more-btn{
  display:block;margin:20px auto;padding:9px 32px;
  background:linear-gradient(135deg,#168fff,#0757e8);color:#fff;
  border:none;border-radius:var(--r8);font-family:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(0,103,244,.26)
}
.load-more-btn:hover{box-shadow:0 8px 22px rgba(0,103,244,.36);transform:translateY(-1px)}

/* 空状态：对齐产业链 .atlas-empty */
.no-result{
  text-align:center;padding:52px 20px;font-size:14.5px;color:var(--text3);
  background:rgba(255,255,255,.72);border:1px dashed var(--border2);border-radius:var(--r14)
}
.no-result .text-lg{font-size:16px;color:var(--text2);font-weight:600}

/* 徽标四色：产业链三族 + 琥珀 */
.meta-badge,.badge{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:var(--r6);font-size:13px;font-weight:500;white-space:nowrap;
}
.meta-country,.badge-country{background:var(--strat-bg);color:#2C6FB4}
.meta-industry,.badge-industry{background:var(--trad-bg);color:#2A7F8C}
.meta-type,.badge-type{background:var(--future-bg);color:#5B47C4}
.meta-category,.badge-category{background:#FDF1E3;color:#A9762B}

/* 模块大标题：与产业链 .atlas-head h2 同款蓝色渐变
   渐变文字必须留右出血，否则末字会被背景盒裁掉（见项目问题清单第 8 条） */
.pg-h2{
  display:inline-block;
  font-size:clamp(21px,1.9vw,27px);font-weight:800;letter-spacing:.6px;line-height:1.3;
  background:linear-gradient(100deg,#0757e8 0%,#1689ff 52%,#0B348C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.08em;
}

/* 通用卡片：白底 + 蓝描边 + 蓝阴影 + hover 上浮（原型 .chain-card） */
.pg-body .card-hover{
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--r8);
  box-shadow:0 4px 14px rgba(11,88,164,.09);
  transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s;
}
.pg-body .card-hover:hover{
  background:#fff;transform:translateY(-3px);border-color:#5FA5EA;
  box-shadow:0 16px 34px rgba(11,88,164,.2)
}
/* 白底容器（筛选条 / 面板）统一描边与阴影 */
.pg-body .bg-white.rounded-lg,.pg-body .bg-white.rounded{
  border:1px solid var(--border);box-shadow:var(--shadow-sm)
}
.pg-body footer{background:transparent;border-top:1px solid var(--border2)}
.pg-body footer .text-gray-500,.pg-body footer .text-gray-400{color:var(--text3)}