/* ============================================================
   LMKJ123.COM 设计系统 · UI 原型 · 整站主题（style.css）
   依据《LMKJ123_品牌配色方案.md》（2026-10 起整站启用方案 B）：
   阳光橙 #FF8A00 + 拉美活力黄 #FFC928 + 深灰商务 #1F2937
   纯白 SaaS 底 + 冷灰描边 + 分类图标「拉美彩虹」
   （原暖橙方案 A 已弃用，A→B 令牌映射见 DESIGN.md §1.1）
   ============================================================ */

:root {
  /* 品牌色（方案 B） */
  --grad-start: #FFB000;   /* 渐变亮端（金） */
  --grad-mid:   #FF8A00;   /* 渐变中值（活力橙，即主色） */
  --grad-end:   #FF6A00;   /* 渐变暗端（深橙） */
  --brand:      #FF8A00;   /* 活力橙：CTA / 链接 hover / 选中态 */
  --brand-dark: #FF6A00;   /* 深橙：按钮 hover */
  --brand-deep: #C2410C;   /* 可读深橙：浅底上的橙色文字 */
  --brand-soft: #FFF8E8;   /* 浅黄底：选中背景 / 图标底 */
  --brand-tint: #FFF1E6;   /* 浅橙底：开店 / 强调模块 */
  --brand-line: #FFE0B2;   /* 品牌描边 */
  --gold:       #FFC928;   /* 拉美金：深底强调 / 新功能标识 */

  /* 中性色（冷灰，商务感） */
  --ink-900: #1F2937;      /* 深商务黑：标题 / 导航 */
  --ink-700: #374151;      /* 正文 */
  --ink-500: #6B7280;      /* 次级文字 */
  --ink-400: #9CA3AF;      /* 辅助文字 / 占位符 */
  --line:    #E5E7EB;      /* 分割线、卡片描边 */
  --bg:      #FFFFFF;      /* 页面纯白底 */
  --card:    #FFFFFF;
  --tint:    #F9FAFB;      /* 浅灰步骤底（step / post-nav / formula） */

  /* 国家标签色 */
  --c-mx: #007A33;  /* 墨西哥绿 */
  --c-br: #008545;  /* 巴西绿 */
  --c-latam: #B4530F; /* 泛拉美暖棕 */

  /* 圆角 / 阴影 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow-md: 0 6px 24px -8px rgba(17, 24, 39, .12);
  --shadow-brand: 0 8px 24px -8px rgba(255, 138, 0, .38);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei",
          "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }

/* ---------- 全局滚动条（细 · 冷灰适配主题） ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #D1D5DB; border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }  /* 只用 clip 防横向溢出：不产生滚动容器、sticky 稳定；hidden 会让 html 变滚动容器，Chrome 下吸顶时灵时不灵 */

body {
  font-family: var(--font);
  color: var(--ink-700);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html.nav-locked { overflow: hidden; }  /* 抽屉展开锁滚动：必须挂 html（root 的 overflow 才传播到视口、冻结时保持当前位置）；挂 body 会把 body 变成滚动容器，顶栏 sticky 立即失效弹回文档顶部 */

a { color: inherit; text-decoration: none; }
img { display: block; }
button, input, select { font-family: inherit; }

.container { max-width: 1600px; margin: 0 auto; padding: 0 32px; }  /* 全站统一宽屏；横向 32px 与页头/页脚对齐 */

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .18s ease; white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost {
  color: var(--ink-700);
  background: #fff; border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 图标体系（Remix Icon · line 线性风格，禁止 emoji 充当图标） ---------- */
i[class^="ri-"], span[class^="ri-"] { font-style: normal; }
.icon-btn i { font-size: 18px; }
.search-box .s-ico { font-size: 18px; }
.cat-ico i { font-size: 18px; font-weight: 400; }
.cat-rail a .r-ico i { font-size: 17px; font-weight: 400; }
.site-card .avatar i { font-size: 17px; font-weight: 400; }
.tool-ico i { font-size: 21px; font-weight: 400; }
.tool-panel-head .tool-ico i { font-size: 24px; }
.cat-more i { font-size: 13px; }
.chip i { font-size: 14px; }
.side-card h3 i { font-size: 17px; color: var(--brand); }
.side-tools .ti i { font-size: 17px; }

/* ============================================================
   顶部导航
   ============================================================ */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { width: 36px; height: 36px; border-radius: 9px; }
.logo-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }   /* 字标 + 副标题竖排，导航栏 logo 下方一行灰色小字 */
.logo-sub { font-size: 10px; font-weight: 600; color: var(--ink-400); letter-spacing: 1.5px; }
.logo-word {
  font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: .5px;
  color: var(--ink-900);
}
.logo-word .grad {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-domain { font-size: 10px; font-weight: 600; color: var(--ink-400); font-style: italic; }

.main-nav { display: flex; gap: 4px; flex: 1; }
.main-nav a {
  position: relative; padding: 8px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink-500);
  transition: all .15s;
}
.main-nav a:hover { color: var(--ink-900); background: var(--brand-soft); }
.main-nav a.active { color: var(--brand); background: var(--brand-soft); }
.main-nav a .new {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-end);
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  color: var(--ink-500); transition: all .15s;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.nav-toggle { display: none; }  /* 桌面隐藏汉堡；≤768 由媒体查询改 inline-flex。必须声明在所有响应式块之前，否则同优先级下会被后位规则覆盖 */

/* ============================================================
   首页 Hero（浅黄 SaaS 底）
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: 42px 0 30px;
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(255, 176, 0, .16), transparent 65%),
    radial-gradient(500px 280px at 8% 0%, rgba(255, 106, 0, .10), transparent 60%),
    linear-gradient(180deg, #FFF8E8 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner { position: relative; }

/* Hero 信息板：左主信息 + 右时区工作台 */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px; align-items: center;
}
.hero-left { min-width: 0; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; margin-bottom: 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--brand-deep); background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.hero-kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
}

.hero h1 {
  font-size: clamp(26px, 1vw + 18px, 34px);   /* 流式标题：导航站首屏要快，Hero 保持紧凑 */
  font-weight: 900; letter-spacing: -0.5px;
  color: var(--ink-900); line-height: 1.25;
}
.hero h1 em {
  font-style: italic;
  padding-right: 5px;  /* 斜体字形右伸出内容框，会被截边 */
  background: linear-gradient(135deg, var(--grad-start) 10%, var(--grad-mid) 50%, var(--grad-end) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin-top: 10px; font-size: 15px; color: var(--ink-500); }
.hero-sub b { color: var(--ink-700); font-weight: 700; }
.hero-sub .sep { margin: 0 8px; color: var(--ink-400); }

/* 大搜索框 */
.search-box {
  max-width: 560px; margin: 20px 0 0;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 18px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--brand); }
.search-box .s-ico { color: var(--ink-400); flex-shrink: 0; }
.search-box input {
  flex: 1; border: none; outline: none; font-size: 15px;
  background: transparent; color: var(--ink-900); min-width: 0;
}
.search-box input::placeholder { color: var(--ink-400); }
.search-box .btn-primary { border-radius: 999px; height: 40px; padding: 0 22px; }

.hot-tags {
  margin-top: 12px; display: flex; justify-content: flex-start; align-items: center;
  gap: 8px; flex-wrap: wrap; font-size: 12.5px;
}
.hot-tags .label { color: var(--ink-400); }
.hot-tags a {
  padding: 4px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-500);
  transition: all .15s;
}
.hot-tags a:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* 站点规模一行 */
.hero-scale { margin-top: 14px; font-size: 12.5px; color: var(--ink-400); }
.hero-scale b { font-style: italic; font-weight: 800; color: var(--brand-deep); font-variant-numeric: tabular-nums; }

/* ---------- 时区工作台卡（深商务黑底） ---------- */
.hero-clock-card {
  background: linear-gradient(135deg, #1F2937, #111827);
  border-radius: var(--r-lg); padding: 14px 16px; color: #fff;
  box-shadow: var(--shadow-md);
}
.hcc-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: #9CA3AF;
  letter-spacing: 1px; margin-bottom: 10px;
}
.hcc-title i { color: var(--gold); font-size: 15px; }
.hcc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hcc-clock {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 8px 9px; min-width: 0;
}
.hcc-clock .city { display: flex; justify-content: space-between; font-size: 10.5px; color: #9CA3AF; white-space: nowrap; }
.hcc-clock .tz { font-size: 9px; color: #6B7280; font-variant-numeric: tabular-nums; }
.hcc-clock .time {
  font-family: var(--mono);
  font-size: 15px; font-weight: 300; margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hcc-clock .time b { color: var(--gold); font-weight: 400; }
.hcc-clock .date { font-size: 9.5px; color: #6B7280; margin-top: 1px; font-variant-numeric: tabular-nums; }
/* 工作台统计格（开店页复用） */
.hcc-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 12px; text-align: center;
}
.hcc-stat b {
  display: block; font-size: 20px; font-weight: 900; font-style: italic;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.hcc-stat span { font-size: 11px; color: #9CA3AF; margin-top: 2px; display: block; }

/* ---------- 信息条：今日汇率 + 新收录 ---------- */
.hero-info-bar {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px; padding: 11px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto; scrollbar-width: none;
}
.hero-info-bar::-webkit-scrollbar { display: none; }
.hib-label {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: var(--ink-700);
}
.hib-label i { color: var(--brand); font-size: 15px; }
/* 汇率条整块点击进入 /tool-fx: display:contents 保持 flex 布局不变 */
.fx-group { display: contents; text-decoration: none; color: inherit; }
.fx-group:hover .hib-label { color: var(--brand); }
.fx-group:hover .hib-label i { transform: rotate(-12deg) scale(1.12); transition: transform .2s; }
.fx-item { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fx-item .code {
  font-size: 11.5px; font-weight: 800; color: var(--brand-deep);
  background: var(--brand-tint); padding: 1px 7px; border-radius: 6px;
}
.fx-item .rate { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.fx-item .delta { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.fx-item .delta i { font-size: 12px; }
.fx-item .delta.up { color: #16A34A; }
.fx-item .delta.down { color: #EF4444; }
.hib-sep { width: 1px; height: 26px; background: var(--line); flex-shrink: 0; }
.new-item { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-500); }
.new-item:hover b { color: var(--brand); }
.new-item b { font-weight: 600; color: var(--ink-700); }
.new-item .date { font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* ---------- 快讯滚动条 ---------- */
.hero-flash {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.hf-tag { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); }
.hf-tag i { font-size: 15px; }
.hf-marquee { flex: 1; overflow: hidden; min-width: 0; }
.hf-track {
  display: flex; gap: 48px; width: max-content; white-space: nowrap;
  animation: hf-scroll 32s linear infinite;
}
.hf-marquee:hover .hf-track { animation-play-state: paused; }
.hf-track a { font-size: 13px; color: var(--ink-700); }
.hf-track a b { color: var(--brand-deep); font-weight: 700; margin-right: 4px; }
.hf-track a:hover { color: var(--brand); }
@keyframes hf-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-flash .more { display: flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--brand-deep); }
.hero-flash .more i { font-size: 13px; }

/* ============================================================
   主体布局：左侧分类锚点栏 + 内容
   ============================================================ */
.layout {
  display: grid; grid-template-columns: 148px 1fr; gap: 32px;
  padding-top: 36px; padding-bottom: 64px;   /* 只写纵向，横向 32px 由 .container 提供 */
}
.layout > *, .list-layout > *, .article-layout > *, .tool-detail > *, .tools-layout > * { min-width: 0; }  /* 网格子项 min-content 不撑破单列轨道 */

.cat-rail { position: -webkit-sticky; position: sticky; top: 88px; align-self: start; }
.cat-rail .rail-title {
  font-size: 12px; font-weight: 700; color: var(--ink-400);
  letter-spacing: 1px; padding: 0 12px 10px;
}
.cat-rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-500);
  border-left: 3px solid transparent; transition: all .15s;
}
.cat-rail a .r-ico { font-size: 16px; width: 20px; text-align: center; color: var(--ci, var(--brand)); }
.cat-rail a:hover { color: var(--ink-900); background: var(--tint); }
.cat-rail a.active {
  color: var(--brand); background: var(--brand-soft);
  border-left-color: var(--brand);
}

/* ---------- 分类区块（区头图标走「拉美彩虹」色板） ---------- */
.cat-section { margin-bottom: 34px; scroll-margin-top: 84px; }
.cat-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.cat-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--ink-900);          /* 与标题文字同色，和品牌橙的工具图标区分 */
  background: var(--tint);        /* 中性浅灰底 */
  border: 1px solid var(--line);
}
.cat-head h2 { font-size: 19px; font-weight: 800; color: var(--ink-900); line-height: 1.2; }
.cat-head .en {
  font-size: 11px; font-weight: 700; color: var(--ink-400);
  letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-top: 2px;
}
.cat-more {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-400);
  display: inline-flex; align-items: center; gap: 4px;
}
.cat-more:hover { color: var(--brand); }

/* 拉美彩虹：分类 → 图标色（--ci 挂在分类区块与左侧锚点上，子元素继承） */
#c1,      .cat-rail a[href="#c1"]      { --ci: #FF8A00; }  /* 拉美平台 · 橙 */
#c2,      .cat-rail a[href="#c2"]      { --ci: #FF6A00; }  /* 在线工具 · 深橙（本站） */
#c3,      .cat-rail a[href="#c3"]      { --ci: #2563EB; }  /* 常用工具 · 蓝 */
#c4,      .cat-rail a[href="#c4"]      { --ci: #7C3AED; }  /* 运营 ERP · 紫 */
#c5,      .cat-rail a[href="#c5"]      { --ci: #F59E0B; }  /* 开店链接 · 黄 */
#c6,      .cat-rail a[href="#c6"]      { --ci: #EF4444; }  /* 营销推广 · 红橙 */
#c7,      .cat-rail a[href="#c7"]      { --ci: #0891B2; }  /* 物流仓储 · 青蓝 */
#c8,      .cat-rail a[href="#c8"]      { --ci: #16A34A; }  /* 收款支付 · 绿 */
#c9,      .cat-rail a[href="#c9"]      { --ci: #DB2777; }  /* 社交网站 · 紫粉 */
#c10,     .cat-rail a[href="#c10"]     { --ci: #0D9488; }  /* 货源网站 · 青绿 */
#c11,     .cat-rail a[href="#c11"]     { --ci: #DC2626; }  /* 市场分析 · 深红 */
#c-news,  .cat-rail a[href="#c-news"]  { --ci: #FF8A00; }  /* 拉美资讯 · 品牌橙 */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-500);
  background: #fff; border: 1px solid var(--line); transition: all .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  color: #fff; border-color: transparent;
}

/* ---------- 二级分类筛选（板块内 tab） ---------- */
.sub-tabs {
  display: flex; gap: 8px; margin: 12px 0 14px;
  overflow-x: auto; scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs .chip { font-size: 12.5px; padding: 3px 12px; flex-shrink: 0; }

/* ---------- 紧凑资源卡片（高密度导航风） ---------- */
.site-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px;
}
.site-card {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm); transition: all .16s ease;
}
.site-card:hover {
  border-color: var(--brand-line); background: #FFFBF0;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.site-card .avatar { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; flex-shrink: 0; }
.site-card .avatar i { font-size: 17px; }
.sc-body { flex: 1; min-width: 0; }
.sc-name {
  display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-900);
  white-space: nowrap; overflow: hidden;
}
.sc-name .n { overflow: hidden; text-overflow: ellipsis; }
.sc-name .tag.spon, .sc-name .badge-own { flex-shrink: 0; font-size: 10px; padding: 0 6px; }
.sc-desc {
  display: block;
  font-size: 11.5px; color: var(--ink-400); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  color: var(--a-t, var(--brand-deep));
}
/* 渐变款：无底色块，文字/图标统一可读深橙（渐变文字对图标字体兼容性差，弃用） */
.avatar.grad { color: var(--brand-deep); }
/* 头像内图片: 填满容器裁切, 不撑破卡片(导航封面/平台 logo 通用) */
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* 页脚 网站地图/百度地图 链接(介绍文字下方) */
.footer-map-links { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.footer-map-links a { color: var(--ink-400); display: inline-flex; align-items: center; gap: 4px; }
.footer-map-links a:hover { color: var(--brand); }
.footer-map-links a i { font-size: 13px; }
.footer-map-links .sep { color: var(--line); }

/* 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; font-style: normal;
  padding: 1px 8px; border-radius: 999px;
  background: #F3F4F6; color: var(--ink-500);
}
.tag.c-mx   { background: rgba(0,122,51,.09);  color: var(--c-mx); }
.tag.c-br   { background: rgba(0,133,69,.09);  color: var(--c-br); }
.tag.c-latam{ background: var(--brand-soft);   color: var(--c-latam); }
.tag.spon   { background: rgba(255,106,0,.12); color: var(--brand-deep); }

/* 本站工具徽标 */
.badge-own {
  font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 6px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  color: #fff; flex-shrink: 0;
}

/* ============================================================
   资讯区块
   ============================================================ */
.news-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.news-card {
  padding: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 10px; transition: all .18s;
}
.news-card:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.news-meta { display: flex; align-items: center; gap: 8px; }
.news-cat {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.news-cat.policy { background: #FEF3C7; color: #B45309; }
.news-cat.market { background: #DBEAFE; color: #1D4ED8; }
.news-cat.industry { background: #DCFCE7; color: #15803D; }
.news-card h3 {
  font-size: 15.5px; font-weight: 700; color: var(--ink-900); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card:hover h3 { color: var(--brand); }
.news-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-400);
}
.news-foot .src::before { content: "来源："; }
.news-foot .dot { flex: 1; }

/* ============================================================
   页脚（深商务黑）
   ============================================================ */
.site-footer {
  background: #111827; color: #9CA3AF; margin-top: 8px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding: 52px 0 40px;
}
.footer-brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer-brand .logo-word { color: #fff; }
.footer-brand p { margin-top: 14px; font-size: 13px; line-height: 1.8; }
.footer-col h4 {
  font-size: 13px; font-weight: 700; color: #fff;
  margin-bottom: 14px; letter-spacing: 1px;
}
.footer-col a {
  display: block; font-size: 13.5px; padding: 4px 0; color: #9CA3AF; transition: color .15s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: #6B7280;
}

/* ============================================================
   栏目页 Hero（/tools/ /news/ 等）
   ============================================================ */
.page-hero {
  padding: 44px 0 32px;
  background:
    radial-gradient(500px 240px at 90% 0%, rgba(255, 176, 0, .14), transparent 65%),
    linear-gradient(180deg, #FFF8E8, #FFFFFF);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(26px, 0.8vw + 20px, 32px); font-weight: 900; color: var(--ink-900); }
.page-hero h1 em {
  font-style: italic;
  padding-right: 5px;  /* 斜体字形右伸出内容框，会被截边 */
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero .sub { margin-top: 8px; color: var(--ink-500); font-size: 15px; }

.tool-chips-bar {
  position: -webkit-sticky; position: sticky; top: 64px; z-index: 90;
  background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tool-chips {
  display: flex; gap: 8px; padding: 12px 32px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;   /* 小屏横向滑动惯性 */
}
.tool-chips::-webkit-scrollbar { display: none; }
.tool-chips .chip { flex-shrink: 0; white-space: nowrap; }  /* 横滑条里的 chip 不被压缩换行 */

.tools-layout { padding-top: 32px; padding-bottom: 64px; }   /* 横向 padding 由 .container 提供 */
.tool-group { margin-bottom: 32px; scroll-margin-top: 130px; }
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px;
}
.tool-card {
  display: flex; gap: 10px; align-items: center;
  padding: 11px 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); transition: all .18s; position: relative;
}
.tool-card:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tool-card > span:not(.tool-ico) { flex: 1; min-width: 0; }
.tool-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  color: var(--brand);            /* 无背景无边框，纯品牌橙线性图标 */
}
.tool-card h3 { font-size: 14px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
.tool-card p { font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「即将上线」规划角标(t-flag.soon), 描述性标签已按需求移除 */
.t-flag {
  font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 999px;
  background: #F3F4F6; color: #4B5563;
}

/* ============================================================
   详情页
   ============================================================ */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  padding: 20px 0 0; font-size: 13px; color: var(--ink-400);
}
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--ink-400); }

.tool-detail { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding-top: 24px; padding-bottom: 64px; }
/* aside 永远锚定右列: panel/FAQ 直接平铺为子元素时(如 profit-calculator/meli-profit),
   auto-flow 会把 FAQ 放进右列、aside 挤到左下, 显式定位后 FAQ 自动落到 (2,1) */
.tool-detail > aside { grid-column: 2; grid-row: 1; }

.tool-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.tool-panel-head {
  padding: 22px 26px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #FFF8E8, #fff);
}
.tool-panel-head h1 { font-size: 21px; font-weight: 800; color: var(--ink-900); }
.tool-panel-head .sub { font-size: 13px; color: var(--ink-500); margin-top: 2px; }

.calc-body { padding: 24px 26px; }
.field-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px;
}
.field label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px;
}
.field label .unit { font-weight: 500; color: var(--ink-400); font-size: 12px; }
.field input, .field select {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 10px; outline: none;
  font-size: 14.5px; color: var(--ink-900); background: #fff;
  transition: border-color .15s; font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { border-color: var(--brand); }
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { opacity: .35; }

.currency-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px;
}

/* 结果面板（深商务黑底） */
.result-panel {
  margin-top: 24px; padding: 22px 24px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #1F2937, #111827);
  color: #fff;
}
.result-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result-cell .k { font-size: 12px; color: #9CA3AF; display: flex; align-items: center; gap: 6px; }
.result-cell .v {
  font-size: 28px; font-weight: 900; font-style: italic; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.result-cell .v.grad {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result-cell .v small { font-size: 13px; font-weight: 600; color: #9CA3AF; margin-left: 4px; font-style: normal; }
.result-cell .v.neg { color: #F87171; }

/* 成本构成堆叠条 */
.cost-bar-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.cost-bar-wrap .cb-title { font-size: 12.5px; color: #9CA3AF; margin-bottom: 10px; display: flex; justify-content: space-between; }
.cost-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.cost-bar i { transition: width .3s ease; }
.cost-legend {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-top: 14px;
}
.cost-legend .lg {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #D1D5DB;
}
.cost-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cost-legend .pct { margin-left: auto; color: #9CA3AF; font-variant-numeric: tabular-nums; }

/* 侧栏卡片 */
.side-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.side-card h3 {
  font-size: 15px; font-weight: 800; color: var(--ink-900); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.steps { list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 14px 32px; font-size: 13.5px; color: var(--ink-500); line-height: 1.6;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.formula {
  font-family: var(--mono); font-size: 12.5px; line-height: 2;
  background: var(--tint); border: 1px dashed var(--brand-line);
  border-radius: 10px; padding: 12px 14px; color: var(--ink-700);
}
.side-tools a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; transition: background .15s;
}
.side-tools a:hover { background: var(--brand-soft); }
.side-tools a.on { background: var(--brand-soft); }
.side-tools a.on b { color: var(--brand); }
.side-tools .ti {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand);
}
.side-tools b { font-size: 13.5px; font-weight: 600; color: var(--ink-700); display: block; }
.side-tools span { font-size: 11.5px; color: var(--ink-400); }

/* ============================================================
   响应式（多屏适配）
   断点：1600+ / 1280 / 1024 / 768 / 640 / 480
   ============================================================ */

/* 宽屏增强：1920 屏内容区 1600，网格更宽、留白更足 */
@media (min-width: 1600px) {
  .article-main, .form-panel { padding: 40px 56px; }
  .site-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
  .news-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .hero { padding: 44px 0 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; }
}

/* 1280~1599 笔记本 / 小桌面 */
@media (max-width: 1280px) {
  .layout { grid-template-columns: 132px 1fr; gap: 24px; }
}

/* ≤1024 平板横屏：侧栏转横向滚动条（触控目标 ≥34px + 横向 snap 贴合） */
@media (max-width: 1024px) {
  .layout { display: block; }   /* 单列改块级：cat-rail 在 grid 单列里只能在自己那一行内 sticky（等于永远吸不住），块级布局下才能正常贴顶 */
  .cat-section { scroll-margin-top: 120px; }   /* 避开 sticky 头部 + 横向分类条 */
  .cat-rail {
    position: sticky; top: 64px; z-index: 90;
    display: flex; gap: 6px; overflow-x: auto;
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 8px 0; margin-bottom: 12px; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .cat-rail::-webkit-scrollbar { display: none; }
  .cat-rail .rail-title { display: none; }
  .cat-rail a {
    border-left: none; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 34px;
    padding: 5px 14px; border-radius: 999px; margin: 0;
    background: #fff; border: 1px solid var(--line);
    scroll-snap-align: start;
  }
  .cat-rail a.active { border-color: transparent; }
  .sub-tabs, .tool-chips { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .sub-tabs .chip, .tool-chips .chip { scroll-snap-align: start; }
  /* 右缘渐隐：提示可横向滑动还有更多分类 */
  .tool-chips-bar::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(to left, rgba(255,255,255,.96), rgba(255,255,255,0));
    pointer-events: none;
  }
  .tool-detail { grid-template-columns: 1fr; }
  .tool-detail > aside { grid-column: auto; grid-row: auto; }   /* 单列下撤销锚定, 避免隐式第二列 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ≤768 平板竖屏：顶栏收紧 56px，抽屉接管导航（sticky / 锚点偏移随之联动） */
@media (max-width: 768px) {
  /* 顶栏：56px 紧凑高度，隐藏站内搜索图标（搜索入口移入抽屉） */
  .main-nav { display: none; }          /* 收进汉堡抽屉（按钮已静态写入各页） */
  .nav-toggle { display: inline-flex; flex-shrink: 0; }
  .header-inner { height: 56px; gap: 12px; }
  .header-actions { gap: 8px; margin-left: auto; }   /* 主导航隐藏后按钮组仍靠右 */
  .header-actions > .icon-btn:not(.nav-toggle) { display: none; }
  .header-actions .btn-ghost { display: none; }      /* 移动端隐藏「提交网站」（入口在抽屉内），确保汉堡按钮有空间 */
  .logo img { width: 30px; height: 30px; }

  /* sticky / 锚点偏移跟随 56px 顶栏 */
  .cat-rail { top: 56px; }
  .tool-chips-bar { top: 56px; }
  .cat-section { scroll-margin-top: 108px; }
  .tool-group { scroll-margin-top: 114px; }
  .plat-tab-target { scroll-margin-top: 116px; }

  /* 移动端隐藏一切滚动条（滚动功能保留）：抽屉、信息条、chips 条等不再冒出滚动条 */
  * { scrollbar-width: none; }
  ::-webkit-scrollbar { display: none; }

  /* 触控输入 ≥16px，避免 iOS Safari 聚焦自动放大页面 */
  .search-box input, .search-inline input, .field input, .field select,
  .form-field input, .form-field select, .form-field textarea, .sub-form input { font-size: 16px; }
  .search-inline { max-width: none; }   /* 筛选搜索占满整行，计数换到下一行 */
  .chip, .sub-tabs .chip, .tool-chips .chip { min-height: 34px; padding: 5px 13px; }  /* 触控目标加大 */

  .page-hero { padding: 28px 0 22px; }
  .hero { padding: 24px 0 16px; }
  .hero-grid { gap: 20px; }
  .hero-kicker { font-size: 11.5px; padding: 3px 10px; margin-bottom: 8px; }
  .search-box { padding: 5px 5px 5px 14px; }
  .search-box .btn-primary { height: 42px; padding: 0 18px; font-size: 14px; }
  .hero-scale { font-size: 11.5px; }
  .hero-info-bar { padding: 10px 12px; border-radius: 12px; gap: 12px; }
  .breadcrumb { font-size: 12px; padding-top: 16px; flex-wrap: wrap; }

  .tool-panel-head { padding: 16px 18px 14px; }
  .calc-body { padding: 18px; }
  .result-panel { padding: 18px; }
  .result-cell .v { font-size: 24px; }
  .cost-legend { grid-template-columns: 1fr 1fr; }
  .footer-grid { gap: 24px; }
}

/* ≤640 大屏手机：单列 / 双列收紧，面板与卡片留白减档 */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .tool-chips { padding: 10px 16px; }
  .back-top { right: 14px; bottom: 16px; width: 40px; height: 40px; border-radius: 11px; }
  .back-top i { font-size: 18px; }
  .header-inner { gap: 12px; }
  .article-body table { display: block; overflow-x: auto; font-size: 12.5px; }
  .article-body th, .article-body td { padding: 8px 10px; }
  .pagination { flex-wrap: wrap; gap: 6px; margin-top: 24px; }
  .page-btn { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13.5px; }
  .footer-grid { padding: 28px 0 20px; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
  .footer-brand { grid-column: 1 / -1; }                                /* 品牌行通栏 */
  .footer-brand p { display: none; }                                    /* 精简：小屏隐藏品牌简介长文 */
  .footer-grid > .footer-col:nth-child(3) { display: none; }            /* 精简：隐藏「热门分类」栏（首页锚点可达） */
  .footer-col h4 { margin-bottom: 8px; font-size: 12px; }
  .footer-col a { font-size: 13px; padding: 3px 0; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 4px; padding: 14px 0; font-size: 12px; }
  .side-card { padding: 16px; }
  .qr-box { width: 104px; height: 104px; }
  .qr-box i { font-size: 38px; }
  .plat-head-card { padding: 18px; }
  .plat-head-card .avatar { width: 58px; height: 58px; border-radius: 15px; font-size: 19px; }
  .plat-stat b { font-size: 18px; }
  .tool-panel-head { padding: 14px 16px 12px; gap: 10px; }
  .tool-panel-head .tool-ico { width: 38px; height: 38px; border-radius: 10px; }
  .tool-panel-head .tool-ico i { font-size: 20px; }
  .tool-panel-head h1 { font-size: 18px; }
  .calc-body { padding: 16px; }
  .field-grid, .currency-row { grid-template-columns: 1fr; }
  .result-top { grid-template-columns: 1fr; gap: 14px; }
  .result-cell .v { font-size: 22px; }
  .cost-legend { grid-template-columns: 1fr 1fr; }
  .site-card { padding: 9px 10px; }
  .site-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mini-tool { padding: 8px 10px; }
  .tool-grid, .news-grid { grid-template-columns: 1fr; }
}

/* ≤480 小屏手机：字号与留白再收一档 */
@media (max-width: 480px) {
  .header-actions .btn-ghost { display: none; }
  .logo img { width: 28px; height: 28px; border-radius: 8px; }
  .logo-word { font-size: 18px; }
  .logo-domain { display: none; }

  .hero { padding: 20px 0 14px; }
  .hero h1 { font-size: 23px; letter-spacing: -0.3px; }
  .hero-kicker { font-size: 11px; }
  .page-hero h1 { font-size: 24px; }
  .hot-tags { gap: 6px; }
  .hot-tags .label { display: none; }
  .hot-tags a { padding: 3px 10px; font-size: 12px; }
  .search-box .btn-primary { padding: 0 16px; }

  .hero-flash { padding: 7px 12px; gap: 8px; border-radius: 14px; }
  .hf-tag { font-size: 12px; }
  .hf-track { gap: 28px; }
  .hf-track a { font-size: 12.5px; }
  .hcc-clock { padding: 8px 10px; }
  .hcc-clock .city { font-size: 11px; }
  .hcc-clock .time { font-size: 16px; }
  .plat-card { padding: 12px 4px 10px; }
  .plat-tags .tag { font-size: 9.5px; }
  .btn { height: 36px; padding: 0 14px; }
  .side-tools a { padding: 6px 8px; }
}

/* ============================================================
   列表页通用（导航分类 / 开店指南 / 资讯）
   ============================================================ */
.list-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding-top: 32px; padding-bottom: 64px; }
.list-layout > aside { position: -webkit-sticky; position: sticky; top: 128px; align-self: start;
  max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; }  /* 侧栏随滚动固定; 128 避开资讯页吸顶分类条; 高侧栏内部可滚但滚动条隐藏, 滚到底自动接续滚页面 */
.list-layout > aside::-webkit-scrollbar { display: none; }
/* 侧栏热门标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud .tag { font-size: 12px; padding: 3px 11px; text-decoration: none; color: var(--ink-500); background: var(--bg-soft, #FAF8F3); border: 1px solid var(--line); transition: all .15s; }
.tag-cloud .tag:hover { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-soft); }

/* 文章列表卡 */
.article-grid { display: grid; gap: 14px; }
.article-card {
  display: flex; gap: 18px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: all .18s;
}
.article-card:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ac-cover {
  width: 160px; height: 106px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: linear-gradient(135deg, rgba(255,176,0,.14), rgba(255,106,0,.14));
  border: 1px solid var(--brand-line); color: var(--brand);
  overflow: hidden;                                                /* 图片不溢出封面框 */
}
.ac-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.article-card h2 {
  font-size: 16.5px; font-weight: 700; color: var(--ink-900); line-height: 1.5;
}
.article-card:hover h2 { color: var(--brand); }
.article-card h2 .news-cat, .article-card h2 .tag { margin-right: 8px; }  /* 分类/指南药丸行内置于标题前 */
.ac-excerpt {
  font-size: 13px; color: var(--ink-500); line-height: 1.65; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-foot {
  margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-400);
}
.ac-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
.ac-foot .src::before { content: "来源："; }
.ac-foot i[class^="ri-"] { font-size: 13px; margin-right: 3px; }

/* 分类页筛选条 */
.filter-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 14px; }
.search-inline {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 380px;
  height: 38px; padding: 0 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s;
}
.search-inline:focus-within { border-color: var(--brand); }
.search-inline i { color: var(--ink-400); font-size: 15px; flex-shrink: 0; }
.search-inline input {
  flex: 1; border: none; outline: none; font-size: 13.5px;
  background: transparent; color: var(--ink-900); min-width: 0;
}
.search-inline input::placeholder { color: var(--ink-400); }
.result-count { margin-left: auto; font-size: 13px; color: var(--ink-400); }
.result-count b { color: var(--brand-deep); font-variant-numeric: tabular-nums; }

/* 分页 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; }
.page-btn {
  min-width: 38px; height: 38px; padding: 0 13px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 14px; font-weight: 600; color: var(--ink-500); cursor: pointer;
  background: #fff; border: 1px solid var(--line); transition: all .15s;
}
.page-btn:hover { border-color: var(--brand); color: var(--brand); }
.page-btn.on { background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end)); color: #fff; border-color: transparent; }
.page-btn.disabled { opacity: .4; pointer-events: none; }
.page-btn.dots { border: none; color: var(--ink-300); pointer-events: none; padding: 0 4px; }   /* 省略号占位(page_window) */
.page-btn i { font-size: 16px; }

/* ============================================================
   文章详情页（指南 / 资讯）
   ============================================================ */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; padding-top: 24px; padding-bottom: 64px; }
/* 左列聚合: 正文卡 + 底部推荐区块(与正文对齐, 对齐开店介绍页主列) */
.article-col { display: grid; gap: 36px; align-content: start; min-width: 0; }
/* 右栏贴顶: 与 .cat-rail/.tool-aside 同款 top:88px */
.article-layout > aside { position: -webkit-sticky; position: sticky; top: 88px; align-self: start; }
.article-main {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px;
}
.article-head h1 {
  font-size: clamp(22px, 0.8vw + 18px, 30px); font-weight: 900;
  color: var(--ink-900); line-height: 1.4;
}
.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-400);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-400); }
.article-meta .src::before { content: "来源："; }
.article-meta i[class^="ri-"] { font-size: 14px; margin-right: 3px; }

/* 正文排版 */
.article-body { margin-top: 26px; font-size: 15px; line-height: 1.95; color: var(--ink-700); }
.article-body h2 {
  font-size: 20px; font-weight: 800; color: var(--ink-900); margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end)) 1;
}
.article-body h3 { font-size: 16.5px; font-weight: 700; color: var(--ink-900); margin: 26px 0 10px; }
.article-body p { margin: 12px 0; }
.article-body img {
  display: block; max-width: min(100%, 640px); height: auto;   /* 限宽防巨图, 不放大小图 */
  margin: 14px auto; border-radius: 10px; cursor: zoom-in;      /* 自动居中, 点击开灯箱 */
}
/* 编辑器显式对齐优先: float 内联样式 / alignleft/alignright 类保持浮动, 不强制居中 */
.article-body img[style*="float: left"], .article-body img[style*="float:left"],
.article-body img[style*="float: right"], .article-body img[style*="float:right"],
.article-body img.alignleft, .article-body img.alignright {
  display: inline-block; max-width: min(100%, 360px); margin: 6px 14px 8px 0;
}
.article-body img[style*="float: right"], .article-body img[style*="float:right"],
.article-body img.alignright { margin: 6px 0 8px 14px; }

/* 图片灯箱(文章详情/站点详情详情页共用; nav/detail 旧 #pvLb 同类名直接受益) */
.lb { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(15,18,25,.92); align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb-close { position: absolute; top: 16px; right: 24px; font-size: 36px; color: #fff; cursor: pointer; line-height: 1; z-index: 2; user-select: none; }
.lb img { max-width: 92vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.article-body ul, .article-body ol { padding-left: 22px; margin: 12px 0; }
.article-body li { margin: 6px 0; }
.article-body strong { color: var(--ink-900); }
.article-body a { color: var(--brand); border-bottom: 1px dashed var(--brand-line); }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.article-body th { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; text-align: left; white-space: nowrap; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--line); }
.article-body tbody tr:nth-child(even) td { background: var(--tint); }
.article-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--tint); padding: 2px 6px; border-radius: 6px; color: var(--brand-deep);
}

/* 提示框 */
.tip-box {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 18px 0;
  border-radius: 12px; font-size: 13.5px; line-height: 1.75;
}
.tip-box i { font-size: 18px; flex-shrink: 0; }
.tip-box b { font-weight: 800; }
.tip-box.info { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.tip-box.warn { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.tip-box.brand { background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--brand-line); }

/* 步骤卡（指南正文用） */
.step-list { counter-reset: st; margin: 16px 0; display: grid; gap: 10px; }
.step-item {
  counter-increment: st; position: relative; padding: 14px 16px 14px 54px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 12px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-500);
}
.step-item::before {
  content: counter(st);
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-style: italic; color: #fff;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
}
.step-item b { display: block; color: var(--ink-900); font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }

/* 目录 TOC */
.toc { position: sticky; top: 88px; }
.toc a {
  display: block; padding: 7px 10px 7px 14px; border-left: 2px solid var(--line);
  font-size: 13px; color: var(--ink-500); line-height: 1.5; transition: all .15s;
}
.toc a:hover, .toc a.active { color: var(--brand); border-left-color: var(--brand); }

/* 文章标签 */
.article-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
}
.article-tags .label { font-size: 12.5px; color: var(--ink-400); }
/* 相关标签可点击(跳标签聚合页) */
.article-tags a.tag { text-decoration: none; transition: all .15s; }
.article-tags a.tag:hover { background: var(--brand-soft); color: var(--brand); }

/* 上一篇 / 下一篇 */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.post-nav a {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint);
  font-size: 12.5px; color: var(--ink-400); transition: all .15s;
}
.post-nav a:hover { border-color: var(--brand-line); }
.post-nav a:hover b { color: var(--brand); }
.post-nav b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-900); margin-top: 3px; line-height: 1.5; }
.post-nav .next { text-align: right; }

/* 热门榜单（侧栏） */
.hot-rank { list-style: none; counter-reset: rk; }
.hot-rank li { counter-increment: rk; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hot-rank li:last-child { border-bottom: none; padding-bottom: 0; }
.hot-rank a { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-700); line-height: 1.55; }
.hot-rank a:hover { color: var(--brand); }
.hot-rank a::before {
  content: counter(rk);
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-style: italic;
  color: var(--ink-400); background: #F3F4F6;
}
.hot-rank li:nth-child(-n+3) a::before {
  color: #fff; background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
}

/* 订阅卡（深商务黑底） */
.subscribe-card { background: linear-gradient(135deg, #1F2937, #111827); color: #D1D5DB; }
.subscribe-card h3 { color: #fff; }
.subscribe-card p { font-size: 12.5px; line-height: 1.7; color: #9CA3AF; margin-bottom: 14px; }
.sub-form { display: flex; gap: 8px; }
.sub-form input {
  flex: 1; height: 38px; padding: 0 12px; border-radius: 10px; min-width: 0;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #fff; font-size: 13px; outline: none;
}
.sub-form input::placeholder { color: #6B7280; }
.sub-form .btn { height: 38px; padding: 0 16px; }

/* ============================================================
   表单页（提交网站）
   ============================================================ */
.form-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px;
}
.form-panel h1 { font-size: clamp(22px, 0.6vw + 18px, 28px); font-weight: 900; color: var(--ink-900); }
.form-sub { margin-top: 8px; font-size: 14px; color: var(--ink-500); line-height: 1.7; }
.form-field { margin-top: 24px; }
.form-field > label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-700); margin-bottom: 8px; }
.form-field .req { color: var(--grad-end); margin-left: 2px; }
.form-field input[type="text"], .form-field input[type="email"],
.form-field input[type="url"], .form-field select, .form-field textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 10px; outline: none;
  font-size: 14px; color: var(--ink-900); background: #fff; transition: border-color .15s;
}
.form-field textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--brand); }
.form-field .hint { font-size: 12px; color: var(--ink-400); margin-top: 6px; line-height: 1.6; }
.form-field .hint i { font-size: 13px; margin-right: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-cards label {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-700); background: #fff; transition: all .15s;
}
.radio-cards label:hover { border-color: var(--brand-line); }
.radio-cards label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio-cards input { accent-color: var(--brand); margin-top: 3px; flex-shrink: 0; }
.radio-cards b { display: block; font-size: 14px; color: var(--ink-900); margin-bottom: 2px; }
.radio-cards span { font-size: 12px; color: var(--ink-400); line-height: 1.5; }

/* 收录规则列表 */
.rule-list { list-style: none; display: grid; gap: 12px; }
.rule-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.rule-list li i { color: var(--brand); font-size: 16px; flex-shrink: 0; }

/* ============================================================
   体积重计算器
   ============================================================ */
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mode-cards label {
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; text-align: center; background: #fff; transition: all .15s;
}
.mode-cards label:hover { border-color: var(--brand-line); }
.mode-cards label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.mode-cards input { display: none; }
.mode-cards b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.mode-cards span { display: block; font-size: 12px; color: var(--ink-400); margin-top: 2px; }

/* ============================================================
   新增组件响应式
   ============================================================ */
@media (max-width: 1024px) {
  .list-layout, .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .article-layout > aside, .list-layout > aside { position: static; }
}
@media (max-width: 768px) {
  .article-main, .form-panel { padding: 26px 20px; }
  .form-row, .radio-cards { grid-template-columns: 1fr; }
  .ac-cover { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
  .mode-cards { grid-template-columns: 1fr; }
  .filter-bar .result-count { margin-left: 0; width: 100%; }
}

/* ============================================================
   竖版平台卡（上图标下名称，突出平台图标，无描述）
   ============================================================ */
.plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.plat-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 6px 12px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm); transition: all .16s ease;
}
.plat-card:hover {
  border-color: var(--brand-line); background: #FFFBF0;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.plat-card .avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; }
.plat-card .avatar i { font-size: 22px; }
.plat-name {
  margin-top: 9px; font-size: 13px; font-weight: 700; color: var(--ink-900); line-height: 1.3;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plat-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.plat-tags .tag { font-size: 10px; padding: 0 6px; font-weight: 600; letter-spacing: .5px; }
.plat-card .tag.spon { position: absolute; top: 7px; right: 7px; }

/* ============================================================
   极简工具卡（前图标后标题，无描述）
   ============================================================ */
.mini-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.mini-tool {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-sm); transition: all .16s ease;
}
.mini-tool:hover {
  border-color: var(--brand-line); background: #FFFBF0;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.mt-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: -.2px;
  color: var(--a-t, var(--brand-deep));
}
.mt-ico i { font-size: 16px; font-weight: 400; }
.mt-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.mt-ico.grad { color: var(--brand-deep); }
.mini-tool b {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   平台专属页（/guide/{platform}/）
   ============================================================ */
.plat-head-card {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 26px 28px;
  background: linear-gradient(135deg, #FFF8E8, #FFF1E6);
  border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.plat-head-card .avatar { width: 72px; height: 72px; border-radius: 18px; font-size: 24px; flex-shrink: 0; }
.plat-head-info { flex: 1; min-width: 0; }
.plat-head-info h1 {
  font-size: clamp(22px, 0.8vw + 16px, 28px); font-weight: 900; color: var(--ink-900);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.plat-head-info h1 .en { font-size: 14px; font-weight: 600; color: var(--ink-400); font-style: italic; }
.plat-head-info .plat-tags { justify-content: flex-start; margin-top: 10px; }
.plat-head-info .plat-tags .tag { font-size: 11px; padding: 1px 8px; }
.plat-head-info p { margin-top: 10px; font-size: 13.5px; color: var(--ink-500); line-height: 1.7; }
.plat-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.plat-actions .btn { white-space: nowrap; }

/* 平台数据条 */
.plat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.plat-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm);
}
.plat-stat b {
  display: block; font-size: 21px; font-weight: 900; font-style: italic;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.plat-stat span { font-size: 12px; color: var(--ink-500); margin-top: 2px; display: block; }

/* ============================================================
   开店页大平台卡（全宽列表，承载介绍与入口按钮）
   ============================================================ */
.plat-big-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 14px; }
.plat-big {
  position: relative;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: all .18s ease;
}
.plat-big:hover {
  border-color: var(--brand-line); background: #FFFBF0;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.pb-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.plat-big .avatar { width: 56px; height: 56px; border-radius: 15px; font-size: 17px; flex-shrink: 0; }
.pb-body { flex: 1; min-width: 0; }
.pb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-head h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); line-height: 1.3; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pb-head h3 .en { font-size: 12.5px; font-weight: 600; font-style: italic; color: var(--ink-400); letter-spacing: 0; }
.pb-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.pb-tags .tag { font-size: 10.5px; padding: 0 7px; font-weight: 600; letter-spacing: .5px; }
.pb-desc {
  margin-top: 9px; font-size: 13px; color: var(--ink-500); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pb-meta span {
  font-size: 11.5px; color: var(--ink-400);
  background: #F3F4F6; border-radius: 7px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.pb-meta span b { color: var(--ink-700); font-weight: 600; }
.pb-actions {
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
  justify-content: center; position: relative; z-index: 2;
}
.btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }

/* ============================================================
   平台专属页（宽屏）：tab 锚点栏目标 / 二维码卡 / 要求材料双栏
   ============================================================ */
.plat-tab-target { scroll-margin-top: 132px; }   /* 锚点滚动避开 sticky 头部 + tab 栏 */

.qr-box {
  width: 128px; height: 128px; margin: 4px auto 12px;
  border: 1.5px dashed var(--brand-line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-400); background: #FFFBF0;
}
.qr-box i { font-size: 46px; }
.qr-card { text-align: center; }
.qr-card .btn { width: 100%; }
.qr-card p { font-size: 12px; color: var(--ink-400); line-height: 1.6; margin-top: 10px; }

/* 图标双栏清单 */
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; list-style: none; }
.req-grid li {
  display: flex; gap: 8px; align-items: center;
  font-size: 13.5px; color: var(--ink-500); line-height: 1.7;
}
.req-grid li i { color: var(--brand); font-size: 16px; flex-shrink: 0; }

/* ============================================================
   返回顶部（assets/app.js 全站注入，滚动 400px 后浮现）
   ============================================================ */
.back-top {
  position: fixed; right: 32px; bottom: 36px; z-index: 96;
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  border: 1px solid transparent; color: #fff;
  box-shadow: var(--shadow-brand);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .25s ease;
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { filter: brightness(1.06); transform: translateY(-2px); }
.back-top i { font-size: 20px; }

/* ============================================================
   移动端导航抽屉（≤768 显示汉堡按钮，app.js 挂载到 body 并绑定开合）
   结构：站内搜索 + 栏目导航 + 提交网站（渐变强调行）+ 半透明遮罩
   ============================================================ */
/* .nav-toggle 桌面隐藏规则已上移至「顶部导航」区——写在文件末尾会因级联顺序
   覆盖 ≤768 媒体查询里的 display:inline-flex，导致移动端汉堡按钮永远不显示 */
.mobile-nav {
  display: none;
  position: fixed; top: 56px; left: 0; right: 0; z-index: 99;   /* fixed 浮层：不依赖顶栏 sticky，任意滚动位置点开都从视口顶部弹出 */
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px -12px rgba(17, 24, 39, .22);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));   /* 兼容全面屏安全区 */
  max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav.open { display: block; animation: mn-in .18s ease; }
.mn-scrim {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98;   /* 遮罩压在内容上、顶栏之下，顶栏（含关闭按钮）保持可见可点 */
  background: rgba(17, 24, 39, .45);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
  touch-action: none;   /* iOS 触屏：遮罩上不穿透滚动 */
}
.mn-scrim.show { opacity: 1; visibility: visible; }
@keyframes mn-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.mn-search {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 5px 0 14px; margin-bottom: 4px;
  border: 1.5px solid var(--line); border-radius: 999px;
}
.mn-search:focus-within { border-color: var(--brand); }
.mn-search i { font-size: 17px; color: var(--ink-400); flex-shrink: 0; }
.mn-search input {
  flex: 1; min-width: 0; border: none; outline: none;
  background: transparent; font-size: 16px; color: var(--ink-900);   /* ≥16px 防 iOS 聚焦缩放 */
}
.mn-search input::placeholder { color: var(--ink-400); }
.mn-search .btn-primary { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; }
.mn-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--ink-400); padding: 10px 4px 6px;
}
.mobile-nav a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 10px;   /* 44px 触控行高 */
  font-size: 15px; font-weight: 600; color: var(--ink-700);
}
.mobile-nav a + a { margin-top: 2px; }
.mobile-nav a .mn-ico { font-size: 18px; color: var(--brand); width: 22px; text-align: center; }
.mobile-nav a .mn-arrow { margin-left: auto; font-size: 17px; color: var(--ink-400); }
.mobile-nav a:active { background: var(--tint); }
.mobile-nav a.active { color: var(--brand); background: var(--brand-soft); }
.mobile-nav a.active .mn-arrow { color: var(--brand); }
.mobile-nav a.mn-submit {
  margin-top: 4px; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-mid) 50%, var(--grad-end));
  box-shadow: var(--shadow-brand);
}
.mobile-nav a.mn-submit .mn-ico { color: #fff; }

/* ---------- 新增组件响应式 ---------- */
@media (min-width: 1600px) {
  .plat-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .mini-tool-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .plat-big-grid { grid-template-columns: repeat(auto-fill, minmax(640px, 1fr)); }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-clock-card { max-width: 480px; }
  .plat-big-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .plat-head-card { flex-direction: column; }
  .plat-actions { flex-direction: row; width: 100%; }
  .plat-actions .btn { flex: 1; }
  .plat-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-info-bar { gap: 12px; padding: 10px 14px; }
  .hf-track { animation-duration: 40s; }
}
@media (max-width: 640px) {
  .plat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .plat-card .avatar { width: 38px; height: 38px; }
  .plat-card .avatar i { font-size: 19px; }
  .mini-tool-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-clock-card { padding: 14px 16px; }
  .hcc-grid { gap: 8px; }
  .hcc-clock .time { font-size: 17px; }
  .plat-big { flex-direction: column; gap: 14px; padding: 18px; }
  .plat-big .avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 15px; }
  .pb-actions { flex-direction: row; width: 100%; }
  .pb-actions .btn { flex: 1; }
  .req-grid { grid-template-columns: 1fr; }
  .article-main { padding: 26px 20px; }
}

/* ---------- 触屏按压反馈（仅 hover:none 环境启用，桌面不受影响） ---------- */
@media (hover: none) {
  .site-card:active, .plat-card:active, .mini-tool:active, .tool-card:active,
  .news-card:active, .article-card:active, .plat-big:active, .page-btn:active {
    transform: scale(.97);
  }
  .btn:active, .chip:active { transform: scale(.97); }
}

/* ============================================================
   工具页标准组件（对标 lkj123 工具页）：工作台 / 检查项 / FAQ
   ============================================================ */
.tool-panel-head h2 { font-size: 21px; font-weight: 800; color: var(--ink-900); }

.field textarea {
  width: 100%; min-height: 92px; padding: 10px 12px; resize: vertical;
  border: 1.5px solid var(--line); border-radius: 10px; outline: none;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-900); background: #fff;
  font-family: inherit; transition: border-color .15s;
}
.field textarea:focus { border-color: var(--brand); }

/* 检查项列表（深底结果面板内：绿通过 / 黄提醒 / 红问题） */
.ck-list { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.ck-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  font-size: 13px; color: #D1D5DB; line-height: 1.65;
}
.ck-row i { font-size: 17px; flex-shrink: 0; }
.ck-row b { color: #fff; }
.ck-row .dim { color: #9CA3AF; }
.ck-pass i { color: #7ED9A5; }
.ck-warn i { color: #FBB040; }
.ck-fail i { color: #F87171; }

/* 说明区块（工具页正文，双卡一行） */
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.content-grid .side-card p { font-size: 13px; color: var(--ink-500); line-height: 1.75; }

/* FAQ 折叠面板（原生 details/summary，无需 JS） */
.faq-list { display: grid; gap: 10px; margin-top: 14px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q { color: var(--brand); font-size: 17px; }
.faq-item summary .arr { margin-left: auto; color: var(--ink-400); font-size: 16px; transition: transform .18s ease; }
.faq-item[open] summary { border-bottom: 1px dashed var(--line); }
.faq-item[open] summary .arr { transform: rotate(90deg); }
.faq-item .faq-body { padding: 12px 18px 14px; font-size: 13.5px; color: var(--ink-500); line-height: 1.8; }

@media (max-width: 640px) {
  .content-grid { grid-template-columns: 1fr; }
  .faq-item summary { padding: 12px 14px; }
  .faq-item .faq-body { padding: 10px 14px 12px; }
}

/* 检查工作台分栏：左表单 / 右实时结果（≤1024 上下堆叠），检查类工具通用 */
.check-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.check-form { display: grid; gap: 16px; align-content: start; }

/* 下拉选择（与输入框同规格，自绘箭头） */
.field select {
  width: 100%; height: 42px; padding: 0 34px 0 12px;
  border: 1.5px solid var(--line); border-radius: 10px; outline: none;
  font-size: 14.5px; color: var(--ink-900); background-color: #fff;
  font-family: inherit; cursor: pointer; transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select:focus { border-color: var(--brand); }

@media (max-width: 1024px) {
  .check-split { grid-template-columns: 1fr; }
}

/* 工具详情左列与固定侧栏：说明 / FAQ 与工作台同列对齐，侧栏贴顶（≤1024 还原流式） */
.tool-col { display: grid; gap: 36px; align-content: start; }
.tool-aside {
  position: -webkit-sticky; position: sticky; top: 88px; align-self: start;   /* 与 .cat-rail / .toc 同偏移；侧栏内容保持精简在一屏内，不设 overflow，避免出现内部滚动条 */
}
@media (max-width: 1024px) {
  .tool-aside { position: static; }
}

/* ============================================================
   首页 Hero 中区出海视觉（hero.webp：地球 / 货运轮船与飞机 / 平台图标）
   三栏布局：左信息 / 中视觉 / 右时区工作台；图片缓浮动效呼应「出海」意象
   ============================================================ */
.hero-3col { grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 440px) 400px; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.hero-visual::before {   /* 品牌光晕，呼应地球弧线；尺寸跟随图片高度而非列宽 */
  content: ""; position: absolute; height: 92%; aspect-ratio: 1; width: auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,0,.16) 0%, rgba(255,138,0,.06) 45%, transparent 70%);
}
.hero-visual img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; display: block;
  max-height: clamp(180px, 21vw, 270px);   /* 按高度封顶：插画不把 Hero 上下顶出一大块，与右侧时钟卡体量相当 */
  animation: hv-float 6s ease-in-out infinite;   /* 货轮式缓浮 + 微倾 */
  filter: drop-shadow(0 14px 24px rgba(255,138,0,.22));
}
@keyframes hv-float {
  0%, 100% { transform: translateY(0) rotate(.4deg); }
  50%      { transform: translateY(-12px) rotate(-.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual img { animation: none; }   /* 尊重系统「减弱动态效果」设置 */
}
@media (max-width: 1280px) {
  .hero-3col { grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 320px) 340px; }
}
@media (max-width: 1024px) {
  .hero-visual { display: none; }   /* 平板以下回到单列节奏，视觉不占导航效率 */
  .hero-3col { grid-template-columns: 1fr; }
}

/* ============================================================
   公用提示组件 LM（toast 轻提示 / modal 对话框 / 快捷搜索弹窗）
   DOM 由 app.js 注入：LM.toast() / LM.alert() / LM.confirm() / 顶栏 [data-lm-search]
   ============================================================ */
html.lm-locked { overflow: hidden; }   /* 弹窗打开锁背景滚动：挂 html 与 nav-locked 同理，保滚动位置 */

/* ---------- toast：顶部居中轻提示，自动消失 ---------- */
.lm-toast-wrap { position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 10040; display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; }
.lm-toast { display: flex; align-items: center; gap: 9px; max-width: min(480px, calc(100vw - 40px));
  padding: 11px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(31,41,55,.14); font-size: 13.5px; font-weight: 500; line-height: 1.5;
  color: var(--ink-700); animation: lm-in .22s ease; pointer-events: auto; }
.lm-toast i { font-size: 17px; flex-shrink: 0; }
.lm-toast.success { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.lm-toast.success i { color: #059669; }
.lm-toast.error { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.lm-toast.error i { color: #DC2626; }
.lm-toast.warn { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.lm-toast.warn i { color: #D97706; }
.lm-toast.info { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); }
.lm-toast.info i { color: var(--brand); }
.lm-toast.out { animation: lm-out .22s ease forwards; }
@keyframes lm-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes lm-out { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- modal：居中对话框（alert / confirm / 快捷搜索共用骨架） ---------- */
.lm-mask { position: fixed; inset: 0; z-index: 10041; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(31,41,55,.46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: lm-fade .18s ease; }
.lm-mask.out { animation: lm-fade-r .18s ease forwards; }
@keyframes lm-fade { from { opacity: 0; } }
@keyframes lm-fade-r { to { opacity: 0; } }
.lm-modal { width: min(400px, 100%); background: #fff; border-radius: 16px;
  padding: 30px 28px 26px; text-align: center; box-shadow: 0 24px 60px rgba(31,41,55,.22);
  animation: lm-pop .2s cubic-bezier(.34,1.4,.64,1); }
@keyframes lm-pop { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.lm-modal .lm-ico { width: 48px; height: 48px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
.lm-modal .lm-ico.success { background: #ECFDF5; color: #059669; }
.lm-modal .lm-ico.error { background: #FEF2F2; color: #DC2626; }
.lm-modal .lm-ico.warn { background: #FFFBEB; color: #D97706; }
.lm-modal .lm-ico.info { background: var(--brand-soft); color: var(--brand); }
.lm-modal h3 { font-size: 16.5px; font-weight: 800; color: var(--ink-900); margin: 0 0 8px; }
.lm-modal .lm-msg { font-size: 13.5px; color: var(--ink-500); line-height: 1.75; margin: 0 0 20px;
  white-space: pre-line; }
.lm-modal .lm-btns { display: flex; justify-content: center; gap: 12px; }
.lm-modal .lm-btns .btn { min-width: 108px; height: 40px; }

/* ---------- 快捷搜索弹窗（顶栏放大镜 [data-lm-search] 唤起） ---------- */
.lm-modal.lm-search { width: min(560px, 100%); text-align: left; padding: 26px; }
.lm-search h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.lm-search h3 i { color: var(--brand); font-size: 18px; }
.lm-search .search-box { width: 100%; max-width: none; margin: 18px 0 4px; }
.lm-search .lm-tip { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--ink-400); }
/* 工具目录: 规划中工具的「即将上线」角标(清单 status=0) */
.t-flag.soon { background: #F3F4F6; color: #6B7280; }

/* ---------- P0 批次3: 勾选清单 / 时区对照 / 结果行补充 ---------- */
.ck-bad i { color: #F87171; }

/* 勾选清单（checklist 类工具） */
.cl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cl-head .cl-count { font-size: 13px; color: var(--ink-500); }
.cl-head .cl-count b { color: var(--ink-800); font-size: 15px; }
.cl-bar { flex: 1; min-width: 160px; height: 8px; background: #F3F4F6; border-radius: 99px; overflow: hidden; }
.cl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6EE7B7, #10B981); border-radius: 99px; transition: width .3s; }
.cl-groups { display: grid; gap: 16px; }
.cl-group { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px 8px; }
.cl-group-title { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink-800); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cl-group-title .cl-gcount { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-400); }
.cl-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed #F3F4F6; }
.cl-item:last-child { border-bottom: 0; }
.cl-item input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: #10B981; cursor: pointer; flex-shrink: 0; }
.cl-item .cl-txt { font-size: 13.5px; color: var(--ink-700); cursor: pointer; line-height: 1.6; }
.cl-item .cl-txt span { display: block; font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.cl-item.done .cl-txt { color: var(--ink-300); text-decoration: line-through; }
.cl-item.done .cl-txt span { text-decoration: line-through; }

/* 时区对照表（timezone 工具） */
.tz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tz-table th { text-align: left; font-size: 12px; color: var(--ink-400); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tz-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; }
.tz-table tr:last-child td { border-bottom: 0; }
.tz-table .tz-time { font-size: 16px; font-weight: 700; color: var(--ink-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tz-table .tz-diff { white-space: nowrap; }
.tz-table .up { color: #10B981; }
.tz-table .down { color: #EF4444; }
.tz-table .tz-biz { font-size: 12.5px; color: var(--ink-400); }

/* ---------- 图片加载渐显 + 占位（配合 app.js 的 html.imgfade，无 JS 不隐藏） ---------- */
html.imgfade img:not(.img-ok) { opacity: 0; }
html.imgfade img.img-ok { opacity: 1; transition: opacity .45s ease; }
html.imgfade img.img-err { opacity: 1; filter: grayscale(1); }
/* 头像/封面加载期间给一块软底色，避免白色空洞（:has 不支持时无副作用） */
.avatar:has(img) { background: var(--bg-soft); }
.mt-ico:has(img) { background: var(--bg-soft); }