/* ============================================================
   料参谋 · 全站样式（2026-11-05 晚，第三次整站重做）

   文件名还叫 serif.css，是因为 build.py 的 build_css() 认这个名字
   （variant: serif 直接读它）。里面已经不是衬线那一套了。

   为什么推翻下午那版「一个人的体育刊物」：
   站名改成「料参谋 · 高端足球分析与情报平台」之后，米色纸 + 宋体 + 细线
   读起来像个人博客，跟「平台」两个字对不上；他看了说「全部页面都太丑了」。

   这一版的设计语言一句话：**赛前情报台**——深色报头 + 浅色正文，
   像一个分析平台，不像博客，也不像博彩站。

   必须守住的几条（改样式前先看）：
   1. 强调色是蓝（--accent），只做记号：栏目标签、链接、序号、当前项。
      **不用红色做按钮**——红按钮在体育语境里会被读成博彩站；也不用
      金色、荧光绿（那是另外两种博彩站的颜色）。
   2. 深色只用在三处：报头/页脚、首屏和内页页头、首页收口与文末收口卡。
      正文永远是浅底深字，长文不在深色上读。
   3. 字体只用系统栈。CSP 是 default-src 'self'，外链字体会被拦。
   4. 正文阅读宽度 720px、行高 1.95。
   5. 首页不放「复制微信号」按钮（只留二维码和微信号）；复制按钮只在
      文章页、关于页、联系页。右下角悬浮「联系」已删，别加回来。
   ============================================================ */

:root{
  --navy-950:#060b16;
  --navy-900:#0a1222;
  --navy-850:#0e182c;
  --navy-800:#121e36;
  --navy-700:#1b2a48;
  --on-dark:#eef2fa;
  --on-dark-2:#a9b4c8;
  --on-dark-3:#76839b;
  --line-dark:rgba(255,255,255,.09);

  --bg:#f4f6f9;
  --surface:#fff;
  --surface-2:#f8f9fb;
  --ink:#0b1220;
  --text:#263142;
  /* 两档灰在所有浅色底上都 ≥4.5:1（WCAG AA）。日期、字数这类小字最容易被调得太淡，
     淡到看不清的字，对读者和抓取器都等于没写。别再往浅里调。 */
  --muted:#4f5a6b;
  --faint:#646e81;
  --line:#e3e7ee;
  --line-2:#edf0f4;

  --accent:#3b63f6;
  --accent-ink:#2547d6;
  --accent-soft:#eef2ff;
  --accent-on-dark:#8aa3ff;
  --teal:#0f766e;
  --teal-soft:#e6f6f3;
  --amber:#a8540b;
  --amber-soft:#fff8ec;
  --amber-line:#f2dfb8;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;

  --w:1200px;
  --read:720px;
  --pad:32px;
  --head-h:64px;
  --r:16px;
  --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 14px 32px -14px rgba(16,24,40,.16);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04),0 36px 72px -28px rgba(16,24,40,.30);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 24px);
  /* 上下回弹时露出来的是报头/页脚的深色，不是一截纯白 */
  background:var(--navy-950);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* 页脚压到底：内容短的页（404、隐私）不悬在半空 */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.main{flex:1 0 auto}
.foot{flex-shrink:0}
/* 文章、关于、隐私是读字的页面：整页白底 */
body.page-read{background:var(--surface)}

img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(59,99,246,.2);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* ---------- 小件：眉标 / 胶囊 / 栏目标签 / 按钮 ---------- */

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--accent-ink);
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--accent-on-dark)}

.pill{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:6px 14px 6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);
  font-size:13px;letter-spacing:.04em;color:var(--on-dark-2);
}
.pill::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--accent-on-dark);box-shadow:0 0 0 4px rgba(138,163,255,.16);
}
.pill em{font-style:normal;color:var(--on-dark-3)}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;background:#eef1f6;color:#3d4757;
  font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.chip-analysis{background:var(--accent-soft);color:var(--accent-ink)}
.chip-dongtai{background:var(--teal-soft);color:var(--teal)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:12px;border:1px solid transparent;
  font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy-900);color:#fff}
.btn-primary:hover{background:var(--navy-700)}
.btn-light{background:#fff;color:var(--navy-900)}
.btn-light:hover{background:#e7ecff}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#c9d0db}

/* ---------- 报头（深色，全站一致）---------- */

/* 不做半透明：报头下面是浅色页面底，透一成过来，报头就成了灰蓝，
   跟首屏的深蓝接不上（第一版踩过）。 */
.masthead{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:1px solid var(--line-dark);
  color:var(--on-dark);
}
.masthead-in{
  max-width:var(--w);margin:0 auto;padding:0 var(--pad);
  height:var(--head-h);display:flex;align-items:center;gap:24px;
}

.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;line-height:1;min-width:0}
/* 标志：蓝底圆角方块 + 一块俯视的球场（边线、中线、中圈、开球点）。
   favicon 是同一个意思（build.py 的 make_ico：白环 + 中心点），颜色同一个蓝。 */
.brand-mark{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#6a8dff 0%,#3b63f6 52%,#2342cf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -8px rgba(59,99,246,.75);
}
.brand-mark svg{display:block;width:22px;height:22px}
.brand-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.brand-name{font-size:18px;font-weight:700;letter-spacing:.08em;color:#fff}
.brand sub{
  display:block;bottom:0;line-height:1;
  font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--on-dark-3);
}

/* 链接撑满报头高度，当前项那条线才落在报头底边上 */
.nav{margin-left:auto;display:flex;align-items:stretch;align-self:stretch}
.nav a{
  position:relative;display:inline-flex;align-items:center;
  padding:0 15px;font-size:14px;letter-spacing:.03em;color:var(--on-dark-2);
  transition:color .18s ease;
}
.nav a:hover{color:#fff}
.nav a.on{color:#fff}
.nav a.on::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;
  height:2px;border-radius:2px 2px 0 0;background:var(--accent-on-dark);
}
.nav a.nav-cta{
  align-self:center;margin-left:12px;padding:8px 18px;border-radius:999px;
  background:#fff;color:var(--navy-900);font-weight:600;
  transition:background .18s ease;
}
.nav a.nav-cta:hover{background:#e7ecff;color:var(--navy-900)}
.nav a.nav-cta::after{display:none}

/* ---------- 深色底的公共层：光晕 + 点阵 ---------- */

/* 首屏、内页页头、首页收口、联系页都用这一套底：
   一团蓝色光晕在右上，一点冷光在左下，上面压一层 24px 点阵（越往下越淡）。 */
.dark{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-900);color:var(--on-dark)}
.dark::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 84% 0%,rgba(76,111,255,.30),transparent 62%),
    radial-gradient(720px 460px at 4% 100%,rgba(56,189,248,.10),transparent 62%);
}
.dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,transparent);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,transparent);
}

/* ---------- 首屏 ---------- */

/* 左栏只放三样：栏目标签、大标题、一句介绍（他定的，别加按钮、别加数字格）。
   右栏是微信二维码卡。背景那块斜放的球场是装饰，aria-hidden。 */
.hero .wrap{position:relative}
/* 二维码卡 252 宽（码约 216）：桌面上照样扫得动，又不至于让首屏看着像一张二维码广告——
   百度判落地页时看首屏主体是字还是码。 */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 252px;
  gap:72px;align-items:center;padding:96px 0 104px;
}
/* h1 用实心白字，不做「渐变裁切文字」（color/text-fill 设成 transparent 再用背景透出来）：
   那种写法在抓取器眼里就是「透明文字」，首页最重要的一行不能冒被判隐藏文字的险。 */
.display{
  margin:26px 0 0;
  font-size:clamp(34px,4.7vw,66px);line-height:1.12;font-weight:700;letter-spacing:-.02em;
  color:#fff;text-shadow:0 2px 24px rgba(76,111,255,.25);
}
.display em{
  display:block;margin-top:14px;font-style:normal;font-weight:500;
  font-size:.42em;line-height:1.5;letter-spacing:.02em;color:var(--on-dark-2);text-shadow:none;
}
.display em:empty{display:none}
.hero-lead{
  margin:24px 0 0;max-width:33em;
  font-size:18px;line-height:1.9;color:var(--on-dark-2);
}

/* 背景里那块球场：俯视的整场线（边线、中圈、两个禁区、角球弧）+ 草皮修剪条纹，
   透视压扁后斜放在右半边，像夜场看台上往下看。只画线，不画球员和箭头——
   透视会把圆点压成一块块椭圆，看着像脏点（第一版踩过）。 */
.hero-pitch{
  position:absolute;z-index:-1;pointer-events:none;
  right:-10%;top:50%;width:min(1080px,84vw);height:auto;
  color:rgba(150,172,255,.42);
  transform:translateY(-44%) perspective(1100px) rotateX(58deg) rotateZ(-16deg);
  transform-origin:50% 50%;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);
}
.hero-pitch .hp-mow rect{fill:rgba(150,172,255,.05)}

/* 二维码卡：毛玻璃一层，码放在白底上（深色底上直接放码，有的手机扫不出） */
.qcard{
  position:relative;padding:18px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.qcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 14px}
.qcard-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--on-dark-2)}
.qcard-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-on-dark)}
.qcard-qr{padding:12px;border-radius:15px;background:#fff}
.qcard-qr img{display:block;width:100%;height:auto;border-radius:3px}
.qcard-n{margin:14px 2px 0;font-size:12.5px;line-height:1.75;color:var(--on-dark-2)}
.qslot{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:1px dashed #c9cfda;border-radius:10px;color:var(--faint);font-size:12px;
}

/* ---------- 段落骨架 ---------- */

.sec{padding:88px 0}
.sec-head{margin:0 0 32px}
.h2{
  margin:14px 0 0;font-size:clamp(26px,2.6vw,34px);line-height:1.32;
  font-weight:700;letter-spacing:-.015em;color:var(--ink);
}
.sec-lead{margin:16px 0 0;max-width:34em;font-size:16px;line-height:1.85;color:var(--muted)}

/* 「最新」一行头：左边一个词，右边去两个栏目的入口。
   不写「最近写的」「开球前发出的判断，都在这里」那种大标题——他删过。 */
.sec-top{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 0 26px}
.sec-title{margin:0;font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sec-links{display:flex;flex-wrap:wrap;gap:8px}
.sec-links a{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:13.5px;color:var(--muted);transition:color .18s,border-color .18s;
}
.sec-links a i{font-style:normal;color:var(--faint);transition:transform .18s,color .18s}
.sec-links a:hover{color:var(--ink);border-color:#c9d0db}
.sec-links a:hover i{color:var(--accent);transform:translateX(2px)}

/* ---------- 文章卡（首页「最新」）---------- */

/* 整卡可点，但链接只包标题（锚文本干净）：标题里的 <a> 用 ::after 盖满整张卡。
   卡里别再放第二个链接——会被这层盖住点不到。行（.row）和「接着看」（.rel-card）同一个做法。 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  padding:22px 22px 18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-3px);border-color:#d2d8e2;box-shadow:var(--shadow)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-top time,.card-foot{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.card-t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:16px 0 0;font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);transition:color .18s;
}
.card-t a::after,.row-t a::after,.rel-t::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-t a:focus-visible,.row-t a:focus-visible,.rel-t:focus-visible{outline:none}
.card-t a:focus-visible::after,.row-t a:focus-visible::after,.rel-t:focus-visible::after{
  outline:2px solid var(--accent);outline-offset:2px;
}
.card-t a::after{border-radius:var(--r)}
.card-d{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  margin:10px 0 18px;font-size:14px;line-height:1.78;color:var(--muted);
}
.card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);
}
.arr{font-style:normal;color:var(--faint);transition:transform .2s ease,color .2s ease}
.card:hover .card-t{color:var(--accent-ink)}
.card:hover .arr{color:var(--accent);transform:translateX(3px)}

/* 「样张」（首页那张格式示例判断卡）2026-11-06 他删了：sec-sample、sample、brief 开头、team 开头、
   crest、vs、risk 开头的样式（含 1080、720 断点里的）一起删了。别再加回来，理由写在 index_landing.html。 */

/* ---------- 首页收口（深色）---------- */

/* 首页只留二维码：**不放复制按钮**（他定的），也不写微信号（2026-11-06 他删了，.ct-id 样式一起删了）。 */
.sec-end{padding:96px 0}
/* 2026-11-06 15:43 他嫌「标题在最左、二维码在最右，隔得太开」→ 两列改成一拢：
   flex 居中，中间只留 56px。原来是 grid 1fr+236px，1200 的容器里中间空出 800px。
   码卡必须给死宽度：flex 里 img 的 width:100% 没有参照物，会被撑成巨幅。
   窄屏（639 行那段）跟着改成竖排居中。 */
.ct-grid{display:flex;justify-content:center;align-items:center;gap:56px}
.ct-qr-dark{flex:0 0 auto;width:236px}
.sec-end h2{
  margin:16px 0 0;font-size:clamp(28px,3.3vw,44px);line-height:1.25;
  font-weight:700;letter-spacing:-.02em;color:#fff;
}
.sec-end .lead{margin:18px 0 0;max-width:32em;font-size:17px;line-height:1.9;color:var(--on-dark-2)}
.ct-qr-dark{padding:14px;border-radius:20px;background:#fff;box-shadow:0 40px 80px -36px rgba(0,0,0,.75)}
.ct-qr-dark img{display:block;width:100%;height:auto}

/* ---------- 内页页头（深色带）---------- */

.page-hero .wrap{padding-top:52px;padding-bottom:60px}
.page-hero h1{
  margin:18px 0 0;font-size:clamp(32px,4.2vw,50px);line-height:1.18;
  font-weight:700;letter-spacing:-.02em;color:#fff;
}
.page-desc{margin:16px 0 0;max-width:40em;font-size:16.5px;line-height:1.9;color:var(--on-dark-2)}
/* 栏目页：下面的列表面板要压上来一截，页头底部多留一点 */
.page-hero.has-panel .wrap{padding-bottom:92px}
/* 关于 / 隐私：页头文字跟下面 720 的正文左边对齐 */
.wrap-read{max-width:calc(var(--read) + var(--pad) * 2)}

.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:13px;color:var(--faint)}
.crumb a{color:inherit;transition:color .15s}
.crumb a:hover{color:var(--accent-ink)}
.crumb i{font-style:normal;color:#c4cad4}
.dark .crumb{color:var(--on-dark-3)}
.dark .crumb a:hover{color:#fff}
.dark .crumb i{color:rgba(255,255,255,.22)}

/* ---------- 栏目页：一张白面板里的行 ---------- */

.list-body{position:relative;margin-top:-44px;padding-bottom:96px}
.rows{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.row{
  position:relative;
  display:grid;grid-template-columns:100px minmax(0,1fr) 112px 18px;gap:28px;align-items:center;
  padding:24px 28px;border-top:1px solid var(--line-2);transition:background .18s ease;
}
.row:first-child{border-top:0}
.row:hover{background:#fafbfd}
/* 日期：完整 YYYY-MM-DD 一行（SEO 口径，见 list.html 注释），等宽数字 */
.row-date{font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.row-main{min-width:0}
.row-t{margin:0;font-size:19px;line-height:1.5;font-weight:600;letter-spacing:-.005em;color:var(--ink);transition:color .18s}
.row-d{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:6px 0 0;font-size:14px;line-height:1.78;color:var(--muted);
}
.row-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0;
  font-size:12.5px;line-height:1.6;color:var(--faint);font-variant-numeric:tabular-nums;
}
.row .arr{justify-self:end}
.row:hover .row-t{color:var(--accent-ink)}
.row:hover .arr{color:var(--accent);transform:translateX(3px)}
.row-empty{margin:0;padding:48px 28px;text-align:center;font-size:15px;color:var(--muted)}

/* ---------- 文章页 / 关于页：中间一栏正文，右边目录 ---------- */

/* 三栏网格让正文永远在页面正中，目录挂在右边那一栏（宽屏才有）。
   目录由 base.html 底部的脚本按正文里的 h2 生成，少于两个 h2 就不出。 */
.read-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--read)) minmax(0,1fr);
  column-gap:56px;max-width:1400px;margin:0 auto;padding:0 var(--pad);
}
.read-main{grid-column:2;min-width:0;padding:40px 0 96px}
.read-aside{grid-column:3;min-width:0;padding-top:44px}

.toc{position:sticky;top:calc(var(--head-h) + 32px);max-width:236px}
.toc-h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--faint)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{
  display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;
  font-size:13.5px;line-height:1.55;color:var(--muted);transition:color .15s,border-color .15s;
}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}

.post-head{margin:22px 0 0;padding-bottom:28px;border-bottom:1px solid var(--line)}
.post-tags{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.post-date{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.post-h1{
  margin:18px 0 0;font-size:clamp(28px,3.3vw,40px);line-height:1.34;
  font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.post-meta i{width:3px;height:3px;border-radius:50%;background:#c3c9d3}

/* ---------- 正文排版（文章 / 关于 / 隐私共用）---------- */

.prose{font-size:17px;line-height:1.95;color:var(--text);overflow-wrap:break-word}
.post-body{padding-top:34px}
.post-body > p:first-child{font-size:18.5px;line-height:1.9;color:var(--ink)}
.prose p{margin:0 0 22px}
.prose h2{
  margin:54px 0 18px;font-size:24px;line-height:1.45;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
}
.prose h2::before{
  content:"";display:block;width:28px;height:3px;margin:0 0 16px;
  border-radius:3px;background:var(--accent);
}
.prose h2:first-child{margin-top:8px}
.prose h3{margin:36px 0 12px;font-size:19.5px;line-height:1.55;font-weight:700;color:var(--ink)}
.prose h4{margin:28px 0 10px;font-size:17px;line-height:1.6;font-weight:700;color:var(--ink)}
.prose strong{font-weight:650;color:var(--ink)}
.prose em{font-style:normal;padding:0 1px;background:linear-gradient(transparent 62%,rgba(59,99,246,.17) 62%)}
.prose a{
  color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:rgba(59,99,246,.35);
  transition:text-decoration-color .15s,color .15s;
}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{margin:0 0 24px;padding-left:1.4em}
.prose li{margin:0 0 10px;padding-left:.2em}
.prose ul li::marker{color:var(--accent)}
.prose ol li::marker{color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums}
.prose blockquote{
  margin:30px 0;padding:18px 22px;border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;background:#f3f6ff;
  font-size:16.5px;line-height:1.9;color:#2b3954;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:0;height:1px;background:var(--line);margin:44px 0}
.prose img{display:block;margin:28px auto;border-radius:14px}
.prose code{
  font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:6px;
  background:#f1f3f7;color:#24324a;
}
/* 表格：装进一个圆角框，窄屏横向滚。首列不折行（「停赛」在 390 上会被压成竖排两字），
   表头让它自己折——表头也锁的话，最后一列会被挤成一条缝。 */
.prose .tw{margin:28px 0 32px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.prose thead th{
  padding:12px 16px;text-align:left;vertical-align:bottom;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);
}
.prose td{padding:13px 16px;vertical-align:top;border-top:1px solid var(--line-2);color:var(--text)}
.prose tbody tr:first-child td{border-top:0}
.prose td:first-child{white-space:nowrap;font-weight:600;color:var(--ink)}

/* ---------- 文末收口卡（深色）---------- */

.cta{
  margin:56px 0 0;padding:30px 32px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;
}
.cta-txt{flex:1 1 300px;min-width:0}
.cta .cta-t{margin:0;font-size:20px;line-height:1.45;font-weight:700;letter-spacing:-.01em;color:#fff}
.cta p{margin:8px 0 0;max-width:32em;font-size:14.5px;line-height:1.85;color:var(--on-dark-2)}
.cta .btn{flex:0 0 auto}

/* ---------- 接着看 ---------- */

.rel{margin:64px 0 0}
.rel-h{margin:0 0 16px;font-size:18px;line-height:1.4;font-weight:700;color:var(--ink)}
.rel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.rel-card{
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.rel-card:hover{border-color:#cfd6e1;box-shadow:var(--shadow);transform:translateY(-2px)}
.rel-t{font-size:15.5px;line-height:1.6;font-weight:600;color:var(--ink);transition:color .18s}
.rel-t::after{border-radius:14px}
.rel-card:hover .rel-t{color:var(--accent-ink)}
.rel-m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------- 联系页 ---------- */

/* 2026-11-06 重做。骨架跟栏目页一样：深色页头（.page-hero.has-panel，面包屑 + 标题）
   ＋ 一张压上来一截的白卡（压多少跟 .list-body 一样）。原来那版居中大标题 + 卡片骑在深浅分界线上，
   靠下面四张说明卡压住；说明卡、标题下那句话删掉之后成了「深—一窄条浅—深」三道横条，所以改。
   卡里两种加法左右分开、中间一个「或」；720 以下竖排，「搜索微信号」排前面（手机扫不了自己屏幕上的码）。
   标题下那句话、四张说明卡、首屏居中的「联系」小胶囊都删了，别加回来，详见 templates/contact.html。 */
.wrap-ct{max-width:calc(880px + var(--pad) * 2)}
.ct-body{position:relative;margin-top:-44px;padding-bottom:96px}
.ct-card{
  display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  grid-template-rows:auto 1fr;grid-template-areas:"k-scan or k-id" "c-scan or c-id";
  row-gap:18px;padding:40px 36px 36px;border-radius:26px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
/* 没有二维码图时只剩一块：收窄居中，别留一张半空的宽卡 */
.ct-card.ct-card-solo{max-width:460px;margin:0 auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"k-id" "c-id"}
/* 反过来（2026-11-08）：关掉「搜索微信号」只剩扫码，卡片同样收窄居中，
   二维码从 200 放大到 240——并排时的尺寸单独站着偏小。 */
.ct-card.ct-card-qr-only{max-width:460px;margin:0 auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"k-scan" "c-scan"}
.ct-card-qr-only .ct-qr{width:240px}
.ct-k{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:0;
  font-size:15px;line-height:1.5;font-weight:600;color:var(--ink);
}
.ct-k::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ct-k-scan{grid-area:k-scan}
.ct-k-id{grid-area:k-id}
.ct-way{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.ct-scan{grid-area:c-scan}
/* 微信号这块比二维码矮，跟二维码上下居中；两个小标题在第一行对齐 */
.ct-id{grid-area:c-id;align-self:center}
.ct-qr{width:200px;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.ct-qr img{display:block;width:100%;height:auto}
.ct-wx{
  margin:0;font-family:var(--mono);font-size:30px;line-height:1.2;
  font-weight:600;letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere;
}
.ct-id .btn{width:100%;max-width:260px;margin-top:20px}
.ct-tip{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--faint)}
/* 「或」：电脑上是一根竖线中间一个圈，720 以下变成横线 */
.ct-or{grid-area:or;position:relative;display:flex;align-items:center;justify-content:center}
.ct-or::before{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:1px;background:var(--line)}
.ct-or span{
  position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;line-height:1;color:var(--faint);
}

/* ---------- 404 ---------- */

.nf{
  flex:1;max-width:640px;margin:0 auto;padding:110px var(--pad) 104px;text-align:center;
}
/* 写成 .nf p:not(.nf-code)：直接写 .nf p 会把 .nf-code 的字号盖成正文大小（踩过） */
.nf-code{
  margin:0;font-size:clamp(92px,15vw,156px);line-height:1;font-weight:800;letter-spacing:-.05em;
  background:linear-gradient(180deg,#1b2a48 10%,#7d8fb8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nf h1{margin:22px 0 10px;font-size:26px;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.nf p:not(.nf-code){margin:0;font-size:15px;color:var(--muted)}
.nf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

/* ---------- 页脚（深色）---------- */

.foot{background:var(--navy-950);color:var(--on-dark-2);border-top:1px solid var(--line-dark);padding:56px 0 30px}
.foot-in{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr);
  gap:48px;padding-bottom:36px;
}
.foot-note{margin:18px 0 0;max-width:30em;font-size:13px;line-height:1.85;color:var(--on-dark-3)}
.foot-h{margin:4px 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.1em;color:#fff}
.foot-l{list-style:none;margin:0;padding:0}
.foot-l li{margin:0 0 10px}
.foot-l a,.foot-l span{font-size:14px;color:var(--on-dark-2);transition:color .15s}
.foot-l a:hover{color:#fff}
.foot-base{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-top:22px;
  border-top:1px solid var(--line-dark);font-size:12.5px;color:var(--on-dark-3);
}
.foot-base a{transition:color .15s}
.foot-base a:hover{color:#fff}

/* ---------- 窄屏 ---------- */

/* 目录只在 1180 以上出：再窄，正文两边已经没有能放它的地方 */
@media (max-width:1180px){
  .read-wrap{grid-template-columns:minmax(0,1fr);max-width:calc(var(--read) + var(--pad) * 2)}
  .read-main{grid-column:1}
  .read-aside{display:none}
}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 264px;gap:48px;padding:80px 0 88px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 竖屏平板：首屏拆成一栏，二维码卡改横的（左码右字）铺满，
   不留一张竖卡贴在左边、右边空一大片。 */
@media (max-width:860px){
  :root{--pad:24px}
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:64px 0}
  .qcard{
    display:grid;grid-template-columns:128px minmax(0,1fr);
    grid-template-areas:"qr head" "qr note";
    column-gap:20px;row-gap:8px;align-items:center;max-width:560px;padding:16px;
  }
  .qcard-head{grid-area:head;flex-direction:column;align-items:flex-start;gap:8px;margin:0;align-self:end}
  .qcard-qr{grid-area:qr;padding:8px;border-radius:12px}
  .qcard-n{grid-area:note;margin:0;align-self:start}
  .hero-pitch{right:-34%;top:34%;width:130vw}

  .sec{padding:68px 0}
  .ct-grid{flex-direction:column;gap:32px;text-align:center}
  .sec-end .eyebrow{justify-content:center}
  .sec-end .lead{margin-left:auto;margin-right:auto}
  .ct-qr-dark{width:208px}

  .row{grid-template-columns:96px minmax(0,1fr) 18px;gap:20px;padding:20px 22px}
  .row-date{font-size:13.5px}
  .row-meta{display:none}

  .ct-card{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);padding:32px 20px 30px}
  .ct-qr{width:184px}
  .ct-wx{font-size:27px}

  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-grid > :first-child{grid-column:1 / -1}
}

@media (max-width:720px){
  :root{--pad:20px;--head-h:56px}
  .masthead-in{gap:12px}
  .brand{gap:9px}
  .brand-mark{width:28px;height:28px;border-radius:8px}
  .brand-mark svg{width:19px;height:19px}
  .brand-name{font-size:17px;letter-spacing:.06em}
  .brand sub{display:none}
  .nav a{padding:0 9px;font-size:13.5px}
  .nav a.on::after{left:9px;right:9px}
  .nav a.nav-home{display:none}
  .nav a.nav-cta{margin-left:6px;padding:7px 14px}

  /* 手机首屏要尽快露出下面的文章列表：首屏留白收紧，装饰球场不画（省一次合成） */
  .hero-pitch{display:none}
  .qcard{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.06)}
  .hero-grid{padding:40px 0 44px;gap:26px}
  .pill{font-size:12px;padding:5px 12px 5px 10px}
  /* 「高端足球分析与情报平台」11 个字，390 上 7.6vw ≈ 29.6px，一行 326px，放得下 */
  .display{margin-top:20px;font-size:clamp(24px,7.6vw,40px)}
  .hero-lead{margin-top:16px;font-size:15.5px;line-height:1.85}
  .qcard{grid-template-columns:104px minmax(0,1fr);column-gap:16px;padding:14px;border-radius:18px}
  .qcard-n{font-size:12px;line-height:1.7}

  .sec{padding:52px 0}
  .sec-top{margin-bottom:18px}
  .sec-title{font-size:22px}
  .sec-links a{height:32px;padding:0 12px;font-size:13px}
  .cards{grid-template-columns:1fr;gap:12px}
  .card{padding:18px 18px 14px}
  .card-t{margin-top:12px;font-size:17px}
  .card-d{margin-bottom:14px;font-size:13.5px;-webkit-line-clamp:2}

  .h2{font-size:24px}
  .sec-lead{font-size:15px}

  .sec-end{padding:60px 0}
  .sec-end h2{font-size:26px}
  .sec-end .lead{font-size:15.5px}
  .ct-qr-dark{width:184px;padding:12px;border-radius:16px}

  .page-hero .wrap{padding-top:34px;padding-bottom:40px}
  .page-hero.has-panel .wrap{padding-bottom:68px}
  .page-hero h1{font-size:30px}
  .page-desc{font-size:15px}
  .list-body{margin-top:-32px;padding-bottom:64px}
  .rows{border-radius:18px}
  .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px}
  .row-date{font-size:13px;color:var(--muted)}
  .row-t{font-size:17px}
  .row-d{font-size:13.5px}
  .row .arr{display:none}

  .read-main{padding:24px 0 64px}
  .post-head{margin-top:16px;padding-bottom:22px}
  .post-h1{font-size:26px;line-height:1.42}
  .post-body{padding-top:26px}
  .prose{font-size:16.5px;line-height:1.9}
  .post-body > p:first-child{font-size:17.5px}
  .prose h2{margin-top:42px;font-size:21px}
  .prose h2::before{margin-bottom:12px}
  .prose blockquote{padding:14px 16px;font-size:15.5px}
  .prose table{font-size:14px}
  .prose thead th,.prose td{padding:11px 12px}
  .cta{margin-top:44px;padding:24px 22px}
  .cta .btn{width:100%}
  .rel{margin-top:48px}
  .rel-list{grid-template-columns:1fr}

  /* 联系页手机上竖排：先「搜索微信号」（复制去微信搜），再「或」，再二维码 */
  .ct-body{margin-top:-32px;padding-bottom:64px}
  .ct-card{
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"k-id" "c-id" "or" "k-scan" "c-scan";
    row-gap:14px;padding:26px 20px 24px;border-radius:22px;
  }
  .ct-card.ct-card-solo{grid-template-areas:"k-id" "c-id"}
  .ct-card.ct-card-qr-only{grid-template-areas:"k-scan" "c-scan"}
  .ct-card-qr-only .ct-qr{width:228px}
  .ct-or{height:34px;margin:6px 0}
  .ct-or::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}
  .ct-wx{font-size:26px}
  .ct-id .btn{max-width:none}
  .ct-qr{width:188px}

  .nf{padding:72px var(--pad) 80px}

  .foot{padding:44px 0 26px}
  .foot-grid{gap:28px 24px;padding-bottom:28px}
  /* 手指点的区域至少 36px 高 */
  .foot-l li{margin:0}
  .foot-l a{display:inline-block;padding:7px 0}
  .foot-base a{display:inline-block;padding:6px 0}
}

/* 320–380 的小屏：导航四项要挤进一行 */
@media (max-width:380px){
  .masthead-in{gap:8px}
  .brand-name{font-size:16px;letter-spacing:.04em}
  .nav a{padding:0 7px;font-size:13px}
  .nav a.on::after{left:7px;right:7px}
  .nav a.nav-cta{margin-left:4px;padding:6px 12px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}