/* ============================================================
   魔灵Agent · 样式（原名「本地 Wiki」，1022a 更名）
   视觉基准：官网 https://sw.com2us.com/zh-hans/skyarena
     · 主色  #ff5b38（官网 CTA 橙）、金色 #fdd61d（官网 ui_smon.css 实测）
     · 深色系 #181818/#1b1b1b、浅色系 #f6f6f6/#fff（官网双主题）
     · 素材  logo_zh-hans_white.svg / main_bg.jpg / game_img_1.jpg /
             magic_square.png / pattern_*.svg / attr_*.png / rune/*.svg
   全部取自 sw.com2us.com 的 ui_smon.css 与 event-fn.qpyou.cn 品牌资源
   主题：html[data-theme=dark]（默认，游戏质感）/ light（官网门户观感）
   ============================================================ */
/* —— 深色主题（默认）：游戏内 UI 质感 —— */
:root,
html[data-theme=dark]{
  --bg:#141414; --bg2:#1b1b1b; --card:#1f1f1f; --card2:#262626;
  --line:#333333; --line2:#2b2b2b; --line3:#3d3d3d;
  --tx:#f6f6f6; --tx2:#d2d2d2; --tx3:#9e9e9e; --tx4:#858585;
  --hd:#ffffff;                 /* 标题/强调字 */
  --hov:#303030;                /* hover 面（按钮/卡） */
  --hov-soft:rgba(255,255,255,.05);
  --inset:#171717;              /* 输入框/凹陷面 */
  --imgbg:#2a2a2a;              /* 图片底 */
  --pri:#ff5b38; --pri-d:#e8461f; --pri-l:rgba(255,91,56,.14);
  --pri-t:#ff8f75;              /* 橙语义文字（tag.pri） */
  --gold:#fdd61d; --gold-d:#c9a80f; --gold-solid:#fdd61d;   /* 金底徽章专用（不随主题变深） */
  /* 属性色：取自官网 spt_label.png 五属性实色 */
  --w:#3e98de; --f:#e0503a; --n:#2fae85; --l:#e0a32e; --k:#9a63e0;
  --s3:#3e98de; --s4:#a06be0; --s5:#fdd61d;
  --ok:#3fae74; --warn:#e0912e; --bad:#e0503a;
  --ok-t:#6fd3a2; --warn-t:#e6b463; --bad-t:#f0907d;
  --acc-t:#6fb6f0; --pur-t:#c9a0f0;   /* 蓝/紫语义文字 */
  --sh:0 2px 12px rgba(0,0,0,.5);
  --sh-lg:0 10px 26px rgba(0,0,0,.55);
  --br:10px;
  /* hero（深色：官网 game 页魔法阵场景） */
  --hero-img:url("assets/brand/game_img_1.jpg");
  --hero-veil:linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.78) 34%,rgba(10,12,14,.18) 68%,rgba(10,12,14,.55) 100%);
  --hero-t1:linear-gradient(92deg,#fff,#ffd9a0 45%,var(--gold));
  --hero-t2:#c9cdd6;
  --hb-bg:rgba(0,0,0,.45); --hb-bd:rgba(255,255,255,.18); --hb-tx:#e6e6e6;
  /* 召唤书卡片（1024b：原来写死深色，浅色主题下卡片仍是黑底） */
  --bk-bg1:#303034; --bk-bg2:#1e1e21; --bk-bd:#3d3d43;
  --bk-tx:#eef3fb; --bk-sub:#a9b6ce;
  --bk-chip:rgba(255,255,255,.14); --bk-chip-bd:rgba(255,255,255,.22);
  --bk-tint:rgba(255,255,255,.10); --bk-shadow:0 8px 24px rgba(0,0,0,.55);
  --bk-note:rgba(0,0,0,.28);
}
/* —— 浅色主题：官网门户观感（浅底 + 橙红品牌色，导航保持深色条） —— */
html[data-theme=light]{
  --bg:#f2f3f6; --bg2:#ffffff; --card:#ffffff; --card2:#eef0f4;
  --line:#dfe2e8; --line2:#e7eaef; --line3:#d2d6dd;
  --tx:#1d2025; --tx2:#3f444c; --tx3:#69707a; --tx4:#939aa4;
  --hd:#181818;
  --hov:#e4e7ec;
  --hov-soft:rgba(20,30,50,.045);
  --inset:#ffffff;
  --imgbg:#e9ebf0;
  --pri:#ff5b38; --pri-d:#e8461f; --pri-l:rgba(255,91,56,.11);
  --pri-t:#d8421d;
  --gold:#b8900a; --gold-d:#8f6f06; --gold-solid:#fdd61d;
  --w:#2f7fc4; --f:#d0432a; --n:#249a70; --l:#c58a14; --k:#8a4fd0;
  --s3:#3e98de; --s4:#a06be0; --s5:#c9a80f;
  --ok:#2e8f5c; --warn:#b97414; --bad:#d0432a;
  --ok-t:#1f7a4d; --warn-t:#a5650f; --bad-t:#c23a22;
  --acc-t:#2668b0; --pur-t:#7c46c4;
  --sh:0 2px 10px rgba(24,34,56,.08);
  --sh-lg:0 10px 26px rgba(24,34,56,.14);
  /* hero（浅色：官网首页天空之役场景） */
  --hero-img:url("assets/brand/main_bg.jpg");
  --hero-veil:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.2) 68%,rgba(255,255,255,.6) 100%);
  --hero-t1:linear-gradient(92deg,#181818,#a4500f 45%,#8f6f06);
  --hero-t2:#5a5f68;
  --hb-bg:rgba(24,24,24,.6); --hb-bd:rgba(24,24,24,.25); --hb-tx:#fff;
  /* 召唤书卡片：浅底白卡 + 细边框（1024b） */
  --bk-bg1:#ffffff; --bk-bg2:#f7f8fb; --bk-bd:#e3e7ee;
  --bk-tx:#1d2025; --bk-sub:#6b7280;
  --bk-chip:rgba(20,30,50,.05); --bk-chip-bd:rgba(20,30,50,.10);
  --bk-tint:rgba(20,30,50,.05); --bk-shadow:0 6px 18px rgba(24,34,56,.10);
  --bk-note:rgba(20,30,50,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:14px/1.6 "Microsoft YaHei","PingFang SC",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* 官网魔法阵水印（底纹，随主题调淡） */
body::before{
  content:'';position:fixed;right:-16vw;top:8vh;width:74vw;height:74vw;pointer-events:none;z-index:0;
  background:url("assets/brand/magic_square.png") center/contain no-repeat;
  opacity:.05;filter:grayscale(.3);
  animation:slowspin 240s linear infinite;
}
html[data-theme=light] body::before{opacity:.07;filter:grayscale(.55) invert(.86)}
@keyframes slowspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
body>*{position:relative;z-index:1}
a{color:var(--pri);text-decoration:none}
b,strong{font-weight:600}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--hov);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line3)}
::selection{background:rgba(255,91,56,.35)}
/* 主题切换过渡（只在切换瞬间启用，避免首载闪烁） */
html.th-anim,body.th-anim,.th-anim *{transition:background-color .25s ease,color .25s ease,border-color .25s ease}

/* ---------- 顶栏：官网式深色导航条（两种主题下都保持深色，logo 白色版通用） ---------- */
.top{
  position:sticky;top:0;z-index:50;background:rgba(18,18,19,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid #2e2e2e;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 22px;flex-wrap:wrap;
}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,91,56,.75),rgba(253,214,29,.5),transparent)}
.brand{display:flex;align-items:center;gap:12px}
.brand .lg{height:30px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand .logo{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ff5b38,#c3351a);color:#fff;font-weight:700;font-size:18px;
  box-shadow:0 3px 10px rgba(255,91,56,.35);
}
.brand b{display:block;font-size:15px;letter-spacing:.3px;color:#f6f6f6}
/* 品牌名「魔灵Agent」的 Agent 段：橙→金渐变（1022a 更名） */
.brand b em{font-style:normal;background:linear-gradient(90deg,#ff8a5c,#ff5b38 55%,#fdd61d);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand i{display:block;font-style:normal;font-size:11.5px;color:#858585}
/* 顶栏导航：固定深底配色，不随页面主题变 */
.tabs{display:flex;gap:4px}
.tabs a{
  padding:8px 16px;border-radius:8px;color:#9e9e9e;font-weight:500;font-size:13.5px;
  transition:.15s;white-space:nowrap;position:relative;
}
.tabs a:hover{background:#2b2b2b;color:#f6f6f6}
.tabs a.on{background:var(--pri);color:#fff;box-shadow:0 2px 10px rgba(255,91,56,.4)}
/* ── 二级菜单（1028i）：.grp 分组 / .gh 分组标题 / .sub 下拉 ── */
.tabs{align-items:center}
.grp{position:relative;display:flex}
.tabs a.gh{display:flex;align-items:center;gap:5px}
.tabs a.gh i{font-style:normal;font-size:9px;line-height:1;opacity:.65;transition:transform .18s}
.grp:hover>a.gh,.grp.open>a.gh{background:#2b2b2b;color:#f6f6f6}
.grp:hover>a.gh i,.grp.open>a.gh i{transform:rotate(180deg)}
/* 当前页所属分组：标题保持橙色点亮 */
.grp.cur>a.gh{background:var(--pri);color:#fff;box-shadow:0 2px 10px rgba(255,91,56,.4)}
.grp.cur>a.gh i{opacity:.9}
.sub{
  position:absolute;top:100%;left:0;z-index:60;min-width:132px;
  margin-top:7px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:#232324;border:1px solid #3a3a3a;border-radius:10px;
  box-shadow:0 16px 38px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
/* 透明桥接带：鼠标从标题移到下拉的途中不丢 hover */
.sub::before{content:'';position:absolute;left:0;right:0;top:-9px;height:9px}
.grp:hover>.sub,.grp.open>.sub{opacity:1;visibility:visible;transform:none}
.grp[data-align="right"]>.sub{left:auto;right:0}
.tabs .sub a{padding:7px 12px;border-radius:7px;font-size:13px;color:#9e9e9e}
.tabs .sub a:hover{background:#333338;color:#f6f6f6}
.tabs .sub a.on{background:var(--pri);color:#fff;box-shadow:none}
.tabs a.acctchip{color:#858585;border:1px solid #3d3d3d}
.tabs a.acctchip:hover{color:#f6f6f6;border-color:#4a4a4a;background:#2b2b2b}
.tabs a.acctchip.on{color:#fdd61d;border-color:#c9a80f;background:#2b2b2b}
.tabs a.ver{color:#858585;border:1px solid #333}
.tabs a.ver:hover,.tabs a.ver.on{color:#fdd61d;border-color:#c9a80f;background:#2b2b2b}
/* 主题切换按钮（官网风格圆钮） */
.thbtn{width:32px;height:32px;padding:0!important;display:grid;place-items:center;
  border-radius:50%!important;font-size:15px;line-height:1;
  background:#2b2b2b!important;color:#fdd61d!important;border:1px solid #3d3d3d}
.thbtn:hover{background:#3a3a3a!important;border-color:#555!important}

/* ---------- 官网主视觉横幅（深浅主题各配官网场景图） ---------- */
.hero{
  position:relative;height:132px;margin:0 0 18px;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);background:var(--bg2);
}
.hero .art{position:absolute;inset:0;background:var(--hero-img) center 42%/cover no-repeat;
  opacity:.85}
.hero .veil{position:absolute;inset:0;background:var(--hero-veil)}
.hero .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 26px;gap:5px}
.hero .t1{font-size:21px;font-weight:700;letter-spacing:1px;
  background:var(--hero-t1);-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.hero .t2{font-size:12.5px;color:var(--hero-t2);letter-spacing:.4px}
.hero .badges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.hero .badges span{font-size:11px;padding:2px 9px;border-radius:999px;
  background:var(--hb-bg);border:1px solid var(--hb-bd);color:var(--hb-tx)}
.hero .deco{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:88px;opacity:.5;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}

main{padding:0 22px 30px;max-width:1560px;margin:0 auto}

/* ---------- 通用 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--br);box-shadow:var(--sh)}
.pad{padding:18px 20px}
h2.sec{font-size:16px;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--hd)}
h2.sec::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--pri);flex:0 0 auto}
h2.sec small{font-weight:400;color:var(--tx4);font-size:12px}
h3.sub{font-size:13.5px;margin:20px 0 10px;color:var(--tx2);font-weight:600;
  display:flex;align-items:center;gap:7px}
h3.sub::before{content:'';width:3px;height:13px;border-radius:2px;background:var(--pri)}
.hint{color:var(--tx4);font-size:12.5px;line-height:1.7}
.hint b{color:var(--tx2)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.grow{flex:1;min-width:280px}
.grid{display:grid;gap:14px}

button,.btn{
  font:inherit;cursor:pointer;border:1px solid var(--line3);background:var(--card2);color:var(--tx);
  padding:7px 14px;border-radius:8px;transition:.15s;
}
button:hover,.btn:hover{border-color:var(--line3);background:var(--hov)}
button.pri{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
button.pri:hover{background:var(--pri-d);border-color:var(--pri-d)}
button.gh{background:transparent;color:var(--tx2)}
button.gh:hover{background:var(--card2)}
button:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=search],select{
  font:inherit;padding:7px 11px;border:1px solid var(--line3);border-radius:8px;
  background:var(--inset);color:var(--tx);outline:none;transition:.15s;
}
input::placeholder{color:var(--tx4)}
input[type=text]:focus,input[type=search]:focus,select:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line3);background:var(--card2);font-size:12.5px;cursor:pointer;
  user-select:none;transition:.12s;color:var(--tx2);
}
.chip:hover{border-color:var(--line3);color:var(--tx)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
.chip.on.w{background:var(--w);border-color:var(--w)}
.chip.on.f{background:var(--f);border-color:var(--f)}
.chip.on.n{background:var(--n);border-color:var(--n)}
.chip.on.l{background:#c99316;border-color:#c99316}
.chip.on.k{background:var(--k);border-color:var(--k)}
/* 「显示活动/合成魔灵」开启态：用低饱和的琥珀色，表示这是非默认口径 */
.chip.on.warn{background:#8a6a24;border-color:#8a6a24}
.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;line-height:18px;
  background:var(--card2);color:var(--tx2);border:1px solid var(--line3)}
.tag.ok{background:rgba(63,174,116,.16);color:var(--ok-t);border-color:rgba(63,174,116,.42)}
.tag.warn{background:rgba(224,145,46,.16);color:var(--warn-t);border-color:rgba(224,145,46,.42)}
.tag.bad{background:rgba(224,80,58,.16);color:var(--bad-t);border-color:rgba(224,80,58,.42)}
.tag.pri{background:var(--pri-l);color:var(--pri-t);border-color:rgba(255,91,56,.42)}
.tag.gold{background:rgba(253,214,29,.14);color:var(--gold);border-color:rgba(253,214,29,.38)}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12px}

/* 属性色 */
.el-w{color:var(--w)} .el-f{color:var(--f)} .el-n{color:var(--n)} .el-l{color:var(--l)} .el-k{color:var(--k)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:middle}
.bg-w{background:var(--w)} .bg-f{background:var(--f)} .bg-n{background:var(--n)}
.bg-l{background:var(--l)} .bg-k{background:var(--k)}

/* ---------- 图鉴 ---------- */
.dexbar{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.mixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:8px}
.mcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--br);cursor:pointer;
  transition:.13s;position:relative;display:flex;align-items:center;gap:9px;padding:7px 9px;
}
.mcard:hover{background:var(--hov);border-color:var(--pri);box-shadow:0 4px 16px rgba(0,0,0,.55)}
.mcard .thumb{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:9px;
  overflow:hidden;background:rgba(42,42,42,.35);border:1.5px solid rgba(120,120,130,.28)}
.mcard .thumb.ew{border-color:rgba(64,145,255,.45)} .mcard .thumb.ef{border-color:rgba(232,85,62,.45)}
.mcard .thumb.en{border-color:rgba(70,180,110,.45)} .mcard .thumb.el{border-color:rgba(235,190,80,.45)}
.mcard .thumb.ek{border-color:rgba(150,90,220,.45)}
/* 头像图：只作用于 .face，避免把属性徽章一起拉伸（旧写法 .thumb img 权重过高会盖满整格） */
.mcard .thumb>img.face{width:100%;height:100%;display:block;object-fit:cover}
.mcard .thumb .ph{width:100%;height:100%;display:grid;place-items:center;
  color:#fff;font-size:20px;font-weight:700}
/* 官网属性宝石徽章（spt_attr.png 切图）：固定小尺寸，钉在右下角 */
.mcard .thumb>img.elbadge{
  position:absolute;left:auto;right:1px;bottom:1px;width:14px;height:14px;
  border-radius:4px;object-fit:contain;pointer-events:none;
  background:rgba(10,10,10,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
.mcard .body{min-width:0;flex:1}
.mcard .nm{font-weight:600;font-size:13px;display:flex;align-items:baseline;gap:5px}
.mcard .nmx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .meta{color:var(--tx4);font-size:11px;margin-top:1px}
/* 召唤书抽不到的魔灵：来源角标（活动限定 / 合成 / 材料） */
.mcard .meta .nstag{
  display:inline-block;padding:0 4px;border-radius:3px;font-size:10px;line-height:14px;
  vertical-align:1px;border:1px solid currentColor;opacity:.9;
}
.mcard .meta .nstag.n1{color:var(--acc-t)}    /* 活动 / 商店 / HoH */
.mcard .meta .nstag.n2{color:var(--warn-t)}    /* 合成 */
.mcard .meta .nstag.n3{color:var(--tx3)}    /* 材料 */
/* 联动皮 / 原皮：同一只的两套美术，同名同族，靠角标区分 */
.mcard .meta .ctag{
  display:inline-block;padding:0 4px;border-radius:3px;font-size:10px;line-height:14px;
  vertical-align:1px;border:1px solid currentColor;opacity:.9;
}
.mcard .meta .ctag.c{color:var(--gold)}      /* 联动皮：金色 */
.mcard .meta .ctag.o{color:var(--tx3)}       /* 原皮：灰 */
.mcard.nonsum{opacity:.82}
.mcard.nonsum:hover{opacity:1}
.mcard .stat{display:flex;gap:9px;margin-top:4px;font-size:11px;color:var(--tx4)}
.mcard .stat b{color:var(--tx2);font-weight:600}
.star{color:var(--gold);font-size:8.5px;letter-spacing:-1px;flex:0 0 auto}
.star.s3{color:var(--s3)} .star.s4{color:var(--s4)}

/* 详情弹窗 */
.md-head{display:flex;gap:16px;align-items:flex-start}
.md-head img{width:118px;height:118px;border-radius:12px;border:1px solid var(--line3);flex:0 0 auto;background:var(--card2)}
.md-title{font-size:20px;font-weight:700;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--hd)}
.md-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:10px}
.stat-box{background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:7px 9px}
.stat-box i{font-style:normal;display:block;font-size:11px;color:var(--tx4)}
.stat-box b{font-size:14.5px;color:var(--hd)}
.skill{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line2)}
.skill:first-child{border-top:0}
.skill img{width:46px;height:46px;border-radius:9px;border:1px solid var(--line3);flex:0 0 auto;background:var(--imgbg)}
.skill .sn{font-weight:600;font-size:13.5px;color:var(--hd)}
.skill .sm{font-size:12.5px;color:var(--tx2);margin-top:2px}
.skill .mult{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:6px;
  background:rgba(253,214,29,.12);border:1px solid rgba(253,214,29,.4);color:var(--gold);font-size:12px;
  font-family:ui-monospace,Consolas,monospace;font-weight:600}
.skill details{margin-top:6px}
.skill summary{cursor:pointer;color:var(--tx4);font-size:12px;user-select:none}
.skill .en{color:var(--tx4);font-size:12px;line-height:1.65;margin-top:5px;
  background:var(--bg2);border-left:2px solid var(--line3);padding:6px 9px;border-radius:0 6px 6px 0}
.ups{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
/* 阵容页配装细节折叠（2026-10-16 用户要求默认收起） */
details.rd{margin-top:8px}
details.rd>summary{cursor:pointer;user-select:none;color:var(--tx2);font-size:12.5px;
  padding:6px 10px;border:1px dashed var(--line3);border-radius:8px;display:inline-block}
details.rd>summary:hover{color:var(--pri);border-color:var(--pri)}
details.rd[open]>summary{margin-bottom:8px}

/* ---------- 召唤 ---------- */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.book{
  position:relative;border-radius:var(--br);padding:8px 9px 10px;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,var(--bk-bg1),var(--bk-bg2));color:var(--bk-tx);
  border:1px solid var(--bk-bd);transition:.16s;display:flex;flex-direction:column;
}
/* 2026-10-16 用户反馈「图标太小、框太大」：去掉固定高度的内框底色，
   图标直接坐在卡片渐变上并放大（素材自带透明边，同尺寸看着小）
   1024b 再次放大：图标宽度跟随卡片（上限 168），边框统一 1px，选中态改内描边不撑大外框 */
.book .bart{position:relative;border-radius:9px;z-index:2;
  display:flex;justify-content:center;align-items:center;margin:1px 0 7px}
.book .bimg{width:100%;max-width:168px;height:auto;max-height:168px;object-fit:contain;
  position:relative;z-index:1;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.28));transition:transform .22s ease;pointer-events:none}
.book:hover .bimg{transform:scale(1.05)}
.book .btri{display:flex;align-items:center;justify-content:center;gap:2px;position:relative;z-index:1;width:100%}
.book .btri .bimg{width:84px;height:118px;max-height:none}
/* 联动书只有一张图时（芙莉莲等）不再被 84×118 压扁，按普通书同尺寸铺满 */
.book .btri .bimg:only-child{width:100%;max-width:168px;height:auto;max-height:168px}
/* 2026-10-27「限时特别召唤」入口卡：新魔灵是 102px 方头像（不是竖长书图），
   不能套上面的 84×118，否则会被压成竖条。
   本期是 五属性 5 张（火水风光暗），固定三列 → 永远排成 3+2。
   不能用固定 px：卡片宽度随 grid 列宽浮动，写死 46px 在宽屏会变成 4+1。 */
.book.up .bart{margin-bottom:6px}
.book.up .btri{gap:4px;flex-wrap:wrap}
.book.up .btri .bimg{width:calc((100% - 8px)/3);height:auto;aspect-ratio:1/1;
  border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px rgba(253,214,29,.5)}
.book.up .bt{color:var(--gold)}
.book .bart.note{background:repeating-linear-gradient(45deg,var(--bk-tint) 0 6px,transparent 6px 12px),var(--bk-note);
  border-radius:9px}
.book .bart.note .bimg{opacity:.55;filter:grayscale(.35) drop-shadow(0 3px 7px rgba(0,0,0,.35))}
.book .icbadge{position:absolute;right:5px;top:5px;z-index:3;width:20px;height:20px;line-height:20px;
  text-align:center;border-radius:6px;font-size:12px;font-weight:700;color:#fff;pointer-events:none}
.book .icbadge.note{background:#4b5568;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.book:hover{transform:translateY(-2px);box-shadow:var(--bk-shadow)}
.book.on{border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold),0 6px 18px rgba(200,160,20,.22)}
.book::after{content:'';position:absolute;right:-26px;bottom:-26px;width:92px;height:92px;
  border-radius:50%;background:radial-gradient(circle,var(--bk-tint),transparent 68%)}
.book .bt{font-weight:600;font-size:13px;line-height:1.35;position:relative;z-index:1}
.book .bg2{color:var(--bk-sub);font-size:11px;margin-top:2px;position:relative;z-index:1}
.book .br{margin-top:auto;padding-top:7px;display:flex;flex-wrap:wrap;gap:4px;position:relative;z-index:1}
.book .pr{background:var(--bk-chip);border:1px solid var(--bk-chip-bd);
  border-radius:5px;padding:0 6px;font-size:10.5px;line-height:17px}
.book .ic{position:absolute;right:9px;top:9px;width:34px;height:34px;border-radius:7px;
  object-fit:cover;z-index:2;opacity:.96}
@media (prefers-reduced-motion:reduce){.book .bimg{transition:none}}
.book.g12{background:linear-gradient(160deg,#3b3348,#241f30)}
.book.ld{background:linear-gradient(160deg,#332e42,#1f1c2c)}
.book.aniv{background:linear-gradient(160deg,#46381e,#2a2212)}
.book.rare{background:linear-gradient(160deg,#25443a,#172a21)}
/* 浅色主题：上面四色底改浅，否则白卡逻辑又被打回黑底 */
html[data-theme=light] .book.g12{background:linear-gradient(160deg,#f6f2ff,#eef0f8)}
html[data-theme=light] .book.ld{background:linear-gradient(160deg,#f3f0fb,#eceef6)}
html[data-theme=light] .book.aniv{background:linear-gradient(160deg,#fdf6e8,#f7f3ea)}
html[data-theme=light] .book.rare{background:linear-gradient(160deg,#eef8f2,#f0f5f2)}
/* 2026-10-16 用户要求：召唤明细一行 20 个 —— 格子缩到图标为主，名称保留、星级行隐藏 */
.resultgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px}
.res{position:relative;background:var(--card2);border:1px solid var(--line3);border-radius:8px;overflow:hidden;
  animation:pop .3s ease backwards}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.res img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--imgbg)}
.res .rn{font-size:10px;font-weight:600;padding:2px 3px 0;text-align:center;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .rt{font-size:10.5px;color:var(--tx4);text-align:center;padding-bottom:5px}
.resultgrid .res .rt{display:none}
/* 星级光效：对齐游戏内召唤演出
   4★ = 细边（安静）  5★ = 粗边 + 爆发（张扬）
   三系水火风 = 呼吸外发光，5★ 加一道斜向流光扫过
   光 = 旋转圣光轮 + 八芒星脉冲 + 圣光涨落（神圣、有旋转）
   暗 = 反向暗涡 + 心跳双跳 + 裂缝闪光 + 邪气抖动（邪异、有节奏）
   光暗不共用三系的节奏，形态上就要能一眼分开 */
.res.s4,.res.s5{--ed:1px;--du:2.6s;--h1:5px;--h2:12px;--h3:20px}
.res.s4{animation:pop .3s ease backwards,glow4 var(--du) ease-in-out infinite}
.res.s5{--ed:2.5px;--du:1.1s;--h1:14px;--h2:30px;--h3:48px;
  animation:pop .36s cubic-bezier(.18,1.5,.4,1) backwards,glow5 var(--du) ease-in-out infinite}
/* 卡内特效层：::before = 底纹（光轮/暗涡，仅光暗有），::after = 内描边 + 扫光 */
.res.gL.s4::before,.res.gL.s5::before,.res.gK.s4::before,.res.gK.s5::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2}
.res .rn,.res .rt{position:relative;z-index:4}
/* --- 水 / 火 / 风 --- */
.res.gR.s4{background:linear-gradient(180deg,#272d34,#1a2027);border-color:#5d7385;
  --c1:rgba(165,198,235,.34);--c2:rgba(135,178,225,.2);
  --c1h:#dcebff;--c2h:rgba(190,220,250,.5);--c3:rgba(120,170,225,.2)}
.res.gR.s5{background:linear-gradient(180deg,#3d2559,#231434);border-color:#d793ff;
  --c1:rgba(186,116,252,.75);--c2:rgba(158,78,246,.55);
  --c1h:#f0d0ff;--c2h:rgba(196,126,255,1);--c3:rgba(226,170,60,.55)}
.res.gR.s4 .rt{color:#8fc0f0}
.res.gR.s5 .rt{color:#cfa4ff}
.res.gR.s5 .rn{color:#f0e0ff}
.res.gR.s5 img{filter:drop-shadow(0 0 11px rgba(168,88,255,.8)) saturate(1.1)}
/* --- 光：旋转圣光轮 + 八芒星 ---
   静态辨识：圆角更大（12px）+ 四角圣光溢出（不依赖动画也能认出） */
.res.gL.s4,.res.gL.s5{border-radius:12px}
.res.gL.s4::after,.res.gL.s5::after{border-radius:11px}
.res.gL.s4{background:
    radial-gradient(circle at 5% 6%,rgba(255,248,220,.3),transparent 24%),
    linear-gradient(180deg,#35301c,#221e10);border-color:#8a7745;
  --c1:rgba(243,220,146,.4);--c2:rgba(226,196,113,.24);
  --c1h:#ffeec0;--c2h:rgba(255,222,140,.55);--c3:rgba(230,200,110,.2)}
.res.gL.s5{background:
    radial-gradient(circle at 5% 6%,rgba(255,250,225,.5),transparent 22%),
    radial-gradient(circle at 95% 94%,rgba(255,240,190,.28),transparent 22%),
    linear-gradient(180deg,#4c3a12,#2c2008);border-color:#ffd76a;
  --c1:rgba(255,214,110,.85);--c2:rgba(255,196,60,.6);
  --c1h:#fffbe8;--c2h:rgba(255,226,130,1);--c3:rgba(255,246,210,.7);
  animation:pop .36s cubic-bezier(.18,1.5,.4,1) backwards,
    glowL 1.9s ease-in-out infinite,holyflare 1.9s ease-in-out infinite}
.res.gL.s4 .rt{color:#e3c877}
.res.gL.s5 .rt{color:#ffe08a}
.res.gL.s5 .rn{color:#fff4cf;text-shadow:0 0 9px rgba(255,205,80,.7)}
.res.gL.s5 img{filter:drop-shadow(0 0 13px rgba(255,198,60,.85)) saturate(1.12) brightness(1.06)}
/* 光 4★：一圈慢慢转的淡金圣光轮（中心留空给头像） */
.res.gL.s4::before{
  background:repeating-conic-gradient(from 0deg,rgba(255,238,180,.5) 0deg,
    rgba(255,238,180,0) 8deg,rgba(255,238,180,0) 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 24%,#000 44%,transparent 84%);
  mask:radial-gradient(closest-side,transparent 24%,#000 44%,transparent 84%);
  opacity:.42;animation:holospin 30s linear infinite}
/* 光 5★：圣光轮 + 八芒星，一起转、一起随圣光涨落 */
.res.gL.s5::before{
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.95) 48%,rgba(255,255,255,.95) 52%,transparent) center/2px 74% no-repeat,
    linear-gradient(0deg,transparent,rgba(255,248,220,.9) 48%,rgba(255,248,220,.9) 52%,transparent) center/62% 2px no-repeat,
    linear-gradient(45deg,transparent,rgba(255,240,180,.62) 48%,rgba(255,240,180,.62) 52%,transparent) center/1.5px 50% no-repeat,
    linear-gradient(-45deg,transparent,rgba(255,240,180,.62) 48%,rgba(255,240,180,.62) 52%,transparent) center/1.5px 50% no-repeat,
    repeating-conic-gradient(from 0deg,rgba(255,240,190,.55) 0deg,rgba(255,240,190,0) 6deg,rgba(255,240,190,0) 22.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 16%,#000 42%,transparent 86%);
  mask:radial-gradient(closest-side,transparent 16%,#000 42%,transparent 86%);
  animation:holospin 5.5s linear infinite,holyburst 1.9s ease-in-out infinite}
/* 光 5★ 扫光：一道竖直光柱自下而上贯穿（和三系的横扫完全不同） */
.res.gL.s5::after{box-shadow:inset 0 0 0 2.5px var(--c1h),inset 0 0 30px var(--c2),
    inset 0 0 62px rgba(255,228,150,.4);
  background:linear-gradient(0deg,transparent 18%,rgba(255,250,225,.9) 50%,transparent 80%);
  background-size:100% 58%;background-repeat:no-repeat;
  animation:holypillar 2.3s cubic-bezier(.4,0,.5,1) infinite}
@keyframes holospin{to{transform:rotate(360deg)}}
@keyframes holospinR{to{transform:rotate(-360deg)}}
@keyframes holyburst{0%,100%{opacity:.5;filter:brightness(1)}50%{opacity:1;filter:brightness(1.5)}}
@keyframes holyflare{0%,100%{filter:brightness(1)}50%{filter:brightness(1.11)}}
@keyframes holypillar{0%{background-position:0 260%}70%,100%{background-position:0 -170%}}
@keyframes glowL{
  0%,100%{box-shadow:0 0 0 var(--ed) var(--c1),0 0 var(--h1) var(--c2),0 0 var(--h2) var(--c3)}
  50%{box-shadow:0 0 0 calc(var(--ed) + .6px) var(--c1h),0 0 var(--h2) var(--c2h),
    0 0 var(--h3) var(--c3),0 0 calc(var(--h3) + 42px) rgba(255,236,172,.4)}}
/* --- 暗：反向暗涡 + 心跳 + 裂缝 ---
   静态辨识：圆角更硬（7px）+ 四角被阴影啃掉的暗角（不依赖动画也能认出） */
.res.gK.s4,.res.gK.s5{border-radius:7px}
.res.gK.s4::after,.res.gK.s5::after{border-radius:6px}
.res.gK.s4{background:
    radial-gradient(circle at 4% 5%,rgba(10,0,12,.92),transparent 27%),
    radial-gradient(circle at 96% 95%,rgba(10,0,12,.92),transparent 27%),
    linear-gradient(180deg,#2e1c2b,#1b1119);border-color:#7b4a68;
  --c1:rgba(212,124,166,.42);--c2:rgba(168,64,116,.24);
  --c1h:#ffc7dd;--c2h:rgba(240,120,170,.5);--c3:rgba(150,40,190,.2)}
.res.gK.s5{background:
    radial-gradient(circle at 4% 5%,rgba(8,0,10,.95),transparent 25%),
    radial-gradient(circle at 96% 95%,rgba(8,0,10,.95),transparent 25%),
    linear-gradient(180deg,#3d0d24,#210616);border-color:#ff5f9e;
  --c1:rgba(255,110,168,.85);--c2:rgba(228,52,124,.6);
  --c1h:#ffd7e8;--c2h:rgba(255,96,158,1);--c3:rgba(140,30,200,.6);
  animation:pop .36s cubic-bezier(.18,1.5,.4,1) backwards,
    glowK 1.05s cubic-bezier(.2,.7,.3,1) infinite,darkshake 2.4s ease-in-out infinite}
.res.gK.s4 .rt{color:#d993b6}
.res.gK.s5 .rt{color:#ff86b8}
.res.gK.s5 .rn{color:#ffdcec;text-shadow:0 0 9px rgba(255,60,130,.65)}
.res.gK.s5 img{filter:drop-shadow(0 0 13px rgba(255,60,130,.8)) saturate(1.12)}
/* 暗 4★：几团缓慢漂移的暗雾 */
.res.gK.s4::before{
  background:
    radial-gradient(46% 40% at 24% 26%,rgba(158,40,196,.5),transparent 70%),
    radial-gradient(42% 38% at 76% 70%,rgba(222,40,112,.44),transparent 70%),
    radial-gradient(38% 34% at 58% 20%,rgba(96,20,148,.44),transparent 72%);
  background-size:180% 180%,172% 172%,160% 160%;background-repeat:no-repeat;
  opacity:.72;animation:darkdrift 13s ease-in-out infinite alternate}
/* 暗 5★：反向漩涡 + 心跳（先猛涨一下再缓缓消散，比三系有攻击性） */
.res.gK.s5::before{
  background:
    radial-gradient(closest-side,rgba(255,64,142,.8),rgba(178,20,92,.3) 44%,transparent 72%) center/56% 56% no-repeat,
    repeating-conic-gradient(from 0deg,rgba(196,44,236,.5) 0deg,transparent 5deg,transparent 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 60%,transparent 96%);
  mask:radial-gradient(closest-side,#000 60%,transparent 96%);
  animation:holospinR 7s linear infinite,darkheart 1.05s ease-in-out infinite}
/* 暗 5★ 扫光：斜向裂缝一闪而过（不是连续流光） */
.res.gK.s5::after{box-shadow:inset 0 0 0 2.5px var(--c1h),inset 0 0 30px var(--c2),
    inset 0 0 64px rgba(140,20,190,.45);
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,130,196,.95) 49%,transparent 56%),
    linear-gradient(78deg,transparent 58%,rgba(206,86,255,.7) 66%,transparent 74%);
  background-size:58% 100%,52% 100%;background-repeat:no-repeat;
  animation:darkcrack 2.4s ease-in-out infinite}
@keyframes darkdrift{
  0%{background-position:0% 0%,100% 100%,40% 8%}
  100%{background-position:30% 26%,62% 58%,82% 42%}}
@keyframes darkheart{
  0%{opacity:.5;filter:brightness(.85)}
  16%{opacity:1;filter:brightness(1.45)}
  38%{opacity:.72;filter:brightness(1)}
  100%{opacity:.5;filter:brightness(.85)}}
@keyframes darkcrack{
  0%,58%{background-position:150% 0,-62% 0}
  68%{background-position:0 0,100% 0}
  78%{background-position:-58% 0,150% 0}
  88%,100%{background-position:150% 0,-62% 0}}
/* 用独立 translate 属性而非 transform，免得吃掉 pop 的弹出动画 */
@keyframes darkshake{
  0%,86%,100%{translate:0 0}
  89%{translate:-.6px .4px}
  92%{translate:.5px -.45px}
  95%{translate:-.3px .2px}}
@keyframes glowK{
  0%{box-shadow:0 0 0 var(--ed) var(--c1),0 0 calc(var(--h1) * .55) var(--c2)}
  18%{box-shadow:0 0 0 calc(var(--ed) + 1px) var(--c1h),0 0 var(--h3) var(--c2h),
    0 0 calc(var(--h3) + 24px) var(--c2)}
  44%{box-shadow:0 0 0 calc(var(--ed) + .3px) var(--c1h),0 0 var(--h2) var(--c2h),0 0 var(--h2) var(--c3)}
  100%{box-shadow:0 0 0 var(--ed) var(--c1),0 0 calc(var(--h1) * .55) var(--c2)}}
/* --- 共有：内描边 + 5★ 流光 --- */
.res.s4::after,.res.s5::after{content:'';position:absolute;inset:0;border-radius:9px;pointer-events:none}
.res.s4::after{box-shadow:inset 0 0 0 1px var(--c1),inset 0 0 12px var(--c2)}
.res.s5::after{box-shadow:inset 0 0 0 2.5px var(--c1h),inset 0 0 28px var(--c2);
  background:linear-gradient(115deg,transparent 28%,var(--c3) 45%,
    rgba(255,255,255,.3) 50%,var(--c2) 55%,transparent 72%);
  background-size:280% 100%;animation:sheen5 2.4s ease-in-out infinite}
@keyframes sheen5{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes glow4{
  0%,100%{box-shadow:0 0 0 var(--ed) var(--c1),0 0 var(--h1) var(--c2)}
  50%{box-shadow:0 0 0 var(--ed) var(--c1h),0 0 var(--h2) var(--c2h),0 0 var(--h3) var(--c3)}}
@keyframes glow5{
  0%,100%{box-shadow:0 0 0 var(--ed) var(--c1),0 0 var(--h1) var(--c2),0 0 var(--h2) var(--c3)}
  50%{box-shadow:0 0 0 calc(var(--ed) + .5px) var(--c1h),0 0 var(--h2) var(--c2h),
    0 0 var(--h3) var(--c3),0 0 calc(var(--h3) + 18px) var(--c2)}}
.res.s4 .rt{font-weight:700}
.res.s5 .rt{font-weight:700}
.sumbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--tx3)}
.sumbar b{font-size:17px;color:var(--tx)}
.sumbar .n5 b{color:var(--pur-t)}
.sumbar .n4 b{color:#8fc0f0}
.rate-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rate-table th,.rate-table td{padding:6px 9px;border-bottom:1px solid var(--line2);text-align:left}
.rate-table th{color:var(--tx4);font-weight:500;background:var(--card2)}
.rate-table tr:last-child td{border-bottom:0}
.bar{height:7px;border-radius:4px;background:var(--line2);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--gold));border-radius:4px}

/* ---------- 阵容 ---------- */
.seg{display:flex;gap:5px;background:var(--card2);padding:4px;border-radius:10px;width:fit-content}
.seg button{border:0;background:transparent;color:var(--tx3);padding:6px 16px;border-radius:7px;font-weight:500}
.seg button.on{background:var(--pri);color:#fff;box-shadow:0 1px 6px rgba(255,91,56,.4)}
.pickbox{border:1px dashed var(--line3);border-radius:11px;padding:11px;min-height:66px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start;background:var(--bg2)}
.mon-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line3);
  border-radius:999px;padding:3px 10px 3px 3px;font-size:12.5px}
.mon-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--line3)}
.mon-chip .del{cursor:pointer;color:var(--tx4);font-size:14px;margin-left:1px;line-height:1}
.mon-chip .del:hover{color:var(--bad)}
.sug{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:11px}
.sugcard{border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--card)}
.sugcard .sc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.teamline{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.tmon{display:flex;flex-direction:column;align-items:center;width:52px;gap:2px}
.tmon img{width:44px;height:44px;border-radius:9px;border:1px solid var(--line3);object-fit:cover;background:var(--imgbg)}
.tmon span{font-size:10.5px;text-align:center;line-height:1.25;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px}
.tmon span.hit{color:var(--pri);font-weight:600}
.dropzone{border:2px dashed var(--line3);border-radius:14px;padding:38px 20px;text-align:center;
  background:var(--bg2);transition:.15s;cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--pri);background:var(--pri-l)}
.dropzone .big{font-size:32px;line-height:1}
/* 账号数据条：一次上传，账号详情 / 符文清理 / 图鉴共用 */
.acctbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card2);
  border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.acctbar .ai{flex:1;min-width:230px}
.acctbar .ai b{font-size:14.5px}
.acctbar .ai i{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:3px}
.acctbar .ai i.hint{color:var(--tx4);margin-top:5px}
.acctbar .ops{display:flex;gap:8px}
.acctbar .ops button{padding:6px 12px;font-size:12px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:11px}
.statcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.statcard i{font-style:normal;display:block;font-size:11.5px;color:var(--tx4)}
.statcard b{font-size:21px;display:block;line-height:1.35;color:var(--hd)}
table.tb{width:100%;border-collapse:collapse;font-size:12.5px}
table.tb th,table.tb td{padding:7px 9px;border-bottom:1px solid var(--line2);text-align:left}
table.tb th{color:var(--tx4);font-weight:500;background:var(--card2);position:sticky;top:0;z-index:2}
table.tb tr:hover td{background:var(--card2)}
table.tb td.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.empty{text-align:center;color:var(--tx4);padding:34px 20px;font-size:13px}
.rune{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--card)}
.rune .rh{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rune .sub{font-size:11.5px;color:var(--tx3);line-height:1.6;margin-top:4px}
/* 官网符文矢量图标（rune/*.svg） */
.rune .ric,.rk{width:16px;height:20px;object-fit:contain;opacity:.9;flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.plus{color:var(--ok);font-weight:600}
/* swkit.fun 配装目标块（阵容分析 · 推荐魔灵的符文卡片内） */
.swb{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.swb .swbt{font-size:11.5px;font-weight:600;color:var(--tx2);margin-bottom:3px}
.swb .swbt small{font-weight:400;color:var(--tx4)}
.swb .swbb{margin-top:5px}
.swb .swbl{display:flex;align-items:baseline;gap:6px;font-size:12px}
.swb .swbl b{color:var(--pri);font-weight:600}
.swb .swbk{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10.5px;
  line-height:17px;background:rgba(253,214,29,.12);color:var(--gold);
  border:1px solid rgba(253,214,29,.34)}

/* ---------- 弹窗 / 提示 ---------- */
.modal{position:fixed;inset:0;background:rgba(6,6,6,.72);display:none;z-index:100;
  padding:34px 18px;overflow:auto;backdrop-filter:blur(3px)}
.modal.on{display:block}
.modal-box{max-width:940px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:14px;
  position:relative;box-shadow:0 24px 70px rgba(0,0,0,.75);animation:up .22s ease}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-box .x{position:absolute;right:12px;top:11px;width:31px;height:31px;border-radius:8px;
  border:0;background:var(--hov);font-size:19px;line-height:1;color:var(--tx2);z-index:3}
.modal-box .x:hover{background:var(--hov);color:var(--tx)}
#modal-body{padding:22px 24px 26px}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:#2b2b2c;color:#fff;border:1px solid #3d3d3d;padding:9px 18px;border-radius:10px;font-size:13px;
  opacity:0;transition:.22s;pointer-events:none;z-index:200}
.toast.on{opacity:1;transform:translateX(-50%)}
.loading{display:flex;align-items:center;gap:9px;color:var(--tx4);font-size:13px;padding:26px;justify-content:center}
.spin{width:15px;height:15px;border:2px solid var(--line3);border-top-color:var(--pri);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:760px){
  main{padding:0 14px 24px}
  .top{padding:9px 13px}
  .brand i{display:none}
  .tabs a{padding:7px 11px;font-size:12.5px}
  .hero{height:96px}
  .hero .t1{font-size:16px}
  .hero .t2,.hero .badges{display:none}
  .hero .deco{display:none}
}

/* 技改记录 */
.balhist{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding-right:4px}
.balrow{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;background:var(--card);border:1px solid var(--line3,#333);border-radius:8px}
.balrow .bald{flex:none;font-size:11.5px;color:var(--tx3,#999);font-family:ui-monospace,Consolas,monospace;padding-top:1px}
.balrow .balb{flex:1;min-width:0;font-size:12.5px;line-height:1.55}
.balrow .balb b{color:var(--pri,#6cf)}
.balrow .balb .tag{margin-right:6px}

/* ============================================================
   召唤模拟 · 联动入口 / 自选池 / 胎五陈列（2026-10-13）
   ============================================================ */
/* 联动书：不再套一层紫底方框（那层边让联动卡和普通书看起来不是一套东西） */
.book.collab .bart.cparts{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2px;
  min-height:0;border-radius:9px;overflow:visible;background:none;border:0}
.book.collab .cface{width:46%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:var(--imgbg)}
html[data-theme=light] .book.collab .bart.cparts{background:none;border:0}
.bnoface{height:118px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;
  color:var(--tx4);background:linear-gradient(150deg,var(--card2),var(--bg2));border-radius:9px}

input.mini{width:52px;background:var(--inset);border:1px solid var(--line3);color:var(--tx);border-radius:6px;
  padding:2px 5px;font-size:12px;text-align:center}
.buttom.gh.xs,button.gh.xs,.gh.xs{padding:1px 8px;font-size:11.5px}
.empty b{color:var(--tx3)}

.cchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.cchip{display:flex;align-items:center;gap:5px;background:#241a2e;border:1px solid rgba(200,150,255,.3);
  border-radius:8px;padding:3px 7px 3px 9px}
.cchip b{font-size:12px;color:#d9bcff}
html[data-theme=light] .cchip{background:#f6f1ff;border-color:rgba(150,100,220,.28)}
html[data-theme=light] .cchip b{color:#6b3fb8}
.cchip img{width:26px;height:26px;border-radius:5px;background:var(--imgbg);object-fit:cover;
  transition:transform .12s,box-shadow .12s,opacity .12s,filter .12s}
.cchip .cm{position:relative;display:inline-flex}
.cchip .cm.gift img{filter:grayscale(1) brightness(.5);opacity:.75}
.cchip .cm.got img{opacity:.28;filter:grayscale(.9)}
.cchip .cm.got::after{content:'出';position:absolute;left:-5px;top:-5px;font-size:10px;line-height:1;
  padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.62);color:#c9c9c9;font-weight:700;z-index:2}
.cchip .cm.want img{transform:scale(1.22);z-index:1;
  box-shadow:0 0 0 2px var(--gold,#e8b64c),0 0 10px rgba(253,214,29,.5)}
html[data-theme=light] .cchip .cm.got::after{background:rgba(60,60,60,.85);color:#fff}

/* 我的图鉴：拥有角标 + 完成度卡 */
.mcard{position:relative}
.mcard.own{box-shadow:inset 0 0 0 1px rgba(120,220,150,.35),var(--sh)}
.mcard.seen{opacity:.82}
.owntag{position:absolute;right:5px;top:5px;z-index:5;min-width:17px;height:17px;line-height:17px;
  padding:0 4px;border-radius:9px;font-size:11px;font-style:normal;font-weight:800;text-align:center;
  background:#1e6b3a;color:#eafff2;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.owntag.seen{background:#4a4a4a;color:#cfcfcf}
.dexacc .accstat{margin-top:10px}
.dexacc .accstat .bar{height:9px;background:var(--card2);border-radius:5px;overflow:hidden}
.dexacc .accstat .bar i{display:block;height:100%;
  background:linear-gradient(90deg,#3f9f5f,#7ad49a)}
.dexacc .accstat .tx{margin-top:6px;font-size:12.5px;color:var(--tx2)}
.dexacc .accline{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.dexacc .accline b{color:var(--tx)}

/* 自选池面板：可收起（选定后只留摘要行） */
.selbox.closed{border:1px dashed var(--line3);border-radius:10px;padding:8px 12px 10px;margin:10px 0 2px}
.selhd2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.selhd2 h3{margin:0}
.selpks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.selpk{display:flex;align-items:center;gap:4px}
.selpk .lb{font-size:11.5px;color:var(--tx2);font-weight:700;margin-right:2px}
.selpk img{width:30px;height:30px;border-radius:6px;object-fit:cover;background:var(--imgbg);
  box-shadow:0 0 0 1px var(--line3)}
.selrow{margin:10px 0 2px;border-top:1px dashed var(--line3);padding-top:9px}

/* 召唤按钮行：自定义抽数 */
.nfree{display:inline-flex;align-items:center;gap:6px}

/* 卷估价卡（可折叠） */
.pbox{margin-top:14px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 13px}
.pbox summary{cursor:pointer;font-weight:700;font-size:13.5px;user-select:none}
.pbox summary small{font-weight:400;color:var(--tx4);margin-left:6px}
.pbox summary::marker{color:var(--gold)}
.pbox .pad-in{margin-top:9px}
.selhd{font-size:12.5px;color:var(--tx2);margin-bottom:6px;font-weight:700}
.selhd b{margin-left:4px}
.selhd b.ok{color:var(--ok)}
.selhd b.warn{color:var(--warn)}
.selchips{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto;padding-right:4px}
.selchips .chip{font-size:11.5px;padding:2px 8px}

/* 世锦赛自选池：头像点选（对齐游戏内「选择魔灵」） */
.selgrid{display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow:auto;padding:2px 4px 2px 0}
.selm{position:relative;width:56px;height:56px;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2px solid var(--hov);opacity:.52;transition:opacity .12s,border-color .12s,transform .12s;
  background:var(--card2);flex:0 0 auto}
.selm img{width:100%;height:100%;object-fit:cover;display:block}
.selm:hover{opacity:.85;transform:translateY(-1px)}
.selm.on{opacity:1;border-color:var(--pri,#e8b64c);box-shadow:0 0 0 1px rgba(232,182,76,.35)}
.selm .tick{display:none;position:absolute;right:2px;top:2px;width:16px;height:16px;line-height:16px;
  text-align:center;font-size:11px;font-style:normal;font-weight:700;color:#fff;
  background:var(--pri,#e8b64c);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.selm.on .tick{display:block}
/* 账号匹配 + 抽卡实时反馈（2026-11-01）：held=当前账号已持有（置灰）；
   miss=未持有且开着「只看未持有」（金圈微高亮）；got=本轮已抽到（深置灰+「出」角标）；
   want=选进名单但还没抽到（放大+金色光晕，一眼看出还缺谁） */
.selm.held{opacity:.30;filter:grayscale(.75)}
.selm.held .tick{display:none;background:var(--tx2)}
.selm.miss{opacity:.92;box-shadow:0 0 0 1.5px rgba(253,214,29,.55)}
.selm.got{opacity:.28;filter:grayscale(.9)}
.selm.got::after{content:'出';position:absolute;left:3px;bottom:3px;font-size:10px;line-height:1;
  padding:2px 4px;border-radius:5px;background:rgba(0,0,0,.62);color:#c9c9c9;font-weight:700}
.selm.want{transform:scale(1.14);z-index:2;opacity:1;
  box-shadow:0 0 0 2px var(--gold,#e8b64c),0 0 12px rgba(253,214,29,.5)}
.selm.want:hover{transform:scale(1.14)}
.selpk img.got{opacity:.28;filter:grayscale(.9)}
/* 特别召唤 · UP 家族自选（1101b）：候选网格 + 抽卡反馈 */
.upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.upfam{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:10px;
  border:1px solid var(--line3);cursor:pointer;background:var(--card);transition:border-color .12s}
.upfam:hover{border-color:var(--pri,#e8b64c)}
.upfam.on{border-color:var(--gold,#e8b64c);box-shadow:0 0 0 1px rgba(253,214,29,.4)}
.upfam .upfaces{display:flex}
.upfam img{width:30px;height:30px;border-radius:6px;object-fit:cover;background:var(--imgbg)}
.upfam b{font-size:12px}
.upm img{transition:transform .12s,box-shadow .12s,opacity .12s,filter .12s}
.upm{position:relative}
.upm.got img{opacity:.28;filter:grayscale(.9)}
.upm.got::after{content:'出';position:absolute;left:26px;top:4px;font-size:11px;line-height:1;
  padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.62);color:#c9c9c9;font-weight:700;z-index:2}
.upm.want img{transform:scale(1.09);
  box-shadow:0 0 0 2px var(--gold,#e8b64c),0 0 12px rgba(253,214,29,.5)}

.n5box{background:linear-gradient(180deg,rgba(253,214,29,.09),rgba(253,214,29,.02));
  border:1px solid rgba(253,214,29,.32);border-radius:12px;padding:11px 13px 13px;margin-bottom:14px}
.n5hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;font-weight:800;color:var(--gold);
  margin-bottom:9px}
.n5hd b{font-size:18px;color:var(--hd);text-shadow:0 0 10px rgba(160,90,255,.6)}
.n5hd small{font-weight:400;color:var(--tx3);font-size:11.5px}
.n5hd .gh.xs{margin-left:auto}
.n5grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.n5{position:relative;background:#241c30;border:1px solid #b48ade;border-radius:9px;overflow:hidden;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(200,150,255,.6),0 0 12px rgba(160,90,255,.22);
  animation:pop .28s ease both}
.n5 img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--imgbg);
  filter:drop-shadow(0 0 6px rgba(160,90,255,.55))}
.n5 .nn{font-size:10.5px;text-align:center;padding:3px 2px 4px;color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n5.dup{border-color:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(253,214,29,.8),0 0 14px rgba(253,214,29,.3)}
.nbadge{position:absolute;right:3px;top:3px;background:var(--gold-solid);color:#201800;font-size:10.5px;font-weight:800;
  border-radius:6px;padding:0 5px;line-height:17px}
/* --- 胎五战果里的光暗：与结果卡同口径的缩小版 ---
   战果卡只有 74px，动画从简：保留「静态可辨识」特征 + 一条慢节奏动效。
   光 = 金色 + 大圆角 + 慢转圣光轮；暗 = 桃红 + 硬圆角 + 暗角啃噬 + 心跳；
   重复（dup）仍以金色描边压在最上层。 */
.n5::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2}
.n5 .nn,.n5 .nbadge{position:relative;z-index:4}
.n5.gR{--ng:rgba(200,150,255,.6);--ngo:rgba(160,90,255,.22)}
.n5.gL{border-radius:12px;border-color:#ffd76a;background:linear-gradient(180deg,#4c3a12,#2c2008);
  box-shadow:inset 0 0 0 1.5px rgba(255,222,140,.75),0 0 12px rgba(255,196,60,.3);
  animation:pop .28s ease both,nglowL 1.9s ease-in-out infinite}
.n5.gL img{filter:drop-shadow(0 0 7px rgba(255,198,60,.85)) saturate(1.12) brightness(1.06)}
.n5.gL .nn{color:#fff4cf}
/* 小卡圣光轮：转速放慢、透明度调低，不抢头像 */
.n5.gL::before{
  background:repeating-conic-gradient(from 0deg,rgba(255,240,190,.55) 0deg,
    rgba(255,240,190,0) 7deg,rgba(255,240,190,0) 24deg);
  -webkit-mask:radial-gradient(closest-side,transparent 20%,#000 46%,transparent 88%);
  mask:radial-gradient(closest-side,transparent 20%,#000 46%,transparent 88%);
  opacity:.4;animation:holospin 11s linear infinite}
.n5.gK{border-radius:7px;border-color:#ff5f9e;background:linear-gradient(180deg,#3d0d24,#210616);
  box-shadow:inset 0 0 0 1.5px rgba(255,110,168,.75),0 0 12px rgba(255,60,130,.28);
  animation:pop .28s ease both,nglowK 1.05s cubic-bezier(.2,.7,.3,1) infinite}
.n5.gK img{filter:drop-shadow(0 0 7px rgba(255,60,130,.8)) saturate(1.12)}
.n5.gK .nn{color:#ffdcec}
/* 小卡暗涡：单层反光漩涡慢转；四角暗角静态啃噬（照搬结果卡的特征） */
.n5.gK::before{
  background:
    radial-gradient(circle at 4% 5%,rgba(8,0,10,.95),transparent 26%),
    radial-gradient(circle at 96% 95%,rgba(8,0,10,.95),transparent 26%),
    repeating-conic-gradient(from 0deg,rgba(196,44,236,.5) 0deg,transparent 6deg,transparent 20deg);
  -webkit-mask:radial-gradient(closest-side,transparent 30%,#000 78%,transparent 96%);
  mask:radial-gradient(closest-side,transparent 30%,#000 78%,transparent 96%);
  opacity:.7;animation:holospinR 9s linear infinite}
/* 重复卡：金色描边压过属性色，但要和光/暗的底色共存 */
.n5.gL.dup,.n5.gK.dup,.n5.gR.dup{
  box-shadow:inset 0 0 0 2px rgba(253,214,29,.9),0 0 15px rgba(253,214,29,.4)}
@keyframes nglowL{
  0%,100%{box-shadow:inset 0 0 0 1.5px rgba(255,222,140,.75),0 0 12px rgba(255,196,60,.3)}
  50%{box-shadow:inset 0 0 0 2px rgba(255,240,200,1),0 0 22px rgba(255,214,90,.6),
    0 0 44px rgba(255,236,172,.35)}}
@keyframes nglowK{
  0%,100%{box-shadow:inset 0 0 0 1.5px rgba(255,110,168,.75),0 0 12px rgba(255,60,130,.28)}
  16%{box-shadow:inset 0 0 0 2.5px rgba(255,150,195,1),0 0 24px rgba(255,96,158,.65),
    0 0 48px rgba(255,60,130,.35)}
  44%{box-shadow:inset 0 0 0 1.8px rgba(255,120,178,.85),0 0 15px rgba(255,60,130,.35)}
  100%{box-shadow:inset 0 0 0 1.5px rgba(255,110,168,.75),0 0 12px rgba(255,60,130,.28)}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* ================= 技改分析 ================= */
.balwrap{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:14px;align-items:start}
@media(max-width:1080px){.balwrap{grid-template-columns:1fr}}
.bal-main svg.bal-svg{width:100%;height:auto;display:block}
.bal-svg .ax{font-size:10px;fill:var(--tx4)}
.bal-svg .axt{font-size:11px;fill:var(--tx3)}
.bal-svg .quad{font-size:11px;fill:var(--ok);opacity:.55}
.bal-svg .quad.dn{fill:var(--bad)}
.bal-svg .bdot{cursor:pointer;transition:opacity .12s}
.bal-svg .bdot:hover{opacity:1;stroke:var(--hd);stroke-width:1.2}
.balfilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--tx2);margin-bottom:8px}
.balfilter select{background:var(--card2);color:var(--tx);border:1px solid var(--line2);border-radius:6px;padding:2px 6px;font-size:12px}
.balfilter label{display:flex;align-items:center;gap:4px;cursor:pointer}
.balfilter .lg{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px}
.balfilter .lg i.d{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:-3px}
/* 时间线 */
.tline{display:flex;gap:3px;overflow-x:auto;padding:6px 2px 2px;align-items:flex-end}
.tl{flex:0 0 auto;text-align:center;cursor:pointer;border-radius:6px;padding:2px 1px 0}
.tl:hover{background:var(--hov-soft)}
.tl.on{background:rgba(255,91,56,.18);outline:1px solid var(--pri)}
.tlbar{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:84px;gap:1px;padding-top:2px}
.tlbar i{width:11px;border-radius:2px;display:block}
.tlbar i.up{background:linear-gradient(180deg,var(--ok),#2e8f74)}
.tlbar i.dn{background:linear-gradient(180deg,var(--bad),#a04040)}
.tly{font-size:9.5px;color:var(--tx3,#777);margin-top:3px;white-space:nowrap}
/* 榜单 */
.ranks{display:flex;flex-direction:column;gap:5px}
.rk{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}
.rk:hover .rn{color:var(--hd)}
.rk .rn{width:52px;flex:0 0 auto;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .rb{flex:1;height:7px;background:var(--line2);border-radius:4px;overflow:hidden}
.rk .rb i{display:block;height:100%}
.rk .rb i.up{background:var(--ok)}
.rk .rb i.dn{background:var(--bad)}
.rk .rv{width:26px;text-align:right;color:var(--tx2);font-size:11px}
/* 详情面板 */
.bal-info{margin-top:14px;grid-column:1/-1}
.fhd{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.fhd b{font-size:16px}
.fhd .tag{font-size:11.5px;color:var(--tx2);background:var(--hov-soft);padding:2px 8px;border-radius:6px}
.faces{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.faces img{width:44px;height:44px;border-radius:8px;background:var(--imgbg);object-fit:cover;border:1px solid var(--line2)}
.bars{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.bars span{width:66px;flex:0 0 auto;color:var(--tx2)}
.bars .bu b{color:var(--ok)}.bars .bd b{color:var(--bad)}
.bars i{display:block;height:8px;border-radius:4px}
.bars i.up{background:var(--ok)}.bars i.dn{background:var(--bad)}
.bars>span+ i{flex:1}
.net{font-size:12.5px;color:var(--tx2);margin:6px 0 0}
.net b.ok{color:var(--ok)}.net b.warn{color:var(--bad)}
h4.sub2{font-size:12.5px;color:var(--tx2);margin:12px 0 6px;font-weight:700}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.di{background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:7px 9px}
.di .dm{font-size:11.5px;color:var(--tx3,#888);margin-bottom:3px}
.di .dt{font-size:12px;color:var(--tx);line-height:1.5}
.tp{display:inline-block;font-size:10px;padding:0 5px;border-radius:4px;margin-right:5px;color:#fff;vertical-align:1px}
.tp.up{background:#2e8f74}.tp.dn{background:#a04040}.tp[data-x]{}
.di .dt .tp[class*="--"]{background:var(--hov)}
/* tooltip */
.baltip{position:absolute;z-index:60;display:none;background:var(--card);border:1px solid var(--line2);
  border-radius:8px;padding:7px 10px;box-shadow:0 8px 24px rgba(0,0,0,.55);font-size:12px;pointer-events:none;white-space:nowrap}
.baltip b{font-size:13px;display:block}
.baltip i{font-style:normal;color:var(--tx3,#888);font-size:11px;display:block;margin:1px 0 4px}
.baltip span{margin-right:10px}
.bal-svg .lab{font-size:11px;fill:var(--tx2);pointer-events:none}
.bal-svg .lab.on{fill:var(--hd);font-weight:700}

/* ---------- 版本号徽章 + 更新日志 ---------- */
/* 顶部导航右侧常驻显示当前版本，点击进更新日志页 */
.tabs a.rtab{color:#9e9e9e}
/* 账号状态徽章：没导入显示「导入账号」，导入后显示账号名（点进去可换文件） */
.tabs a.acctchip{font-size:11.5px;padding:5px 9px;color:var(--tx4);
  border:1px solid var(--line3);border-radius:6px;background:transparent}
.tabs a.acctchip:hover{color:var(--tx);border-color:var(--line2);background:var(--card2)}
.tabs a.acctchip.on{color:var(--gold);border-color:var(--gold-d);background:var(--card2);
  box-shadow:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs a.ver{margin-left:auto;padding:5px 9px;font-size:11.5px;color:var(--tx4);
  font-family:ui-monospace,Consolas,monospace;letter-spacing:.4px;
  border:1px solid var(--line);border-radius:6px;background:transparent}
.tabs a.ver:hover{color:var(--gold);border-color:var(--gold-d);background:var(--card2)}
.tabs a.ver.on{background:transparent;color:var(--gold);border-color:var(--gold-d);box-shadow:none}
/* 时间线 */
.rls{position:relative;padding-left:22px}
.rls::before{content:'';position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line)}
.rl{position:relative;margin-bottom:14px;background:var(--card);
  border:1px solid var(--line2);border-radius:var(--br);padding:12px 14px}
.rl::before{content:'';position:absolute;left:-21px;top:16px;width:9px;height:9px;
  border-radius:50%;background:var(--line3);border:2px solid var(--bg)}
.rl.now{border-color:rgba(253,214,29,.42);box-shadow:0 0 0 1px rgba(253,214,29,.08)}
.rl.now::before{background:var(--gold-solid);box-shadow:0 0 0 3px rgba(253,214,29,.18)}
.rlh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rlv{font-size:15px;font-weight:700;color:var(--tx);
  font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}
.rl.now .rlv{color:var(--gold)}
.rltag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
  background:var(--gold-solid);color:#241f00}
.rld{font-size:12px;color:var(--tx4);margin-left:auto;
  font-family:ui-monospace,Consolas,monospace}
.rli{list-style:none;margin:8px 0 0;padding:0}
.rli li{display:flex;gap:8px;align-items:flex-start;
  font-size:13px;color:var(--tx2);line-height:1.75;padding:2px 0}
.rli.none{color:var(--tx4);font-size:12.5px}
.k{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:4px;margin-top:2px;letter-spacing:.5px}
.k-add{background:rgba(63,174,116,.18);color:var(--ok-t);border:1px solid rgba(63,174,116,.4)}
.k-opt{background:rgba(62,152,222,.16);color:var(--acc-t);border:1px solid rgba(62,152,222,.38)}
.k-fix{background:rgba(224,145,46,.16);color:var(--warn-t);border:1px solid rgba(224,145,46,.4)}
.k-dat{background:rgba(154,99,224,.18);color:var(--pur-t);border:1px solid rgba(154,99,224,.42)}
.k-del{background:rgba(224,80,58,.15);color:var(--bad-t);border:1px solid rgba(224,80,58,.38)}
.k-note{background:var(--card2);color:var(--tx4);border:1px solid var(--line3)}
.curv{color:var(--gold)}

/* ---- UP 主数据页（阵容分析 → 二级分页） ---- */
.upcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:12px;margin-top:14px}
.upcard{background:var(--card2);border:1px solid var(--line2);border-radius:11px;
  padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px}
.upcard.pend{border-style:dashed;border-color:var(--warn);background:rgba(224,145,46,.06)}
.upcard.known{border-style:dashed;border-color:var(--line3);background:transparent}
.upcard .uh{display:flex;align-items:center;gap:7px}
.upcard .uh b{font-size:14.5px}
.upcard .uh a{margin-left:auto;font-size:12px}
.upcard .uh .del{margin-left:auto;cursor:pointer;color:var(--tx4);font-size:15px;line-height:1;
  padding:2px 5px;border-radius:6px}
.upcard .uh .del:hover{background:rgba(224,80,58,.12);color:var(--bad-t)}
.unums{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--tx4);margin-top:2px}
.unums b{color:var(--tx);font-size:14px;font-variant-numeric:tabular-nums}
.ubar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--bg2);margin-top:5px}
.ubar .ub{display:block;height:100%}
.ub.rta,.ul.rta b{color:var(--acc-t)}
.ubar .ub.rta{background:#3e98de}
.ub.jjc,.ul.jjc b{color:var(--ok-t)}
.ubar .ub.jjc{background:#2fae85}
.ub.guild,.ul.guild b{color:var(--warn-t)}
.ubar .ub.guild{background:#e0912e}
.ub.other,.ul.other b{color:var(--tx4)}
.ubar .ub.other{background:#4a4a4a}
.ulegend{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:11.5px;color:var(--tx4)}
.ulegend b{font-variant-numeric:tabular-nums}
#uptext{background:var(--bg2);color:var(--tx2);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;resize:vertical;line-height:1.7;margin-top:2px}
.gh.xs{padding:4px 10px;font-size:12px}

/* ── 游戏账号切换（一个本机档案下可挂多个游戏账号） ── */
.accchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.accchip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:11px;
  border:1px solid var(--line3);background:var(--card2);color:var(--tx2);
  font-size:12.5px;cursor:pointer;transition:.15s;text-align:left}
.accchip:hover{border-color:var(--tx4);color:var(--tx)}
.accchip.on{border-color:var(--gold-d);background:var(--pri-l);color:var(--tx)}
.accchip i{font-style:normal;font-size:11px;color:var(--tx4)}
.accchip u{text-decoration:none;font-size:10.5px;color:var(--tx4);
  background:var(--bg2);border-radius:6px;padding:1px 6px}
.accchip.add{border-style:dashed;color:var(--tx3)}
.accchip.add:hover{border-color:var(--pri);color:var(--pri)}
button.gh.danger{color:var(--bad)}
button.gh.danger:hover{background:rgba(224,80,58,.12)}
tr.on2 td{background:var(--pri-l)}

/* ── 配速 / 插队计算 ── */
.tabs2{display:flex;gap:8px;flex-wrap:wrap}
.tabs2 button.gh.on{border-color:var(--gold-d);background:var(--pri-l);color:var(--tx)}
.rowwrap{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--tx3)}
.fld>span{letter-spacing:.3px}
.fld select,.fld input{padding:6px 9px;border-radius:9px;border:1px solid var(--line3);
  background:var(--card2);color:var(--tx);font-size:12.5px;min-width:118px}
.fld input[type=number]{width:96px}
.issues{list-style:none;padding:0;margin:10px 0 0}
.issues li{padding:8px 11px;border-radius:9px;margin-bottom:6px;font-size:12.5px;
  border:1px solid var(--line3);background:var(--card2)}
.issues li.bad{border-color:rgba(224,80,58,.45);background:rgba(224,80,58,.10)}
.issues li.warn{border-color:rgba(253,214,29,.35);background:rgba(253,214,29,.08)}
.okx{color:var(--good)}
.warnx{color:var(--gold)}

@media(max-width:760px){
  .tabs a.rtab{display:none}
  .tabs a.ver{margin-left:auto;padding:5px 7px;font-size:11px}
  .rls{padding-left:16px}
  .rl::before{left:-15px}
  .rld{margin-left:0;width:100%}
}

/* ---------- 效果图标页（#/effects，1016m 追加） ---------- */
.efxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.efx{
  background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:9px 9px 8px;
  cursor:pointer;transition:.13s;text-align:center;
}
.efx:hover{background:var(--hov);border-color:var(--pri);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.efx-ic{
  width:100%;aspect-ratio:1/1;border-radius:7px;background:#0c0c0c;
  border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:7px;
}
.efx-ic img{max-width:92%;max-height:92%;object-fit:contain;display:block}
.efx-nm{font-size:12.5px;color:var(--hd);font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.efx-k{font-size:10.5px;color:var(--tx4);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.efx-meta{font-size:10.5px;color:var(--tx3);margin-top:2px;line-height:1.4;min-height:15px}
.efx-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 实战观感预览：模拟战斗状态栏 */
.efx-demo{display:flex;flex-wrap:wrap;gap:14px}
.efx-unit{
  flex:1;min-width:230px;background:var(--inset);border:1px solid var(--line2);
  border-radius:10px;padding:10px 12px;
}
.efx-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.efx-face{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--line3)}
.efx-face.ph{display:inline-flex;align-items:center;justify-content:center;
  background:var(--card2);color:var(--tx3);font-weight:700}
.efx-nm{font-size:12.5px;font-weight:700;color:var(--hd)}
.efx-note{margin-left:auto;font-size:11px;color:var(--tx3)}
.efx-buffs{display:flex;flex-wrap:wrap;gap:6px}
.efx-b{
  position:relative;width:34px;height:34px;border-radius:7px;background:#0c0c0c;
  border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
}
.efx-b img{max-width:82%;max-height:82%;object-fit:contain}
.efx-b i{
  position:absolute;right:-4px;bottom:-4px;min-width:15px;height:15px;line-height:15px;
  border-radius:8px;background:#111;color:#fff;font-size:9.5px;font-style:normal;
  font-weight:700;text-align:center;padding:0 3px;border:1px solid rgba(255,255,255,.25);
}

/* ---------- 挂机页（#/farm，1024a 追加） ---------- */
.fmcat{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px}
.fmcard{
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:var(--card);
  cursor:pointer;transition:.14s;user-select:none;
}
.fmcard:hover{border-color:var(--line3);background:var(--hov)}
.fmcard.on{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri)}
.fmcard.dis{opacity:.55}
.fmcard .ft{font-size:13.5px;font-weight:600;color:var(--hd);display:flex;align-items:center;gap:6px}
.fmcard .ft .tag{margin-left:auto;font-weight:400}
.fmcard .fd{font-size:11.5px;color:var(--tx4);margin-top:5px;line-height:1.65}
.fmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.fmrun{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fmcmd{
  background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12px;color:var(--tx2);
  white-space:pre-wrap;word-break:break-all;line-height:1.75;margin:0;
}
.fmnote{
  border-left:3px solid var(--pri);background:var(--pri-l);border-radius:0 8px 8px 0;
  padding:9px 13px;font-size:12.5px;color:var(--tx2);line-height:1.75;
}
.fmwarn{
  border-left:3px solid var(--warn);background:rgba(224,145,46,.09);border-radius:0 8px 8px 0;
  padding:9px 13px;font-size:12.5px;color:var(--tx2);line-height:1.8;
}
.fmwarn b{color:var(--warn-t)}
.fmopt{
  display:block;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:7px;
  background:var(--card2);cursor:pointer;transition:.13s;
}
.fmopt:hover{border-color:var(--line3);background:var(--hov)}
.fmopt.on{border-color:var(--pri);background:var(--pri-l)}
.fmopt b{display:block;font-size:12.5px;color:var(--hd);font-weight:600}
.fmopt.on b{color:var(--pri-t)}
.fmopt span{font-size:11.5px;color:var(--tx4);line-height:1.6}

/* 组合库（#/teams/combo）—— 按人数分级展示，2026-10-27 用户拍板「先做展示层，不动数据」 */
.cb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:12px}
.cb-stat{background:var(--card2);border-radius:10px;padding:10px 12px;border-left:3px solid var(--line3)}
.cb-stat b{display:block;font-size:22px;line-height:1.2;color:var(--tx);font-weight:600}
.cb-stat span{font-size:12.5px;color:var(--tx2);font-weight:600}
.cb-stat i{display:block;font-size:11.5px;color:var(--tx4);font-style:normal;margin-top:2px;line-height:1.5}
.cb-stat.t3{border-left-color:#2f9e6e}
.cb-stat.t4{border-left-color:#3a7bd5}
.cb-stat.t5{border-left-color:#d99a1f}
.cb-stat.tx{border-left-color:var(--line3);opacity:.85}
.cb-card{border:1px solid var(--line3);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--card)}
.cb-card.t3{border-left:3px solid #2f9e6e}
.cb-card.t4{border-left:3px solid #3a7bd5}
.cb-card.t5{border-left:3px solid #d99a1f}
.cb-card.tx{border-left:3px solid var(--line3);background:var(--card2);opacity:.8}
.cb-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cb-b{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--card2);color:var(--tx2);border:1px solid var(--line3)}
.cb-card.t3 .cb-b{color:#2f9e6e;border-color:rgba(47,158,110,.35)}
.cb-card.t4 .cb-b{color:#3a7bd5;border-color:rgba(58,123,213,.35)}
.cb-card.t5 .cb-b{color:#a8750f;border-color:rgba(217,154,31,.35)}
.cb-card.tx .cb-b{color:var(--tx4)}
/* 组合库里一行最多 6 只、横向有空间：放宽名字宽度，避免「暗沙漠女王」被截成「暗沙漠女」 */
.cb-card .tmon{width:66px}
.cb-card .tmon span{max-width:66px;font-size:10px;white-space:normal;word-break:break-word}

/* ---- 礼包性价比页（page-packs.js） ---- */
.pk-drop{border:1.5px dashed var(--line3);border-radius:12px;padding:10px;width:220px;min-height:96px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--card2);transition:border-color .15s}
.pk-drop.over{border-color:var(--pri)}
.pk-drop-in{text-align:center;width:100%}
.pk-drop-in>div{color:var(--tx4);font-size:12px;line-height:1.5}
.pk-row input{background:var(--inset);border:1px solid var(--line3);color:var(--tx);border-radius:6px;
  padding:5px 8px;font-size:12.5px}
.pk-shot{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line3);
  vertical-align:middle;margin-right:8px;cursor:zoom-in}
.pk-shot:hover{transform:scale(1.06);transition:transform .12s}

/* ---- 追加礼物轨道卡片（page-packs.js） ---- */
.pk-track{background:var(--card2)}
.pk-track .rate-table th,.pk-track .rate-table td{padding:5px 7px;font-size:12.5px}
@media (max-width:640px){
  .pk-track .rate-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---- 会员表 / 通用（page-packs.js） ---- */
.pk-mem td,.pk-mem th{font-size:12.5px;padding:6px 8px}
.pk-mem td:first-child{min-width:150px}
.nowrap{white-space:nowrap}

/* ---------- RTA 分析页（1028j） ----------
   现有 .seg 只定义了 button 子元素的样式，这里补 <a> 分支供 RTA 页签使用。
   其余 rta-* 为本页专用，避免和既有 .kpi/.grid 之类重名。 */
.seg a{display:inline-block;border:0;background:transparent;color:var(--tx3);
  padding:6px 16px;border-radius:7px;font-weight:500;text-decoration:none;font-size:13px}
.seg a:hover{color:var(--tx)}
.seg a.on{background:var(--pri);color:#fff;box-shadow:0 1px 6px rgba(255,91,56,.4)}
.seg.sub{margin:10px 0 6px}
.seg.sub a{padding:5px 12px}

.rta-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin:12px 0 4px}
.rta-kpi{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:11px 13px}
.rta-kpi b{display:block;font-size:19px;color:var(--tx);line-height:1.3;font-variant-numeric:tabular-nums}
.rta-kpi span{display:block;font-size:12px;color:var(--tx3)}
.rta-kpi i{display:block;font-size:11px;color:var(--tx4);font-style:normal;margin-top:2px}

.rta-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.rta-tw{overflow-x:auto}
.rta-dim{color:var(--tx4)}
.rta-pve{display:inline-block;font-style:normal;font-size:11px;padding:1px 6px;margin-left:5px;
  border-radius:5px;background:var(--gold-l,rgba(234,179,8,.16));color:var(--gold,#eab308);
  border:1px solid var(--line2);vertical-align:middle}
.note.sm{font-size:12px;padding:8px 11px;margin:8px 0}
.rta-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.rta-tbl th,.rta-tbl td{padding:6px 9px;border-bottom:1px solid var(--line2);text-align:left}
.rta-tbl th{color:var(--tx4);font-weight:500;background:var(--card2)}
.rta-tbl tr:last-child td{border-bottom:0}
.rta-tbl tr:hover td{background:var(--card2)}
.rta-tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
.rta-tbl td.wr{min-width:150px}
.rta-tbl .bar{margin-right:7px}
.rta-tbl code{background:var(--card2);border:1px solid var(--line2);border-radius:4px;padding:0 4px;font-size:11.5px}
.rta-h2{font-size:17px;font-weight:600;color:var(--tx);margin:0 0 2px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rta-sub{font-size:12.5px;font-weight:400;color:var(--tx4)}
.rta-h3{font-size:14.5px;font-weight:600;color:var(--tx);margin:16px 0 8px;
  padding-left:9px;border-left:3px solid var(--pri)}

/* ============================================================
   2026-10-29 日间模式：召唤结果卡 / 胎五战果卡的「演出底色」浅色变体
   原因：底色原为硬编码深色（对齐游戏内召唤演出），日间下名字文字
   （var(--tx)/var(--tx2) 变深色）压在深底上看不清。
   做法：光暗/星级光效保留（glow 动画吃 --c1/--c2 变量，重定义即变色），
   底色换浅色同色系，名字/星级行文字改深色。 */
html[data-theme=light] .res .rn{color:var(--tx)}
html[data-theme=light] .res.gR.s4{background:linear-gradient(180deg,#eef3f8,#e2eaf2);border-color:#9db4c8;
  --c1:rgba(90,140,200,.4);--c2:rgba(90,140,200,.25);
  --c1h:#3f78bd;--c2h:rgba(70,120,190,.6);--c3:rgba(70,120,190,.18)}
html[data-theme=light] .res.gR.s4 .rt{color:#3f6f9e}
html[data-theme=light] .res.gR.s5{background:linear-gradient(180deg,#f1e6fb,#e4d6f4);border-color:#b57de6;
  --c1:rgba(146,78,214,.55);--c2:rgba(146,78,214,.4);
  --c1h:#8a3fd0;--c2h:rgba(140,70,210,.8);--c3:rgba(214,150,50,.45)}
html[data-theme=light] .res.gR.s5 .rt{color:#8a3fd0}
html[data-theme=light] .res.gR.s5 .rn{color:#5a2d8c}
html[data-theme=light] .res.gR.s5 img{filter:drop-shadow(0 0 9px rgba(150,80,220,.45)) saturate(1.1)}
html[data-theme=light] .res.gL.s4{background:
    radial-gradient(circle at 5% 6%,rgba(214,178,84,.25),transparent 24%),
    linear-gradient(180deg,#f8f3dd,#efe7c6);border-color:#b39b55;
  --c1:rgba(186,152,60,.5);--c2:rgba(186,152,60,.32);
  --c1h:#9a7a1c;--c2h:rgba(170,135,40,.7);--c3:rgba(170,135,40,.22)}
html[data-theme=light] .res.gL.s4 .rt{color:#8a6d1f}
html[data-theme=light] .res.gL.s5{background:
    radial-gradient(circle at 5% 6%,rgba(214,178,84,.45),transparent 22%),
    radial-gradient(circle at 95% 94%,rgba(214,178,84,.25),transparent 22%),
    linear-gradient(180deg,#faf0c8,#f1e2a4);border-color:#d2a419;
  --c1:rgba(196,152,28,.8);--c2:rgba(196,152,28,.55);
  --c1h:#8a6a10;--c2h:rgba(170,130,20,.9);--c3:rgba(170,130,20,.35);
  animation:pop .36s cubic-bezier(.18,1.5,.4,1) backwards,
    glowL 1.9s ease-in-out infinite,holyflare 1.9s ease-in-out infinite}
html[data-theme=light] .res.gL.s5 .rt{color:#9a7414}
html[data-theme=light] .res.gL.s5 .rn{color:#6b4a08;text-shadow:none}
html[data-theme=light] .res.gL.s5 img{filter:drop-shadow(0 0 9px rgba(200,150,30,.5)) saturate(1.1) brightness(1.03)}
/* 暗涡/裂缝的「黑角」在浅底上变成脏斑 → 换成玫瑰色淡角 */
html[data-theme=light] .res.gK.s4{background:
    radial-gradient(circle at 4% 5%,rgba(160,40,110,.1),transparent 27%),
    radial-gradient(circle at 96% 95%,rgba(160,40,110,.1),transparent 27%),
    linear-gradient(180deg,#f6ebf3,#efe2ec);border-color:#b584a0;
  --c1:rgba(186,86,140,.45);--c2:rgba(186,86,140,.3);
  --c1h:#9c3470;--c2h:rgba(170,60,125,.7);--c3:rgba(140,40,170,.2)}
html[data-theme=light] .res.gK.s4 .rt{color:#a04a72}
html[data-theme=light] .res.gK.s5{background:
    radial-gradient(circle at 4% 5%,rgba(160,40,110,.15),transparent 25%),
    radial-gradient(circle at 96% 95%,rgba(160,40,110,.15),transparent 25%),
    linear-gradient(180deg,#f9e0ef,#f3d0e6);border-color:#d9559a;
  --c1:rgba(214,60,140,.75);--c2:rgba(214,60,140,.5);
  --c1h:#8c1d52;--c2h:rgba(190,50,120,.85);--c3:rgba(140,30,170,.35);
  animation:pop .36s cubic-bezier(.18,1.5,.4,1) backwards,
    glowK 1.05s cubic-bezier(.2,.7,.3,1) infinite,darkshake 2.4s ease-in-out infinite}
html[data-theme=light] .res.gK.s5 .rt{color:#a53068}
html[data-theme=light] .res.gK.s5 .rn{color:#8c1d52;text-shadow:none}
html[data-theme=light] .res.gK.s5 img{filter:drop-shadow(0 0 9px rgba(210,60,140,.45)) saturate(1.1)}
html[data-theme=light] .res.gK.s4::before,html[data-theme=light] .res.gK.s5::before{
  background:
    radial-gradient(circle at 4% 5%,rgba(160,40,110,.2),transparent 27%),
    radial-gradient(circle at 96% 95%,rgba(160,40,110,.2),transparent 27%),
    repeating-conic-gradient(from 0deg,rgba(196,44,160,.35) 0deg,transparent 6deg,transparent 20deg)}
/* --- 胎五战果小卡 --- */
html[data-theme=light] .n5{background:#efe9f6;border-color:#b48ade;
  box-shadow:inset 0 0 0 1.5px rgba(150,90,220,.45),0 0 10px rgba(150,90,220,.18)}
html[data-theme=light] .n5 img{filter:drop-shadow(0 0 5px rgba(150,90,220,.4))}
html[data-theme=light] .n5 .nn{color:var(--tx2)}
html[data-theme=light] .n5.gL{background:linear-gradient(180deg,#faf0c8,#f1e2a4);border-color:#d2a419;
  box-shadow:inset 0 0 0 1.5px rgba(196,152,28,.6),0 0 10px rgba(196,152,28,.25)}
html[data-theme=light] .n5.gL img{filter:drop-shadow(0 0 6px rgba(200,150,30,.5)) saturate(1.1) brightness(1.03)}
html[data-theme=light] .n5.gL .nn{color:#6b4a08}
html[data-theme=light] .n5.gK{background:linear-gradient(180deg,#f9e0ef,#f3d0e6);border-color:#d9559a;
  box-shadow:inset 0 0 0 1.5px rgba(214,60,140,.55),0 0 10px rgba(214,60,140,.22)}
html[data-theme=light] .n5.gK img{filter:drop-shadow(0 0 6px rgba(210,60,140,.45)) saturate(1.1)}
html[data-theme=light] .n5.gK .nn{color:#8c1d52}
html[data-theme=light] .n5.gK::before{
  background:
    radial-gradient(circle at 4% 5%,rgba(160,40,110,.18),transparent 26%),
    radial-gradient(circle at 96% 95%,rgba(160,40,110,.18),transparent 26%),
    repeating-conic-gradient(from 0deg,rgba(196,44,160,.4) 0deg,transparent 6deg,transparent 20deg)}

/* ============================================================
   2026-10-29g 手机端适配（窄屏 ≤768px）
   目标：① 手机浏览器直接可用 ② 微信小程序 web-view 内可用
   已有 @media(760px) 处理了顶栏/hero 的基础缩放，这里补齐交互与布局：
   下拉点按展开、导航换行、表格横向滚动、网格降列、控件触控友好、iPhone 安全区。
   ============================================================ */
@media (max-width:768px){
  main{padding:0 10px 22px}
  .top{padding:8px 10px;gap:7px;flex-direction:column;align-items:stretch;
       padding-top:calc(8px + env(safe-area-inset-top))}
  .brand{gap:8px}
  .brand .lg{height:24px}
  .brand i{display:none}
  .hero{height:84px}
  .hero .t1{font-size:15px}

  /* 顶栏导航：窄屏换行铺开，下拉**保留桌面的绝对定位浮层**。
     ⚠ 千万别给 .tabs 加 overflow-x/overflow-y：另一个方向会被计算成裁剪，
     点开的下拉菜单会被上下裁掉。横向滚动看着省地方，代价是菜单不可用 —— 不划算。
     app.js 已实现「触屏首点只展开」，所以浮层下拉在手机上是可点的。 */
  .tabs{flex-wrap:wrap;justify-content:flex-start;gap:5px 6px}
  .tabs a{padding:8px 11px;font-size:12.5px;flex:0 0 auto}
  .tabs a.acctchip{display:none}     /* 导入账号收进「我的账号」页，避免挤压 */
  .tabs a.ver{margin-left:auto}      /* 版本号即更新日志入口，留在最右 */
  /* 浮层宽度收窄并统一贴左，避免最右分组的下拉顶出屏幕 */
  .sub{min-width:118px}
  .grp[data-align="right"]>.sub{left:0;right:auto}

  /* 表格横向滚动。⚠ 不能给 .card 加 overflow-x：会裁掉 .book::after 那圈刻意溢出卡片的
     装饰光晕，还会让每张卡都冒出横向滚动条。改为让 table 自身成为滚动盒——
     max-content 取内容宽、min-width:100% 保证窄表格仍占满、max-width:100% 兜住外层不撑破。 */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
        width:max-content;max-width:100%;min-width:100%}

  /* 网格降列 */
  .mixgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
  .bookgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .resultgrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
  .n5grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
  .statrow,.md-stats,.cb-stats{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
  .sug,.upcards,.dl,.fmgrid{grid-template-columns:1fr}
  .fmcat{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .grow{min-width:0}
  .balwrap{grid-template-columns:1fr}

  /* 触控友好；输入框 ≥16px 防止 iOS 聚焦时整页自动缩放 */
  button,.btn{padding:9px 14px}
  input[type=text],input[type=search],select{font-size:16px;padding:9px 11px;
    width:100%;max-width:100%;box-sizing:border-box}
  .chip{padding:7px 12px}

  /* 弹窗留安全边距 */
  .modal-box{width:94vw;max-height:86vh;overflow:auto}
  body{padding-bottom:env(safe-area-inset-bottom)}

  /* 1105b：长 token（代码名/URL/长数字）在窄屏撑破容器 → 允许在任意字符处断行。
     overflow-wrap 只在「单词放不下」时才断，不影响正常中文排版；
     anywhere（而非 break-word）同时修正 flex/grid 的 min-content 计算。 */
  #view{overflow-wrap:anywhere}
}
/* 无 hover 设备（手机 / 小程序内 web-view）：避免 hover 态残留 */
@media (hover:none){
  .grp:hover>a.gh i{transform:none}
  .grp:hover>a.gh{background:transparent}
  .mcard:hover{background:var(--card);border-color:var(--line);box-shadow:none}
}