:root{
  --bg:#c9c2e6; --bg2:#ffffff; --ink:#1d1b2e; --ink2:#5b5876; --ink3:#8a87a3;
  --line:rgba(108,92,231,.14); --line2:rgba(108,92,231,.24);
  --pri:#6c5ce7; --pri-d:#4b3fc4; --pri-l:#efedff;
  --gold:#c8962a; --gold-bg:#fff8e6; --gold-line:#e8c472;
  --ok:#0f9d76; --ok-bg:#e8f8f2; --warn:#d97706; --danger:#d94b4b;
  --r:14px; --shadow:0 2px 10px rgba(35,28,80,.06), 0 12px 30px rgba(35,28,80,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--pri);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#241a52 0%,#3b2a7a 45%,#5b46b8 100%);
  padding:34px 0 26px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 15% 0%,rgba(160,130,255,.5),transparent 55%),
             radial-gradient(ellipse at 88% 110%,rgba(255,205,120,.28),transparent 50%)}
.hero .wrap{position:relative;z-index:2}
.badge{display:inline-block;font-size:12px;letter-spacing:1px;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.hero h1{font-size:34px;font-weight:800;letter-spacing:2px;margin:10px 0 4px}
.hero .sub{color:rgba(255,255,255,.82);font-size:14px}
.stats{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 16px;font-size:13px;color:rgba(255,255,255,.9)}
.stats b{font-size:17px;font-weight:700;color:#ffe6ad;margin-right:4px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:1px solid transparent;border-radius:10px;padding:9px 16px;font-size:14px;
  background:#fff;color:var(--pri-d);font-weight:600;transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#ffd88a,#ffb347);color:#4a2f00;
  box-shadow:0 6px 18px rgba(255,180,71,.28)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.plain{background:var(--pri-l);color:var(--pri-d)}
.btn.danger{background:#fdeaea;color:var(--danger)}

main{padding-bottom:60px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;margin-top:16px}
.card h2{font-size:16px;margin-bottom:4px}
.hint{font-size:13px;color:var(--ink3);margin-bottom:12px}

/* matcher */
.matcher-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.matcher-row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2);flex:1 1 220px}
select,input[type=text]{font-family:inherit;font-size:14px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--line2);background:#fff;color:var(--ink);width:100%}
.matcher-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;min-height:0}
.mini{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);
  background:var(--pri-l);color:var(--pri-d)}
.mini.gold{background:var(--gold-bg);border-color:var(--gold-line);color:var(--gold)}

/* filters */
.filters{margin-top:12px}
.filter-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:5px 0}
.filter-line .lb{font-size:12px;color:var(--ink3);width:30px;flex:none}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--line2);
  background:#fff;color:var(--ink2)}
.tab.on{background:var(--pri);border-color:var(--pri);color:#fff}
.tab.gold.on{background:var(--gold);border-color:var(--gold);color:#fff}
.filter-line.search{gap:12px}
.filter-line.search input{flex:1 1 200px}
.switch{font-size:13px;color:var(--ink2);display:flex;gap:6px;align-items:center;white-space:nowrap}

/* list */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:16px}
.rec{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.rec.perfect{border-color:#8fd9c1;background:linear-gradient(180deg,#f2fbf7,#fff 40%)}
.rec.half{border-color:#cfc7f5}
.rec.own{outline:2px dashed rgba(108,92,231,.35);outline-offset:-6px}
.rec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.who{font-weight:700;font-size:15px}
.uid{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;margin-top:2px}
.uid code{font-size:12px;background:var(--pri-l);color:var(--pri-d);padding:1px 6px;border-radius:6px}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.tag.gold{background:var(--gold-bg);border-color:var(--gold-line);color:var(--gold)}
.tag.ok{background:var(--ok-bg);border-color:#9ad9c5;color:var(--ok);font-weight:600}
.tag.half{background:var(--pri-l);border-color:var(--line2);color:var(--pri-d)}
.blk{margin-top:10px}
.blk-t{font-size:12px;color:var(--ink3);margin-bottom:4px}
.tokens{display:flex;gap:6px;flex-wrap:wrap}
.tk{font-size:12.5px;padding:4px 10px 4px 5px;border-radius:8px;background:#f2f1fa;border:1px solid var(--line);
  color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.tk-i{width:30px;height:30px;border-radius:8px;object-fit:cover;background:#fff}
.tk em{font-style:normal;color:var(--ink3);font-size:11px}
.tk.hit{background:var(--ok-bg);border-color:#9ad9c5;color:var(--ok);font-weight:600}
.rec-note{font-size:12px;color:var(--ink3);margin-top:8px;white-space:pre-line}
.rec-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.linkbtn{background:none;border:none;color:var(--ink3);font-size:12px;padding:2px}
.linkbtn:hover{color:var(--pri)}
.empty{text-align:center;color:var(--ink3);font-size:14px;padding:50px 0}
.more{grid-column:1/-1;text-align:center}

/* modal */
.mask{position:fixed;inset:0;background:rgba(24,20,50,.42);display:none;z-index:50;
  align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px 40px;backdrop-filter:blur(2px)}
.mask.on{display:flex}
.modal{background:#fff;border-radius:18px;max-width:680px;width:100%;padding:20px;
  box-shadow:0 24px 60px rgba(20,10,50,.28);animation:pop .18s ease}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:18px;margin-bottom:4px}
.modal .sub{font-size:13px;color:var(--ink3);margin-bottom:14px}
.field{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.field label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2);flex:1 1 240px}
.pick{margin-bottom:14px}
.pick .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pick .hd b{font-size:14px}
.pick .hd span{font-size:12px;color:var(--ink3)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.chip{font-size:13px;padding:8px 6px 6px;border-radius:12px;border:1px solid var(--line2);
  background:#fff;color:var(--ink2);text-align:center;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.chip img{width:72px;height:72px;border-radius:12px;background:#f6f5fc;object-fit:cover}
.chip span{font-weight:600}
.chip em{font-style:normal;font-size:11px;color:var(--ink3)}
.chip.on em{color:rgba(255,255,255,.85)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.grid.gold .chip.on{background:var(--gold);border-color:var(--gold)}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:6px}
.modal-act{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.rules{font-size:14px;color:var(--ink2);line-height:1.85}
.rules li{margin-left:18px}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:#241f45;color:#fff;
  font-size:13px;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.22s;z-index:99}
.toast.on{opacity:1;bottom:44px}
footer{text-align:center;font-size:12px;color:var(--ink3);padding:26px 16px}
@media(max-width:560px){
  .hero h1{font-size:27px}
  .list{grid-template-columns:1fr}
  .modal{padding:16px}
}

/* ===== v4：换货助手两级多选 + 大图 ===== */
.modal.wide{max-width:820px}
.mline{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px dashed var(--line)}
.mline:first-of-type{border-top:0}
.mlb{font-size:13px;font-weight:700;color:var(--ink2);width:46px;flex:none;padding-top:12px}
.mchips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.mempty{font-size:12.5px;color:var(--ink3);padding-top:14px}
.mchip{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;border-radius:13px;
  background:#f7f6fd;border:1px solid var(--line)}
.mchip.gold{background:var(--gold-bg);border-color:var(--gold-line)}
.mchip img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#fff}
.mchip .mi{display:flex;flex-direction:column;line-height:1.22}
.mchip b{font-size:13px}
.mchip em{font-style:normal;font-size:11px;color:var(--ink3)}
.mchip button{border:0;background:rgba(0,0,0,.06);color:var(--ink3);width:20px;height:20px;
  border-radius:50%;font-size:13px;line-height:1;margin-left:2px}
.mchip button:hover{background:var(--danger);color:#fff}
.mfoot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--line)}
#m-tip{font-size:12.5px;color:var(--ok);font-weight:600}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
  padding:6px 4px;margin-top:12px;background:#fafaff;border-radius:14px;
  border:1px solid var(--line)}
.pcell{position:relative;border:1.5px solid var(--line2);border-radius:14px;background:#fff;
  padding:9px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.15s}
.pcell img{width:92px;height:92px;border-radius:11px;object-fit:cover;background:#f6f5fc}
.pcell b{font-size:13px;color:var(--ink)}
.pcell em{font-style:normal;font-size:11px;color:var(--ink3)}
.pcell:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(35,28,80,.1)}
.pcell.on{border-color:var(--pri);background:var(--pri-l)}
.pcell.on::after{content:"✓";position:absolute;top:5px;right:8px;color:var(--pri);font-weight:800;font-size:14px}
.pcell.on img{outline:2px solid var(--pri);outline-offset:1px}
.pick-info{font-size:13px;color:var(--ink2);margin-right:auto}
.pick-info b{color:var(--pri);font-size:15px}
.warn{color:var(--warn)}
.tags-col{display:flex;flex-direction:column;gap:5px;align-items:flex-end}

/* 列表卡片里的幻宠：图 + 名字 + 角色 */
.tk{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:13px;
  background:#f7f6fd;border:1px solid var(--line);color:var(--ink2)}
.tk.hit{background:var(--ok-bg);border-color:#9ad9c5}
.tk-i{width:46px;height:46px;border-radius:10px;object-fit:cover;background:#fff}
.tk-t{display:flex;flex-direction:column;line-height:1.22}
.tk-t b{font-size:13px;font-weight:600;color:var(--ink)}
.tk-t em{font-style:normal;font-size:11px;color:var(--ink3)}
.tk.hit .tk-t em{color:#0f9d76}

/* 登记弹窗：更大的图 */
.chip img{width:96px;height:96px;border-radius:14px}
.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.chip b,.chip span{font-size:13.5px}

/* ===== v6：搜索按钮 / 已有角标 / 款类联动 ===== */
.mfoot-act{display:flex;gap:10px;align-items:center}
#m-tip.dirty{color:var(--warn)}
.pcell .badge{position:absolute;top:5px;left:6px;font-style:normal;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:999px;background:var(--ok-bg);color:var(--ok);border:1px solid #9ad9c5}
.pcell.owned{opacity:.62}
.pcell.owned.on{opacity:1}

/* ===== v10：hero 图鉴 + 幻宠详情 ===== */
.hero-inner{display:flex;gap:26px;align-items:flex-start}
.hero-main{flex:1 1 380px;min-width:0}
.hero-dex{flex:1 1 420px;min-width:0;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:13px 14px 10px;
  backdrop-filter:blur(6px)}
.dex-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.dex-hd b{font-size:14.5px;letter-spacing:1px}
.dex-hd span{font-size:11.5px;color:rgba(255,255,255,.62)}
.dex-tabs{gap:6px;margin-bottom:9px}
.dex-tabs .tab{font-size:12px;padding:3px 10px;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.86)}
.dex-tabs .tab.on{background:#fff;border-color:#fff;color:var(--pri-d);font-weight:700}
.dex-tabs .tab.gold.on{background:linear-gradient(135deg,#ffd88a,#ffb347);border-color:#ffc46b;color:#4a2f00}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px;
  max-height:212px;overflow:auto;padding:2px}
.dex-cell{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(255,255,255,.94);border-radius:11px;padding:5px 3px 4px;border:1px solid transparent;transition:.15s}
.dex-cell:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.dex-cell img{width:50px;height:50px;border-radius:9px;object-fit:cover;background:#f4f3fb}
.dex-cell span{font-size:10.5px;color:#37325c;line-height:1.15;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-hint{font-size:11px;color:rgba(255,255,255,.55);margin-top:7px}

.pet-modal{max-width:520px}
.pet-top{display:flex;gap:16px;align-items:flex-start}
.pet-top img{width:150px;height:150px;border-radius:16px;object-fit:cover;background:#f4f3fb;flex:none}
.pet-info{flex:1;min-width:0}
.pet-info h3{font-size:20px;margin-bottom:6px}
.pet-role{font-size:13.5px;color:var(--ink2);margin-bottom:8px}
.pet-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pet-tip{font-size:12.5px;color:var(--ink3);line-height:1.7;background:#faf9ff;border-radius:10px;padding:9px 11px}
.pet-tip b{color:var(--pri-d)}
@media(max-width:820px){
  .hero-inner{flex-direction:column;gap:18px}
  .hero-dex{width:100%}
  .dex-grid{max-height:none;grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .pet-top{flex-direction:column;align-items:center;text-align:center}
  .pet-top img{width:132px;height:132px}
}

/* ===== v12：图鉴改为二级界面 ===== */
.hero-dex,.dex-hint{display:none}
.dex-modal{max-width:780px}
#mask-dex .dex-tabs{margin:12px 0 10px;gap:7px}
#mask-dex .tab{font-size:12.5px;padding:5px 12px;background:#fff;border-color:var(--line2);color:var(--ink2)}
#mask-dex .tab.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
#mask-dex .tab.gold.on{background:linear-gradient(135deg,#f3c96b,#d9a337);border-color:#e0b455;color:#fff}
#mask-dex .dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
  max-height:54vh;overflow:auto;padding:11px;background:#fafaff;border:1px solid var(--line);border-radius:14px}
#mask-dex .dex-cell{background:#fff;border:1.5px solid var(--line2);border-radius:13px;padding:8px 5px 7px;gap:5px}
#mask-dex .dex-cell:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:0 6px 16px rgba(35,28,80,.1)}
#mask-dex .dex-cell img{width:80px;height:80px;border-radius:11px}
#mask-dex .dex-cell span{font-size:11.5px;color:var(--ink2);white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
@media(max-width:560px){
  #mask-dex .dex-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));max-height:60vh}
  #mask-dex .dex-cell img{width:66px;height:66px}
}

/* ===== v14：无结果引导登记 ===== */
.empty{padding:38px 16px}
.empty-box{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:22px 22px 20px;box-shadow:var(--shadow)}
.empty-box .et{font-size:15.5px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.empty-box .ed{font-size:13.5px;color:var(--ink3);line-height:1.75;margin-bottom:16px}
.empty-box .ed b{color:var(--pri-d)}
.empty-box .ea{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}

/* ===== v15：必填标记 ===== */
.req{font-style:normal;font-size:10.5px;font-weight:700;color:#d94b4b;background:#fdeaea;
  border:1px solid rgba(217,75,75,.25);border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:1px}
.field input.bad,.field select.bad{border-color:#d94b4b;background:#fff7f7;box-shadow:0 0 0 3px rgba(217,75,75,.1)}
.fld-hint{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.5}
#f-err{color:#d94b4b;font-weight:600}
.who.anon{color:var(--ink3);font-weight:600}

/* ===== v19：卡片里的幻宠统一尺寸 + 最多 2 个 + 省略号 ===== */
.tokens{gap:7px;align-items:stretch}
.tk{width:148px;height:58px;box-sizing:border-box;padding:5px 9px 5px 5px;overflow:hidden;gap:8px}
.tk-i{width:46px;height:46px;flex:none}
.tk-t{min-width:0;flex:1}
.tk-t b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-t em{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk.empty{justify-content:center;color:var(--ink3)}
.tk-more{width:44px;height:58px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px dashed var(--line2);border-radius:13px;background:#fbfaff;color:var(--ink3);
  font-size:17px;letter-spacing:1px;cursor:help}
@media(max-width:560px){ .tk{width:136px} }

/* ===== v20：幻宠名完整显示 / 省略号不换行 / 回到顶部 ===== */
.tokens{display:flex;gap:7px;flex-wrap:nowrap;align-items:stretch}
.tk{flex:1 1 0;min-width:0;width:auto;height:auto;min-height:58px;align-items:center}
.tk-t{min-width:0;flex:1}
.tk-t b{white-space:normal;word-break:break-word;line-height:1.18;font-size:12.5px}
.tk-t em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-more{width:40px;flex:0 0 40px;min-height:58px}
@media(max-width:560px){ .tk{width:auto} }

#to-top{position:fixed;right:22px;bottom:26px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(108,92,231,.28);background:#fff;color:var(--pri-d);font-size:19px;font-weight:700;
  box-shadow:0 6px 20px rgba(35,28,80,.16);opacity:0;pointer-events:none;transition:.22s;z-index:40}
#to-top.on{opacity:1;pointer-events:auto}
#to-top:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(35,28,80,.22)}

/* ===== v21：吸顶 / 卡片底部对齐 / 反馈类型 ===== */
.board-head{position:sticky;top:0;z-index:20;background:transparent;
  padding:8px 0 10px;margin-top:0;transition:box-shadow .2s}
.board-head.stuck{box-shadow:0 10px 22px -12px rgba(35,28,80,.28)}
.board-head .card{margin-top:0}
.board-head .card + .card{margin-top:10px}
.list{margin-top:8px}

.rec{display:flex;flex-direction:column}
.rec-act{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.rec-note{min-height:20px}
.rec-note.ph{opacity:0}

@media(max-width:900px){
  /* 手机/平板：不做冻结（跟随页面正常滚动） */
  .board-head{position:static !important;top:auto !important;z-index:auto;
    box-shadow:none !important;background:transparent;padding-bottom:0}
}

/* ===== v23：我的订单 / 发布引导 / 站点反馈 ===== */
.btn.mine{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);color:#fff;
  display:inline-flex;align-items:center;gap:7px}
.btn.mine:hover{background:rgba(255,255,255,.28)}
.btn.mine .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#ffd88a,#ffb347);color:#4a2f00;
  font-size:11.5px;font-weight:800}
.tag.warn{background:#fff4e6;border-color:#f0c98a;color:#b06a00;font-weight:600}
.btn.danger.small{padding:6px 12px;font-size:13px}

.mine-list{max-height:58vh;overflow:auto;padding-right:2px}
.mine-item{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:11px;background:#fff}
.mine-item.done{opacity:.6;background:#fafaff}
.mi-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mi-hd b{font-size:14px}
.mi-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
.mi-act{display:flex;gap:8px}
.mine-empty{text-align:center;color:var(--ink3);font-size:13.5px;padding:34px 10px;line-height:1.9}

.pub-steps{margin:6px 0 4px 18px;font-size:13.5px;color:var(--ink2);line-height:1.75}
.pub-steps li{margin-bottom:12px}
.pub-steps b{color:var(--pri-d)}
.pub-steps .btn{margin-top:7px}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line2);border-radius:6px;
  background:#f7f6fd;font-size:12px;font-family:inherit}
textarea{font-family:inherit;font-size:14px;padding:9px 11px;border-radius:10px;border:1px solid var(--line2);
  background:#fff;color:var(--ink);width:100%;resize:vertical;line-height:1.6}
.foot-links{text-align:center;padding:0 16px 30px}
.foot-links .linkbtn{font-size:12.5px;color:var(--ink3)}
.foot-links .linkbtn:hover{color:var(--pri)}

/* ===== v24：我的订单按钮底色 / 反馈角标 ===== */
.btn.mine{background:#fff;border:1px solid #fff;color:var(--pri-d);font-weight:800;
  box-shadow:0 6px 18px rgba(255,255,255,.18)}
.btn.mine:hover{background:#f7f6ff;color:var(--pri);transform:translateY(-1px)}
.btn.mine .cnt{background:linear-gradient(135deg,#ff9f43,#ff7a45);color:#fff}
.tag.warn .rn{font-style:normal;margin-left:4px;opacity:.75;font-weight:800}

/* ===== v25：官方视觉语言（P0 第一批）===== */
.hero{background:
    radial-gradient(ellipse at 12% -10%, rgba(150,110,255,.65), transparent 55%),
    radial-gradient(ellipse at 92% 115%, rgba(0,196,255,.42), transparent 52%),
    radial-gradient(ellipse at 70% -20%, rgba(255,120,200,.28), transparent 50%),
    linear-gradient(165deg,#191038 0%,#251a58 42%,#382374 72%,#4a2e93 100%)}
.hero::after{background:radial-gradient(ellipse at 20% 0%,rgba(160,130,255,.35),transparent 60%)}
.hero-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero-sky::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px),
                   radial-gradient(rgba(180,220,255,.4) 1px, transparent 1.5px);
  background-size:34px 34px, 58px 58px;background-position:0 0, 17px 21px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 78%)}
.cloud{position:absolute;background:rgba(255,255,255,.085);border-radius:50%;filter:blur(14px)}
.cloud.c1{width:340px;height:120px;left:-70px;top:-20px;border-radius:180px}
.cloud.c2{width:420px;height:140px;right:-120px;bottom:-40px;background:rgba(140,200,255,.11)}
.cloud.c3{width:220px;height:90px;left:52%;top:-50px;background:rgba(255,220,150,.09)}
.stardust{position:absolute;inset:0}
.star{position:absolute;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.dot{position:absolute;border-radius:50%;opacity:.6;animation:twinkle 4.2s ease-in-out infinite}
.hero .wrap{position:relative;z-index:3}
.hero-title{margin:10px 0 2px;line-height:0}
.ht-svg{width:366px;max-width:88vw;height:auto;overflow:visible;
  filter:drop-shadow(0 3px 0 rgba(78,44,150,.6)) drop-shadow(0 8px 16px rgba(20,8,60,.45))}
.ht-svg text{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
.hero .badge{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);
  color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.18) inset}
.hero .sub{color:rgba(255,255,255,.9);font-weight:500}
.hero .stats b{color:#ffd76e;text-shadow:0 0 12px rgba(255,200,80,.5)}
.hero-actions .btn{position:relative}
.btn .ic{width:16px;height:16px;flex:none}
.btn.primary{background:linear-gradient(180deg,#9ceaff 0%,#5a86ff 52%,#7b4bff 100%);
  border:2px solid rgba(255,255,255,.92);color:#fff;font-weight:800;
  text-shadow:0 1px 3px rgba(30,16,80,.45);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 8px 22px rgba(70,50,200,.42)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.mine{background:linear-gradient(180deg,#fff 60%,#f0eeff 100%);border:2px solid #fff;
  color:#4933c0;font-weight:800;box-shadow:inset 0 -2px 0 rgba(120,100,220,.14), 0 8px 20px rgba(20,10,60,.28)}
.btn.ghost{background:rgba(255,255,255,.14);border:1.6px solid rgba(255,255,255,.55);
  color:#fff;font-weight:600;backdrop-filter:blur(3px)}
.btn.ghost:hover{background:rgba(255,255,255,.24)}
/* 全局超淡圆点纹理 */
body{background-image:radial-gradient(rgba(108,92,231,.075) 1px, transparent 1.4px);
  background-size:26px 26px;background-position:0 0}
.card,.rec{box-shadow:0 1px 0 #fff inset, 0 2px 8px rgba(60,40,140,.05), 0 14px 30px -18px rgba(60,40,140,.16)}
@media(max-width:560px){ .ht-svg{width:250px} }

/* ===== v27：接入 PSD 官方素材 ===== */
.hero{min-height:348px;padding-bottom:40px}
.sky-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  opacity:.62;mix-blend-mode:screen}
.glow-img{position:absolute;left:-6%;top:-40%;width:64%;max-width:none;opacity:.5;
  mix-blend-mode:screen;filter:blur(1px)}
.hero-inner{display:flex;align-items:flex-start;gap:16px}
.hero-main{flex:1 1 460px;min-width:0;max-width:660px}
.hero .wrap{max-width:1080px}
.hero-pets{position:absolute;right:-4px;bottom:12px;z-index:2;display:flex;align-items:flex-end;
  pointer-events:none;                       /* 立绘完整显示，不裁不渐隐 */
  filter:drop-shadow(0 12px 24px rgba(8,2,36,.45)) drop-shadow(0 0 16px rgba(150,120,255,.3))}
.hp{height:clamp(132px,14.5vw,206px);width:auto;transform-origin:bottom center;animation:petFloat 5.6s ease-in-out infinite}
.hp-a{transform:rotate(-5deg);animation-delay:-1.2s}
.hp-b{height:clamp(152px,17vw,236px);margin:0 -10px;z-index:2;animation-delay:-2.4s}
.hp-c{transform:rotate(5deg);animation-delay:-3.6s}
@keyframes petFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:900px){
  .hero-pets{position:static;justify-content:center;margin:18px auto 4px;width:100%;
    filter:drop-shadow(0 10px 20px rgba(8,2,36,.45))}
  .hp{height:96px}
  .hp-b{height:112px}
  .hp-a,.hp-c{transform:none}
}

/* 立绘背后的渐变光晕（包框感） */
.hero-pets::before{content:"";position:absolute;inset:-8% -6% 6% -6%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 62%, rgba(160,120,255,.34), rgba(120,90,255,.14) 55%, transparent 76%);
  filter:blur(6px);z-index:-1}

/* ===== v33：用官方海报里的标题图 ===== */
.hero-title{margin:10px 0 4px;line-height:0}
.ht-img{width:492px;max-width:86vw;height:auto;display:block;border-radius:16px;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.6) 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.6) 92%,transparent 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.16), 0 10px 26px rgba(8,2,36,.5),
             0 0 34px rgba(150,120,255,.3), inset 0 0 22px rgba(120,90,255,.14);
  filter:saturate(1.06) contrast(1.03)}
@media(max-width:560px){ .ht-img{width:320px} }

/* ===== v35：hero 直接用官方 KV 图当标题 ===== */
.hero{min-height:0;padding:22px 0 24px}
.hero-pets,.hero-title,.ht-img,.ht-svg{display:none !important}
.hero-kv-wrap{max-width:900px;margin:0 auto 14px}
.hero-kv{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 14px 36px rgba(6,2,30,.55),
             0 0 44px rgba(140,110,255,.22)}
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 14px;max-width:900px}
.hero-meta .badge{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);
  color:#fff;font-weight:600;letter-spacing:.5px}
.hero .stats{margin:0}
.hero-actions{justify-content:center}
@media(max-width:560px){ .hero-kv{border-radius:12px} }

/* ===== v36：KV 铺满 + 按钮叠加图上 + 统计搬进区服卡 ===== */
.hero{padding:20px 0 22px}
.hero-kv-wrap{max-width:100%;position:relative;border-radius:18px}
.hero-kv{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.13), 0 16px 40px rgba(6,2,30,.5)}
.hero-actions{position:absolute;left:26px;bottom:24px;z-index:4;justify-content:flex-start;
  flex-wrap:wrap;gap:10px;max-width:calc(100% - 52px)}
.hero-actions .btn{box-shadow:0 6px 18px rgba(10,4,40,.35)}
.hero-actions .btn.ghost{background:rgba(32,18,72,.52);border-color:rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.hero-actions .btn.ghost:hover{background:rgba(48,28,104,.68)}
/* 统计搬进「区服」卡片 */
.filters .stats{display:flex;gap:16px;font-size:13px;color:var(--ink2);margin-left:auto;
  padding-left:14px;border-left:1px dashed var(--line2)}
.filters .stats b{color:var(--pri-d);font-size:15px;font-weight:800;margin-right:3px}
.filters .stats span{white-space:nowrap}
@media(max-width:900px){
  .hero-actions{position:static;justify-content:center;margin:14px 0 0;max-width:none;
    padding:0 4px}
  .hero-kv-wrap{border-radius:14px}
}
@media(max-width:560px){
  .filters .stats{margin-left:0;padding-left:0;border-left:0;width:100%;margin-top:6px}
}

/* ===== v37：去掉 hero 深色背景（头图黑底） ===== */
.hero{background:transparent !important;padding:16px 0 0 !important;min-height:0 !important;overflow:visible}
.hero::after{display:none !important}
.hero-sky{display:none !important}
.hero-kv{box-shadow:0 2px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(40,26,90,.22), 0 2px 8px rgba(40,26,90,.12)}

/* ===== v38：背景换成有色渐变（让白卡片浮起来） ===== */
body{
  background-color:#c9c2e6;
  background-image:
    radial-gradient(ellipse 62% 44% at 8% -8%, rgba(140,112,255,.34), transparent 60%),
    radial-gradient(ellipse 54% 40% at 94% 2%, rgba(96,170,255,.28), transparent 58%),
    radial-gradient(ellipse 72% 42% at 50% 108%, rgba(255,162,222,.22), transparent 66%),
    radial-gradient(rgba(88,70,190,.075) 1px, transparent 1.3px);
  background-size:auto, auto, auto, 30px 30px;
}
.card,.rec,.board-head{background-clip:padding-box}
/* 所有卡片统一：白底 + 紫细边 + 柔和投影（不再有白色描边/双层边） */
.card,.rec,.board-head .card{
  background:#ffffff;
  border:1px solid rgba(108,92,231,.26);
  box-shadow:0 4px 14px rgba(60,40,140,.10), 0 20px 40px -22px rgba(60,40,140,.30);
}
.rec.perfect{background:linear-gradient(180deg,#f4fdf9,#fff 42%)}
.filters .stats{border-left-color:rgba(108,92,231,.22)}

/* 卡片与背景的分层再强化一点 */
.rec:hover{border-color:rgba(108,92,231,.42)}

/* v44：收紧 KV 图与下方卡片的间距 */
.hero-kv-wrap{margin-bottom:0 !important}
.board-head .card{margin-top:0 !important}
.board-head .card + .card{margin-top:8px !important}
.list{margin-top:10px}

/* ===== v45：分页控件 ===== */
.pager{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  margin:20px 0 6px}
.pg-btn{min-width:36px;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(108,92,231,.28);
  background:#fff;color:var(--ink2);font-size:13.5px;font-weight:600;
  box-shadow:0 2px 6px rgba(60,40,140,.08)}
.pg-btn:hover:not(:disabled){border-color:var(--pri);color:var(--pri-d);background:#faf9ff}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-btn.on{background:linear-gradient(180deg,#8ab4ff,#6c5ce7);border-color:#6c5ce7;color:#fff}
.pg-gap{color:var(--ink3);padding:0 2px}
.pg-info{font-size:12.5px;color:var(--ink3);margin-left:6px}
@media(max-width:560px){ .pager{margin-top:16px} .pg-btn{min-width:32px;height:32px;padding:0 9px;font-size:13px} }
.foot-note{font-size:11.5px;color:var(--ink3);opacity:.85}

/* ===== v46：自动昵称 ===== */
.name-gen{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px dashed rgba(108,92,231,.4);background:#faf9ff}
.name-gen b{font-size:15px;color:var(--pri-d);letter-spacing:1px}

/* ===== v49：规则分「官方规则 / 网站说明」两组 ===== */
.rule-group{margin-bottom:16px}
.rule-group:last-child{margin-bottom:0}
.rule-group h4{font-size:14px;font-weight:800;color:var(--pri-d);margin-bottom:8px;
  display:flex;align-items:center;gap:7px}
.rule-group h4::before{content:"";width:4px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#8ab4ff,#6c5ce7)}
.rule-group:nth-child(2) h4{color:var(--gold)}
.rule-group:nth-child(2) h4::before{background:linear-gradient(180deg,#ffd88a,#c8962a)}
.rule-group ul{list-style:none;padding:0;margin:0}
#rule-body{font-size:14px;color:var(--ink2);line-height:1.85;list-style:none;padding-left:0}
.rule-group li{position:relative;padding-left:16px;margin-bottom:6px}
.rule-group li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;
  border-radius:50%;background:rgba(108,92,231,.5)}
.rule-group:nth-child(2) li::before{background:rgba(200,150,42,.6)}
.rule-group li b{color:#c2410c}

/* ===== v11：手机端体验优化（信息密度 + 操作可达性） ===== */

/* ① 已选区限高 + 内部滚动：选很多也不会把弹窗/卡片撑得老长
     高度取「大约 3 行」，不至于太矮显得被切；配细滚动条明确提示可滚动 */
.mchips{max-height:none;overflow:visible;padding-right:0}
.pick .grid{max-height:none;overflow:visible;padding-right:0}
.mchips::-webkit-scrollbar,.pick .grid::-webkit-scrollbar{width:6px}
.mchips::-webkit-scrollbar-track,.pick .grid::-webkit-scrollbar-track{background:transparent}
.mchips::-webkit-scrollbar-thumb,.pick .grid::-webkit-scrollbar-thumb{
  background:rgba(108,92,231,.32);border-radius:3px}
.mchips::-webkit-scrollbar-thumb:hover,.pick .grid::-webkit-scrollbar-thumb:hover{
  background:rgba(108,92,231,.5)}

/* ② 弹窗底部操作栏吸底：选完幻宠不用一路滑到底 */
#mask-add .modal-act,
#mask-pick .modal-act{
  position:sticky;bottom:0;z-index:6;
  background:#fff;border-top:1px solid var(--line);
  padding:10px 0 2px;margin-top:10px;
}
#mask-add .modal-act::before,
#mask-pick .modal-act::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,0));
}
.mask{padding-bottom:10px}

/* ③ 换货助手底部「重置/搜索」吸底浮动 */
.hv-card .mfoot{
  position:sticky;bottom:-2px;z-index:6;
  background:var(--bg2);margin-top:6px;padding-bottom:2px;
}
.hv-card .mfoot::before{
  content:"";position:absolute;left:-2px;right:-2px;top:-14px;height:14px;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,0));
}

/* ④ 「已有」的幻宠：明确表达「选不了」 */
.pcell[data-locked]{cursor:not-allowed;filter:saturate(.5)}
.pcell[data-locked]:hover{transform:none;box-shadow:none}
.pcell[data-locked]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(120,120,140,.06) 0 6px,transparent 6px 12px);
}

/* ⑤ 款类小引导 */
.warn-hint{
  display:block;font-size:12px;line-height:1.55;color:var(--warn);
  background:#fff8ec;border:1px solid #f3ddb8;border-radius:9px;padding:6px 9px;margin-top:2px;
}

@media(max-width:560px){
  .mask{padding:10px 7px 8px}
  .modal{padding:14px 13px 8px;border-radius:15px}
  .modal h3{font-size:16.5px}
  .modal .sub{font-size:12.5px;margin-bottom:11px;line-height:1.55}
  .field{gap:8px;margin-bottom:10px}
  .field label{flex:1 1 100%;font-size:12.5px}

  /* 登记弹窗：已选幻宠紧凑一档 */
  .pick{margin-bottom:11px}
  .pick .hd{margin-bottom:5px}
  .pick .hd b{font-size:13px}
  .pick .grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
  .chip{padding:5px 4px 4px;border-radius:10px;gap:2px}
  .chip img{width:62px;height:62px;border-radius:9px}
  .chip b,.chip span{font-size:11.5px;line-height:1.2}
  .chip em{font-size:10px}

  /* 选择器弹窗 */
  .tabs{gap:6px}
  .tab{font-size:12.5px;padding:6px 11px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;margin-top:9px;padding:5px}
  .pcell{padding:7px 5px 6px;border-radius:12px;gap:3px}
  .pcell img{width:72px;height:72px;border-radius:9px}
  .pcell b{font-size:12px}
  .pcell em{font-size:10px}
  .pick-info{font-size:12px;margin-right:auto}

  /* 换货助手：手机上改成两行式布局 —— 标签+按钮一行、已选幻宠占满整行
     （原来「标签 | 幻宠 | 按钮」挤在一行，幻宠每行只能放 1 个，信息量太小） */
  .mline{padding:7px 0 9px;gap:6px;flex-wrap:wrap;align-items:center}
  .mlb{width:auto;flex:1;font-size:12.5px;padding-top:0}
  .mline>.btn{order:2;flex:none}
  .mchips{order:3;flex:1 1 100%;gap:6px}
  .mchip{padding:4px 7px 4px 4px;border-radius:11px;gap:7px}
  .mchip img{width:44px;height:44px;border-radius:9px}
  .mchip b{font-size:12.5px}
  .mchip em{font-size:10.5px}
  .mfoot{padding-top:7px}
  #m-tip{font-size:12px}

  .warn-hint{font-size:11.5px;line-height:1.5}
}

/* 已选区溢出提示：底部渐隐 + 数量徽标 */
.mchips.more,.pick .grid.more{ /* 已取消内层滚动，无需渐隐 */ }
.mlb .mcnt{
  font-style:normal;font-size:11px;font-weight:800;color:var(--pri-d);
  background:var(--pri-l);border-radius:999px;padding:0 6px;margin-left:4px;
}


/* ===== v12：本轮体验优化 ===== */

/* 登记弹窗里「另一边已选」的幻宠：明确表达选不了 */
.chip[data-locked]{cursor:not-allowed;filter:saturate(.45);position:relative}
.chip[data-locked]:hover{transform:none}
.chip[data-locked]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(120,120,140,.07) 0 6px,transparent 6px 12px);
}

/* 底部操作按钮不许竖排折行 */
.modal-act .btn,.mfoot-act .btn,.mfoot .btn{white-space:nowrap;flex:none}

/* 换货助手标题旁的「?」说明按钮 */
.hv-card h2{display:flex;align-items:center;gap:1px}
.help-q{
  width:19px;height:19px;border-radius:50%;border:1px solid var(--line2);background:var(--pri-l);
  color:var(--pri-d);font-size:12px;font-weight:800;line-height:1;margin-left:7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-family:inherit;padding:0;
}
.help-q:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.help-q.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* 已选幻宠卡：文字过长省略，×按钮不许被挤扁 */
.mchip{min-width:0}
.mchip .mi{min-width:0;flex:1}
.mchip b,.mchip em{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchip button{flex:none}

/* ===== 手机端 ===== */
@media(max-width:560px){
  /* hero 四按钮：一行并排 */
  .hero-actions{
    left:12px;right:12px;bottom:11px;gap:5px;
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .hero-actions .btn{
    padding:8px 2px;font-size:11.5px;border-radius:9px;border-width:1.5px;
    display:flex;align-items:center;justify-content:center;white-space:nowrap;
  }
  .hero-actions .btn .cnt{position:static;margin-left:3px}

  /* 已选幻宠：强制一行两个（之前被长名字撑成一行一个） */
  .mchip{flex:0 0 calc(50% - 3px);box-sizing:border-box}
  .mchip img{flex:none}

  /* 保留更紧凑的卡片尺寸 */
  .mchip{padding:4px 6px 4px 4px;gap:6px}
}


/* ===== v13：体验巡检修复 ===== */

/* 列表加载中占位 */
.list-loading{text-align:center;color:var(--ink2);font-size:13.5px;padding:34px 0;
  letter-spacing:.4px}
.list-loading::before{content:"";display:inline-block;width:13px;height:13px;margin-right:7px;
  border:2px solid rgba(108,92,231,.28);border-top-color:var(--pri);border-radius:50%;
  vertical-align:-2px;animation:lspin .8s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}