/*ARK-FONT-START*/
@font-face{font-family:'NotoSC';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/notosc-400.woff2?v=1104a) format('woff2')}
@font-face{font-family:'NotoSC';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/notosc-500.woff2?v=1104a) format('woff2')}
@font-face{font-family:'NotoSC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/notosc-700.woff2?v=1104a) format('woff2')}
@font-face{font-family:'NotoSC';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/notosc-800.woff2?v=1104a) format('woff2')}
/*ARK-FONT-END*/
:root{
  --bg:#070b10; --panel:#0d1620; --panel2:#11202c; --panel3:#162836;
  --line:#1d3345; --line2:#27485e;
  --tx:#e2eff6; --tx2:#8fa9ba;
  --ac:#46b4c8; --ac2:#ffaa3c; --ok:#5fd6a0; --warn:#ff8c6b;
  /* 移动端安全区（刘海屏 / 手势条） */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  /* 头部/底栏高度（桌面值，移动端在 @media 里覆盖） */
  --hdh:54px; --fth:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--tx); overflow:hidden;
  font:13px/1.5 "NotoSC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;touch-action:manipulation}
input,select{font-size:16px}          /* 移动端 <16px 会触发 iOS 自动放大 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#24404f;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#31586b}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 顶栏 ---------- */
header{
  height:var(--hdh);display:flex;align-items:center;gap:14px;
  padding:0 16px; padding-top:var(--sat); padding-left:calc(16px + var(--sal)); padding-right:calc(16px + var(--sar));
  box-sizing:content-box;
  background:linear-gradient(180deg,#11202c,#0b131b);
  border-bottom:1px solid var(--line);position:relative;z-index:30;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.5px}
.logo .mk{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,var(--ac),#2a7f92);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 0 12px rgba(70,180,200,.45)
}
/* ★ 页眉品牌头像（2026-10-14）：把原来的 🦖 emoji 方块换成门户站首页同款 NOVA 猫咪头
   （img/nova_head.webp，与「推广页眉」portal 模板同一张图，形象全站统一）；
   整块 logo 变成 <a href="../index.html">，点一下回门户主页。
   img.mk 用 a.logo img.mk（特异性 0,2,1）覆写上面 .logo .mk（0,2,0）的渐变底与 flex 居中，
   只借它的宽高/圆角/外发光。 */
a.logo{cursor:pointer;text-decoration:none;color:inherit}
.logo img.mk{display:block;object-fit:cover;background:#0b131b}
a.logo:hover img.mk,a.logo:focus-visible img.mk{box-shadow:0 0 20px rgba(70,180,200,.85)}
.logo small{color:var(--tx2);font-weight:400;font-size:11px;letter-spacing:2px}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.tbtn{
  position:relative;
  height:32px;padding:0 13px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line2);color:var(--tx);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:6px;transition:.15s
}
/* 聊天未读小红点（2026-10-12） */
.tbtn .ndot{
  position:absolute;top:-4px;right:-4px;width:10px;height:11px;border-radius:6px;
  background:#e85a5a;color:#fff;font-size:9px;font-weight:700;line-height:11px;text-align:center;
  padding:0 3px;min-width:10px;box-sizing:content-box;border:2px solid #0a121a
}
/* —— 桌面端顶栏自适应（>920px）：标签永不换行（换行会纵向渗出 54px 头部），
   宽度不足时按级收成图标；≤920px 由移动端块接管（本就有图标态）。
   实测自然总宽约 1664px（logo 230 + 7 工具钮 723 + 卡片设置组 306 + 其余 305；
   2026-10-11 公母下拉搬去属性工具条后，卡片设置组由 379 降到 306），
   所以 1780 以下必须收 —— 1366/1440/1536 笔记本全中（2026-10-07 修复）。 —— */
.tbtn .lbl{white-space:nowrap}
.cset{flex:none}
/* 公母下拉（2026-10-11 用户改定：入口从顶栏「卡片设置」组搬进「属性编辑」工具条，
   顶栏因此少了约 73px，窄屏反而更宽裕）。
   ⚠ 基础规则必须放在下方各档媒体查询**之前**，否则同特异性的后写规则会把它压掉。 */
.stats-tools select{
  height:25px;border-radius:6px;background:#0a131b;border:1px solid var(--line2);
  font-size:12px;font-weight:600;color:var(--tx);outline:none;padding:0 4px;max-width:76px
}
.stats-tools select:focus{border-color:var(--ac)}
@media (min-width:921px) and (max-width:1779px){
  /* 一级：7 个工具按钮收成图标（悬停看 tooltip，功能都在） */
  .top-actions > #btnRandomNat .lbl,.top-actions > #btnReset .lbl,
  .top-actions > #btnSave .lbl,.top-actions > #btnLoad .lbl,.top-actions > #btnVault .lbl,
  .top-actions > #btnCmd .lbl,.top-actions > #btnImport .lbl,
  .top-actions > #btnCollage .lbl,
  .top-actions > #btnBounty .lbl,.top-actions > #btnChat .lbl,
  .top-actions > #btnAdmin .lbl{display:none}
  .top-actions > #btnRandomNat,.top-actions > #btnReset,.top-actions > #btnSave,
  .top-actions > #btnLoad,.top-actions > #btnVault,.top-actions > #btnCmd,.top-actions > #btnImport,
  .top-actions > #btnCollage,
  .top-actions > #btnBounty,.top-actions > #btnChat,.top-actions > #btnAdmin{padding:0 10px}
}
@media (min-width:921px) and (max-width:1359px){
  /* 二级：再去 logo 副标题与「卡片设置」文字标签 */
  header .logo small{display:none}
  .cset .csetlb{display:none}
}
@media (min-width:921px) and (max-width:1299px){
  /* 三级：会员钮收图标 + 卡片设置组控件缩窄
     （2026-10-11：公母下拉搬进属性工具条后顶栏省下 ~73px，本档栅栏保留以防 1200–1299 挤爆） */
  .top-actions > #btnMember .lbl{display:none}
  header .logo span:not(.mk){display:none}
  .cset{gap:6px}
  .cset select{max-width:92px}
  .cset .field input{width:50px !important}
  /* （2026-10-13 颜色名移出一键改色条后，:last-child 规则已无对象，删除） */
}
@media (min-width:921px) and (max-width:1049px){
  /* 四级（窄桌面窗口）：logo 只留图标、导出钮收图标 */
  .top-actions > #btnCard .lbl{display:none}
  header .logo span:not(.mk){display:none}
  header .logo img.mk{width:30px;height:30px;border-radius:9px}
  .cset{gap:5px}
  .cset select{max-width:80px}
  .cset .field input{width:40px !important}
  .tbtn{padding:0 8px}
}
.tbtn:hover{background:#1a3040;border-color:var(--ac)}
.tbtn.primary{background:linear-gradient(135deg,#2b7f92,#46b4c8);border-color:#5cc6d8;color:#04191f}
.tbtn.primary:hover{filter:brightness(1.1)}
.tbtn.ghost{opacity:.55}
/* 一键改色：颜色 ID 输入组 */
.bulkgrp{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 5px 0 9px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:8px
}
.bulkgrp:focus-within{border-color:var(--ac)}
.bulkgrp .lb{font-size:11.5px;color:var(--tx2);white-space:nowrap}
.bulkgrp input{
  width:74px;height:100%;background:transparent;border:0;outline:0;
  color:var(--tx);font-size:12.5px;font-weight:600;font-family:inherit;letter-spacing:.3px
}
.bulkgrp input::placeholder{color:#5d7a8a;font-weight:400}
.bulkgrp .bsw{
  width:17px;height:17px;border-radius:4px;background:#3a4a55;
  border:1px solid rgba(255,255,255,.22);flex:none
}
.bulkgrp .tbtn{height:24px;padding:0 9px;font-size:12px;border-radius:6px}

/* ---------- 主区 ---------- */
main{
  height:calc(100% - var(--hdh) - var(--fth) - var(--sat) - var(--sab));
  display:grid;grid-template-columns:262px 1fr;grid-template-rows:1fr 148px;
  gap:0;
}
.pane{overflow:hidden;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.pane-r{border-right:none}
/* 「会员」面板是手机端底部 Tab 专用（≤920px 才按 data-tab 显示）。
   桌面端必须隐藏：main 是三格网格（pane-l | pane-r / stats-pane），
   第 4 个面板参与布局会把预览区压扁、整页错位（2026-10-07 实测修复）。 */
.member-pane{display:none}
.ph{
  height:38px;display:flex;align-items:center;gap:8px;padding:0 13px;
  border-bottom:1px solid var(--line);background:var(--panel);
  font-size:12px;font-weight:700;color:var(--ac);letter-spacing:.6px;flex:none
}
.ph .n{margin-left:auto;color:var(--tx2);font-weight:400;font-size:11px}
/* 属性行的双输入框图例（野生点数 / 家养加点）：常驻，字号压到最小，窄屏自动省略 */
.ph .statleg{
  font-size:10.5px;font-weight:400;letter-spacing:.2px;color:var(--tx2);
  opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
@media (max-width:1180px){ .ph .statleg{display:none} }
/* 横版 / 竖版 标记：顶部款式下拉与预览栏都带，避免横竖混用 */
.ph .vtag{
  font-size:10.5px;font-weight:700;letter-spacing:1px;line-height:1;
  padding:4px 7px;border-radius:6px;border:1px solid var(--ac);
  color:var(--ac);background:rgba(120,200,220,.10)
}
.ph .vtag.h{margin-left:auto;color:#ffd08a;border-color:rgba(255,190,120,.75);background:rgba(255,190,120,.12)}
.ph .vtag.h + .n{margin-left:8px}
.pb{flex:1;overflow:auto;min-height:0}

/* 左：龙种列表 */
.search{padding:9px 11px;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.search input{
  width:100%;height:31px;border-radius:7px;background:#0a131b;border:1px solid var(--line2);
  padding:0 10px;font-size:12.5px;outline:none
}
.search input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(70,180,200,.13)}
.dlist{padding:5px}
.ditem{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:.12s
}
.ditem:hover{background:var(--panel2)}
.ditem.on{background:linear-gradient(90deg,#17323f,#12242f);border-color:var(--line2)}
.ditem .av{
  width:34px;height:34px;border-radius:7px;background:#fff;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center
}
.ditem .av img{width:100%;height:100%;object-fit:contain}
.ditem .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ditem .sub{font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ditem .tag{font-size:9.5px;padding:1px 5px;border-radius:5px;background:#1d3a4a;color:var(--ac);flex:none}

/* 中：预览 */
.stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative;background:
    radial-gradient(circle at 50% 40%,rgba(70,180,200,.09),transparent 62%),
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(70,180,200,.045) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(70,180,200,.045) 23px 24px);
}
#cv{max-width:98%;max-height:98%;object-fit:contain;border-radius:12px;transition:background .15s;box-shadow:0 10px 40px rgba(0,0,0,.55)}
/* 龙像离屏渲染源：预览恒为卡片后 #cv 不再露脸。
   ⚠ 必须用「屏外定位」而不是 display:none —— 微信 X5/XWeb 等内核对 display:none 的
   canvas 作为 drawImage 源时采样尺寸不可靠（可能按 CSS 布局尺寸甚至 300×150 默认值
   处理），源宽高比一旦被破坏，龙就被压扁/拉宽（瘦高种尤其明显，如巨盗龙变"饼"）。
   屏外定位的 canvas 有真实布局（布局尺寸=属性尺寸 600×600），全内核行为一致。 */
#cv.hidden-src{position:absolute;left:-99999px;top:0;max-width:none;max-height:none;object-fit:fill}
/* object-fit:contain —— 保险丝：即便容器被 max-width/max-height 双轴独立钳制（布局变化后
   内联尺寸过期的场景），画布内容也绝不拉伸变形（微信 X5 等内核同样支持） */
#cv.bg-dark{background:#1f2937}          /* 对齐 arkbuddy 官方预览底色 */
#cv.bg-light{background:#fff}
#cv.bg-checker{background:repeating-conic-gradient(#2a3646 0 25%,#222c3a 0 50%) 0 0/18px 18px}
/* —— 「模板即时预览」（手机端 2026-10-08 / 桌面端同日扩展为同一形态）：
   预览区恒为「龙嵌在模板里」的整卡，底部一排模板 chip，点选即换背景（龙不动）。
   桌面端 chip 居中且字号略大；窄屏（≤920px）改为左对齐横向滚动。 —— */
#cvc{max-width:98%;max-height:98%;object-fit:contain;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.55);display:none;cursor:pointer}
/* 2026-10-12：条容器拆成 [配色按钮 | 模板 chip 条] —— 按钮在滚动容器之外，永远待在左边原位。 */
.stage .stylebar{
  position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;
  padding:18px 12px 8px;
  background:linear-gradient(0deg,rgba(6,10,15,.94) 35%,rgba(6,10,15,0));
}
.stage .stylechips{
  flex:1 1 auto;min-width:0;
  display:flex;gap:7px;align-items:center;
  /* 2026-10-10 修：原 justify-content:center 在内容超宽时会把左半边 chip 永久推出可视区
     （flex 溢出居中 → 左侧溢出不可滚达，scrollLeft 只能 ≥0），选中左侧模板时 chip 直接"消失"。
     改 flex-start + 首尾 margin:auto：不溢出时照样居中，溢出时从左排、全部可滚达。 */
  justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
/* 卡片配色入口（2026-10-12 用户改定）：常驻按钮，不随模板条拖动/滚动；用户要求「做大一点」→
   比模板 chip 高一档（桌面 38px / 手机 32px），加粗描边 + 青色辉光，明确是「按钮」而不是一枚 chip。 */
.stage .palbtn{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 16px;border-radius:11px;
  font-size:14px;font-weight:700;line-height:1;letter-spacing:.2px;white-space:nowrap;
  color:#d9f5fc;border:1px solid rgba(70,180,200,.62);
  background:linear-gradient(180deg,rgba(70,180,200,.26),rgba(70,180,200,.08)),var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -10px rgba(70,180,200,.9);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .06s;
}
.stage .palbtn:hover{color:#fff;border-color:rgba(130,225,245,.95);background:linear-gradient(180deg,rgba(70,180,200,.36),rgba(70,180,200,.14)),var(--panel)}
.stage .palbtn:active{transform:translateY(.5px)}
.stylechips .schip:first-child{margin-left:auto}
.stylechips .schip:last-child{margin-right:auto}
.stage .stylechips::-webkit-scrollbar{display:none}
/* 模板 chip：玻璃小片（细描边 + 顶部内高光 + 选中态辉光），与色块/按钮同一套语言 */
.stylechips .schip{
  position:relative;flex:none;font-size:12px;line-height:1.4;color:var(--tx2);white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:6px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px -10px rgba(0,0,0,.95);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .06s;
}
.stylechips .schip:hover{color:var(--tx);border-color:var(--line2)}
.stylechips .schip:active{transform:translateY(.5px)}
.stylechips .schip.on{
  color:#d9f5fc;border-color:rgba(70,180,200,.6);font-weight:600;
  background:linear-gradient(180deg,rgba(70,180,200,.22),rgba(70,180,200,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px -10px rgba(70,180,200,.85);
}
/* 选中对号（2026-10-10 用户需求）：一排模板 chip 太密、光靠青色描边看不出选的是哪款 ——
   在选中的那块正上方浮一个绿色对号，选哪款一眼可见。
   纯 CSS ::after 实现（不改 DOM 结构、不进 i18n 文案表）；text-shadow 保证在深色渐变条上够清楚。 */
.stylechips .schip.on::after{
  content:'✓';position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  font-size:14px;font-weight:900;line-height:1;color:#22c55e;
  text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 9px rgba(34,197,94,.6);
  pointer-events:none;
}
/* —— 一级模板 chip + 二级「横版 / 竖版」（2026-10-10 用户需求）——
   同一款的横版与竖版合并成一块一级 chip（41 → 22），点它弹出二级形态选择，
   选完照常出卡 —— 桌面底部那条长龙一下短了近三成。 —— */
/* 形态角标：双版本组的 chip 默认显示 ▾（提示可展开），选中后变成当前形态（横 / 竖） */
.stylechips .schip .ori{
  margin-left:5px;font-size:10px;font-style:normal;line-height:1;
  color:var(--tx2);opacity:.7;letter-spacing:0;
}
.stylechips .schip.on .ori{opacity:1;color:#9ceaff;font-weight:700}
/* —— 「会员专属」皇冠标记（2026-10-12 用户需求）—— 
   选模板时一眼看出哪个是会员内容：金色小皇冠挂在名称最前面。
   标记由 FREE_STYLES 实时推导（见 refreshProMarks），把款式挪出/加入会员名单后
   皇冠自动消失/出现 —— 任何清单一律不写死。 */
.stylechips .schip .crow,
.stylepop .spopbtn .crow,
#styTag .crow{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  margin-right:5px;vertical-align:-1px;
  filter:drop-shadow(0 0 3px rgba(246,201,74,.5));
  cursor:help;
}
.stylechips .schip .crow svg,
.stylepop .spopbtn .crow svg,
#styTag .crow svg{display:block;width:12px;height:9px}
/* 混合组（横免费 / 竖会员）：皇冠压淡一档 —— 提示「里面有会员形态」，但不代表整款收费 */
.stylechips .schip .crow[data-pro="some"]{opacity:.62}
/* 已开通会员：皇冠按「已解锁」处理，压暗一档，别再抢视线 */
.stylechips .schip .crow[data-got="1"],
.stylepop .spopbtn .crow[data-got="1"],
#styTag .crow[data-got="1"]{opacity:.5;filter:none}
/* —— 横向条「按住左键拖动」平移（2026-10-10 用户需求）——
   横向滚动条为了画面干净被藏掉了，可鼠标只有一个轮子，桌面端底部「模板 chip 条」
   和「批量出图缩略图条」后面的卡片就永远够不着。这里统一补上自然手势：
   按住左键左右拖 = 平移；竖直滚轮 = 横向滚。触摸屏不接管（系统惯性滚动更跟手）。
   类名 .panx 由 JS 在「确实溢出」时才挂上 —— 不溢出的条不受任何影响。 */
.panx{cursor:grab}
.panx.panning{cursor:grabbing}
.panx.panning *{cursor:grabbing !important}
.panx.panning{user-select:none;-webkit-user-select:none;scroll-behavior:auto}
/* 条内图片不参与原生拖拽，否则按住一滑会拖出一个「幽灵图」 */
.panx img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
/* 两端渐隐：暗示「这头还有内容」，比滚动条更安静 */
.panx.at-l{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px);
}
.panx.at-r{
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 18px);
  mask-image:linear-gradient(270deg,transparent 0,#000 18px);
}
.panx.at-l.at-r{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
/* 二级形态浮层（锚在一级 chip 上方，fixed 定位免被 chip 条 overflow 裁掉） */
.stylepop{
  position:fixed;left:0;top:0;z-index:72;display:none;gap:6px;padding:6px;
  border-radius:11px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(18,26,36,.985),rgba(11,17,25,.985));
  box-shadow:0 14px 38px -14px rgba(0,0,0,.96),inset 0 1px 0 rgba(255,255,255,.06);
}
.stylepop.on{display:flex}
.stylepop .spopbtn{
  font-family:inherit;font-size:12.5px;color:var(--tx2);line-height:1.4;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:6px 13px;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
}
.stylepop .spopbtn:hover{color:var(--tx);border-color:var(--line2)}
.stylepop .spopbtn.on{
  color:#d9f5fc;border-color:rgba(70,180,200,.6);font-weight:600;
  background:linear-gradient(180deg,rgba(70,180,200,.22),rgba(70,180,200,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px -10px rgba(70,180,200,.85);
}
.stylepop .spopbtn.on::after{
  content:'✓';margin-left:7px;font-weight:900;color:#22c55e;
  text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 8px rgba(34,197,94,.55);
}
@media (max-width:920px){
  .stage .stylebar{gap:7px;padding:20px 9px 7px}
  .stage .stylechips{gap:6px;justify-content:flex-start}
  .stylechips .schip{font-size:11px;border-radius:7px;padding:5px 10px}
  .stylechips .schip.on::after{top:-14px;font-size:12px}
  .stylechips .schip .ori{font-size:9px;margin-left:4px}
  .stylechips .schip .crow{margin-right:4px}
  .stylechips .schip .crow svg{width:10.5px;height:8px}
  .stylepop .spopbtn .crow svg{width:11px;height:8.5px}
  .stylepop{padding:5px}
  .stylepop .spopbtn{font-size:11.5px;padding:6px 11px}
}
/* 预览恒为卡片 → 底色按钮只作用于已隐藏的龙像画布，全程收起（避免无效控件） */
.stage .bgbtn{
  display:none;
  position:absolute;top:10px;right:12px;z-index:6;cursor:pointer;user-select:none;
  font-size:11px;color:var(--tx2);background:var(--panel);border:1px solid var(--line);
  border-radius:7px;padding:4px 10px;line-height:1.4;
}
.stage .bgbtn:hover{color:var(--ac);border-color:var(--ac)}
/* 卡片全屏放大入口（只在卡片预览开着时出现，右上角） */
.stage .zbtn{
  position:absolute;top:8px;right:10px;z-index:7;display:none;cursor:pointer;user-select:none;
  font-size:11px;color:var(--tx2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:4px 10px;line-height:1.4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px -10px rgba(0,0,0,.9);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
}
.stage .zbtn.on{display:block}
.stage .zbtn:hover{
  color:var(--ac);border-color:var(--ac);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 16px -10px rgba(70,180,200,.9);
}
#zoomLayer{
  position:fixed;inset:0;z-index:98;display:none;align-items:center;justify-content:center;
  background:rgba(3,6,10,.9);cursor:zoom-out
}
#zoomLayer.on{display:flex}
#zoomLayer canvas{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.75)}
#zoomLayer .zclose{
  position:absolute;top:14px;right:16px;font-size:18px;line-height:1.2;color:#dbeaf2;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:4px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 20px -12px rgba(0,0,0,.9);
  transition:color .15s,border-color .15s,background .15s
}
#zoomLayer .zclose:hover{color:#fff;border-color:rgba(255,255,255,.4);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08))}
.stage .loading{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(7,11,16,.72);font-size:13px;color:var(--ac);z-index:5
}
.stage .loading.on{display:flex}
.empty-hint{color:var(--tx2);font-size:13px;text-align:center;line-height:2}

/* —— 已加入批量出图（2026-10-10 用户改定）——
   队列本体沿用「多图拼接」的 COLLAGE（这里加、那里拼）。这一条常驻在卡片界面
   （预览区）下方：空队列给一行提示，有内容就列出每条的六色缩略图 + 清空。
   2026-10-12 用户改定：「批量出图」（打开拼接面板）已从这里搬到下方「一键改色」行，
   本信息框只负责「看清队列里有什么、删单条、清空」。放在预览区下方而不是浮在卡上，
   是为了不遮住卡片本体，也不用为它挤压预览尺寸。 */
.batchbar{
  flex:none;display:flex;align-items:center;gap:10px;min-height:30px;
  padding:5px 12px;background:var(--panel);border-top:1px solid var(--line);
  overflow:hidden
}
.batchbar .bbhint{font-size:11px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.batchbar .bbttl{font-size:11.5px;font-weight:600;color:var(--ac);white-space:nowrap;flex:none}
.batchbar .bbttl b{color:#9fe0ef}
.batchbar .bbthumbs{
  flex:1;display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;
  -webkit-overflow-scrolling:touch
}
.batchbar .bbthumbs::-webkit-scrollbar{height:0;display:none}
.batchbar .bbi{
  position:relative;flex:none;display:flex;flex-direction:column;width:30px;border-radius:6px;
  overflow:hidden;border:1px solid var(--line2);background:#0a1016
}
.batchbar .bbi .sw{display:flex;flex-wrap:wrap;width:100%}
.batchbar .bbi .sw i{display:block;width:50%;height:9px}
.batchbar .bbi .idx{
  position:absolute;left:1px;top:0;font-size:8.5px;font-style:normal;line-height:1.35;
  color:#dff3fa;background:rgba(4,10,14,.72);padding:0 3px;border-radius:0 0 5px 0
}
.batchbar .bbi .x{
  position:absolute;right:0;top:0;font-size:9px;line-height:13px;width:13px;height:13px;
  text-align:center;font-style:normal;font-weight:700;color:#ffd9d9;cursor:pointer;
  background:rgba(80,10,14,.72);border-radius:0 0 0 5px;opacity:0;transition:opacity .12s
}
.batchbar .bbi:hover .x{opacity:1}
.batchbar .bbmore{flex:none;font-size:10.5px;color:var(--tx2);padding:0 2px}
.batchbar .bbacts{flex:none;display:flex;align-items:center;gap:6px}
.batchbar.on-flash{animation:bbflash 1s ease}
@keyframes bbflash{0%{background:rgba(70,180,200,.34)}100%{background:var(--panel)}}

/* 区域色块条 */
.regions{
  flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  padding:6px 10px 8px;border-top:1px solid var(--line);background:var(--panel)
}
/* 颜色区面板（2026-10-12 用户改定）：桌面端「一键改色条」与「六区色块」归成同一个面板 ——
   一条上边框、一块背景，颜色 ID 组不再孤悬一条；手机端 display:contents 完全透明，布局照旧 */
.rgpanel{display:contents}
@media (min-width:921px){
  .rgpanel{display:block;border-top:1px solid var(--line);background:var(--panel)}
  .rgpanel .rgbar{border-top:none;background:none}
  .rgpanel .regions{border-top:none;background:none}
}
/* 一键改色条：固定在六区色块上方（桌面 / 手机同一套结构） */
.rgbar{
  flex:none;display:flex;align-items:center;gap:8px;min-height:42px;
  padding:8px 12px 9px;background:var(--panel);border-top:1px solid var(--line)
}
.rgbar .bglb{font-size:12px;color:var(--tx2);font-weight:600;white-space:nowrap;flex:none}
.rgbar input{
  width:82px;height:32px;padding:0 8px;border-radius:7px;background:#0d1922;
  border:1px solid var(--line2);color:var(--tx);font-size:16px;font-weight:600;
  font-family:inherit;letter-spacing:.3px;outline:0;flex:none
}
.rgbar input:focus{border-color:var(--ac);background:#122630}
.rgbar input::placeholder{color:#54707f;font-weight:400}
.rgbar .bsw{
  width:22px;height:22px;border-radius:5px;background:#3a4a55;
  border:1px solid rgba(255,255,255,.22);flex:none
}
/* 颜色名自定义（2026-10-13 用户改定）：从顶栏移到「颜色 ID」后面，宽度固定不参与收缩 */
.rgbar .cnamefld{flex:none}
/* 一键改色条按钮：统一玻璃小片；主操作「一键改色」用 accent 描边，⏭ 为次级
   （2026-10-10 用户要求：按钮要大、并把功能名写全，不再只放图标） */
.rgbar .mini{
  height:32px;padding:0 13px;font-size:13px;border-radius:9px;flex:none;
  white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--panel2);
  border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .06s;
}
.rgbar .mini:hover{
  color:var(--tx);border-color:var(--ac);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 14px -9px rgba(70,180,200,.9);
}
.rgbar .mini:active{transform:translateY(.5px)}
.rgbar #btnBulk{
  color:#d9f5fc;border-color:rgba(70,180,200,.5);
  background:linear-gradient(180deg,rgba(70,180,200,.22),rgba(70,180,200,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.rgbar #btnBulk:hover{
  border-color:var(--ac);
  background:linear-gradient(180deg,rgba(70,180,200,.30),rgba(70,180,200,.12));
}
/* 下载单卡（2026-10-12 用户新增）：免费功能的日常入口——青色描边，
   与琥珀色的「添加到批量」（会员专属主操作）拉开区分 */
.rgbar #btnDlOne{
  margin-left:6px;padding:0 13px;white-space:nowrap;
  color:#d8f5fb;border-color:rgba(70,180,200,.52);
  background:linear-gradient(180deg,rgba(70,180,200,.20),rgba(70,180,200,.06));
}
.rgbar #btnDlOne:hover{
  color:#f0fdff;border-color:rgba(70,180,200,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 14px -9px rgba(70,180,200,.95);
}
/* 添加到批量：一键改色行里的主操作——琥珀描边与青色「一键改色 / 下载单卡」区分开 */
.rgbar #btnBatch{
  margin-left:6px;padding:0 13px;white-space:nowrap;
  color:#ffe9cb;border-color:rgba(255,170,60,.5);
  background:linear-gradient(180deg,rgba(255,170,60,.20),rgba(255,170,60,.06));
}
.rgbar #btnBatch:hover{
  color:#fff6e8;border-color:rgba(255,170,60,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 14px -9px rgba(255,170,60,.95);
}
/* 批量出图（2026-10-12 用户改定）：从上方信息框搬进本行、占原「一键下载」的位置。
   金色描边 + 👑 —— 与青色「一键改色 / 下载单卡」、琥珀色「添加到批量」三色分明，
   同时点明这是会员功能（与选模板处的皇冠标记同一套金色语言）。 */
.rgbar #btnBatchOut{
  margin-left:6px;padding:0 13px;white-space:nowrap;
  color:#ffeec2;border-color:rgba(246,201,74,.52);
  background:linear-gradient(180deg,rgba(246,201,74,.20),rgba(246,201,74,.06));
}
.rgbar #btnBatchOut:hover{
  color:#fff8e2;border-color:rgba(246,201,74,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 14px -9px rgba(246,201,74,.95);
}
/* 回执为空时（整块收起）由「下载单卡」自己吸到最右，「添加到批量」「批量出图」紧随其后贴在行尾 */
.rgbar .rgtip:empty + #btnDlOne{margin-left:auto}
.rgbar .rgtip{
  margin-left:auto;font-size:10.5px;color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0
}
.rgbar .rgtip:empty{display:none}   /* 没有回执时不占位、不撑高 */
/* —— 六区色块：玻璃小片质感（细描边 + 顶部内高光 + 按压微位移，2026-10-08 精致化）—— */
.rg{
  border:1px solid var(--line);border-radius:9px;padding:5px 7px;cursor:pointer;position:relative;
  overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--panel2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .16s,box-shadow .16s,transform .06s
}
.rg:hover{border-color:var(--ac)}
.rg:active{transform:translateY(.5px)}
.rg.on{
  border-color:var(--ac2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 2px rgba(255,170,60,.2),0 6px 16px -10px rgba(255,170,60,.75)
}
/* 模型上不显示的色区：色号在存档里是真实存在的（游戏里也照样赋值），
   所以照样可编辑、可选中 —— 只用虚线边框区分，不再降透明度、不再 not-allowed。
   2026-11-02 用户指出：假色块虽然看不出来，但色号要能改，不能锁死。 */
.rg.off{opacity:.94;border-style:dashed;border-color:#2b4a5e}
.rg .rt{font-size:10px;color:var(--tx2);display:flex;justify-content:space-between;gap:4px}
.rg .rt b{color:var(--ac);font-weight:700}
.rg .sw{
  height:20px;border-radius:6px;margin:4px 0 3px;border:1px solid rgba(255,255,255,.16);
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -7px 13px -9px rgba(0,0,0,.6)
}
.rg .sw span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.3px;color:#93aebf;text-shadow:none
}
.rg .idin{
  width:100%;height:19px;margin:0 0 3px;padding:0 3px;border-radius:6px;
  background:#0b1620;border:1px solid var(--line2);color:var(--tx);
  font-size:10.5px;font-weight:600;text-align:center;font-family:inherit;outline:0;
  transition:border-color .15s,background .15s
}
.rg .idin::placeholder{color:#54707f;font-weight:400}
.rg .idin:focus{border-color:var(--ac2);background:#122630}
.rg .cn{font-size:10px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg .cn i{color:var(--tx2);font-style:normal}

/* 底：属性面板 */
.stats-pane{grid-column:1/-1;border-top:1px solid var(--line);background:var(--panel)}
/* —— 属性区折叠（桌面端，借鉴手机「一次只做一件事」）：收起后只留工具条一行，预览区吃满 ——
   ⚠ 只限桌面：手机端「属性」是独立 Tab，折叠会把点数列表整个藏起来且没有按钮能展开 */
@media (min-width:921px){
  main.stats-collapsed .stats-pane .pb{display:none}
}
@media (min-width:921px){
  main.stats-collapsed{grid-template-rows:1fr auto}
}
@media (max-width:920px){
  #btnStatsFold{display:none}   /* 手机属性本来就是独立 Tab，无需折叠 */
}
/* 2026-10-11 用户改定：桌面端工具条靠右（标题在左、工具条推到行尾，方便找）；
   手机端由 989 行媒体查询与 .cards-tools 泊位规则覆盖回 margin-left:0 */
.stats-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
/* 属性工具条的「手机端泊位」：≤920px 时 .stats-tools 会被 JS 搬进这里（六个属性格下方）；
   桌面端恒为空且不显示，不留任何占位（2026-10-11 用户改定） */
.cards-tools{display:none}
.mini{
  height:25px;padding:0 9px;border-radius:6px;background:#132836;border:1px solid var(--line2);
  font-size:11.5px;font-weight:600;color:var(--tx2)
}
.mini:hover{color:var(--tx);border-color:var(--ac)}
.mini.on{background:#1d4256;color:#bdeef9;border-color:var(--ac)}
.field{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--tx2)}
.field input{
  width:56px;height:25px;border-radius:6px;background:#0a131b;border:1px solid var(--line2);
  text-align:center;font-size:12px;font-weight:700;color:var(--tx);outline:none
}
.field input:focus{border-color:var(--ac)}
/* 卡片设置组：款式 + ID 归拢为一块（不折叠，常驻顶栏）；颜色名 2026-10-13 起移到
   「一键改色」条「颜色 ID」后面（.rgbar .cnamefld），本组只剩 ID */
/* 2026-10-12 用户改定：款式 / 配色入口统一收敛到预览区（底部模板 chips + 🎨 配色弹层），
   顶栏不再显示「卡片款式」「卡片配色」两个下拉，只留 ID / 颜色名。
   DOM 保留：#cardStyle 是款式状态的唯一数据源（chips 切换仍读写它），只是不可见。 */
#cardSet #cardStyle, #cardSet #palField{display:none}
.cset{
  display:flex;align-items:center;gap:7px;flex:none;
  padding:2px 9px 2px 8px;border-radius:9px;
  background:rgba(90,190,255,.05);border:1px solid var(--line2)
}
.cset .csetlb{font-size:11px;color:var(--tx2);font-weight:700;white-space:nowrap;flex:none}
.cset select{
  height:25px;border-radius:6px;background:#0a131b;border:1px solid var(--line2);
  font-size:12px;font-weight:600;color:var(--tx);outline:none;padding:0 4px;max-width:126px
}
.cset select:focus{border-color:var(--ac)}
.cset .field{font-size:11.5px}
/* 单排属性卡（2026-10-11 用户要求全信息压一排、去掉「基础」行）：
   结构 = ●属性名 (总数输入框) —— 结果大字。整排靠右，卡片定高 40px。
   2026-11-02：属性行从 6 行变 8 行（生命/耐力/眩晕/食物/负重/氧气/近战伤害/留痕，用户指定顺序）
   → 桌面端改 4 列 × 2 行（8 列挤在一排每格只剩 137px，名字+输入框+数值会互相压） */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:8px;padding:8px 12px}
.card{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;transition:.13s
}
.card:hover{border-color:var(--line2)}
.card .k{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;flex:none}
.card .k em{width:8px;height:8px;border-radius:50%;background:var(--ac);font-style:normal}
.card .k .badge{margin-left:auto;font-size:9px;color:var(--ok);background:rgba(95,214,160,.13);
  padding:1px 5px;border-radius:5px;font-weight:600}
.card .row{display:flex;align-items:center;margin:0}
.card .row input{
  width:48px;height:23px;border-radius:5px;background:#0a131b;border:1px solid var(--line2);
  text-align:center;font-size:11.5px;font-weight:700;color:var(--tx);outline:none
}
.card .row input:focus{border-color:var(--ac);background:#0e1c26}
/* 2026-11-03：一行两个点数框（野生 + 家养），中间的 + 只是分隔符 */
.card .row .sep{font-style:normal;color:#5c7f92;font-size:10px;font-weight:700;margin:0 3px;flex:none;opacity:.8}
.card .row .auto{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#0c1a16;border:1px dashed #254b3e;color:#6f9c88;font-size:10.5px;letter-spacing:.5px;flex:none;cursor:help}
.card .row input[data-t="d"]{width:40px;background:#0c1a16;border-color:#254b3e}
.card .row input[data-t="d"]:focus{border-color:var(--ok)}
.card .row input.mutv{color:var(--ac2)}
.card .out{
  margin-left:auto;font-size:15.5px;font-weight:800;color:#beeef8;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.card .out small{font-size:10px;color:var(--tx2);font-weight:400;margin-left:3px}

/* ============================================================
   移动端（≤920px）：极致简化 —— 单列流 + 底部 Tab 导航
   桌面是「三栏工作台」，手机改成「一次只做一件事」：
   选龙 / 配色 / 属性 三个面板用底部 Tab 切换，顶栏只留必要按钮。
   ============================================================ */
.mtabbar{display:none}
.msearch{display:none}
.msheet{display:none}
.mtop{display:none}

/* —— 配色弹层行（#palSheet 复用 .msheet 容器）：桌面模态 / 手机抽屉共用 —— */
.msheet .plist{display:flex;flex-direction:column;padding:2px 6px 0}
.msheet .prow{display:flex;align-items:center;gap:11px;width:100%;min-height:50px;padding:0 8px;
  border:none;background:none;color:var(--tx);font-size:13.5px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;font-family:inherit}
.msheet .prow:last-child{border-bottom:none}
.msheet .prow:active{background:rgba(255,255,255,.05)}
.msheet .prow .pdots{display:flex;gap:3px;flex:none}
.msheet .prow .pdots i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:block}
.msheet .prow .pdots i.na{background:transparent;border:1px dashed var(--tx2)}
.msheet .prow .pck{margin-left:auto;color:#22c55e;font-weight:900;opacity:0;font-size:14px}
.msheet .prow.on{color:#d9f5fc;font-weight:700}
.msheet .prow.on .pck{opacity:1}
/* 会员专属配色的皇冠 / 锁定态（2026-10-13 用户改定：模板配色整体改会员专属） */
.msheet .prow .palcrow{display:inline-flex;align-items:center;margin-left:3px}
.msheet .prow .palcrow svg{display:block;width:12px;height:9px}
.msheet .prow[data-lock="1"] .pn{color:var(--tx2)}
.palcrow{display:inline-flex;align-items:center;margin-right:4px;vertical-align:middle}
.palcrow svg{display:block;width:12px;height:9px}
.palnote{padding:8px 6px 2px;font-size:11px;color:var(--tx2);letter-spacing:.3px;line-height:1.5}
/* 桌面端：配色弹层改为居中模态（手机端仍是底部抽屉，由 ≤920px 媒体查询负责） */
@media (min-width:921px){
  #palSheet{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:95;
    background:rgba(4,8,12,.72);opacity:0;pointer-events:none;transition:opacity .18s}
  #palSheet.open{opacity:1;pointer-events:auto}
  #palSheet .box{
    position:static;width:400px;max-height:78vh;overflow:auto;
    background:var(--panel);border:1px solid var(--line2);border-radius:14px;
    padding:6px 12px 14px;transform:translateY(10px);transition:transform .18s;
  }
  #palSheet.open .box{transform:translateY(0)}
  #palSheet .grab{display:none}
  #palSheet .sec{padding:12px 6px 6px;font-size:11.5px;color:var(--tx2);letter-spacing:.6px}
  #palSheet .close{width:100%;height:40px;border-radius:10px;margin-top:10px;
    background:var(--panel2);border:1px solid var(--line2);font-size:13.5px;font-weight:700;
    color:var(--tx2);cursor:pointer;font-family:inherit}
  #palSheet .close:hover{color:var(--tx);border-color:var(--ac)}
}

/* ---------- 状态栏 ---------- */
footer{
  height:var(--fth);display:flex;align-items:center;gap:14px;
  padding:0 14px; padding-left:calc(14px + var(--sal)); padding-right:calc(14px + var(--sar));
  background:linear-gradient(180deg,#0b131b,#080d13);border-top:1px solid var(--line);
  font-size:11px;color:var(--tx2);position:relative;z-index:20
}
footer b{color:var(--ac);font-weight:600}
#stMsg{margin-left:auto}

/* —— 移动端收尾覆盖（必须位于 footer 等基础规则之后，靠源序取胜）—— */
@media (max-width:920px){
  footer{display:none}                    /* 底栏信息并入各面板标题行；状态经 toast 呈现 */
  .bulkgrp input{width:60px;font-size:16px} /* 16px 防 iOS 聚焦自动放大；缩宽消 3px 横向溢出 */
}

/* ---------- 色板抽屉 ---------- */
.drawer{
  position:fixed;left:0;right:0;bottom:0;height:400px;background:var(--panel);
  border-top:1px solid var(--line2);transform:translateY(100%);transition:.24s cubic-bezier(.4,0,.2,1);
  z-index:60;display:flex;flex-direction:column;box-shadow:0 -18px 50px rgba(0,0,0,.6)
}
.drawer.open{transform:translateY(0)}
.dh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}
.dh .t{font-weight:700;font-size:13px;color:var(--ac)}
.tabs{display:flex;gap:5px;margin-left:6px}
.tab{height:26px;padding:0 11px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);
  font-size:11.5px;color:var(--tx2);font-weight:600}
.tab.on{background:#1d4256;color:#bdeef9;border-color:var(--ac)}
.dh input{
  height:28px;border-radius:7px;background:#0a131b;border:1px solid var(--line2);padding:0 10px;
  font-size:12px;outline:none;width:180px
}
.dh .sp{margin-left:auto;display:flex;gap:8px}
/* grid-auto-rows:max-content —— 修复：本容器为 flex:1 0% + overflow:auto 的 grid，
   Chromium 下隐式行轨道会塌缩成 2~5px（内容高不参与轨道尺寸计算），色板整片变暗条纹 */
.grid{flex:1;overflow:auto;padding:11px 14px;display:grid;grid-auto-rows:max-content;gap:7px;align-content:start}
.grid.c6{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.sw2{
  border-radius:8px;border:1px solid var(--line);overflow:hidden;cursor:pointer;background:var(--panel2);
  transition:.12s
}
.sw2:hover{border-color:var(--ac);transform:translateY(-2px)}
.sw2.on{border-color:var(--ac2);box-shadow:0 0 0 2px rgba(255,170,60,.22)}
.sw2 .c{height:40px;position:relative}
.sw2 .c em{position:absolute;right:4px;top:4px;font-size:9px;font-style:normal;padding:1px 4px;border-radius:4px;
  background:rgba(0,0,0,.5);color:#fff;font-weight:700}
.sw2 .m{padding:4px 7px 5px}
.sw2 .m .n{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw2 .m .s{font-size:9.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw2 .m .s.nod{color:var(--warn)}
.plhint{flex:none;padding:0 14px 4px;font-size:11px;color:var(--tx2)}
.plhint:empty{display:none}

/* 多图拼接 —— 2026-10-13：队列缩略图与拼接大图合并为一个预览框 .cqview
   （上排 = 队列缩略图，下排 = 拼接结果；「＋加入队列 / 清空队列」按钮已删，
   加卡与清空一律回主页批量条完成，面板不再重复放。） */
.cqview{border:1px solid var(--line2);border-radius:10px;background:rgba(0,0,0,.2);padding:10px;margin:8px 0 10px}
.cqviewbar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);margin:0 0 8px}
.cqviewbar .cqvttl{font-weight:600;color:#cfe9f2}
.cqlist{display:flex;flex-wrap:wrap;gap:10px;min-height:104px;max-height:236px;overflow:auto;padding:2px}
.cqprog{font-size:11.5px;color:var(--ac2);font-weight:600;min-height:16px}
.cqsize{font-size:11.5px;color:var(--tx2)}
.cqsize b{color:#9fe0ef}
/* 自动列数为什么这么排：标出该朝向的「目标形状」（2026-10-12 自动排布算法） */
.cqsize .cqwhy{color:#8fa9ba;border:1px solid var(--line2);border-radius:5px;padding:0 5px;margin-left:4px;
  white-space:nowrap}
.cqempty{font-size:12px;color:var(--tx2);margin:auto;padding:20px}
.cqitem{position:relative;width:92px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);
  background:#0a1016}
.cqitem canvas{display:block;width:92px;height:auto}
.cqitem .nm{font-size:10.5px;padding:3px 5px;color:var(--tx2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center}
.cqitem .mb{position:absolute;top:3px;width:19px;height:19px;line-height:17px;text-align:center;border-radius:5px;
  font-size:11px;cursor:pointer;border:1px solid var(--line2);background:rgba(6,12,18,.82);color:#cfe9f2;padding:0}
.cqitem .mb:hover{border-color:var(--ac);color:#fff}
.cqitem .x{right:3px}
.cqitem .up{left:3px}
.cqitem .dn{left:24px}
.cqitem .idx{position:absolute;left:3px;bottom:22px;font-size:9.5px;padding:1px 5px;border-radius:5px;
  background:rgba(0,0,0,.6);color:#9fe0ef;font-weight:700}
.cqopts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0;font-size:12px;color:var(--tx2)}
.cqopts select,.cqopts input{background:#0b1420;border:1px solid var(--line2);color:#d7eef7;border-radius:7px;
  padding:4px 7px;font-size:12px}
.cqopts input[type=number]{width:62px}
.cqopts label{display:flex;align-items:center;gap:5px;cursor:pointer}
.cqacts{display:flex;gap:9px;margin:10px 0;flex-wrap:wrap}
/* 拼接结果未生成前隐藏（合并后框内只显示队列；点「拼接预览」后挂 .has 才出现） */
#cqPreview{display:none;max-width:100%;max-height:58vh;border-radius:10px;margin-top:10px;background:#0a1016}
#cqPreview.has{display:block}
.cqhint{font-size:11.5px;color:var(--tx2);margin-top:8px;line-height:1.8}

/* 我的恐龙库（2026-10-13）：保存过的恐龙原始数据列表 */
.dvtop{display:flex;align-items:center;gap:9px;margin:8px 0 10px;flex-wrap:wrap}
.dvlist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:2px}
.dvitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:10px;
  background:rgba(0,0,0,.22);padding:8px 10px}
.dvitem.miss{opacity:.55}
.dvsw{display:flex;gap:3px;flex:none}
.dvsw i{width:15px;height:26px;border-radius:4px;display:block}
.dvm{flex:1 1 auto;min-width:0}
.dvm .dvn{font-size:12.5px;font-weight:600;color:#d7eef7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvm .dvs{font-size:11px;color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvnick{background:#0b1420;border:1px solid var(--line2);color:#d7eef7;border-radius:6px;
  padding:2px 6px;font-size:11.5px;width:100%;margin-top:4px;outline:none;box-sizing:border-box}
.dvnick:focus{border-color:var(--ac)}
.dvbtns{display:flex;gap:6px;flex:none}
.dvempty{font-size:12px;color:var(--tx2);padding:20px;text-align:center;line-height:1.9}
.dvacts{display:flex;gap:9px;margin-top:10px;align-items:center;flex-wrap:wrap}
.dvprog{font-size:11.5px;color:var(--ac2);font-weight:600}
@media (max-width:700px){
  .dvitem{flex-wrap:wrap}
  .dvsw i{height:20px}
  .dvlist{max-height:44vh}
}

/* 推广页眉 · 定制面板（2026-10-12 · 高级用户个性化定制） */
.cqopts #cqPromoMode{padding:3px 6px}
#cqPromoEdit{padding:3px 9px;border-color:#ffc450;color:#ffc450}
#cqPromoEdit:hover{color:#fff;border-color:#ffc450;background:#3a2c10}
.ps-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:10px 0 4px}
.ps-left{flex:1 1 320px;min-width:250px}
#psPrev{display:block;width:100%;height:auto;border-radius:10px;background:#0a1016;border:1px solid var(--line2)}
.ps-left .ps-note{margin-top:6px}
.ps-form{flex:1 1 340px;min-width:270px;display:flex;flex-direction:column;gap:8px}
.ps-row{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--tx2)}
.ps-row .ps-lb{flex:0 0 84px;text-align:right;color:#8fa9ba}
.ps-row .ps-ctl{flex:1 1 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.ps-row input[type=text],.ps-row input:not([type]){
  background:#0b1420;border:1px solid var(--line2);color:#d7eef7;border-radius:7px;
  padding:4px 7px;font-size:12px;flex:1 1 auto;min-width:0}
.ps-row input[type=color]{flex:0 0 44px;height:26px;padding:1px;background:#0b1420;
  border:1px solid var(--line2);border-radius:7px;cursor:pointer}
/* 署名 / 域名：固定不可改（2026-10-13）—— 灰字 + 虚线边 + 禁用光标，右端配 🔒 提示 */
.ps-row input.ps-lockinp{background:#0d1620;border:1px dashed rgba(255,255,255,.15);
  color:#7e95a6;cursor:not-allowed;letter-spacing:.2px}
.ps-row input.ps-lockinp:focus{outline:none;border-color:rgba(255,255,255,.15)}
.ps-lock{font-style:normal;font-size:12px;line-height:1;flex:0 0 auto;opacity:.7;cursor:help}
.ps-row input[type=range]{flex:1 1 auto;min-width:90px;padding:0;border:0;background:transparent;accent-color:#37e2c8}
.ps-rv{color:#9fe0ef;font-size:11.5px;min-width:34px}
.ps-sws{display:flex;gap:6px;flex-wrap:wrap}
.ps-sw{display:inline-flex;align-items:center;gap:5px;background:#0b1420;border:1px solid var(--line2);
  color:#cfe9f2;border-radius:7px;padding:3px 8px;font-size:11.5px;cursor:pointer}
.ps-sw i{width:14px;height:14px;border-radius:4px;display:inline-block}
.ps-sw:hover{border-color:var(--ac);color:#fff}
.ps-ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--line2);
  background:#0b1420 center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--tx2)}
.ps-cks{display:flex;gap:10px;flex-wrap:wrap}
.ps-ck{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.ps-note{font-size:11px;color:var(--tx2);line-height:1.7}
@media (max-width:700px){
  .ps-left{flex:1 1 100%}
  .ps-row .ps-lb{flex:0 0 62px}
}

/* 弹层 */
.veil{
  position:fixed;inset:0;background:rgba(4,8,12,.82);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:90
}
.veil.open{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;max-width:min(94vw,860px);
  max-height:92vh;overflow:auto;padding:16px
}
.modal h3{font-size:14px;color:var(--ac);margin-bottom:10px;font-weight:700}
.modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}
#vcard{display:block;max-width:100%;border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.6)}
.cmdbox{
  background:#060b10;border:1px solid var(--line);border-radius:9px;padding:12px 13px;
  font:12.5px/1.8 ui-monospace,Consolas,monospace;color:#9fe0ef;white-space:pre-wrap;
  word-break:break-all;max-height:250px;overflow:auto
}
/* —— 存档导入（2026-10-10）：粘贴区 + 读取按钮 + 反推结果表 —— */
.impbox{
  width:100%;box-sizing:border-box;min-height:132px;max-height:34vh;resize:vertical;
  background:#060b10;border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  font:12.5px/1.7 ui-monospace,Consolas,monospace;color:#cfe6ef
}
.impbox:focus{outline:none;border-color:var(--ac)}
.impbox::placeholder{color:#55707f}
/* 自动识别开关行（2026-11-02 用户要求：只留一个「选 DinoExports 文件夹」，其余全靠自动） */
.impauth{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:var(--tx2);
  line-height:1.5;cursor:pointer;user-select:none}
.impauth input{width:15px;height:15px;flex:0 0 15px;margin:0;accent-color:#2fd6b8;cursor:pointer}
.impauth b{color:#9fe0ef;font-weight:600}
.impres{margin-top:12px;font-size:12px}
.improw{color:var(--tx);line-height:1.7}
.improw b{color:#9fe0ef}
.improw span{color:var(--tx2)}
.improw em{font-style:normal;color:#ffcf7a}
.improw.impwarn{color:#ffb86b}
.impname{margin-top:3px;color:var(--tx2);font:11.5px/1.6 ui-monospace,Consolas,monospace;word-break:break-all}
.imptab{width:100%;border-collapse:collapse;margin-top:9px;font-variant-numeric:tabular-nums}
.imptab th{text-align:left;font-weight:600;color:var(--tx2);font-size:11px;
  padding:4px 6px;border-bottom:1px solid var(--line)}
.imptab td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--tx)}
.imptab td.num{color:#9fe0ef}
.imptab td.num b{color:#7fe3d2;font-size:13px}
.imptab tr.bad td.num{color:#ff9d9d}
.impmiss{margin-top:7px;color:#ffb86b;font-size:11.5px;line-height:1.6}
.imptip{margin-top:7px;color:var(--tx2);font-size:11px}
/* ---------- 文档识别出图（2026-10-11 新增 · 会员功能 docscan） ---------- */
.docdrop{margin-top:11px;border:1px dashed var(--line2);border-radius:12px;padding:16px 12px;
  text-align:center;background:rgba(255,255,255,.02);transition:.15s}
.docdrop.over{border-color:var(--ac);background:rgba(120,200,255,.07)}
.docdrop .ddic{font-size:24px;line-height:1}
.docdrop .ddtx{margin-top:6px;color:var(--tx2);font-size:12px}
.docdrop .mini{margin-top:9px}
.docdrop .ddsub{margin-top:7px;color:#9fe0ef;font-size:11.5px;word-break:break-all;min-height:14px}
.doclist{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.docitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);font-size:12px;cursor:pointer}
.docitem:hover{border-color:var(--line2)}
.docitem .dt{font-weight:700;color:#9fe0ef}
.docitem .dl{color:var(--tx2)}
.docitem .ds{color:var(--tx2);margin-left:auto;white-space:nowrap}
.docitem .dw{color:#55707f;font:11px/1.4 ui-monospace,Consolas,monospace;max-width:34%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imptip.impwarn{color:#ffb86b}
.imptip code,.tip code{background:rgba(255,255,255,.07);border-radius:4px;padding:1px 4px;
  font:11px/1.6 ui-monospace,Consolas,monospace;word-break:break-all}
/* 六区颜色条：导出文件 ColorSet 反查到的官方色号 */
.impcw{display:inline-flex;flex-wrap:wrap;gap:5px;margin:3px 0 0;vertical-align:middle}
.impc{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--tx);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:6px;padding:2px 6px 2px 3px}
.impc i{width:11px;height:11px;border-radius:3px;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.impc.un{opacity:.55;border-style:dashed}
.impbox.drag{border-color:var(--ac);box-shadow:0 0 0 3px rgba(70,180,200,.18)}
/* 一键读取真实导出文件（2026-10-10 傍晚）：绑定一次 DinoExports 文件夹，之后点一下就自动读最新 .ini */
.impdir{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.03);font-size:11.5px;line-height:1.7;color:var(--tx2)}
.impdir b{color:#9fe0ef}
.impdir .p{font:11px/1.7 ui-monospace,Consolas,monospace;word-break:break-all}
.impdir .lk{color:var(--ac);cursor:pointer;text-decoration:underline;white-space:nowrap}
.impdir.new{border-color:rgba(90,220,200,.55);background:rgba(90,220,200,.09)}
.impdir.warn{border-color:rgba(255,184,107,.5);background:rgba(255,184,107,.08)}
.impbig{width:100%;margin-top:10px;padding:11px 14px;border:0;border-radius:10px;cursor:pointer;
  font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#04222a;
  background:linear-gradient(180deg,#7fe3d2,#46b4c8)}
.impbig:hover{filter:brightness(1.07)}
.impbig:active{transform:translateY(1px)}
.impbig:disabled{opacity:.55;cursor:progress;filter:none}
/* 按钮三态：bind=还没绑文件夹（橙色，鼓励去点）；scan=已绑（青色）；fallback=浏览器不支持 */
.impbig[data-mode="bind"]{background:linear-gradient(180deg,#ffd07f,#ff9a3c);color:#2c1a03}
.impbig[data-mode="fallback"]{background:linear-gradient(180deg,#8fa6b4,#6b8494);color:#0b1116}
/* 「怎么用」引导块（2026-11-02）：没绑文件夹时铺三步，环境不支持时直接说原因 */
.imphelp{margin-top:10px;padding:10px 12px;border:1px solid rgba(70,180,200,.35);border-radius:10px;
  background:rgba(70,180,200,.07);font-size:11.8px;line-height:1.75;color:var(--tx2)}
.imphelp>b{display:block;margin-bottom:4px;color:#9fe0ef;font-size:12px}
.imphelp ol{margin:4px 0 0;padding-left:18px}
.imphelp li{margin:3px 0}
.imphelp .ih2{margin-top:7px;color:#7f9aa8;font-size:11px}
.imphelp code{background:rgba(255,255,255,.07);border-radius:4px;padding:1px 4px;
  font:11px/1.6 ui-monospace,Consolas,monospace;word-break:break-all}
.imphelp.warn{border-color:rgba(255,184,107,.5);background:rgba(255,184,107,.08)}
.imphelp.warn>b{color:#ffcf7a}
#btnImport{position:relative}
.dotbadge{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:#ff5f56;box-shadow:0 0 0 2px #0b1116;pointer-events:none}
/* 一键直入：导入完成落到「属性」页时闪一下，告诉用户「已经填好了」（2026-10-10） */
@keyframes impFlash{
  0%{box-shadow:inset 0 0 0 2px rgba(90,220,200,0)}
  18%{box-shadow:inset 0 0 0 2px rgba(90,220,200,.85)}
  60%{box-shadow:inset 0 0 0 2px rgba(90,220,200,.45)}
  100%{box-shadow:inset 0 0 0 2px rgba(90,220,200,0)}
}
.stats-pane.flash{animation:impFlash 1.5s ease-out 1}
@media (prefers-reduced-motion:reduce){ .stats-pane.flash{animation:none} }
/* 「属性预览」按钮跳到「配色预览」窗口时，让预览区标题条闪一下 —— 指明「看这里」。
   闪标题条而不是整块预览区：预览区几乎被卡片铺满，内描边会被卡片挡住看不见。 */
.pane-r .ph.flash{animation:impFlash 1.5s ease-out 1}
@media (prefers-reduced-motion:reduce){ .pane-r .ph.flash{animation:none} }
.tip{font-size:11.5px;color:var(--tx2);line-height:1.9}
.tip b{color:var(--ac2)}
.toast{
  position:fixed;left:50%;bottom:46px;transform:translate(-50%,16px);background:#173240;
  border:1px solid var(--ac);color:#d5f4fb;padding:9px 17px;border-radius:9px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:.22s;z-index:120;font-weight:600
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== 存档导入：授权提示条（2026-11-02）
   浏览器重开网页会把文件夹权限收回成 prompt，而浏览器规定「没有用户手势就调不出授权框」。
   这条胶囊就是那唯一一次点击的入口 —— 藏在导入面板里没人看得见，所以抬到顶栏下方。 ===== */
.impauthtip{
  position:fixed;z-index:70;left:50%;bottom:92px;
  transform:translate(-50%,22px);opacity:0;pointer-events:none;
  display:flex;gap:10px;align-items:center;max-width:92vw;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#17342a,#101f1a);border:1px solid #2f7d5f;
  box-shadow:0 12px 32px rgba(0,0,0,.55);transition:transform .24s,opacity .24s;
}
.impauthtip.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.impauthtip b{color:#7ee2b0;font-size:12.5px;white-space:nowrap}
.impauthtip span{color:#9fbdb2;font-size:12px;white-space:nowrap}
@media (max-width:720px){
  .impauthtip{bottom:calc(112px + var(--sab))}
  .impauthtip span{display:none} .impauthtip{padding:8px 14px}
}

/* ===== 悬赏系统 + 客服聊天（2026-10-12 新增） =====
   与会员系统同一套账号体系（memberships / RLS）。
   形态差异只在挂载点：桌面端（>920px）开弹层，手机端（≤920px）走底部 Tab 的独立面板；
   两侧共用同一组 bodyHTML / bind 函数，避免两套 UI 走样。
   ⚠ 与 .member-pane 同理：这两个面板默认 display:none，
     只有手机端媒体查询里按 main[data-tab] 放行 —— 桌面端 main 是三格网格，
     多一个面板参与布局会把预览区压扁。 */
.bounty-pane,.chat-pane{display:none}
.bqwrap,.ctwrap{flex:1;min-height:0;overflow:auto;padding:12px}

/* —— 悬赏卡片 —— */
.bqi{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 13px;margin-bottom:9px;cursor:pointer;transition:.15s}
.bqi:hover{border-color:var(--ac)}
.bqi .t{font-size:13.5px;font-weight:700;line-height:1.5;color:var(--tx);word-break:break-word}
.bqi .d{font-size:11.5px;color:var(--tx2);line-height:1.65;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bqr{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.btag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;
  background:rgba(70,180,200,.13);color:var(--ac);border:1px solid rgba(70,180,200,.28);white-space:nowrap}
.btag.gold{background:rgba(232,179,75,.13);color:#e8b34b;border-color:rgba(232,179,75,.3)}
.btag.dim{background:rgba(255,255,255,.05);color:var(--tx2);border-color:var(--line2)}
.btag.ok{background:rgba(76,200,120,.13);color:#4cc878;border-color:rgba(76,200,120,.3)}
.btag.no{background:rgba(232,90,90,.13);color:#e85a5a;border-color:rgba(232,90,90,.3)}

/* —— 详情 / 表单 —— */
.bqsec{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:13px;margin-bottom:11px}
.bqsec h4{margin:0 0 9px;font-size:12.5px;color:var(--ac);font-weight:700;letter-spacing:.4px}
.bqsec .tx{margin:0;font-size:12.5px;line-height:1.8;color:var(--tx);white-space:pre-wrap;word-break:break-word}
.bqsec .mt{font-size:11.5px;color:var(--tx2);line-height:1.8;margin-top:7px}
.bq-hint{font-size:11.5px;color:var(--tx2);line-height:1.75;margin:0 0 9px}
.bq-hint.warn{color:#e8b34b}
.bq-ta,.bq-in{width:100%;box-sizing:border-box;background:#0a131b;border:1px solid var(--line2);
  border-radius:9px;color:var(--tx);font-size:13px;font-family:inherit;padding:9px 10px;outline:none}
.bq-ta:focus,.bq-in:focus{border-color:var(--ac)}
.bq-ta{min-height:84px;resize:vertical;line-height:1.7}
.bq-in{height:38px}
.bq-f{display:flex;gap:8px;margin-bottom:9px}
.bq-f .bq-in{flex:1;min-width:0}
.bq-img{max-width:100%;border-radius:10px;border:1px solid var(--line2);display:block;margin-top:8px}
.bqbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}

/* —— 预览区顶部「滚动悬赏条」（2026-10-12 新增） ——
   站长在后台发布的「进行中」悬赏在此横向滚动播放；整条可点，点击进入「联系站长」。
   无进行中悬赏时整条 display:none（由 JS 控制），不占版面。
   挂载点：.pane-r 内、标题条 .ph 之下、预览区 .stage 之上 —— 即「预览口上侧」。
   无缝滚动原理：把「一份内容」重复到不窄于可视区，再整体复制两份，
   动画 0 → -50%，首尾天然衔接（见下方 @keyframes）。 */
.bqtick{
  flex:none;display:flex;align-items:center;gap:9px;
  margin:8px 10px 0;padding:0 10px;height:32px;
  border-radius:10px;border:1px solid rgba(70,180,200,.34);
  background:linear-gradient(90deg,rgba(70,180,200,.16),rgba(70,180,200,.05) 52%,rgba(70,180,200,.03));
  overflow:hidden;cursor:pointer;
  user-select:none;-webkit-user-select:none;
  transition:border-color .15s,background .15s;
}
.bqtick:hover{border-color:rgba(130,225,245,.85);
  background:linear-gradient(90deg,rgba(70,180,200,.25),rgba(70,180,200,.08) 52%,rgba(70,180,200,.05))}
.bqtick .lb{flex:none;display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;color:#ffd08a;letter-spacing:.3px;white-space:nowrap}
/* 滚动视口：左右各留 14px 渐隐，避免条目在边缘被硬切 */
.bqtick .vp{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
/* 时长由 JS 按内容宽度算出（恒速滚动），这里只给兜底值 */
.bqtick .run{display:inline-flex;align-items:center;white-space:nowrap;
  animation-name:bqtickmove;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-duration:22s;will-change:transform}
.bqtick:hover .run{animation-play-state:paused}   /* 指上去暂停，方便看清 */
@keyframes bqtickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bqtick .u{display:inline-flex;align-items:center}
.bqtick .bi{display:inline-flex;align-items:center;gap:7px;padding-right:26px}
.bqtick .bi .tt{font-size:12px;font-weight:600;color:var(--tx)}
.bqtick .bi .rw{font-size:11px;font-weight:700;color:#e8b34b;white-space:nowrap}
.bqtick .bi .dd{font-size:10.5px;color:var(--tx2);white-space:nowrap}
.bqtick .go{flex:none;display:inline-flex;align-items:center;gap:2px;
  font-size:10.5px;font-weight:700;color:var(--ac);white-space:nowrap}

/* —— 通用按钮（弹层与面板共用） —— */
.bbtn{height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--tx);font-size:13px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.bbtn:hover{border-color:var(--ac)}
.bbtn:disabled{opacity:.45;cursor:not-allowed}
.bbtn.primary{background:linear-gradient(135deg,#2b7f92,#46b4c8);border-color:#5cc6d8;color:#04191f}
.bbtn.primary:hover{filter:brightness(1.08)}
.bbtn.gold{background:linear-gradient(135deg,#a9782a,#e8b34b);border-color:#f0c76a;color:#241a05}
.bbtn.gold:hover{filter:brightness(1.08)}
.bbtn.ghost{background:transparent;opacity:.62}
.bbtn.sm{height:31px;padding:0 11px;font-size:12px}
.bq-empty{text-align:center;color:var(--tx2);font-size:12.5px;line-height:1.9;padding:34px 16px}

/* —— 聊天 —— */
.ctshell{display:flex;flex-direction:column;min-height:0;flex:1}
.ctshell.modal{height:min(66vh,540px)}
.ctbody{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.ctbody.flat{padding:10px 0}
.ctmsg{max-width:78%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.7;
  word-break:break-word;white-space:pre-wrap}
.ctmsg.me{align-self:flex-end;background:linear-gradient(135deg,#2b7f92,#46b4c8);color:#04191f;border-bottom-right-radius:4px}
.ctmsg.him{align-self:flex-start;background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-bottom-left-radius:4px}
.ctmsg .tm{display:block;font-size:10px;opacity:.62;margin-top:4px}
.ctmsg.sys{align-self:center;background:none;color:var(--tx2);font-size:11.5px;text-align:center;max-width:92%;padding:2px 0}
.ctinp{flex:none;display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel)}
.ctinp textarea{flex:1;min-width:0;min-height:42px;max-height:118px;resize:none;box-sizing:border-box;
  background:#0a131b;border:1px solid var(--line2);border-radius:10px;color:var(--tx);
  font-size:14px;font-family:inherit;padding:10px 11px;outline:none;line-height:1.5}
.ctinp textarea:focus{border-color:var(--ac)}
.ctinp .bbtn{flex:none;self-align:stretch;min-height:42px;height:auto;padding:0 16px}
/* 后台会话列表行 */
.ctrow{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line2);
  border-radius:11px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.15s}
.ctrow:hover{border-color:var(--ac)}
.ctrow.on{border-color:var(--ac);background:rgba(70,180,200,.07)}
.ctrow .mid{flex:1;min-width:0}
.ctrow .who{font-size:13px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrow .pv{font-size:11.5px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrow .bd{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e85a5a;color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ctrow .bd.zero{display:none}
/* 后台入口按钮（顶栏 / 会员页） */
.tbtn.admin{background:linear-gradient(135deg,#a9782a,#e8b34b);border-color:#f0c76a;color:#241a05}
.bbtn.adminw{background:linear-gradient(135deg,#a9782a,#e8b34b);border-color:#f0c76a;color:#241a05;opacity:1}

/* —— 站长后台（弹层内） —— */
.adm-tabs{display:flex;gap:7px;margin:0 0 12px}
.adm-tabs button{
  flex:1;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--tx2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.adm-tabs button.on{background:rgba(70,180,200,.14);border-color:var(--ac);color:var(--ac)}
.adm-e{background:#0a131b;border:1px solid var(--line2);border-radius:10px;padding:11px;margin-top:9px}
.adm-eh{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--tx);
  flex-wrap:wrap;margin-bottom:6px}
.adm-et{margin-left:auto;font-size:11px;color:var(--tx2);font-weight:400}

/* ===== 会员系统 ===== */
.m-who{
  font-size:12px;padding:8px 11px;border-radius:9px;margin-bottom:11px;line-height:1.6;
  background:#0d1922;border:1px solid var(--line2);color:var(--tx2)
}
.m-who.pro{background:linear-gradient(90deg,rgba(255,196,80,.16),rgba(255,196,80,.05));border-color:#ffc450;color:#ffdf9e;font-weight:700}
.m-who.free{background:rgba(90,190,255,.07);border-color:rgba(90,190,255,.45);color:#bfe6ff}
.m-feats{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.m-feat{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  background:#0d1922;border:1px solid var(--line)
}
.m-feattx{flex:1;min-width:0}
.m-feattx b{display:block;font-size:12.5px;color:var(--tx);font-weight:700}
.m-feattx i{display:block;font-size:11px;color:var(--tx2);font-style:normal;margin-top:2px;line-height:1.5}
.m-tag{font-size:10.5px;padding:3px 8px;border-radius:6px;flex:none;white-space:nowrap}
.m-tag.on{background:rgba(120,230,170,.16);color:#89eeae;border:1px solid rgba(120,230,170,.4)}
.m-tag.tr{background:rgba(255,196,80,.14);color:#ffd98a;border:1px solid rgba(255,196,80,.4)}
.m-tag.off{background:rgba(255,255,255,.06);color:#8fa9ba;border:1px solid var(--line2)}
.m-pay{
  background:linear-gradient(135deg,rgba(255,196,80,.11),rgba(255,120,200,.09));
  border:1px solid rgba(255,196,80,.45);border-radius:11px;padding:12px;margin-bottom:11px
}
.m-pricetag{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.m-pricetag b{font-size:15px;color:#ffc450;letter-spacing:1px}
.m-pricetag span{font-size:11.5px;color:var(--tx2)}
.m-note{font-size:11px;color:var(--tx2);line-height:1.7;margin-top:8px}
/* —— 会员套餐卡 + 开通/兑换页（2026-10-12） —— */
.m-plans{display:flex;flex-direction:column;gap:9px;margin-bottom:9px}
.m-plan{
  background:linear-gradient(135deg,rgba(255,196,80,.11),rgba(255,120,200,.08));
  border:1px solid rgba(255,196,80,.45);border-radius:12px;padding:13px
}
.m-plan-hd{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.m-plan-hd b{font-size:14px;color:#ffc450;letter-spacing:.5px}
.m-plan-tag{
  font-style:normal;font-size:10px;padding:2px 7px;border-radius:5px;
  background:rgba(255,120,200,.16);color:#ff9fd6;border:1px solid rgba(255,120,200,.4)
}
.m-plan-pr{display:flex;align-items:baseline;gap:7px;font-size:23px;font-weight:700;
  color:var(--tx);line-height:1.15}
.m-plan-pr span{font-size:11.5px;font-weight:400;color:var(--tx2)}
.m-plan-ds{font-size:11.5px;color:var(--tx2);line-height:1.75;margin:8px 0 11px}
.m-plan-go{width:100%}
.m-step{margin-bottom:13px}
.m-step-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  color:var(--ac);margin-bottom:9px}
.m-step-h i{font-style:normal;width:17px;height:17px;border-radius:50%;flex:none;
  background:rgba(70,180,200,.16);border:1px solid var(--ac);color:var(--ac);
  font-size:10.5px;display:flex;align-items:center;justify-content:center}
.m-qr{display:block;width:176px;max-width:100%;margin:2px auto 10px;border-radius:10px;
  background:#fff;padding:7px}
.m-contact{font-size:11.5px;color:var(--tx2);line-height:2}
.m-contact b{color:var(--ac2);font-weight:600;user-select:all;word-break:break-all}
.m-code{
  height:44px;text-align:center;letter-spacing:2px;text-transform:uppercase;
  font-family:ui-monospace,Consolas,Menlo,monospace;font-size:15px
}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mbtn{
  border:1px solid var(--line2);background:#132635;color:var(--tx);font-size:12px;font-weight:600;
  padding:9px 15px;border-radius:8px;cursor:pointer;font-family:inherit;transition:.15s
}
.mbtn:hover{border-color:var(--ac);color:var(--ac)}
.mbtn.primary{background:linear-gradient(90deg,#ffc450,#ff9f43);color:#20160a;border-color:transparent}
.mbtn.primary:hover{filter:brightness(1.08)}
.mbtn.ghost{background:transparent}
.mbtn:disabled{opacity:.55;cursor:default}
.m-mailtip{font-size:11.5px;color:var(--tx2);line-height:1.8;margin-bottom:11px}
.m-mailtip b{color:var(--ac2)}
.m-tabs{display:flex;gap:6px;margin-bottom:11px}
.m-tab{
  flex:1;border:1px solid var(--line);background:transparent;color:var(--tx2);font-size:11.5px;
  padding:8px 4px;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600
}
.m-tab.on{background:#132635;border-color:var(--ac);color:var(--ac)}
.m-form{display:none;flex-direction:column;gap:8px}
.m-form.on{display:flex}
.min{
  height:38px;padding:0 11px;border-radius:8px;background:#0d1922;border:1px solid var(--line2);
  color:var(--tx);font-size:16px;font-family:inherit;width:100%
}
.min:focus{outline:none;border-color:var(--ac)}
.m-row2{display:flex;gap:8px}
.m-row2 .min{flex:1}
.m-row2 .mbtn{flex:none;padding:0 13px;height:38px}
.m-err{font-size:11.5px;color:#ff9a9a;min-height:16px;line-height:1.5}
.m-link{
  background:none;border:none;color:var(--tx2);font-size:11.5px;cursor:pointer;
  font-family:inherit;text-decoration:underline;padding:2px 0;text-align:left
}
.m-link:hover{color:var(--ac)}
.m-foot{font-size:11px;color:var(--tx2);line-height:1.8;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
/* 顶栏会员按钮 */
#btnMember.pro{border-color:#ffc450;color:#ffc450}
/* ---------- 双语：英文态用系统 UI 字体，避免中文渲染字体撑爆英文行宽 ---------- */
html[lang="en"] body{--fs:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif}
html[lang="en"] .tbtn,html[lang="en"] .mini,html[lang="en"] .tab,html[lang="en"] .ph,
html[lang="en"] .ditem .nm,html[lang="en"] .cqitem .nm,html[lang="en"] .modal h3,
html[lang="en"] .field,html[lang="en"] .bulkgrp .lb,html[lang="en"] .rg .rt,
html[lang="en"] .rgbar .bglb,html[lang="en"] .rgbar .rgtip,
html[lang="en"] .cset .csetlb,html[lang="en"] .cset select,
html[lang="en"] .card .row,html[lang="en"] .card .k,html[lang="en"] footer,
html[lang="en"] .cqopts,html[lang="en"] .cqhint,html[lang="en"] .cqsize,html[lang="en"] .tip{
  font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;letter-spacing:.2px
}
/* 底栏内容随语言变化：英文文案更长，允许换行不溢出 */
html[lang="en"] #stMsg{font-family:"Segoe UI",Roboto,Arial,sans-serif}
.boot{
  position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;z-index:200
}
.boot .bar{width:230px;height:4px;border-radius:3px;background:#16283a;overflow:hidden}
.boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));
  transition:.3s}
.boot .tx{font-size:12.5px;color:var(--tx2);letter-spacing:1px}

@media (max-width:920px){
  /* —— 顶栏：一行放下品牌 + 三个图标按钮 —— */
  :root{ --hdh:50px; --fth:0px; }
  header{
    gap:8px;padding:0 10px;
    padding-left:calc(10px + var(--sal)); padding-right:calc(10px + var(--sar));
  }
  .logo{font-size:14px;gap:7px;min-width:0;flex:1;overflow:hidden;white-space:nowrap}
  .logo .mk{width:23px;height:23px;font-size:13px;border-radius:6px;flex:none}
  .logo small{display:none}
  /* 顶栏操作区：只显示白名单按钮，其余隐藏 */
  .top-actions{gap:6px;margin-left:auto;flex:none}
  .top-actions > *{display:none !important}
  .top-actions > #langBtn,
  .top-actions > #btnCard{display:flex !important}
  .top-actions > #btnMenu{display:flex !important}   /* 一键改色已移入「区域色块」上方，故移除 #btnBulkWrap */
  /* 会员入口已改为底部 Tab「会员」，手机顶栏不再显示 👑 */
  /* 卡片设置组：手机端收进「更多」面板（mCardStyle/mCardUid/mCardCname 与顶栏双向同步），
     常驻顶栏会在 ≤420px 挤爆（款式下拉顶掉物种位、颜色名被截断） */
  .top-actions > #cardSet{display:none !important}
  .tbtn{height:38px;padding:0 11px;font-size:12.5px;border-radius:9px}
  .tbtn .lbl{display:none}                 /* 图标态：隐藏中文标签，只留 emoji */
  /* 例外：下载是本页最重要的出口，手机端也把功能名放出来（实测 360px 仍放得下） */
  .top-actions > #btnCard .lbl{display:inline}
  .top-actions > #btnCard{padding:0 10px;font-size:12px}
  #langBtn{padding:0 10px;font-weight:700;letter-spacing:.5px}
  #btnCard.primary{padding:0 12px}
  /* 卡片设置组（手机紧凑版）：去文字标签与外框，控件缩窄但保 16px 字号防 iOS 放大 */
  .cset{gap:5px;padding:0;background:none;border:none}
  .cset .csetlb{display:none}
  .cset select{height:32px;font-size:16px;padding:0 3px;max-width:84px;border-radius:8px}
  .cset .field{gap:0;font-size:0}          /* font-size:0 隐藏「ID 」文字标签 */
  .cset .field input{width:44px !important;height:32px;font-size:16px;border-radius:8px}
  .cset .field:last-child input{width:52px !important}
  /* logo 手机端只留图标，给控件让位 */
  header .logo span:not(.mk){display:none}
  header .logo img.mk{width:26px;height:26px;border-radius:7px}
  /* —— 主区：单列，只显示当前 Tab 对应的面板 —— */
  main{
    height:calc(100% - var(--hdh) - 50px - var(--sat) - var(--sab));
    display:block;position:relative;
  }
  .pane{display:none;height:100%;border-right:none}
  main[data-tab="pick"]  .pane-l{display:flex}
  main[data-tab="color"] .pane-r{display:flex}
  main[data-tab="stat"]  .stats-pane{display:flex}
  main[data-tab="member"] .member-pane{display:flex}
  /* 悬赏 / 客服 两个新面板（2026-10-12）：手机端专属，桌面端走弹层 */
  main[data-tab="bounty"] .bounty-pane{display:flex}
  main[data-tab="chat"]   .chat-pane{display:flex}
  /* 预览区滚动悬赏条（手机端）：整体压扁一档，给卡片多留高度 */
  .pane-r .bqtick{height:29px;margin:7px 8px 0;padding:0 9px;gap:8px}
  .bqtick .bi{padding-right:22px}
  .bqtick .bi .tt{font-size:11.5px}
  /* 底部 Tab 栏 */
  .mtabbar{
    display:grid;grid-template-columns:repeat(6,1fr);
    height:calc(50px + var(--sab));padding-bottom:var(--sab);
    background:linear-gradient(180deg,#0d1620,#0a121a);
    border-top:1px solid var(--line2);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
  }
  .mtabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:10.5px;color:var(--tx2);font-weight:600;position:relative;
  }
  .mtabbar button.on{color:var(--ac)}
  .mtabbar button.on::after{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:30px;height:2.5px;border-radius:2px;background:var(--ac);
  }
  .mtabbar .mi{font-size:19px;line-height:1}
  /* —— 龙种列表：整行更大的触摸目标 + 预览小图 —— */
  .pane-l .search{padding:8px 10px}
  .pane-l .search input{height:40px;font-size:16px}
  .ditem{padding:9px 10px;gap:10px;border-radius:10px}
  .ditem .av{width:42px;height:42px;border-radius:9px}
  .ditem .nm{font-size:14px}
  .ditem .sub{font-size:11px}
  /* —— 配色页：龙图适配剩余高度，色块 2×3 大按钮 —— */
  .pane-r .ph{height:34px;font-size:11.5px;padding:0 10px}
  .pane-r .ph .n{font-size:10.5px}
  /* 卡片配色入口（2026-10-12 用户改定）：手机端也放在模板条左端，常驻不随条拖动；
     「也一样」→ 同样做大（32px 高的实心按钮），比模板 chip 明显一档。 */
  .stage .palbtn{height:32px;padding:0 13px;border-radius:10px;font-size:13px;gap:5px}
  .stage{min-height:190px}
  /* 手机端预览是「卡片」（龙嵌在模板里），底色按钮只作用于龙像大图 → 这里收起，避免无效果的按钮 */
  .stage .bgbtn{display:none}
  /* —— 六个色块：手机端压成一排 6 格并整体缩小（原来 3×2 两排太占地方） —— */
  .regions{
    grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:7px 8px 8px;
  }
  .regions .rg{padding:4px 3px;border-radius:8px}
  .regions .rg .rt{font-size:8.5px;gap:2px}
  .regions .rg .rt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .regions .rg .sw{height:20px;margin:3px 0;border-radius:5px}
  .regions .rg .sw span{font-size:8.5px;letter-spacing:0}
  .regions .rg .idin{height:17px;font-size:10.5px;padding:0 2px;margin:0}
  .regions .rg .cn{display:none}   /* 58px 宽放不下色名：完整信息在 title 悬浮提示里 */
  /* 一键改色条：手机端允许换行（2026-10-10 起「下载单卡 + 添加到批量 + 批量出图」三个常驻按钮
     挤不进一行，强行单行会把末尾按钮推出屏外 —— 换行后由「下载单卡」吸右，三个按钮始终可见）；
     按钮文字保留（用户要求写清功能名） */
  .rgbar{gap:6px;padding:8px 10px;min-height:0;flex-wrap:wrap;row-gap:7px;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}
  .rgbar::-webkit-scrollbar{display:none}
  .rgbar .bglb{display:none}          /* 手机端省下 label：输入框自带占位说明 */
  .rgbar input{width:66px;height:34px;font-size:16px}
  .rgbar .bsw{width:24px;height:24px;border-radius:6px}
  .rgbar .mini{height:34px;padding:0 9px;font-size:12px}
  .rgbar .rgtip{display:none}
  /* 颜色名（2026-10-13 用户改定）：手机端不进一键改色条（滚动行会挤），仍收在「更多」面板 */
  .rgbar .cnamefld{display:none}
  .rgbar #btnDlOne{margin-left:auto;padding:0 9px}
  .rgbar #btnBatch{margin-left:6px;padding:0 9px}
  .rgbar #btnBatchOut{padding:0 9px}
  .rg{padding:7px 8px;border-radius:10px}
  .rg .rt{font-size:11px}
  .rg .sw{height:30px}
  .rg .idin{height:24px;font-size:12px}
  .rg .cn{font-size:11px}
  /* —— 属性页：单列大卡片 —— */
  .stats-pane .ph{height:auto;min-height:34px;padding:7px 10px;flex-wrap:wrap;row-gap:6px}
  /* 工具条泊位展开：公母/留痕/清空加点/属性预览整条移到六个属性格下方（2026-10-11 用户改定） */
  .cards-tools{display:block;padding:2px 10px 14px}
  .cards-tools .stats-tools{margin-left:0}
  /* ★ 会员页：状态卡 + 四项功能全部平铺（不折叠） */
  .member-pane .ph{height:auto;min-height:34px;padding:7px 10px}
  .mpb{flex:1;overflow:auto;padding:11px 12px 16px}
  .mpb .m-who{font-size:12.5px;padding:10px 12px;margin-bottom:12px}
  .mpb .m-feats{gap:9px;margin-bottom:13px}
  .mpb .m-feat{padding:11px 12px;border-radius:11px;align-items:flex-start}
  .mpb .m-feattx b{font-size:13.5px}
  .mpb .m-feattx i{font-size:11.5px;margin-top:3px}
  .mpb .m-tag{font-size:11px;padding:4px 9px;margin-top:1px}
  .mpb .m-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
  .mpb .m-actions > *{width:100%;height:44px;font-size:13px}
  .mpb .m-pay{padding:14px;border-radius:12px;margin-bottom:12px}
  .mpb .m-pricetag b{font-size:17px}
  .mpb .m-pricetag span{font-size:12px}
  /* 套餐卡与开通页在手机端放大一档，方便点按 */
  .mpb .m-plan{padding:15px;border-radius:13px}
  .mpb .m-plan-hd b{font-size:15px}
  .mpb .m-plan-pr{font-size:26px}
  .mpb .m-plan-ds{font-size:12px}
  .mpb .m-step-h{font-size:12.5px}
  .mpb .m-step-h i{width:19px;height:19px;font-size:11px}
  .mpb .m-qr{width:200px}
  .mpb .m-contact{font-size:12px}
  .mpb .m-code{height:50px;font-size:17px;letter-spacing:3px}
  .mpb .mbtn{height:44px;font-size:13px;border-radius:10px}
  .mpb .m-note{font-size:11.5px;line-height:1.75}
  .mpb .m-foot{font-size:11.5px;line-height:1.85}
  /* 会员页内的登录表单（内联，不弹层） */
  .mpb .m-mailtip{font-size:12px;margin-bottom:12px}
  .mpb .m-tabs{gap:7px;margin-bottom:12px}
  .mpb .m-tab{height:40px;font-size:12.5px;border-radius:9px}
  .mpb .min{height:46px;font-size:16px;border-radius:10px}
  .mpb .m-row2{gap:9px}
  .mpb .m-row2 .mbtn{height:46px;padding:0 14px;font-size:12.5px}
  .mpb .m-err{font-size:12px;min-height:17px}
  .mpb .m-link{font-size:12.5px}
  .stats-tools{gap:6px;margin-left:0;flex-wrap:wrap}
  .stats-tools .field{font-size:11.5px}
  .stats-tools .field input{width:54px;height:30px}
  .stats-tools select{height:30px;font-size:13px;max-width:88px}
  .mini{height:30px;padding:0 10px;font-size:12px}
  .cards{grid-template-columns:1fr;gap:9px;padding:10px}
  .card{height:50px;padding:0 12px;border-radius:12px}
  .card .k{font-size:13.5px}
  .card .row{font-size:12.5px}
  .card .row input{width:66px;height:31px;font-size:14px}
  .card .out{font-size:19px}
  /* —— 色板抽屉：手机从底部升起，占 76vh —— */
  .drawer{height:76vh;height:76dvh;border-radius:16px 16px 0 0;padding-bottom:var(--sab)}
  .dh{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .dh .t{font-size:14px;flex:1}
  .tabs{
    order:5;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;height:32px;padding:0 12px;font-size:12.5px}
  .dh input{width:100%;height:36px;font-size:16px;order:6}
  .dh .sp{margin-left:auto;order:1}
  .grid.c6{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:10px 12px}
  .sw2 .c{height:46px}
  .sw2 .m{padding:5px 7px 6px}
  .sw2 .m .n{font-size:12px}
  .sw2 .m .s{font-size:10.5px}
  /* 抽屉里的「清空本区 / 收起」按钮加大 */
  .drawer .mini{height:34px}
  /* —— 弹层：全屏化，手机上好读好点 —— */
  .veil{align-items:stretch;padding:0}
  .modal{
    max-width:none;width:100%;max-height:none;height:100%;
    border-radius:0;border:none;padding:14px;
    padding-top:calc(14px + var(--sat)); padding-bottom:calc(14px + var(--sab));
    overflow:auto;-webkit-overflow-scrolling:touch;
  }
  .modal h3{font-size:15.5px;position:sticky;top:-14px;background:var(--panel);
    padding:12px 0 10px;margin:-14px 0 8px;z-index:2}
  .modal .acts{
    position:sticky;bottom:-14px;background:var(--panel);
    padding:10px 0 12px;margin-top:14px;border-top:1px solid var(--line);
  }
  .modal .acts .mini{height:44px;padding:0 18px;font-size:14px;flex:1}
  .cmdbox{font-size:12px;max-height:none}
  .tip{font-size:12.5px}
  /* —— 多图拼接面板 —— */
  .cqview{padding:8px}
  .cqlist{max-height:40vh;min-height:96px}
  .cqitem{width:76px}
  .cqitem canvas{width:76px}
  .cqopts{gap:10px;font-size:12.5px}
  .cqopts select,.cqopts input{padding:6px 8px;font-size:16px}
  .cqopts input[type=number]{width:70px}
  .cqacts{gap:8px}
  .cqacts .mini{flex:1;height:42px;font-size:13px}
  #cqPreview{max-height:36vh}
  /* —— toast 抬到 Tab 栏上方 —— */
  .toast{bottom:calc(66px + var(--sab));font-size:13px;padding:11px 18px;max-width:88vw;text-align:center}
  /* —— 移动端「更多」菜单 —— */
  .msheet{display:block;position:fixed;inset:0;z-index:95;background:rgba(4,8,12,.9);
    backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.2s}
  .msheet.open{opacity:1;pointer-events:auto}
  .msheet .box{
    position:absolute;left:0;right:0;bottom:0;
    background:var(--panel);border-top:1px solid var(--line2);
    border-radius:18px 18px 0 0;padding:8px 12px calc(14px + var(--sab));
    transform:translateY(100%);transition:.25s cubic-bezier(.4,0,.2,1);
    max-height:82vh;overflow:auto;
  }
  .msheet.open .box{transform:translateY(0)}
  .msheet .grab{width:38px;height:4px;border-radius:2px;background:#2b4a5e;margin:6px auto 12px}
  .msheet .row{
    display:flex;align-items:center;gap:12px;min-height:50px;padding:0 6px;
    border-bottom:1px solid var(--line);font-size:14px;font-weight:600;
  }
  .msheet .row:last-of-type{border-bottom:none}
  .msheet .row .ic{font-size:18px;width:24px;text-align:center;flex:none}
  .msheet .row .val{margin-left:auto;color:var(--tx2);font-weight:400;font-size:12.5px}
  .msheet .fld{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 6px;
    border-bottom:1px solid var(--line);font-size:13px}
  .msheet .fld input,.msheet .fld select{
    flex:1;min-width:0;height:38px;border-radius:9px;background:#0a131b;
    border:1px solid var(--line2);padding:0 10px;font-size:16px;
  }
  .msheet .sec{padding:14px 6px 6px;font-size:11.5px;color:var(--tx2);letter-spacing:.6px}
  .msheet .close{width:100%;height:46px;border-radius:11px;margin-top:12px;
    background:var(--panel2);border:1px solid var(--line2);font-size:14px;font-weight:700}
}

/* 超窄屏（≤360px）再压一档 */
@media (max-width:360px){
  .logo{font-size:13px}
  .top-actions{gap:4px}
  .tbtn{padding:0 9px;height:36px}
  .regions{grid-template-columns:repeat(2,1fr)}
  .grid.c6{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  /* 一键改色行更窄的小屏：进一步收字号与内边距，文字按钮全部保留不收起 */
  .rgbar{gap:5px;padding:8px 8px}
  .rgbar .mini{font-size:11.5px;padding:0 8px}
  .rgbar input{width:58px}
  /* 窄屏：滚动悬赏条右侧只留箭头，把宽度让给滚动的悬赏标题 */
  .bqtick .go b{display:none}
}

/* 滚动悬赏条：尊重系统「减少动态效果」——不再自动滚动，
   但全部条目静态可见、整条仍可点（功能不降级，只是不动） */
@media (prefers-reduced-motion:reduce){ .bqtick .run{animation:none} }

/* 横屏手机：龙图与色块并排，省纵向空间 */
@media (max-width:920px) and (orientation:landscape) and (max-height:520px){
  .mtabbar{height:calc(44px + var(--sab))}
  main{height:calc(100% - var(--hdh) - 44px - var(--sat) - var(--sab))}
  .pane-r{flex-direction:row;flex-wrap:wrap;align-content:flex-start}
  .pane-r .ph{display:none}
  /* 换行装箱按 order：第 1 行 = 一键改色条横跨，第 2 行 = 龙图(左) + 六区色块(右) 并排 */
  .rgbar{order:1;flex:0 0 100%;padding:5px 8px;min-height:0}
  .rgbar .rgtip{display:none}
  .stage{order:2;flex:1 1 57%;min-height:0}
  .regions{order:3;flex:0 0 42%;grid-template-columns:repeat(2,1fr);overflow:auto;
    border-top:none;border-left:1px solid var(--line);padding:8px}
}


/* 字体许可证署名（Noto Sans SC / SIL OFL 1.1）· 2026-11-04 */
footer .fcredit{margin-left:auto;font-size:9.5px;color:rgba(122,152,166,.42);letter-spacing:.2px;white-space:nowrap;user-select:none;flex:none}
footer .fcredit:hover{color:rgba(150,185,200,.7)}