/*
Theme Name: GAME·HUB Child
Theme URI: https://yxdownload.top
Template: zibll
Description: GAME·HUB 暗黑霓虹子主题 · 配合 gamehub-fields 插件使用
Version: 1.0.0
Text Domain: zibll-child
*/
/* ============================================================
   游戏资源分享站 · 暗黑霓虹 (Dark Neon)
   骨架统一：Neo-brutalist（粗白描边 + 硬阴影 + 直角 + 高对比）
   分区差异：只切一组 CSS 变量（--accent / --glow）
   动效来源：借鉴 Steam图书馆（硬切、压扁、错峰、骨架屏）
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;border:none;background:none}
ul,ol{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --bg:#0d0d12;
  --bg-card:#16161d;
  --bg-elev:#1c1c26;
  --bg-input:#0b0b10;

  --border:#ffffff;
  --border-soft:rgba(255,255,255,.16);

  --text:#f8fafc;
  --text-dim:#888a8f;
  --text-mute:#5c5e63;

  --accent:#ccff00;
  --accent-2:#00d9ff;
  --accent-3:#ff9500;
  --glow:rgba(204,255,0,.55);

  --bw:3px;
  --sh:6px 6px 0 #000;
  --sh-lg:10px 10px 0 var(--glow);
  --radius:0px;

  --dur:150ms;
  --ease:ease-out;
  --wrap:1200px;
}

/* ---------- Section themes (only accent changes) ---------- */
/* 二次元：取自用户 zzz-id-lookup 站配色 */
.theme-acg{
  --accent:#ff6ba8; --accent-2:#34d399; --accent-3:#fcd34d;
  --glow:rgba(255,107,168,.55);
}
/* PC游戏：酸绿 + 电光蓝 + 橙 */
.theme-pc{
  --accent:#ccff00; --accent-2:#00d9ff; --accent-3:#ff9500;
  --glow:rgba(204,255,0,.55);
}
/* 手机游戏：亮紫 + 青 + 粉 */
.theme-mobile{
  --accent:#a55eea; --accent-2:#00d9ff; --accent-3:#ff9ff3;
  --glow:rgba(165,94,234,.55);
}
/* 教程工具中心：薄荷绿 + 中性 */
.theme-tool{
  --accent:#1dd1a1; --accent-2:#f8fafc; --accent-3:#ff9ff3;
  --glow:rgba(29,209,161,.50);
}

/* ---------- Base ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* ---------- Buttons (Brutal Snap + Physical Crushing) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;font-weight:800;font-size:14px;
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);color:var(--text);
  box-shadow:var(--sh);
  cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--accent);color:#000;box-shadow:var(--sh-lg)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:#fff;color:#000}
.btn-ghost{background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--accent);color:#000;box-shadow:var(--sh)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--border);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:-.02em}
.logo .mark{
  width:30px;height:30px;background:var(--accent);
  border:var(--bw) solid var(--border);
  display:grid;place-items:center;color:#000;font-size:14px;
}
.nav{display:flex;gap:2px}
.nav > a,.nav .dd-trigger{
  padding:8px 13px;font-weight:700;font-size:14px;
  border:var(--bw) solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav > a:hover,.nav .dd-trigger:hover{background:var(--accent);color:#000}
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:8px;min-width:190px;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:var(--sh);padding:6px;z-index:101;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  font-weight:600;font-size:13.5px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.dropdown-menu a:hover{background:var(--accent);color:#000}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------- Searchbar (independent row below topbar) ---------- */
.searchbar{
  background:var(--bg-card);
  border-bottom:var(--bw) solid var(--border);
  padding:18px 0;
}
.searchbar .wrap{display:flex;flex-direction:column;gap:14px}
.search-box{display:flex;gap:0;width:100%;max-width:720px;margin:0 auto}
.search-box input{
  flex:1;padding:13px 16px;
  background:var(--bg-input);
  border:var(--bw) solid var(--border);
  color:var(--text);font-size:15px;font-weight:600;
  outline:none;
}
.search-box input::placeholder{color:var(--text-mute);font-weight:500}
.search-box button{
  padding:0 26px;font-weight:900;font-size:14px;
  background:var(--accent);color:#000;
  border:var(--bw) solid var(--border);
  border-left:none;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.search-box button:hover{background:#fff}

/* Faceted filter dropdowns */
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.f-dropdown{position:relative}
.f-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;font-weight:700;font-size:13px;
  background:var(--bg-elev);
  border:2px solid var(--border-soft);
  color:var(--text-dim);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.f-btn:hover{color:var(--text);border-color:var(--border)}
.f-btn .f-chev{transition:transform var(--dur) var(--ease)}
.f-dropdown.open .f-btn{background:var(--accent);color:#000;border-color:var(--border)}
.f-dropdown.open .f-chev{transform:rotate(180deg)}
.f-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:230px;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:var(--sh);padding:8px;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  max-height:0;overflow:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur),max-height var(--dur) var(--ease);
}
.f-dropdown.open .f-panel{
  opacity:1;visibility:visible;transform:translateY(0);max-height:420px;overflow-y:auto;
}
.f-panel li{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  /* stagger */
  opacity:0;transform:translateY(-6px);
}
.f-dropdown.open .f-panel li{
  animation:fItemIn 220ms var(--ease) forwards;
}
.f-dropdown.open .f-panel li:nth-child(1){animation-delay:20ms}
.f-dropdown.open .f-panel li:nth-child(2){animation-delay:50ms}
.f-dropdown.open .f-panel li:nth-child(3){animation-delay:80ms}
.f-dropdown.open .f-panel li:nth-child(4){animation-delay:110ms}
.f-dropdown.open .f-panel li:nth-child(5){animation-delay:140ms}
.f-dropdown.open .f-panel li:nth-child(6){animation-delay:170ms}
.f-dropdown.open .f-panel li:nth-child(7){animation-delay:200ms}
.f-dropdown.open .f-panel li:nth-child(8){animation-delay:230ms}
.f-panel li:hover{background:var(--accent);color:#000}
.f-panel li .cnt{
  margin-left:auto;font-size:11.5px;font-weight:800;
  padding:1px 7px;background:var(--bg-elev);color:var(--text-dim);
}
.f-panel li:hover .cnt{background:#000;color:var(--accent)}
@keyframes fItemIn{to{opacity:1;transform:translateY(0)}}

.hot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.hot .lbl{font-size:12px;color:var(--text-mute);font-weight:700}
.chip{
  font-size:12.5px;font-weight:700;padding:4px 11px;
  background:var(--bg-elev);border:2px solid var(--border-soft);color:var(--text-dim);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.chip:hover{background:var(--accent);color:#000;border-color:var(--border)}

/* ---------- Hero ---------- */
.hero{
  border:var(--bw) solid var(--border);
  background:var(--bg-card);
  box-shadow:var(--sh);
  height:300px;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  margin-top:28px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--border-soft) 1px,transparent 1px);
  background-size:16px 16px;opacity:.5;
}
.hero-inner{position:relative;text-align:center;padding:20px}
.hero h1{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.hero p{margin-top:12px;color:var(--text-dim);font-size:15px}

/* ---------- Section blocks ---------- */
.block{margin-top:44px}
.block-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:12px;margin-bottom:20px;
  border-bottom:var(--bw) solid var(--border);
}
.block-head .badge{
  width:38px;height:38px;flex:none;
  background:var(--accent);border:var(--bw) solid var(--border);
  display:grid;place-items:center;color:#000;font-size:19px;
}
.block-head h2{font-size:23px;font-weight:900;letter-spacing:-.02em}
.block-head .tag{
  font-size:11.5px;font-weight:800;padding:3px 9px;
  background:var(--accent);color:#000;
}
.block-head .more{
  margin-left:auto;font-size:13px;font-weight:800;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:5px;
  transition:color var(--dur) var(--ease);
}
.block-head .more:hover{color:var(--accent)}

/* Game card grid */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:960px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--sh);
  overflow:hidden;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  /* reveal */
  opacity:0;transform:translateY(14px);
}
.card.in{opacity:1;transform:translateY(0);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow var(--dur) var(--ease)}
.card.in:hover{
  transform:translateY(-6px);
  box-shadow:10px 10px 0 var(--glow);
}
.card:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}

.thumb{
  aspect-ratio:16/9;
  background:var(--bg-input);
  border-bottom:2px solid var(--border-soft);
  position:relative;overflow:hidden;
}
.thumb .skel{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.03) 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-mute);font-size:12px}

.card-body{padding:12px}
.card-body .t{font-weight:800;font-size:14px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-body .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.mini-tag{
  font-size:10.5px;font-weight:800;padding:2px 7px;
  border:2px solid var(--border-soft);color:var(--text-dim);
}

/* ============================================================
   卡片 hover 微动效（逆向自 steamdownload.cn 的 index.css）
   
   源站做法：整张卡片 :hover 时，内部各元素**错开延迟**做不同的小动作，
   单个元素幅度很小，合起来就有生命力。原文动画名 _gc-*，这里改成 gh-*。

   源站原始定义（供对照）：
     @keyframes _gc-jelly {0%,to{rotate(-3deg)} 30%{rotate(-3deg) scale(1.12,.88)}
                           55%{rotate(-3deg) scale(.94,1.06)} 80%{rotate(-3deg) scale(1.03,.97)}}
     @keyframes _gc-hop   {0%,to{none} 40%{translateY(-5px) rotate(-3deg)} 70%{translateY(1px)}}
     @keyframes _gc-nudge {0%,to{none} 35%{translate(-4px)} 65%{translate(2px)}}
     @keyframes _gc-squish{0%,to{none} 30%{scale(1.14,.84)} 60%{scale(.94,1.08)} 85%{scale(1.02,.98)}}
     @keyframes _gc-tilt  {0%,to{none} 25%{rotate(-16deg)} 55%{rotate(11deg)} 80%{rotate(-4deg)}}
   触发（延迟依次递增 40→60→90→120→180ms，形成波浪感）：
     :hover .tag      → jelly .55s 40ms
     :hover .tag:nth-child(1) → delay 60ms
     :hover .ver      → nudge .5s 90ms
     :hover .year svg → tilt .5s 120ms
     :hover .size     → squish .5s 180ms
   ============================================================ */
@keyframes gh-jelly{
  0%,to{transform:rotate(-3deg)}
  30%{transform:rotate(-3deg) scale(1.12,.88)}
  55%{transform:rotate(-3deg) scale(.94,1.06)}
  80%{transform:rotate(-3deg) scale(1.03,.97)}
}
@keyframes gh-hop{
  0%,to{transform:none}
  40%{transform:translateY(-5px) rotate(-3deg)}
  70%{transform:translateY(1px)}
}
@keyframes gh-nudge{
  0%,to{transform:none}
  35%{transform:translateX(-4px)}
  65%{transform:translateX(2px)}
}
@keyframes gh-squish{
  0%,to{transform:none}
  30%{transform:scale(1.14,.84)}
  60%{transform:scale(.94,1.08)}
  85%{transform:scale(1.02,.98)}
}
@keyframes gh-tilt{
  0%,to{transform:none}
  25%{transform:rotate(-16deg)}
  55%{transform:rotate(11deg)}
  80%{transform:rotate(-4deg)}
}

/* 只在支持 hover 的设备和用户没要求减少动效时才启用 */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* 分类标签：抖动（用户圈出来的那个效果，对应源站 ._cat a） */
  .card:hover .tag-chip{animation:gh-jelly .55s ease-out 40ms both}
  .card:hover .tag-chip:nth-child(1){animation-delay:60ms}
  .card:hover .tag-chip:nth-child(2){animation-delay:.14s}
  .card:hover .tag-chip:nth-child(3){animation-delay:.22s}
  .card:hover .tag-chip:nth-child(4){animation-delay:.30s}

  /* 体积小标签：压扁回弹（源站 ._size） */
  .card:hover .mini-tag{animation:gh-squish .5s ease-out .18s both}

  /* meta 里的日历图标：摇摆（源站 ._year svg） */
  .card:hover .meta span:first-child svg{animation:gh-tilt .5s ease-in-out .12s both}

  /* 下载数：横向轻推（源站 ._nudge） */
  .card:hover .meta span:last-child{animation:gh-nudge .5s ease-out 90ms both}

  /* 详情页下载卡的短标签也抖动，保持一致 */
  .dl-drive:hover .dl-tag{animation:gh-jelly .55s ease-out 40ms both}
}

/* 尊重系统的「减少动效」偏好 */
@media (prefers-reduced-motion:reduce){
  .card:hover .tag-chip,
  .card:hover .mini-tag,
  .card:hover .meta span svg,
  .card:hover .meta span:last-child,
  .dl-drive:hover .dl-tag{animation:none!important}
}
.card-body .meta{
  display:flex;gap:12px;margin-top:10px;
  font-size:11.5px;color:var(--text-mute);font-weight:700;
}
.card-body .meta span{display:inline-flex;align-items:center;gap:4px}

/* ---------- Detail layout ---------- */
.detail{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;
  margin-top:28px;align-items:start;
}
@media(max-width:900px){.detail{grid-template-columns:minmax(0,1fr)}}
.panel{
  border:var(--bw) solid var(--border);
  background:var(--bg-card);
  box-shadow:var(--sh);
  padding:20px;
}
.panel + .panel{margin-top:20px}
.panel h3{
  font-size:15px;font-weight:900;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.cover{
  aspect-ratio:16/9;background:var(--bg-input);
  border:var(--bw) solid var(--border);
  display:grid;place-items:center;color:var(--text-mute);
}
.title-row{margin-top:18px}
.title-row h1{font-size:27px;font-weight:900;letter-spacing:-.025em;line-height:1.25}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.pill{
  font-size:11.5px;font-weight:800;padding:4px 10px;
  background:var(--accent);color:#000;border:2px solid var(--border);
}
.pill.o{background:transparent;color:var(--text-dim);border-color:var(--border-soft)}

/* Warning box */
.alert{
  border:var(--bw) solid var(--accent-3);
  background:rgba(255,149,0,.09);
  padding:14px 16px;
}
.alert .h{
  display:flex;align-items:center;gap:8px;
  font-weight:900;font-size:13.5px;color:var(--accent-3);margin-bottom:9px;
}
.alert ol{padding-left:18px}
.alert li{font-size:13px;color:var(--text-dim);margin-bottom:5px;list-style:decimal}

/* Download cards */
.dl-list{display:flex;flex-direction:column;gap:12px}
.dl{
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--sh);
  padding:14px;
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.dl:hover{box-shadow:10px 10px 0 var(--glow)}
.dl .ic{
  width:42px;height:42px;flex:none;
  background:#fff;border:2px solid var(--border);
  display:grid;place-items:center;color:#000;font-size:20px;
  border-radius:9px;overflow:hidden;
}
.dl .ic svg{width:26px;height:26px;display:block}
.dl .info .n{font-weight:900;font-size:14px}
.dl .info .s{font-size:11.5px;color:var(--text-dim);margin-top:3px}
.dl .ops{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.op{
  font-size:11.5px;font-weight:800;padding:6px 11px;
  border:2px solid var(--border-soft);color:var(--text-dim);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.op:hover{background:var(--accent);color:#000;border-color:var(--border)}
.op.solid{background:var(--accent);color:#000;border-color:var(--border)}
.op.moe{border-color:var(--accent-2);color:var(--accent-2)}
.op.moe:hover{background:var(--accent-2);color:#000}

/* Password box */
.pwd{
  display:flex;align-items:center;gap:12px;
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);box-shadow:var(--sh);
  padding:14px 16px;
}
.pwd .code{
  font-family:ui-monospace,monospace;font-size:22px;font-weight:900;
  letter-spacing:.16em;color:var(--accent);
}
.pwd .hint{margin-left:auto;font-size:11.5px;color:var(--text-mute)}

/* Steps */
.steps{display:flex;flex-direction:column;gap:14px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  border:2px solid var(--border-soft);background:var(--bg-card);
  padding:13px 15px;
}
.step .num{
  width:28px;height:28px;flex:none;
  background:var(--accent);color:#000;
  display:grid;place-items:center;font-weight:900;font-size:13px;
}
.step .c .h{font-weight:800;font-size:13.5px;margin-bottom:4px}
.step .c .d{font-size:12.5px;color:var(--text-dim)}

/* Pixel QR */
.qr{display:flex;gap:16px;align-items:center}
.qr canvas,.qr .qrbox{
  width:132px;height:132px;flex:none;
  border:var(--bw) solid var(--border);background:#fff;
  image-rendering:pixelated;
}
.qr-t .h{font-weight:900;font-size:13.5px;margin-bottom:6px}
.qr-t .d{font-size:12px;color:var(--text-dim)}
.qr-t .qmeta{font-size:11px;color:var(--text-mute);margin-top:7px}

/* FAQ */
.faq details{
  border:2px solid var(--border-soft);background:var(--bg-card);
  padding:11px 14px;margin-bottom:9px;
}
.faq summary{font-weight:800;font-size:13.5px;cursor:pointer}
.faq p{margin-top:9px;font-size:12.5px;color:var(--text-dim)}

/* Sidebar widgets */
.side-card{
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);box-shadow:var(--sh);
  padding:16px;margin-bottom:18px;
}
.side-card h4{font-size:13.5px;font-weight:900;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.stat{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dashed var(--border-soft);font-size:12.5px}
.stat:last-child{border-bottom:none}
.stat .v{margin-left:auto;font-weight:900;font-family:ui-monospace,monospace;color:var(--accent)}

/* Pixel 4-step diagram */
.px-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:700px){.px-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.px-s{
  border:2px solid var(--border);background:var(--bg-card);
  padding:12px;text-align:center;
}
.px-s .px-ic{
  width:46px;height:46px;margin:0 auto 9px;
  border:2px solid var(--border);background:var(--accent);
  display:grid;place-items:center;color:#000;font-size:22px;
  image-rendering:pixelated;
}
.px-s .px-t{font-size:12px;font-weight:800;line-height:1.4}

/* ---------- Footer ---------- */
footer{
  margin-top:56px;border-top:var(--bw) solid var(--border);
  background:var(--bg-card);padding:26px 0;
  font-size:12.5px;color:var(--text-mute);
}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer .r{margin-left:auto;display:flex;gap:14px}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--accent);color:#000;font-weight:900;font-size:13.5px;
  padding:11px 22px;border:var(--bw) solid var(--border);
  box-shadow:var(--sh);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  z-index:200;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.82);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.modal.open{opacity:1;visibility:visible}
.modal-box{
  width:min(440px,92vw);
  border:var(--bw) solid var(--border);background:var(--bg-card);
  box-shadow:var(--sh);padding:24px;
}
.modal-box h3{font-size:18px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.modal-box p{font-size:13.5px;color:var(--text-dim);margin-bottom:18px}
.modal-ops{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Reveal (stagger) ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:translateY(0);transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* ---------- Sort bar ---------- */
.sortbar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:14px 0;margin-top:20px;
  border-bottom:2px solid var(--border-soft);
}
.sortbar .sb{
  font-size:12.5px;font-weight:800;padding:6px 13px;
  border:2px solid var(--border-soft);color:var(--text-dim);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.sortbar .sb:hover{color:var(--text);border-color:var(--border)}
.sortbar .sb.on{background:var(--accent);color:#000;border-color:var(--border)}
.sortbar .cnt{margin-left:auto;font-size:12px;color:var(--text-mute);font-weight:700}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .card,.reveal{opacity:1 !important;transform:none !important}
}

/* ============================================================
   v2 追加：搜索组合框 · 热度榜 · Steam式筛选行 · 后台表单
   ============================================================ */

/* ---------- 搜索组合框：分类下拉在搜索框左侧 ---------- */
.search-combo{display:flex;width:100%;max-width:780px;margin:0 auto}
.search-combo .sc-cat{position:relative}
.search-combo .sc-catBtn{
  display:flex;align-items:center;gap:8px;height:52px;padding:0 15px;
  background:var(--bg-elev);border:var(--bw) solid var(--border);border-right:none;
  font-weight:800;font-size:13.5px;color:var(--text-dim);cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.search-combo .sc-catBtn:hover,.search-combo .sc-cat.open .sc-catBtn{background:var(--accent);color:#000}
.search-combo input{
  flex:1;min-width:0;height:52px;padding:0 16px;
  background:var(--bg-input);border:var(--bw) solid var(--border);
  color:var(--text);font-size:15px;font-weight:600;outline:none;
}
.search-combo input::placeholder{color:var(--text-mute);font-weight:500}
.search-combo input:focus{border-color:var(--accent)}
.search-combo .sc-go{
  padding:0 26px;background:var(--accent);color:#000;
  border:var(--bw) solid var(--border);border-left:none;
  font-weight:900;font-size:14px;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.search-combo .sc-go:hover{background:#fff}
@media(max-width:640px){
  .search-combo{flex-wrap:wrap}
  .search-combo input{flex:1 1 100%;order:3;border-top:none}
}

/* ---------- 热门游戏排行榜（参考 Steam图书馆 home.hot） ---------- */
.rank-card{
  border:var(--bw) solid var(--border);background:var(--bg-card);
  box-shadow:var(--sh);padding:20px;margin-top:28px;
}
.rank-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rank-head .badge{
  width:38px;height:38px;flex:none;background:var(--accent-3);
  border:var(--bw) solid var(--border);display:grid;place-items:center;color:#000;font-size:18px;
}
.rank-head h2{font-size:20px;font-weight:900;letter-spacing:-.02em}
.rank-head .sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.rank-tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.rank-tab{
  font-size:12px;font-weight:800;padding:6px 13px;
  border:2px solid var(--border-soft);color:var(--text-dim);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.rank-tab:hover{color:var(--text);border-color:var(--border)}
.rank-tab.on{background:var(--accent-3);color:#000;border-color:var(--border)}
.rank-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 28px}
@media(max-width:760px){.rank-grid{grid-template-columns:minmax(0,1fr)}}
.rank-row{
  display:flex;align-items:center;gap:12px;padding:9px 8px;
  border-bottom:2px dashed var(--border-soft);cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.rank-row:hover{background:var(--bg-elev)}
.rank-row:last-child{border-bottom:none}
.rank-badge{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  font-weight:900;font-size:12.5px;font-family:ui-monospace,monospace;
  border:2px solid var(--border-soft);color:var(--text-dim);
}
.rank-row.r1 .rank-badge{background:#fcd34d;color:#000;border-color:var(--border)}
.rank-row.r2 .rank-badge{background:#e5e7eb;color:#000;border-color:var(--border)}
.rank-row.r3 .rank-badge{background:#fb923c;color:#000;border-color:var(--border)}
.rank-thumb{
  width:66px;height:38px;flex:none;
  border:2px solid var(--border-soft);background:var(--bg-input);
  display:grid;place-items:center;color:var(--text-mute);
  overflow:hidden;
}
/* 排行榜缩略图用封面图（用户要求） */
.rank-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;border:none;
}
.rank-name{
  font-weight:800;font-size:13.5px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rank-meta{font-size:11.5px;color:var(--text-mute);font-weight:700;white-space:nowrap}

/* ---------- Steam式筛选行（列表页内联 pill） ---------- */
.frows{display:flex;flex-direction:column;gap:9px;margin:18px 0 4px}
.frow{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.frow .fl{
  font-size:12px;font-weight:800;color:var(--text-mute);
  padding:7px 0;min-width:78px;flex:none;
}
.fpill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;padding:6px 13px;
  border:2px solid var(--border-soft);color:var(--text-dim);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.fpill:hover{color:var(--text);border-color:var(--border)}
.fpill.on{background:var(--accent);color:#000;border-color:var(--border)}
.fpill .c{font-size:10.5px;opacity:.72;font-family:ui-monospace,monospace}
.fpill .icon{width:13px;height:13px}

/* ---------- 后台上架表单 ---------- */
.adm-tabs{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.adm-tab{
  padding:10px 20px;font-weight:900;font-size:14px;
  border:var(--bw) solid var(--border);background:var(--bg-elev);color:var(--text-dim);
  cursor:pointer;box-shadow:var(--sh);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.adm-tab:hover{background:var(--accent);color:#000}
.adm-tab.on{background:var(--accent);color:#000}
.adm-tab:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}

.adm-form{
  border:var(--bw) solid var(--border);background:var(--bg-card);
  box-shadow:var(--sh);padding:24px;margin-top:16px;
}
.adm-sec{border:2px solid var(--border-soft);padding:18px;margin-bottom:16px}
.adm-sec>h4{
  font-size:13.5px;font-weight:900;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;color:var(--accent);
}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px;color:var(--text-dim)}
.fld label .req{color:var(--accent-3)}
.fld input[type=text],.fld input[type=url],.fld input[type=number],.fld textarea,.fld select{
  width:100%;padding:10px 12px;background:var(--bg-input);
  border:2px solid var(--border-soft);color:var(--text);
  outline:none;font-size:13.5px;
  transition:border-color var(--dur) var(--ease);
}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent)}
.fld textarea{min-height:84px;resize:vertical;line-height:1.7}
.hint{font-size:11.5px;color:var(--text-mute);margin-top:5px;line-height:1.6}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.chk-row{display:flex;gap:16px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;cursor:pointer}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.rowline{
  display:grid;grid-template-columns:120px 1fr 130px auto;gap:10px;align-items:center;
  padding:10px;border:2px solid var(--border-soft);margin-bottom:10px;background:var(--bg-input);
}
@media(max-width:760px){.rowline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.rowline select,.rowline input{
  padding:8px 10px;background:var(--bg-elev);border:2px solid var(--border-soft);
  color:var(--text);font-size:13px;outline:none;width:100%;
}
.rowline .rm{
  width:34px;height:34px;display:grid;place-items:center;
  border:2px solid var(--border-soft);color:var(--text-dim);cursor:pointer;font-size:14px;
}
.rowline .rm:hover{background:var(--accent-3);color:#000;border-color:var(--border)}
.addline{
  font-size:12.5px;font-weight:800;padding:8px 14px;
  border:2px dashed var(--border-soft);color:var(--text-dim);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.addline:hover{background:var(--accent);color:#000;border-color:var(--border)}
.adm-bar{
  position:sticky;bottom:0;z-index:50;
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding:14px 0;background:var(--bg);border-top:var(--bw) solid var(--border);
}
.star-tag{font-size:11px;font-weight:900;padding:2px 7px;background:var(--accent);color:#000;border:2px solid var(--border)}

/* ============================================================
   v3 · 磁力链接卡（交互参考 Steam图书馆）
   ============================================================ */
.mag-card{border:3px solid var(--border);background:var(--bg-elev);box-shadow:var(--sh);padding:14px;margin-top:16px}
.mag-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mag-mark{width:38px;height:38px;flex:none;background:var(--accent);border:3px solid var(--border);
  display:grid;place-items:center;color:#000;font-weight:900;font-size:15px}
.mag-title b{font-size:14px;display:inline-flex;align-items:center;gap:7px}
.mag-cost{font-size:10.5px;font-weight:900;background:var(--accent-3);color:#000;border:2px solid var(--border);padding:1px 6px}
.mag-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.mag-help{margin-left:auto;width:30px;height:30px;flex:none;border:2px solid var(--border-soft);color:var(--text-dim);
  background:var(--bg-card);cursor:pointer;font-weight:900;font-size:13px;transition:all var(--dur) var(--ease)}
.mag-help:hover{background:var(--accent);color:#000;border-color:var(--border)}
.mag-row{display:flex;gap:8px;align-items:stretch}
.mag-link{flex:1;min-width:0;border:2px solid var(--border-soft);background:var(--bg-card);
  padding:9px 10px;font-size:11px;color:var(--text-dim);font-family:ui-monospace,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;display:flex;align-items:center}
.mag-card.unlocked .mag-link{color:var(--accent);border-color:var(--accent);cursor:pointer}
.mag-btn{flex:none;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--accent);color:#000;border:3px solid var(--border);box-shadow:4px 4px 0 var(--glow);
  font-weight:900;font-size:12.5px;padding:8px 12px;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mag-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--glow)}
.mag-btn:active{transform:translate(4px,4px);box-shadow:none}
.mag-card.unlocked .mag-btn{background:var(--bg-input);color:var(--text);border-color:var(--border-soft);box-shadow:none}
.mag-share{display:none;width:100%;margin-top:10px;border:2px dashed var(--accent);color:var(--accent);
  background:transparent;padding:8px 10px;font-size:12px;font-weight:800;cursor:pointer;text-align:center}
.mag-share b{color:#fff}
.mag-open{display:none;margin-top:12px;border:2px solid var(--border-soft);background:var(--bg-card);padding:12px}
.mag-open .qr{margin-bottom:10px}
.mag-mrow{display:flex;gap:8px}
.mag-mrow input{flex:1;min-width:0;background:var(--bg-input);border:2px solid var(--border-soft);
  color:var(--text);font-size:11px;font-family:ui-monospace,Consolas,monospace;padding:8px 10px;outline:none}

/* ---------- 操作按钮组（收藏 / 分享赚积分 / 推荐给朋友 / 购买正版） ---------- */
.acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.acts .op{justify-content:center;text-align:center}
.acts .op .t{margin-left:5px}
.op.act-buy{background:var(--bg-input);color:var(--text);border:3px solid var(--border);box-shadow:4px 4px 0 #000}
.op.act-buy:hover{background:var(--accent-3);color:#000;border-color:var(--border)}
.op.fav-on{background:var(--accent);color:#000;border-color:var(--border)}
.act-msg{display:none;margin-top:10px;border:2px dashed var(--accent);color:var(--accent);
  padding:7px 10px;font-size:11.5px;font-weight:700;text-align:center}

/* ============================================================
   v3 · 玩家评测区（样式参考 Steam图书馆 评测组件）
   ============================================================ */
.reviews-note{font-size:12px;color:var(--text-dim);margin:0 0 12px}
.review{display:flex;gap:12px;border:2px solid var(--border-soft);background:var(--bg-card);padding:13px 14px;margin-bottom:10px;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.review.in{opacity:1;transform:none}
.rv-av{width:38px;height:38px;flex:none;border:3px solid var(--border);background:var(--accent);
  color:#000;display:grid;place-items:center;font-weight:900;font-size:16px}
.rv-body{min-width:0;flex:1}
.rv-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.rv-name{font-weight:900;font-size:13px}
.rv-verdict{font-size:12px;font-weight:800}
.rv-verdict.up{color:var(--accent)}
.rv-verdict.down{color:var(--accent-3)}
.rv-time{font-size:11px;color:var(--text-dim)}
.rv-votes{font-style:normal;font-size:11px;color:var(--text-dim);margin-left:auto}
.rv-text{font-size:12.5px;color:var(--text-dim);line-height:1.75;margin:0}

/* ============================================================
   v3 · FAQ 手风琴页（工具中心）
   ============================================================ */
.faq-page-head{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.faq-search{display:flex;gap:8px}
.faq-search input{flex:1;background:var(--bg-input);border:3px solid var(--border);box-shadow:var(--sh);
  color:var(--text);padding:10px 13px;font-size:13px;outline:none}
.faq-search input:focus{border-color:var(--accent)}
.faq-stats{font-size:12px;color:var(--text-dim);font-weight:700}
.faq-item{border:2px solid var(--border-soft);background:var(--bg-card);margin-bottom:8px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.faq-item:hover{border-color:var(--border)}
.faq-item.open{border-color:var(--accent);background:var(--bg-elev)}
.faq-item .q{width:100%;text-align:left;background:none;border:none;color:var(--text);
  padding:12px 14px;font-weight:800;font-size:13px;cursor:pointer;display:flex;gap:10px;align-items:center}
.faq-item .q i{font-style:normal;flex:none;width:24px;height:24px;display:grid;place-items:center;
  background:var(--accent);color:#000;border:2px solid var(--border);font-size:11px;font-weight:900}
.faq-item .q .em{margin-left:auto;font-style:normal;font-size:15px;color:var(--text-dim);flex:none}
.faq-item .a{display:none;padding:0 14px 13px 48px;font-size:12.5px;color:var(--text-dim);line-height:1.8}
.faq-item.open .a{display:block}
.faq-item .a p{margin:0 0 8px}
.faq-item .a b{color:var(--text)}
.faq-item .a ul,.faq-item .a ol{margin:0 0 8px;padding-left:18px}
.faq-item .a li{margin-bottom:4px}
.faq-tip{border:2px solid var(--accent-2);color:var(--text);background:var(--bg-card);
  padding:8px 11px;font-size:12px;margin:6px 0}
.faq-tip::before{content:"💡 ";}
.faq-warn{border:2px solid var(--accent-3);color:var(--text);background:var(--bg-card);
  padding:8px 11px;font-size:12px;margin:6px 0}
.faq-warn::before{content:"⚠️ ";}
.faq-cta{margin-top:16px;border:3px solid var(--border);background:var(--bg-elev);box-shadow:var(--sh);
  padding:16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.faq-cta b{font-size:14px;display:block;margin-bottom:3px}
.faq-cta span{font-size:12.5px;color:var(--text-dim)}

/* ---------- 侧栏 KV 信息行（Steam 式） ---------- */
.kv{margin:12px 0 0;border-top:2px solid var(--border-soft)}
.kv .stat{border-bottom:2px solid var(--border-soft)}

/* ============================================================
   v4 · 修复：二维码右侧文字被 canvas 溢出盖住
   ============================================================ */
.qr-t{min-width:0;flex:1}
.qr-t .d{line-height:1.6}

/* ---------- 下载卡底部小字 PC 链接（弱化，替代大按钮） ---------- */
.dl-foot{display:block;width:100%;text-align:center;margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--border-soft);font-size:11px;color:var(--text-mute);cursor:pointer}
.dl-foot:hover{color:var(--accent-2)}

/* ---------- Steam 式 Hero（左封面+stats，右标题+kv+按钮组） ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
@media(max-width:900px){.hero2{grid-template-columns:minmax(0,1fr)}}
.hero2 .cover{margin-top:0;width:100%;aspect-ratio:16/9}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.hero-stats>div{border:3px solid var(--border);background:var(--bg-elev);box-shadow:4px 4px 0 var(--glow);
  padding:10px 8px;text-align:center;min-width:0}
/* 值不换行：日期「2026-10-27」在 1440/1024 下会被挤成两行
   （三列等宽 + 14~15.5px 粗体，日期刚好差几个像素）。
   桌面端默认 nowrap；只有窄屏（≤768px）才放开。 */
.hero-stats b{display:block;font-size:14px;font-weight:900;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-stats span{display:block;font-size:11px;color:var(--text-dim);margin-top:3px}
.hero-buy{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;
  background:var(--bg-input);color:var(--text);border:3px solid var(--border);box-shadow:4px 4px 0 #000;
  font-weight:900;font-size:13px;padding:10px;cursor:pointer;text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hero-buy:hover{background:var(--accent-3);color:#000}
.hero-buy:active{transform:translate(4px,4px);box-shadow:none}
.hero2 .title-row{margin-top:0}
.hero-kv{margin:14px 0 0;border-top:2px solid var(--border-soft)}
.hero-kv .stat{border-bottom:2px solid var(--border-soft)}
.hero2 .acts{margin-top:16px}
.hero2 .acts{flex-direction:row;flex-wrap:wrap}
.hero2 .acts .op{flex:1;min-width:110px}

/* ---------- 侧栏下载卡内四步（小号） ---------- */
.mini-steps{margin-top:12px;border-top:2px solid var(--border-soft);padding-top:10px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.mini-steps .ms{font-size:10.5px;color:var(--text-dim);line-height:1.45;font-weight:700}
.mini-steps .ms i{display:block;font-style:normal;width:26px;height:26px;margin:0 auto 5px;
  background:var(--accent);color:#000;border:2px solid var(--border);
  display:grid;place-items:center;font-weight:900;font-size:12px}

/* ============================================================
   v5 · 获取步骤 · 像素图解四步卡（构图自绘，参考 Steam图书馆）
   ============================================================ */
.px4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px}
.px4 .cell{border:3px solid var(--border);background:var(--bg-card);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.px4 .cell:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--glow)}
.px4 .pic{display:block;width:100%;height:auto;border-bottom:3px solid var(--border)}
.px4 .cap{display:flex;align-items:center;gap:9px;padding:9px 11px;font-weight:800;font-size:12.5px}
.px4 .cap i{font-style:normal;flex:none;width:22px;height:22px;display:grid;place-items:center;
  background:var(--accent);color:#000;border:2px solid var(--border);font-weight:900;font-size:11px}
@media(max-width:640px){.px4{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   v6 · 侧栏小号像素图解 + 弹层层级修复
   ============================================================ */
#moe-modal{z-index:340}
.side-card .px4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.side-card .px4 .cell{border-width:2px}
.side-card .px4 .cell:hover{transform:none;box-shadow:none}
.side-card .px4 .pic{border-bottom-width:2px}
.side-card .px4 .cap{padding:6px 7px;font-size:10px;gap:5px;line-height:1.35;font-weight:700}
.side-card .px4 .cap i{width:16px;height:16px;font-size:9px;border-width:2px}

/* ============================================================
   WordPress 适配
   ============================================================ */
.sc-sel{flex:none;background:var(--bg-input);border:3px solid var(--border);border-right:none;color:var(--text);
  font-size:13px;font-weight:800;padding:0 10px;outline:none;max-width:150px;cursor:pointer}
.sc-sel:focus{border-color:var(--accent)}
.thumb-link{display:block}
.thumb .imgfit{width:100%;height:100%;object-fit:cover;display:block}
.card-body .t a{color:var(--text);text-decoration:none}
.entry-content img{max-width:100%;height:auto;border:3px solid var(--border)}
.entry-content a{color:var(--accent);text-decoration:none;font-weight:700}
/* 正文里的「外部工具」链接：用户要求固定蓝色，不跟着栏目强调色走
   （星穹铁道栏目的 --accent 是粉色 #ff6ba8，普通正文链接会变粉）。
   用法：<a class="ext-link" href="..." target="_blank">文字</a> */
.entry-content a.ext-link{
  color:#3b9eff;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.entry-content a.ext-link:hover{color:#7cc0ff;text-decoration-thickness:2px}
.entry-content a.ext-link::after{content:"↗";font-size:.85em;margin-left:2px;text-decoration:none;display:inline-block}

.entry-content ul,.entry-content ol{margin:0 0 10px;padding-left:20px}
.entry-content li{margin-bottom:5px;font-size:13px;color:var(--text-dim)}
.dl-note{padding:12px;font-size:12.5px;color:var(--text-dim);border:2px dashed var(--border-soft)}
.pager ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pager li a,.pager li span,.pager .page-numbers{display:inline-block;border:3px solid var(--border);background:var(--bg-card);
  color:var(--text);padding:7px 12px;font-weight:900;font-size:13px;text-decoration:none}
.pager .page-numbers.current{background:var(--accent);color:#000}
.sortbar .on{background:var(--accent);color:#000;border-color:var(--border)}
/* 评论 / 商城等父主题容器留白 */
.commentlist,.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{border:2px solid var(--border-soft);background:var(--bg-card);padding:12px;margin-bottom:9px}
.comment-list li p{font-size:13px;color:var(--text-dim);margin:6px 0 0}
.comment-reply-link{color:var(--accent);font-weight:800;font-size:12px}
.comment-form-comment textarea,.comment-form input[type=text],.comment-form input[type=email]{
  width:100%;background:var(--bg-input);border:2px solid var(--border-soft);color:var(--text);padding:9px 11px;font-size:13px}
.form-submit input[type=submit]{background:var(--accent);color:#000;border:3px solid var(--border);
  box-shadow:4px 4px 0 var(--glow);font-weight:900;padding:9px 18px;cursor:pointer}
.comment-form-comment label,.comment-form-author label,.comment-form-email label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.logged-in-as,.comment-notes{font-size:12px;color:var(--text-dim)}

/* ============================================================
   v7 · 登录 / 注册页（交互参考 Steam图书馆：三合一同页切换）
   ============================================================ */
.sign{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:3px solid var(--border);
  background:var(--bg-card);box-shadow:var(--sh);max-width:880px;margin:0 auto}
@media(max-width:820px){.sign{grid-template-columns:minmax(0,1fr)}}
.sign-aside{background:var(--bg-elev);border-right:3px solid var(--border);padding:28px 26px}
@media(max-width:820px){.sign-aside{border-right:none;border-bottom:3px solid var(--border)}}
.sign-badge{display:inline-block;background:var(--accent);color:#000;border:2px solid var(--border);
  font-weight:900;font-size:11px;padding:3px 8px;letter-spacing:.08em}
.sign-aside h2{font-size:24px;font-weight:900;margin:14px 0 10px}
.sign-aside .d{font-size:13px;color:var(--text-dim);line-height:1.8;margin:0 0 12px}
.sign-aside .tip{border:2px solid var(--accent-3);padding:9px 11px;font-size:12.5px;margin:0 0 16px}
.sign-aside .tip strong{color:#ff6b6b}
.sign-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sign-why li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text-dim);line-height:1.6}
.sign-why li .icon{width:16px;height:16px;flex:none;color:var(--accent);margin-top:2px}

.sign-card{padding:26px}
.sign-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:2px solid var(--border-soft);padding-bottom:12px}
.sign-tab{border:2px solid var(--border-soft);background:var(--bg-input);color:var(--text-dim);
  font-weight:900;font-size:13px;padding:7px 14px;text-decoration:none;
  transition:all var(--dur) var(--ease)}
.sign-tab:hover{color:var(--text);border-color:var(--border)}
.sign-tab.on{background:var(--accent);color:#000;border-color:var(--border);box-shadow:3px 3px 0 var(--glow)}
.sign-msg{border:2px solid var(--border);padding:9px 11px;font-size:12.5px;font-weight:700;margin-bottom:14px;
  display:flex;gap:8px;align-items:flex-start}
.sign-msg .icon{width:16px;height:16px;flex:none;margin-top:2px}
.sign-msg.err{border-color:#ff6b6b;color:#ff9b9b}
.sign-msg.ok{border-color:var(--accent-2);color:var(--accent-2)}
.sign-form .fld{display:block;margin-bottom:14px}
.sign-form .lb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:700}
.sign-form .lb .lnk{margin-left:auto;color:var(--accent);font-size:11.5px;font-weight:800;text-decoration:none}
.sign-form .ctrl{display:flex;align-items:center;gap:8px;border:2px solid var(--border-soft);background:var(--bg-input);padding:9px 11px}
.sign-form .ctrl:focus-within{border-color:var(--accent)}
.sign-form .ctrl .icon{width:16px;height:16px;flex:none;color:var(--text-dim)}
.sign-form .ctrl input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:13px}
.sign-form .eye{flex:none;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text-dim);margin:0 0 14px;cursor:pointer}
.agree input{margin-top:2px}
.agree a{color:var(--accent);font-weight:800;text-decoration:none}
.sign-submit{width:100%;background:var(--accent);color:#000;border:3px solid var(--border);
  box-shadow:4px 4px 0 var(--glow);font-weight:900;font-size:14px;padding:11px;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sign-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--glow)}
.sign-submit:active{transform:translate(4px,4px);box-shadow:none}
.sign-trans{text-align:center;font-size:12.5px;color:var(--text-dim);margin-top:14px}
.sign-trans a{color:var(--accent);font-weight:900;text-decoration:none}

/* ============================================================
   顶栏用户盒（头像 + 用户名 + 实时状态下拉）
   ============================================================ */
.userbox{position:relative}
.ub-trigger{
  display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:3px 3px 0 var(--border);cursor:pointer;color:var(--text);
  font:inherit;font-weight:800;font-size:13.5px;
}
.ub-trigger:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--border)}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;color:#fff;font-weight:900;font-size:15px;
  border:2px solid var(--border);text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.ub-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox .dropdown-menu{left:auto;right:0;min-width:270px;padding:0}
.ub-head{display:flex;align-items:center;gap:11px;padding:14px 14px 12px;border-bottom:2px dashed var(--border)}
.ub-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ub-info b{font-size:14.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-info small{font-size:11.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-badge{
  flex:none;font-size:11px;font-weight:900;padding:3px 8px;
  background:var(--accent);color:#000;box-shadow:2px 2px 0 var(--border);
}
.ub-points{padding:10px 14px;border-bottom:2px dashed var(--border)}
.ub-points .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;font-weight:600}
.ub-points .row + .row{border-top:1px dashed var(--border)}
.ub-points .row.big{padding-bottom:10px}
.ub-points .row.big small{font-size:12px;color:var(--text-dim);font-weight:800}
.ub-points .row.big b{font-size:24px;font-weight:900;color:var(--accent);margin-left:auto}
.ub-points .row span i{font-style:normal;color:var(--text-dim);font-size:11.5px;margin-left:4px}
.ub-points .row em{font-style:normal;font-weight:900;color:#3ddc84}
.ub-points .row em.neg{color:#ff5d73}
.ub-points .row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-btn{
  flex:none;font:inherit;font-size:12px;font-weight:900;padding:6px 10px;
  background:var(--accent);border:var(--bw) solid var(--border);
  box-shadow:2px 2px 0 var(--border);cursor:pointer;color:#000;
}
.mini-btn.done{background:var(--bg-card);color:var(--text-dim)}
.ub-note{font-size:11.5px;color:#3ddc84;padding:0 0 6px;font-weight:700}
.ub-menu > a{display:flex;align-items:center;gap:9px;padding:11px 14px;font-weight:700;font-size:13.5px}
.ub-menu > a:hover{background:var(--accent);color:#000}

/* 导航下拉触发改为链接后的配色修正 */
a.dd-trigger{display:flex;align-items:center;gap:4px;text-decoration:none}
a.dd-trigger:hover{color:var(--accent)}

/* 收藏按钮激活态 */
.op.on{background:var(--accent);color:#000;border-color:var(--accent)}

/* ============================================================
   登录 / 注册悬浮窗
   ============================================================ */
.auth-box{width:min(360px,92vw)}
.auth-tabs{display:flex;align-items:center;gap:6px;margin-bottom:16px;border-bottom:2px dashed var(--border);padding-bottom:10px}
.auth-tabs .at{
  padding:7px 16px;font-weight:900;font-size:14px;cursor:pointer;
  border:var(--bw) solid var(--border);background:var(--bg-card);color:var(--text);
}
.auth-tabs .at.on{background:var(--accent);color:#000;box-shadow:2px 2px 0 var(--border)}
.auth-x{
  margin-left:auto;width:30px;height:30px;font-size:18px;line-height:1;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  cursor:pointer;color:var(--text);font-weight:900;
}
.auth-x:hover{background:#ff5d73;color:#000}
.af{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.af > span{flex:none;width:52px;font-size:12.5px;font-weight:800;color:var(--text-dim)}
.af input[type=email],.af input[type=password],.af input[type=text]{
  flex:1;min-width:0;padding:9px 11px;font:inherit;font-size:13.5px;
  background:var(--bg);border:var(--bw) solid var(--border);color:var(--text);
}
.af input:focus{outline:none;border-color:var(--accent)}
.af em{flex:none;font-style:normal;font-size:13px;font-weight:900;color:var(--accent);white-space:nowrap}
.af-check{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:12px;color:var(--text-dim)}
.auth-msg{min-height:18px;margin-top:8px;font-size:12.5px;font-weight:700}
.auth-msg.ok{color:#3ddc84}
.auth-msg.err{color:#ff5d73}
.auth-reset{display:block;margin-top:6px;font-size:12px;color:var(--text-dim);text-decoration:none}
.auth-reset:hover{color:var(--accent)}

/* ============================================================
   密码小眼睛 / 确认密码 / 随机用户名 / 头像选择器 / 改名笔
   ============================================================ */
.af{position:relative}
.af .eye,.af .dice{
  flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  cursor:pointer;color:var(--text-dim);padding:0;
}
.af .eye:hover,.af .dice:hover{color:var(--accent);border-color:var(--accent)}
.af input[type=text],.af input[type=password],.af input[type=email]{text-overflow:ellipsis}
.dice{font-size:16px;font-weight:900;line-height:1}

.af-avatars{display:block;margin:2px 0 10px;border:var(--bw) dashed var(--border);padding:10px}
.af-avt{display:block;font-size:12px;font-weight:800;color:var(--text-dim);margin-bottom:8px}
.af-avt i{font-style:normal;font-weight:600;font-size:11px;opacity:.7}
.av-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.av-grid .av{
  width:100%;aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:2px solid transparent;padding:0;background:var(--bg);
  transition:transform .12s ease,border-color .12s ease;
}
.av-grid .av:hover{transform:scale(1.12)}
.av-grid .av.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,255,0,.25)}

.pen-btn{
  flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:2px 2px 0 var(--border);cursor:pointer;color:var(--text);
}
.pen-btn:hover{background:var(--accent);color:#000;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--border)}
.ub-edit{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.ub-edit input{
  flex:1;min-width:0;padding:6px 9px;font:inherit;font-size:13px;font-weight:800;
  background:var(--bg);border:var(--bw) solid var(--accent);color:var(--text);
}
.ub-edit input:focus{outline:none}

/* ============================================================
   我的收藏 / 退出登录：做成显眼的大按钮
   ============================================================ */
.ub-menu > a.ub-act{
  display:flex;align-items:center;gap:10px;margin:10px 12px;padding:12px 14px;
  font-weight:900;font-size:14.5px;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:4px 4px 0 var(--border);
}
.ub-menu > a.ub-act .icon{width:18px;height:18px;flex:none}
.ub-menu > a.ub-act:first-child{margin-top:4px}
.ub-menu > a.ub-act:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--border);color:var(--text)}
.ub-menu > a.ub-fav:hover{background:var(--accent);color:#000}
.ub-menu > a.ub-out:hover{background:#ff5d73;color:#000}
.ub-menu > a.ub-act:hover .icon{filter:none}

/* 找回密码表单：发送按钮 + 冷却态 */
#reset-form .btn-ghost{margin-bottom:10px}
#rs-send:disabled{opacity:.6;cursor:not-allowed}
#rs-msg{min-height:18px;margin-bottom:8px;font-size:12.5px;font-weight:700}
#rs-msg.ok{color:#3ddc84}
#rs-msg.err{color:#ff5d73}

/* ============================================================
   找回密码弹窗按钮：改成霓虹主色填充，避免灰色显得像禁用的
   ============================================================ */
#rs-send,#rs-submit{
  background:var(--accent);color:#000;border-color:var(--border);
  box-shadow:var(--sh);font-weight:900;
}
#rs-send:hover,#rs-submit:hover{background:#fff;color:#000;transform:translate(-1px,-1px)}
#rs-send:disabled{
  background:var(--bg-card);color:var(--text-dim);
  box-shadow:none;cursor:not-allowed;transform:none;
}

/* ============================================================
   详情页左上角：返回列表（Steam 式面包屑）
   ============================================================ */
.back-list{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 14px;
  background:var(--bg-card);border:var(--bw) solid var(--border);
  box-shadow:3px 3px 0 var(--border);
  font-weight:800;font-size:13.5px;color:var(--text);text-decoration:none;
}
.back-list .icon{width:16px;height:16px}
.back-list i{font-style:normal;color:var(--text-dim);font-weight:600}
.back-list:hover{background:var(--accent);color:#000;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}
.back-list:hover i{color:#000}

/* ============================================================
   用户菜单：点击打开（hover 也保留），避免输入法候选框弹出时
   鼠标一动菜单就关掉，导致改名输不了中文
   ⚠️ hover 只给有鼠标的设备：触屏的粘性 :hover 会让第二次点击
   「关不掉」菜单（tap 后 hover 常驻，菜单看起来无法关闭）
   ============================================================ */
@media(hover:hover){
  .userbox:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
}
.userbox.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}

/* ============================================================
   霓虹灯用户名：一条粉→青光带从左向右流动（底色保持紫，不是三色同时铺满）
   ============================================================ */
.neon-name{color:#b585ff;filter:drop-shadow(0 0 5px rgba(181,133,255,.5))}
@supports (-webkit-background-clip:text){
  .neon-name{
    background:linear-gradient(90deg,
      #b585ff 0%,#b585ff 18%,
      #ff6ec7 25%,#5cc8ff 32%,
      #b585ff 39%,#b585ff 68%,
      #ff6ec7 75%,#5cc8ff 82%,
      #b585ff 89%,#b585ff 100%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:neonFlow 3s linear infinite;
  }
}
@keyframes neonFlow{
  from{background-position:100% 50%}
  to{background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){.neon-name{animation:none}}

/* ============================================================
   教程步骤配图 / 下载通道配图 / 弹层真实二维码
   ============================================================ */
.step-img{
  display:block;margin:10px 0 2px;max-width:min(420px,100%);
  border:var(--bw) solid var(--border);box-shadow:3px 3px 0 var(--border);
  background:var(--bg);position:relative;
}
.step-img img{display:block;width:100%;height:auto}
.step-img span{
  display:block;padding:6px 10px;font-size:11.5px;font-weight:800;
  color:var(--text-dim);border-top:2px dashed var(--border);
}
.step-img:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}
.step-img:hover span{color:var(--accent)}

.ch-img{
  display:block;margin:10px 12px 4px;width:min(220px,60%);
  border:var(--bw) solid var(--border);box-shadow:3px 3px 0 var(--border);
  background:#fff;
}
.ch-img img{display:block;width:100%;height:auto}
.ch-img:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}

.qr-real{width:min(300px,80vw);height:auto;image-rendering:pixelated;background:#fff;padding:8px}

/* 教程大图弹窗：点步骤配图弹出，不跳新网页 */
#imgview-modal .imgview-box{
  position:relative;width:min(1080px,94vw);max-width:1080px;
  padding:12px;background:var(--bg-card);
}
#imgview-modal .imgview-box img{
  display:block;width:100%;height:auto;max-height:88vh;object-fit:contain;
  background:#fff;border:2px solid var(--border);
}
#imgview-modal .imgview-x{
  position:absolute;top:-18px;right:-8px;z-index:5;
  width:38px;height:38px;display:grid;place-items:center;
  border:var(--bw) solid var(--border);background:var(--bg);
  color:var(--text);font-size:22px;font-weight:900;line-height:1;
  cursor:pointer;box-shadow:3px 3px 0 var(--border);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
#imgview-modal .imgview-x:hover{background:var(--accent);color:#fff;transform:translate(-1px,-1px)}

/* 「我的积分」标签放大到跟积分数字一样大 */
.ub-points .row.big .ub-pl{
  font-size:24px;font-weight:900;color:#fff;line-height:1;
}
.ub-points .row.big small{display:none}

/* 四条统计行标签改白色（原来是暗灰，看着像禁用） */
.ub-points .row > span{color:#fff;font-weight:700}
.ub-points .row span i{color:#c9c9d4}

/* 签到按钮：签到前霓虹可点，签到后灰色锁定（保持原语义） */
.mini-btn{background:var(--accent);color:#000}
.mini-btn.done{background:#2a2a33;color:#8a8a99;box-shadow:none;cursor:default}

/* 我的收藏 / 退出登录：实色填充，不再像禁用的 */
.ub-menu > a.ub-act{color:#000}
.ub-menu > a.ub-fav{background:var(--accent)}
.ub-menu > a.ub-fav:hover{background:#fff}
.ub-menu > a.ub-out{background:#ff5d73}
.ub-menu > a.ub-out:hover{background:#ff8a9c}

/* ---------- 侧栏下载通道：紧凑卡片 ---------- */
.side-card .dl.dl-side{
  padding:10px 11px;gap:9px;
  grid-template-columns:auto 1fr;
}
.side-card .dl.dl-side .ic{width:34px;height:34px;border-radius:8px}
.side-card .dl.dl-side .ic svg{width:21px;height:21px}
.side-card .dl.dl-side .info .n{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-card .dl.dl-side .info .s{font-size:11px;margin-top:2px}
.side-card .dl.dl-side .ops{
  grid-column:1 / -1;display:flex;gap:6px;flex-wrap:nowrap;
}
.side-card .dl.dl-side .ops .op{
  flex:1;text-align:center;padding:5px 6px;font-size:11px;
}
.side-card .dl.dl-side .dl-foot{margin-top:1px;padding-top:6px;font-size:11px}

/* ============================================================
   迭代 v2：版面加宽 + 字体放大 + 网盘配色 + 蓝链 + 悬浮按钮
   ============================================================ */
:root{--wrap:1420px}
.detail{grid-template-columns:minmax(0,1fr) 430px;gap:32px;align-items:stretch}

/* 字体整体放大一档 */
.title-row h1{font-size:30px}
.pill{font-size:12.5px;padding:5px 12px}
.panel h3{font-size:17px}
.panel{padding:24px}
.hero-kv .stat,.kv .stat{font-size:14.5px}
.hero-stats b{font-size:15.5px}
.hero-stats span{font-size:12px}
.alert .h{font-size:15px}
.alert li{font-size:14.5px;line-height:1.65}
.step .c .h{font-size:15px}
.step .c .d{font-size:14px;line-height:1.7}
.entry-content,.entry-content p{font-size:14.5px;line-height:1.85}
.entry-content li{font-size:14.5px}
.dl .info .n{font-size:15px}
.dl .info .s{font-size:12.5px}
.side-card .dl.dl-side .info .n{font-size:13.5px}
.side-card .dl.dl-side .info .s{font-size:11.5px}
.step-num,.step .num{font-size:15px}

/* 正文蓝链 */
.txt-link{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.txt-link:hover{color:var(--accent)}

/* 相关推荐可点击 */
a.rel-link{display:flex;cursor:pointer}
a.rel-link:hover .v{color:var(--accent)}

/* 网盘按钮配色（摆脱全粉） */
.op-quark{background:linear-gradient(135deg,#3f6fe0,#8f7bff);color:#fff}
.op-baidu{background:#06a7ff;color:#fff}
.op-xunlei{background:#2b7cff;color:#fff}
.op-uc{background:#3fae4a;color:#fff}
.op-mobile{background:#4aa3ff;color:#fff}
.op-aliyun{background:#ff9f43;color:#000}
.op-tianyi{background:#a55eea;color:#fff}
.op-d115{background:#e15f41;color:#fff}
.op-quark:hover,.op-baidu:hover,.op-xunlei:hover,.op-uc:hover,
.op-mobile:hover,.op-aliyun:hover,.op-tianyi:hover,.op-d115:hover{filter:brightness(1.12)}
.side-card .dl.dl-side .ops .op{border-color:var(--border)}

/* 下载通道卡：长页面滚动时吸附在顶部，填补右侧空白 */
.side-card.sticky-card{position:sticky;top:76px;z-index:5}

/* 右侧悬浮 置顶/置底 */
/* 置顶置底：挂在右侧浮动栏「收藏」标签旁边（不影响正文与卡片） */
.page-fab{
  position:fixed;
  right:52px;            /* 收藏标签在 right:0 宽 34px，再往左留 18px 间距 */
  top:calc(50% + 200px); /* 收藏栏底部(50%+176)再下移 24px */
  bottom:auto;
  left:auto;
  transform:none;
  z-index:44;            /* 低于收藏栏(55)与社群(54) */
  display:flex;flex-direction:column;gap:6px;
}
.page-fab button{
  width:34px;height:34px;
  border:2px solid var(--border);
  background:var(--bg-card);color:var(--text);
  font-weight:900;font-size:15px;line-height:1;
  border-radius:8px;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  display:grid;place-items:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .1s;
}
.page-fab button:hover{background:var(--accent);color:#0d0d12}
.page-fab button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}

/* 窄屏：收藏栏隐藏了，置顶置底单独在右上 */
@media(max-width:900px){
  .page-fab{right:12px;top:auto;bottom:230px}
  .page-fab button{width:36px;height:36px;font-size:15px}
}

/* ---------- 1. 下载通道卡：骨架（top / row / qr / warn / foot） ---------- */
.dl-list{display:grid;gap:10px}
.dl-drive{
  position:relative;background:var(--bg-card);
  border:var(--bw) solid var(--border-soft);border-radius:var(--radius);
  box-shadow:4px 4px 0 var(--bw2, rgba(0,0,0,.9));
  display:flex;flex-direction:column;gap:9px;padding:12px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.dl-drive:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;border-color:var(--border)}
.dl-drive:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.dl-top{display:flex;align-items:center;gap:10px}
.dl-top .info{min-width:0}
.dl-top .info .n{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:900;line-height:1.25}
.dl-top .info .s{font-size:11px;color:var(--text-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-rec{
  flex:none;font-size:10px;font-weight:900;letter-spacing:.5px;
  padding:1px 6px;background:var(--accent);color:#0d0d12;border:2px solid #0d0d12;
  transform:rotate(-2deg);
}
.dl-row{display:flex;gap:8px;align-items:stretch}
.dl-code{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:7px 10px;background:var(--bg-elev);
  border:2px solid var(--border-soft);border-radius:var(--radius);
  cursor:pointer;transition:background .12s ease,transform .12s ease;
}
.dl-code span{font-size:10.5px;color:var(--text-dim);font-weight:700}
.dl-code b{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:14px;font-weight:900;color:var(--text);letter-spacing:1px}
.dl-code:hover{background:#23232f;transform:translate(-1px,-1px)}
.dl-code.none{cursor:default;opacity:.75}
.dl-code.none:hover{transform:none;background:var(--bg-elev)}
.dl-drive .ops{flex:1;display:flex}
.op-big{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 10px;font-size:13px;font-weight:900;white-space:nowrap;
  color:#0d0d12;border:2px solid #0d0d12;border-radius:var(--radius);
  box-shadow:3px 3px 0 #000;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.op-big .ico{width:15px;height:15px;flex:none}
.op-big:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000;filter:brightness(1.1)}
.op-big:active{transform:translate(2px,2px);box-shadow:0 0 #000}
.op-big.on{background:#0d0d12!important;color:var(--accent);box-shadow:3px 3px 0 var(--accent)}

/* ---------- 2. 内网盘配色（自家霓虹版，替代原单一粉色） ---------- */
.is-quark .ic,.is-quark .op-big:not(.on){background:#00d9ff;color:#0d0d12}
.is-baidu .ic,.is-baidu .op-big:not(.on){background:#3b7bff;color:#fff}
.is-xunlei .ic,.is-xunlei .op-big:not(.on){background:#22c55e;color:#0d0d12}
.is-uc .ic,.is-uc .op-big:not(.on){background:#a855f7;color:#fff}
.is-mobile .ic,.is-mobile .op-big:not(.on){background:#ff5d8f;color:#0d0d12}
.is-aliyun .ic,.is-aliyun .op-big:not(.on){background:#ff9500;color:#0d0d12}
.is-tianyi .ic,.is-tianyi .op-big:not(.on){background:#c084fc;color:#0d0d12}
.is-d115 .ic,.is-d115 .op-big:not(.on){background:#f97316;color:#0d0d12}
.is-local .ic,.is-local .op-big:not(.on),
.is-other .ic,.is-other .op-big:not(.on){background:var(--accent);color:#0d0d12}
/* 正文/教程扫码图升级成的卡片：图标青色、按钮同色，和网盘卡区分开 */
.is-qr .ic,.is-qr .op-big:not(.on){background:#22d3ee;color:#0d0d12}
.dl-drive .ic{border-color:#0d0d12}

/* ---------- 3. 内联二维码区 ---------- */
.dl-qr{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px;background:#0b0b10;border:2px dashed var(--border-soft);border-radius:var(--radius);
  animation:gh-drop .16s ease-out;
}
.dl-qr .qrimg{padding:6px;background:#fff;border:2px solid var(--border-soft);line-height:0}
.dl-qr .qrimg img{width:150px;height:150px;object-fit:contain}
.dl-qr .qr-none{padding:26px 12px;font-size:11.5px;color:var(--text-dim);background:var(--bg-elev)}
.dl-qr small{font-size:11px;font-weight:700;color:var(--text-dim);text-align:center}
@keyframes gh-drop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 4. PC 转存二次确认 ---------- */
.pc-warn{
  padding:11px 12px;background:rgba(255,45,85,.12);
  border:2px solid #ff5d8f;border-radius:var(--radius);
  box-shadow:3px 3px 0 #000;animation:gh-drop .16s ease-out;
}
.pc-warn p{margin:0 0 10px;font-size:12px;font-weight:700;line-height:1.65;color:#ffd7e1}
.pc-warn-btns{display:flex;gap:8px;flex-wrap:wrap}
.pc-warn-btns button,.pc-warn-btns a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:7px 10px;font-size:12.5px;font-weight:900;white-space:nowrap;
  border:2px solid #0d0d12;border-radius:var(--radius);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.pc-warn-btns button{background:#fff8e7;color:#0d0d12;box-shadow:2px 2px 0 #000}
.pc-warn-btns a{background:var(--accent-2);color:#0d0d12;box-shadow:2px 2px 0 #000}
.pc-warn-btns button:hover,.pc-warn-btns a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #000}
.pc-warn-btns button:active,.pc-warn-btns a:active{transform:translate(2px,2px);box-shadow:0 0 #000}
.dl-foot{display:flex;justify-content:center;margin-top:-2px}
.pc-link{
  padding:2px 0;font-size:11.5px;font-weight:700;color:var(--text-mute);
  cursor:pointer;background:none;border:none;
}
.pc-link:hover{color:var(--accent);text-decoration:underline}

/* ---------- 5. 侧边栏整列常驻（超高可悬停滚动） ---------- */
.detail{align-items:start}
.detail aside.side-sticky{position:sticky;top:76px;align-self:start;display:block}
.detail aside.side-sticky .side-inner{
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--border-soft) transparent;
}
.detail aside.side-sticky .side-inner::-webkit-scrollbar{width:8px}
.detail aside.side-sticky .side-inner::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.detail aside.side-sticky .side-inner::-webkit-scrollbar-thumb{background:var(--border-soft)}
.detail aside.side-sticky .side-inner::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}
.side-card.sticky-card{position:static!important}
@media(max-width:1024px){
  .detail aside.side-sticky{position:static}
  .detail aside.side-sticky .side-inner{max-height:none;overflow:visible}
}

/* ---------- 6. 详情页动作按钮：三色 + 统一动效 ---------- */
.acts .op{
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
  border:2px solid var(--border-soft);box-shadow:3px 3px 0 #000;
}
.acts .op:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
.acts .op:active{transform:translate(2px,2px);box-shadow:0 0 #000}
.acts .op-fav{background:#ffd23f;color:#0d0d12}
.acts .op-fav.on{background:#ff2d55;color:#fff}
.acts .op-share{background:var(--accent);color:#0d0d12}
.acts .op-reco{background:var(--accent-2);color:#0d0d12}
.acts .op:hover{filter:brightness(1.12)}

/* ---------- 7. 列表卡片：图片缓慢放大 + 类型标签 + 错峰入场 ---------- */
.card{overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.card .thumb{overflow:hidden;position:relative}
.card .thumb img,.card .thumb .ph{
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.card:hover .thumb img,.card:hover .thumb .ph{transform:scale(1.07)}
.card-body .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.tag-chip{
  display:inline-block;padding:1px 8px;font-size:11px;font-weight:900;line-height:18px;
  color:#0d0d12;border:2px solid #0d0d12;border-radius:var(--radius);
  transition:transform .12s ease,box-shadow .12s ease;
}
.tag-chip.tc-0{background:var(--accent)}
.tag-chip.tc-1{background:var(--accent-2)}
.tag-chip.tc-2{background:var(--accent-3)}
.tag-chip.tc-3{background:#ff5d8f;color:#fff}
.card:hover .tag-chip{box-shadow:2px 2px 0 #000}
.grid > .card,.grid > article{animation:card-pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.grid > .card:nth-child(1),.grid > article:nth-child(1){animation-delay:0ms}
.grid > .card:nth-child(2),.grid > article:nth-child(2){animation-delay:45ms}
.grid > .card:nth-child(3),.grid > article:nth-child(3){animation-delay:90ms}
.grid > .card:nth-child(n+4),.grid > article:nth-child(n+4){animation-delay:135ms}
@keyframes card-pop{0%{opacity:0;transform:translateY(26px) scale(.82) rotate(-3deg)}60%{opacity:1;transform:translateY(-5px) scale(1.03) rotate(1deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .grid > .card,.grid > article{animation:none}
  .card .thumb img,.card .thumb .ph{transition:none}
}

/* hidden 属性兜底：避免 display 规则覆盖导致本该隐藏的区块显示出来 */
[hidden]{display:none!important}

/* ============================================================
   v4 · 2026-10-25
   1) 教程工具中心：demo tools.html 的工具宫格（此前样式只存在于 demo 内联 <style>，未搬进来）
   2) 列表卡片标题动效（灵感来自 steamdownload.cn 的 _game-card_1rsmw_）：
      hover 时实色底从左向右展开铺满整个标题，完成态 100% 覆盖无缺口）
   ============================================================ */
/* 工具卡网格。
   auto-fit + minmax 让列数自适应卡片数量：
   3 张卡时自动铺满 3 列，不会像固定 repeat(4) 那样右边空一格。
   「启动器合集」已按用户要求删除，所以现在是 3 张。 */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
@media(max-width:960px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tool{
  border:3px solid var(--border);background:var(--bg-elev);box-shadow:var(--sh);
  padding:18px;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.tool:hover{transform:translateY(-6px);box-shadow:10px 10px 0 var(--glow)}
.tool:active{transform:translateY(-2px)}
/* 工具卡现在是 <a>（用户要求：点了要能跳到对应下载页）。
   链接态默认会有下划线/变色，这里全部压掉，保持卡片外观。 */
a.tool{display:block;text-decoration:none;color:inherit}
a.tool:hover{color:inherit}
/* 卡内右上角来源标（官网 / GitHub / 微软官方） */
.tool-src{
  display:inline-block;margin-left:6px;padding:1px 5px;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;
  vertical-align:2px;
  background:var(--bg-input);color:var(--text-mute);
  border:1px solid var(--border-soft);
}
/* 底部「前往下载 ↗」，hover 时变强调色 */
.tool-go{
  display:inline-flex;align-items:center;gap:4px;margin-top:10px;
  font-size:11.5px;font-weight:900;color:var(--accent);
}
.tool:hover .tool-go{color:var(--accent-3)}
.tool .ic{
  width:46px;height:46px;background:var(--accent);border:3px solid var(--border);
  display:grid;place-items:center;color:#000;font-size:22px;margin-bottom:12px;
}
.tool .n{font-weight:900;font-size:14.5px;margin-bottom:5px}
.tool .d{font-size:12px;color:var(--text-dim);line-height:1.6}

/* ---------- 卡片标题动效 ---------- */
/* 马克笔笔触复刻 steamdownload.cn _game-card_1rsmw_；
   盒子向上下铺大 8px（原版 top:0/bottom:0 只盖半行文字）——笔触 SVG 实心带只占
   viewBox 高度 77%，铺大后完整盖住标题，超出由标题 overflow:hidden 裁掉。
   右端收锋（抄原版几何，不要垫层！）：
     主笔触宽 calc(100% - 16px)，右端 26px 是三条逐渐收窄的波浪 TIP，
     波浪缝隙透出深色底 = 毛笔扫过的收锋 taper；主笔触与 TIP 重叠 10px 衔接。
   ⚠️ 千万不要加 linear-gradient(#fff,#fff) 实心垫层 —— 会变成方形色块（用户明确否定）。 */
.card-body .t{display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:visible}
.card-body .t a{
  position:relative;z-index:1;color:var(--text);text-decoration:none;
  display:inline-block;vertical-align:top;
  max-width:100%;max-height:2.8em;overflow:hidden;
  padding:0 16px 0 6px;margin:0 -16px 0 -6px;
}
.card-body .t a:hover{color:var(--text)}
@media(hover:hover){
  .card-body .t a:after{
    content:"";position:absolute;top:-8px;right:-6px;bottom:-8px;left:-6px;pointer-events:none;
    mix-blend-mode:difference;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E %3Cfilter id='e' x='-10%25' y='-20%25' width='120%25' height='140%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.25' numOctaves='2' seed='6'/%3E %3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E %3C/filter%3E %3Cg filter='url(%23e)' fill='%23fff'%3E %3Cpath d='M0 8C18 8 32 10 40 13C30 17 14 20 0 22Z'/%3E %3Cpath fill-opacity='.75' d='M0 27C8 27 16 28 22 30C16 33 8 34 0 34Z'/%3E %3Cpath d='M0 38C14 39 27 42 37 48C25 51 12 52 0 51Z'/%3E %3C/g%3E %3C/svg%3E") 100% 0 / 26px 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E %3Cfilter id='e' x='-2%25' y='-25%25' width='104%25' height='150%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.32' numOctaves='3' seed='4'/%3E %3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E %3C/filter%3E %3Cfilter id='h' x='-4%25' y='-40%25' width='108%25' height='180%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.2' numOctaves='2' seed='2'/%3E %3CfeDisplacementMap in='SourceGraphic' scale='14'/%3E %3CfeGaussianBlur stdDeviation='3.5 2.5'/%3E %3C/filter%3E %3Cpath filter='url(%23h)' fill='%23fff' fill-opacity='.2' d='M2 30C2 8 30 2 80 3S330 4 400 6V56C330 57 120 58 70 58S2 52 2 30Z'/%3E %3Cpath filter='url(%23e)' fill='%23fff' d='M8 30C6 13 26 7 70 7S300 8 400 9V50C300 52 200 52 90 53S10 48 8 30Z'/%3E %3C/svg%3E") 0 0 / calc(100% - 16px) 100% no-repeat;
    -webkit-mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0 / 250% 100% no-repeat;
    mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0 / 250% 100% no-repeat;
    opacity:0;filter:blur(3px);
    transition:opacity .2s ease,filter .2s ease,-webkit-mask-position 0s .2s,mask-position 0s .2s;
  }
  .card:hover .card-body .t a:after{
    -webkit-mask-position:0 0;mask-position:0 0;opacity:1;filter:blur(0);
    transition:opacity .12s ease,filter .5s ease,-webkit-mask-position .4s cubic-bezier(.2,.7,.3,1),mask-position .4s cubic-bezier(.2,.7,.3,1);
  }
}
@media(hover:hover) and (prefers-reduced-motion:reduce){
  .card-body .t a:after{transition:none}
}

/* ============================================================
   迭代 v5：手机端适配（策略抄自 steamdownload.cn 移动端）
   断点：925px 平板 / 720px 大手机 / 560px 手机 / 380px 小屏
   坑位记录：网格列必须 minmax(0,1fr)——1fr = minmax(auto,1fr)，
   会被内容 min-content 撑爆（rank 行实测 625px），媒体查询直接失效。
   ============================================================ */

/* ---------- 5.1 顶栏汉堡按钮（桌面隐藏） ---------- */
.menu-btn{
  display:none;margin-left:4px;
  width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;
  background:var(--bg-card);color:var(--text);
  border:var(--bw) solid var(--border);border-radius:var(--radius);
  box-shadow:3px 3px 0 #000;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.menu-btn:active{transform:translate(2px,2px);box-shadow:0 0 #000}
.menu-btn svg{width:20px;height:20px}
body.nav-open .menu-btn{background:var(--accent);color:#000}

@media(max-width:925px){
  /* 顶栏两行：logo + 汉堡 + 登录；导航收成可展开抽屉 */
  .topbar .wrap{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .menu-btn{display:inline-flex}
  .topbar .nav{
    display:none;flex-basis:100%;flex-direction:column;gap:2px;
    padding-top:8px;margin-top:2px;border-top:2px dashed var(--border-soft);
  }
  body.nav-open .topbar .nav{display:flex}
  .topbar .nav > a,.nav .dd-trigger{padding:11px 12px;font-size:15px;border-radius:var(--radius)}
  /* 抽屉内下拉菜单直接平铺（触屏没有 hover）
     ⚠️ 必须限定在 .topbar .nav 内 —— 不然会把右上角用户菜单(.userbox .dropdown-menu)
     也永久平铺开，登录态下「我的积分/退出登录」整块常驻遮挡内容（用户实测 bug） */
  .topbar .nav .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;
    margin:0;padding:2px 0 6px 18px;min-width:0;
  }
  .topbar .nav .dropdown-menu a{padding:9px 11px;font-size:14px}
  .topbar-right{margin-left:auto}
  /* 工具宫格 4 → 2 列（sd 同款） */
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .wrap{padding:0 14px}
  /* 小屏 logo 只留图标 */
  .logo .txt{display:none}
  .topbar-right .ub-name{max-width:76px}
}

/* ---------- 5.2 详情页底部悬浮「立即下载」（≤720px，抄 sd 的 _fab） ---------- */
.m-fab{display:none}
@media(max-width:720px){
  .m-fab{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:-90px;z-index:60;
    width:max-content;margin:0 auto;
    padding:12px 26px;font-size:15px;font-weight:900;line-height:1.2;
    color:#0d0d12;background:var(--accent);
    border:var(--bw) solid var(--border);border-radius:999px;
    box-shadow:4px 4px 0 #000;
    text-decoration:none;white-space:nowrap;
    transition:bottom .28s cubic-bezier(.3,1.5,.5,1),transform .12s ease,box-shadow .12s ease;
    pointer-events:none;
  }
  .m-fab svg{width:18px;height:18px}
  .m-fab.on{bottom:18px;pointer-events:auto}
  .m-fab:active{transform:translateX(-50%) translate(4px,4px);box-shadow:0 0 #000}
}

/* ---------- 5.3 详情页内容（≤720px） ---------- */
@media(max-width:720px){
  .detail{gap:20px;margin-top:16px}
  .hero2{gap:16px;margin-top:14px}
  .hero2 .cover{max-width:420px}
  .title-row{margin-top:14px}
  .title-row h1{font-size:22px}
  .panel{padding:16px}
  .panel h3{font-size:15.5px}
  .hero-kv .stat,.kv .stat{font-size:13.5px;flex-wrap:wrap;gap:2px 8px}
  .hero-kv .stat .v,.kv .stat .v{word-break:break-all}
  .hero-stats b{font-size:14px}
  .hero-stats span{font-size:11px}
  .back-list{font-size:13px}
  .dl-list{gap:8px}
  .dl-drive{padding:10px}
  /* grid 子项默认 min-width:auto，会被「我不管，我就要用 PC 转存 (๑•̀ㅂ•́)و✧」
     这种长句子顶到 377px，把 390px 的手机屏挤出横向滚动条 */
  .dl-list > .dl-drive{min-width:0}
  .dl-drive .dl-foot{min-width:0}
  .dl-drive .pc-link{white-space:normal;text-align:center;line-height:1.55;word-break:break-word}
  /* 提取码 + 操作按钮纵向堆叠（sd 的 _stacked 模式） */
  .dl-row{flex-direction:column;gap:7px}
  .dl-code{width:100%;justify-content:center}
  .dl-drive .ops{width:100%}
  .op-big{height:42px;font-size:13.5px}
  .dl-foot{margin-top:7px}
  /* 磁力卡二维码区纵向 */
  .mag-open .qr{flex-direction:column;align-items:flex-start;gap:10px}
  .mag-mrow{flex-direction:column;gap:8px}
  .mag-mrow input{width:100%}
  /* 弹窗收紧 */
  .modal-box{width:min(440px,calc(100vw - 28px));padding:18px}
  .modal-box h3{font-size:16px}
  .modal-ops .btn,.modal-ops .op{flex:1;text-align:center}
  /* 大图查看器 */
  .imgview-box{padding:8px}
  .imgview-box img{max-height:calc(100vh - 120px)}
  .imgview-x{top:6px;right:6px;width:36px;height:36px;font-size:22px}
}

/* ---------- 5.4 手机（≤560px） ---------- */
@media(max-width:560px){
  .grid{gap:10px}
  .card-body{padding:9px 10px 10px}
  .card-body .t{font-size:13.5px;max-height:2.8em}
  .rank-head{flex-wrap:wrap;gap:8px}
  .rank-tabs{flex-wrap:wrap;gap:5px}
  .rank-tab{min-height:34px;padding:5px 10px;font-size:12px}
  .rank-row{gap:8px;padding:9px 4px}
  .rank-thumb{display:none}
  .rank-meta{font-size:10.5px}
  .hero-stats{gap:6px}
  .hero-stats > div{padding:7px 8px 6px}
  .hero-stats b{font-size:13.5px;white-space:normal;word-break:break-all}
  .hero-stats span{font-size:10.5px}
  .pill{font-size:11px;padding:4px 9px}
  .stat{flex-wrap:wrap;gap:2px 8px}
  .rowline{grid-template-columns:minmax(0,1fr)}
  .av-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .px-steps{gap:7px}
  .sortbar{gap:6px;padding:10px 0}
  .toastbox{left:14px;right:14px;transform:none;width:auto}
  .toastbox.show{transform:none}
  /* 详情页主标题再小一档 */
  .title-row h1{font-size:20px}
  .mag-link{font-size:11.5px}
}

/* ---------- 5.5 小屏（≤380px） ---------- */
@media(max-width:380px){
  .title-row h1{font-size:18px}
  .grid{gap:8px}
  .card-body{padding:8px}
  .hero{padding:22px 0}
  .hero-t{font-size:19px}
}

/* ---------- 5.6 兜底：v2 的 .detail 双栏规则在本文件 1238 行，晚于 328 行的
   900px 媒体查询，级联上会反超 → 在文件末尾重新声明塌缩（后声明者胜） ---------- */
@media(max-width:900px){.detail{grid-template-columns:minmax(0,1fr)}}
/* 子比搜索浮层/弹层在窄屏会被内容撑到文档宽（hidden 但仍占位），钳回视口 */
.main-search,.main-search .container{max-width:100vw}

/* ---------- 5.7 长内容防撑爆：URL / 长串强制断行 + body 横向裁剪兜底 ----------
   教程步骤、评论区里贴 pan.baidu.com/s/xxxx 这种长链接，
   min-content 比侧栏还宽 → 整页横向溢出。overflow-wrap:anywhere
   只在放不下时才断，不影响正常排版。 */
.step .c,.step .c .d,.step .c .h,.txt-link,.kv .v,.hero-kv .v,.comment-list .c,.comment-content,.article-content{
  overflow-wrap:anywhere;word-break:break-word;
}
/* 兜底：极端情况下也不允许整页横向滚动（不影响 position:sticky） */
body{overflow-x:clip}

/* ============================================================
   迭代 v6：首页（index.php）补样式 —— .hero-t / .sec-head 此前从未有过样式，
   首页 hero 文案贴底、区块头挤成一行就是这里缺的；桌面基础 + 手机端适配。
   ============================================================ */
/* ---------- Hero 文案（居中，桌面/手机通用） ---------- */
.hero-t{
  position:relative;z-index:1;text-align:center;padding:0 26px;
  font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--text);
}
.hero-t .d{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--text-dim);line-height:1.7}
/* ---------- 栏目区块头（图标标题 + 副标 + 查看更多） ---------- */
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-ttl{
  display:inline-flex;align-items:center;gap:8px;
  font-size:20px;font-weight:900;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;
}
.sec-ttl .icon{width:20px;height:20px;color:var(--accent)}
.sec-sub{font-size:12px;color:var(--text-mute);font-weight:700}
.sec-head .more{
  margin-left:auto;font-size:12.5px;font-weight:800;
  color:var(--text-dim);text-decoration:none;white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.sec-head .more:hover{color:var(--accent)}
/* ---------- 工具页头部：窄屏允许换行不挤压 ---------- */
@media(max-width:560px){
  .block-head{flex-wrap:wrap;gap:8px 10px}
  .block-head h2{font-size:18px}
}
/* ---------- 手机端首页：hero 压扁 / 副标隐藏 / 排行榜两行 ---------- */
@media(max-width:560px){
  .hero{height:auto;padding:38px 0;margin-top:16px}
  .hero-t{font-size:19px;padding:0 18px}
  .hero-t .d{font-size:12px;margin-top:8px}
  .sec-head{flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
  .sec-ttl{font-size:17px}
  .sec-sub{display:none}
  /* 排行榜行：名字一行、元信息一行（原来挤在一行被截成「崩坏：星…」） */
  .rank-row{
    display:grid;grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:"badge thumb name" "badge thumb meta";
    column-gap:10px;row-gap:2px;padding:10px 6px;
  }
  .rank-row .rank-badge{grid-area:badge;align-self:center}
  .rank-row .rank-thumb{grid-area:thumb;align-self:center}
  .rank-row .rank-name{grid-area:name}
  .rank-row .rank-meta{grid-area:meta;white-space:normal}
}

/* ============================================================
   迭代 v7：大图画廊 —— 计数 + 左右翻页 + 底部缩略图条 + 触摸滑动 + ESC
   UI 走本站硬朗暗黑霓虹（方角 / 3px 描边 / 4px 硬投影），不抄参考站的圆角黄块
   ============================================================ */
#imgview-modal .imgview-box{
  padding:0;
  width:min(960px,calc(100vw - 20px));
}
#imgview-modal .gv-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:2px dashed var(--border-soft);
}
#imgview-modal .gv-count{
  font-family:ui-monospace,Consolas,monospace;font-weight:900;font-size:13px;
  color:var(--accent);background:var(--bg-elev);
  border:2px solid var(--border-soft);padding:4px 10px;
}
/* 关闭按钮从「悬在框外」改成收进顶栏（覆盖旧定位） */
#imgview-modal .gv-top .imgview-x{
  position:static;top:auto;right:auto;
  width:34px;height:34px;font-size:20px;box-shadow:3px 3px 0 #000;
}
#imgview-modal .gv-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:16px 60px;min-height:240px;
}
#imgview-modal .gv-stage img{
  max-width:100%;width:auto;height:auto;
  max-height:calc(100vh - 320px);min-height:200px;
  display:block;background:#fff;
  border:3px solid var(--border);box-shadow:4px 4px 0 #000;
}
#imgview-modal .gv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:54px;display:grid;place-items:center;
  background:var(--bg-elev);color:var(--text);
  border:3px solid var(--border);box-shadow:4px 4px 0 #000;
  font-size:26px;font-weight:900;line-height:1;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
#imgview-modal .gv-nav:hover{background:var(--accent);color:#000}
#imgview-modal .gv-nav:active{transform:translateY(-50%) translate(2px,2px);box-shadow:0 0 #000}
#imgview-modal .gv-prev{left:10px}
#imgview-modal .gv-next{right:10px}
#imgview-modal .gv-thumbs{
  display:flex;gap:8px;overflow-x:auto;
  padding:10px 12px;border-top:2px dashed var(--border-soft);
  scrollbar-width:thin;
}
#imgview-modal .gv-thumb{
  position:relative;flex:none;width:76px;height:50px;
  border:2px solid var(--border-soft);background:var(--bg-input);
  padding:0;cursor:pointer;overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
#imgview-modal .gv-thumb img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
#imgview-modal .gv-thumb i{
  position:absolute;left:2px;top:2px;z-index:1;
  font-style:normal;font-family:ui-monospace,monospace;
  font-size:10px;font-weight:900;line-height:1;padding:2px 4px;
  background:#000c;color:#fff;
}
#imgview-modal .gv-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
#imgview-modal .gv-thumb.on i{background:var(--accent);color:#000}
@media(max-width:560px){
  #imgview-modal .gv-stage{padding:12px 48px;min-height:200px}
  #imgview-modal .gv-stage img{max-height:calc(100vh - 330px);min-height:160px}
  #imgview-modal .gv-nav{width:38px;height:48px;font-size:22px}
  #imgview-modal .gv-thumb{width:58px;height:40px}
}

/* ---------- 触屏保险：杀掉用户菜单的粘性 hover ----------
   移动端浏览器 tap 后 :hover 常驻，第二次点击看起来「关不掉」。
   JS 在首次触摸时给 <html> 加 .using-touch，这里用它覆盖 hover 显隐；
   .open（点击态）单独恢复，保证点开仍可见。 */
html.using-touch .userbox:hover .dropdown-menu{opacity:0;visibility:hidden;transform:none}
html.using-touch .userbox.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}

/* ---------- 评论头像尺寸修复 ----------
   Zibll 的封面图规则把 .avatar 一并命中（width:100%;height:100% → 724px 巨圆）。
   评论区头像约束回常规尺寸，其余场景（封面）不受影响。 */
.comment-list .avatar,
#comments .avatar,
.comment .avatar,
.comment-author .avatar,
.comment-body .avatar{
  width:44px;height:44px;max-width:44px;
  border-radius:50%;flex:none;object-fit:cover;
}

/* ============================================================
   正文相册（[gallery]）：2 列硬边框栅格 + 序号角标 + 点击进组图灯箱
   之前完全没有 .gallery 样式，4 张截图是竖着堆满屏的
   ============================================================ */
.entry-content .gallery{
  display:grid;gap:10px;margin:2px 0 14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.entry-content .gallery-columns-1{grid-template-columns:1fr}
.entry-content .gallery-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.entry-content .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.entry-content .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.entry-content .gallery-item{margin:0;min-width:0}
.entry-content .gallery-icon{height:100%}
.entry-content .gallery-icon img{
  width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;
  border:3px solid var(--border);display:block;
}

/* 可点击放大的图片：整块是热区，右上/左上给序号角标 */
.gh-imgbox{display:block;position:relative;cursor:zoom-in;height:100%;outline:none}
.gh-imgbox img{transition:transform .15s ease,box-shadow .15s ease}
.gh-imgbox:hover img,.gh-imgbox:focus-visible img{
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--accent);
}
.gh-imgbox::after{
  content:attr(data-idx);
  position:absolute;top:7px;left:7px;z-index:2;
  min-width:21px;height:21px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;line-height:1;
  color:#fff;background:rgba(0,0,0,.66);
  border:2px solid rgba(255,255,255,.7);border-radius:999px;
  pointer-events:none;
}
.gh-imgbox::before{
  content:"点击放大";
  position:absolute;right:7px;bottom:7px;z-index:2;
  padding:3px 7px;font-size:10.5px;font-weight:800;line-height:1.2;
  color:#0d0d12;background:var(--accent);
  opacity:0;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
}
.gh-imgbox:hover::before,.gh-imgbox:focus-visible::before{opacity:1;transform:translateY(0)}

@media (max-width:720px){
  .entry-content .gallery,
  .entry-content .gallery-columns-3,
  .entry-content .gallery-columns-4{grid-template-columns:1fr}
}

/* ============================================================
   下载卡片布局修正
   .dl 基础类是 display:grid + align-items:center，而 .dl-drive 改成了
   flex 列布局但没重置 align-items —— 结果 .dl-top / .dl-row 被压成
   内容宽度并水平居中（图标和标题缩在卡片中间）。这里修回撑满。
   ============================================================ */
.dl-drive{align-items:stretch}
.dl-drive .dl-top,.dl-drive .dl-row,.dl-drive .dl-qr,.dl-drive .pc-warn{width:100%}

/* 侧栏紧凑版：图标 + 标题一行，提取码 + 扫码一行，PC 转存在底部 */
.side-card .dl.dl-side{padding:11px 12px;gap:8px;display:flex;flex-direction:column}
.side-card .dl.dl-side .dl-top{gap:9px}
.side-card .dl.dl-side .info{flex:1;min-width:0}
.side-card .dl.dl-side .dl-row{gap:7px}
.side-card .dl.dl-side .dl-row .ops{flex:1;min-width:0}
.side-card .dl.dl-side .dl-row .op-big{width:100%;height:36px;font-size:11.5px;padding:0 8px}
.side-card .dl.dl-side .dl-code{padding:0 9px;height:36px}
.side-card .dl.dl-side .dl-code b{font-size:13px}

/* 直链卡片：扫码 + 立即下载 双按钮（没有「转存」，所以不给提取码框） */
.dl-drive .dl-row .ops .op-big.dl-go{
  background:#0d0d12;color:var(--accent);
  border-color:var(--accent);box-shadow:3px 3px 0 var(--accent);
  text-decoration:none;
}
.dl-drive .dl-row .ops .op-big.dl-go:hover{filter:brightness(1.18);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--accent)}
.side-card .dl.dl-side .dl-row .ops .op-big{font-size:11px;letter-spacing:0;gap:4px}
.side-card .dl.dl-side .dl-row .ops .op-big .ico{width:13px;height:13px}

/* ============================================================
   下载卡「一句话简介」（截图红框里那块空白）
   ============================================================ */
.dl-drive .dl-brief{
  margin:0;width:100%;box-sizing:border-box;
  padding:6px 9px;
  font-size:11.5px;line-height:1.7;font-weight:600;
  color:var(--text-dim);
  background:rgba(255,255,255,.03);
  border-left:3px solid var(--accent);
}
.side-card .dl.dl-side .dl-brief{font-size:11px;padding:6px 8px}

/* ============================================================
   正文教程截图：单图居中 + 边框 + 点击进组图灯箱
   （文档导入的教程图片，之前一张都没有）
   ============================================================ */
.entry-content .gh-shot{
  margin:2px 0 14px;padding:0;
  display:flex;flex-direction:column;align-items:center;
}
.entry-content .gh-shot .gh-imgbox{display:inline-block;max-width:100%;height:auto}
.entry-content .gh-shot img{
  max-width:100%;height:auto;display:block;
  border:3px solid var(--border);
  background:#0b0b10;
}
.entry-content .gh-shot .gh-imgbox::after{display:none}

/* 文档里的小标题更紧凑一点，避免两步之间空隙过大 */
.entry-content h3{
  margin:26px 0 10px;padding-left:11px;
  font-size:16px;font-weight:900;line-height:1.5;color:var(--text);
  border-left:4px solid var(--accent);
}
.entry-content h3:first-child{margin-top:4px}
.entry-content h4{
  margin:18px 0 7px;font-size:14.5px;font-weight:900;color:var(--accent);
}
.entry-content blockquote{
  margin:10px 0;padding:9px 12px;font-size:13px;color:var(--text-dim);
  border-left:3px solid var(--border-soft);background:rgba(255,255,255,.03);
}
.entry-content code{
  padding:1px 6px;font-size:12.5px;font-family:ui-monospace,monospace;
  color:var(--accent);background:rgba(204,255,0,.10);border-radius:3px;
}
.entry-content > p:empty{display:none}

/* 教程截图：过高的图（手机长截图）限高，避免一张图占满整屏 */
.entry-content .gh-shot img{max-height:660px;width:auto}
/* 扫码类图片单独收小：二维码本来就要能扫，但没必要占满屏 */
.entry-content .gh-shot.gh-qr img{max-height:300px;width:auto}
.entry-content .gh-shot.gh-qr::after{content:none}

/* ============================================================
   A. 网盘右侧「短注释」：5~8 字说明这个网盘里装的是什么
      数据来自子比原生「资源下载 → 名称」字段，一行不换行
   ============================================================ */
.dl-top .info{flex:1;min-width:0}
.dl-top .dl-tag{
  margin-left:auto;flex:none;max-width:120px;
  padding:2px 7px;
  font-size:10.5px;font-weight:900;line-height:1.55;
  color:var(--text-dim);background:rgba(255,255,255,.07);
  border:1.5px solid var(--border-soft);border-radius:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-style:normal;
}
/* 侧栏窄，但 92px 会把「启动器 + 指令生成器」这类名字截成「启动器 + 指令...」，
   实测完整显示需要 105px；120px 既够用，也不会挤到左边的网盘名（.info 是 flex:1）。 */
.side-card .dl.dl-side .dl-top .dl-tag{font-size:10px;padding:2px 6px;max-width:120px}

/* ============================================================
   B. 下载栏里的「正文二维码 + 正文链接」汇总区
   ============================================================ */
.dl-media{margin-top:13px;padding-top:12px;border-top:2px dashed var(--border-soft)}
.dl-media-h{
  font-size:11px;font-weight:900;color:var(--text-dim);
  letter-spacing:.04em;margin:0 0 8px;
}
.dl-qr-grid + .dl-media-h{margin-top:13px}
.dl-qr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.dl-qr-cell{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;cursor:zoom-in;
}
.dl-qr-cell img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  background:#fff;border:2px solid var(--border-soft);padding:3px;
  transition:border-color .15s ease,transform .15s ease;
}
.dl-qr-cell:hover img,.dl-qr-cell:focus-visible img{border-color:var(--accent);transform:translateY(-1px)}
.dl-qr-cell span{
  font-size:10px;font-weight:800;line-height:1.45;color:var(--text-dim);
  text-align:center;width:100%;padding-bottom:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dl-links{margin:0;display:flex;flex-direction:column;gap:6px}
.dl-link{
  display:flex;align-items:center;gap:6px;
  padding:4px 6px;background:rgba(255,255,255,.04);
  border:1.5px solid var(--border-soft);
}
.dl-link a{
  flex:1;min-width:0;font-size:10.5px;font-weight:700;color:var(--accent-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dl-link a:hover{text-decoration:underline}
.dl-link button{
  flex:none;cursor:pointer;font-size:10px;font-weight:900;line-height:1;
  height:20px;min-height:0;padding:0 8px;border:0;
  background:var(--accent);color:#0d0d12;border-radius:2px;
}
.dl-link button:hover{filter:brightness(1.12)}

/* ============================================================
   C. 正文二维码统一尺寸（原来一张大一张小，特别突兀）
      子比正文图默认 width:100%，285px 的二维码被拉成 700px，
      这里强制成 180×180 的方框，contain 不裁切。
      只认 PHP 打的 .gh-qr 类（alt 含「扫码/二维码」且长宽比接近 1），
      别用 img[alt*="扫码"] 这种兜底选择器——下载页截图也会被压成 180。
   ============================================================ */
.entry-content .gh-imgbox.gh-qr img{
  width:180px!important;height:180px!important;
  max-width:180px!important;max-height:180px!important;
  object-fit:contain;background:#fff;padding:3px;
}
.entry-content .gh-imgbox.gh-qr{display:inline-block;width:auto;height:auto;max-width:100%}

/* ============================================================
   E. 正文分块卡片（gh-sec）
   
   背景：详情页正文原来是「一串 h2 + 段落」平铺，长文很难扫读。
   改成和源站一致的「分块卡片」：每块一个粗边框 + 硬阴影 + 标题栏，
   块与块之间留白，扫一眼就知道有几块、每块讲什么。

   为什么用 Gutenberg 的 group 块 + className：
     · group 是原生块，后台编辑器里能整体拖动/删除/改设置
     · 自定义 class 只负责外观，不承担结构语义
     · 不像裸 <div> 那样会被 Gutenberg 当成 classic block 或洗掉样式
   ============================================================ */
.gh-sec{
  margin:0 0 18px;padding:0;
  border:3px solid var(--border);
  background:var(--bg-elev);
  box-shadow:5px 5px 0 var(--glow);
  overflow:hidden;
}
.gh-sec-hd{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-bottom:2px solid var(--border-soft);
  background:rgba(255,255,255,.03);
}
.gh-sec-t{
  margin:0;font-size:15px;font-weight:900;color:var(--text);
  letter-spacing:.3px;
  /* 覆盖子比给 h2 的默认大间距与大字号 */
  line-height:1.3;
}
.gh-sec-t::before{
  /* 标题左侧的小色块，强化"这是一个块"的视觉 */
  content:"";display:inline-block;width:4px;height:14px;
  background:var(--accent);margin-right:8px;vertical-align:-2px;
}
.gh-sec-note{
  margin-left:auto;font-size:11px;font-weight:700;
  color:var(--text-mute);white-space:nowrap;
}
.gh-sec-bd{padding:14px}
.gh-sec-bd > *:first-child{margin-top:0}
.gh-sec-bd > *:last-child{margin-bottom:0}
/* 块内的表格去掉外边距，避免和卡片内边距叠加 */
.gh-sec-bd .wp-block-table{margin:0}
.gh-sec-bd .wp-block-table table{border:none;background:none}
.gh-sec-bd .wp-block-table td{
  border:none;border-bottom:1px dashed var(--border-soft);
  padding:7px 4px;font-size:13px;
}
.gh-sec-bd .wp-block-table tr:last-child td{border-bottom:none}
.gh-sec-bd .wp-block-table td:first-child{
  color:var(--text-mute);width:88px;font-weight:700;white-space:nowrap;
}

/* ---- 玩家评测 ---- */
.gh-review-sum{
  margin:0 0 12px!important;font-size:12.5px!important;
  color:var(--text-dim);font-weight:700;
}
.gh-review-sum .gh-ok{color:var(--accent-3)}
.gh-review{
  margin:0 0 10px!important;padding:11px 13px!important;
  border:2px solid var(--border-soft);
  background:rgba(255,255,255,.025);
}
.gh-review:last-child{margin-bottom:0!important}
.gh-rv-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.gh-rv-hd b{font-size:12.5px;font-weight:900;color:var(--text)}
.gh-rv-b{font-size:10px;font-weight:900;padding:1px 6px;border-radius:2px}
.gh-rv-good{background:var(--accent);color:#0d0d12}
.gh-rv-bad{background:#ff5c5c;color:#fff}
.gh-rv-m{margin-left:auto;font-size:11px;color:var(--text-mute)}
.gh-rv-c{
  font-size:13px;line-height:1.72;color:var(--text-dim);
  /* 引用内容保留换行，但别撑破卡片 */
  overflow-wrap:anywhere;
}

/* ---- 折叠块（原生 <details>，不依赖 JS） ----
   
   为什么用 details 而不是 JS：
     · 浏览器原生支持，零 JS
     · 后台 Gutenberg 重新保存时不会丢状态
     · 反过来说，如果用 div + onclick 那种，内联事件可能被 KSES 过滤，
       而且状态类在编辑器里不生效，会出现"展开后关不掉"的假象
   这里只负责把默认的三角箭头换成一个按钮样式的条。 */
.gh-fold{margin:10px 0 0}
.gh-fold > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border:2px solid var(--border-soft);
  background:rgba(255,255,255,.04);
  font-size:12.5px;font-weight:900;color:var(--text-dim);
  user-select:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
/* 去掉 Chrome/Safari 的默认三角 */
.gh-fold > summary::-webkit-details-marker{display:none}
.gh-fold > summary::marker{content:""}
/* 前置箭头 */
.gh-fold > summary::before{
  content:"▸";font-size:11px;line-height:1;
  transition:transform .18s ease;
  color:var(--accent);
}
.gh-fold[open] > summary::before{transform:rotate(90deg)}
.gh-fold > summary:hover{
  background:var(--accent);color:#0d0d12;border-color:var(--accent);
}
.gh-fold > summary:hover::before{color:#0d0d12}
.gh-fold-n{font-weight:700;opacity:.75}
.gh-fold[open] > summary .gh-fold-t::after{content:"（收起）";font-weight:700;opacity:.6;margin-left:4px}
.gh-fold-bd{
  margin-top:10px;padding-top:12px;
  border-top:2px dashed var(--border-soft);
  animation:gh-fold-in .22s ease-out;
}
@keyframes gh-fold-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.gh-fold-bd > *:first-child{margin-top:0}
.gh-fold-bd > *:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .gh-fold-bd{animation:none}
  .gh-fold > summary::before{transition:none}
}

/* ---- 游戏简介：区别于正文的排版 ----
   用户要求：「字体改得有特色一点，符合整个网页的风格」
   
   做法：
     · 用衬线/等宽混排拉开与正文的层次（正文是系统无衬线）
     · 字号略大、行距更松，读起来像「介绍文案」而不是「说明文字」
     · 左侧加一条竖线，形成引用块的观感
     · 首段首字下沉（::first-letter），强化「这是一段介绍」的感觉
   */
.gh-about{
  padding:2px 0 2px 14px;
  border-left:3px solid var(--accent);
}
.gh-about-p{
  margin:0 0 13px!important;
  font-family:"Georgia","Songti SC","STSong","SimSun",serif;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.2px;
  color:var(--text);
  font-weight:500;
}
.gh-about-p:last-child{margin-bottom:0!important}
/* 首段首字下沉
   
   ⚠️ 只能作用在**折叠区之外**的第一段。
   之前写成 `.gh-about .gh-about-p:first-child`，而折叠区
   `<details><div class="gh-fold-bd"><p class="gh-about-p">…` 里
   那段也是其父容器的 first-child，于是折叠内容的第一段
   （「城市分为风格差异明显的多个区域…」）也被加了下沉，
   表现为展开后突然冒出一个巨大的「城」字。
   用 `.gh-about > .gh-about-p:first-child` 限定直接子元素即可。 */
.gh-about > .gh-about-p:first-child::first-letter{
  float:left;
  font-size:2.6em;
  line-height:.92;
  padding:3px 8px 0 0;
  font-weight:900;
  color:var(--accent);
  font-family:"Georgia",serif;
}
.gh-about .gh-fold-bd .gh-about-p::first-letter{
  float:none;font-size:inherit;line-height:inherit;
  padding:0;font-weight:inherit;color:inherit;font-family:inherit;
}
@media (max-width:720px){
  .gh-about{padding-left:10px}
  .gh-about-p{font-size:14px;line-height:1.9}
  .gh-about > .gh-about-p:first-child::first-letter{font-size:2.2em}
}

/* ---- 配置要求：直接展开，加粗 + 键值分列 ----
   用户要求：「配置要求就 4 行 5 行，不需要折叠，
             字体可以加粗一下，样式可以多样化一点，符合整个网页的风格」
   
   设计：
     · 每行是「左键 右值」两列，键用等宽字体 + 强调色，值加粗
     · 行间用虚线分隔，最后一行去掉
     · 左侧加一个 • 方块，和整套 brutal 风格一致
     · 不做折叠，一次看全
   */
.gh-req{
  list-style:none;margin:0;padding:0!important;
}
.gh-req li{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 2px;margin:0!important;
  border-bottom:1px dashed var(--border-soft);
  font-size:13.5px;line-height:1.6;
}
.gh-req li:last-child{border-bottom:none;padding-bottom:0}
.gh-req li:first-child{padding-top:0}
/* 左侧小方块 */
.gh-req li::before{
  content:"";flex:none;
  width:5px;height:5px;margin-top:7px;
  background:var(--accent);
  box-shadow:1px 1px 0 var(--glow);
}
/* 键：等宽、强调色、加粗 */
.gh-req-k{
  flex:none;min-width:74px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:900;
  color:var(--accent);letter-spacing:.2px;
  text-transform:none;
}
/* 值：加粗、亮色、允许换行 */
.gh-req-v{
  flex:1;min-width:0;
  font-weight:800;color:var(--text);
  overflow-wrap:anywhere;
}
@media (max-width:720px){
  .gh-req li{flex-direction:column;gap:2px;padding:7px 2px}
  .gh-req li::before{display:none}
  .gh-req-k{min-width:0}
  .gh-req-v{font-size:13px}
}

/* ---- 工具页专用：步骤列表 / 注意事项 ---- */
.gh-steps{
  counter-reset:gh-step;margin:0;padding:0!important;list-style:none;
}
.gh-steps li{
  counter-increment:gh-step;
  position:relative;padding:8px 0 8px 34px;margin:0!important;
  border-bottom:1px dashed var(--border-soft);
  font-size:13.5px;line-height:1.7;color:var(--text-dim);font-weight:600;
}
.gh-steps li:last-child{border-bottom:none;padding-bottom:0}
.gh-steps li:first-child{padding-top:0}
.gh-steps li::before{
  content:counter(gh-step);
  position:absolute;left:0;top:7px;
  width:20px;height:20px;
  display:grid;place-items:center;
  background:var(--accent);color:#0d0d12;
  font-size:11px;font-weight:900;
  font-family:ui-monospace,monospace;
}
.gh-note-list{
  margin:0;padding:0!important;list-style:none;
}
.gh-note-list li{
  position:relative;padding:6px 0 6px 18px;margin:0!important;
  font-size:13px;line-height:1.7;color:var(--text-dim);
}
.gh-note-list li::before{
  content:"▸";position:absolute;left:0;top:6px;
  color:var(--accent);font-size:11px;
}
@media (max-width:720px){
  .gh-steps li{padding-left:30px;font-size:13px}
  .gh-steps li::before{width:18px;height:18px;font-size:10px}
}

/* 窄屏：卡片内边距收一点，标题不要换行挤掉 note */
@media (max-width:720px){
  .gh-sec-bd{padding:11px}
  .gh-sec-hd{padding:9px 11px;gap:6px}
  .gh-sec-t{font-size:14px}
  .gh-sec-note{font-size:10px}
  .gh-rv-m{margin-left:0;width:100%}
}

/* ============================================================
   D. 统一扫码弹层：所有二维码（网盘 / 正文 / 教程）都按
      「网盘点开」的形式展示：大图白底 + 标题 + 提示 + 可选链接
   ============================================================ */
.qrview-box{max-width:460px;text-align:center}
.qrview-box .gv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.qrview-box .gv-top:empty,.qrview-box .gv-top .gv-count:empty{display:none}
.qrview-h{justify-content:center;margin-bottom:8px}
.qrview-sub{margin-bottom:4px!important}
.qrview-stage{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 10px}
.qrview-img{
  flex:none;width:min(300px,74vw);min-height:150px;
  background:#fff;border:3px solid var(--border);padding:8px;
  display:flex;align-items:center;justify-content:center;
}
.qrview-img .qr-real{display:block;width:100%;height:auto;image-rendering:auto;background:#fff}
.qrview-tip{font-size:12px;font-weight:700;color:var(--text-dim);line-height:1.6}
.qrview-box .modal-ops{justify-content:center}

/* ── 教程类文章：分步正文 + 插图 ── */
.gh-tut-bd{margin:6px 0 0}
.gh-tut-bd > p{margin:0 0 8px;font-size:13.5px;line-height:1.85;color:var(--text-dim)}
.gh-tut-bd > p:last-child{margin-bottom:0}
.gh-tut-bd code{
  background:rgba(255,255,255,.07);border:1px solid var(--border-soft);
  border-radius:4px;padding:1px 6px;font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--accent);
}
.gh-tut-note{
  margin:10px 0 0!important;padding:9px 11px;
  background:rgba(255,170,0,.07);border-left:3px solid rgba(255,170,0,.55);
  border-radius:0 4px 4px 0;font-size:12.5px!important;line-height:1.8!important;
  color:var(--text-dim);
}
.gh-steps > li > strong{display:block;font-size:14px;margin-bottom:2px;color:var(--text)}

/* 教程插图 */
.gh-fig{margin:10px 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.gh-fig a{display:inline-block;max-width:100%;line-height:0;border-radius:6px;overflow:hidden;
  border:1px solid var(--border-soft);cursor:zoom-in}
.gh-fig img{max-width:100%;height:auto;display:block;transition:opacity .15s ease}
.gh-fig a:hover img{opacity:.88}
.gh-fig-cap{font-size:11.5px;color:var(--text-mute);line-height:1.5;padding-left:2px}
.gh-warn-list > li{color:var(--text-dim)}

@media(max-width:640px){
  .gh-tut-bd > p{font-size:12.5px;line-height:1.8}
  .gh-fig{margin:8px 0}
  .gh-steps > li > strong{font-size:13px}
}