/* ------------------------------------------------------------------
 * 站点公共样式 —— 主页 / 隐私政策 / 关于 等站点级页面共用。
 *
 * 工具页（tools/<id>/）**不引本文件**：工具自身的布局很精细（如 json_view 的行号对齐），
 * 站点级 reset 会破坏它们。工具页只加一小段自包含的导航条与广告位样式。
 *
 * 宽度基准：--wide 是站点骨架宽度（导航 / 标题区 / 三栏），--main 是中间主内容列宽。
 * ------------------------------------------------------------------ */

:root{
  --bg:#f5f6f8; --card:#ffffff; --line:#e5e7eb; --text:#111827;
  --muted:#6b7280; --soft:#f9fafb; --accent:#2563eb;
  --nav-h:52px;
  --wide:1456px;   /* 站点骨架总宽 = 160 + 24 + 1040 + 24 + 160 + 48(内边距) */
  --main:1040px;   /* 主内容列宽，改这里三栏同步 */
}

*{box-sizing:border-box}
/* 弹性列 + 页脚 margin-top:auto = 经典 sticky footer：
   内容不足一屏时页脚贴在视口底部（而不是浮在内容后面、下面留一大片背景色）；
   内容超过一屏时 margin-top:auto 归零，页脚正常跟在内容之后。 */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit}
h1,h2,h3{line-height:1.35}

/* ------------------------------------------------------------ 顶部导航 */
.nav{
  position:sticky; top:0; z-index:20;
  background:#fff; border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wide); margin:0 auto; padding:0 24px;
  height:var(--nav-h); display:flex; align-items:center; gap:18px;
}
.nav-logo{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:15px; font-weight:700; text-decoration:none; letter-spacing:.2px;
}
.nav-logo i{
  width:24px; height:24px; border-radius:6px; background:var(--accent);
  color:#fff; font-size:11px; font-style:normal; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
/* 工具/分类链接：横向可滚动，工具变多时不换行、不撑破导航 */
.nav-links{display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  padding:6px 11px; border-radius:6px; font-size:13.5px;
  color:#374151; text-decoration:none; white-space:nowrap;
}
.nav-links a:hover{background:var(--soft); color:var(--accent)}
.nav-links a.active{color:var(--accent); font-weight:600; background:#eff6ff}

/* ------------------------------------------------------------ 标题区 */
/* 注意：body 是 flex 容器，直接子元素带 auto margin 会失去 stretch、宽度塌成内容宽，
   所以下面这些「居中 + 限宽」的块必须显式写 width:100%。 */
.hero{
  width:100%; max-width:var(--wide); margin:0 auto; padding:40px 24px 24px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
}
.brand{max-width:560px}
h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
.lead{margin:0; color:var(--muted); font-size:14px; line-height:1.75}
.lead b{color:var(--text); font-weight:600}

/* ------------------------------------------------------------ 三栏骨架 */
.layout{
  width:100%; max-width:var(--wide); margin:0 auto;
  display:grid; grid-template-columns:160px minmax(0,1fr) 160px;
  gap:24px; align-items:start;
  padding:0 24px 40px;
}
/* 主内容固定占中间列 —— 必须显式指定，否则两侧广告位为空时会被自动放到第 1 列（160px）。
   中间列用 1fr 而非 minmax(0,1040px)：后者列宽随内容收缩，工具少时会算错卡片列数。 */
.main{grid-column:2; min-width:0}

/* 两侧广告位还没接入（为空）时，主内容占满容器，与导航条 / 标题区 / 页脚左边缘对齐。
   否则主内容待在第 2 列、左边空着 160px 广告位 + 24px 间距，看起来就是"整体右移没对齐"。
   广告位一旦填上内容，本规则自动失配，立刻恢复 160 | 1040 | 160 三栏。
   注：只在「两侧都空」时塌为单列；只填一侧属于非常规用法，上线前需自行确认版式。 */
.layout:has(> .ad-side:empty){grid-template-columns:minmax(0,1fr)}
.layout:has(> .ad-side:empty) > .main{grid-column:1; max-width:none}

/* ------------------------------------------------------------ 工具入口卡片 */
/* 说明文字紧跟标题，不用 space-between —— 主内容较宽时会把说明甩到很右边 */
.section-head{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 14px;
}
.section-head h2{margin:0; font-size:16px; font-weight:650}
.section-head span{font-size:12.5px; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
/* 紧凑卡片：约 250×58，主内容 1040px 下 4 列。卡片是「入口」不是「介绍页」，
   不要往里堆长描述 / bullet / 按钮 —— 详细信息交给工具页。 */
.card{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; text-decoration:none; background:var(--card);
  border:1px solid var(--line); border-radius:10px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(17,24,39,.07); border-color:#cbd5e1}
.logo{
  width:32px; height:32px; flex:0 0 32px; border-radius:8px; color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.3px;
  display:flex; align-items:center; justify-content:center;
}
.card-text{min-width:0; flex:1}
.name{display:block; font-size:14px; font-weight:600; line-height:1.35}
.sub{
  display:block; margin-top:2px; font-size:12px; color:var(--muted); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ------------------------------------------------------------ 广告位 */
/* 广告位为空（.ad:empty）时不占位不渲染；是否注入广告由 assets/site.js 依据
   ads/slots.json 决定 —— 未接广告时页面保持干净。 */
.ad{position:relative; display:flex; justify-content:center; align-items:center}
.ad:empty{display:none}
.ad-frame{width:100%; height:100%; border:0; display:block}
/* 尺寸按 IAB 标准预留。必须用**固定 height** 而不是 min-height：
   iframe 内是 height:100%，父容器没有确定高度时百分比高度失效，
   iframe 会退化成默认 150px 高并垂直居中，位置和尺寸都不对。 */
.ad-top{width:728px; height:90px}                                  /* 顶部横幅 */
.ad-side{width:160px; height:600px}                                /* 侧栏竖幅 */
.ad-bottom{max-width:970px; width:100%; height:90px; margin:0 auto} /* 内容区横幅 */
.ad-inline{width:100%; height:90px; margin:18px 0}                  /* 工具页内容区横幅 */
/* 「广告」标识：《互联网广告管理办法》要求广告可识别 */
.ad-label{
  position:absolute; right:2px; top:2px; z-index:1; pointer-events:none;
  font-size:10px; line-height:14px; padding:0 4px; border-radius:4px;
  color:#9ca3af; background:rgba(255,255,255,.9); border:1px solid var(--line);
}

/* ------------------------------------------------------------ 页脚 */
/* margin-top:auto 让它吃掉剩余空间、吸在页面底部（见 body 的 sticky footer 说明） */
.footer{border-top:1px solid var(--line); background:#fff; margin-top:auto}
/* 页脚各列靠左排列（不用 space-between：列数少时会散到两端，中间空一大块） */
.footer-in{
  max-width:var(--wide); margin:0 auto; padding:28px 24px 32px;
  display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:flex-start;
}
.footer-col{font-size:12.5px; line-height:1.9; color:var(--muted); min-width:150px}
.footer-col h3{margin:0 0 8px; font-size:12.5px; font-weight:650; color:var(--text); letter-spacing:.2px}
.footer-col a{color:var(--muted); text-decoration:none; display:block}
.footer-col a:hover{color:var(--accent)}
.footer-bar{
  border-top:1px solid var(--line);
  max-width:var(--wide); margin:0 auto; padding:12px 24px 24px;
  font-size:12px; color:var(--muted); line-height:1.9;
}

/* ------------------------------------------------------------ 文档页（隐私政策等） */
.doc{
  width:100%; max-width:var(--main); margin:0 auto; padding:36px 24px 56px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.doc h1{font-size:24px; margin:0 0 6px}
.doc .meta{margin:0 0 22px; font-size:12.5px; color:var(--muted)}
.doc h2{font-size:15px; margin:26px 0 8px; padding-top:6px}
.doc p,.doc li{font-size:13.5px; line-height:1.95; color:#374151}
.doc ul{padding-left:20px; margin:8px 0}
.doc li{margin:4px 0}
.doc a{color:var(--accent)}
.doc .box{
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:14px 0; font-size:13px; color:var(--muted); line-height:1.9;
}
.todo{color:#b45309; background:#fffbeb; border:1px dashed #fcd34d; border-radius:6px; padding:1px 6px; font-size:12px}

/* ------------------------------------------------------------ 响应式 */
@media (max-width:1500px){
  .layout{grid-template-columns:minmax(0,1fr)}
  /* 这里不能用 margin:0 auto 居中！grid item 一旦带 auto margin，
     justify-self:stretch 就失效，宽度退化为内容宽 —— 卡片区会塌成一条窄栏
     （1400 视口实测 main 只有 294px）。用 width:100% + justify-self:center 代替。 */
  .main{grid-column:1; width:100%; max-width:var(--main); justify-self:center}
  .ad-side{display:none}
}
@media (max-width:1240px){
  .ad-top{display:none}
  .hero{display:block}
}
@media (max-width:640px){
  .hero{padding:26px 16px 18px}
  .layout{padding:0 16px 32px}
  .nav-in{padding:0 16px; gap:10px}
  h1{font-size:23px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}