/* 零维E界 Wiki · 只读资料库
   配色令牌复用 /help/index_2.3.2.css，这里只写布局 */
*{ box-sizing: border-box; }
body{
  margin:0; padding:0; background: var(--bg); color: var(--text-primary);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,"Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.7;
}
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 12px 48px; }

/* 顶栏 */
.top{ position: sticky; top:0; z-index: 20; background: var(--card-bg);
      border-bottom: 1px solid var(--stroke); backdrop-filter: blur(12px); }
:root{ --top-ctl-h: 38px; }   /* 顶栏控件统一高度 */
.top-in{ max-width:1120px; margin:0 auto; padding: 10px 16px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:600;
        color: var(--text-primary); white-space:nowrap; }
.brand:hover{ text-decoration:none; }
.brand-logo{ width:26px; height:26px; border-radius: var(--radius-sm); object-fit:cover; display:block; }
.brand em{ color: var(--accent); font-style:normal; }
.nav{ display:flex; gap:14px; font-size:14px; flex-wrap:wrap; }
.nav a{ color: var(--text-secondary); }
.nav a.cur{ color: var(--accent); font-weight:600; }
/* 搜索：WinUI3 风格，整块是一个输入框，按钮内嵌在右侧 */
.top .search{
  margin-left:auto; display:flex; align-items:center; gap:0;
  height: var(--top-ctl-h); padding:0; overflow:hidden;
  background: var(--control-bg);
  border:1px solid var(--stroke); border-bottom-color: var(--stroke-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.top .search:focus-within{
  background: var(--control-focus-bg);
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -1px 0 0 var(--accent), 0 2px 8px rgba(0,170,255,.18);
}
.top .search input{
  width: 210px; height:100%; padding:0 4px 0 12px; font-size:13px; outline:none;
  color: var(--text-primary); background: transparent; border:none; border-radius:0;
}
.top .search input::placeholder{ color: var(--text-tertiary); }
.top .search button{
  flex:0 0 34px; width:34px; height:100%; margin:0; padding:0;
  border:none; border-radius:0; background-color:transparent;
  background-image: url('/assets/img/ic_search.png');
  background-position: center; background-repeat:no-repeat; background-size:15px;
  opacity:.8; cursor:pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.top .search button:hover{ background-color: var(--control-hover); opacity:1; }
.top .search button:active{ background-color: var(--card-pressed); background-size:13px; }
body.dark .top .search button{ filter: invert(1); opacity:.72; }
body.dark .top .search button:hover{ opacity:.95; }

/* 顶栏窄屏：品牌 + 问答一行，搜索框独占一行（占满宽度），导航最后一行可横滑 */
@media (max-width: 600px){
  .top-in{
    display:grid; gap:8px; padding:8px 12px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand brand" "search qa" "nav nav";
  }
  .brand{ grid-area:brand; font-size:16px; }
  .nav{ grid-area:nav; flex-wrap:nowrap; overflow-x:auto; gap:12px;
        padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar{ display:none; }
  .top .search{ grid-area:search; margin:0; width:100%; }
  .top .search input{ width:auto; flex:1 1 auto; min-width:0; }
  .top .search button{ flex:0 0 34px; padding:0; }
  .qa_btn{ grid-area:qa; margin:0 0 0 8px; padding:0; width: var(--top-ctl-h);
           height: var(--top-ctl-h); align-self:center; }
  /* pager 里品牌行不显示，栅格也跟着少一行 */
  body.pager-shift .top-in{ grid-template-areas: "search qa" "nav nav"; }
}

/* 浅色模式的卡片与顶栏也给半透明 + 模糊（深色早就有了，之前两边视觉不统一） */
body:not(.dark) .card{ background: rgba(255, 255, 255, 0.78); }
body.dark .card{ background: rgba(255, 255, 255, 0.084); }
body .card{ -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); }
/* 顶栏跟 changelog 的 switchbar 完全一致：--bg-layer + blur(30px) saturate(160%) */
body .top{
  background: var(--bg-layer);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}

/* 通用块 */
.card{ background: var(--card-bg); border:1px solid var(--stroke); border-radius: var(--radius);
       padding:16px 18px; margin-top:14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
h1{ font-size:24px; line-height:1.3; margin:18px 0 6px; }
h2{ font-size:16px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--stroke); }
h3{ font-size:14px; margin:16px 0 8px; color: var(--text-secondary); }
.sub{ color: var(--text-tertiary); font-size:12.5px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.tile{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px;
       border:1px solid var(--stroke); background: transparent; }
.tile:hover{ background: var(--control-hover); text-decoration:none; }
.tile img{ width:38px; height:38px; image-rendering: pixelated;
           object-fit: cover; object-position: left center;   /* 图标是 128×64 两帧，只显示左半帧 */ }
.tile .no{ color: var(--text-tertiary); font-size:11.5px; font-variant-numeric: tabular-nums; }
.tile .nm{ font-size:13.5px; color: var(--text-primary); }

/* 属性徽章 */
.tb{ display:inline-block; padding:1px 9px 1px 5px; margin:1px 2px 1px 0; border-radius: 10px;
     font-size:12px; line-height:19px; color:#fff; white-space:nowrap; }
.tb .tico{ width:14px; height:14px; vertical-align:-2px; margin-right:3px; }
/* 裁好的属性徽章图 */
.tbimg{ height:20px; width:auto; vertical-align:-4px; margin:1px 3px 1px 0; }
.card h2 .tbimg{ height:26px; vertical-align:-6px; }
.catimg{ height:20px; width:auto; vertical-align:-4px; }

/* 图片 */
.art{ width:160px; height:160px; object-fit:contain; image-rendering:pixelated; }
.iart{ width:48px; height:48px; object-fit:contain; image-rendering:pixelated; }
.iico{ width:24px; height:24px; object-fit:contain; image-rendering:pixelated;
       vertical-align:middle; margin-right:6px; display:inline-block; }
/* 宝可梦小图标（128×64 两帧，只取左半帧） */
.mini{ width:32px; height:32px; image-rendering:pixelated; vertical-align:middle;
       object-fit:cover; object-position:left center; margin-right:6px; display:inline-block; }
/* 道具图标 + 名字排一行（训练家携带、训练家自带道具） */
.itemcell{ display:inline-flex; align-items:center; gap:4px; margin-right:10px; }
.itemcell .iico{ width:22px; height:22px; margin-right:0; }
.tcard-line .iico{ width:22px; height:22px; margin-right:0; }

/* 种族值 */
.stats{ display:grid; grid-template-columns: 64px 1fr 42px; gap:4px 10px; align-items:center; max-width:520px; }
.stats .k{ color: var(--text-secondary); font-size:13px; }
.stats .bar{ height:7px; border-radius:4px; background: var(--control-hover); overflow:hidden; }
.stats .bar i{ display:block; height:100%; background: var(--accent); border-radius:4px; }
.stats .v{ text-align:right; font-variant-numeric: tabular-nums; font-size:13px; }

/* 数据表 */
table{ border-collapse: collapse; width:100%; font-size:13.5px; margin:0; }
th,td{ border-bottom:1px solid var(--stroke); padding:6px 10px; text-align:left; vertical-align:top; }
th{ font-weight:600; color: var(--text-secondary); background: var(--control-hover); }
tr:last-child td{ border-bottom:none; }

/* 招式表 */
.moves{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:2px 14px; font-size:13.5px; }
.moves .lv{ color: var(--text-tertiary); font-variant-numeric: tabular-nums; display:inline-block; width:44px; }

/* 训练家 */
.filter{ display:flex; gap:10px; align-items:center; margin:10px 0 0; }
.filter select{ padding:5px 8px; border:1px solid var(--stroke-strong); border-radius: var(--radius-sm);
                background: var(--card-bg); color: var(--text-primary); font-size:13px; }
.tart{ width:110px; height:110px; object-fit:contain; image-rendering:pixelated;
       border:1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card-bg); }
.tart-empty{ display:flex; align-items:center; justify-content:center; }
.tart-empty span{ font-size:12px; color: var(--text-tertiary); }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; }
.tcard{ border:1px solid var(--stroke); border-radius: var(--radius-sm); padding:10px 12px; background: var(--card-bg); }
.tcard-head{ display:flex; gap:10px; align-items:center; }
.tcard-head img{ width:48px; height:48px; flex:0 0 48px; image-rendering:pixelated;
                 object-fit:cover; object-position:left center; }
.tcard-ph{ display:block; width:48px; height:48px; flex:0 0 48px; }
.tcard-name{ font-size:14.5px; font-weight:600; }
.tcard-name .lv{ font-weight:400; font-size:12px; color: var(--text-tertiary); }
.tcard-meta{ margin-top:3px; }
.tag{ display:inline-block; margin-right:4px; padding:0 6px; border-radius:8px; font-size:11.5px;
      color: var(--text-secondary); background: var(--control-hover); }
.tcard-line{ font-size:12.5px; color: var(--text-secondary); margin-top:6px; display:flex; gap:6px; }
.tcard-line .k{ color: var(--text-tertiary); flex:0 0 auto; }
.mvtags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
a.mvtag{ font-size:11.5px; color: var(--text-secondary); border:1px solid var(--stroke);
         border-left-width:3px; border-radius:8px; padding:1px 7px; }
a.mvtag:hover{ background: var(--control-hover); color: var(--text-primary); }

/* 说明条 */
.note{ margin-top:12px; padding:9px 12px; border-radius: var(--radius-sm);
       border:1px solid var(--stroke); background: var(--card-bg);
       font-size:13px; color: var(--text-secondary); line-height:1.6; }
.note b{ color: var(--text-primary); }

/* 唱片自定义播放器 */
.cd-player{ display:flex; align-items:center; gap:10px; margin:2px 0 8px; }
.cd-play{ flex:0 0 auto; width:34px; height:34px; padding:0; font-size:13px; line-height:1;
          cursor:pointer; color:#fff; background: var(--accent); border:none;
          border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cd-play:hover{ background: var(--accent-hover); }
.cd-play:active{ transform: scale(.94); }
.cd-meter{ position:relative; flex:1 1 auto; height:6px; min-width:80px; cursor:pointer;
           background: var(--control-hover); border-radius:3px; overflow:hidden; }
.cd-fill{ width:0; height:100%; background: var(--accent); border-radius:3px; }
.cd-time{ flex:0 0 auto; font-size:12px; color: var(--text-tertiary);
          font-variant-numeric: tabular-nums; }
.cd-name{ font-size:13px; color: var(--text-secondary); }
#cd_audio{ display:none; }

/* 页脚版权（启动器内隐藏；pager 内整体下移 40px） */
.foot-copy{ margin-top:8px; font-size:11.5px; line-height:1.7; color: var(--text-tertiary); }
body.in-launcher .foot{ display:none; }
/* 启动器内嵌页：页面底色透明，露出启动器背景 */
body.pager-shift{ background: transparent; }
/* 启动器内已经有自己的标题栏，顶栏的 logo + 品牌名不重复显示 */
body.pager-shift .brand{ display: none; }

/* 顶栏是 sticky：用自身 padding-top 让出标题栏高度，滚动后也不会和标题栏重叠 */
body.pager-shift .top{ top:0; padding-top:50px; }
/* 启动器内不提供主题切换（跟随启动器） */
body.in-launcher #theme_toggle{ display:none; }

/* 右下角按钮组：主题切换 + 返回顶部（样式对齐 help 页的 corner_button） */
.corner_dock{ position:fixed; right:16px; bottom:16px; z-index:900;
              display:flex; flex-direction:column; gap:10px; }
.wb_btn{ width:36px; height:36px; padding:0; box-sizing:border-box; cursor:pointer;
                display:flex; align-items:center; justify-content:center;
                color: var(--text-primary); font-size:16px; line-height:1;
                background: var(--card-bg); border:1px solid var(--stroke-strong);
                border-radius: var(--radius-sm);
                -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
                box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wb_btn:hover{ background: var(--card-hover); }
.wb_btn:active{ transform: scale(.92); }
.wb_btn img{ width:18px; height:18px; display:block; }
body.dark .wb_btn img{ filter: invert(1); }
#to_top{ opacity:0; pointer-events:none; transition: opacity .18s ease; }
#to_top.show{ opacity:1; pointer-events:auto; }
@media (max-width: 600px){
  .corner_dock{ right:12px; bottom:12px; gap:8px; }
}

/* 帮助中心 FAQ 折叠条目 */
.faq{ border-bottom:1px solid var(--stroke); padding:9px 0; }
.faq:last-child{ border-bottom:none; }
.faq summary{ position:relative; padding-left:18px; cursor:pointer; font-size:14.5px; font-weight:600;
              color: var(--text-primary); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:'▸'; position:absolute; left:2px; color: var(--text-tertiary);
                      transition: transform .15s; }
.faq[open] summary::before{ transform: rotate(90deg); }
.faq-body{ padding:8px 0 2px 18px; font-size:13.5px; color: var(--text-secondary); }
.faq-body > div{ margin:6px 0; }
.faq-body img{ max-width:100%; height:auto; }
.faq-body table{ font-size:12.5px; }

/* 问答按钮 + 弹窗（iframe 嵌 /help/qa.php） */
.qa_btn{ flex:0 0 auto; margin-left:8px; padding:0; width: var(--top-ctl-h); height: var(--top-ctl-h);
         align-self:center; display:flex; align-items:center; justify-content:center;
         color:#fff; background: var(--accent); border:1px solid transparent;
         border-radius: var(--radius-sm); cursor:pointer; }
.qa_btn svg{ display:block; }
.qa_btn:hover{ background: var(--accent-hover); }
.qa_btn:active{ transform: scale(.96); }

#qa_modal{ display:none; }
#qa_modal.show{ display:block; }
#qa_modal .qa_mask{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.32);
                    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
#qa_modal .qa_dialog{ position:fixed; z-index:1001; right:16px; bottom:16px;
                      width:min(560px, calc(100vw - 32px)); height:min(680px, calc(100vh - 110px));
                      display:flex; flex-direction:column; overflow:hidden;
                      background: var(--bg); border:1px solid var(--stroke-strong);
                      border-radius: var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.22); }
#qa_modal .qa_bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
                   height:42px; padding:0 8px 0 14px; font-size:14px; font-weight:600;
                   color: var(--text-primary); border-bottom:1px solid var(--stroke);
                   background: var(--card-bg); }
#qa_modal .qa_close{ width:28px; height:28px; border:none; background:transparent; cursor:pointer;
                     font-size:14px; color: var(--text-secondary); border-radius: var(--radius-sm); }
#qa_modal .qa_close:hover{ background: var(--control-hover); }
#qa_modal iframe{ flex:1 1 auto; width:100%; border:none; background: var(--bg); }
@media (max-width: 600px){
  #qa_modal .qa_dialog{ left:10px; right:10px; top:48px; bottom:10px; width:auto; height:auto; }
}

/* 图鉴编号：横排小标签 */
.dexpills{ display:flex; flex-wrap:wrap; gap:6px; }
.dexpill{ padding:2px 9px; border-radius:10px; font-size:12.5px; line-height:1.7;
          color: var(--text-secondary); background: var(--control-hover); }
.dexpill b{ color: var(--text-primary); font-weight:600; font-variant-numeric: tabular-nums; }

/* 详情页图片一排：普通 / 异色 / 超闪（放不下时左右滑动，不换行） */
.art-row{ display:flex; gap:12px; flex-wrap:nowrap; align-items:flex-end;
          margin:10px 0 6px; overflow-x:auto; overflow-y:hidden;
          -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.artfig{ margin:0; text-align:center; flex:0 0 auto; }
.artfig .art{ display:block; width:150px; height:150px; object-fit:contain; image-rendering:pixelated; }
.artfig figcaption{ font-size:11.5px; color: var(--text-tertiary); margin-top:2px; }
@media (max-width: 600px){
  .art-row{ gap:10px; }
  .artfig .art{ width:132px; height:132px; }
  .artfig figcaption{ font-size:11px; }
}

/* 进化路线（带图标） */
.evo-group{ margin-bottom:10px; }
.evo-group .sub{ display:block; margin-bottom:4px; }
.evo-row{ display:flex; align-items:center; gap:8px; padding:2px 0; }
.evo-ico{ width:40px; height:40px; flex:0 0 40px; image-rendering:pixelated;
          object-fit:cover; object-position:left center; }
.evo-name{ font-size:13.5px; }
.evo-cond{ font-size:12.5px; color: var(--text-tertiary); }
.evo-arrow{ font-size:12.5px; color: var(--text-tertiary); }

/* 详情页属性相性（三行：属性 / LA / 传统） */
.type-head{ display:flex; gap:6px; flex-wrap:wrap; }
.mt-wrap{ overflow-x:auto; }
table.mt3{ width:auto; min-width:0; border-collapse:separate; border-spacing:2px 0; font-size:13px; }
table.mt3 th.rowlbl{
  position:sticky; left:0; z-index:1; white-space:nowrap; text-align:left;
  padding:6px 10px 6px 0; font-weight:600; color: var(--text-secondary);
  background: var(--card-bg); border:none; width:48px;
}
table.mt3 .tcell{
  padding:3px 1px; text-align:center; white-space:nowrap; vertical-align:middle;
  border:none; font-variant-numeric: tabular-nums;
}
table.mt3 .tbimg{ height:17px; width:auto; vertical-align:middle; margin:0; }
table.mt3 tr:nth-child(1) .tcell{ padding-bottom:2px; }
table.mt3 tr:nth-child(2) .tcell{ padding-top:2px; }
table.mt3 .up{ color:#C42B1C; font-weight:700; }
table.mt3 .down{ color:#1B7F3B; font-weight:700; }
/* 深色下这两色对比度不够，提亮一档 */
body.dark table.mt3 .up{ color:#FF8A80; }
body.dark table.mt3 .down{ color:#7BE495; }
table.mt3 .m0{ color: var(--text-tertiary); font-weight:700; }

/* 招式详情页「谁能学」 */
.learners{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:2px 10px; font-size:13px; }
.learner{ display:flex; align-items:center; gap:5px; padding:2px 4px; border-radius:6px; color: var(--text-primary); }
.learner:hover{ background: var(--control-hover); text-decoration:none; }
.learner .lico{ width:30px; height:30px; flex:0 0 30px; image-rendering:pixelated;
                object-fit:cover; object-position:left center; }
.learner .lv{ color: var(--text-tertiary); font-size:11.5px; font-variant-numeric: tabular-nums; min-width:34px; }
.learner .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 图例 */
.kv{ display:grid; grid-template-columns: 88px 1fr; gap:6px 14px; font-size:13.5px; }
.kv .k{ color: var(--text-secondary); }

.pager{ display:flex; gap:6px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.pager a, .pager span{ min-width:34px; height:32px; padding:0 10px; display:inline-flex;
  align-items:center; justify-content:center; border:1px solid var(--stroke);
  border-radius: var(--radius-xs); font-size:13px; }
.pager span.cur{ background: var(--accent); color:#fff; border-color: var(--accent); }

.foot{ text-align:center; color: var(--text-tertiary); font-size:12px; padding:28px 0 8px; line-height:1.9; }
.foot a{ color: var(--text-secondary); }

/* 首页入口 */
.entries{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:8px; }
.entry{ display:flex; align-items:baseline; gap:8px; padding:7px 12px;
        border:1px solid var(--stroke); border-radius: var(--radius-sm);
        color: var(--text-primary); min-width:0; }
.entry:hover{ background: var(--control-hover); text-decoration:none; }
.entry b{ flex:0 0 auto; font-size:14px; font-weight:600; }
.entry small{ flex:1 1 auto; min-width:0; font-size:12px; color: var(--text-tertiary);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px; }
.chip{ padding:3px 10px; border:1px solid var(--stroke-strong); border-radius: 12px;
       font-size:12.5px; color: var(--text-secondary); }
.chip.cur{ background: var(--accent); color:#fff; border-color: var(--accent); }
.table-wrap{ overflow-x:auto; }
.table-wrap table{ min-width: 460px; }

@media (max-width: 640px){
  .top .search{ width:100%; margin-left:0; }
  .top .search input{ flex:1 1 auto; width:auto; }
  h1{ font-size:20px; }
  .kv{ grid-template-columns: 76px 1fr; }
}