:root{
  --bg:#1a1425; --bg2:#221a33; --card:#2a2140; --card2:#322850;
  --line:#3a2f5a; --txt:#e8e2f5; --muted:#9a8fc0;
  --accent:#d4a94e; --accent2:#f0d48a;
  --bronze:#b87333; --silver:#c0c7d1; --gold:#e6b422;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --sbw:264px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%, #3a2c58 0%, var(--bg) 55%);
  color:var(--txt); font-size:14px; line-height:1.5;
}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}

/* 顶部 */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; background:rgba(26,20,37,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; flex:1; min-width:0;}
.menu-btn{
  display:none; width:36px; height:36px; border-radius:8px; font-size:20px;
  border:1px solid var(--line); background:var(--card); color:var(--txt);
}
.menu-btn.active{border-color:var(--accent); color:var(--accent2);}
.brand h1{font-size:22px; letter-spacing:2px; color:var(--accent2);}
.brand .sub{font-size:14px; color:var(--muted); letter-spacing:4px;}
/* 描述词：单行截断，避免占位过大 */
.meta{font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.tb-filters{margin-left:12px; display:flex; align-items:center; gap:8px;}
.tb-chip{
  display:none; padding:8px 14px; border-radius:18px; font-size:13px;
  background:var(--accent); color:#1a1425; font-weight:700; border:none;
}

/* 右上角功能导航组（桌面横排，移动端收进下拉） */
.nav-group{display:flex; align-items:center; gap:8px;}
.nav-toggle{
  display:none; width:38px; height:38px; border-radius:10px; font-size:18px; line-height:1;
  border:1px solid var(--line); background:var(--card); color:var(--txt);
  align-items:center; justify-content:center;
}
.nav-toggle:hover{border-color:var(--accent); color:var(--accent2);}

/* QQ 交流群（顶部醒目，实为可点击按钮） */
.qq{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#ffb300,#e6a23c 60%,#d4922b);
  color:#3a2410; border-radius:22px; padding:6px 16px 6px 7px;
  font-weight:700; cursor:pointer; border:none; font-family:inherit; line-height:1;
  box-shadow:0 0 0 2px rgba(255,179,0,.4), 0 2px 12px rgba(255,160,0,.35);
  transition:transform .15s, box-shadow .15s;
  animation:qq-glow 2.4s ease-in-out infinite;
}
.qq:hover{transform:translateY(-1px); box-shadow:0 0 0 2px rgba(255,179,0,.7), 0 4px 18px rgba(255,160,0,.5);}
.qq:active{transform:translateY(0);}
.qq .qq-ic{
  width:26px; height:26px; border-radius:50%; background:#3a2410; color:#ffd34d;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; flex:0 0 auto;
}
.qq .qq-t{font-size:12px; white-space:nowrap;}
.qq .qq-n{font-size:18px; letter-spacing:1px; white-space:nowrap;}
.qq .qq-hint{font-size:11px; opacity:.75; white-space:nowrap; margin-left:2px;}
/* 复制成功后的按钮状态（整个按钮仍是可点击的） */
.qq.copied{background:linear-gradient(135deg,#3ec26b,#2ea85a); color:#fff;}
.qq.copied .qq-ic{background:#fff; color:#2ea85a;}
.qq.copied .qq-n{font-size:15px;}
.qq.copied .qq-hint{display:none;}
@keyframes qq-glow{
  0%,100%{box-shadow:0 0 0 2px rgba(255,179,0,.4), 0 2px 12px rgba(255,160,0,.35);}
  50%{box-shadow:0 0 0 2px rgba(255,179,0,.65), 0 2px 22px rgba(255,160,0,.65);}
}

/* 布局 */
.layout{display:flex; min-height:calc(100vh - 64px);}

/* 侧栏 */
.sidebar{
  width:var(--sbw); flex:0 0 var(--sbw); border-right:1px solid var(--line);
  background:rgba(34,26,51,.6); padding:14px 12px 60px;
  position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:8px;} .sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.sidebar-head>span{font-weight:600; color:var(--accent2); letter-spacing:2px; font-size:14px;}
.reset{
  padding:4px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:12px;
}
.reset:hover{color:#fff; border-color:var(--accent);}

.fgroup{margin-bottom:16px;}
.fgroup>label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:1px;}
.lbl-hint{color:var(--muted); opacity:.7; font-size:11px; margin-left:6px; letter-spacing:0;}
.opts{display:flex; flex-wrap:wrap; gap:6px;}
.opts.vertical{flex-direction:column; align-items:flex-start;}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:14px; border:1px solid var(--line);
  background:var(--card); color:var(--txt); font-size:12px; user-select:none; transition:.15s;
}
.chip:hover{border-color:var(--accent);}
.chip.on{background:var(--accent); border-color:var(--accent); color:#1a1425; font-weight:600;}
.chip .n{opacity:.7; font-size:11px;}
.chip.on .n{opacity:.85;}
.chip.r2.on{background:var(--bronze);border-color:var(--bronze);color:#fff;}
.chip.r3.on{background:var(--silver);border-color:var(--silver);color:#222;}
.chip.r4.on{background:var(--gold);border-color:var(--gold);color:#3a2410;}
.opt-check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; color:var(--txt);}
.opt-check input{accent-color:var(--accent); width:15px; height:15px;}

/* 侧栏内搜索框 */
.search-wrap{position:relative; display:flex; align-items:center;}
.s-icon{position:absolute; left:10px; color:var(--muted); pointer-events:none; flex:0 0 auto;}
.search-wrap:focus-within .s-icon{color:var(--accent);}
#searchBox{
  width:100%; padding:9px 34px 9px 30px; font-size:14px;
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; outline:none; transition:.2s;
}
#searchBox::placeholder{color:var(--muted); opacity:.8;}
#searchBox:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,169,78,.18);}
#searchBox::-webkit-search-cancel-button{display:none;}
#clearBtn{
  position:absolute; right:8px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(212,169,78,.18); color:var(--accent2); font-size:15px; line-height:1; display:none;
  align-items:center; justify-content:center; cursor:pointer;
}
#clearBtn:hover{background:var(--accent); color:#1a1425;}

/* 技能下方已选标签 */
.sel-skills{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.sel-tag{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:12px;
  border:1px solid var(--accent); color:var(--accent2); background:rgba(212,169,78,.12); border-radius:13px;
}
.sel-tag:hover{background:rgba(212,169,78,.28);}
.sel-tag i{font-style:normal; color:var(--accent); font-weight:700; margin-left:2px;}

/* 技能下拉 */
.sd{position:relative;}
.sd-trigger{
  width:100%; display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--txt); font-size:13px;
}
.sd-trigger .sd-label{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted);}
.sd-trigger .sd-label.has{color:var(--accent2); font-weight:600;}
.sd-trigger .sd-count{
  background:var(--accent); color:#1a1425; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
}
.sd-trigger.open{border-color:var(--accent);}
.sd-caret{color:var(--accent); font-size:12px; transition:.2s;}
.sd-trigger.open .sd-caret{transform:rotate(180deg);}
.sd-panel{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.sd-search{
  width:100%; padding:10px 34px 10px 30px; font-size:13px; background:var(--card); color:var(--txt);
  border:none; outline:none;
}
.sd-searchwrap{position:relative; display:flex; align-items:center; border-bottom:1px solid var(--line);}
.sd-searchwrap .s-icon{left:11px;}
.sd-search::placeholder{color:var(--muted); opacity:.8;}
.sd-clear{
  position:absolute; right:8px; width:20px; height:20px; border-radius:50%; border:none;
  background:rgba(212,169,78,.18); color:var(--accent2); font-size:13px; line-height:1; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.sd-clear:hover{background:var(--accent); color:#1a1425;}
.sd-empty{padding:16px; text-align:center; color:var(--muted); font-size:13px;}
/* 面板内已选标签区 */
.sd-selected{display:flex; flex-wrap:wrap; gap:5px; padding:7px 8px; border-bottom:1px solid var(--line); background:rgba(212,169,78,.06);}
.sd-selected .sel-tag{font-size:11px; padding:2px 7px;}
.sd-list{max-height:240px; overflow-y:auto; padding:4px;}
.sd-list::-webkit-scrollbar{width:8px;} .sd-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.sd-opt{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  font-size:13px; cursor:pointer;
}
.sd-opt:hover{background:var(--card);}
.sd-opt input{accent-color:var(--accent); width:15px; height:15px; flex:0 0 auto;}
.sd-opt.on{background:var(--card); color:var(--accent2);}
.sd-opt .sd-opt-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sd-opt .n{opacity:.7; font-size:11px; flex:0 0 auto;}

/* 主区 */
.main{flex:1; padding:16px 20px 60px; min-width:0;}
.toolbar{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.result-info{font-size:15px;}
.result-info b{color:var(--accent2); font-size:18px;}
.note{color:var(--muted); font-size:12px; margin-left:6px;}
.active-tags{display:flex; flex-wrap:wrap; gap:6px;}
.atag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px;
  border:1px solid var(--accent); color:var(--accent2); background:rgba(212,169,78,.12); border-radius:14px;
}
.atag:hover{background:rgba(212,169,78,.25);}
.atag i{font-style:normal; color:var(--accent); font-weight:700;}

.pet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px;}
.pet-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 10px; text-align:center; cursor:pointer; transition:.15s; position:relative; overflow:hidden;
  /* ★长列表渲染优化：视口外的卡片跳过布局/绘制（自动记住已渲染高度） */
  content-visibility:auto; contain-intrinsic-size:auto 132px;
}
.pet-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent);}
.pet-card .icon{width:57px; height:57px; margin:0 auto 8px; border-radius:8px; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.icon-img{width:57px;height:57px; image-rendering:pixelated; display:inline-block; background-repeat:no-repeat;}
.icon-none{
  width:100%; height:57px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:20px; font-weight:700; letter-spacing:0;
  background:repeating-linear-gradient(45deg,var(--bg2),var(--bg2) 6px,var(--card) 6px,var(--card) 12px);
  border-radius:8px;
}
.pet-card .pname{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pet-card .pmeta{font-size:11px; color:var(--muted); margin-top:3px;}
.rarity-tag{display:inline-block; padding:1px 6px; border-radius:8px; font-size:10px; color:#1a1425; font-weight:700; margin-left:4px; vertical-align:middle;}
.rt2{background:var(--bronze);} .rt3{background:var(--silver);color:#222;} .rt4{background:var(--gold);color:#3a2410;}
.pet-card .race-tag{font-size:11px; color:var(--accent2);}
.level-tag{font-size:11px; color:var(--muted);}

.empty{text-align:center; padding:80px 0; color:var(--muted); font-size:15px;}

/* 详情弹层 */
.overlay[hidden]{display:none;}
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(12,8,20,.75);
  display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px);
}
/* ★性能：backdrop-filter 是「整屏重新模糊」，弹窗内容每次重绘都要付一次代价。
   实测（宠物详情切档位，10 次中位）：blur(2px) 21.2ms/帧 → 去掉 6.1ms/帧；用 translateZ(0)
   隔离只能降到 14.5ms（仍逼近 16.7ms 帧预算），而背景本身已 75% 不透明、模糊几乎看不出。
   所以宠物详情/排行这类「弹窗内会频繁重绘」的浮层用 .overlay-noblur（略加深背景补偿观感）。
   ⚠️ 新页面若弹窗内容会反复重渲染，别用 backdrop-filter。 */
.overlay-noblur{backdrop-filter:none; background:rgba(12,8,20,.86);}
.detail{
  width:min(760px,96vw); max-height:88vh; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:24px 28px; position:relative;
}
.detail::-webkit-scrollbar{width:8px;} .detail::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.close-btn{
  position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:18px;
}
.close-btn:hover{color:#fff; border-color:var(--accent);}
.detail-head{display:flex; gap:22px; align-items:flex-start; margin-bottom:18px;}
.bigicon{
  width:114px; height:114px; border-radius:12px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex:0 0 114px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line); position:relative;
}
/* 大图标：57px 精灵 transform 缩放 2x（不改窗口尺寸，避免框进其它格子） */
.detail-sprite{
  width:57px; height:57px; background-repeat:no-repeat;
  image-rendering:pixelated; transform:scale(2); transform-origin:center;
}
.bigicon .icon-none{width:114px; height:114px; font-size:18px; background:none; border-radius:0;}
.dt-name{font-size:24px; font-weight:700; color:var(--accent2); letter-spacing:1px;}
.dt-base{color:var(--muted); font-size:14px; margin-top:2px;}
.dt-tags{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;}
.tag{font-size:12px; padding:3px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line);}
.kv{display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px;}
.kv b{color:var(--txt); font-weight:600;}

.section{margin-top:20px;}
.section>h3{font-size:15px; color:var(--accent2); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.section>h3::before{content:""; width:4px; height:16px; background:var(--accent); border-radius:2px; display:inline-block;}

/* 五行 */
.elems{display:flex; gap:10px;}
.elem{text-align:center; flex:1;}
.elem .e-bar{height:10px; border-radius:5px; background:var(--bg); overflow:hidden;}
.elem .e-fill{height:100%; border-radius:5px; display:block;}
.elem .e-name{font-size:11px; margin-top:4px; color:var(--txt);}
.elem .e-val{font-size:10px; color:var(--muted);}

/* 六维 */
.grow{display:grid; grid-template-columns:1fr 1fr; gap:8px 22px;}
.grow-row{display:flex; align-items:center; gap:8px; font-size:12px;}
.grow-row .gl{width:48px; color:var(--muted);}
.grow-row .gbar{flex:1; height:8px; border-radius:4px; background:var(--bg); overflow:hidden;}
.grow-row .gfill{height:100%; background:linear-gradient(90deg,#7c6bb0,var(--accent)); border-radius:4px; display:block;}
.grow-row .gv{width:76px; text-align:right; color:var(--txt); font-variant-numeric:tabular-nums;}

/* 档位（野生/宝宝/变异/魔兽）切换 */
.tier-switch{display:flex; gap:6px; margin:2px 0 10px; flex-wrap:wrap;}
.tier-btn{
  font:inherit; font-size:12px; line-height:1; padding:6px 12px; cursor:pointer;
  border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--muted);
  transition:border-color .15s, color .15s, background .15s;
}
.tier-btn:hover:not(.off){border-color:var(--accent); color:var(--txt);}
.tier-btn.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.tier-btn.off{opacity:.4; cursor:not-allowed;}
.section>h3 .sec-note{font-style:normal; font-size:11px; color:var(--muted); font-weight:400; margin-left:6px;}
.tag-tier{background:rgba(124,107,176,.18); border-color:rgba(124,107,176,.5); color:var(--txt);}

/* 状态标签（数据驱动）：疑似废弃 / 未上线 */
.status-tag{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:8px;
  font-size:10px; line-height:16px; font-weight:600; letter-spacing:.5px; white-space:nowrap;
}
.status-tag.st-dep{color:#8a6d1f; background:rgba(230,180,34,.16); border:1px solid rgba(230,180,34,.45);}
.status-tag.st-unrel{color:#6b7280; background:rgba(148,163,184,.18); border:1px solid rgba(148,163,184,.5);}
.pet-card.st-dep{border-style:dashed; opacity:.9;}
.pet-card.st-dep .pname{color:var(--muted);}
.pet-card.st-unrel{border-style:dashed; opacity:.82;}
.pet-card.st-unrel .pname{color:var(--muted);}
.section.status-note h3 .status-tag{vertical-align:middle;}
.section.status-note .status-list{
  margin:6px 0 8px; padding-left:18px; font-size:12px; line-height:1.85; color:var(--muted);
}
.section.status-note .status-list li{margin:2px 0;}
.section.status-note .status-foot{margin:0 0 10px; font-size:12px; line-height:1.7; color:var(--muted);}
.dep-link{
  font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--txt);
}
.dep-link:hover{border-color:var(--accent); color:var(--accent);}
.f-chk{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; margin-right:10px;}
.f-chk input{accent-color:var(--accent);}
.rank-table .status-tag{margin-left:4px;}

/* 技能详情（紧凑：图标+名称+类型，点击展开描述） */
.skill-row{display:flex; flex-wrap:wrap; gap:8px 10px;}
.skill-item{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  font-size:12px; cursor:pointer; overflow:hidden; transition:border-color .15s;
}
.skill-item:hover{border-color:var(--accent);}
.skill-head{display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px;}
.skill-item .skill-ic-wrap{
  width:32px; height:32px; flex:0 0 auto; border-radius:6px; overflow:hidden;
  background-color:var(--bg2); box-shadow:inset 0 0 0 1px var(--line);
}
.skill-item .skill-ic{display:block; width:64px; height:64px; transform:scale(.5); transform-origin:0 0; background-repeat:no-repeat;}
.skill-item .s-name{font-weight:600; color:var(--txt); white-space:nowrap;}
.skill-item .s-type{font-size:10px; color:var(--accent2); margin-left:2px; white-space:nowrap;}
.skill-item .s-cd{font-size:10px; color:var(--gold,#c9a13b); margin-left:6px; white-space:nowrap; border:1px solid rgba(201,161,59,.35); border-radius:6px; padding:1px 5px;}
.skill-item .s-prof{font-size:10px; color:#7fb3e8; margin-left:6px; white-space:nowrap; border:1px solid rgba(127,179,232,.4); border-radius:6px; padding:1px 5px;}
/* 进化必悟 强调标签 */
.skill-fixed{
  font-size:10px; font-weight:700; color:#5a2d00; white-space:nowrap;
  background:linear-gradient(135deg,#ffd34d,#e6a23c);
  border:1px solid #c7872e; padding:1px 6px; border-radius:8px;
  box-shadow:0 0 6px rgba(255,190,60,.55); margin-left:4px;
}
.skill-caret{color:var(--accent); font-size:10px; margin-left:2px; transition:transform .2s;}
.skill-item.open .skill-caret{transform:rotate(180deg);}
.skill-exp{padding:8px 12px; color:var(--muted); border-top:1px solid var(--line); line-height:1.6;}
.section>h3 .sec-count{font-style:normal; font-size:11px; color:var(--muted); font-weight:400; margin-left:4px;}

/* 进化链 */
.evo-chain{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.evo-node{
  padding:7px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  cursor:pointer; font-size:13px; text-align:center; transition:.15s; min-width:96px;
}
.evo-node:hover{border-color:var(--accent);}
.evo-node.current{background:var(--accent); border-color:var(--accent); color:#1a1425; font-weight:700;}
.evo-node .ev-lv{font-size:10px; color:var(--muted); display:block; margin-top:2px;}
.evo-node.current .ev-lv{color:rgba(26,20,37,.7);}
.evo-arrow{color:var(--accent); font-size:18px;}

.intro{color:#cfc6ea; font-size:13px; background:var(--card); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:10px 14px;}

/* 来源角标（宠物图标右上角，大一点、略下沉避免被圆角裁切） */
.src-badge{
  position:absolute; top:3px; right:3px; z-index:3;
  font-size:11px; font-weight:700; color:#fff; line-height:1;
  padding:4px 8px; border-radius:11px; white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35);
}
.src-wild{background:#43a047;}
.src-evo{background:#1e88e5;}
.src-quest{background:#8e24aa;}
.src-rare{background:#ec407a;}
.src-egg{background:#fb8c00;}
.intro-empty{color:var(--muted);}
.locs{font-size:13px; color:var(--txt); line-height:1.8;}

#foot{height:10px;}

/* 移动端遮罩 */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(8,5,14,.6);}

/* ============ 响应式 / 手机端 ============ */
@media (max-width:900px){
  .menu-btn{display:block;}
  .tb-chip{display:inline-flex;}
  .topbar{flex-wrap:wrap; gap:8px 10px; position:relative;}
  /* 右上角导航收缩：⋯ 按钮 + 下拉面板 */
  .nav-toggle{display:flex;}
  .nav-group{
    display:none;
    position:absolute; top:calc(100% + 6px); right:12px; z-index:60;
    flex-direction:column; align-items:stretch; gap:6px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:8px; min-width:170px; box-shadow:var(--shadow);
  }
  .nav-group.open{display:flex;}
  .nav-group .combine-nav{margin:0; justify-content:center; font-size:13px; padding:9px 14px;}
  /* 描述词收缩：隐藏副标题、meta 截断缩小 */
  .brand .sub{display:none;}
  .brand h1{font-size:18px; letter-spacing:1px;}
  .meta{font-size:11px; max-width:52vw; margin-top:1px;}
  /* QQ 交流群在手机端铺满一行，更醒目 */
  .qq{order:3; width:100%; margin:2px 0 0; border-radius:12px; padding:8px 10px; justify-content:center;}
  .layout{min-height:0;}
  /* 侧栏变抽屉 */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:50;
    width:min(88vw,320px); height:100vh; top:0;
    transform:translateX(-105%); transition:transform .25s ease;
    background:var(--bg2); display:flex; flex-direction:column;
    padding:16px 14px 24px;
  }
  .sidebar.open{transform:translateX(0); box-shadow:var(--shadow);}
  .sidebar .sidebar-head{border-bottom:1px solid var(--line); padding-bottom:10px;}
  .filter-panel{overflow-y:auto; flex:1; margin-top:10px; padding-right:2px;}
  .main{padding:14px 12px 70px;}
  .pet-grid{gap:10px;}
  .detail{padding:20px 18px;}
  .detail-head{flex-direction:column; gap:14px;}
  .grow, .skill-list{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .pet-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;}
  .brand h1{font-size:18px;}
  .brand .sub{letter-spacing:2px;}
  .overlay{padding:12px;}
  .detail{max-height:94vh; width:100%;}
}

/* ============ 合宠模拟器（深色，对齐主页主题） ============ */
.combine-nav{
  margin-left:auto; margin-right:8px;
  background:linear-gradient(135deg,#7c4dff,#3d5afe); color:#fff;
  border:none; border-radius:8px; padding:6px 14px; font-size:14px; cursor:pointer; font-weight:600;
}
.combine-nav:hover{filter:brightness(1.12);}
.combine-nav-a{
  text-decoration:none; display:inline-flex; align-items:center; line-height:1.4;
  background:linear-gradient(135deg,#d4a94e,#b8860b); color:#1a1425;
}
.combine-nav-a:hover{filter:brightness(1.12); color:#1a1425;}
/* ★ 高级功能未解锁：置灰+🔒（仅当本站部署了访问门禁，见 output/functions/_middleware.js） */
.combine-nav-a.is-locked{
  background:linear-gradient(135deg,#5b5273,#413a57); color:#cfc6e6;
  opacity:.72;
}
.combine-nav-a.is-locked:hover{filter:brightness(1.12); color:#fff;}
.combine-nav-a .lock-ic{
  margin-left:5px; font-size:11px; line-height:1; opacity:.9;
}

/* ============ 高级功能解锁提示模态框（未解锁时点导航栏高级功能弹出） ============ */
.lock-overlay{
  position:fixed; inset:0; background:rgba(10,7,18,.78); backdrop-filter:blur(3px);
  z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px;
}
.lock-overlay[hidden]{display:none !important;}
.lock{
  background:var(--bg2); color:var(--txt); width:min(440px,94vw); max-height:88vh;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.lock-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line);}
.lock-title{font-size:15.5px; font-weight:700; color:var(--accent2); letter-spacing:.5px; flex:1; min-width:0;}
.lock-close{
  flex:0 0 auto; border:1px solid var(--line); background:var(--card); color:var(--txt);
  border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1;
}
.lock-close:hover{border-color:var(--accent); color:var(--accent2);}
.lock-body{padding:16px; overflow-y:auto; font-size:14px; line-height:1.7;}
.lock-lead{margin:0 0 14px; color:#cfc6e6;}
.lock-lead b{color:var(--accent2);}
.lock-qq{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(0,0,0,.22); border:1px dashed var(--line);
  border-radius:12px; padding:11px 13px; margin-bottom:14px;
}
.lock-qq-k{color:var(--muted); font-size:13px; flex:none;}
.lock-qq-v{
  font-size:22px; font-weight:800; letter-spacing:2px; color:#3a2410;
  background:linear-gradient(135deg,#ffb300,#d4922b);
  padding:4px 14px; border-radius:10px; font-variant-numeric:tabular-nums;
  flex:1; min-width:140px; text-align:center;
}
.lock-qq-copy{
  flex:none; min-height:40px; padding:0 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--card2); color:var(--txt);
  font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.lock-qq-copy:hover{border-color:var(--accent); color:var(--accent2);}
.lock-qq-copy.ok{background:rgba(212,169,78,.18); border-color:var(--accent); color:var(--accent2);}
.lock-steps{list-style:none; counter-reset:ls; margin:0 0 14px; padding:0;}
.lock-steps li{counter-increment:ls; position:relative; padding:0 0 11px 34px; color:#cfc6e6; font-size:13.5px;}
.lock-steps li:last-child{padding-bottom:0;}
.lock-steps li::before{
  content:counter(ls); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,169,78,.16); border:1px solid rgba(212,169,78,.5);
  color:var(--accent2); font-size:12px; font-weight:800;
}
.lock-steps li b{color:var(--accent2);}
.lock-foot{
  margin:0; padding:10px 12px; border-left:3px solid rgba(212,169,78,.55);
  background:rgba(212,169,78,.07); border-radius:0 10px 10px 0;
  font-size:12.5px; color:#bdb2d6; line-height:1.65;
}
.lock-foot b{color:var(--accent2);}
@media (max-width:480px){
  .lock-overlay{padding:12px;}
  .lock{width:100%;}
  .lock-body{font-size:13.5px; padding:14px;}
  .lock-qq-v{order:-1; min-width:100%;}
  .lock-qq-copy{width:100%;}
}
.cb-overlay{position:fixed; inset:0; background:rgba(10,7,18,.72); backdrop-filter:blur(3px); z-index:1000; display:flex; align-items:center; justify-content:center;}
.cb-overlay[hidden]{display:none !important;}
.cb{
  background:var(--bg2); color:var(--txt); width:min(1280px,96vw); height:92vh;
  border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.cb-head{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line);}
.cb-title{font-size:17px; font-weight:700; color:var(--accent2); letter-spacing:1px;}
.cb-close{border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:15px;}
.cb-close:hover{border-color:var(--accent); color:var(--accent2);}
.cb-head-sp{flex:1;}
.cb-notice{text-align:center; padding:8px 14px; margin:10px 14px 0; font-size:13px; color:#ffd27a; background:linear-gradient(90deg, rgba(255,160,40,.12), rgba(255,200,80,.18), rgba(255,160,40,.12)); border:1px solid rgba(255,180,60,.4); border-radius:8px; font-weight:600;}
.cb-notice b{color:#ffb35c;}
.cb-bl-note{margin-left:10px; font-size:12px; color:#ffb56b; background:rgba(255,140,0,.12); border:1px solid rgba(255,140,0,.3); border-radius:6px; padding:2px 8px;}
.cb-copy{border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#e8d8a0; border-radius:6px; padding:4px 12px; font-size:13px; cursor:pointer; margin-right:6px;}
.cb-copy:hover{background:rgba(255,255,255,.18);}
.cb-copy.copied{background:rgba(80,200,120,.25); color:#aaffcc; border-color:rgba(80,200,120,.5);}
.cb-imp-dlg{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px;}
.cb-imp-dlg[hidden]{display:none;}
.cb-imp-box{background:#1b2230; border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:16px; width:min(560px,90vw);}
.cb-imp-h{font-size:14px; margin-bottom:10px; color:#e8d8a0;}
.cb-imp-ta{width:100%; height:180px; background:#12161f; color:#dfe6ee; border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:10px; font-size:12px; font-family:monospace; resize:vertical; box-sizing:border-box;}
.cb-imp-btns{margin-top:10px; display:flex; gap:8px;}
.cb-btn{border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#e8d8a0; border-radius:6px; padding:6px 14px; cursor:pointer; font-size:13px;}
.cb-btn:hover{background:rgba(255,255,255,.2);}
.cb-btn-ghost{background:transparent; color:#9aa;}
.cb-imp-msg{margin-top:8px; font-size:12px;}
.cb-imp-msg.ok{color:#7ce8a0;}
.cb-imp-msg.err{color:#ff8a8a;}
.cb-body{flex:1; display:flex; gap:16px; padding:16px; overflow:hidden;}
.cb-left{width:360px; min-width:320px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding-right:8px;}
.cb-right{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px;}
.cb-sec{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px;}
.cb-sec-t{font-weight:700; font-size:14px; margin-bottom:8px; color:var(--accent2);}
.cb-input{width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--bg); color:var(--txt);}
.cb-input::placeholder{color:var(--muted);}
.cb-input:focus{outline:none; border-color:var(--accent);}
.cb-num{width:52px; padding:4px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:var(--bg); color:var(--txt);}
.cb-grey{color:var(--muted); font-size:12px;}
.cb-hint{font-weight:400;}
.cb-pad{padding:8px;}

/* 宠物头像 / 技能图标 */
.cb-pet-ic{width:57px;height:57px;background-repeat:no-repeat;display:inline-block;image-rendering:pixelated;flex:0 0 auto;vertical-align:middle;}
/* 技能项卡片（对齐详情页 .skill-item）：图标容器 + 名称 */
.cb-skill-item{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 10px 4px 4px;font-size:12.5px;color:var(--txt);}
.cb-skill-item:hover{border-color:var(--accent);}
.cb-skill-item .cb-sk-ic-wrap{width:32px;height:32px;flex:0 0 auto;border-radius:6px;overflow:hidden;background-color:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);position:relative;}
.cb-skill-item .cb-sk-ic{position:absolute;left:0;top:0;width:64px;height:64px;transform:scale(.5);transform-origin:0 0;background-repeat:no-repeat;}
.cb-skill-item .cb-skill-name{font-weight:600;white-space:nowrap;}
.cb-skill-item .cb-x{border:none;background:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px;margin-left:2px;}
.cb-skill-item .cb-x:hover{color:var(--accent);}
.cb-noic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--card2);border-radius:6px;color:var(--muted);font-size:14px;}

/* 主宠下拉（带头像） */
.cb-petpick-wrap{position:relative;}
.cb-petpick-list{position:absolute;left:0;right:0;top:calc(100% + 2px);background:var(--bg2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:300px;overflow-y:auto;z-index:30;display:none;}
.cb-pet{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;border:none;background:none;cursor:pointer;font-size:13px;text-align:left;border-bottom:1px solid var(--line);color:var(--txt);}
.cb-pet:hover{background:var(--card2);}
.cb-pet .cb-pet-ic{width:42px;height:42px;}
.cb-pet .cb-pet-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-pet-sel{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--accent2);font-weight:700;margin-top:8px;background:var(--card2);border:1px solid var(--accent);border-radius:10px;padding:8px 12px;}

/* 主宠技能下拉（对齐筛选页 .sd-* 视觉） */
.cb-sd{position:relative;}
.cb-sd-trigger{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:1px solid var(--line);background:var(--bg);border-radius:8px;font-size:13px;cursor:pointer;color:var(--muted);}
.cb-sd-trigger:hover{border-color:var(--accent);}
.cb-sd-trigger .cb-sd-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-sd-trigger .cb-sd-label.has{color:var(--accent2); font-weight:600;}
.cb-caret{font-size:12px;transition:.2s;color:var(--accent);}
.cb-sd-panel{position:absolute;left:0;right:0;top:calc(100% + 2px);background:var(--bg2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:30;}
.cb-sd-searchwrap{display:flex;align-items:center;border-bottom:1px solid var(--line);}
.cb-sd-search{flex:1;border:none;outline:none;padding:8px 10px;font-size:13px;background:transparent;color:var(--txt);}
.cb-sd-search::placeholder{color:var(--muted);}
.cb-sd-clear{border:none;background:none;font-size:16px;color:var(--muted);padding:0 10px;cursor:pointer;display:none;}
.cb-sd-clear:hover{color:var(--accent);}
.cb-sd-list{max-height:250px;overflow-y:auto;padding:4px;}
.cb-sd-opt{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;font-size:13px;border-radius:6px;color:var(--txt);}
.cb-sd-opt:hover{background:var(--card);}
.cb-sd-opt.on{background:var(--card2); color:var(--accent2); font-weight:600;}
.cb-sd-opt input{accent-color:var(--accent); width:14px; height:14px;}
.cb-sd-opt .cb-sk-ic{width:36px;height:36px;transform:scale(.5625);}
.cb-sd-opt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-sd-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px;}

/* 已选主宠技能：图标+名称 */
.cb-msk-selected{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cb-msk-selected{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cb-msk-selected .cb-skill-item{border-color:var(--accent);}

/* 目标技能 chip 带图标 */
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:300px;overflow-y:auto;margin-top:8px;}
.cb-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:2px 10px 2px 2px;font-size:12.5px;cursor:pointer;color:var(--txt);}
.cb-chip:hover{border-color:var(--accent);}
.cb-chip .cb-sk-ic{width:30px;height:30px;transform:scale(.46875);}
.cb-chip.cb-on{background:linear-gradient(135deg,#7c4dff,#3d5afe); color:#fff; border-color:transparent; font-weight:600;}
.cb-chip .cb-grey{font-size:11px;opacity:.7;margin-left:3px;}

/* 参数面板 */
.cb-collapse-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.cb-collapse-head .cb-caret{transition:transform .2s;}
.cb-collapse-head.open .cb-caret{transform:rotate(180deg);}
.cb-params{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.cb-prow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt);}
.cb-plabel{width:74px;}
.cb-slider{flex:1; accent-color:var(--accent);}
.cb-pval{width:40px; text-align:right; font-variant-numeric:tabular-nums; color:var(--accent2);}
.cb-mode{margin-top:10px; font-size:13px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:var(--txt);}
.cb-mode label{display:flex; align-items:center; gap:4px; cursor:pointer;}
.cb-mode input{accent-color:var(--accent);}

/* 结果区 */
.cb-out{font-size:13.5px; line-height:1.7; color:var(--txt);}
.cb-summary{margin-bottom:6px;}
.cb-meta{color:#7ce495; font-weight:700; margin:4px 0 8px;}
/* 合成树 */
.cb-tree{margin-top:6px; display:flex; flex-direction:column; gap:2px;}
.cb-tnode{position:relative; padding:4px 0 4px 18px;}
.cb-tnode::before{content:''; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--line);}
.cb-tnode::after{content:''; position:absolute; left:4px; top:14px; width:14px; height:1px; background:var(--line);}
.cb-troot{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--accent2);}
.cb-tleaf{color:var(--txt);}
.cb-tleaf .cb-role{color:var(--muted); font-size:11px; margin-right:4px;}
.cb-tmerge{color:var(--muted); font-size:11px; margin-left:18px; border-left:2px solid rgba(255,255,255,.12); padding-left:8px; margin-top:2px;}
.cb-tresult{color:#9fd0ff; font-size:12px; margin-left:8px; margin-top:4px; padding:2px 8px; background:rgba(80,140,255,.08); border-radius:6px; display:inline-block;}
.cb-trow{margin-left:14px; margin-top:3px; display:flex; align-items:center; flex-wrap:wrap; gap:2px;}
.cb-rolabel{flex:0 0 auto; font-size:11px; color:var(--muted); background:rgba(255,255,255,.07); border-radius:4px; padding:1px 6px; margin-right:6px; white-space:nowrap;}
.cb-step{border:1px solid var(--line); background:var(--card); border-radius:10px; padding:10px 12px; margin-bottom:10px;}
.cb-step-h{font-weight:700; font-size:14px; color:var(--accent2);}
.cb-step-nat,.cb-step-tree,.cb-leaf{margin-top:4px;}
.cb-leaf{color:var(--muted); font-size:12.5px; padding-left:8px;}
.cb-det{color:var(--muted); font-size:12px; margin-top:3px;}
.cb-sk{display:inline-block; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:1px 7px; font-size:12px; margin:2px 3px 2px 0; color:var(--txt);}
.cb-leaf .cb-sk{background:var(--bg);}
.cb-final{margin-top:8px; font-weight:700; background:var(--card2); border:1px solid var(--accent); border-radius:10px; padding:8px 12px; color:var(--accent2);}
.cb-cover.ok{color:#7ce495; font-weight:700; margin-top:6px;}
.cb-cover.bad{color:#ff8a80; font-weight:700; margin-top:6px;}
.cb-warn{background:rgba(255,152,0,.12); border:1px solid #ff9800; color:#ffcc80; border-radius:8px; padding:6px 10px; margin-bottom:6px; font-size:12.5px;}
.cb-h2{font-weight:700; margin:14px 0 6px; color:var(--accent2);}
.cb-tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
.cb-tbl th,.cb-tbl td{border:1px solid var(--line); padding:5px 8px; text-align:left;}
.cb-tbl th{background:var(--card2); color:var(--accent2);}

/* ===== 合宠模拟器 · 手机端适配 ===== */
@media (max-width:768px){
  .cb-overlay{padding:0;}
  .cb{width:100vw; height:100dvh; max-width:none; border-radius:0; border:none;}
  .cb-head{padding:8px 10px;}
  .cb-title{font-size:15px;}
  .cb-notice{margin:8px 10px 0; font-size:12px; padding:6px 10px;}
  .cb-copy{padding:3px 8px; font-size:12px; margin-right:4px;}
  .cb-bl-note{margin-left:6px; font-size:11px; padding:1px 6px;}
  .cb-body{flex-direction:column; gap:10px; padding:10px; overflow-y:auto;}
  .cb-left{width:100%; min-width:0; max-height:none; padding-right:0; overflow-y:visible;}
  .cb-right{width:100%; max-height:none; overflow-y:visible;}
  .cb-sec{padding:10px;}
  .cb-sd-list{max-height:200px;}
  .cb-petpick-list{max-height:220px;}
  .cb-params-body{max-height:none;}
  .cb-prow{font-size:12px;}
  .cb-pval{min-width:34px; text-align:right;}
  .cb-out{font-size:12.5px;}
  .cb-tbl{display:block; overflow-x:auto; white-space:nowrap;}
  .cb-troot{flex-wrap:wrap; line-height:1.5;}
  .cb-trow{font-size:12px;}
  .cb-skill-item{font-size:12px; padding:3px 8px 3px 3px;}
  .cb-skill-item .cb-sk-ic-wrap{width:28px;height:28px;}
  .cb-imp-box{width:94vw; padding:12px;}
  .cb-imp-ta{height:140px;}
  .cb-final{font-size:12.5px;}
  .cb-cand-head{font-size:12.5px;}
}

/* ===== 技能高级筛选（模态框） ===== */
.skx-open{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; width:100%;
  padding:6px 10px; font-size:12.5px; border:1px dashed var(--line);
  background:var(--card); color:var(--muted); border-radius:8px; transition:.15s;
}
.skx-open:hover{border-color:var(--accent); color:var(--accent2);}
.skx-open.on{border-style:solid; border-color:var(--accent); background:rgba(212,169,78,.12); color:var(--accent2); font-weight:600;}
.skx-open-sum{font-weight:400; font-size:11.5px; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.skx-overlay{position:fixed; inset:0; background:rgba(10,7,18,.72); backdrop-filter:blur(3px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;}
.skx-overlay[hidden]{display:none !important;}
.skx{
  background:var(--bg2); color:var(--txt); width:min(720px,96vw); max-height:92vh;
  border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.skx-head{display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.skx-title{font-size:16px; font-weight:700; color:var(--accent2); letter-spacing:1px;}
.skx-sub{font-size:11.5px; color:var(--muted); flex:1; min-width:200px;}
.skx-close{border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:15px; flex:0 0 auto;}
.skx-close:hover{border-color:var(--accent); color:var(--accent2);}
.skx-body{padding:14px 18px; overflow-y:auto;}
.skx-rows{display:flex; flex-direction:column; gap:8px;}
.skx-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.skx-idx{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--muted); background:var(--card2); border:1px solid var(--line); border-radius:6px; padding:3px 7px;}
.skx-select{
  background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:8px;
  padding:6px 6px; font-size:12.5px; cursor:pointer; outline:none;
}
.skx-select:hover{border-color:var(--accent);}
.skx-inner{width:52px; flex:0 0 auto;}
.skx-join{width:52px; flex:0 0 auto; border-color:var(--accent); color:var(--accent2); font-weight:700;}
.skx-del{flex:0 0 auto; width:28px; height:28px; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:8px; cursor:pointer; font-size:13px; line-height:1;}
.skx-del:hover{border-color:#ff8a80; color:#ff8a80;}

/* 行内技能多选下拉 */
.skx-sd{position:relative; flex:1 1 220px; min-width:180px;}
.skx-sd-trigger{
  display:flex; align-items:center; gap:6px; width:100%; padding:6px 10px;
  border:1px solid var(--line); background:var(--bg); border-radius:8px; font-size:12.5px;
  cursor:pointer; color:var(--muted); text-align:left;
}
.skx-sd-trigger:hover{border-color:var(--accent);}
.skx-sd-trigger .skx-sd-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.skx-sd-trigger .skx-sd-label.has{color:var(--accent2); font-weight:600;}
.skx-sd-trigger .skx-sd-count{
  background:var(--accent); color:#1a1425; font-size:10.5px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
}
.skx-caret{color:var(--accent); font-size:11px; transition:.2s;}
.skx-sd.open .skx-sd-trigger{border-color:var(--accent);}
.skx-sd.open .skx-caret{transform:rotate(180deg);}
.skx-sd-panel{
  position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:60;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.skx-sd-searchwrap{display:flex; align-items:center; border-bottom:1px solid var(--line);}
.skx-sd-search{width:100%; padding:8px 30px 8px 10px; font-size:12.5px; background:var(--card); color:var(--txt); border:none; outline:none;}
.skx-sd-search::placeholder{color:var(--muted); opacity:.8;}
.skx-sd-list{max-height:240px; overflow-y:auto; padding:4px;}
.skx-sd-opt{display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:7px; font-size:12.5px; cursor:pointer; color:var(--txt);}
.skx-sd-opt:hover{background:var(--card);}
.skx-sd-opt input{accent-color:var(--accent); width:14px; height:14px; flex:0 0 auto;}
.skx-sd-opt.on{background:var(--card); color:var(--accent2);}
.skx-sd-opt .skx-sd-opt-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.skx-sd-opt .skx-sd-n{opacity:.7; font-size:11px; flex:0 0 auto;}
.skx-sd-empty{padding:12px; text-align:center; color:var(--muted); font-size:12.5px;}

.skx-add{
  margin-top:10px; padding:6px 14px; font-size:12.5px; border:1px dashed var(--accent);
  background:transparent; color:var(--accent2); border-radius:8px; cursor:pointer;
}
.skx-add:hover{background:rgba(212,169,78,.12);}

.skx-count{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--txt);
}
.skx-c-enable{display:flex; align-items:center; gap:6px; cursor:pointer;}
.skx-c-enable input{accent-color:var(--accent); width:15px; height:15px;}
.skx-op{width:58px;}
.skx-num{width:70px; padding:6px 8px; background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:8px; font-size:12.5px; outline:none;}
.skx-num:focus{border-color:var(--accent);}
.skx-select:disabled, .skx-num:disabled{opacity:.4; cursor:not-allowed;}
.skx-hint{color:var(--muted); font-size:11.5px;}

.skx-preview{
  margin-top:12px; padding:8px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); font-size:12.5px; color:var(--muted);
}
.skx-preview b{color:var(--accent2);}
.skx-preview .skx-prev-n{color:#7ce495; font-size:15px;}

.skx-foot{display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--line);}
.skx-sp{flex:1;}
.skx-btn{
  border:1px solid var(--line); background:var(--card); color:var(--txt);
  border-radius:8px; padding:7px 18px; font-size:13px; cursor:pointer; transition:.15s;
}
.skx-btn:hover{border-color:var(--accent); color:var(--accent2);}
.skx-btn-ghost{border-color:transparent; background:transparent; color:var(--muted);}
.skx-btn-ghost:hover{color:#ff8a80; border-color:transparent;}
.skx-primary{
  background:linear-gradient(135deg,#d4a94e,#b8860b); color:#1a1425; font-weight:700; border:none;
}
.skx-primary:hover{filter:brightness(1.12); color:#1a1425;}

/* ===== 技能高级筛选 · 手机端适配 ===== */
@media (max-width:768px){
  .skx-overlay{padding:0; align-items:flex-end;}
  .skx{width:100vw; max-height:92dvh; border-radius:14px 14px 0 0; border:none;}
  .skx-sub{display:none;}
  .skx-body{padding:12px 12px;}
  .skx-row{gap:6px;}
  .skx-sd{flex:1 1 100%; min-width:0;}
  .skx-sd-panel{max-height:40vh;}
  .skx-count{font-size:12px;}
  .skx-foot{padding:10px 12px;}
}