/* ═══ 苍元武侠 · 剑匣江湖 · 水墨极柔完整版（性能优化） ═══ */
.jx{position:relative;width:min(660px,100%);margin:20px auto;border-radius:14px;background:linear-gradient(178deg,#2a3238 0%,#303840 34%,#252c31 100%);border:1px solid #4a5560;box-shadow:0 14px 36px #0004,inset 0 0 0 1px #a8b8c21a,inset 0 0 70px #1a2025c0;color:#c8d0d5;font-family:"Noto Serif SC",serif;overflow:hidden;contain:layout paint}
.jx::before,.jx::after{content:"";position:absolute;width:70px;height:70px;pointer-events:none;z-index:7;opacity:.35}
.jx::before{top:0;left:0;border-top:2px solid #8a959a;border-left:2px solid #8a959a;border-radius:14px 0 0 0;-webkit-mask:linear-gradient(135deg,#000 30%,transparent 75%);mask:linear-gradient(135deg,#000 30%,transparent 75%)}
.jx::after{bottom:0;right:0;border-bottom:2px solid #8a959a;border-right:2px solid #8a959a;border-radius:0 0 14px 0;-webkit-mask:linear-gradient(-45deg,#000 30%,transparent 75%);mask:linear-gradient(-45deg,#000 30%,transparent 75%)}
.jx-ink{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 400' preserveAspectRatio='none'><defs><filter id='b'><feGaussianBlur stdDeviation='4'/></filter></defs><g filter='url(%23b)' opacity='0.55'><path d='M0,380 Q60,240 130,300 T280,270 Q340,220 400,280 T560,260 Q620,240 660,290 L660,400 L0,400 Z' fill='%23485560'/><path d='M0,400 Q80,310 180,340 T380,320 Q450,290 520,340 T660,330 L660,400 L0,400 Z' fill='%23394450' opacity='0.8'/><path d='M0,400 Q100,360 220,380 T440,370 T660,375 L660,400 L0,400 Z' fill='%232a333c'/></g><g opacity='0.25'><ellipse cx='120' cy='140' rx='80' ry='18' fill='%23a8b8c2' filter='url(%23b)'/><ellipse cx='480' cy='90' rx='60' ry='12' fill='%238a959a' filter='url(%23b)'/><ellipse cx='560' cy='170' rx='90' ry='20' fill='%23a8b8c2' filter='url(%23b)'/></g></svg>");background-size:cover;background-position:bottom;opacity:.6;-webkit-mask:linear-gradient(180deg,transparent 20%,#000);mask:linear-gradient(180deg,transparent 20%,#000)}
.jx-crane{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.jx-crane::before,.jx-crane::after{content:"";position:absolute;width:26px;height:9px;background:radial-gradient(6px 2.5px at 50% 62%,#e8ecef 0 60%,transparent 62%);opacity:.4;will-change:transform;clip-path:polygon(0 55%,38% 25%,50% 60%,62% 25%,100% 55%,62% 48%,50% 90%,38% 48%)}
.jx-crane::before{top:11%;left:-30px;animation:jxfly 34s linear infinite}
.jx-crane::after{top:19%;left:-30px;width:17px;height:6px;animation:jxfly 47s linear infinite 9s}
@keyframes jxfly{0%{transform:translate3d(0,0,0)}45%{transform:translate3d(320px,-14px,0)}100%{transform:translate3d(720px,6px,0)}}
.jx-hud{position:relative;z-index:3;display:flex;align-items:center;gap:13px;padding:12px 16px;background:linear-gradient(180deg,#333b40de,#2a3238d6);border-bottom:1px solid #8a959a26}
.jx-dial{position:relative;width:62px;height:62px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,#8a959a1c 0 8%,#242a2f 8% 100%),radial-gradient(circle at 50% 50%,#333b40,#252c31);border:1px solid #4a5560;box-shadow:0 0 10px #8a959a18,inset 0 0 8px #0004;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jx-dial i{position:absolute;inset:5px;border-radius:50%;border:1px dashed #8a959a30;animation:jxspin 40s linear infinite;will-change:transform}
.jx-dial i::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:#c8d0d5;box-shadow:0 0 5px #c8d0d566}
@keyframes jxspin{to{transform:rotate(360deg)}}
.jx-dial b{font-size:15px;color:#dce2e6;letter-spacing:2px;text-shadow:0 0 6px #8a959a40;z-index:2}
.jx-dial u{text-decoration:none;font-size:9px;color:#8a9298;z-index:2}
.jx-loc{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.jx-loc b{display:flex;align-items:center;gap:6px;font-size:14px;color:#d8dfe4;letter-spacing:1px;font-weight:700}
.jx-loc span{font-size:11px;color:#8a9298;letter-spacing:.5px}
.jx-air{display:flex;flex-direction:column;gap:4px;flex:none}
.jx-air em{font-style:normal;font-size:10.5px;color:#a8b0b6;border:1px solid #4a5560;border-radius:3px;padding:2px 9px;background:#2c343a;text-align:center;letter-spacing:2px}
.jx-air em.w{color:#a8bcc4;border-color:#556670;background:#2e383e}
.ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jx-mind,.jx-box{position:relative;z-index:3;margin:10px 14px 0;border:1px solid #4a556067;border-radius:10px;background:linear-gradient(180deg,#2f373de8,#272e33e8);overflow:hidden;transition:.35s}
.jx-mind[open],.jx-box[open]{border-color:#8a959a42;box-shadow:0 0 14px #8a959a0d,inset 0 0 22px #1a202533}
.jx-mind>summary,.jx-box>summary{display:flex;align-items:center;gap:10px;padding:10px 15px;cursor:pointer;list-style:none;user-select:none;font-size:13.5px;letter-spacing:3px;color:#bcc4ca;transition:.3s;position:relative}
.jx-mind>summary::-webkit-details-marker,.jx-box>summary::-webkit-details-marker{display:none}
.jx-mind>summary:hover,.jx-box>summary:hover{color:#dce2e6;background:#333b40}
.jx-mind>summary:hover::before,.jx-box>summary:hover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#8a959aaa,transparent);animation:jxslash .4s ease}
@keyframes jxslash{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
.jx-mind[open]>summary,.jx-box[open]>summary{border-bottom:1px solid #8a959a1f;background:linear-gradient(180deg,#363e44,transparent)}
.jx-mind>summary em,.jx-box>summary em{font-style:normal;font-size:10px;color:#868e94;letter-spacing:1px;margin-left:2px}
.jx-clasp{margin-left:auto;width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid #8a959a60;position:relative;transition:.45s cubic-bezier(.6,-.3,.3,1.4);background:radial-gradient(circle at 38% 32%,#4a5560,#2a3238)}
.jx-clasp::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:#c8d0d5;transform:translate(-50%,-50%)}
.jx-clasp::after{content:"";position:absolute;left:50%;top:50%;width:1.6px;height:9px;background:#c8d0d5;transform:translate(-50%,-50%);transition:.45s}
[open]>summary .jx-clasp{transform:rotate(225deg);border-color:#c8d0d5;box-shadow:0 0 6px #8a959a33}
[open]>summary .jx-clasp::after{opacity:0}
.jx-mseal{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;color:#f2ece0;background:radial-gradient(circle at 35% 30%,#a85852,#6e3a34);border-radius:6px;box-shadow:0 2px 4px #0004,inset 0 1px 0 #ffffff24;transform:rotate(-4deg)}
.jx-slips{display:flex;gap:9px;overflow-x:auto;padding:13px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8a959a38 transparent;-webkit-overflow-scrolling:touch}
.jx-slips::-webkit-scrollbar{height:5px}
.jx-slips::-webkit-scrollbar-thumb{background:#8a959a38;border-radius:3px}
.slip{flex:0 0 168px;scroll-snap-align:start;border-radius:6px;padding:11px 12px 12px;background:repeating-linear-gradient(90deg,#3a424a 0 22px,#404850 22px 23px),linear-gradient(180deg,#3d454d,#333b43);border:1px solid #525a62;border-top:3px solid #7a8a94;box-shadow:inset 0 0 10px #0003,0 3px 7px #0002;transition:.3s;position:relative}
.slip:hover{transform:translateY(-4px);border-top-color:#a8b8c2;box-shadow:inset 0 0 10px #0003,0 6px 12px #0004}
.slip::before{content:"";position:absolute;top:-1px;left:12px;right:12px;height:5px;background:repeating-linear-gradient(90deg,#1e2428 0 4px,transparent 4px 20px)}
.slip b{display:block;width:30px;height:30px;line-height:28px;text-align:center;margin-bottom:8px;font-size:16px;color:#dce2e6;border:1px solid #8a959a55;border-radius:50%;background:radial-gradient(circle at 35% 30%,#404850,#2c343c);text-shadow:0 0 4px #8a959a33}
.slip p{margin:0;font-size:10.5px;line-height:1.8;color:#a8b0b6;letter-spacing:.3px}
.jx-scroll{position:relative;z-index:3;margin:12px 14px 0}
.jx-sword{height:14px;border-radius:99px;background:linear-gradient(90deg,#333b40,#4a5560 12%,#8a959a 50%,#4a5560 88%,#333b40);position:relative;box-shadow:0 2px 4px #0004}
.jx-sword::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,#e8ecef,transparent);animation:jxglint 4.5s ease-in-out infinite}
@keyframes jxglint{0%,100%{opacity:.25;width:44px}50%{opacity:.65;width:120px}}
.jx-sword.b{transform:rotate(180deg)}
.jx-body{padding:20px 22px;margin:0;background:linear-gradient(180deg,#eef1f3,#e8ecef 60%,#dfe4e8);color:#3a4248;line-height:2.05;font-size:14.5px;box-shadow:inset 0 0 26px #6a747e33,inset 0 0 4px #fff5;position:relative;contain:layout paint}
.jx-body::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'><defs><filter id='b'><feGaussianBlur stdDeviation='6'/></filter></defs><g filter='url(%23b)' opacity='0.12'><ellipse cx='60' cy='40' rx='90' ry='20' fill='%235a6b70'/><ellipse cx='340' cy='210' rx='80' ry='18' fill='%236a747e'/><path d='M280,30 Q320,50 350,40 T390,60' stroke='%235a6b70' stroke-width='2' fill='none' opacity='0.5'/></g></svg>");background-size:cover}
.jx-body p{margin:0 0 13px;position:relative}
.jx-body p:first-child::first-letter{font-size:30px;color:#8a4a42;float:left;line-height:1;margin:3px 7px 0 0;font-weight:700;text-shadow:1px 1px 0 #0001}
.fx-blade{font-weight:900;letter-spacing:2px;background:linear-gradient(100deg,#3a4248 30%,#8a959a 50%,#3a4248 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jxblade 2.6s ease-in-out infinite}
@keyframes jxblade{0%,100%{background-position:160% 0}50%{background-position:-60% 0}}
.fx-qi{font-weight:700;color:#4a6e70;text-shadow:0 0 6px #5a8a8833;animation:jxqi 2.4s ease-in-out infinite}
@keyframes jxqi{0%,100%{text-shadow:0 0 3px #5a8a8826}50%{text-shadow:0 0 9px #5a8a8855}}
.fx-kill{font-weight:900;color:#8a4a42;letter-spacing:1px;animation:jxkill .55s ease-in-out infinite;display:inline-block;will-change:transform}
@keyframes jxkill{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-.7px,.5px,0)}75%{transform:translate3d(.7px,-.5px,0)}}
.fx-feather{display:inline-block;color:#5a6b78;animation:jxfea 2.8s ease-in-out infinite;will-change:transform}
@keyframes jxfea{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-4px,0) rotate(1.2deg)}}
.fx-heart{color:#6a6a78;font-style:italic;opacity:.85;transition:.3s}
.fx-heart:hover{opacity:1}
.fx-verse{display:inline-block;writing-mode:vertical-rl;font-size:12.5px;color:#4a5560;background:#eef1f3;border:1px solid #a8b4bc;border-radius:3px;padding:10px 5px;margin:4px 8px;box-shadow:2px 2px 4px #0001;letter-spacing:4px;vertical-align:middle}
.jx-in{padding:13px 15px;animation:jxfade .4s ease}
@keyframes jxfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-top{display:flex;gap:14px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.realm-ring{position:relative;width:84px;height:84px;flex:none;border-radius:50%;background:conic-gradient(#8a959a var(--v),#363e44 0);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 12px #8a959a20,inset 0 0 8px #0004}
.realm-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#333b40,#252c31);border:1px solid #4a5560}
.realm-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed #8a959a22;animation:jxspin 30s linear infinite;will-change:transform}
.realm-ring b{position:relative;z-index:2;font-size:15px;color:#dce2e6;letter-spacing:2px;text-shadow:0 0 6px #8a959a40}
.realm-ring u{position:relative;z-index:2;text-decoration:none;font-size:9px;color:#8a9298;margin-top:2px}
.hero-id{flex:1;min-width:200px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hero-name{flex-basis:100%;font-size:19px;color:#dce2e6;letter-spacing:5px;text-shadow:0 0 8px #8a959a30}
.htag{font-size:10px;color:#a8b0b6;border:1px solid #4a5560;border-radius:3px;padding:2px 8px;background:#2c343a}
.htag.gold{color:#c8b4a8;border-color:#6a5850;background:#3a2e2a}
.hero-look{flex-basis:100%;margin:2px 0 0;font-size:11.5px;color:#9ea6ac;line-height:1.7}
.qi-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.qbar{position:relative;height:19px;border-radius:10px;background:repeating-linear-gradient(90deg,#252c31 0 23px,#2c343a 23px 24px);border:1px solid #4a556067;overflow:hidden;box-shadow:inset 0 2px 4px #0004}
.qbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:9px;transition:width .9s ease}
.qbar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:9px;background:linear-gradient(105deg,transparent 40%,#ffffff1e 50%,transparent 60%);background-size:220% 100%;animation:jxsheen 3.4s ease-in-out infinite}
@keyframes jxsheen{0%,60%{background-position:130% 0}100%{background-position:-30% 0}}
.qbar.hp::before{background:linear-gradient(90deg,#6e3a34,#a85852 60%,#c88478);box-shadow:0 0 7px #a8585244}
.qbar.nl::before{background:linear-gradient(90deg,#3a5060,#5a7a8c 60%,#8ab0c0);box-shadow:0 0 7px #5a7a8c44}
.qbar.xs::before{background:linear-gradient(90deg,#455060,#7a8a94 60%,#a8b8c2);box-shadow:0 0 7px #7a8a9444}
.qbar em{position:absolute;left:10px;z-index:2;font-style:normal;font-size:10px;line-height:19px;color:#eef1f3;letter-spacing:2px;text-shadow:0 1px 2px #0006}
.qbar b{position:relative;z-index:2;display:block;text-align:center;font-size:10px;line-height:19px;color:#eef1f3;font-weight:400;text-shadow:0 1px 2px #0006}
.hero-rows{display:flex;flex-direction:column;gap:5px}
.fr{display:flex;gap:9px;margin:0;font-size:11.5px;line-height:1.7;color:#a8b0b6;align-items:baseline}
.fr i{font-style:normal;flex:none;width:40px;text-align:center;font-size:9.5px;color:#a8bcc4;border:1px solid #4a5560;border-radius:3px;padding:1px 0;background:#2e363c;letter-spacing:1px}
.npc-deck{display:flex;gap:12px;overflow-x:auto;padding:13px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8a959a38 transparent;-webkit-overflow-scrolling:touch}
.npc-deck::-webkit-scrollbar{height:5px}
.npc-deck::-webkit-scrollbar-thumb{background:#8a959a38;border-radius:3px}
.npc-card{flex:0 0 88%;scroll-snap-align:center;border:1px solid #4a556066;border-radius:10px;background:linear-gradient(180deg,#333b40,#2a3238);overflow:hidden;transition:.3s;box-shadow:0 4px 10px #0004}
.npc-card:hover{border-color:#8a959a55;box-shadow:0 6px 14px #0005}
.npc-seal{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#f2ece0;background:radial-gradient(circle at 35% 30%,#a85852,#6e3a34);border-radius:5px;box-shadow:0 2px 4px #0004,inset 0 1px 0 #ffffff24;transform:rotate(-4deg);transition:.3s}
.npc-card:hover .npc-seal{transform:rotate(0)}
.npc-d{padding:12px 13px;border-top:3px solid #8a959a24}
.npc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.npc-h b{font-size:15px;color:#d8dfe4;letter-spacing:2px}
.rel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.rel{position:relative;height:32px;border:1px solid #4a556067;border-radius:5px;background:#2a3238;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--v);background:linear-gradient(180deg,#8a959a32,#8a959a16);transition:height .8s}
.rel em{position:relative;font-style:normal;font-size:8.5px;color:#8a9298;letter-spacing:1px}
.rel b{position:relative;font-size:12px;color:#dce2e6;font-weight:700}
.npc-mind{margin:0;font-size:11px;font-style:italic;color:#9eb0b6;padding:6px 10px;border-left:2px solid #5a7a80;background:#2c343a;border-radius:0 4px 4px 0;line-height:1.7}
.jx-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin:0 14px;position:relative;z-index:3}
.jx-duo .jx-box{margin:10px 0 0}
.news{margin:0 0 7px;font-size:11.5px;line-height:1.75;color:#a8b0b6;padding:7px 10px;background:#2c343a;border:1px solid #4a556055;border-left:3px solid #7a8a94;border-radius:0 5px 5px 0}
.news.dim{opacity:.6;border-left-color:#4a5560}
.mh{display:block;font-size:10.5px;letter-spacing:2px;margin:8px 0 4px;font-weight:400}
.mh.pm{color:#c8b4a8}.mh.lt{color:#a8bcc4}.mh.st{color:#a8b4a8}
.mi{margin:0 0 5px;font-size:11.5px;line-height:1.75;padding:7px 10px;border-radius:5px}
.mi.pm{background:#3a2e2a;border:1px solid #6a5850;border-left:3px solid #a85852;color:#d8c8bc}
.mi.lt{background:#2c363c;border:1px solid #4a606a4d;border-left:3px solid #5a7a8c;color:#b8c8d0}
.mi.st{background:#2e363c;border:1px solid #4a565644;border-left:3px solid #7a8a94;color:#a8b4bc}
.jx-opts{position:relative;z-index:3;margin:12px 14px 0;display:flex;flex-direction:column;gap:7px}
.opt-h{display:flex;align-items:center;gap:12px;justify-content:center;font-size:12px;letter-spacing:6px;color:#bcc4ca;font-weight:400;margin-bottom:2px}
.opt-h i{flex:1;max-width:110px;height:1px;background:linear-gradient(90deg,transparent,#8a959a66)}
.opt-h i.r{background:linear-gradient(90deg,#8a959a66,transparent)}
.tok{position:relative;display:flex;gap:12px;align-items:center;border:1px solid #4a556067;border-radius:8px;padding:9px 14px 9px 10px;background:linear-gradient(90deg,#333b40,#2a3238);transition:.3s;cursor:pointer;overflow:hidden}
.tok::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,#8a959a14,transparent);transition:.5s}
.tok:hover{transform:translateX(6px);border-color:#8a959a55}
.tok:hover::after{left:130%}
.tok em{flex:none;width:30px;height:34px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:700;color:#dce2e6;clip-path:polygon(50% 0,100% 18%,100% 82%,50% 100%,0 82%,0 18%);background:linear-gradient(180deg,#4a5560,#333b40);box-shadow:inset 0 1px 0 #ffffff1c;text-shadow:0 1px 2px #0006}
.tok p{margin:0;font-size:12.5px;color:#b0b8be;line-height:1.65}
.tok:hover p{color:#d8dfe4}
.tok.main em{background:linear-gradient(180deg,#a85852,#6e3a34)}
.tok.main:hover{border-color:#a85852;box-shadow:0 0 10px #a858521e}
.tok.side em{background:linear-gradient(180deg,#5a6b70,#333b40)}
.tok.soc em{background:linear-gradient(180deg,#4a7060,#2a4034)}
.tok.run em{background:linear-gradient(180deg,#4a6070,#2a3846)}
.tok.rare em{background:linear-gradient(180deg,#8a959a,#4a5560);animation:jxrare 2.6s ease-in-out infinite}
@keyframes jxrare{0%,100%{box-shadow:inset 0 1px 0 #ffffff1c}50%{box-shadow:inset 0 1px 0 #ffffff1c,0 0 9px #8a959a55}}
.jx-foot{position:relative;z-index:3;text-align:center;padding:13px 0 15px;font-size:10px;color:#6a747a;letter-spacing:6px}

/* ═════ 顶部栏 ═════ */
nav.sticky.top-0.w-full{background:linear-gradient(180deg,#2a3238ee 0%,#303840ee 50%,#252c31ee 100%)!important;border-bottom:1px solid #8a959a26!important;box-shadow:0 4px 16px #0004,inset 0 0 0 1px #a8b8c21a!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;position:sticky!important}
nav.sticky.top-0.w-full::before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:linear-gradient(180deg,transparent 60%,#39445088 92%,#48556099 100%)!important;mask:linear-gradient(180deg,#000,transparent 90%)!important;-webkit-mask:linear-gradient(180deg,#000,transparent 90%)!important}
nav.sticky.top-0.w-full header{border-bottom-color:#8a959a30!important}
#nav-left,#nav-middle,#nav-right{position:relative!important;z-index:2!important;color:#dce2e6!important}
#ai-model-selector .group.flex.items-center{background:linear-gradient(90deg,#333b40,#2a3238)!important;border:1px solid #4a556067!important;border-radius:8px!important;padding:6px 10px!important;transition:.3s ease!important;box-shadow:inset 0 0 8px #0003!important}
#ai-model-selector .group.flex.items-center:hover{border-color:#8a959a55!important;background:linear-gradient(90deg,#363e44,#303840)!important;box-shadow:0 0 10px #8a959a12,inset 0 0 8px #0003!important}
#ai-model-selector .truncate{color:#d8dfe4!important;font-family:"Noto Serif SC",serif!important;letter-spacing:1px!important}
#ai-model-selector svg{color:#8a959a!important;transition:transform .3s ease!important}
#ai-model-selector .group:hover svg{transform:translateY(2px)!important}
nav.sticky svg.lucide-clock-8{color:#a8b8c2!important}
nav.sticky span.MuiBadge-dot{background:radial-gradient(circle at 35% 30%,#a85852,#6e3a34)!important;box-shadow:0 0 6px #a8585266,inset 0 1px 0 #ffffff24!important}
nav.sticky button.MuiIconButton-root:has(svg.lucide-music-2){background:radial-gradient(circle at 35% 30%,#333b40,#252c31)!important;border:1px solid #4a5560!important;border-radius:50%!important;transition:.35s ease!important}
nav.sticky button.MuiIconButton-root:has(svg.lucide-music-2):hover{border-color:#8a959a!important;box-shadow:0 0 12px #8a959a33!important;transform:rotate(8deg)!important}
nav.sticky svg.lucide-music-2{color:#c8d0d5!important}
nav.sticky svg:has(use[href="#icon-icon-set"]){color:#a8b8c2!important}
#header-setting-button{background:linear-gradient(180deg,#4a5560,#333b40)!important;border:1px solid #4a5560!important;border-radius:6px!important;transition:.3s ease!important;box-shadow:inset 0 1px 0 #ffffff1c!important}
#header-setting-button:hover{border-color:#8a959a!important;box-shadow:0 0 10px #8a959a26,inset 0 1px 0 #ffffff1c!important;transform:translateY(-2px)!important}
#header-setting-button svg{color:#dce2e6!important}

/* ═════ AI气泡 ═════ */
.group.is-assistant>div:first-child{background:linear-gradient(178deg,#2a3238 0%,#303840 50%,#252c31 100%)!important;border:1px solid #4a5560!important;border-radius:12px!important;box-shadow:0 4px 18px #0004,inset 0 0 0 1px #a8b8c218,inset 0 0 40px #1a202566!important;color:#d8d3c8!important;position:relative!important;isolation:isolate!important;overflow:hidden!important}
.group.is-assistant>div:first-child::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(ellipse 90px 20px at 82% 12%,#5a6b7048,transparent 70%),radial-gradient(ellipse 80px 18px at 18% 88%,#6a747e42,transparent 70%)!important;opacity:.65!important}
.group.is-user>div:first-child{background:linear-gradient(178deg,#363e44 0%,#2f373d 100%)!important;border:1px solid #4a5560!important;border-radius:12px!important;box-shadow:0 4px 12px #0003,inset 0 0 0 1px #a8b8c218!important;color:#dce2e6!important}
.rili-markdown-renderer,.rili-markdown-renderer *{color:#d8d3c8!important}
.group.is-user .rili-markdown-renderer,.group.is-user .rili-markdown-renderer *{color:#dce2e6!important}
.text-xs.font-mono.text-muted-foreground{color:#8a9298!important}
.text-xs.font-mono.text-muted-foreground span{color:inherit!important}
.bg-muted.rounded.flex{background:#2a3238cc!important;border:1px solid #4a556055!important;border-radius:6px!important}
.bg-muted.rounded.flex button svg.lucide{color:#a8b0b6!important;stroke:#a8b0b6!important;transition:.3s ease!important}
.bg-muted.rounded.flex button:hover svg.lucide{color:#dce2e6!important;stroke:#dce2e6!important}

/* ═════ 开场白/快捷按钮 ═════ */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],div.flex.items-center.h-9.cursor-pointer.group:has(svg[data-icon="SlidersH"]){background:linear-gradient(90deg,#333b40,#2a3238)!important;border:1px solid #4a556067!important;border-radius:8px!important;transition:.3s ease!important;box-shadow:inset 0 0 8px #0003!important;color:#d8dfe4!important}
div.flex.items-center.h-9.cursor-pointer.group:hover{border-color:#8a959a55!important;box-shadow:0 0 10px #8a959a12,inset 0 0 8px #0003!important}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"]{color:#8a959a!important}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"]{color:#a8b0b6!important;transition:transform .3s ease!important}
div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"]{transform:translateY(2px)!important}
button.bg-background,button[class*="bg-background"],div[class*="rounded"][class*="bg-background"]{background:linear-gradient(180deg,#333b40ee,#2a3238ee)!important;border:1px solid #4a5560!important;color:#dce2e6!important;box-shadow:0 4px 12px #0004,inset 0 1px 0 #ffffff0c!important;transition:.3s ease!important}
button.bg-background:hover,button[class*="bg-background"]:hover{border-color:#8a959a!important;box-shadow:0 6px 16px #0005,0 0 10px #8a959a1e,inset 0 1px 0 #ffffff0c!important;transform:translateY(-1px)!important}

/* ═════ 按钮栏 ═════ */
#ai-mod-button2 button.MuiButton-root{background:linear-gradient(180deg,#333b40,#2a3238)!important;border:1px solid #4a556067!important;color:#bcc4ca!important;border-radius:6px!important;letter-spacing:1px!important;font-family:"Noto Serif SC",serif!important;transition:.3s ease!important;box-shadow:inset 0 1px 0 #ffffff0c,0 2px 4px #0003!important}
#ai-mod-button2 button.MuiButton-root:hover{border-color:#8a959a!important;background:linear-gradient(180deg,#363e44,#303840)!important;color:#dce2e6!important;box-shadow:0 0 10px #8a959a1e,inset 0 1px 0 #ffffff0c!important;transform:translateY(-1px)!important}
#ai-mod-button2 button.MuiButton-root svg{color:#8a959a!important;transition:color .3s ease!important}
#ai-mod-button2 button.MuiButton-root:hover svg{color:#a8b8c2!important}

/* ═════ 底部输入区 ═════ */
.bg-gradient-to-t{background:linear-gradient(180deg,transparent,#2a3238dd 40%,#252c31)!important}
[data-slot="input-group"],[role="group"][data-slot="input-group"]{background:linear-gradient(180deg,#333b40e8,#2a3238e8)!important;border:1px solid #4a556077!important;border-radius:12px!important;box-shadow:inset 0 0 14px #0003,0 4px 14px #0004!important;transition:.35s ease!important;color:#dce2e6!important}
[data-slot="input-group"]:focus-within{border-color:#8a959a55!important;box-shadow:0 0 16px #8a959a12,inset 0 0 20px #1a202533!important}
#prompt-input-header,#prompt-input-body{background:transparent!important;color:#dce2e6!important}
[data-slot="input-group-addon"]{color:#a8b0b6!important;background:transparent!important}
[data-slot="input-group-addon"] svg{color:#8a959a!important}
[data-slot="input-group-addon"] kbd{background:#2c343a!important;border:1px solid #4a5560!important;color:#bcc4ca!important;border-radius:4px!important}
#ai-chat-bottom-input{background:transparent!important;border:none!important;box-shadow:none!important}
#ai-chat-input{color:#dce2e6!important;font-family:"Noto Serif SC",serif!important;font-size:13.5px!important;letter-spacing:.5px!important;line-height:1.8!important;background:transparent!important}
#ai-chat-input::placeholder{color:#8a9298!important;letter-spacing:2px!important;font-style:italic!important}
#ai-chat-input::selection{background:#8a959a33!important;color:#eef1f3!important}

/* ═════ 分页栏 ═════ */
.MuiPaginationItem-root{background:linear-gradient(180deg,#333b40,#2a3238)!important;border:1px solid #4a556067!important;color:#bcc4ca!important;font-family:"Noto Serif SC",serif!important;transition:.3s ease!important;box-shadow:inset 0 1px 0 #ffffff0c!important}
.MuiPaginationItem-root:hover{border-color:#8a959a55!important;background:linear-gradient(180deg,#363e44,#303840)!important;color:#dce2e6!important;box-shadow:0 0 8px #8a959a1e,inset 0 1px 0 #ffffff0c!important}
.MuiPaginationItem-root.Mui-selected{background:linear-gradient(180deg,#a85852,#6e3a34)!important;border:1px solid #a85852!important;color:#f2ece0!important;box-shadow:0 0 10px #a8585240,inset 0 1px 0 #ffffff24!important;font-weight:700!important}
.MuiPaginationItem-root.Mui-disabled{opacity:.4!important;background:#2a3238!important;color:#6a747a!important}
.MuiPaginationItem-icon{color:inherit!important}
.MuiStack-root.css-1uwir8f .MuiBox-root{color:#a8b0b6!important;letter-spacing:1px!important}
.MuiInputBase-input{color:#dce2e6!important;background:#2a3238!important;border:1px solid #4a556067!important;border-radius:4px!important;font-family:"Noto Serif SC",serif!important}

/* ═════ 评论区 ═════ */
div[class*="bottom-0"][class*="w-full"][class*="bg-white"]{position:relative!important;background:linear-gradient(178deg,#2a3238 0%,#303840 34%,#252c31 100%)!important;border-top:1px solid #4a5560!important;box-shadow:0 -14px 36px #0004,inset 0 0 0 1px #a8b8c21a!important;color:#c8d0d5!important;font-family:"Noto Serif SC",serif!important}
div[class*="bottom-0"][class*="w-full"][class*="bg-white"]::before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:radial-gradient(ellipse 90px 20px at 85% 10%,#5a6b7040,transparent 70%),radial-gradient(ellipse 80px 18px at 10% 90%,#6a747e3a,transparent 70%)!important;opacity:.55!important}
div[class*="bottom-0"][class*="bg-white"] div.text-lg.font-bold{color:#dce2e6!important;letter-spacing:5px!important;text-shadow:0 0 8px #8a959a30!important;font-size:19px!important;font-family:"Noto Serif SC",serif!important}
div[class*="bottom-0"][class*="bg-white"] p.MuiTypography-body1{color:#a8bcc4!important;letter-spacing:2px!important;font-size:13px!important}
div[class*="bottom-0"][class*="bg-white"] span.MuiRating-iconEmpty svg{color:#4a5560!important}
div[class*="bottom-0"][class*="bg-white"] span.MuiRating-iconFilled svg{color:#a85852!important;animation:star-glow 3s ease-in-out infinite!important}
@keyframes star-glow{0%,100%{filter:drop-shadow(0 0 4px #a8585240)}50%{filter:drop-shadow(0 0 8px #a8585255)}}
div[class*="bottom-0"][class*="bg-white"] span.text-orange-500{color:#c8b4a8!important;text-shadow:0 0 6px #a8585240!important;font-weight:700!important}
div[class*="bottom-0"][class*="bg-white"] div.flex.flex-col.border-gray-200{border:1px solid #4a556067!important;border-radius:10px!important;background:linear-gradient(180deg,#333b40e8,#2a3238e8)!important;overflow:hidden!important;transition:.35s ease!important}
div[class*="bottom-0"][class*="bg-white"] div.flex.flex-col.border-gray-200:focus-within{border-color:#8a959a42!important;box-shadow:0 0 14px #8a959a0d,inset 0 0 22px #2c2a2433!important}
div[class*="bottom-0"][class*="bg-white"] textarea.rc-textarea{background:transparent!important;color:#dce2e6!important;font-family:"Noto Serif SC",serif!important;font-size:13.5px!important;letter-spacing:.5px!important;line-height:1.8!important}
div[class*="bottom-0"][class*="bg-white"] textarea.rc-textarea::placeholder{color:#8a9298!important;letter-spacing:2px!important}
div[class*="bottom-0"][class*="bg-white"] textarea.rc-textarea::selection{background:#8a959a33!important;color:#eef1f3!important}
div[class*="bottom-0"][class*="bg-white"] div.bg-gray-100{background:#2c343a!important;color:#868e94!important;font-size:10px!important;letter-spacing:1px!important}
div[class*="bottom-0"][class*="bg-white"] div.cursor-pointer.group.flex.items-center.justify-center{background:radial-gradient(circle at 35% 30%,#a85852,#6e3a34)!important;border-radius:6px!important;transition:.3s ease!important;box-shadow:0 2px 4px #0005,inset 0 1px 0 #ffffff24!important}
div[class*="bottom-0"][class*="bg-white"] div.cursor-pointer.group.flex.items-center.justify-center:hover{box-shadow:0 4px 8px #0006,0 0 10px #a858523a,inset 0 1px 0 #ffffff24!important;transform:translateY(-2px) rotate(2deg)!important}
div[class*="bottom-0"][class*="bg-white"] svg[data-icon="Send03"]{color:#f2ece0!important}
div[class*="bottom-0"][class*="bg-white"] div[class*="divider"]{background:linear-gradient(90deg,transparent,#8a959a66,transparent)!important;height:1px!important;opacity:.6!important}
div[class*="bottom-0"][class*="bg-white"] .MuiStack-root{gap:8px!important}
div[class*="bottom-0"][class*="bg-white"] button.MuiButton-containedPrimary{background:linear-gradient(180deg,#a85852,#6e3a34)!important;border:1px solid #a85852!important;color:#f2ece0!important;border-radius:6px!important;letter-spacing:2px!important;box-shadow:0 0 10px #a8585240,inset 0 1px 0 #ffffff24!important;transition:.3s ease!important}
div[class*="bottom-0"][class*="bg-white"] button.MuiButton-outlinedPrimary{background:#2c343a!important;border:1px solid #4a556067!important;color:#a8b0b6!important;border-radius:6px!important;letter-spacing:2px!important;transition:.3s ease!important}
div[class*="bottom-0"][class*="bg-white"] button.MuiButton-outlinedPrimary:hover{border-color:#8a959a55!important;background:#333b40!important;color:#bcc4ca!important}
div[class*="bottom-0"][class*="bg-white"] div.overflow-y-auto{scrollbar-width:thin!important;scrollbar-color:#8a959a38 transparent!important;-webkit-overflow-scrolling:touch!important}
div[class*="bottom-0"][class*="bg-white"] div.overflow-y-auto::-webkit-scrollbar{width:6px!important}
div[class*="bottom-0"][class*="bg-white"] div.overflow-y-auto::-webkit-scrollbar-thumb{background:#8a959a38!important;border-radius:3px!important}
div[class*="bottom-0"][class*="bg-white"] div.group.ml-0{background:linear-gradient(180deg,#333b40e8,#2a3238e8)!important;border:1px solid #4a556067!important;border-radius:10px!important;padding:12px!important;margin-bottom:10px!important;transition:.3s ease!important}
div[class*="bottom-0"][class*="bg-white"] div.group.ml-0:hover{border-color:#8a959a42!important;box-shadow:0 0 14px #8a959a0d!important;transform:translateX(4px)!important}
div[class*="bottom-0"][class*="bg-white"] img.rounded-full{border:2px solid #8a959a!important;box-shadow:0 0 10px #8a959a33,inset 0 0 4px #0004!important}
div[class*="bottom-0"][class*="bg-white"] div.text-sm span.font-bold{color:#d8dfe4!important;letter-spacing:1px!important;text-shadow:0 0 4px #8a959a26!important}
div[class*="bottom-0"][class*="bg-white"] span.text-\[10px\]{color:#c8b4a8!important;background:#3a2e2a!important;border:1px solid #6a5850!important;border-radius:3px!important;padding:1px 6px!important;letter-spacing:1px!important}
div[class*="bottom-0"][class*="bg-white"] div.break-all{color:#b0b8be!important;line-height:1.8!important;font-size:13px!important;letter-spacing:.3px!important}
div[class*="bottom-0"][class*="bg-white"] div.text-xs{color:#868e94!important;font-size:10px!important;letter-spacing:1px!important}
div[class*="bottom-0"][class*="bg-white"] button.text-gray-400{color:#8a9298!important;transition:.3s ease!important;border-radius:4px!important;padding:4px 8px!important}
div[class*="bottom-0"][class*="bg-white"] button.text-gray-400:hover{color:#8a959a!important;background:#2c343a!important}
div[class*="bottom-0"][class*="bg-white"] button.text-gray-400:hover svg{transform:scale(1.1)!important}
div[class*="bottom-0"][class*="bg-white"] span.cursor-pointer{color:#a8b0b6!important;letter-spacing:2px!important;transition:.3s ease!important}
div[class*="bottom-0"][class*="bg-white"] span.cursor-pointer:hover{color:#c8b4a8!important;text-shadow:0 0 6px #a8585233!important}
div[class*="bottom-0"][class*="bg-white"] div.ml-8.border-l{border-left:2px solid #8a959a33!important;padding-left:12px!important}

/* ═════ 正文水墨深底修正 ═════ */
.jx-body{background:linear-gradient(180deg,#2a3238 0%,#303840 50%,#252c31 100%)!important;color:#d8d3c8!important;box-shadow:inset 0 0 26px #1a2025aa,inset 0 0 4px #a8b8c218!important}
.jx-body::before{background-image:none!important;background:radial-gradient(ellipse 90px 20px at 15% 16%,#a8b8c22a,transparent 70%),radial-gradient(ellipse 80px 18px at 85% 88%,#8a959a26,transparent 70%)!important}
.jx-body p:first-child::first-letter{color:#c88478!important;text-shadow:0 0 8px #a8585244!important}
.fx-blade{background:linear-gradient(100deg,#a8b0b6 30%,#eef1f3 50%,#a8b0b6 70%)!important;background-size:220% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.fx-qi{color:#8ac0c2!important}
.fx-kill{color:#c88478!important}
.fx-feather{color:#a8bcc8!important}
.fx-heart{color:#b0aac0!important}
.fx-verse{color:#c8d0d5!important;background:#2c343a!important;border-color:#4a5560!important}

/* ═════════════════════════════════════════════════ */
/* 移动端 & 减少动效偏好 · 性能降级层                 */
/* ═════════════════════════════════════════════════ */
@media (max-width:768px),(prefers-reduced-motion:reduce){
  /* 1. 移除高成本 SVG 模糊背景 */
  .jx-ink{display:none!important}
  .jx-crane{display:none!important}
  .jx-body::before{display:none!important}
  .group.is-assistant>div:first-child::before{display:none!important}
  nav.sticky.top-0.w-full::before{display:none!important}
  div[class*="bottom-0"][class*="w-full"][class*="bg-white"]::before{display:none!important}

  /* 2. 关闭 backdrop-filter（移动端 GPU 杀手） */
  nav.sticky.top-0.w-full{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,#2a3238 0%,#303840 50%,#252c31 100%)!important}

  /* 3. 冻结全部装饰性无限动画 */
  .jx-dial i,.realm-ring::after{animation:none!important;border-style:solid!important;opacity:.5!important}
  .jx-sword::before{animation:none!important;opacity:.4!important;width:44px!important}
  .fx-blade{animation:none!important;background-position:50% 0!important}
  .fx-qi,.fx-kill,.fx-feather{animation:none!important;transform:none!important}
  .qbar::after{animation:none!important;display:none!important}
  .tok::after{display:none!important}
  .tok.rare em{animation:none!important;box-shadow:inset 0 1px 0 #ffffff1c!important}
  div[class*="bottom-0"][class*="bg-white"] span.MuiRating-iconFilled svg{animation:none!important;filter:none!important}

  /* 4. 简化阴影与滤镜链 */
  .jx{box-shadow:0 6px 14px #0003,inset 0 0 0 1px #a8b8c21a!important}
  .jx-mind[open],.jx-box[open]{box-shadow:0 0 6px #8a959a0d!important}
  .group.is-assistant>div:first-child{box-shadow:0 3px 10px #0003,inset 0 0 0 1px #a8b8c218!important}
  .group.is-user>div:first-child{box-shadow:0 3px 8px #0003!important}
  [data-slot="input-group"]{box-shadow:0 3px 10px #0003!important}
  [data-slot="input-group"]:focus-within{box-shadow:inset 0 0 12px #1a202533!important}
  .npc-card:hover{box-shadow:0 3px 8px #0004!important;transform:none!important}
  .slip:hover{transform:none!important;box-shadow:0 3px 7px #0002!important}
  .tok:hover{transform:none!important}
  div[class*="bottom-0"][class*="bg-white"] div.group.ml-0:hover{transform:none!important;box-shadow:none!important}

  /* 5. 去除 drop-shadow 全站滤镜（滚动时最烧 GPU） */
  nav.sticky svg,#ai-model-selector svg,#header-setting-button svg,[data-slot="input-group-addon"] svg,div[class*="bottom-0"][class*="bg-white"] svg{filter:none!important}
  .jx-loc b,.hero-name,.realm-ring b,.jx-dial b,div[class*="bottom-0"][class*="bg-white"] div.text-lg.font-bold{text-shadow:none!important}

  /* 6. 简化 hover 动作栏（触屏没有 hover 意义有限） */
  .tok:hover p{color:#b0b8be!important}
  .jx-mind>summary:hover::before,.jx-box>summary:hover::before{display:none!important}

  /* 7. 单栏化 duo（原本 grid 两栏在窄屏本就挤） */
  .jx-duo{grid-template-columns:1fr!important}

  /* 8. 关闭 conic-gradient 上的动态刻度环底纹（保留静态外观） */
  .jx-dial{background:radial-gradient(circle at 50% 50%,#333b40,#252c31)!important}

  /* 9. 触屏滚动惯性 */
  .jx-slips,.npc-deck{-webkit-overflow-scrolling:touch!important}
}