/* ============================================================
   OPC 官网共享样式表 · site.css
   v2 · 2026-09-13 导航与视觉系统重构
   ------------------------------------------------------------
   品牌视觉识别（VI）对齐《AI一人公司创业》书稿 2026-09-11 定稿：
     墨石深蓝 Ink Stone   #1F3A5F  ← 主色（结构 / 主体 / 线条）
     花岗岩灰 Granite     #5B6472  ← 数据 / 层次 / 次级文字
     暖纸白   Warm Paper  #F5F1E8  ← 页面底色
     朱砂橙   Cinnabar    #D9603B  ← 强调色，每屏仅一处焦点
     苔绿     Data Moss   #3E7D6B  ← 数据可视化 / 进度 / 榜单
   用色纪律：暖纸白 ≥60% · 墨石深蓝 ≤25% · 朱砂橙 ≤5%
             不使用纯黑 #000000 与纯白 #FFFFFF
             不使用霓虹色、紫色渐变、发光描边

   v2 变更（导航与视觉系统重构）：
     1) 令牌层重写：把散落全站的 96 种 hex 收敛为受控令牌；
        中性色阶 3 档、线 3 档、墨 5 档、语义色 4 组。
     2) 清除与本暖纸体系冲突的冷色默认值（slate / blue / indigo /
        violet / purple / emerald / red / amber 等 Tailwind 色）。
     3) 导航重构：桌面 5 组下拉 + 主 CTA；移动端新增 app bar 与
        全屏抽屉（修复「≤900px 隐藏主菜单导致约 25 个页面不可达」）。
     4) 排版用 clamp() 响应式字号（修复移动端 <h1> 横向溢出）。
     5) 兼容保留：视图在自身 <style> 中定义的 240 个类不被覆盖。

   ⚠️ 修改纪律：本文件只放「跨视图共用」的样式。单个视图专属样式
      保留在该视图的 <style> 块中，勿上提到此处。
   ============================================================ */

/* ── 1. 设计令牌 ───────────────────────────────────────────── */
:root{
  /* 面（暖纸系） */
  --paper:#F5F1E8; --surface:#FFFDF8; --surface-2:#FAF6EE; --surface-3:#F2EDE2;
  /* 线（3 档：强 / 常规 / 柔） */
  --line-strong:#DCD5C6; --line:#E5DFD1; --line-soft:#EFEAE0;
  /* 墨（文字 5 档） */
  --ink:#1A2E4A; --ink-2:#33415C; --ink-3:#4E5766; --muted:#5B6472; --faint:#7A8290;
  /* 品牌 */
  --navy:#1F3A5F; --navy-deep:#152A44; --navy-soft:#E7ECF3; --navy-tint:#F1F4F9; --navy-line:#C6D1E2;
  --cinnabar:#D9603B; --cinnabar-deep:#B84A29; --cinnabar-soft:#FAE7E0; --cinnabar-line:#F0D3C8;
  --moss:#3E7D6B; --moss-deep:#2F6455; --moss-soft:#E4EFEB;
  /* 深底上的文字 */
  --on-dark:#E8EDF4; --on-dark-2:#B7C2D2; --on-dark-3:#8E9BB0;
  /* 语义（去 Tailwind 化，全部落在暖纸体系内） */
  --ok:#2F6455; --ok-soft:#E4EFEB;
  --warn:#8A6414; --warn-soft:#F6EFDC;
  --danger:#B8422A; --danger-soft:#FAE7E0;
  --info:#1F3A5F; --info-soft:#E7ECF3;
  /* 会员/等级专用暖金（VI 五色之外的**单用途**扩展：仅用于 VIP 等级标识） */
  --amber:#8F6C1E; --amber-soft:#F5EDD8;

  /* 旧变量名兼容（视图共引用 379 次，不得删除） */
  --bg:var(--paper); --card:var(--surface);
  --blue:var(--navy); --violet:var(--moss); --cyan:var(--moss);
  --gold:var(--cinnabar);
  --text-1:var(--ink); --text-2:var(--ink-2); --text-3:var(--muted);
  --serif:"Songti SC","STSong",Georgia,serif;
  --sans:"PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;

  /* 几何 */
  --container:1200px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(26,46,74,.05);
  --sh-2:0 10px 28px -14px rgba(26,46,74,.20);
  --sh-3:0 22px 56px -22px rgba(26,46,74,.32);
  /* 字阶（响应式，修复小屏溢出） */
  --fs-d:clamp(29px,5.2vw,46px);
  --fs-h1:clamp(24px,3.6vw,34px);
  --fs-h2:clamp(20px,2.6vw,27px);
  --fs-h3:17px; --fs-sm:13.5px; --fs-xs:12px;
  --hd-h:66px;
}

/* ── 2. 基础层 ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16px;line-height:1.65;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--navy);text-decoration:none;transition:color .15s}
a:hover{color:var(--navy-deep)}
img,svg,video{max-width:100%;height:auto}
img{display:block}
b,strong{font-weight:700}
::selection{background:var(--cinnabar-soft);color:var(--cinnabar-deep)}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
hr{border:none;border-top:1px solid var(--line);margin:26px 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
details>summary{cursor:pointer}
details>summary::-webkit-details-marker{display:none}
@supports(scrollbar-width:thin){
  .table-wrap{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
}

/* ── 3. 排版 ───────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.28;color:var(--ink);font-weight:700}
h2.h{font-family:var(--serif);font-size:var(--fs-h2);font-weight:800;letter-spacing:-.005em;margin-bottom:8px}
.kicker{font-size:11.5px;letter-spacing:.2em;color:var(--navy);font-weight:800;text-transform:uppercase;margin-bottom:10px;opacity:.85}
.lead{color:var(--muted);max-width:760px;margin-bottom:28px;font-size:15.5px;line-height:1.8}
.meta{font-size:12px;color:var(--faint)}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.table-wrap,.num,table{font-feature-settings:"tnum" 1}

/* ── 4. 布局 ───────────────────────────────────────────────── */
.wrap{max-width:var(--container);margin:0 auto;padding:44px 24px}
@media(max-width:640px){.wrap{padding:28px 18px}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

/* ── 5. 页头（桌面）────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,248,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  height:var(--hd-h);display:flex;align-items:center;gap:22px;
}

/* 品牌字标 */
.hd-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.hd-mark{
  width:35px;height:35px;border-radius:9px;background:var(--navy);color:var(--surface);
  display:grid;place-items:center;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.05em;line-height:1;flex:0 0 auto;
}
.hd-word{display:flex;flex-direction:column;line-height:1.18}
.hd-word b{font-family:var(--serif);font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.hd-word i{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.hd-logo:hover .hd-mark{background:var(--navy-deep)}
.hd-logo:hover .hd-word b{color:var(--navy)}

/* 主菜单 */
.hd-menu{display:flex;align-items:center;gap:1px;margin-left:6px}
.hd-item{position:relative}
.hd-item>a{
  display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:background .15s,color .15s;
}
.hd-item>a:hover{background:var(--surface-3);color:var(--navy)}
.hd-item.on>a{color:var(--navy);background:var(--navy-soft)}
.hd-car{font-size:9px;color:var(--faint);transition:transform .2s;line-height:1}
.hd-item:hover .hd-car{transform:rotate(180deg)}

/* 下拉面板 */
.hd-pop{
  position:absolute;left:-6px;top:calc(100% + 9px);
  min-width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:70;
}
.hd-item:hover .hd-pop,.hd-item:focus-within .hd-pop{opacity:1;visibility:visible;transform:none}
.hd-pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.hd-pop.w2{min-width:470px;columns:2;column-gap:7px}
.hd-pop.w2 a{break-inside:avoid;-webkit-column-break-inside:avoid}
.hd-pop a{display:block;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.hd-pop a:hover{background:var(--navy-soft);color:var(--navy)}
.hd-pop a small{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:1px;letter-spacing:.01em}

/* 右侧动作区 */
.hd-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hd-ghost{
  padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);border:1px solid var(--line);background:var(--surface);white-space:nowrap;
}
.hd-ghost:hover{border-color:var(--line-strong);color:var(--navy);background:var(--surface-2)}
.hd-cta{
  padding:10px 17px;border-radius:9px;font-size:13.5px;font-weight:700;
  background:var(--navy);color:var(--surface);white-space:nowrap;
  box-shadow:var(--sh-1);transition:background .15s,transform .15s;
}
.hd-cta:hover{background:var(--navy-deep);color:var(--surface);transform:translateY(-1px)}

/* 汉堡与移动端专用按钮 */
.hd-burger{
  display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);place-items:center;cursor:pointer;flex:0 0 auto;
}
.hd-burger:hover{border-color:var(--line-strong);color:var(--navy)}
.hd-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

@media(max-width:1023px){
  .hd-menu,.hd-right{display:none}
  .hd-burger{display:grid}
  .hd-in{gap:12px;justify-content:space-between}
}
/* 大屏触控设备（如 iPad 横屏 1024px+）：hover 下拉不可用，
   退回汉堡 + 抽屉，确保所有栏目可达 */
@media(min-width:1024px) and (hover:none){
  .hd-menu,.hd-right{display:none}
  .hd-burger{display:grid}
  .hd-in{gap:12px;justify-content:space-between}
}

/* ── 6. 抽屉导航（移动端）──────────────────────────────────── */
.dr-bd{
  position:fixed;inset:0;z-index:98;background:rgba(21,42,68,.44);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s linear .22s;
}
.dr{
  position:fixed;top:0;bottom:0;left:0;z-index:99;width:min(87vw,356px);
  background:var(--surface);display:flex;flex-direction:column;
  visibility:hidden;transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s;
  box-shadow:var(--sh-3);
}
/* 开启时 visibility 必须「即时」生效（0s、无延迟），否则抽屉在过渡期仍为 hidden，
   其中的关闭按钮无法获得焦点 → 键盘/读屏用户的焦点会滞留在汉堡按钮上。
   关闭时才把 visibility 延迟到滑出动画结束（避免动画被裁掉）。 */
body.dr-open .dr{
  transform:none;visibility:visible;
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s;
}
body.dr-open .dr-bd{
  opacity:1;visibility:visible;
  transition:opacity .22s,visibility 0s;
}
body.dr-open{overflow:hidden}
.dr-hd{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.dr-hd .hd-word b{font-size:15.5px}
.dr-x{
  margin-left:auto;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;
}
.dr-x:active{background:var(--surface-3)}
.dr-x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 12px 24px}
.dr-g{border-bottom:1px solid var(--line-soft)}
.dr-g>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:14px 6px;font-size:14.5px;font-weight:700;color:var(--ink);
}
.dr-g[open]>summary{color:var(--navy)}
.dr-g>summary .hd-car{font-size:10px}
.dr-g[open]>summary .hd-car{transform:rotate(180deg)}
.dr-l{padding:0 2px 10px}
.dr-l a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2)}
.dr-l a:active{background:var(--navy-soft);color:var(--navy)}
.dr-l a.on{background:var(--navy-soft);color:var(--navy);font-weight:700}
.dr-home{display:block;padding:14px 6px;font-size:14.5px;font-weight:700;color:var(--ink)}
.dr-home.on,.dr-home:active{color:var(--navy)}
.dr-ft{
  flex:0 0 auto;padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:grid;gap:8px;background:var(--surface-2);
}
.dr-ft .hd-cta{text-align:center;padding:12px}

/* ── 7. 底部标签栏（移动端）────────────────────────────────── */
.bn{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(255,253,248,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bn a,.bn button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 7px;font-size:10.5px;font-weight:600;color:var(--faint);
  background:none;border:none;font-family:inherit;line-height:1.2;cursor:pointer;
}
.bn a.on,.bn button.on{color:var(--navy)}
.bn a svg,.bn button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 底部标签栏只在手机/竖屏小屏启用（≤767px）；768–1023px 走 app bar + 汉堡抽屉，
   避免 5 项底栏在平板宽度上被拉散（国际化主流做法：底栏属手机模式）。 */
@media(max-width:767px){
  .bn{display:flex}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ── 8. Hero ───────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--surface);padding:clamp(44px,7vw,72px) 0 clamp(52px,8vw,80px)}
.hero .wrap{padding-top:0;padding-bottom:0}
.hero h1{font-family:var(--serif);font-size:var(--fs-d);font-weight:800;line-height:1.16;letter-spacing:-.012em;color:var(--surface)}
.hero h1 .grad{color:var(--cinnabar)}
.hero p{color:var(--on-dark-2);margin-top:14px;max-width:640px;font-size:15.5px;line-height:1.78}
.stats{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.stat{
  background:rgba(255,253,248,.07);border:1px solid rgba(232,237,244,.16);
  border-radius:var(--r);padding:15px 22px;min-width:132px;
}
.stat b{font-size:28px;display:block;color:var(--surface);font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1.15}
.stat span{font-size:11.5px;color:var(--on-dark-3);letter-spacing:.02em}
@media(max-width:520px){
  .stats{gap:9px;margin-top:22px}
  .stat{flex:1 1 calc(50% - 5px);min-width:0;padding:12px 15px}
  .stat b{font-size:23px}
  .stat span{font-size:10.5px}
}

/* ── 9. 卡片与网格 ─────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.card h3{font-size:var(--fs-h3);font-weight:700;margin-bottom:8px}
.card p{font-size:var(--fs-sm);color:var(--muted)}

/* ── 10. 按钮 / 标签 / 徽章 ───────────────────────────────── */
.btn{
  display:inline-block;background:var(--navy);color:var(--surface);
  padding:10px 18px;border-radius:9px;font-weight:600;font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--navy-deep);color:var(--surface)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--navy)}
.tag{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--navy);font-weight:600;white-space:nowrap}
.grade{font-weight:800;padding:2px 8px;border-radius:var(--r-sm);font-size:12px;white-space:nowrap}
.ga{background:var(--moss-soft);color:var(--moss-deep)}
.gb{background:var(--navy-soft);color:var(--navy)}
.gc{background:var(--surface-3);color:var(--ink-3)}
.gd{background:var(--cinnabar-soft);color:var(--cinnabar-deep)}

/* ── 11. 表格 ──────────────────────────────────────────────── */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
th{
  background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-align:left;
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:12px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface-2)}

/* ── 12. 行式数据 ─────────────────────────────────────────── */
.rowline{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:14px}
.rowline span{color:var(--muted)}

/* ── 13. 首页门户瓷片（仅 home.php 使用）──────────────────── */
.portal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.pt{
  display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);
  background:rgba(255,253,248,.07);border:1px solid rgba(232,237,244,.18);
  min-width:0;transition:background .16s,border-color .16s,transform .16s;
}
.pt:hover{background:rgba(62,125,107,.30);border-color:rgba(95,158,140,.55);transform:translateY(-2px)}
.pt b{display:block;font-size:14.5px;color:var(--surface);font-weight:800;white-space:nowrap}
.pt i{display:block;font-style:normal;font-size:11.5px;color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
  .portal{grid-template-columns:1fr 1fr;gap:8px}
  .pt{padding:10px 11px;border-radius:10px}
  .pt b{font-size:13px}
  .pt i{font-size:10px}
}

/* ── 14. 页脚 ──────────────────────────────────────────────── */
footer{background:var(--navy-deep);color:var(--on-dark-2);padding:46px 0 34px;margin-top:72px;font-size:13px;line-height:1.85}
footer b{color:var(--surface)}
footer a{color:var(--on-dark-2)}
footer a:hover{color:var(--surface)}
.ft-in{max-width:var(--container);margin:0 auto;padding:0 24px}
.ft-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ft-cols h4{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:11px}
.ft-cols ul{list-style:none;display:grid;gap:7px}
.ft-cols a{font-size:13px}
.ft-brand b{font-family:var(--serif);font-size:16px;display:block;margin-bottom:7px}
.ft-brand p{color:var(--on-dark-3);font-size:12.5px;line-height:1.8;max-width:330px}
.ft-rule{border-top:1px solid rgba(232,237,244,.14);margin:30px 0 18px}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--on-dark-3)}
.ft-legal a{color:var(--on-dark-3)}
.ft-legal a:hover{color:var(--surface)}
.ft-note{margin-top:20px;font-size:12px;color:var(--on-dark-3)}
.ft-note details{border:1px solid rgba(232,237,244,.16);border-radius:var(--r);padding:11px 15px;background:rgba(232,237,244,.04)}
.ft-note summary{font-weight:600;color:var(--on-dark-2)}
.ft-note div{margin-top:9px;line-height:1.95;color:var(--on-dark-3)}
.ft-note p+p{margin-top:8px}
@media(max-width:900px){
  footer{padding:34px 0 24px;margin-top:48px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:22px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:520px){
  .ft-cols{grid-template-columns:1fr;gap:20px}
}

/* ── 15. 打印 ──────────────────────────────────────────────── */
@media print{
  .hd,.bn,.dr,.dr-bd,.mnav{display:none !important}
  body{background:#fff;padding-bottom:0}
  footer{margin-top:24px}
  a{color:inherit}
}

/* ── 16. 全站分享（opc-share.js）─────────────────────────────
   层级：.ops-fab=100 / .ops-mask=140 / .ops-pmask=150（既有全站最高为 99，无冲突）
   用色纪律：面板主体走 --surface 暖纸白 + --navy 墨石深蓝；
             朱砂橙仅保留**一处焦点** = 「生成分享海报」/「保存图片」
             （微信内 JS-SDK 无法由脚本注入卡片，海报是唯一能把
              本页真实数据带进微信的载体，故由它承担唯一强调色）。
   ------------------------------------------------------------ */

/* 16.1 页面内挂载点与按钮 ------------------------------------ */
.opc-share{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ops-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;
  padding:9px 15px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);color:var(--navy);border:1px solid var(--navy-line);
  transition:background .16s,border-color .16s,color .16s,transform .16s;
  -webkit-tap-highlight-color:transparent;
}
.ops-btn:hover{background:var(--navy-soft);border-color:var(--navy);transform:translateY(-1px)}
.ops-btn:active{transform:translateY(0)}
.ops-btn-ic{display:inline-flex}
.ops-btn-ic svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* hero 变体：城市档案页顶部 / 榜单页顶部 */
.ops-btn.hero{background:var(--navy);color:var(--surface);border-color:var(--navy)}
.ops-btn.hero:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--surface)}

/* 16.2 浮动入口（页面无挂载点时的兜底，保证「每页都能分享」） */
.ops-fab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:100;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--navy);border:1px solid var(--navy-line);
  box-shadow:var(--sh-2);
  transition:background .16s,color .16s,transform .16s;
  -webkit-tap-highlight-color:transparent;
}
.ops-fab:hover{background:var(--navy);color:var(--surface);transform:translateY(-2px)}
.ops-fab svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 手机竖屏：避让固定底部标签栏（.bn，高约 58px + 安全区） */
@media(max-width:767px){
  .ops-fab{bottom:calc(58px + env(safe-area-inset-bottom) + 14px)}
}

/* 16.3 遮罩与面板 -------------------------------------------- */
.ops-mask{
  position:fixed;inset:0;z-index:140;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(21,42,68,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s;
}
.ops-mask.on{opacity:1;visibility:visible}
body.ops-lock{overflow:hidden}

.ops-panel{
  position:relative;width:100%;max-width:404px;max-height:92vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-3);
  padding:22px 22px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(16px);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.ops-mask.on .ops-panel{transform:translateY(0)}
@media(min-width:641px){
  .ops-mask{align-items:center;padding:24px}
  .ops-panel{border-radius:var(--r-lg);transform:translateY(10px) scale(.98)}
  .ops-mask.on .ops-panel{transform:none}
}

.ops-x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
  font-size:17px;line-height:1;font-family:inherit;cursor:pointer;
  transition:background .15s,color .15s;
}
.ops-x:hover{background:var(--navy-soft);color:var(--navy)}

.ops-hd{display:flex;align-items:baseline;gap:10px;min-width:0;
  padding-right:36px;margin-bottom:16px}
.ops-t{font-family:var(--serif);font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap}
.ops-sub{font-size:12.5px;color:var(--faint);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 16.4 三渠道 ------------------------------------------------ */
.ops-ch{border:1px solid var(--line);border-radius:var(--r);
  padding:16px 14px;background:var(--surface-2);transition:border-color .2s}
.ops-panel.ops-wxok .ops-ch{border-color:var(--moss)}
.ops-ch-t{font-size:11.5px;letter-spacing:.16em;font-weight:800;color:var(--navy);
  text-transform:uppercase;text-align:center;margin-bottom:13px;opacity:.85}
.ops-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ops-b{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 4px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.ops-b:hover{background:var(--moss-soft);border-color:var(--moss);transform:translateY(-1px)}
.ops-b:active{transform:translateY(0)}
.ops-ic{
  width:40px;height:40px;border-radius:12px;background:var(--moss-soft);
  display:flex;align-items:center;justify-content:center;
}
/* 图标以 CSS mask 绘制：无外链、颜色跟随 token，可随 hover 变色 */
.ops-ic::before{
  content:'';display:block;width:22px;height:22px;background-color:var(--moss-deep);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ops-b:hover .ops-ic{background:var(--surface)}
.ops-b:hover .ops-ic::before{background-color:var(--moss-deep)}
.ops-ic-tl::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='12' r='2.3' stroke-width='2.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='12' r='2.3' stroke-width='2.8'/%3E%3C/svg%3E");
}
.ops-ic-gp::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='3.1'/%3E%3Cpath d='M6.2 19.4c0-3.1 2.6-5 5.8-5s5.8 1.9 5.8 5'/%3E%3Ccircle cx='4.9' cy='10.3' r='2.1'/%3E%3Cpath d='M1.5 18.1c0-2.2 1.5-3.5 3.5-3.5'/%3E%3Ccircle cx='19.1' cy='10.3' r='2.1'/%3E%3Cpath d='M22.5 18.1c0-2.2-1.5-3.5-3.5-3.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='3.1'/%3E%3Cpath d='M6.2 19.4c0-3.1 2.6-5 5.8-5s5.8 1.9 5.8 5'/%3E%3Ccircle cx='4.9' cy='10.3' r='2.1'/%3E%3Cpath d='M1.5 18.1c0-2.2 1.5-3.5 3.5-3.5'/%3E%3Ccircle cx='19.1' cy='10.3' r='2.1'/%3E%3Cpath d='M22.5 18.1c0-2.2-1.5-3.5-3.5-3.5'/%3E%3C/svg%3E");
}
.ops-ic-fr::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.4 19.6c0-3.5 2.9-5.7 6.6-5.7s6.6 2.2 6.6 5.7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.4 19.6c0-3.5 2.9-5.7 6.6-5.7s6.6 2.2 6.6 5.7'/%3E%3C/svg%3E");
}
.ops-tip{margin-top:11px;min-height:19px;text-align:center;
  font-size:12px;line-height:1.6;color:var(--muted)}

/* 16.5 二维码 + 次级动作 ------------------------------------ */
.ops-cut{display:flex;align-items:center;gap:12px;margin:16px 0;
  font-size:12px;color:var(--faint)}
.ops-cut::before,.ops-cut::after{content:'';flex:1;height:1px;background:var(--line)}
.ops-row{display:flex;gap:16px;align-items:center}
.ops-qr{
  flex:0 0 auto;width:124px;height:124px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1.5;color:var(--faint);text-align:center;
}
.ops-qr img{display:block}
.ops-acts{flex:1;display:grid;gap:9px;min-width:0}
.ops-a{
  font-family:inherit;font-size:13.5px;font-weight:700;
  padding:11px 14px;border-radius:var(--r);cursor:pointer;
  background:var(--surface);color:var(--navy);border:1px solid var(--navy-line);
  transition:background .15s,border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.ops-a:hover{background:var(--navy-soft)}
/* 本面板唯一朱砂焦点：把本页真实数据带进微信的载体 */
.ops-pdl,.opc-share-poster{
  background:var(--cinnabar);color:var(--surface);border-color:var(--cinnabar);
}
.ops-pdl:hover,.opc-share-poster:hover{
  background:var(--cinnabar-deep);border-color:var(--cinnabar-deep);color:var(--surface);
}
.ops-ft{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--faint);text-align:center}

/* 16.6 微信内「点右上角」引导 --------------------------------- */
.ops-guide{
  position:absolute;inset:0;z-index:2;border-radius:inherit;
  display:flex;align-items:flex-start;justify-content:flex-end;
  gap:10px;padding:16px 20px;
  background:rgba(21,42,68,.94);color:var(--on-dark);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.ops-guide.on{opacity:1;visibility:visible}
.ops-arrow{font-size:30px;line-height:1.1;color:var(--on-dark)}
.ops-guide-t{font-size:13.5px;line-height:1.9;text-align:right;max-width:236px}
.ops-guide-t b{color:var(--surface)}

/* 16.7 海报弹层 ---------------------------------------------- */
.ops-pmask{
  position:fixed;inset:0;z-index:150;padding:20px;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(21,42,68,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.ops-pwrap{width:100%;max-width:340px;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.ops-pimg{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--sh-3)}
.ops-pbar{display:flex;gap:10px;width:100%}
.ops-pbar .ops-a{flex:1}
.ops-phint{font-size:12px;line-height:1.6;color:var(--on-dark-2);text-align:center}

/* 16.8 无障碍：尊重系统「减弱动态效果」 ----------------------- */
@media(prefers-reduced-motion:reduce){
  .ops-mask,.ops-panel,.ops-btn,.ops-b,.ops-a,.ops-fab,.ops-guide{transition:none}
  .ops-panel{transform:none !important}
}

/* 16.9 打印：分享控件一律不出现 ------------------------------ */
@media print{
  .ops-mask,.ops-fab,.ops-pmask{display:none !important}
}