/* ============================================================
   主机情报 HOSTFEED — 文章系统原型
   UI 设计语言 1:1 复刻 workbuddy.cn
   ============================================================ */
/* ============================================================
   主机情报 HOSTFEED — 设计令牌（Design Tokens）
   色彩 / 高度 / 圆角 / 动效 / 间距 / 层级，全部集中在此
   ============================================================ */
:root{
  /* ---------- 品牌色阶（10 级，浅→深） ---------- */
  --brand-50:#F0FDF9;
  --brand-100:#DCFBF1;
  --brand-200:#B4F5E2;
  --brand-300:#7CEBCB;
  --brand-400:#3FDBAF;
  --brand-500:#00C39A;
  --brand-600:#00A884;
  --brand-700:#048469;
  --brand-800:#076753;
  --brand-900:#0A5142;

  /* ---------- 语义化别名（组件只用这些） ---------- */
  --brand:var(--brand-500);
  --brand-dark:var(--brand-600);
  --brand-deep:#046A56;    /* 已加深，在 --brand-soft 上达 5.9:1 */
  --brand-soft:var(--brand-100);
  --brand-soft-2:var(--brand-50);

  /* ---------- 中性色 ---------- */
  --ink:#0A1512;          /* 标题 */
  --text:#1D2B33;         /* 正文 */
  --muted:#556671;        /* 次要文字 */  --faint:#66757F;        /* 辅助文字（加深至 4.76:1） */
  --line:#E7EEEC;         /* 描边 */
  --line-strong:#D3DFDB;  /* 强调描边 */
  --card:#FFFFFF;
  --bg:#FFFFFF;
  --bg-soft:#F7FBFA;
  --bg-mute:#EFF5F3;

  /* ---------- 状态色 ---------- */
  --ok:#0E9F6E;    --ok-bg:#ECFDF5;    --ok-line:#A7F3D0;
  --warn:#B45309;  --warn-bg:#FFFBEB;  --warn-line:#FDE68A;
  --danger:#DC2626;--danger-bg:#FEF2F2;--danger-line:#FECACA;
  --info:#2563EB;  --info-bg:#EFF6FF;  --info-line:#BFDBFE;

  /* ---------- 圆角 ---------- */
  --radius-xs:8px;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --radius-full:999px;

  /* ---------- 高度（阴影） ---------- */
  --shadow-xs:0 1px 2px rgba(10,40,32,.05);
  --shadow-s:0 1px 2px rgba(10,40,32,.05),0 2px 8px rgba(10,40,32,.04);
  --shadow:0 4px 14px rgba(10,40,32,.07),0 12px 40px rgba(10,40,32,.06);
  --shadow-l:0 8px 24px rgba(10,40,32,.08),0 24px 64px rgba(10,40,32,.08);
  --shadow-glow:0 8px 24px rgba(0,195,154,.28);
  --ring:0 0 0 3px rgba(0,195,154,.18);

  /* ---------- 动效 ---------- */
  --ease:cubic-bezier(.22,1,.36,1);          /* 出场 */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);/* 弹性 */
  --t-fast:.15s;
  --t:.24s;
  --t-slow:.45s;

  /* ---------- 间距（8pt 栅格） ---------- */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px;

  /* ---------- 层级 ---------- */
  --z-sticky:50;
  --z-nav:100;
  --z-dropdown:120;
  --z-modal:200;
  --z-toast:300;

  /* ---------- 版式 ---------- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"SF Mono",Consolas,Menlo,Monaco,monospace;
  --max-w:1200px;
}

/* ============================================================
   深色模式：所有组件都走语义令牌，因此只需覆盖这一层
   ============================================================ */
[data-theme="dark"]{
  --ink:#E8F2EE;
  --text:#BCCBC6;
  --muted:#A3B5B1;
  --faint:#84999A;
  --line:#1F2E2A;
  --line-strong:#2C3F39;
  --card:#101A17;
  --bg:#0A1210;
  --bg-soft:#0E1915;
  --bg-mute:#152420;

  --brand:var(--brand-400);
  --brand-dark:var(--brand-300);
  --brand-deep:var(--brand-300);
  --brand-soft:rgba(0,195,154,.14);
  --brand-soft-2:rgba(0,195,154,.07);

  --ok-bg:rgba(14,159,110,.14);    --ok-line:rgba(14,159,110,.35);
  --warn-bg:rgba(180,83,9,.16);    --warn-line:rgba(245,158,11,.3);
  --danger-bg:rgba(220,38,38,.14); --danger-line:rgba(220,38,38,.32);
  --info-bg:rgba(37,99,235,.14);   --info-line:rgba(37,99,235,.32);
  --warn:#F0B357;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow:0 4px 14px rgba(0,0,0,.45),0 12px 40px rgba(0,0,0,.4);
  --shadow-l:0 8px 24px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.45);
  --shadow-glow:0 8px 24px rgba(0,195,154,.18);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
::selection{background:rgba(0,195,154,.25)}

/* ---------- 顶部导航 ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.5px;color:var(--ink);padding:2px 0;min-height:32px}
.logo-mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,195,154,.35);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.logo:hover{color:var(--brand-deep)}
.logo-tagline{font-size:10px;color:var(--muted);font-weight:500;line-height:1.3;letter-spacing:.3px;border-left:1px solid var(--line);padding-left:10px}
.nav-menu{display:flex;gap:6px;flex:1;justify-content:center;min-width:0}
.nav-menu a{padding:8px 14px;border-radius:999px;font-size:14.5px;color:var(--text);font-weight:500;position:relative;white-space:nowrap}
.nav-menu{gap:2px}

/* 窄屏导航：9 项（首页 + 动态分类 + 套餐优惠 + 商家 + 单页 + 归档 + 收藏）
   横排必然溢出。这里不做汉堡菜单（会隐藏入口、且需 JS 状态），
   改为「可横向滚动 + 边缘渐隐提示」，用户滑动即可看到全部项，
   同时隐藏滚动条以免占掉本就紧张的手机纵向空间。 */
@media(max-width:1024px){
  .nav-inner{gap:16px}
  .nav-menu{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* 两侧留白，让首尾项不贴边 */
    scroll-padding-inline:12px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .nav-menu::-webkit-scrollbar{display:none}
  .nav-menu a{padding:8px 11px;font-size:14px}
  /* 滚动容器两端不可拖到头时的回弹高亮 */
  .nav-menu:hover{scrollbar-width:none}
}
@media(max-width:768px){
  .nav-inner{padding:0 16px;height:60px;gap:12px}
  .logo-tagline{display:none}
  .nav-menu a{padding:7px 10px;font-size:13.5px}
  .logo-mark{width:30px;height:30px;border-radius:9px}
  .logo{font-size:15px}
}
.nav-menu a:hover{background:var(--brand-soft);color:var(--brand-deep)}
.nav-menu a.active{color:var(--brand-deep);font-weight:600}
.nav-menu a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2.5px;border-radius:2px;background:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;border:none;transition:.2s;font-family:inherit}
.btn-dark{background:var(--btn-dark-bg);color:var(--btn-dark-fg);padding:11px 24px}
.btn-dark:hover{background:var(--btn-dark-bg-hover);transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,21,18,.25)}
.btn-ghost{background:transparent;color:var(--ink);padding:11px 20px}
.btn-ghost:hover{color:var(--brand-deep)}
.btn-brand{background:var(--brand);color:#fff;padding:12px 26px}
.btn-brand:hover{background:var(--brand-dark);box-shadow:0 8px 20px rgba(0,195,154,.35)}
.btn-line{border:1px solid var(--line);background:var(--card);color:var(--text);padding:10px 20px}
.btn-line:hover{border-color:var(--brand);color:var(--brand-deep)}
.search-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;width:210px;color:var(--faint);font-size:13.5px;transition:.2s}
.search-pill:hover{border-color:var(--brand)}
.search-pill input{border:none;outline:none;flex:1;font:inherit;color:var(--text);background:transparent}
.search-pill input::placeholder{color:var(--faint)}

/* ---------- 小标签（绿点 + 双语） ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand-deep);font-weight:700}
.eyebrow .cn{color:var(--muted);font-weight:500;letter-spacing:2px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(0,195,154,.15)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:64px 0 40px;overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 300px at 22% 78%,rgba(0,221,178,.20),transparent 65%),
  radial-gradient(700px 360px at 82% 30%,rgba(0,195,154,.14),transparent 60%),
  radial-gradient(420px 260px at 55% 105%,rgba(120,240,200,.16),transparent 70%)}
.hero-inner{position:relative;text-align:center}
.hero h1{font-size:52px;line-height:1.15;letter-spacing:-1px;color:var(--ink);font-weight:800}
.hero h1 .dim{color:#C2CDD3;font-weight:800}
.hero p{margin:18px auto 0;max-width:560px;color:var(--muted);font-size:16px}
.hero-cta{margin-top:28px;display:flex;justify-content:center;gap:14px;align-items:center}
.hero-stats{margin-top:34px;display:flex;justify-content:center;gap:44px}
.hero-stats .num{font-size:24px;font-weight:800;color:var(--ink)}
.hero-stats .lbl{font-size:12.5px;color:var(--faint)}

/* ---------- 广告横幅 ---------- */
.ad-banner{margin:8px 0 0;border-radius:var(--radius);background:linear-gradient(100deg,#0B2B24,#0F4A3C 55%,#0B2B24);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 28px;box-shadow:var(--shadow-s)}
.ad-banner .t{font-size:16.5px;font-weight:700;letter-spacing:.5px}
.ad-banner .t em{font-style:normal;color:#4BE6C2}
.ad-banner .btn{background:#fff;color:var(--ink);padding:9px 18px;font-size:13px}
.ad-note{font-size:11px;color:var(--faint);text-align:right;margin-top:6px}

/* ---------- 区块标题 ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.section-head h2{font-size:30px;letter-spacing:-.5px;color:var(--ink);font-weight:800;margin-top:8px}
.section-head .desc{color:var(--muted);font-size:14px;max-width:380px;text-align:right}

/* ---------- 布局 ---------- */
.layout{display:grid;grid-template-columns:1fr 340px;gap:36px;padding:36px 0 64px}
.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.list-head h3{font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px}
.list-head h3::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--brand)}
.list-head .link{font-size:13px;color:var(--brand-deep);font-weight:600;display:inline-flex;align-items:center;min-height:32px}

/* ---------- 文章卡片 ---------- */
.post-card{display:flex;gap:20px;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);transition:.22s;margin-bottom:16px;position:relative}
.post-card:hover{border-color:rgba(0,195,154,.45);box-shadow:var(--shadow);transform:translateY(-2px)}
.post-thumb{width:168px;height:112px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:1px;text-align:center;line-height:1.5;padding:10px;overflow:hidden;position:relative}
.post-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.post-thumb picture{position:absolute;inset:0;display:block}
.post-thumb picture img{width:100%;height:100%;object-fit:cover}
.post-card:hover .post-thumb img{transform:scale(1.06)}
.g1{background:linear-gradient(135deg,#007F63,#0A5A66)}
.g2{background:linear-gradient(135deg,#0369A1,#1E3A8A)}
.g3{background:linear-gradient(135deg,#B91C1C,#7F1D1D)}
.g4{background:linear-gradient(135deg,#6D28D9,#A21CAF)}
.g5{background:linear-gradient(135deg,#047857,#065F46)}
.g6{background:linear-gradient(135deg,#475569,#0F172A)}
.post-body{flex:1;min-width:0}
.post-title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.5}
.post-title:hover{color:var(--brand-deep)}
.post-title .pin{display:inline-block;vertical-align:2px;margin-right:8px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--brand-700),var(--brand-800));border-radius:6px;padding:2px 8px}
.post-excerpt{margin-top:7px;color:var(--muted);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{margin-top:12px;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--faint)}
.post-meta .cat{color:var(--brand-deep);font-weight:600;display:inline-flex;align-items:center;gap:5px;min-height:24px}
/* 行内链接补足触摸区：用 padding 只影响自身盒高，父行行高不变（align-items:center 吸收） */
.post-meta .cat{padding:2px 0}
.post-meta .cat::before{content:"▤";font-size:11px}
/* 移动端：行内链接（分类徽章 / 引证来源 / RSS）点击区不足 32px。
   这些处在正文流里，不能给上下 padding（会破坏行距）——
   改用伪元素向外扩展点击区，不影响任何视觉与布局。 */
@media(max-width:768px){
  /* 行内链接补足触摸区：用 ::after 向外扩展点击区，不影响视觉与行距。
     注意：.post-meta .cat / .article .meta .cat 已有自身规则（display:inline-flex），
     选择器优先级必须不低于它们，否则 position:relative 会被盖掉、
     ::after 退回 static 导致扩展失效。 */
  .post-meta a,.post-meta .cat,.crumbs a,.cat,
  .article a:not(.btn):not(.mini-btn),.article .meta a,.article .meta .cat{
    position:relative;
  }
  .post-meta a::after,.post-meta .cat::after,.crumbs a::after,.cat::after,
  .article a:not(.btn):not(.mini-btn)::after,
  .article .meta a::after,.article .meta .cat::after{
    content:"";position:absolute;inset:-8px -4px;
  }
}

/* ---------- 侧栏 ---------- */
.side{display:flex;flex-direction:column;gap:24px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.side-card h4{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.side-card h4::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--brand)}
.side-banner{display:flex;align-items:center;justify-content:center;height:88px;border-radius:12px;color:#fff;font-weight:700;letter-spacing:1px;margin-bottom:10px;font-size:14px;text-align:center}
.side-banner:last-child{margin-bottom:0}
.rec-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.rec-item:last-child{border-bottom:none}
.rec-item .no{width:22px;height:22px;border-radius:7px;background:var(--brand-soft);color:var(--brand-deep);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px}
.rec-item .t{font-size:13.5px;line-height:1.5;color:var(--text)}
.rec-item:hover .t{color:var(--brand-deep)}
.tags-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{font-size:12.5px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:.2s;cursor:pointer}
.tag-pill:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.tag-pill.hot{background:var(--brand-soft);border-color:rgba(0,195,154,.35);color:var(--brand-deep);font-weight:600}

/* ---------- 分类胶囊行 ---------- */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.cat-tab{padding:8px 18px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;color:var(--muted);background:var(--card);transition:.2s;cursor:pointer;font-family:inherit}
.cat-tab:hover{border-color:var(--brand);color:var(--brand-deep)}
.cat-tab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

/* ---------- 分页 ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px}
.pagination a,.pagination span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:13.5px;color:var(--muted);border:1px solid transparent;transition:.2s;padding:0 6px}
.pagination a:hover{border-color:var(--brand);color:var(--brand-deep)}
.pagination .on{background:var(--brand-soft);color:var(--brand-deep);font-weight:700;border-color:rgba(0,195,154,.3)}
.pagination .dots{border:none;color:var(--faint)}

/* ---------- 公告条 ---------- */
.notice-bar{background:linear-gradient(90deg,#0A1512,#123F35 50%,#0A1512);color:#fff;position:relative}
.notice-bar .wrap{max-width:1200px;margin:0 auto;padding:0 32px;height:38px;display:flex;align-items:center;gap:12px;font-size:13px}
.notice-bar .lv{font-size:10px;font-weight:800;letter-spacing:1px;border-radius:5px;padding:2px 7px;flex-shrink:0}
.lv-info{background:var(--brand);color:#08322A}
.lv-warn{background:#F59E0B;color:#4A2A00}
.lv-hot{background:#DC2626;color:#fff}
.notice-bar a{color:#7CF5D4;font-weight:600}
.notice-bar .close{
  margin-left:auto;background:none;border:none;color:rgba(255,255,255,.72);
  font-size:16px;cursor:pointer;line-height:1;
  /* 触摸目标：× 字符本身只有 16px，用 padding 把点击区撑到 32×32（WCAG 2.5.5） */
  padding:8px;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;
}
.notice-bar .close:hover{color:#fff}
.notice-side{background:var(--brand-soft);border:1px solid rgba(0,195,154,.25);border-radius:var(--radius);padding:16px 18px}
.notice-side .t{font-size:13px;font-weight:700;color:var(--brand-deep);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.notice-side .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.notice-side ul{list-style:none;font-size:12.5px;color:var(--muted);line-height:2}
.notice-side li::before{content:"· ";color:var(--brand)}

/* ---------- 供应商 ---------- */
.vendor-hero{display:flex;gap:26px;align-items:flex-start;background:var(--surface-grad);border:1px solid var(--line);border-radius:var(--radius-l);padding:30px 34px;margin:26px 0 30px}
.vendor-logo{width:104px;height:104px;border-radius:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;letter-spacing:1px;box-shadow:var(--shadow)}
.vendor-hero .name{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.vendor-hero .site{font-size:13px;color:var(--brand-deep);margin-top:4px;font-weight:600}
.vendor-hero .intro{margin-top:10px;font-size:14px;color:var(--muted);max-width:640px}
.vendor-actions{margin-top:18px;display:flex;gap:10px}
.vendor-rating{display:flex;gap:26px;margin-top:6px;flex-wrap:wrap}
.rate-item .k{font-size:12px;color:var(--faint)}
.rate-item .bar{width:96px;height:6px;border-radius:3px;background:var(--track-bg);margin-top:5px;overflow:hidden}
.rate-item .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand),#00DDB2)}
.rate-item .v{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:4px}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;font-size:13.5px}
.info-grid div{display:flex;padding:11px 0;border-bottom:1px dashed var(--line)}
.info-grid .k{color:var(--faint);width:96px;flex-shrink:0}
.info-grid .v{color:var(--text)}
/* 商家档案等定义列表里的链接（如官网、推广链接）实测仅 75×17px */
.info-grid .v a,.kv .v a{display:inline-block;padding:7px 0;min-height:32px;word-break:break-all}
.coupon{border:1px dashed rgba(0,195,154,.5);background:var(--brand-soft-2);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px;margin-top:16px}
.coupon .code{font-family:Consolas,monospace;font-size:17px;font-weight:800;color:var(--brand-deep);background:var(--card);border:1px solid var(--brand);border-radius:9px;padding:6px 14px;letter-spacing:1px}
.coupon .d{font-size:12.5px;color:var(--muted)}
.vendor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.vendor-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--card);transition:.22s;text-align:center}
.vendor-card:hover{border-color:rgba(0,195,154,.4);box-shadow:var(--shadow);transform:translateY(-3px)}
.vendor-card .lg{width:56px;height:56px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px}
.vendor-card .n{font-size:15px;font-weight:700;color:var(--ink)}
.vendor-card .m{font-size:12px;color:var(--faint);margin-top:5px}

/* ---------- 分类页头部 ---------- */
.cat-hero{position:relative;border-radius:var(--radius-l);padding:44px 40px;color:#fff;margin:26px 0 30px;overflow:hidden}
.cat-hero .bg{position:absolute;inset:0;background:linear-gradient(120deg,#0A1512,#134A3E)}
.cat-hero .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 78% 40%,rgba(0,221,178,.35),transparent 65%)}
.cat-hero .in{position:relative}
.cat-hero h1{font-size:32px;font-weight:800;letter-spacing:-.5px}
.cat-hero .desc{margin-top:10px;font-size:14px;color:rgba(255,255,255,.7);max-width:620px;line-height:1.8}
.cat-hero .stat{margin-top:18px;display:flex;gap:28px;font-size:13px;color:rgba(255,255,255,.6)}
.cat-hero .stat b{color:#fff;font-size:17px;font-weight:800;margin-right:4px}
.sub-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative}
.sub-cats a{padding:7px 16px;border-radius:999px;font-size:13px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.14);transition:.2s}
.sub-cats a:hover{background:rgba(255,255,255,.2)}
.sub-cats a.on{background:var(--brand);border-color:var(--brand);color:#08322A;font-weight:700}

/* ---------- 标签云 ---------- */
.tag-hero{display:flex;gap:22px;align-items:center;border:1px solid var(--line);border-radius:var(--radius-l);padding:28px 32px;background:var(--surface-grad);margin:26px 0 30px}
.tag-hero .big{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
/* 语义化改造：主标题由 div 改为 h1（补齐缺失的页面 h1、修正标题层级跳级）。
   浏览器给 h1 的默认 margin 会撑开 hero 布局，这里归零，保持原有视觉。 */
h1.big,h1.name{margin:0;font:inherit}
h1.big{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
h1.name{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.tag-hero .big::before{content:"#";color:var(--brand)}
.tag-hero .cnt{font-size:13px;color:var(--muted);margin-top:6px}
.cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cloud a{border-radius:999px;border:1px solid var(--line);padding:8px 16px;font-size:13.5px;color:var(--muted);background:var(--card);transition:.2s}
.cloud a:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.cloud a.s1{font-size:12.5px;opacity:.75}
.cloud a.s3{font-size:16px;font-weight:700;color:var(--brand-deep);border-color:rgba(0,195,154,.3)}
.cloud a.s2{font-size:14px}

/* ---------- 单页 ---------- */
.page-wrap{max-width:900px;margin:0 auto;padding:34px 0 60px}
.page-wrap h1{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.6px}
.page-wrap .sub{color:var(--faint);font-size:13px;margin-top:8px}
/* ---------- 收空 / 列表 ---------- */
.fav-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.fav-empty .ic{font-size:46px;opacity:.5}
.fav-empty h3{margin:14px 0 6px;color:var(--ink)}
.fav-empty .btn{margin-top:18px}
.fav-list{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.fav-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s}
.fav-item:hover{border-color:rgba(0,195,154,.45);box-shadow:var(--shadow-s)}
.fav-type{flex-shrink:0;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep)}
.fav-type-plan{background:#E6F0FF;color:#1D4ED8}
.fav-type-vendor{background:#FEF3E2;color:#B45309}
.fav-title{flex:1;color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-title:hover{color:var(--brand-deep)}
.fav-extra{flex-shrink:0;color:var(--muted);font-size:13px}
.fav-remove{flex-shrink:0;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12.5px;padding:5px 12px;border-radius:8px;cursor:pointer;transition:.18s}
.fav-remove:hover{border-color:#FCA5A5;color:#DC2626}
.page-body{margin-top:26px;font-size:15.5px;line-height:1.95;color:var(--text)}
.page-body h2{font-size:21px;font-weight:800;color:var(--ink);margin:32px 0 14px;padding-left:13px;border-left:4px solid var(--brand)}
.page-body p{margin-bottom:15px}
.page-body ul{margin:0 0 15px 22px}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.contact-item{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg-soft)}
.contact-item .k{font-size:12px;color:var(--faint)}
.contact-item .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:5px}

/* ---------- 广告卡（列表内穿插） ---------- */
.ad-inline{display:flex;gap:20px;padding:22px;border-radius:var(--radius);border:1px dashed rgba(0,195,154,.4);background:var(--surface-grad);margin-bottom:16px;align-items:center}
.ad-inline .t{font-size:11px;letter-spacing:1.5px;color:var(--faint);font-weight:700;margin-bottom:6px}
.ad-inline .pic{flex:1;height:88px;border-radius:12px;background:linear-gradient(100deg,#0B2B24,#0F4A3C);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;letter-spacing:1px}
.ad-inline .btn{flex-shrink:0}
@media(max-width:1024px){
  .vendor-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .vendor-hero{flex-direction:column}
}
.feature-zone{position:relative;background:var(--feature-grad);border-radius:var(--radius-l);padding:56px 48px;margin:20px 0 72px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.feature-card{background:var(--card);border:1px solid rgba(0,195,154,.14);border-radius:var(--radius);padding:24px;transition:.22s}
.feature-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.feature-icon{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px}
.feature-card h5{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.feature-card p{font-size:13px;color:var(--muted);line-height:1.7}

/* ---------- 页脚 ---------- */
.footer{background:#0A1512;color:#fff;margin-top:40px}
.footer-inner{max-width:1200px;margin:0 auto;padding:56px 32px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer .logo{color:#fff}
.footer .desc{margin-top:14px;font-size:13px;color:rgba(255,255,255,.55);max-width:300px;line-height:1.8}
.footer h6{font-size:13px;color:rgba(255,255,255,.9);margin-bottom:16px;font-weight:600}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer li a{font-size:13px;color:rgba(255,255,255,.5);display:inline-block;padding:5px 0;min-height:28px}
.footer li a:hover{color:var(--brand)}
.footer-bottom{max-width:1200px;margin:0 auto;padding:28px 32px;border-top:1px solid rgba(255,255,255,.08);margin-top:44px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.35)}

/* ============================================================
   文章详情页
   ============================================================ */
.crumbs{padding:26px 0 0;font-size:13px;color:var(--faint)}
/* 面包屑链接实测仅 26×17px（13px 字号 + 无内边距）——补足点击区 */
.crumbs a{display:inline-block;padding:6px 2px;min-height:28px}
.crumbs a:hover{color:var(--brand-deep)}
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:20px 0 60px}

/* ---------- 阅读工具栏：字号调节 + 专注模式 ---------- */
.read-bar{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.read-seg{display:inline-flex;align-items:center;gap:2px;background:var(--bg-mute);border-radius:var(--radius-full);padding:3px}
.read-seg-lbl{font-size:12px;color:var(--muted);padding:0 8px 0 6px;font-weight:600}
.read-seg button{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:5px 13px;border-radius:var(--radius-full);cursor:pointer;transition:background var(--t),color var(--t);min-height:32px;min-width:32px}
.read-seg button:hover{color:var(--ink)}
.read-seg button[aria-pressed="true"]{background:var(--card);color:var(--brand-deep);box-shadow:var(--shadow-xs)}
.read-focus-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px;font-weight:600;padding:6px 14px;border-radius:var(--radius-full);cursor:pointer;transition:border-color var(--t),color var(--t),background var(--t)}
.read-focus-btn .ic{font-size:14px}
.read-focus-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.read-focus-btn[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-deep)}

/* ---------- 正文字号四档（data-fs 由 head 内联脚本首帧落好） ---------- */
.article-body{font-size:15.5px}
html[data-fs="1"] .article-body{font-size:14px}
html[data-fs="3"] .article-body{font-size:17.5px}
html[data-fs="4"] .article-body{font-size:19.5px}
/* 代码块不随正文放大（否则横向滚动灾难），目录与元信息保持原级 */
html[data-fs="3"] .article-body pre,html[data-fs="4"] .article-body pre{font-size:13px}
html[data-fs="3"] .article-body blockquote,html[data-fs="4"] .article-body blockquote{font-size:14.5px}

/* ---------- 专注模式：只留正文 ---------- */
html[data-focus="1"] .nav,
html[data-focus="1"] .footer,
html[data-focus="1"] .article-wrap>aside,
html[data-focus="1"] .notice-bar,
html[data-focus="1"] .to-top{display:none !important}
html[data-focus="1"] .article-wrap{grid-template-columns:minmax(0,720px);justify-content:center;padding-top:8px}
html[data-focus="1"] .read-bar{position:sticky;top:0;z-index:50;border-radius:0 0 var(--radius) var(--radius);margin:0 -14px 16px;width:calc(100% + 28px);box-shadow:var(--shadow-s)}
html[data-focus="1"] .related,html[data-focus="1"] .comments,html[data-focus="1"] .post-nav{display:none}
html[data-focus="1"] .read-progress{z-index:60}
.article h1{font-size:32px;line-height:1.35;letter-spacing:-.5px;color:var(--ink);font-weight:800}
.article .meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:13px;color:var(--faint)}
.article .meta .cat{color:var(--brand-deep);font-weight:600;background:var(--brand-soft);padding:4px 12px;border-radius:999px}
.article .lead{margin-top:22px;padding:16px 20px;background:var(--brand-soft-2);border-left:3px solid var(--brand);border-radius:0 12px 12px 0;color:var(--muted);font-size:14.5px}
.article-body{margin-top:26px;font-size:15.5px;line-height:1.95;color:var(--text)}
.article-body h2{font-size:23px;font-weight:800;color:var(--ink);margin:38px 0 16px;padding-left:14px;border-left:4px solid var(--brand);letter-spacing:-.3px}
.article-body h3{font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 12px}
.article-body p{margin-bottom:16px}
.article-body ul{margin:0 0 16px 22px}
.article-body li{margin-bottom:6px}
.article-body blockquote{margin:20px 0;padding:14px 20px;background:var(--bg-soft);border-radius:12px;color:var(--muted);font-size:14px}
.article-body code{background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:13px;font-family:Consolas,Menlo,monospace;color:var(--brand-deep)}
.article-body pre{background:#0A1512;color:#D7E7E1;border-radius:14px;padding:20px 22px;overflow:auto;margin:20px 0;font-size:13px;line-height:1.8;font-family:Consolas,Menlo,monospace}
.article-body pre code{background:none;border:none;color:inherit;padding:0}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.spec-table th{background:var(--brand-soft-2);color:var(--ink);font-weight:700}
.spec-table th,.spec-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--line)}
.spec-table tr:last-child td{border-bottom:none}
.spec-table tr:hover td{background:var(--brand-soft-2)}
.ai-summary{margin:26px 0;border:1px solid rgba(0,195,154,.3);background:var(--surface-grad);border-radius:var(--radius);padding:20px 22px}
.ai-summary .t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brand-deep);letter-spacing:.5px}
.ai-summary .t .badge{font-size:10px;background:var(--brand);color:#fff;border-radius:5px;padding:2px 7px;letter-spacing:1px}
.ai-summary p{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.8}
.article-footer{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.article-tags{display:flex;gap:8px;flex-wrap:wrap}

/* TOC */
.toc{position:sticky;top:96px;align-self:start;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.toc .t{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;gap:8px;align-items:center}
.toc .t::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--brand)}
.toc ul{list-style:none}
.toc li{margin:2px 0}
.toc a{display:block;font-size:13px;color:var(--muted);padding:6px 10px;border-radius:8px;line-height:1.5}
.toc a:hover{background:var(--brand-soft);color:var(--brand-deep)}
.toc a.lv2{padding-left:24px}
.related{margin-top:44px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.related-card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:.2s;background:var(--card)}
.related-card:hover{border-color:rgba(0,195,154,.4);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.related-card .k{font-size:11.5px;color:var(--brand-deep);font-weight:700;letter-spacing:1px}
.related-card .t{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.55}
.related-card .d{margin-top:8px;font-size:12px;color:var(--faint)}

/* 评论 */
.comments{margin-top:40px}
.comment-box{border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;gap:14px;margin-top:16px}
.comment-box .avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.comment-box .name{font-size:13.5px;font-weight:700;color:var(--ink)}
.comment-box .time{font-size:11.5px;color:var(--faint);margin-left:8px}
.comment-box .txt{margin-top:6px;font-size:14px;color:var(--text)}
.comment-input{display:flex;gap:12px;margin-top:18px}
.comment-input textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:14px;resize:vertical;min-height:76px;outline:none;transition:.2s}
.comment-input textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,195,154,.12)}

/* ============================================================
   GEO 模块：直接回答块 / 问答块（GEO 优化专用）
   ============================================================ */
.geo-lead{display:inline-block;margin-top:12px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#EAFBF5;font-size:13.5px;line-height:1.7;max-width:760px}
.tag-hero .geo-lead,.page-wrap .geo-lead{background:var(--brand-soft);border-color:rgba(0,195,154,.28);color:var(--brand-deep)}
.geo-block{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);background:var(--card);padding:18px 22px;margin-bottom:18px}
.geo-q{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.geo-a{font-size:14px;color:var(--text);line-height:1.85}
.geo-faq{margin-top:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.geo-faq h2{margin:0;padding:18px 22px 14px;font-size:16px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.geo-faq .qa{border-bottom:1px solid var(--line)}
.geo-faq .qa:last-child{border-bottom:none}
.geo-faq .qa summary{cursor:pointer;padding:14px 22px;font-size:14.5px;font-weight:600;color:var(--ink);list-style:none;display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.geo-faq .qa summary::-webkit-details-marker{display:none}
.geo-faq .qa summary::before{content:"Q";flex-shrink:0;width:20px;height:20px;border-radius:6px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.geo-faq .qa summary:hover{background:var(--brand-soft-2)}
.geo-faq .qa .ans{padding:0 22px 16px 52px;font-size:14px;color:var(--muted);line-height:1.85}
.geo-faq .qa[open] summary{color:var(--brand-deep)}

/* 优缺点双栏 */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.pros-cons .box{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;background:var(--card)}
.pros-cons .box h4{font-size:13.5px;font-weight:700;margin-bottom:10px;display:flex;gap:7px;align-items:center}
.pros-cons .box ul{list-style:none;font-size:13.5px;color:var(--text);line-height:2}
.pros-cons .box li{padding-left:16px;position:relative}
.pros-cons .box li::before{position:absolute;left:0;font-weight:700}
.pros-cons .box.good h4{color:#067A52}
.pros-cons .box.good li::before{content:"✓";color:#0E9F6E}
.pros-cons .box.bad h4{color:#C2410C}
.pros-cons .box.bad li::before{content:"!";color:#C2410C}
@media(max-width:768px){.pros-cons{grid-template-columns:1fr}}

/* 对比表容器 */
.compare-wrap{overflow-x:auto;margin-top:6px;border:1px solid var(--line);border-radius:var(--radius)}
.compare-wrap .spec-table{margin:0;border-radius:0;box-shadow:none}
.compare-wrap .spec-table td:first-child,.compare-wrap .spec-table th:first-child{text-align:left;font-weight:600;color:var(--ink)}

/* 更新时间徽标 */
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.fresh .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* ============================================================
   后台 admin
   ============================================================ */
body.admin{background:var(--bg-soft)}
.admin-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.admin-nav{background:var(--card);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.admin-nav .logo{padding:6px 10px 18px}
.admin-group{font-size:11px;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase;padding:16px 12px 6px;font-weight:700}
.admin-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:14px;color:var(--muted);transition:.18s}
.admin-nav a .ic{width:20px;text-align:center;font-size:15px}
.admin-nav a:hover{background:var(--bg-soft);color:var(--ink)}
.admin-nav a.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.admin-nav a .badge-n{margin-left:auto;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px}

/* ===== 后台二级菜单（按运营动作链组织，2026-10-16）===== */
.admin-nav a.nav-parent .caret{margin-left:auto;font-size:16px;line-height:1;color:var(--faint);transition:transform .18s}
.admin-nav a.nav-parent.on .caret{transform:rotate(90deg)}
.admin-nav .nav-sub{display:none;padding:2px 0 4px 43px;margin:-2px 0 2px}
.admin-nav .nav-sub.open{display:block}
.admin-nav .nav-sub a{display:block;padding:7px 12px;font-size:13.5px;color:var(--faint);border-radius:9px;position:relative}
.admin-nav .nav-sub a::before{content:"";position:absolute;left:-14px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--line);transform:translateY(-50%)}
.admin-nav .nav-sub a:hover{background:var(--bg-soft);color:var(--ink)}
.admin-nav .nav-sub a.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.admin-nav .nav-sub a.on::before{background:var(--brand)}

/* 窄屏下后台侧栏变成顶部横向条（≤960px 见下），二级菜单的缩进树形
   在一行内会错位。改为「整组横排 + 分隔线」，子项降级为同级胶囊。 */
@media(max-width:1024px){
  .admin-nav .nav-sub{
    display:none;
    padding:0;margin:0;
    width:100%;
    flex-wrap:wrap;gap:4px;
    padding-bottom:4px;
  }
  .admin-nav .nav-sub.open{display:flex}
  .admin-nav .nav-sub a{
    padding:5px 10px;font-size:12.5px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--bg-soft);
  }
  /* 树形圆点与缩进在横排下无意义 */
  .admin-nav .nav-sub a::before{display:none}
  .admin-nav a.nav-parent .caret{display:none}
}
.admin-main{padding:26px 34px;max-width:1200px}
.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.admin-top h1{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.admin-top .sub{font-size:13px;color:var(--faint);margin-top:4px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.stat-card .k{font-size:12.5px;color:var(--faint)}
.stat-card .v{font-size:26px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.5px}
.stat-card .delta{font-size:12px;color:var(--brand-deep);font-weight:600;margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px 28px;margin-bottom:24px}
.panel h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.panel h3::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--brand)}
/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:12px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--bg-soft)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 11px}
.status::before{content:"";width:6px;height:6px;border-radius:50%}
.st-pub{background:var(--brand-soft);color:var(--brand-deep)}.st-pub::before{background:var(--brand)}
.st-draft{background:#F3F4F6;color:#6B7280}.st-draft::before{background:#9CA3AF}
.st-sched{background:#FEF3C7;color:#B45309}.st-sched::before{background:#F59E0B}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.mini-btn{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.18s;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;min-height:32px}
.mini-btn:hover{border-color:var(--brand);color:var(--brand-deep)}
.mini-btn.danger:hover{border-color:#FCA5A5;color:#DC2626}
/* ---------- 收藏按钮（文章 / 商家 / 套餐通用） ---------- */
.fav-btn{display:inline-flex;align-items:center;gap:5px}
.fav-btn .ic{font-size:14px;line-height:1;transition:transform .18s;color:currentColor}
.fav-btn[aria-pressed="true"],.fav-btn.on{color:var(--brand-deep);border-color:var(--brand);background:var(--brand-soft)}
.fav-btn[aria-pressed="true"] .ic{transform:scale(1.12)}
/* 表单 */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label .hint{font-weight:400;color:var(--faint);font-size:12px;margin-left:6px}
/* 除勾选/单选/文件/颜色外，所有 input 类型统一外观
   （旧写法只枚举 text + url，导致 password/number/date/datetime-local
     全部退化成浏览器默认控件 —— 密码框实测 173×19、0 圆角、2px inset、Arial 13.3px） */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
.field select,.field textarea{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:11px 14px;
  font:inherit;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--card);
  outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
  -webkit-appearance:none;
  appearance:none;
}
/* 数字框去掉上下箭头（否则与文本框视觉不齐） */
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]{-webkit-appearance:textfield}
/* 日期/时间：让原生指示器在深色下可见，并保留可点击区域 */
.field input[type=date],.field input[type=datetime-local],.field input[type=time]{
  min-height:42px;
  cursor:pointer;
}
.field input[type=date]::-webkit-calendar-picker-indicator,
.field input[type=datetime-local]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--t);
  filter:var(--date-icon-filter,none);
}
.field input[type=date]::-webkit-calendar-picker-indicator:hover,
.field input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1}
[data-theme="dark"] .field input[type=date],
[data-theme="dark"] .field input[type=datetime-local],
[data-theme="dark"] .field input[type=time]{
  --date-icon-filter:invert(1) brightness(1.4);
}
/* 搜索框内的输入不重复描边 */
.search-pill input:not([type=checkbox]){
  border:none!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
}
/* 密码框：去掉浏览器的"密码管理器"图标位，保持左右对称 */
.field input[type=password]{letter-spacing:.4px}
.field input[type=password]::-ms-reveal,
.field input[type=password]::-ms-clear{display:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,195,154,.12)}
.field textarea{resize:vertical;min-height:80px}
.slug-box{display:flex;gap:10px;align-items:center}
.slug-box .prefix{font-size:13px;color:var(--faint);background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:11px 14px;white-space:nowrap}
.check-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:4px}
.check-row label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);font-weight:500;margin:0}
.check-row input{accent-color:var(--brand);width:16px;height:16px}
/* 编辑器 */
.editor-toolbar{display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0;background:var(--bg-soft);padding:8px 10px}
.ed-btn{border:none;background:transparent;border-radius:8px;width:32px;height:30px;font-size:13.5px;color:var(--muted);cursor:pointer;transition:.15s;font-family:inherit}
.ed-btn:hover{background:var(--card);color:var(--brand-deep);box-shadow:var(--shadow-s)}
.ed-sep{width:1px;background:var(--line);margin:4px 6px}
.editor-area{border:1px solid var(--line);border-radius:0 0 14px 14px;min-height:340px;padding:22px 24px;font-size:15px;line-height:1.9;outline:none}
.editor-area:focus{border-color:var(--brand)}
.editor-area h2{font-size:21px;margin:18px 0 10px;color:var(--ink)}
.editor-area p{margin-bottom:12px}
.editor-area blockquote{border-left:3px solid var(--brand);padding-left:14px;color:var(--muted);margin:12px 0}
/* Tabs */
.vtabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:22px}
.vtab{border:none;background:none;padding:11px 18px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:.18s;font-weight:500}
.vtab:hover{color:var(--ink)}
.vtab.on{color:var(--brand-deep);border-bottom-color:var(--brand);font-weight:700}
.vpane{display:none}
.vpane.on{display:block}
/* SERP 预览 */
.serp{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--card);margin-top:8px}
.serp .url{font-size:12.5px;color:#202124}
.serp .url .crumb{color:#4D5156}
.serp .title{color:#1A0DAB;font-size:19px;margin:4px 0;line-height:1.4;cursor:pointer}
.serp .title:hover{text-decoration:underline}
.serp .desc{color:#4D5156;font-size:13px;line-height:1.65}
.score-row{display:flex;gap:14px;margin-bottom:18px}
.score{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.score .ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.r-good{background:conic-gradient(var(--brand) 0 88%,#E5F2EE 88% 100%);position:relative}
.r-good::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.r-good span{position:relative;z-index:1;color:var(--brand-deep)}
.r-mid{background:conic-gradient(#F59E0B 0 72%,#FEF3C7 72% 100%);position:relative}
.r-mid::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.r-mid span{position:relative;z-index:1;color:#B45309}
.score .k{font-size:12px;color:var(--faint)}
.score .v{font-size:13.5px;font-weight:700;color:var(--ink)}
/* 发布条 */
.publish-bar{position:sticky;bottom:0;background:var(--nav-bg-strong);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.publish-bar .grow{flex:1}
.switch{position:relative;width:40px;height:22px;background:#D5DEDB;border-radius:999px;cursor:pointer;transition:.2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.switch.on{background:var(--brand)}
.switch.on::after{left:20px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1024px){
  .layout{grid-template-columns:1fr}
  .article-wrap{grid-template-columns:1fr}
  .toc{position:static}
  .feature-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .admin-shell{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .nav-menu{display:none}
}

/* ============================================================
   通用工具类与新增组件（视图内的内联样式已全部抽离到此处）
   ============================================================ */
.muted{color:var(--faint)}
.mt-20{margin-top:20px}
.center{justify-content:center}
mark{background:#FEF3C7;color:var(--ink);border-radius:3px;padding:0 2px}

/* 全局提示条 */
.alert{border-radius:var(--radius);padding:13px 18px;font-size:13.5px;margin-bottom:20px;border:1px solid}
.alert.ok{background:var(--brand-soft);border-color:rgba(0,195,154,.32);color:var(--brand-deep)}
.alert.err{background:#FEF2F2;border-color:#FCA5A5;color:#B91C1C}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.alert code{background:rgba(127,127,127,.14);border-radius:4px;padding:1px 5px;font-size:12px}

/* 空态 */
.empty-state{border:1px dashed var(--line);border-radius:var(--radius-l);padding:44px 24px;text-align:center;background:var(--card)}
.empty-state .ic{font-size:34px;margin-bottom:10px}
.empty-state h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.empty-state p{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.empty-state .tags-cloud{margin-bottom:18px}

/* 404 */
.notfound{text-align:center;padding:64px 0 40px}
.notfound .code{font-size:74px;font-weight:800;color:var(--line);letter-spacing:-3px;line-height:1}
.notfound h1{font-size:24px;font-weight:800;color:var(--ink);margin-top:10px}
.notfound .path{margin-top:10px;font-size:13px;color:var(--faint);word-break:break-all}
.notfound .ops{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 页面标题（搜索 / 归档等） */
.page-head{padding-top:30px}
.page-head h1{font-size:26px;font-weight:800;color:var(--ink);margin-top:8px;letter-spacing:-.4px}

/* ---------- 套餐·优惠 枢纽标签（菜单整合） ---------- */
.hub-tabs{display:flex;gap:8px;margin:18px 0 0;flex-wrap:wrap}
.hub-tabs a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:600;font-size:14px;transition:border-color var(--t),color var(--t),background var(--t)}
.hub-tabs a:hover{border-color:var(--brand);color:var(--brand-deep)}
/* 激活态：亮品牌色做底 + 深墨做字。
   原为 color:#fff 配 --brand(#00C39A)，实测仅 2.26:1（深色模式更差，1.76:1），
   远低于 WCAG AA 的 4.5:1。改用 --brand-deep 级深色文字后为 8.21:1。
   深色模式下 --brand 会切到更亮的 --brand-400，同一策略依然成立。 */
.hub-tabs a.on{background:var(--brand);border-color:var(--brand);color:#04342C;font-weight:700}
.search-wrap{max-width:820px;margin:20px auto 0}
.search-wrap + .search-wrap{margin-top:24px;margin-bottom:60px}
.search-pill-lg{width:100%;border-radius:14px;padding:10px 16px}
.search-pill-lg input{flex:1}

/* 上一篇 / 下一篇 */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.post-nav .pn{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--card);transition:.2s}
.post-nav .pn:hover{border-color:rgba(0,195,154,.4);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.post-nav .pn.next{text-align:right}
.post-nav .pn .k{font-size:11.5px;color:var(--brand-deep);font-weight:700;letter-spacing:.5px}
.post-nav .pn .t{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.55}
.post-nav .pn.empty{border:none;background:none}
@media(max-width:768px){.post-nav{grid-template-columns:1fr}}

/* 阅读进度条 */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#00DDB2,#00997E);z-index:999;transition:width .1s linear}

/* 评论 */
.comment-box .c-body{flex:1;min-width:0}
.comment-box .reply{margin-top:10px;background:var(--bg-soft);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--text)}
.comment-box .reply .tag-pill{margin-right:8px}
.comment-meta{text-align:right;font-size:12px;color:var(--faint);margin-top:8px}
.comment-meta .counter.over{color:#DC2626}
.comment-input{flex-wrap:wrap}
.input-mini{width:120px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;font:inherit;font-size:14px}
.input-mini:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,195,154,.12)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* 文章页辅助 */
.meta-end{margin-left:auto}
.article-ops{display:flex;gap:10px}
.lg-a{background:linear-gradient(135deg,#00C39A,#0E8FA0)}

/* 键值列表 */
.kv{font-size:13px;line-height:1.6}
.kv > div{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv > div:last-child{border-bottom:none}
.kv .k{color:var(--faint);flex-shrink:0;width:44px}
.kv .v{color:var(--text)}
.kv a{color:var(--brand-deep);font-weight:600}

/* 作者头像 */
.author-avatar{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}

/* HTML 站点地图 */
.sitemap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
@media(max-width:768px){.sitemap-grid{grid-template-columns:1fr}}
.sitemap-block{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:20px 22px;margin-top:18px}
.sitemap-grid .sitemap-block{margin-top:0}
.sitemap-block h2{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.sitemap-block h2 a{color:var(--ink)}
.sitemap-block h2 a:hover{color:var(--brand-deep)}
.sitemap-block .cnt{font-size:11.5px;font-weight:600;color:var(--faint);background:var(--bg-soft);border-radius:999px;padding:2px 9px}
.sitemap-block p{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.7}
.sitemap-sub{list-style:none;font-size:13.5px}
.sitemap-sub li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.sitemap-sub li:last-child{border-bottom:none}
.sitemap-sub a{color:var(--text)}
.sitemap-sub a:hover{color:var(--brand-deep)}
.sitemap-sub .cnt{font-size:11.5px;color:var(--faint);flex-shrink:0}
.sitemap-inline{display:flex;flex-wrap:wrap;gap:4px 18px}
.sitemap-inline li{border-bottom:none;justify-content:flex-start}

/* 后台：补充组件 */
.admin-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 12px 4px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.admin-user .avatar{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.badge-dot{margin-left:auto;background:#E0654B;color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;line-height:1.6}
.admin-top.sub-bar{margin-top:-14px;margin-bottom:20px}
.admin-top .btn.danger{border-color:#FCA5A5;color:#DC2626}
.inline-check{display:flex;align-items:center;gap:8px;font-weight:500;margin:0;cursor:pointer}
.inline-check input{accent-color:var(--brand);width:16px;height:16px}
.hint{font-size:12px;color:#93A1A9;margin-top:8px;line-height:1.7}
.hint code{background:var(--bg-soft);border-radius:4px;padding:1px 5px;font-size:11.5px}
.empty{padding:26px;text-align:center;color:var(--faint);font-size:13.5px}
.confirm-box{display:flex;gap:16px;align-items:flex-start}
.confirm-box .ic{font-size:26px;line-height:1}
.confirm-box p{font-size:14px;color:var(--text);margin-bottom:6px}
.confirm-box p.muted{font-size:13px}

/* 后台评论管理 */
.comment-row{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;background:var(--card)}
.comment-row .head{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.comment-row .head .muted{font-size:12px}
.comment-row .head .grow{flex:1}
.comment-row .body{margin-top:10px;padding-left:2px}
.comment-row .on-post{font-size:12px;color:var(--faint);margin-bottom:6px}
.comment-row .txt{font-size:14px;color:var(--text);line-height:1.8}
.comment-row .reply{margin-top:10px;background:var(--bg-soft);border-radius:12px;padding:10px 14px;font-size:13.5px}
.comment-row .reply .muted{margin-left:8px;font-size:11.5px}
.comment-row .ops{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px dashed var(--line);padding-top:12px}
.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.reply-form input{width:220px;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;outline:none}
.reply-form input:focus{border-color:var(--brand)}
.logo-row{display:flex}

/* 后台登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);padding:20px}
.login-card{width:390px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 34px;box-shadow:var(--shadow)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.login-brand .name{font-size:17px;font-weight:800;color:var(--ink)}
.login-brand .sub{font-size:12px;color:var(--faint)}
.login-hint{margin-top:14px;font-size:12px;color:var(--faint);text-align:center}
/* 「← 返回前台」实测仅 62×16px，移动端难点 —— 补足点击区 */
.login-hint a{color:var(--brand-deep);display:inline-block;padding:8px 10px;min-height:32px}
.btn-block{width:100%;justify-content:center}
/* 后台：SEO 自检 + 仪表盘统计卡 */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:8px}
.stat-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat-box .n{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.stat-box .l{font-size:12px;color:var(--faint);margin-top:3px}
.stat-box.warn{background:#FEF7EC;border-color:#FBD9A5}
.stat-box.warn .n{color:#B45309}
.slug-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slug-box input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font:inherit;font-size:14px;outline:none}
.slug-box input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,195,154,.12)}
.slug-box .arrow{color:var(--faint)}
.endpoint-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.endpoint{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:.2s;background:var(--card)}
.endpoint:hover{border-color:rgba(0,195,154,.45);background:var(--brand-soft)}
.endpoint code{font-size:12.5px;color:var(--brand-deep);font-family:Consolas,Menlo,monospace;font-weight:600}
.endpoint span{font-size:12px;color:var(--muted)}
/* 后台仪表盘：两栏 + 排行榜 */
.dashboard-2col{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media(max-width:1024px){.dashboard-2col{grid-template-columns:1fr}}
.dashboard-2col > div > .panel:last-child{margin-bottom:24px}
.ta-r{text-align:right}
.path-hint{font-size:12px;color:#93A1A9;word-break:break-all}
.rank-list{list-style:none;font-size:13.5px}
.rank-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.rank-list li:last-child{border-bottom:none}
.rank-list .no{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:var(--bg-soft);color:var(--faint);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rank-list .no.top{background:var(--brand);color:#fff}
.rank-list a{flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list a:hover{color:var(--brand-deep)}
.rank-list .n{flex-shrink:0;font-size:12px;color:var(--faint)}
.alert a{color:inherit;text-decoration:underline;font-weight:600}
/* ============================================================
   组件细化：把视图里的内联样式全部收敛到语义类
   ============================================================ */

/* 通用工具 */
.flex-1{flex:1}
.shrink-0{flex-shrink:0}
.text-center{text-align:center}
.text-right{text-align:right}
.mt-10{margin-top:10px}
.mt-24{margin-top:24px}
.mt-36{margin-top:36px}
.amber{color:var(--warn)}
.note{margin-top:12px;font-size:12.5px;color:var(--faint);line-height:1.7}
.link-strong{color:var(--brand-deep);font-weight:600;display:inline-block;padding:5px 0;min-height:32px}
.code-pill{background:var(--brand-soft);color:var(--brand-deep);border-radius:5px;padding:2px 6px;font-family:Consolas,Menlo,monospace;font-size:12.5px}

/* 面板内二级标题（与 h3 视觉一致） */
.panel > h2{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.panel > h2::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--brand);display:inline-block}

/* 商家 logo 默认渐变 */
.vendor-logo{background:linear-gradient(135deg,#2563EB,#1E40AF)}
.vendor-card .lg{background:linear-gradient(135deg,#007F63,#0A5A66)}
.side-vendor{display:block;text-align:center;margin-bottom:12px}

/* 商家 hero 内的深色底适配 */
.vendor-hero .geo-lead{background:rgba(0,195,154,.1);border-color:rgba(0,195,154,.3);color:var(--brand-deep);margin-top:12px}
.vendor-hero .fresh{margin-top:8px}

/* 商家卡片补充信息 */
.vendor-card .m-coupon{color:var(--brand-deep);font-weight:700;margin-top:6px}
.vendor-card .m-intro{margin-top:8px;line-height:1.6}
.vendor-card .badge-mini{font-size:10px;color:var(--warn)}

/* 标签 / 作者 hero 右侧统计块 */
.hero-side{text-align:center;flex-shrink:0}
.hero-num{font-size:40px;font-weight:800;color:var(--brand);letter-spacing:-1px;line-height:1.1}
.hero-num-lbl{font-size:12px;color:var(--faint)}
.hero-num-sub{font-size:11px;color:var(--faint);margin-top:6px}
.page-num{font-size:.5em;opacity:.6}

/* 列表标题右侧排序说明 */
.list-hint{font-size:13px;color:var(--faint)}
/* 深色 hero 内的 eyebrow 反色 */
.cat-hero .eyebrow{color:#7CF5D4}
.cat-hero .eyebrow .cn{color:rgba(255,255,255,.55)}
/* 间距与按钮补充 */
.mt-16{margin-top:16px}
.mt-30{margin-top:30px}
.mb-18{margin-bottom:18px}
.sub-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
.ops-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.form-row{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.btn-danger{background:#E0654B;border-color:#E0654B;color:#fff}
.btn-danger:hover{background:#C9503A;border-color:#C9503A;color:#fff}
.post-nav .pn.prev{text-align:left}

/* 友情链接 */
.link-group{margin-top:30px}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.link-card{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--card);transition:.2s}
.link-card:hover{border-color:rgba(0,195,154,.45);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.link-logo{width:40px;height:40px;border-radius:11px;flex-shrink:0;object-fit:cover}
.link-logo-text{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00C39A,#0E8FA0);color:#fff;font-size:14px;font-weight:800}
.link-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.link-name{font-size:14px;font-weight:700;color:var(--ink)}
.link-desc{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 后台批量操作条 */
.batch-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.batch-bar .grow{flex:1}
.batch-bar select.input-mini{width:auto;min-width:120px;padding:8px 11px;font-size:13px;border-radius:9px}
.batch-count{font-size:12.5px;color:var(--faint)}
.batch-count.on{color:var(--brand-deep);font-weight:700}
.col-check{width:38px;text-align:center}
.col-check input{accent-color:var(--brand);width:15px;height:15px}
.btn-line.danger{border-color:#FCA5A5;color:#DC2626}
.btn-line.danger:hover{background:#FEF2F2;border-color:#F87171}
/* TOC 滚动高亮 */
.toc a.active{background:var(--brand-soft);color:var(--brand-deep);font-weight:700}
.toc a.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:var(--brand)}
.toc a{position:relative}

/* 搜索建议下拉 */
.search-pill{position:relative}
.suggest-box{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:60;text-align:left}
.suggest-box a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--line)}
.suggest-box a:last-child{border-bottom:none}
.suggest-box a:hover{background:var(--brand-soft);color:var(--brand-deep)}
.suggest-box .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-box .k{flex-shrink:0;font-size:11px;color:var(--faint);background:var(--bg-soft);border-radius:5px;padding:1px 6px}
/* 后台媒体库 */
.media-up{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.media-up input[type=file]{flex:1;min-width:240px;border:1px dashed var(--line);border-radius:12px;padding:11px 14px;font-size:13px;background:var(--card)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.media-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.media-thumb{display:block;height:130px;background:var(--bg-soft);overflow:hidden}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-meta{padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.media-url{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11.5px;font-family:Consolas,Menlo,monospace;color:var(--muted);background:var(--bg-soft);outline:none}
.media-sub{font-size:11.5px;color:var(--faint)}
/* ============================================================
   视觉升级层 v2
   全部走语义令牌，天然支持深色模式；不覆盖原有选择器逻辑，
   只做精修与新增组件。
   ============================================================ */

/* ---------- 新增令牌：随主题切换的「表面渐变」等 ---------- */
:root{
  --surface-grad:linear-gradient(135deg,#F4FCF9,#fff);
  --feature-grad:linear-gradient(180deg,#F4FCF9,#EAF9F3);
  --btn-dark-bg:#0A1512;
  --btn-dark-bg-hover:#233832;
  --btn-dark-fg:#FFFFFF;
  --nav-bg:rgba(255,255,255,.86);
  --nav-bg-strong:rgba(255,255,255,.94);
  --code-bg:#F1F6F4;
  --track-bg:#E8F2EF;
  --hairline:rgba(10,40,32,.06);
}
[data-theme="dark"]{
  --surface-grad:linear-gradient(135deg,#13241F,#0E1915);
  --feature-grad:linear-gradient(180deg,#0F1C18,#0C1714);
  --btn-dark-bg:#16241F;
  --btn-dark-bg-hover:#22352E;
  --btn-dark-fg:#E8F2EE;
  --nav-bg:rgba(10,18,16,.82);
  --nav-bg-strong:rgba(10,18,16,.94);
  --code-bg:#182723;
  --track-bg:#1D2E29;
  --hairline:rgba(255,255,255,.06);
}

/* ---------- 全局精修 ---------- */
body{
  font-size:15px;
  line-height:1.78;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:var(--bg);
  color:var(--text);
}
::selection{background:rgba(0,195,154,.24);color:var(--ink)}
html{scroll-padding-top:96px}
h1,h2,h3,h4,h5,h6{text-wrap:balance}
p{text-wrap:pretty}

/* 可访问性：键盘焦点环（鼠标点击不显示） */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
/* 跳转到主内容（屏幕阅读器/键盘用户） */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-toast);
  background:var(--brand-700);color:#fff;padding:10px 18px;
  border-radius:0 0 var(--radius-s) 0;font-size:13.5px;font-weight:600;
}
.skip-link:focus{left:0}

/* 滚动条（Webkit） */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-full);border:3px solid var(--bg-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-400)}

/* ---------- 导航 ---------- */
.nav{
  background:var(--nav-bg);
  border-bottom:1px solid transparent;
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 var(--hairline),0 8px 24px rgba(10,40,32,.04);
}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.nav-menu a{
  position:relative;
  /* 触摸目标：垂直方向给足 32px（下划线仍在底部，视觉不变）。
     原 padding:6px 2px 让横向点击区只剩 2px，实测导航项仅 22×17px
     —— 全站 58 处不可舒适点击。 */
  padding:11px 2px;
  font-size:14.5px;
  color:var(--muted);
  transition:color var(--t);
}
.nav-menu a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  border-radius:2px;background:var(--brand);
  transition:left var(--t) var(--ease),right var(--t) var(--ease);
}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a:hover::after,.nav-menu a.on::after{left:0;right:0}
.nav-menu a.on{color:var(--brand-deep);font-weight:600}

/* 主题切换按钮 */
.theme-toggle{
  width:38px;height:38px;border-radius:var(--radius-full);
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;line-height:1;flex-shrink:0;
  transition:border-color var(--t),color var(--t),transform var(--t) var(--ease),background var(--t);
}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand-deep);transform:rotate(-12deg)}
.theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* ---------- 语言切换按钮（P2-4 中英界面） ---------- */
.lang-toggle{
  height:38px;min-width:46px;padding:0 10px;border-radius:var(--radius-full);
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;font-weight:600;line-height:1;flex-shrink:0;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.lang-toggle:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}

/* ---------- Hero：更细腻的光晕 + 网格底纹 ---------- */
.hero{padding:72px 0 48px}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
}
.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.12;letter-spacing:-1.4px}
.hero h1 .dim{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.85}
.hero-stats{gap:56px}
.hero-stats > div{position:relative}
.hero-stats > div + div::before{
  content:"";position:absolute;left:-28px;top:8px;bottom:8px;
  width:1px;background:var(--line);
}
.hero-stats .num{
  font-size:26px;letter-spacing:-.6px;
  background:linear-gradient(135deg,var(--ink),var(--brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 按钮 ---------- */
.btn{
  position:relative;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-brand{
  /* 深字配亮底：白字在亮薄荷上只有 3.16:1，深字可达 8:1，且与 .lv-info 的配色一致 */
  background:linear-gradient(135deg,var(--brand-400),var(--brand-500));
  color:#04302A;
  box-shadow:0 2px 8px rgba(0,195,154,.24);
}
.btn-brand:hover{
  /* hover 提亮而非加深，保证深字始终可读 */
  background:linear-gradient(135deg,var(--brand-300),var(--brand-400));
  box-shadow:var(--shadow-glow);
  transform:translateY(-1px);
}
.btn-line{background:var(--card);border-color:var(--line-strong)}
.btn-line:hover{background:var(--brand-soft-2);transform:translateY(-1px)}
.btn-ghost:hover{background:var(--brand-soft-2)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ---------- 文章卡片 ---------- */
.post-card{
  transition:border-color var(--t),box-shadow var(--t),transform var(--t) var(--ease);
  overflow:hidden;
}
.post-card:hover{
  border-color:rgba(0,195,154,.5);
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}
.post-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--t) var(--ease);
}
.post-card:hover::before{transform:scaleY(1)}
.post-thumb{box-shadow:inset 0 0 0 1px var(--hairline)}
.post-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.22));
  opacity:0;transition:opacity var(--t);
}
.post-card:hover .post-thumb::after{opacity:1}
.post-title{transition:color var(--t)}

/* ---------- 侧栏 ---------- */
/* 侧栏吸顶：加 max-height 保护，避免侧栏比视口还高时底部内容不可达 */
@media(min-width:1025px){
  .side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin}
}
@media(max-width:1024px){.side{position:static}}
.side-card{transition:border-color var(--t),box-shadow var(--t)}
.side-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.side-banner{position:relative;overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.side-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.side-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform .6s var(--ease);
}
.side-banner:hover::after{transform:translateX(110%)}

/* ---------- 胶囊 / 标签 ---------- */
.cat-tab,.tag-pill,.cloud a{
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast) var(--ease);
}
.cat-tab:hover,.tag-pill:hover,.cloud a:hover{transform:translateY(-1px)}
.cat-tab.on{background:var(--brand-700);border-color:var(--brand-700);color:#fff;box-shadow:0 4px 12px rgba(4,106,86,.28)}
[data-theme="dark"] .cat-tab.on{background:var(--brand-500);border-color:var(--brand-500);color:#05221B}

/* ---------- 表单 ---------- */
.field input,.field select,.field textarea,.input-mini{
  background:var(--card);color:var(--text);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus,.input-mini:focus{
  border-color:var(--brand);box-shadow:var(--ring);
}
.search-pill{
  background:var(--bg-soft);border:1px solid var(--line);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.search-pill:focus-within{background:var(--card);border-color:var(--brand);box-shadow:var(--ring)}
.search-pill input{background:transparent;color:var(--text)}

/* ---------- 表格 ---------- */
.table tbody tr,.table tr{transition:background var(--t-fast)}
.table tr:hover td{background:var(--brand-soft-2)}
.spec-table tr:hover td{background:var(--brand-soft-2)}

/* ---------- 分页 ---------- */
.pagination a,.pagination span.on{
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast) var(--ease);
}
.pagination a:hover{transform:translateY(-1px)}
.pagination span.on{box-shadow:0 4px 12px rgba(0,195,154,.26)}

/* ---------- 代码与引用 ---------- */
.article-body code{background:var(--code-bg);color:var(--brand-700)}
[data-theme="dark"] .article-body code{color:var(--brand-300)}
.article-body pre{background:#0A1512;color:#D7E7E1}
[data-theme="dark"] .article-body pre{background:#05100D;border:1px solid var(--line)}
.article-body blockquote{background:var(--bg-soft);border-left:3px solid var(--brand-300)}

/* ---------- 圆形评分环在深色下 ---------- */
[data-theme="dark"] .rate-item .bar{background:var(--track-bg)}

/* ---------- 页脚 ---------- */
/* 页脚保持深色底：文字是写死的白色系，不能跟随 --bg 翻转 */
.footer{background:#0A1512;border-top:1px solid rgba(255,255,255,.06)}
.footer h6{color:rgba(255,255,255,.9)}
.footer a{color:rgba(255,255,255,.5);transition:color var(--t)}
.footer a:hover{color:var(--brand-deep)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.58)}

/* ---------- 新增：回到顶部 ---------- */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:var(--z-sticky);
  width:44px;height:44px;border-radius:var(--radius-full);
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-s);font-size:17px;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t),visibility var(--t),transform var(--t) var(--ease),border-color var(--t),color var(--t);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{border-color:var(--brand);color:var(--brand-deep);transform:translateY(-3px)}

/* ---------- 新增：滚动入场动画 ---------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 新增：空态插画化 ---------- */
.empty-state{
  background:var(--surface-grad);
  border-style:dashed;border-color:var(--line-strong);
}
.empty-state .ic{
  width:56px;height:56px;margin:0 auto 14px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs);
}

/* ---------- 提示条 ---------- */
.alert{display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-xs)}

/* ---------- 深色模式局部修正 ---------- */
[data-theme="dark"] .post-thumb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
[data-theme="dark"] .logo-mark{box-shadow:0 4px 12px rgba(0,195,154,.22)}
[data-theme="dark"] .cat-hero,[data-theme="dark"] .ad-banner{border:1px solid var(--line)}
[data-theme="dark"] .admin-nav{border-right-color:var(--line)}

/* ---------- 打印 ---------- */
@media print{
  .nav,.footer,.side,.ad-banner,.ad-inline,.to-top,.notice-bar,.theme-toggle,.comments,.post-nav{display:none!important}
  body{background:#fff;color:#000}
  .article-wrap{grid-template-columns:1fr}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#666}
}
/* ============================================================
   入场动画（纯 CSS）
   用 animation-fill-mode:both，首帧即 opacity:0 —— 不依赖 JS，
   也不会出现「先显示再隐藏」的闪动。reduced-motion 已被上方规则统一关闭。
   ============================================================ */
@keyframes hfFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hfFadeIn{from{opacity:0}to{opacity:1}}

/* 首屏内容：轻微上浮 */
.hero-inner > *{animation:hfFadeUp .6s var(--ease) both}
.hero-inner > *:nth-child(1){animation-delay:.02s}
.hero-inner > *:nth-child(2){animation-delay:.08s}
.hero-inner > *:nth-child(3){animation-delay:.14s}
.hero-inner > *:nth-child(4){animation-delay:.2s}

/* 列表卡片：逐条错开，只作用于前 6 条，避免长列表过于花哨 */
.post-card{animation:hfFadeUp .5s var(--ease) both}
.post-card:nth-child(1){animation-delay:.02s}
.post-card:nth-child(2){animation-delay:.06s}
.post-card:nth-child(3){animation-delay:.1s}
.post-card:nth-child(4){animation-delay:.14s}
.post-card:nth-child(5){animation-delay:.18s}
.post-card:nth-child(6){animation-delay:.22s}
.post-card:nth-child(n+7){animation-delay:0s}

/* 侧栏 / 区块 */
.side-card,.feature-card,.sitemap-block,.stat-box{animation:hfFadeIn .6s var(--ease) both}
.side-card:nth-child(2){animation-delay:.06s}
.side-card:nth-child(3){animation-delay:.12s}
.side-card:nth-child(4){animation-delay:.18s}

/* 供应商卡片 */
.vendor-card,.link-card{animation:hfFadeUp .5s var(--ease) both}
.vendor-card:nth-child(2),.link-card:nth-child(2){animation-delay:.05s}
.vendor-card:nth-child(3),.link-card:nth-child(3){animation-delay:.1s}
.vendor-card:nth-child(4),.link-card:nth-child(4){animation-delay:.15s}

/* 后台主题按钮（与前台同款，尺寸略小） */
.theme-toggle.sm{width:32px;height:32px;font-size:14px}
.admin-top .row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-theme{align-self:flex-end;margin:10px 12px 0}

/* ============================================================
   深色模式 + 组件细节修正
   ============================================================ */

/* ---- BUG 修正：.geo-lead 基类为深色 hero 设计，浅色容器必须覆盖 ---- */
.page-head .geo-lead{
  background:var(--brand-soft);
  border-color:rgba(0,195,154,.28);
  color:var(--brand-deep);
}

/* ---- 深色模式：把「亮色块 + 深字」的状态标签改成半透明底 + 亮字 ---- */
[data-theme="dark"] .st-draft{background:rgba(148,163,184,.16);color:#A9B6C4}
[data-theme="dark"] .st-draft::before{background:#94A3B8}
[data-theme="dark"] .st-sched{background:rgba(245,158,11,.16);color:#F0B357}
[data-theme="dark"] .st-sched::before{background:#F0B357}
[data-theme="dark"] .st-pub{background:rgba(0,195,154,.16);color:var(--brand-300)}
[data-theme="dark"] .st-pub::before{background:var(--brand-400)}

[data-theme="dark"] .alert.err{background:var(--danger-bg);border-color:var(--danger-line);color:#F7A9A9}
[data-theme="dark"] .alert.ok{background:var(--brand-soft);border-color:rgba(0,195,154,.32);color:var(--brand-300)}
[data-theme="dark"] .alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

[data-theme="dark"] .stat-box.warn{background:var(--warn-bg);border-color:var(--warn-line)}
[data-theme="dark"] .stat-box.warn .n{color:var(--warn)}

[data-theme="dark"] .btn-danger{background:#B23A28;border-color:#B23A28}
[data-theme="dark"] .btn-danger:hover{background:#97301F;border-color:#97301F}
[data-theme="dark"] .btn-line.danger{border-color:rgba(220,38,38,.45);color:#F09B9B}
[data-theme="dark"] .btn-line.danger:hover{background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.6)}
[data-theme="dark"] .mini-btn.danger:hover{border-color:rgba(220,38,38,.6);color:#F09B9B}
[data-theme="dark"] .admin-top .btn.danger{border-color:rgba(220,38,38,.45);color:#F09B9B}

[data-theme="dark"] .badge-dot{background:#C9503A}
[data-theme="dark"] .r-mid{background:conic-gradient(#F0B357 0 72%,var(--track-bg) 72% 100%)}
[data-theme="dark"] .switch{background:var(--line-strong)}
[data-theme="dark"] .pros-cons .box.bad h4,
[data-theme="dark"] .pros-cons .box.bad li::before{color:#F09B9B}
[data-theme="dark"] .pros-cons .box.good h4{color:var(--brand-300)}
[data-theme="dark"] .pros-cons .box.good li::before{color:var(--brand-300)}
[data-theme="dark"] .comment-meta .counter.over{color:#F09B9B}

/* 深色底上的公告等级色块：保留高饱和底色，但确保文字可读 */
[data-theme="dark"] .lv-warn{background:#F0B357;color:#2A1A00}
[data-theme="dark"] .lv-hot{background:#E8564A;color:#fff}
[data-theme="dark"] .lv-info{background:var(--brand-500);color:#05221B}

/* ---- 统一滚动条在深色下的观感 ---- */
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2C3F39;border-color:var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--brand-600)}

/* ---- 深色模式下的输入框占位符 ---- */
[data-theme="dark"] ::placeholder{color:var(--faint);opacity:.8}

/* ---- 深色模式下的表格斑马纹 ---- */
[data-theme="dark"] .table tr:nth-child(even) td{background:rgba(255,255,255,.015)}

/* ---- 深色模式下的 hero 网格底纹更微弱 ---- */
[data-theme="dark"] .hero::before{opacity:.35}

/* ---- 深色模式下的 TOC ---- */
[data-theme="dark"] .toc{background:var(--bg-soft)}
[data-theme="dark"] .toc a.active{background:var(--brand-soft);color:var(--brand-300)}
/* ============================================================
   响应式补齐
   原样式在 ≤960px 只处理了栅格塌陷，导航右侧与内容区在手机宽度下仍会撑破视口
   ============================================================ */

/* 导航右侧允许收缩（关键修复：否则整页横向滚动） */
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.nav-actions .search-pill{min-width:0}
.nav-actions .btn-dark{white-space:nowrap}

@media(max-width:1024px){
  .nav-inner{gap:24px}
  .logo-tagline{display:none}
}

@media(max-width:1024px){
  /* 窄屏下后台入口让位给搜索与主题切换 */
  .nav-actions .btn-dark{display:none}
}

@media(max-width:768px){
  /* --- 容器与导航 --- */
  .container,.nav-inner{padding-left:16px;padding-right:16px}
  .nav-inner{height:64px;gap:12px}
  .logo{font-size:16px}
  .logo-mark{width:30px;height:30px}
  .nav-actions{gap:8px;flex:1}
  .search-pill{padding:7px 12px;font-size:13px}
  .search-pill input{width:100%;min-width:0}
  .theme-toggle{width:34px;height:34px;font-size:15px}

  /* --- Hero --- */
  .hero{padding:44px 0 32px}
  .hero h1{letter-spacing:-.6px}
  .hero-cta{gap:10px}
  .hero-stats{gap:26px;margin-top:26px;flex-wrap:wrap}
  .hero-stats > div + div::before{display:none}
  .hero-stats .num{font-size:21px}

  /* --- 列表卡片：图上文下 --- */
  .post-card{flex-direction:column;gap:14px;padding:16px}
  .post-thumb{width:100%;height:152px}
  .post-title{font-size:15.5px}
  .post-excerpt{-webkit-line-clamp:3}
  .list-head{flex-wrap:wrap;gap:8px}

  /* --- 区块标题 --- */
  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .section-head h2{font-size:24px}
  .section-head .desc{text-align:left;max-width:none}

  /* --- 各类网格 --- */
  .vendor-grid,.link-grid,.media-grid,.related-grid,.feature-grid,.sitemap-grid,
  .contact-grid,.info-grid,.two-col,.pros-cons,.dashboard-2col,.stat-grid,.stat-row{
    grid-template-columns:1fr;
  }
  .post-nav{grid-template-columns:1fr}

  /* --- 表格：容器内横向滚动，不撑破页面 --- */
  .compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare-wrap .spec-table{min-width:560px}

  /* --- 页脚 --- */
  .footer-inner{grid-template-columns:1fr;gap:26px}

  /* --- 浮动按钮 --- */
  .to-top{right:14px;bottom:14px;width:40px;height:40px}

  /* --- 文章页 --- */
  .article-wrap{gap:0}
  .article h1{font-size:23px;line-height:1.35}
  .article-body{font-size:15px}
  .comment-input{flex-direction:column;align-items:stretch}
  .comment-input .input-mini,.comment-input .btn{width:100%}
  .input-mini{width:100%}
}

/* 后台在窄屏：侧栏改为顶部横向滚动条，主区全宽 */
@media(max-width:1024px){
  .admin-shell{grid-template-columns:1fr}
  .admin-nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:6px;padding:10px 12px;border-right:none;border-bottom:1px solid var(--line)}
  .admin-nav .logo{width:100%;padding:2px 6px 8px}
  .admin-group{display:none}
  .admin-nav a{padding:7px 12px;font-size:13px;white-space:nowrap}
  .admin-theme{align-self:center;margin:0 0 0 auto}
  .admin-user{margin:0;border-top:none;padding:0 4px}
  .admin-user span:last-child{display:none}
  .admin-main{padding:18px 16px 28px;max-width:none}
  .admin-top{flex-wrap:wrap;gap:10px}
  .admin-top h1{font-size:20px}
  .panel{padding:18px 16px;border-radius:var(--radius)}
  /* 后台宽表格横向滚动 */
  .panel > .table,.panel > form > .table{display:block;overflow-x:auto;white-space:nowrap}
  .batch-bar{gap:8px}
  .reply-form input{width:100%}
}
/* ============================================================
   栅格子项 min-width:0 —— 经典陷阱
   grid 的 1fr 等价于 minmax(auto,1fr)，auto 的最小值是 min-content，
   因此内部只要有宽表格/长串，整列就会被撑开、导致页面横向滚动。
   给栅格子项设 min-width:0 后，交由内部容器（如 .compare-wrap）自行滚动。
   ============================================================ */
.layout > *,
.article-wrap > *,
.dashboard-2col > *,
.admin-shell > *{min-width:0}
.compare-wrap{max-width:100%}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.login-theme{margin-left:auto}

/* ============================================================
   套餐对比模块 /plans
   ============================================================ */

/* 一句话选 VPS */
.verdict-zone{margin:26px 0 6px}
.verdict-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.verdict-card{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface-grad);padding:20px 22px}
.verdict-card h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;gap:8px;align-items:flex-start}
.verdict-card h3::before{content:"";flex-shrink:0;width:4px;height:16px;border-radius:2px;background:var(--brand);margin-top:3px}
.hint-line{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.verdict-pick{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card);transition:.2s}
.verdict-pick:hover{border-color:var(--brand);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.verdict-pick.empty{color:var(--faint);font-size:12.5px;align-items:center}
.verdict-pick .vn{font-size:14px;font-weight:700;color:var(--ink)}
.verdict-pick .vs{font-size:12px;color:var(--muted)}
.verdict-pick .vp{font-size:13px;font-weight:800;color:var(--brand-deep)}

/* 筛选工具条 */
.plan-toolbar{margin:22px 0 16px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--card)}
.plan-toolbar form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.plan-toolbar input,.plan-toolbar select{border:1px solid var(--line-strong);border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;background:var(--card);color:var(--text);min-width:0;transition:border-color .24s,box-shadow .24s;appearance:none;-webkit-appearance:none}
.plan-toolbar input:focus,.plan-toolbar select:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.plan-toolbar input[type=text]{flex:1;min-width:180px}
.plan-count{margin-top:10px;font-size:12.5px;color:var(--faint)}
.plan-count b{color:var(--brand-deep);font-size:14px}

/* 对比表 */
.plan-table{min-width:860px}
.plan-table td{white-space:nowrap}
.plan-table small{font-size:11.5px}
.plan-price{color:var(--brand-deep);font-size:15px}
.rating-chip{display:inline-block;background:var(--brand-soft);color:var(--brand-deep);border-radius:7px;padding:2px 8px;font-size:12.5px;font-weight:700}
.side-tips{list-style:none;font-size:12.5px;color:var(--muted);line-height:1.9}
.side-tips li{padding-left:15px;position:relative}
.side-tips li::before{content:"·";position:absolute;left:0;color:var(--brand);font-weight:700}

@media(max-width:768px){
  .plan-toolbar form{gap:6px}
  .plan-toolbar input[type=text]{min-width:100%}
  .plan-toolbar .btn{flex:1}
}
/* ============================================================
   主题集群（GEO）+ 引证来源 + 保鲜度
   ============================================================ */

/* 支柱页：学习路径 */
.cluster-path{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);background:var(--card);padding:18px 22px;margin-bottom:18px}
.cluster-path .geo-q{margin-bottom:12px}
.path-list{list-style:none;counter-reset:s}
.path-list li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.path-list li:last-child{border-bottom:none}
.path-list .n{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--brand-700);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.path-list span:last-child{font-size:14px;color:var(--text);line-height:1.7}

/* 支柱页：支撑文章网格 */
.cluster-support{margin:22px 0}
.support-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.support-card{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:15px 17px;transition:.2s}
.support-card:hover{border-color:rgba(0,195,154,.5);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.support-card .t{font-size:14px;font-weight:700;color:var(--ink);line-height:1.5}
.support-card .d{font-size:12.5px;color:var(--muted);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.support-card .m{font-size:11.5px;color:var(--faint);display:flex;gap:5px;flex-wrap:wrap}
.support-card .tags{color:var(--brand-deep)}

/* 支柱互联 */
.cluster-peers{margin:20px 0}
.peer-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.peer-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:13.5px;color:var(--text);background:var(--card);transition:.2s}
.peer-chip:hover{border-color:var(--brand);color:var(--brand-deep);transform:translateY(-1px)}
.peer-chip .c{font-size:11px;color:var(--faint);background:var(--bg-soft);border-radius:999px;padding:1px 7px}

/* 同主题延伸 */
.cluster-zone .related-card .d{color:var(--faint)}

/* 引证来源 */
.citation-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-grad);
/* 引证来源链接：行内元素，桌面无需改；移动端点击区由下方伪元素扩展 */
.citation-box a{display:inline-block;padding:3px 0;min-height:24px}
  padding:18px 22px;margin:26px 0}
.citation-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px;
  display:flex;align-items:center;gap:9px}
.citation-title::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--brand)}
.citation-list{list-style:none;counter-reset:c}
.citation-list li{counter-increment:c;position:relative;padding:7px 0 7px 26px;font-size:13.5px;
  color:var(--text);border-bottom:1px dashed var(--line)}
.citation-list li:last-child{border-bottom:none}
.citation-list li::before{content:"[" counter(c) "]";position:absolute;left:0;top:7px;
  font-size:12px;color:var(--faint);font-weight:700}
.citation-list a{color:var(--brand-deep);font-weight:600}
.citation-list a:hover{text-decoration:underline}
.cit-note{margin-left:8px;font-size:12px;color:var(--faint)}
.cit-hint{margin-top:12px;font-size:11.5px;color:var(--faint);line-height:1.7}

/* 操作步骤（与 HowTo schema 对应） */
.step-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px 22px;margin:20px 0}
.step-list{list-style:none}
.step-list li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:14px;line-height:1.7;color:var(--text)}
.step-list li:last-child{border-bottom:none}
.step-list .n{flex-shrink:0;width:24px;height:24px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-800));color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* 内容保鲜度 */
.fresh-note{display:flex;align-items:center;gap:8px;margin:24px 0 6px;padding:11px 16px;
  border:1px dashed var(--line);border-radius:var(--radius-s);
  font-size:12.5px;color:var(--faint);background:var(--bg-soft)}
.fresh-note b{color:var(--brand-deep)}
.fresh-note .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0}

@media(max-width:768px){
  .support-grid{grid-template-columns:1fr}
  .path-list li,.step-list li{font-size:13.5px}
}
/* ============================================================
   优惠监控 /deals
   ============================================================ */
.expiring-bar{display:flex;align-items:center;gap:14px;margin:20px 0 4px;padding:14px 18px;
  border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--radius-l);
  flex-wrap:wrap}
.expiring-bar .ic{font-size:20px;flex-shrink:0}
.expiring-bar > div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.expiring-bar b{font-size:14.5px;color:var(--warn)}
.expiring-bar .muted{font-size:12.5px}

.deal-zone{margin-top:22px}
.deal-card{display:flex;gap:20px;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius-l);
  background:var(--card);padding:20px 22px;margin-bottom:14px;transition:.2s}
.deal-card:hover{border-color:rgba(0,195,154,.45);box-shadow:var(--shadow-s)}
.deal-card.urgent{border-color:var(--warn-line);background:var(--warn-bg)}

.deal-main{flex:1;min-width:0}
.deal-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.deal-tags .tag-feat{background:linear-gradient(135deg,var(--brand-700),var(--brand-800));color:#fff;
  font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 8px;letter-spacing:.5px}
.deal-tags .tag-type{background:var(--brand-soft);color:var(--brand-deep);font-size:11px;
  border-radius:5px;padding:2px 8px;font-weight:600}
.deal-tags .tag-region{background:var(--bg-mute);color:var(--muted);font-size:11px;
  border-radius:5px;padding:2px 8px}
.deal-tags .tag-promote{background:var(--warn-bg);color:var(--warn);font-size:11px;
  border-radius:5px;padding:2px 8px;font-weight:600}

.deal-title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:8px}
.deal-title a:hover{color:var(--brand-deep)}
.deal-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.deal-meta .deal-vendor{color:var(--brand-deep);font-weight:600}
.deal-meta .rate{color:var(--faint);font-weight:500;margin-left:4px}
.deal-meta .net{color:var(--faint)}
.deal-meta .req{color:var(--faint)}

.deal-prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.deal-prices .p-old{font-size:14px;color:var(--faint);text-decoration:line-through}
.deal-prices .arrow{color:var(--faint);font-size:12px}
.deal-prices .p-new{font-size:22px;font-weight:800;color:var(--brand-deep);letter-spacing:-.5px}
.deal-prices .p-off{background:var(--brand);color:#04302A;font-size:12px;font-weight:800;
  border-radius:6px;padding:2px 8px}
.deal-prices .p-note{font-size:12.5px;color:var(--muted)}

.deal-side{width:190px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;align-items:stretch;
  border-left:1px dashed var(--line);padding-left:18px}
.code-box{position:relative;border:1px dashed var(--brand);border-radius:10px;background:var(--brand-soft-2);
  padding:10px 12px;cursor:pointer;transition:.2s;text-align:center}
.code-box:hover{background:var(--brand-soft);border-style:solid}
.code-box code{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--brand-deep);letter-spacing:1px}
.code-box .copy-hint{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.code-box.copied{background:var(--brand);border-color:var(--brand)}
.code-box.copied code,.code-box.copied .copy-hint{color:#04302A}

.expire{font-size:12px;color:var(--faint);text-align:center}
.expire .d{display:block;margin-bottom:5px}
.expire .bar{height:4px;border-radius:2px;background:var(--bg-mute);overflow:hidden}
.expire .bar i{display:block;height:100%;background:var(--brand-400);border-radius:2px}
.expire.soon{color:var(--warn)}
.expire.soon .bar i{background:var(--warn)}
.deal-go{justify-content:center;width:100%}

@media(max-width:768px){
  .deal-card{flex-direction:column;gap:14px}
  .deal-side{width:auto;border-left:none;border-top:1px dashed var(--line);
    padding-left:0;padding-top:14px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .deal-side .code-box{flex:1;min-width:120px}
  .deal-side .expire{flex:1;min-width:110px}
  .deal-side .deal-go{width:auto;padding:9px 18px}
}
/* ============================================================
   AI 可见性面板
   ============================================================ */
.spark{display:flex;align-items:flex-end;gap:2px;height:140px;padding:12px 0 4px;
  border-bottom:1px solid var(--line)}
.sp-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.sp-bar{width:100%;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  transition:height .3s var(--ease)}
.sp-col:hover .sp-bar{background:var(--brand-700)}
.sp-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:8px}

.score-row{display:grid;grid-template-columns:200px 1fr 56px 1fr;gap:14px;
  align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.score-row:last-child{border-bottom:none}
.score-name{font-size:13.5px;color:var(--ink);font-weight:600}
.score-bar{height:8px;border-radius:4px;background:var(--bg-mute);overflow:hidden}
.score-bar i{display:block;height:100%;border-radius:4px;transition:width .5s var(--ease)}
.score-val{font-size:14px;font-weight:800;text-align:right}
.score-hint{font-size:12px;color:var(--faint);line-height:1.5}

@media(max-width:1024px){
  .score-row{grid-template-columns:1fr 1fr;gap:6px 12px}
  .score-hint{grid-column:1/-1}
}
/* ============================================================
   响应式图片 / 媒体库
   ============================================================ */
.article-cover{margin:0 0 24px;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft)}
.article-cover picture,.article-cover img{display:block;width:100%;height:auto}
.article-cover img{max-height:460px;object-fit:cover}

.media-thumb-wrap{position:relative}
.media-thumb-ph{width:100%;height:130px;background:var(--bg-soft)}
.fmt-badge{position:absolute;left:8px;top:8px;background:rgba(10,21,18,.72);color:#fff;
  font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 7px;letter-spacing:.5px}
.var-ok{position:absolute;right:8px;top:8px;background:var(--brand);color:#04302A;
  font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 7px}
.media-thumb-wrap picture{display:block;width:100%;height:130px;overflow:hidden}
.media-thumb-wrap img{width:100%;height:130px;object-fit:cover}
.media-sub .ok-tag{color:var(--ok);font-weight:600}
.media-sub .no-tag{color:var(--faint)}
.admin-top .ok-tag{background:var(--ok-bg);color:var(--ok);border-radius:5px;padding:2px 8px;
  font-size:11.5px;font-weight:700;margin-left:4px}
.admin-top .no-tag{background:var(--danger-bg);color:var(--danger);border-radius:5px;padding:2px 8px;
  font-size:11.5px;font-weight:700;margin-left:4px}

/* ============================================================
    外链跳转中转页（/go/{id}）
   ============================================================ */
.go-wrap{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--text)}
.go-card{text-align:center;max-width:420px;padding:32px}
.go-card h1{font-size:17px;margin:0 0 10px}
.go-card p{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 18px}
.go-card a{color:var(--brand-dark);font-weight:600;font-size:14px}
.go-spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;margin:0 auto 16px;animation:go-spin .8s linear infinite}
@keyframes go-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.go-spin{animation:none}}

/* ============================================================
    套餐横向对比（/compare）
   ============================================================ */
.compare-picker{padding:16px 18px}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-bottom:14px}
.picker-item{display:flex;align-items:center;gap:8px}
.picker-no{flex:0 0 20px;height:20px;line-height:20px;text-align:center;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-deep);font-size:11.5px;font-weight:800}
.picker-item select{flex:1;min-width:0}
.compare-table .dim-col{width:120px;text-align:left;background:var(--bg-soft);font-weight:700}
.compare-table td{vertical-align:top}
.cell-best{background:var(--ok-bg);font-weight:700}
.best-tag{margin-left:6px;font-size:10.5px;font-weight:800;color:var(--ok);
  background:var(--ok-bg);border-radius:5px;padding:1px 6px;vertical-align:middle}
@media(max-width:768px){
  .compare-table .dim-col{width:88px;font-size:12px}
  .picker-grid{grid-template-columns:1fr}
}

/* ---------- 套餐库：对比勾选列 ---------- */
.plan-table .pick-col{width:38px;text-align:center}
.pick-box{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pick-hint{font-size:12.5px}
@media(max-width:768px){.plan-table .pick-col{width:30px}}

/* ---------- 无障碍：仅屏幕阅读器可见 ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 数据看板：表格内迷你占比条 ---------- */
.bar-mini{margin-top:5px;height:4px;border-radius:3px;background:var(--bg-soft);overflow:hidden}
.bar-mini i{display:block;height:100%;background:var(--brand);border-radius:3px}

/* ---------- 通用状态标签 / 数字语义色 ---------- */
.ok-tag,.no-tag,.warn-tag{display:inline-block;border-radius:5px;padding:2px 8px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.ok-tag{background:var(--ok-bg);color:var(--ok)}
.no-tag{background:var(--danger-bg);color:var(--danger)}
.warn-tag{background:var(--warn-bg);color:var(--warn)}
.stat-box .n.ok{color:var(--ok)}
.stat-box .n.danger{color:var(--danger)}

/* ---------- 合并页签 / 行内筛选下拉 ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:4px 0 18px}
.tab{padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--faint);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.sel{border:1px solid var(--line-strong);border-radius:10px;padding:9px 12px;font:inherit;
  font-size:13px;background:var(--card);color:var(--text);min-width:0;appearance:none;-webkit-appearance:none}
/* ---------- SEO & GEO 中心：粘性子导航 ---------- */
.subnav{position:sticky;top:0;z-index:20;display:flex;gap:4px;margin:0 0 18px;padding:8px 10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);backdrop-filter:blur(6px)}
.subnav a{padding:7px 14px;font-size:13px;font-weight:600;color:var(--faint);text-decoration:none;border-radius:8px}
.subnav a:hover{color:var(--ink);background:var(--bg-soft)}
/* 锚点目标不要紧贴视口顶（会被粘性导航盖住） */
[id="seo"],[id="bots"],[id="dead-links"]{scroll-margin-top:64px}
/* ---------- 面板内小标题行（左标题 + 右操作，比再套一层 admin-top 轻 ---------- */
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h3{margin:0}
.panel-head .sub{margin-top:3px}
/* ===== 实测得分色阶（P3-1）=====
   原始内联色 #16a34a 在白底上仅 3.30:1，低于 WCAG AA 的 4.5:1（ui_audit 实测）。
   改用令牌化的三档：达标且语义不变（高=绿 / 中=琥珀 / 低=红）。
   顺带把颜色从内联 style 移到这里 —— 内联样式无法被媒体查询覆盖，
   断点收敛后会变成响应式死角。 */
.score-good{color:var(--brand-800)}
.score-warn{color:var(--warn)}
.score-bad{color:#B91C1C}
[data-theme="dark"] .score-good{color:var(--brand-400)}
[data-theme="dark"] .score-warn{color:#F0B357}
[data-theme="dark"] .score-bad{color:#F09B9B}

/* 得分档位映射助手：供视图输出 class 而非内联色 */
.score-1{color:var(--brand-800)}
.score-2{color:var(--warn)}
.score-3{color:#B91C1C}
[data-theme="dark"] .score-1{color:var(--brand-400)}
[data-theme="dark"] .score-2{color:#F0B357}
[data-theme="dark"] .score-3{color:#F09B9B}

/* ============================================================
   原子工具类
   ------------------------------------------------------------
   为什么有这一节：视图里原本有 44 处内联 style=""，其中大部分是
   margin / width / font-size 这类静态值。内联样式有两个硬伤：
     1) 无法被媒体查询覆盖 —— 断点收敛后会变成响应式死角；
     2) 同一份样式散落多处，改一次要全局搜索。
   这里把可复用的静态样式提为原子类，视图只留「数据驱动」的内联
   （如进度条 width:<?= 百分比 ?>，那类必须留在元素上）。
   ============================================================ */

/* 间距 */
.u-m0{margin:0}
.u-mb8{margin-bottom:8px}
.u-mb12{margin-bottom:12px}
.u-mb18{margin-bottom:18px}
.u-mt8{margin-top:8px}
.u-mt12{margin-top:12px}
.u-my10{margin:10px 0}
.u-mb0-12{margin:0 0 12px}
.u-mr8{margin-right:8px}

/* 排版 */
.u-t12{font-size:12px}
.u-t14{font-size:14px}
.u-fw400{font-weight:400}
.u-muted{color:var(--muted)}

/* 结构 */
.u-no-deco{text-decoration:none}
.u-wrap{gap:10px;flex-wrap:wrap}
.u-pointer{cursor:pointer}

/* 表格列宽（后台列表页大量使用） */
.u-w60{width:60px}
.u-w100{width:100px}
.u-w150{width:150px}

/* 强调边框面板（如「今天该做什么」） */
.u-accent{border-left:3px solid var(--brand)}

/* 警示底色（待办列表里标记需优先处理的行） */
.u-warn-bg{background:#fffbf0}
[data-theme="dark"] .u-warn-bg{background:rgba(245,158,11,.08)}

/* 语义提示色 */
.u-warn-text{color:#B45309}
[data-theme="dark"] .u-warn-text{color:#F0B357}

/* 补充原子类（第二批：内联样式清理） */
.u-mb0-10{margin:0 0 10px}
.u-mt14{margin-top:14px}
.u-inline{display:inline}
.u-center{justify-content:center}
.u-mw118{max-width:118px}
.u-mb14{margin-bottom:14px}
.u-mb16{margin-bottom:16px}
.u-my12{margin:12px 0}