/* 外贸速查手册 —— 全站样式。单栏、无第三方库、无动画。
   改动要点（2026-10-29）：
     1. 首页顶部加 hero 底图（世界地图 SVG + 蒙版），照推送报告的封面形式；
     2. 三个导航改成 tab 样式；
     3. 国别页的键值块从两列网格改成上下堆叠 —— 两列时数值缩进 6.5em，
        与 h2 标题不在一条左边界上，视觉上"内容列没对齐"；
     4. 比例数字下方插 donut 饼图（内联 SVG，沿用报告里 _grain_pie 的 r=15.9155 技巧）。
*/
:root{
  --ink:#1a1c20; --mute:#6b7280; --line:#e5e7eb; --bg:#fbfbfa; --hi:#1d4ed8;
  --tag:#f3f4f6; --dark:#0b1018; --pie:#1d4ed8; --pie-bg:#e7eaf0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.75 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
a{color:var(--hi); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------- 页头：首页 hero ---------------- */
.hero{position:relative;height:300px;background:#0f1720;overflow:hidden}
.hero-map{
  position:absolute; inset:0; background-repeat:no-repeat;
  background-position:center 40%; background-size:cover;
  opacity:1;
}
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(11,16,24,.10) 0%, rgba(11,16,24,.45) 55%, rgba(11,16,24,.90) 100%);
}
.hero-inner{
  position:absolute; left:0; right:0; bottom:30px;
  max-width:820px; margin:0 auto; padding:0 20px;
}
.hero-title{
  margin:0; color:#fff; font-size:34px; line-height:1.25; font-weight:700;
  letter-spacing:.01em;
}

/* 内页：只留一行站名，不再放导航（导航是下面的 tab） */
.bar{max-width:820px; margin:0 auto; padding:24px 20px 0}
.bar .brand{font-size:15px; font-weight:650; color:var(--ink)}

/* ---------------- tab 导航 ---------------- */
/* 不用 overflow-x:auto —— 它会在 tab 条右侧压出一条滚动条（内容根本没溢出）。
   窄屏就让 tab 换行，比横向滚动条干净。 */
.tabs{
  max-width:820px; margin:0 auto; padding:0 20px;
  display:flex; flex-wrap:wrap; gap:0 4px; border-bottom:1px solid var(--line);
}
.tabs a{
  flex:0 0 auto; padding:13px 16px; font-size:15px; color:var(--mute);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tabs a:hover{color:var(--ink); text-decoration:none}
.tabs a.on{color:var(--ink); font-weight:650; border-bottom-color:var(--hi)}

main{max-width:820px; margin:0 auto; padding:26px 20px 56px}
h1{font-size:25px; line-height:1.4; margin:0 0 6px; font-weight:650}
h1 .en{font-size:15px; font-weight:400; color:var(--mute); margin-left:8px}
h2{font-size:17px; margin:34px 0 12px; padding-top:16px; border-top:1px solid var(--line)}
h3{font-size:15px; margin:20px 0 8px}
.lead{color:var(--mute); font-size:14px; margin:0 0 10px}
.crumb{font-size:13px; color:var(--mute); margin:0 0 14px}

/* ---------------- 键值块：上下堆叠，左边界与 h2 一致 ---------------- */
dl{margin:0}
dt{color:var(--mute); font-size:12.5px; margin:12px 0 2px; letter-spacing:.02em}
dt:first-child{margin-top:0}
dd{margin:0; font-size:15.5px}

/* ---------------- 表格 ---------------- */
table{width:100%; border-collapse:collapse; font-size:14px; margin:10px 0 0}
th,td{text-align:left; padding:8px 8px; border-bottom:1px solid var(--line);
  vertical-align:middle}
/* 首列与末列不吃内边距 —— 否则表格文字比 h2 标题右移 8px，看着就是"没对齐" */
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
th{color:var(--mute); font-weight:600; font-size:12.5px; white-space:nowrap}
/* 数值列的表头也要右对齐 —— 否则表头贴左、数字贴右，整列看着就是"没对齐" */
th.num{text-align:right}
td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
td.piecell{width:52px; text-align:center; padding:4px 0}
.src{color:var(--mute); font-size:12.5px; margin:8px 0 0}
.mute{color:var(--mute)}
.tag{
  display:inline-block; padding:1px 7px; margin-left:6px; border-radius:3px;
  background:var(--tag); color:var(--mute); font-size:12px; font-weight:400;
}

/* ---------------- 饼图（内联 SVG donut） ---------------- */
/* display:block 的块级元素不吃 text-align，所以在右对齐的单元格里要 auto 左边距，
   否则数字靠右、圆环贴左，看着错位。 */
.donut{display:block; margin:5px 0 0}
td .donut{margin-left:auto}
.donut-cap{font-size:12.5px; color:var(--mute)}

/* ---------------- 国家列表（带国旗） ---------------- */
.searchbox{
  width:100%; padding:11px 13px; font-size:16px; margin:14px 0 6px;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink);
}
.searchbox:focus{outline:none; border-color:var(--hi)}
ul.countries{list-style:none; margin:0; padding:0}
ul.countries li{border-bottom:1px solid var(--line)}
ul.countries a{
  display:flex; align-items:center; gap:10px; padding:10px 2px; color:var(--ink);
}
ul.countries a:hover{text-decoration:none; background:#fff}
ul.countries .flag{
  flex:0 0 auto; width:22px; height:auto; border:1px solid var(--line);
  border-radius:2px; background:#fff;
}
ul.countries .zh{font-weight:550}
ul.countries .en{color:var(--mute); font-size:13px}
ul.countries .bl{margin-left:auto; font-size:12px; color:var(--mute); white-space:nowrap}
.empty{color:var(--mute); font-size:14px; padding:12px 2px}

/* ---------------- 推广栏 ---------------- */
.promo{
  margin:34px 0 0; padding:22px; border:1px solid var(--line); border-radius:10px;
  background:#fff;
}
.promo h2{margin:0 0 8px; padding:0; border:0; font-size:18px}
.promo p{margin:0 0 10px; font-size:14.5px; color:#33373d}
.promo .kv{font-size:13.5px; color:var(--mute); margin:0 0 6px}
.promo .kv b{color:var(--ink); font-weight:600}
.cmd{
  display:block; position:relative; margin:10px 0 0; padding:12px 14px;
  background:#0f141b; color:#d7e2ef; border-radius:8px;
  font:13px/1.6 ui-monospace,Consolas,Menlo,monospace;
  white-space:pre-wrap; word-break:break-all;
}
.promo .hint{font-size:12.5px; color:var(--mute); margin-top:8px}

/* ---------------- 推广位：走马灯 ---------------- */
.promo{margin:22px 0 18px}
.carousel{
  position:relative; height:216px; border-radius:10px; overflow:hidden;
  background:#0f1720; border:1px solid var(--line);
}
.slide{
  position:absolute; inset:0; display:block; color:#fff;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.slide.on{opacity:1; pointer-events:auto}
.slide:hover{text-decoration:none}
.slide-veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(9,13,19,.90) 0%, rgba(9,13,19,.72) 46%, rgba(9,13,19,.28) 100%);
}
.slide-inner{
  position:absolute; inset:0; padding:22px 24px;
  display:flex; flex-direction:column; justify-content:center; max-width:62%;
}
.slide-icon{
  width:40px; height:40px; border-radius:8px; margin-bottom:8px;
  background:#fff; object-fit:contain;
}
.slide-kicker{font-size:11.5px; letter-spacing:.14em; color:#9fc0e8; text-transform:uppercase}
.slide-title{font-size:22px; font-weight:700; margin:3px 0 6px; line-height:1.25}
.slide-desc{font-size:13.5px; color:#c8d6e6; line-height:1.6}
.slide-cta{font-size:13.5px; color:#8fc2ff; margin-top:10px; font-weight:600}
.dots{
  position:absolute; right:16px; bottom:14px; display:flex; gap:7px; z-index:3;
}
.dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.35); cursor:pointer;
}
.dots button.on{background:#fff}
.promo .hint{margin:8px 0 0; font-size:12.5px; color:var(--mute)}

/* ---------------- 技能详情页 ---------------- */
.crumb-back{font-size:13px; margin:0 0 14px}
.crumb-back a{color:var(--mute)}
.skill-banner{
  position:relative; height:180px; margin:16px 0 0; border-radius:10px;
  overflow:hidden; background-size:cover; background-position:center; background-color:#0f1720;
}
.skill-banner-veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(9,13,19,.86) 0%, rgba(9,13,19,.40) 100%);
}
.skill-banner-inner{
  position:absolute; inset:0; padding:20px 22px; display:flex;
  align-items:center; gap:14px;
}
.skill-banner-inner img{
  width:56px; height:56px; border-radius:10px; background:#fff;
  object-fit:contain; flex:0 0 auto;
}
.skill-banner-text{color:#eaf1f9; font-size:15px; line-height:1.6; font-weight:500}
ul.plain{margin:0; padding-left:1.2em}
ul.plain li{margin:6px 0; font-size:15px}

/* ---------------- 页脚 ---------------- */
footer.site{
  border-top:1px solid var(--line); font-size:12.5px; color:var(--mute);
  max-width:820px; margin:0 auto; padding:20px;
}
footer.site p{margin:0 0 4px}

/* ---------------- 窄屏 ---------------- */
@media (max-width:560px){
  .hero{height:210px}
  .hero-title{font-size:25px}
  .hero-inner{bottom:20px}
  main{padding:20px 16px 44px}
  .tabs,.bar,footer.site{padding-left:16px; padding-right:16px}
  .tabs a{padding:11px 12px; font-size:14px}
  th,td{padding:7px 5px}
  ul.countries .en{display:none}
  .promo{padding:16px}
}