/* ===== v_0.20 本地字体（assets/fonts，OFL 免费商用，离线可用）===== */
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'UnifrakturMaguntia';src:url('assets/fonts/unifrakturmaguntia-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'SpecialElite';src:url('assets/fonts/special-elite-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DotGothic16';src:url('assets/fonts/dotgothic16-0-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--bg:#10121a;--card:#1a1e2c;--card2:#222840;--line:#2b3150;--fg:#e8e6df;--dim:#8a92b0;--acc:#e0a64e;--ok:#57b26a;--bad:#d95f5f}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--fg);height:100vh;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;gap:12px;padding:8px 14px;background:linear-gradient(180deg,#1b2030,#151828);border-bottom:1px solid var(--line);flex-shrink:0}
.logo{font-size:16px;font-weight:700;color:var(--acc);letter-spacing:1px;white-space:nowrap}.logo small{display:block;font-size:10px;color:var(--dim);font-weight:400;letter-spacing:2px}
.hinfo{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim);white-space:nowrap}
.badge{padding:2px 8px;border-radius:10px;font-size:11px;border:1px solid var(--line);background:var(--card)}
.badge.on{border-color:var(--ok);color:var(--ok)}

main{flex:1;overflow:auto;padding:12px}
/* ★ 首屏兜底（B6 回归修复）：nav 图标的尺寸原先只写在 design-upgrade-163.css 里，而该文件已改为
   「首屏之后异步挂载」→ 在它到达前 SVG 没有尺寸约束，会被 flex 列撑到 248px、把底栏顶成 290px 高
   （表现为首次进主页时下方 5 个按钮特别巨大）。这里把它挪进同步样式表，两处规则保持一致。 */
nav button svg,.nav-ic{width:20px;height:20px;flex:none;display:block;margin:0 auto}
nav{display:flex;flex-shrink:0;background:#151828;border-top:1px solid var(--line)}
nav button{flex:1;padding:9px 4px;background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;border-top:2px solid transparent}
nav button.active{color:var(--acc);border-top-color:var(--acc)}
.view{display:none}.view.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.card h3{font-size:13px;color:var(--acc);margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card h3::before{content:"◆";font-size:10px}
.card h3 .sub{margin-left:auto;font-size:11px;color:var(--dim);font-weight:400}
.grid{display:grid;gap:8px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.g2,.g3,.edit-wrap,.battle-wrap{grid-template-columns:1fr!important}.sk-body{grid-template-columns:1fr!important}}
label{font-size:12px;color:var(--dim);display:block;margin-bottom:3px}
input,select,textarea{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:6px 8px;font-size:13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{resize:vertical;min-height:52px}
button{background:var(--card2);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 13px;font-size:13px;cursor:pointer;transition:.15s;min-height:34px}
button:hover{border-color:var(--acc);color:var(--acc)}
button.primary{background:linear-gradient(180deg,#e0a64e,#c08a34);color:#1a1206;border:none;font-weight:700}
button.primary:hover{filter:brightness(1.1);color:#1a1206}
button.danger{border-color:var(--bad);color:var(--bad)}
button.sm{padding:6px 10px;font-size:13px;min-height:32px}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.note{font-size:11px;color:var(--dim);line-height:1.6;margin-top:5px}
.hl{color:var(--acc);font-weight:700}
.pool{font-size:14px;color:var(--acc);font-weight:800}
.charlist-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card2);cursor:pointer}
.charlist-item:hover{border-color:var(--acc)}
.charlist-item .nm{font-weight:700;font-size:14px}.charlist-item .info{font-size:11px;color:var(--dim);margin-top:2px}
.edit-wrap{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:980px){.edit-wrap{grid-template-columns:1fr 1fr;column-gap:12px}}
.attr-tbl{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:4px}
.attr-tbl th{color:var(--dim);font-weight:400;padding:3px 2px;text-align:center;font-size:10px;white-space:nowrap}
.attr-tbl td{padding:3px 2px;text-align:center;vertical-align:middle;white-space:nowrap}
.attr-tbl input{width:52px;min-width:0;padding:2px 3px;font-size:11px;text-align:center;background:transparent;border:1px solid transparent}
.attr-tbl input:focus{border-color:var(--acc);background:var(--card2)}
.attr-tbl .an{font-size:12px;font-weight:700;color:var(--fg);text-align:left;padding-left:4px}
.attr-tbl .st{color:var(--acc);font-weight:700}
.attr-tbl .ro{color:var(--dim)}
.outfit-opt{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--fg);margin-bottom:6px;font-size:12px}
.outfit-opt input[type=radio]{width:20px;height:20px;accent-color:var(--acc);cursor:pointer;flex-shrink:0}
.outfit-opt.on{border-color:var(--acc);background:rgba(224,166,78,.06)}
.eff-row{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:14px;padding:3px 9px;font-size:12px;cursor:pointer;color:var(--fg);margin:0}
.eff-row input{width:auto}
.eff-row.on{border-color:var(--acc);color:var(--acc)}
.eff-row .c{color:var(--dim);font-size:10px}
.ceff-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;margin-bottom:4px;font-size:12px;cursor:pointer}
.ceff-item input{width:auto}
.ceff-item .c{color:var(--acc);font-weight:700}
.ceff-edit{background:var(--card2);border:1px dashed var(--line);border-radius:8px;padding:8px;margin-bottom:4px}
.dice-row{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:3px 6px;margin-bottom:4px;font-size:12px}
.dice-row select{width:130px;padding:2px;flex-shrink:0}
.dice-row span{color:var(--dim);font-size:10px}
.ab-list-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:4px;cursor:pointer;font-size:13px;background:var(--card2)}
.ab-list-item:hover{border-color:var(--acc)}
.ab-list-item .ap{margin-left:auto;font-size:11px;color:var(--acc);font-weight:700}
.room-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:58px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card2)}
.room-mems{flex-basis:100%;width:100%;max-height:140px;overflow:auto;margin-top:4px;border:1px solid var(--line);border-radius:8px;background:#0d0f16;padding:4px}
.room-mems .rm-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px}
.room-item .nm{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis}.room-item .st{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sk-cat{font-size:11px;color:var(--acc);margin:7px 0 3px;cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px}
.sk-cat:hover{color:var(--fg)}
.sk-cat .ar{display:inline-block;transition:.2s;font-size:9px}
.sk-cat.fold .ar{transform:rotate(-90deg)}
.sk-body{display:grid;grid-template-columns:1fr 1fr}
.sk-body.fold{display:none}
.bar{height:13px;border-radius:6px;background:#2b2222;overflow:hidden;margin:2px 0;position:relative}
.bar i{display:block;height:100%;transition:.3s}
.bar.hp i{background:linear-gradient(90deg,#d95f5f,#e08a3a)}
.bar.mp i{background:linear-gradient(90deg,#5fb8b8,#5f8ad9)}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;text-shadow:0 1px 2px #000}
.shbar{display:flex;gap:3px;margin:3px 0}
.shseg{flex:1;height:16px;border-radius:4px;background:#262a36;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim);border:1px solid var(--line);transition:.3s}
.shseg span{font-size:9px}
.shseg.ph.has{background:#e08a3a;color:#1a1206;border-color:#e08a3a}
.shseg.ge.has{background:#c9ccd4;color:#222;border-color:#c9ccd4}
.shseg.ma.has{background:#a97bd9;color:#fff;border-color:#a97bd9}
.stage-black{position:relative;background:#000;border-radius:12px;overflow:hidden}
.wheel-wrap{display:flex;justify-content:center;padding:6px 0}
#wheel{width:min(230px,60vw);height:auto}
.battle-wrap{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:1000px){.battle-wrap{grid-template-columns:1.25fr 1fr}}
svg{width:100%;height:auto;display:block;background:transparent;border-radius:12px;border:1px solid var(--line)}
.region{fill:rgba(255,255,255,.02);stroke:var(--line);stroke-width:1}
.region:hover{fill:rgba(224,166,78,.08)}
.region.legal{fill:rgba(87,178,106,.2);cursor:pointer}
.rlabel{fill:var(--dim);font-size:9px;pointer-events:none;text-anchor:middle}
.piece{cursor:pointer}.piece circle{stroke:#0008;stroke-width:1.5}
.piece.sel circle{stroke:var(--acc);stroke-width:3}
.piece.def circle{stroke-dasharray:4 3;stroke:var(--ok)}
.piece text{fill:#fff;font-size:7px;font-weight:700;text-anchor:middle;pointer-events:none}
.piece.atk-target circle{stroke:var(--bad);stroke-width:3.5;cursor:crosshair}
.piece.ab-sel circle{stroke:var(--acc);stroke-width:4;stroke-dasharray:5 2}
.piece.ab-sel .abnum{fill:var(--acc);font-size:10px;font-weight:800;text-anchor:middle;pointer-events:none}
input[type="range"]{padding:0;background:transparent;border:none;accent-color:var(--acc)}.qref{display:flex;align-items:center;gap:6px;background:#23283888;border-left:2px solid var(--acc);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--dim);cursor:pointer;margin-bottom:2px;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-msg.q-sel{outline:1px solid var(--acc);border-radius:8px}.chat-msg.q-flash{background:#e0a64e33;outline:1px solid var(--acc);border-radius:8px}#quoteBar{display:flex;align-items:center;gap:6px;background:#232838;border:1px solid var(--acc);border-radius:6px;padding:4px 8px;font-size:11px;margin-bottom:4px;color:#cfd6e8;max-width:100%;overflow:hidden}#pieceMenu{position:fixed;background:#1a1e2cf2;border:1px solid var(--acc);border-radius:10px;padding:6px;display:none;z-index:9990;box-shadow:0 6px 20px #000a;min-width:170px;max-height:80vh;overflow:auto}#tpMenu{position:relative;background:#1a1e2cf2;border:1px solid var(--acc);border-radius:10px;
padding:6px;display:none;z-index:2;box-shadow:0 6px 20px #000a;min-width:170px;margin-top:8px}
#pieceMenu button{display:block;width:100%;margin-bottom:4px;text-align:left;font-size:12px}
#pieceMenu button:last-child{margin-bottom:0}
.member-panel{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:700px){.member-panel{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.mem-card{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px}
.mem-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mem-head .nm{font-weight:700;font-size:13px;flex:1}
.opline{display:flex;gap:4px;align-items:center;margin-top:4px}
.opline .sym{width:38px;flex-shrink:0;padding:7px 0;text-align:center;font-weight:800;font-size:14px;min-height:36px}
.opline input{flex:1;min-width:0;padding:4px 6px;font-size:12px}
.opline select{width:80px;flex-shrink:0;padding:6px}
.roll-tabs{display:flex;gap:4px;margin-bottom:8px}.roll-tabs button{flex:1;font-size:13px;min-height:38px}
.roll-tabs button.on{background:var(--acc);color:#1a1206;border-color:var(--acc);font-weight:700}
.dice-result{font-size:15px;text-align:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card2);margin:6px 0;line-height:1.8}
.dice-result .big{color:var(--acc);font-size:26px;font-weight:800}
.ok{color:var(--ok)}.bad{color:var(--bad)}
.log-box{background:#0d0f16;border:1px solid var(--line);border-radius:10px;padding:8px;height:150px;overflow:auto;font-size:12px;line-height:1.7}
.log-box .t{color:var(--dim);margin-right:6px}
/* ★ 审计 A1：#spotMask(引导蒙层)是 4096，弹窗原来只有 100 → 引导期间弹窗内按钮（含「✕ 退出」）全被蒙层拦截 */
#modalBox{position:fixed;inset:0;background:#000a;z-index:4097;display:none;align-items:center;justify-content:center}
#modalBox .mbox{background:var(--card);border:1px solid var(--acc);border-radius:12px;padding:16px;width:min(520px,94vw);max-height:90vh;overflow:auto}
#modalBox .mbox-wide{width:min(920px,94vw)}
#modalBox h4{color:var(--acc);font-size:14px;margin-bottom:10px}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--acc);border-radius:5px;min-height:30px}
/* ===== 新增：顶部行/成员滚轮/时点/对抗 ===== */
.toprow{display:grid;grid-template-columns:240px 1fr;gap:10px;margin-bottom:10px}
@media(max-width:980px){.toprow{grid-template-columns:1fr !important;grid-template-rows:auto auto auto !important;gap:8px}
.toprow > .card{grid-row:auto !important;height:auto !important;min-width:0;overflow:visible}
.toprow .row{grid-column:1 !important;justify-content:center}
.memrow{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap:nowrap}
.memrow .mcard{flex:0 0 auto;min-width:150px}
.bf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.bf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box}
.bf-grid{min-width:0;margin:0 auto}
#view-battle .row{flex-wrap:wrap;gap:6px}
#view-battle .row button{flex:0 0 auto}
.tp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.mem-scroll{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.memrow{display:flex;gap:8px;width:100%;min-width:0;overflow-x:scroll;scrollbar-width:thin;scrollbar-color:var(--acc) #12141d;padding:4px 2px 14px}
.memrow .mem-card{flex:0 0 220px;min-width:320px;margin:0}
.arrow{flex-shrink:0;width:26px;height:40px;padding:0;font-size:14px}
.tp-head{display:flex;gap:6px;margin-bottom:8px}
.tp-act{flex:1;border:1px solid var(--acc);border-radius:10px;padding:8px;text-align:center;font-size:17px;font-weight:800;color:var(--acc);background:rgba(224,166,78,.06);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tp-phase{display:flex;gap:3px;border:1px solid var(--line);border-radius:10px;padding:4px}
.tp-phase span{flex:1;text-align:center;padding:8px 4px;border-radius:8px;font-size:12px;color:var(--dim)}
.tp-phase span.on{background:var(--acc);color:#1a1206;font-weight:700}
.tp-grid{display:flex;gap:6px;width:100%;max-width:100%;min-width:0;overflow-x:scroll;scrollbar-width:thin;scrollbar-color:var(--acc) #12141d;padding:6px 2px 14px;-webkit-overflow-scrolling:touch;margin:8px 0}
.tp-cell{flex:0 0 110px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--card2)}
.tp-cell.cur{border-color:var(--acc)}
.tp-cell .tpdot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.tp-cell .tpnm{font-size:9px;color:var(--dim);max-width:56px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tp-cell .tpbtns{display:flex;gap:2px;width:100%}
.tp-cell .tpbtns button{flex:1;font-size:11px;padding:7px 0;min-width:0}
.tp-cell .tpbtns button.on{background:var(--acc);color:#1a1206;border-color:var(--acc);font-weight:700}
.tp-cell .tpbtns button.no{opacity:.35}
.tp-cell .tpdot.react{outline:3px solid var(--acc);outline-offset:1px}
.tp-cell .tpdot.ignore{filter:grayscale(1);opacity:.4}
.tp-react-menu{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tp-react-menu button{flex:1;min-width:60px;font-size:12px;padding:9px 4px;min-height:38px}
.tp-ctrl{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.tp-ctrl label{display:flex;align-items:center;gap:3px;font-size:11px;margin:0;color:var(--fg);cursor:pointer}
.tp-ctrl input{width:auto;accent-color:var(--acc)}
.vs-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.vs-side{flex:1;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;cursor:pointer;background:var(--card2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.vs-side:hover{border-color:var(--acc)}
.vs-mid{color:var(--acc);font-weight:800;font-size:12px;flex-shrink:0}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-col{border:1px solid var(--line);border-radius:10px;padding:8px}
.vs-res{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card2);margin:8px 0;font-size:22px;font-weight:800}
.vs-res .vl{color:var(--acc)}.vs-res .vr{color:#7bd9c2}
.vs-res .op{color:var(--fg);font-size:26px}
.vs-res .stxt{font-size:10px;color:var(--dim);font-weight:400;display:block;text-align:center;line-height:1.3}
/* ===== 新增：房间网格/账号/房主 ===== */
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-auto-rows:min-content;height:320px;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--acc) #12141d;padding:2px 14px 2px 0}
@media(max-width:900px){.room-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.room-grid{grid-template-columns:1fr}}
/* ★ 审计 N6：390px 视口下成员卡 min-width:320px（+42px 偏移）会越界 8px → 窄屏改为整行自适应；顺便给底部悬浮键留出安全区 */
@media(max-width:560px){.memrow .mem-card{min-width:0;flex:1 1 100%}}
@media(max-width:560px){.run-bottom{padding-bottom:56px}}
@media(max-width:560px){.room-item>div:first-child{flex-basis:100%;min-width:0}.room-item .row{margin-left:0;width:100%;flex-wrap:wrap}.room-item button{min-width:0;padding:4px 8px;font-size:11px}}
.acct-box{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.acct-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#1a1206;flex-shrink:0}
.acct-owner{color:var(--acc);font-size:10px;border:1px solid var(--acc);border-radius:8px;padding:1px 5px;margin-left:4px;white-space:nowrap}
/* ===== 滚动条滑块：房间列表竖 / 战斗人物卡+时点界面横 ===== */
.room-grid::-webkit-scrollbar{width:10px;background:#12141d}
.room-grid::-webkit-scrollbar-thumb{background:var(--acc);border-radius:5px;min-height:30px}
.room-grid::-webkit-scrollbar-thumb:hover{background:var(--acc)}
.memrow::-webkit-scrollbar{height:10px;background:#12141d}
.memrow::-webkit-scrollbar-thumb{background:var(--acc);border-radius:5px;min-height:30px}
.memrow::-webkit-scrollbar-thumb:hover{background:var(--acc)}
.tp-grid::-webkit-scrollbar{height:10px;background:#12141d}
.tp-grid::-webkit-scrollbar-thumb{background:var(--acc);border-radius:5px;min-height:30px}
.tp-grid::-webkit-scrollbar-thumb:hover{background:var(--acc)}
/* ===== 自绘滚动条（内容不足也显示滑块） ===== */
.selfscroll{position:relative;scrollbar-width:none;-ms-overflow-style:none}.room-grid::-webkit-scrollbar,.memrow::-webkit-scrollbar,.tp-grid::-webkit-scrollbar{display:none}.room-grid,.memrow,.tp-grid{scrollbar-width:none;-ms-overflow-style:none}
.selfscroll::-webkit-scrollbar{display:none}
.ss-track{position:absolute;background:#12141d;border-radius:6px;z-index:6}
.ss-thumb{position:absolute;background:var(--acc);border-radius:6px;cursor:pointer}
.ss-thumb:hover{background:#f0b868}
.ss-v{top:0;right:0;bottom:0;width:14px}
.ss-v .ss-thumb{left:1px;right:1px;min-height:24px}
.ss-h{left:0;right:0;bottom:0;height:14px}
.ss-h .ss-thumb{top:1px;bottom:1px;min-width:30px}
.battle-wrap>div{min-width:0}
.toprow>div{min-width:0}
/* ===== 跑团（聊天室） ===== */
#view-run.active{display:flex;flex-direction:column;height:calc(100vh - 168px)}
.run-main{display:flex;gap:10px;flex:1;min-height:0}
.run-log-card{flex:0 0 33%;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
.run-log-card .log-box{flex:1;height:auto;margin-top:4px}
.run-chat-card{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
.chat-stage{position:relative;flex:1;min-height:0;display:flex}
.chat-body{flex:1;overflow:auto;background:rgba(13,15,22,.72);border:1px solid var(--line);border-radius:8px;padding:8px;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.chat-msg{font-size:13px;line-height:1.5}
.chat-msg .t{color:var(--dim);font-size:11px;margin-right:6px}
.chat-msg.sys{color:var(--acc);font-size:12px}
.chat-msg img{max-width:320px;max-height:160px;border-radius:8px;display:block;margin-top:4px}
.chat-acts{display:flex;gap:4px;margin-top:4px}
.chat-acts .sm{font-size:10px;padding:2px 8px}
.run-bottom{flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px}
.run-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.run-bar button{min-width:0}
/* ===== 房间列表展开 ===== */
.room-item{flex-wrap:wrap}
.room-mems{flex-basis:100%;width:100%;max-height:140px;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:#0d0f16;padding:4px}
.room-mems .rm-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px;border-bottom:1px solid #ffffff08}
.room-mems .rm-row:last-child{border-bottom:none}
/* ===== 左侧菜单 / 账号中心 ===== */
.side-avatar{position:fixed;left:8px;top:58px;width:46px;height:46px;border-radius:50%;cursor:pointer;z-index:60;border:2px solid var(--acc);overflow:hidden;background:#000;box-shadow:0 2px 10px #0008;display:flex;align-items:center;justify-content:center}
.side-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.side-avatar span{color:var(--dim);font-size:16px}
.side-mask{position:fixed;inset:0;background:#0008;z-index:65;display:none}
.side-mask.open{display:block}
.side-menu{position:fixed;left:0;top:0;bottom:0;width:282px;background:var(--card);border-right:1px solid var(--line);z-index:70;transform:translateX(-100%);transition:transform .25s;display:flex;flex-direction:column;gap:4px;padding:14px;box-sizing:border-box;overflow-y:auto}
.side-menu.open{transform:translateX(0)}
.sm-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sm-ava{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#000;border:2px solid var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sm-ava img{width:100%;height:100%;object-fit:cover}
.sm-ava span{color:var(--dim);font-size:16px}
.sm-login{font-size:11px;color:var(--dim);margin-top:2px}
.sm-status{font-size:12px;margin-top:4px;cursor:pointer;color:var(--fg)}
.sm-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;cursor:pointer;background:var(--card2);color:var(--fg)}
.sm-btn:hover{border-color:var(--acc)}
.side-roomlist{max-height:170px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:4px;margin:6px 0}
.lg-online{font-size:13px;color:var(--acc);font-weight:400;margin-left:6px}
main{padding-left:60px}
.chat-msg{font-size:var(--chat-fs,13px)}
/* ===== V0.9 新增：云端联机（原V0.8为本地架构） ===== */
#wheel{width:100%;height:100%}
.wheel-tb{position:relative}
.chat-center{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.chat-tab{display:flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--line);border-radius:14px;font-size:12px;cursor:pointer;background:var(--card2);color:var(--fg)}
.chat-tab.on{border-color:var(--acc);color:var(--acc);background:rgba(224,166,78,.08)}
.chat-tab .x{color:var(--bad);font-weight:800;margin-left:2px}
.mem-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line);border-radius:12px;font-size:11px;cursor:pointer;margin:2px}
.ghost{fill:rgba(87,178,106,.25);stroke:var(--ok);stroke-width:1.5;stroke-dasharray:5 3;pointer-events:none}
.atk-arrow{stroke:var(--bad);stroke-width:2;marker-end:url(#arrBad);pointer-events:none}
.ab-arrow{stroke:var(--acc);stroke-width:2;marker-end:url(#arrAcc);pointer-events:none}
/* ===== V0.8.1 移动端适配优化 ===== */
@media(max-width:760px){
.fold-sec h3 .tri{width:40px;height:40px;font-size:16px;margin-right:4px}
.fold-sec h3{padding:6px 2px}
button{min-height:44px;padding:9px 13px;font-size:14px;border-radius:10px}
button.sm{min-height:40px;padding:8px 11px;font-size:13px}
.opline .sym{min-height:40px}
.tp-cell .tpbtns button{min-height:34px;font-size:11px}
body{height:100vh}
@supports(height:100dvh){body{height:100dvh}}
#modalBox .mbox{max-height:90vh}
@supports(max-height:90dvh){#modalBox .mbox{max-height:90dvh}}
#view-run.active{height:calc(-168px + 100vh)}
@supports(height:100dvh){#view-run.active{height:calc(-168px + 100dvh)}}
@supports(height:100dvh){#view-run.active{height:calc(-168px + 100dvh)}}
input,select,textarea{font-size:16px!important;padding:8px 10px;border-radius:10px}
button{min-height:40px;padding:8px 12px;font-size:14px;border-radius:10px}
button.sm{min-height:36px;padding:6px 10px;font-size:13px}
nav button{min-height:52px;padding:10px 2px;font-size:13px}
label{font-size:13px;margin-bottom:4px}
.note{font-size:12px}
.card{padding:10px;border-radius:14px}
main{padding:8px}
.side-avatar{left:auto;right:8px;top:auto;bottom:64px;width:40px;height:40px;opacity:.92}
header{padding:6px 10px}
.charlist-item{padding:12px}
.chat-tab{padding:6px 12px}
.mem-chip{padding:5px 10px}
}
.gpick-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.gpick-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;max-width:92vw;max-height:82vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.gpick-box h4{margin:0 0 8px}


.fold-sec.folded>*:not(h3){display:none!important}
.fold-sec h3 .tri{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer;color:var(--dim);font-size:14px;border-radius:6px;margin-right:2px;user-select:none;touch-action:manipulation}
.fold-sec h3 .tri:hover{color:var(--hl)}
.attr-tbl td.ct{color:var(--hl);font-weight:700}
.map-wrap{position:fixed;z-index:80;width:360px;height:340px;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0b0d13;min-height:160px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.map-bar{display:flex;gap:4px;align-items:center;padding:4px 6px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex-wrap:wrap}
.map-view{flex:1;position:relative;overflow:hidden;cursor:grab;user-select:none;touch-action:none;min-height:120px}
.map-view:active{cursor:grabbing}
.map-layer{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.map-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px;z-index:0}
.map-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px #000);z-index:2;pointer-events:auto}
.map-pin span{font-size:10px;color:var(--fg);background:rgba(0,0,0,.55);border-radius:4px;padding:1px 4px;margin-top:2px;white-space:nowrap}
.map-hint{padding:2px 6px;font-size:10px;color:var(--dim);border-top:1px solid var(--line);text-align:center;flex:none}
.map-add-mode .map-view{cursor:crosshair}
/* ===== DND 式网格战场（v0.13） ===== */
.gline{stroke:#3a4166;stroke-width:1;pointer-events:none}
.gline.hot{stroke:var(--acc);stroke-width:2.5}
.wall-h{stroke:#9a9a9a;stroke-width:4;stroke-linecap:round;pointer-events:none}
.wall-l{stroke:#c9971e;stroke-width:2.5;stroke-linecap:round;pointer-events:none}
.gcell{fill:rgba(255,255,255,.015)}
.gcell.legal{fill:rgba(87,178,106,.22);cursor:pointer}
.gcell.atkzone{fill:rgba(224,166,78,.13)}
.gcell{fill:rgba(255,255,255,.015)}
.gcell.legal{fill:rgba(87,178,106,.22);cursor:pointer}
.gcell.atkzone{fill:rgba(224,166,78,.13)}
.atk-circle{fill:rgba(224,166,78,.10);stroke:var(--acc);stroke-width:1.5;stroke-dasharray:6 4;pointer-events:none}
/* 全局悬停详情提示 */
.tip-pop{position:fixed;z-index:9999;max-width:300px;background:#232942;border:1px solid var(--acc);color:var(--fg);font-size:12px;line-height:1.7;padding:8px 10px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.55);pointer-events:none;display:none}
.gcoord{fill:var(--dim);font-size:8px;pointer-events:none;text-anchor:middle}
.gframe{fill:none;stroke:var(--acc);stroke-width:2;pointer-events:none}
.gframe.hot{stroke-width:3}
/* ===== v0.16 移动端触控放大（置于末尾确保覆盖） ===== */
@media(max-width:760px){
.fold-sec h3 .tri{width:40px;height:40px;font-size:16px;margin-right:4px}
.fold-sec h3{padding:6px 2px}
button{min-height:44px;padding:9px 13px;font-size:14px;border-radius:10px}
button.sm{min-height:40px;padding:8px 11px;font-size:13px}
.opline .sym{min-height:40px}
.tp-cell .tpbtns button{min-height:34px;font-size:11px}
}

/* ===== v_17 字号与触屏拖拽修复 ===== */
body{font-size:14px}
.logo small{font-size:11px}
.hinfo{font-size:13px}
.badge{font-size:12px}
nav button{font-size:13px}
.card h3{font-size:14px}
.card h3 .sub{font-size:12px}
label{font-size:13px}
button{font-size:14px}
button.sm{font-size:14px}
input,select,textarea{font-size:14px}
#field,#bgimg,#runBgImg,.map-wrap{touch-action:none}

/* ===== v_17 批次2：自定义对话框 ===== */
.dlg-overlay{position:fixed;inset:0;background:rgba(8,10,16,.66);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg-box{background:var(--card,#1a1e2c);border:1px solid var(--line,#2b3150);border-radius:12px;padding:16px 18px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.dlg-msg{font-size:14px;line-height:1.6;color:var(--fg,#e8e6df);white-space:pre-line}

/* ===== v_17 批次5：内联样式外置类（HTML 模板高频内联样式迁移） ===== */
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}
.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}
.m0{margin:0}
.mla{margin-left:auto}
.fx1{flex:1}
.jcc{justify-content:center}
.dn{display:none}
.cp{cursor:pointer}
.dim{color:var(--dim)}.acc{color:var(--acc)}.bad{color:var(--bad)}.ok{color:var(--ok)}
.fs10{font-size:10px}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}
.dim10{color:var(--dim);font-size:10px}.dim11{color:var(--dim);font-size:11px}.dim12{color:var(--dim);font-size:12px}
.w52{width:52px}.w56{width:56px}.w60{width:60px}.w70{width:70px}.w100{width:100%}

/* ===== v_17 批次5：内联样式外置类（第二波·组合模式） ===== */
.fg{color:var(--fg)}.tac{text-align:center}.fs14{font-size:14px}.mw150{max-width:150px}.mw62{min-width:62px}.gap4{gap:4px}
.dim11p{font-size:11px;color:var(--dim);padding:2px 4px 6px}
.d10b{display:block;font-size:10px;color:var(--dim)}
.fgflex{display:flex;align-items:center;gap:6px;color:var(--fg)}
.dim10ml{color:var(--dim);font-size:10px;margin-left:6px}
.w56inp{width:56px;padding:2px 4px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--fg)}
.dim12w52{font-size:12px;color:var(--dim);width:52px}
.dmb6{display:block;margin-bottom:6px}
.m200{margin:2px 0 0}.m60{margin:6px 0}
.bad10{color:var(--bad);font-size:10px}
.fx1m0{flex:1;margin:0}
.mb14fg{margin-bottom:14px;color:var(--fg)}
.mladim10{margin-left:auto;color:var(--dim);font-size:10px}
.mladim11{margin-left:auto;color:var(--dim);font-size:11px}
.dim11w34{font-size:11px;color:var(--dim);width:34px}
.avatar20{display:inline-block;width:20px;height:20px;border-radius:50%;background:#666;overflow:hidden;vertical-align:middle}

.m004{margin:0 0 4px}

/* ===== v_17 批次8：论坛/事件/线索 组件 ===== */
.clpin{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);cursor:pointer;z-index:5}
.clpin .clhead{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);position:relative;z-index:2}
.clpin .clhead::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.28);transform:translate(-50%,-50%)}
.clpin .clphoto{width:40px;margin-top:-1px;background:#fff;border-radius:4px;padding:1px;box-shadow:0 3px 10px rgba(0,0,0,.45);overflow:hidden}
.clpin .clphoto img{width:100%;height:auto;max-height:48px;object-fit:cover;display:block}
.evdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line);margin:0 3px;cursor:pointer}
.evdot.on{background:var(--acc);transform:scale(1.3)}

/* ===== v_17 批次8：QQ 风格发送栏 ===== */
.chat-sendbox{flex:1 1 100%;min-width:0;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}
.chat-bar{display:flex;justify-content:space-between;align-items:center;padding:3px 10px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.chat-sendbox #chatInput{min-height:56px;max-height:150px;overflow:auto;padding:8px 10px;outline:none;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.5}
.chat-sendrow{display:flex;justify-content:flex-end;padding:6px 10px}
.chat-sendrow button{min-width:84px}

.chat-inline{flex:1;min-width:0;min-height:36px;max-height:96px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.5;background:rgba(255,255,255,.03)}
.chat-inline:empty::before{content:attr(data-placeholder);color:var(--dim);opacity:.7;pointer-events:none}

/* ===== v_17 批次8：事件轮 ===== */
.evslot{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border-radius:50%;background:rgba(10,12,18,.75);border:2px solid rgba(224,166,78,.6);overflow:hidden;transition:transform 4s cubic-bezier(.17,.67,.12,.99)}
.evslot img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.evslot span{font-size:11px;text-align:center;padding:2px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--fg)}

.evhit{outline:3px solid var(--acc);outline-offset:2px;transform:scale(1.12)}

.evslotin{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.evslotin img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---- 通用工具类（内联样式抽类）---- */
.box{border:1px solid var(--line);border-radius:8px;padding:6px}
.acc-box{border:1px solid var(--acc);border-radius:8px;padding:6px;color:var(--acc)}
.frow{display:flex;align-items:center;gap:6px}
.fwrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbetween{display:flex;align-items:center;justify-content:space-between}
.frow4{display:flex;align-items:center;gap:4px}
.acc-big{color:var(--acc);font-size:16px;font-weight:800}
.ellip11{flex:1;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blockbtn{display:block;margin:2px 0;text-align:left;width:100%}
/* ===== v_0.20 设计风格库（设置→主题→设计风格，20 套）===== */
/* ---- 1. Frutiger Aero（真实壁纸·水珠玻璃）---- */
body[data-style="frutiger-aero"]{--bg:#7ec4ee;--card:rgba(255,255,255,.55);--card2:rgba(255,255,255,.42);--line:rgba(255,255,255,.9);--fg:#0e3a55;--dim:#3f7a99;--acc:#2f9fd6}
body[data-style="frutiger-aero"]{background:linear-gradient(180deg,rgba(140,215,250,.18),rgba(255,255,255,.1) 40%,rgba(150,220,150,.22)),url("assets/images/frutiger/aero-sky-grass.jpg") center/cover fixed}
body[data-style="frutiger-aero"] .card{background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.48));border:1px solid rgba(255,255,255,.98);border-radius:18px;box-shadow:inset 0 0 0 1px rgba(160,215,255,.95),inset 0 -16px 34px rgba(90,180,240,.38),inset 0 6px 14px rgba(255,255,255,.75),0 12px 34px rgba(25,100,160,.4)}
body[data-style="frutiger-aero"] .card h3{color:#0e5a85;text-shadow:0 1px 0 rgba(255,255,255,.9);font-weight:700}
body[data-style="frutiger-aero"] button{background:linear-gradient(180deg,#ffffff 0%,#ffffff 24%,#e8f7ff 36%,#9ad8f8 55%,#5cb8ee 78%,#3aa6e4 100%);border:1px solid #ffffff;border-radius:14px;color:#0e3a55;font-weight:600;box-shadow:inset 0 0 0 1px rgba(130,205,255,.9),inset 0 3px 5px rgba(255,255,255,1),inset 0 -4px 8px rgba(60,150,220,.4),0 4px 10px rgba(25,110,175,.5)}
body[data-style="frutiger-aero"] button:hover{filter:brightness(1.07)}
body[data-style="frutiger-aero"] button.primary{background:linear-gradient(180deg,#ffffff 0%,#d8f2ff 22%,#7ccdf2 45%,#3eb0e8 72%,#1e96d8 100%);color:#fff;border-color:#e8f8ff;box-shadow:inset 0 2px 4px rgba(255,255,255,.95),inset 0 -5px 10px rgba(20,110,185,.5),0 5px 14px rgba(15,110,185,.6);text-shadow:0 1px 2px rgba(0,70,130,.4)}
body[data-style="frutiger-aero"] input,body[data-style="frutiger-aero"] select,body[data-style="frutiger-aero"] textarea{border:1px solid rgba(255,255,255,.98);border-radius:12px;background:rgba(255,255,255,.8);color:#0e3a55;box-shadow:inset 0 2px 8px rgba(70,150,210,.3)}
body[data-style="frutiger-aero"] header{background:linear-gradient(180deg,rgba(190,238,252,.94),rgba(145,215,245,.85));border-bottom:2px solid rgba(255,255,255,.95);box-shadow:0 2px 14px rgba(60,160,220,.3)}
body[data-style="frutiger-aero"] nav{background:linear-gradient(180deg,rgba(165,225,250,.92),rgba(125,205,242,.88));border-top:2px solid rgba(255,255,255,.95)}
body[data-style="frutiger-aero"] nav button.active{color:#0e5a85;border-top-color:#fff;background:rgba(255,255,255,.6);border-radius:0 0 12px 12px}
body[data-style="frutiger-aero"] .charlist-item{border:1px solid rgba(255,255,255,.95);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.45));box-shadow:inset 0 0 0 1px rgba(160,215,255,.85),inset 0 4px 10px rgba(255,255,255,.6),0 5px 14px rgba(25,100,160,.28)}
body[data-style="frutiger-aero"] .badge{background:linear-gradient(180deg,#fff,#c2eaff);color:#0e3a55;border-color:#fff;border-radius:10px}
/* ---- 2. Win98 ---- */
body[data-style="win98"]{--bg:#3a6ea5;--card:#c0c0c0;--card2:#d4d0c8;--line:#808080;--fg:#000;--dim:#404040;--acc:#000080}
body[data-style="win98"]{background:#3a6ea5}
body[data-style="win98"] .card{border:2px solid #fff;border-right-color:#404040;border-bottom-color:#404040;border-radius:0;background:#c0c0c0;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080}
body[data-style="win98"] .card h3{margin:-1px -1px 0;padding:3px 8px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;font-size:13px}
body[data-style="win98"] button{border:2px solid;border-color:#fff #404040 #404040 #fff;border-radius:0;background:#c0c0c0;color:#000;font-size:13px;padding:2px 10px;font-family:Tahoma,"Microsoft Sans Serif",Arial,sans-serif}
body[data-style="win98"] button:active{border-color:#404040 #fff #fff #404040;background:#b0b0b0}
body[data-style="win98"] button.primary{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;border-color:#fff #404040 #404040 #fff}
body[data-style="win98"] input,body[data-style="win98"] select,body[data-style="win98"] textarea{border:2px solid;border-color:#404040 #fff #fff #404040;border-radius:0;background:#fff;color:#000;font-size:13px;font-family:Tahoma,Arial,sans-serif}
body[data-style="win98"] header{background:#c0c0c0;border-bottom:2px solid #404040}
body[data-style="win98"] nav{background:#c0c0c0;border-top:2px solid #fff}
body[data-style="win98"] nav button.active{color:#000;border-top:2px solid #000080;background:#d4d0c8;font-weight:700}
body[data-style="win98"] .charlist-item{border:2px solid;border-color:#fff #404040 #404040 #fff;border-radius:0;background:#c0c0c0}
body[data-style="win98"] .badge{border:1px solid #808080;border-radius:0}
body[data-style="win98"] .fold-sec h3 .tri{border-radius:0}

/* ---- 3. 黑白灰极简主义（黑白两极）---- */
body[data-style="mono"]{color-scheme:dark;--bg:#000;--card:#0c0c0c;--card2:#141414;--line:rgba(255,255,255,.14);--fg:#f5f5f5;--dim:#808080;--acc:#fff}
body[data-style="mono"]{background:#000}
body[data-style="mono"] .card{border:1px solid rgba(255,255,255,.16);border-radius:4px;background:#0c0c0c;box-shadow:0 6px 30px rgba(0,0,0,.8)}
body[data-style="mono"] .card h3{color:#fff;font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:15px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:6px}
body[data-style="mono"] button{border:1px solid #fff;border-radius:3px;background:#fff;color:#000;font-weight:700;letter-spacing:1px}
body[data-style="mono"] button:hover{background:#000;color:#fff}
body[data-style="mono"] button.primary{background:#fff;color:#000;border:none;font-weight:800}
body[data-style="mono"] button.primary:hover{background:#ccc;color:#000}
body[data-style="mono"] input,body[data-style="mono"] select,body[data-style="mono"] textarea{border:1px solid rgba(255,255,255,.2);border-radius:3px;background:#0a0a0a;color:#f5f5f5}
body[data-style="mono"] input:focus,body[data-style="mono"] select:focus,body[data-style="mono"] textarea:focus{border-color:#fff}
body[data-style="mono"] header{background:#000;border-bottom:2px solid #fff}
body[data-style="mono"] nav{background:#000;border-top:1px solid rgba(255,255,255,.14)}
body[data-style="mono"] nav button.active{color:#fff;border-top:2px solid #fff;font-weight:800}
body[data-style="mono"] .charlist-item{border:1px solid rgba(255,255,255,.16);border-radius:4px;background:#0c0c0c}
body[data-style="mono"] .badge{border:1px solid #fff;border-radius:2px;color:#fff}
/* ---- 4. 蓝紫渐变玻璃态（深蓝→亮紫）---- */
body[data-style="glass-blue"]{color-scheme:dark;--bg:#3b4ac4;--card:rgba(40,48,110,.62);--card2:rgba(40,48,110,.46);--line:rgba(200,195,255,.4);--fg:#f0efff;--dim:rgba(215,210,255,.72);--acc:#a78bfa}
body[data-style="glass-blue"]{background:linear-gradient(165deg,#1e3a8a 0%,#4338ca 32%,#7c3aed 66%,#a855f7 100%)}
body[data-style="glass-blue"] .card{background:rgba(40,48,110,.62);border:1px solid rgba(200,195,255,.32);border-radius:18px;box-shadow:0 12px 40px rgba(10,6,55,.55),inset 0 1px 0 rgba(235,235,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-style="glass-blue"] .card h3{color:#fff;text-shadow:0 1px 8px rgba(130,100,245,.55)}
body[data-style="glass-blue"] button{background:rgba(255,255,255,.16);border:1px solid rgba(225,220,255,.5);border-radius:12px;color:#f0efff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
body[data-style="glass-blue"] button:hover{background:rgba(255,255,255,.28)}
body[data-style="glass-blue"] button.primary{background:linear-gradient(135deg,#6d5cf0,#a855f7);border-color:rgba(235,230,255,.65);color:#fff;font-weight:700;box-shadow:0 4px 22px rgba(124,58,237,.5)}
body[data-style="glass-blue"] input,body[data-style="glass-blue"] select,body[data-style="glass-blue"] textarea{border:1px solid rgba(200,195,255,.34);border-radius:10px;background:rgba(26,30,80,.62);color:#f0efff}
body[data-style="glass-blue"] header{background:rgba(28,32,84,.64);border-bottom:1px solid rgba(200,195,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-style="glass-blue"] nav{background:rgba(24,28,76,.64);border-top:1px solid rgba(200,195,255,.26)}
body[data-style="glass-blue"] nav button.active{color:#fff;border-top-color:#a78bfa;font-weight:700;text-shadow:0 0 12px rgba(167,139,250,.95)}
body[data-style="glass-blue"] .charlist-item{border:1px solid rgba(200,195,255,.3);border-radius:14px;background:rgba(40,48,110,.58);box-shadow:inset 0 1px 0 rgba(235,235,255,.26)}
/* ---- 5. 中古金属电镀（80s-千禧镜面塑料）---- */
body[data-style="chrome80s"]{color-scheme:dark;--bg:#1e2229;--card:#262b34;--card2:#2c323c;--line:#4a5260;--fg:#dde3ee;--dim:#8a94a6;--acc:#9fb4d8}
body[data-style="chrome80s"]{background:radial-gradient(ellipse at 50% 0%,#333a46 0%,#1c2026 70%)}
body[data-style="chrome80s"] .card{background:linear-gradient(180deg,#333a46 0%,#262b34 45%,#232830 100%);border:1px solid #4a5260;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -12px 22px rgba(0,0,0,.32),0 6px 18px rgba(0,0,0,.5)}
body[data-style="chrome80s"] .card h3{color:#cfd8e8;text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 1px rgba(0,0,0,.6);letter-spacing:2px;font-weight:600}
body[data-style="chrome80s"] button{background:linear-gradient(180deg,#ffffff 0%,#eef2f8 18%,#aab4c4 45%,#6e7888 72%,#3a404c 88%,#2a2f38 100%);border:1px solid #5a6270;border-radius:12px;color:#10141c;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.45)}
body[data-style="chrome80s"] button:hover{filter:brightness(1.12)}
body[data-style="chrome80s"] button:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transform:translateY(1px)}
body[data-style="chrome80s"] button.primary{background:linear-gradient(180deg,#fff 0%,#dfe9ff 20%,#8fa8d8 48%,#4a6494 75%,#2c3a56 100%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
body[data-style="chrome80s"] input,body[data-style="chrome80s"] select,body[data-style="chrome80s"] textarea{border:1px solid #4a5260;border-radius:10px;background:linear-gradient(180deg,#1a1e24,#242a33);color:#dde3ee;box-shadow:inset 0 1px 4px rgba(0,0,0,.4)}
body[data-style="chrome80s"] header{background:linear-gradient(180deg,#3a414e,#232830);border-bottom:1px solid #5a6270;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
body[data-style="chrome80s"] nav{background:#20252c;border-top:1px solid #4a5260}
body[data-style="chrome80s"] nav button.active{color:#9fb4d8;border-top-color:#9fb4d8;text-shadow:0 0 6px rgba(159,180,216,.6)}
body[data-style="chrome80s"] .charlist-item{border:1px solid #4a5260;border-radius:12px;background:linear-gradient(180deg,#303642,#262b34)}
body[data-style="chrome80s"] .badge{background:linear-gradient(180deg,#fff,#aab4c4);color:#1a1e26;border-color:#fff;text-shadow:0 1px 0 rgba(255,255,255,.5);border-radius:8px}

/* ---- 6. 新拟物（浅灰软浮雕）---- */
body[data-style="neumorph"]{--bg:#e0e5ec;--card:#e0e5ec;--card2:#e8edf4;--line:#c8d0dc;--fg:#3a4250;--dim:#7a8494;--acc:#6d7fd8}
body[data-style="neumorph"]{background:#e0e5ec}
body[data-style="neumorph"] .card{border:none;border-radius:18px;background:#e0e5ec;box-shadow:9px 9px 18px #b8c2d0,-9px -9px 18px #ffffff}
body[data-style="neumorph"] .card h3{color:#3a4250;font-weight:600;letter-spacing:1px}
body[data-style="neumorph"] button{border:none;border-radius:14px;background:#e0e5ec;color:#3a4250;box-shadow:6px 6px 12px #b8c2d0,-6px -6px 12px #ffffff}
body[data-style="neumorph"] button:hover{color:#6d7fd8}
body[data-style="neumorph"] button:active{box-shadow:inset 5px 5px 10px #b8c2d0,inset -5px -5px 10px #ffffff}
body[data-style="neumorph"] button.primary{background:linear-gradient(135deg,#8a9ce8,#5a6cc8);color:#fff;box-shadow:6px 6px 12px #b8c2d0,-6px -6px 12px #ffffff}
body[data-style="neumorph"] input,body[data-style="neumorph"] select,body[data-style="neumorph"] textarea{border:none;border-radius:12px;background:#e0e5ec;color:#3a4250;box-shadow:inset 4px 4px 8px #b8c2d0,inset -4px -4px 8px #ffffff}
body[data-style="neumorph"] header{border:none;background:linear-gradient(180deg,#e8edf4,#dde2e9);border-bottom:1px solid #c8d0dc}
body[data-style="neumorph"] nav{border:none;background:#e0e5ec}
body[data-style="neumorph"] nav button.active{color:#5a6cc8;border-top:3px solid #6d7fd8;border-radius:12px 12px 0 0;background:#e6ebf2}
body[data-style="neumorph"] .charlist-item{border:none;border-radius:16px;background:#e0e5ec;box-shadow:6px 6px 12px #b8c2d0,-6px -6px 12px #ffffff}
body[data-style="neumorph"] .badge{border:none;background:#e0e5ec;color:#5a6cc8;box-shadow:3px 3px 6px #b8c2d0,-3px -3px 6px #ffffff}

/* ---- 7. 霓虹灯赛博朋克 ---- */
body[data-style="neon-cyber"]{color-scheme:dark;--bg:#0a0612;--card:#120a22;--card2:#160d2a;--line:#4a3a72;--fg:#8a97ff;--dim:#5a68b8;--acc:#39ff14}
body[data-style="neon-cyber"]{background:#0a0612}
body[data-style="neon-cyber"] .card{border:1px solid #4a3a72;border-radius:6px;background:#120a22;box-shadow:0 0 0 1px rgba(57,255,20,.06),0 4px 20px rgba(0,0,0,.5)}
body[data-style="neon-cyber"] .card h3{color:#39ff14;text-shadow:0 0 12px rgba(57,255,20,.75);letter-spacing:2px;font-weight:800;text-transform:uppercase}
body[data-style="neon-cyber"] .card h3::before{content:"▶ "}
body[data-style="neon-cyber"] button{background:#0a0612;border:1px solid #4a3a72;border-radius:4px;color:#b8c2ff;text-shadow:0 0 8px rgba(122,138,255,.4)}


body[data-style="neon-cyber"] button:hover{filter:brightness(1.15)}
body[data-style="neon-cyber"] button.primary{background:#ff2ec4;border:none;color:#12041c;font-weight:800;text-shadow:none;box-shadow:0 0 18px rgba(255,46,196,.6)}
body[data-style="neon-cyber"] input,body[data-style="neon-cyber"] select,body[data-style="neon-cyber"] textarea{border:1px solid #4a3a72;border-radius:4px;background:#160d2a;color:#fff;caret-color:#39ff14}
body[data-style="neon-cyber"] header{background:#0a0612;border-bottom:1px solid #4a3a72}
body[data-style="neon-cyber"] nav{background:#0a0612;border-top:1px solid #4a3a72}
body[data-style="neon-cyber"] nav button.active{color:#ff2ec4;border-top:2px solid #ff2ec4;text-shadow:0 0 10px rgba(255,46,196,.8)}
body[data-style="neon-cyber"] .charlist-item{border:1px solid #4a3a72;border-radius:4px;background:#120a22}
body[data-style="neon-cyber"] button.neon-w{background:#fff;border-color:#fff;color:#0a0612;text-shadow:none}
body[data-style="neon-cyber"] button.neon-w:hover{background:#fff;border-color:#ff2ec4;color:#0a0612}
body[data-style="neon-cyber"] .badge{border-color:#39ff14;color:#39ff14;text-shadow:0 0 8px rgba(57,255,20,.8)}
/* ---- 8. 布鲁塔主义 ---- */
body[data-style="brutalist"]{--bg:#f2efe9;--card:#fff;--card2:#e8e4dc;--line:#000;--fg:#111;--dim:#555;--acc:#c8102e}
body[data-style="brutalist"]{background:#f2efe9}
body[data-style="brutalist"] .card{border:3px solid #000;border-radius:0;box-shadow:6px 6px 0 #000;background:#fff}
body[data-style="brutalist"] .card h3{color:#000;font-weight:900;text-transform:uppercase;letter-spacing:2px}
body[data-style="brutalist"] .card h3::before{content:""}
body[data-style="brutalist"] button{border:3px solid #000;border-radius:0;background:#fff;color:#111;font-weight:900;text-transform:uppercase}
body[data-style="brutalist"] button:hover{box-shadow:2px 2px 0 #000;transform:translate(2px,2px)}
body[data-style="brutalist"] button.primary{background:#c8102e;color:#fff}
body[data-style="brutalist"] input,body[data-style="brutalist"] select,body[data-style="brutalist"] textarea{border:2px solid #000;border-radius:0;background:#fff;color:#111}
body[data-style="brutalist"] header{border-bottom:4px solid #000;background:#fff}
body[data-style="brutalist"] nav{border-top:3px solid #000;background:#fff}
body[data-style="brutalist"] nav button.active{border-top:6px solid #c8102e;color:#000;font-weight:900}
body[data-style="brutalist"] .charlist-item{border:3px solid #000;border-radius:0;box-shadow:4px 4px 0 #000;background:#fff}
body[data-style="brutalist"] .badge{border:2px solid #000;border-radius:0}
body[data-style="brutalist"] .fold-sec h3 .tri{border-radius:0}

/* ---- 9. Y2K 千禧年（粉主蓝辅）---- */
body[data-style="y2k"]{color-scheme:dark;--bg:#3a1a3a;--card:#452050;--card2:#4d2458;--line:#8a5a9a;--fg:#fdf0ff;--dim:#c0a0d0;--acc:#ff8ad0}
body[data-style="y2k"]{background:radial-gradient(ellipse at 18% 8%,rgba(255,110,199,.34),transparent 55%),radial-gradient(ellipse at 82% 15%,rgba(125,211,252,.18),transparent 48%),linear-gradient(135deg,#331a3a 0%,#4a2050 55%,#331a3a 100%)}
body[data-style="y2k"] .card{border:1px solid #8a5a9a;border-radius:16px;background:linear-gradient(160deg,#4d2458,#3a1a44);box-shadow:0 0 30px rgba(255,110,199,.28),inset 0 1px 0 rgba(255,255,255,.16)}
body[data-style="y2k"] .card h3{background:linear-gradient(90deg,#ff8ad0 0%,#ffb8e0 22%,#ff6ec7 45%,#7dd3fc 62%,#ff8ad0 85%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:1px}
body[data-style="y2k"] .card h3::before{content:"✦ "}
body[data-style="y2k"] button{background:linear-gradient(180deg,#fdf0ff 0%,#e8c8f0 40%,#c090d8 100%);border:1px solid #d8b0e8;border-radius:10px;color:#3a1a4a;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(160,60,180,.45),inset 0 1px 0 #fff}
body[data-style="y2k"] button.primary{background:linear-gradient(90deg,#ff8ad0 0%,#ff6ec7 35%,#7dd3fc 60%,#ff8ad0 100%);background-size:200% 100%;color:#fff;border:none;text-shadow:0 1px 2px rgba(160,40,120,.55);box-shadow:0 0 20px rgba(255,110,199,.55)}
body[data-style="y2k"] input,body[data-style="y2k"] select,body[data-style="y2k"] textarea{border:1px solid #8a5a9a;border-radius:8px;background:#2a1436;color:#fdf0ff}
body[data-style="y2k"] header{background:linear-gradient(90deg,#3a1a44,#5a2858,#3a1a44);border-bottom:1px solid #a86ac0;box-shadow:0 2px 18px rgba(255,110,199,.35)}
body[data-style="y2k"] nav{background:#331a40;border-top:1px solid #8a5a9a}
body[data-style="y2k"] nav button.active{color:#ff8ad0;text-shadow:0 0 12px rgba(255,110,199,.95)}
body[data-style="y2k"] .charlist-item{border:1px solid #8a5a9a;border-radius:14px;background:linear-gradient(160deg,#4d2458,#3a1a44)}
body[data-style="y2k"] .badge{background:linear-gradient(90deg,#ff8ad0,#7dd3fc);color:#fff;border:none}
/* ---- 10. 粉红糖果（立体糖果·向内三角糖纸）---- */
body[data-style="candy"]{--bg:#ffe4ef;--card:#fff0f6;--card2:#ffe0ec;--line:#ffb8d4;--fg:#7a3350;--dim:#c07a9a;--acc:#ff5fa8}
body[data-style="candy"]{background:linear-gradient(180deg,#ffe4ef,#ffd3e6),radial-gradient(rgba(255,255,255,.55) 2px,transparent 2px);background-size:auto,26px 26px;background-color:#ffe4ef}
body[data-style="candy"] .card{border:2px solid #ffc4dc;border-radius:22px;background:#fff0f6;box-shadow:0 6px 20px rgba(255,120,180,.28),inset 0 0 0 4px #fff,inset 0 0 0 5px #ffd6e8}
body[data-style="candy"] .card h3{color:#ff4f9a;font-weight:800;letter-spacing:1px}
body[data-style="candy"] .card h3::before{content:"🍬 "}
body[data-style="candy"] button{background:linear-gradient(180deg,#ffb8d8 0%,#ff8ab8 45%,#ff6ba3 100%);border:2px solid #fff;border-radius:16px;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(170,40,100,.45);box-shadow:0 4px 10px rgba(255,110,180,.45),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 10px rgba(200,50,110,.35);margin:3px 8px;position:relative}
body[data-style="candy"] button::before,body[data-style="candy"] button::after{content:"";position:absolute;top:50%;width:0;height:0;border:9px solid transparent;margin-top:-9px;filter:drop-shadow(0 2px 3px rgba(255,110,180,.35))}
body[data-style="candy"] button::before{left:-7px;border-left-color:#ff9cc6;border-right:0}
body[data-style="candy"] button::after{right:-7px;border-right-color:#ff9cc6;border-left:0}
body[data-style="candy"] button:hover{filter:brightness(1.08)}
body[data-style="candy"] button.sm,body[data-style="candy"] .modal button.sm{background:repeating-linear-gradient(45deg,#ff9cc6 0px,#ff9cc6 7px,#fff 7px,#fff 14px);border-radius:999px;width:auto;min-width:46px;height:auto;min-height:38px;padding:8px 20px;color:#8a2f55;border:2px solid #fff;box-shadow:0 4px 12px rgba(255,120,180,.45),inset 0 0 0 2px #ffc4dc;margin:3px 10px;position:relative}


body[data-style="candy"] button.primary{background:linear-gradient(180deg,#ff8ac0 0%,#ff4f9a 55%,#e8307f 100%);color:#fff;border-color:#fff;text-shadow:0 1px 3px rgba(150,20,80,.5);box-shadow:0 5px 14px rgba(255,60,140,.5),inset 0 2px 0 rgba(255,255,255,.8),inset 0 -5px 10px rgba(180,20,90,.4)}
body[data-style="candy"] input,body[data-style="candy"] select,body[data-style="candy"] textarea{border:2px solid #ffc4dc;border-radius:16px;background:#fff;color:#7a3350}
body[data-style="candy"] header{background:linear-gradient(180deg,#ffeef6,#ffe0ec);border-bottom:3px solid #ff9cc6}
body[data-style="candy"] nav{background:#ffe0ec;border-top:2px solid #ffc4dc}
body[data-style="candy"] nav button.active{color:#ff2f8e;border-top:3px solid #ff5fa8;font-weight:800}
body[data-style="candy"] .charlist-item{border:2px solid #ffc4dc;border-radius:18px;background:#fff0f6;box-shadow:0 4px 14px rgba(255,120,180,.22)}
body[data-style="candy"] .badge{border-radius:14px;border-color:#ff9cc6;color:#ff2f8e}
/* ---- 11. 暗黑奢华（纯黑·暗金丝绒）---- */
body[data-style="dark-lux"]{color-scheme:dark;--bg:#000;--card:#0d0a08;--card2:#14100c;--line:#5a4a30;--fg:#ece2d0;--dim:#9a8a68;--acc:#d4af37}
body[data-style="dark-lux"]{background:#000}
body[data-style="dark-lux"] .card{background:linear-gradient(rgba(13,10,8,.96),rgba(13,10,8,.96)),url("assets/textures/Fabric061_1K-JPG/Fabric061_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #7a6638;border-radius:8px;box-shadow:0 0 0 1px rgba(212,175,55,.22),0 10px 34px rgba(0,0,0,.85),inset 0 0 46px rgba(212,175,55,.04)}
body[data-style="dark-lux"] .card h3{font-family:Cinzel,Georgia,serif;color:#d4af37;letter-spacing:3px;font-size:16px;text-shadow:0 0 14px rgba(212,175,55,.3)}
body[data-style="dark-lux"] .card h3::after{content:" ✦";color:#7a6638}
body[data-style="dark-lux"] button{border:1px solid #7a6638;border-radius:5px;background:linear-gradient(180deg,#241c12,#100c08);color:#d8c8a0;box-shadow:inset 0 1px 0 rgba(212,175,55,.12),0 2px 6px rgba(0,0,0,.6)}
body[data-style="dark-lux"] button:hover{border-color:#d4af37;color:#e8c860;box-shadow:0 0 12px rgba(212,175,55,.25)}
body[data-style="dark-lux"] button.primary{background:linear-gradient(180deg,#e8c96a,#b8912c 60%,#8a6a20);color:#171204;font-weight:700;border:none;text-shadow:0 1px 0 rgba(255,255,255,.35)}
body[data-style="dark-lux"] input,body[data-style="dark-lux"] select,body[data-style="dark-lux"] textarea{border:1px solid #5a4a30;border-radius:4px;background:#080604;color:#ece2d0}
body[data-style="dark-lux"] header{background:linear-gradient(180deg,#14100c,#0a0806);border-bottom:2px solid #7a6638;box-shadow:0 1px 10px rgba(0,0,0,.7)}
body[data-style="dark-lux"] nav{background:#080604;border-top:1px solid #5a4a30}
body[data-style="dark-lux"] nav button.active{color:#d4af37;border-top-color:#d4af37;text-shadow:0 0 8px rgba(212,175,55,.5)}
body[data-style="dark-lux"] .charlist-item{border:1px solid #7a6638;border-radius:6px;background:linear-gradient(rgba(18,13,9,.96),rgba(18,13,9,.96)),url("assets/textures/Fabric061_1K-JPG/Fabric061_1K-JPG_Color.jpg");background-size:auto,cover}
body[data-style="dark-lux"] .badge{color:#d4af37;border-color:#7a6638}
/* ---- 12. Apple HIG ---- */
body[data-style="apple-hig"]{--bg:#e8e8ed;--card:rgba(255,255,255,.82);--card2:rgba(240,240,245,.7);--line:rgba(0,0,0,.1);--fg:#1d1d1f;--dim:#86868b;--acc:#0071e3}
body[data-style="apple-hig"]{background:#e8e8ed}
body[data-style="apple-hig"] .card{background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.07);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.1);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8)}
body[data-style="apple-hig"] .card h3{color:#1d1d1f;font-weight:600;letter-spacing:-.2px}
body[data-style="apple-hig"] button{border:none;border-radius:980px;background:rgba(120,120,128,.14);color:#0071e3;font-weight:500;padding:5px 16px}
body[data-style="apple-hig"] button:hover{background:rgba(120,120,128,.22)}
body[data-style="apple-hig"] button.primary{background:#0071e3;color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(0,113,227,.35)}
body[data-style="apple-hig"] input,body[data-style="apple-hig"] select,body[data-style="apple-hig"] textarea{border:1px solid rgba(0,0,0,.13);border-radius:10px;background:rgba(255,255,255,.92);color:#1d1d1f;font-size:13px}
body[data-style="apple-hig"] header{background:rgba(232,232,237,.75);border-bottom:1px solid rgba(0,0,0,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body[data-style="apple-hig"] nav{background:rgba(232,232,237,.82);border-top:1px solid rgba(0,0,0,.07)}
body[data-style="apple-hig"] nav button.active{color:#0071e3;border-top-color:#0071e3;font-weight:600}
body[data-style="apple-hig"] .charlist-item{border-radius:16px;border:1px solid rgba(0,0,0,.07);background:rgba(255,255,255,.78);box-shadow:0 4px 16px rgba(0,0,0,.06)}
body[data-style="apple-hig"] .badge{border-radius:980px;border-color:rgba(0,0,0,.1)}

/* ---- 13. DnD 奇幻（羊皮纸·皮革·纹路）---- */
body[data-style="dnd"]{color-scheme:dark;--bg:#4a3220;--card:rgba(238,214,170,.95);--card2:rgba(228,200,152,.92);--line:#7a5a30;--fg:#3a2415;--dim:#8a6a42;--acc:#c33c1e}
body[data-style="dnd"]{background:linear-gradient(rgba(40,22,10,.6),rgba(40,22,10,.72)),url("assets/textures/Wood095_1K-JPG/Wood095_1K-JPG_Color.jpg");background-size:auto,cover}
body[data-style="dnd"] .card{background:linear-gradient(rgba(238,214,170,.95),rgba(238,214,170,.95)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #5c3a1c;border-radius:6px;box-shadow:0 0 0 3px rgba(60,30,8,.35),0 0 0 4px rgba(200,160,100,.25),0 6px 18px rgba(0,0,0,.5)}
body[data-style="dnd"] .card h3{font-family:UnifrakturMaguntia,Cinzel,serif;color:#5c2e12;font-size:22px;letter-spacing:1px;border-bottom:2px double #8a5a2c;padding-bottom:3px}
body[data-style="dnd"] .card h3::before{content:"⚔ "}
body[data-style="dnd"] button{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px),linear-gradient(180deg,#8c4a24,#5c2e12);border:2px solid #3a1c08;border-radius:5px;color:#f0ddc0;font-weight:700;box-shadow:inset 0 0 0 2px rgba(255,200,140,.22),inset 0 1px 0 rgba(255,200,140,.28),0 3px 8px rgba(0,0,0,.5);position:relative}
body[data-style="dnd"] button::before{content:"";position:absolute;top:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:linear-gradient(180deg,#d8b878,#8a6a3a);box-shadow:0 calc(100% - 3px) 0 #8a6a3a}
body[data-style="dnd"] button:hover{filter:brightness(1.15)}
body[data-style="dnd"] button.primary{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),linear-gradient(180deg,#c33c1e,#7a1e0c);color:#ffe8d0;border-color:#3a1008;box-shadow:inset 0 0 0 2px rgba(255,200,140,.25),0 3px 8px rgba(0,0,0,.5)}
body[data-style="dnd"] input,body[data-style="dnd"] select,body[data-style="dnd"] textarea{background:linear-gradient(rgba(248,230,190,.97),rgba(248,230,190,.97)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #8a6a42;border-radius:4px;color:#3a2415}
body[data-style="dnd"] header{background:linear-gradient(180deg,#5c3a1c,#452a12);border-bottom:3px solid #c33c1e;box-shadow:0 2px 10px rgba(0,0,0,.5)}
body[data-style="dnd"] nav{background:#4a2c14;border-top:2px solid #8a6a42}
body[data-style="dnd"] nav button.active{color:#f0c080;border-top-color:#f0c080;font-weight:700}
body[data-style="dnd"] .charlist-item{background:linear-gradient(rgba(238,214,170,.9),rgba(238,214,170,.9)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #5c3a1c;border-radius:5px;box-shadow:0 0 0 2px rgba(60,30,8,.3)}
body[data-style="dnd"] .badge{border-color:#5c2e12;color:#5c2e12}

/* ---- 14. CoC 克苏鲁（羊皮纸·粗糙质感）---- */
body[data-style="coc"]{color-scheme:dark;--bg:#3a3226;--card:rgba(226,208,168,.96);--card2:rgba(214,194,152,.93);--line:#8a6a3a;--fg:#2a2115;--dim:#7a6a48;--acc:#6a4a28}
body[data-style="coc"]{background:linear-gradient(rgba(44,34,18,.6),rgba(44,34,18,.72)),url("assets/textures/Wood094_1K-JPG/Wood094_1K-JPG_Color.jpg");background-size:auto,cover}
body[data-style="coc"] .card{background:linear-gradient(rgba(226,208,168,.96),rgba(226,208,168,.96)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #8a6a3a;border-radius:4px;box-shadow:0 0 0 2px rgba(60,40,16,.3),0 8px 24px rgba(0,0,0,.55);position:relative}
body[data-style="coc"] .card h3{font-family:SpecialElite,Courier,monospace;color:#3a2a12;letter-spacing:2px;border-bottom:2px solid #6a4a28;padding-bottom:3px}
body[data-style="coc"] .card h3::before{content:"🕯 "}
body[data-style="coc"] .card h3::after{content:"◉";color:#8a1c10;font-size:13px;margin-left:6px}
body[data-style="coc"] .card::after{content:"";position:absolute;left:5px;right:5px;top:5px;bottom:5px;pointer-events:none;box-shadow:inset 0 0 20px rgba(90,60,20,.16);border-radius:2px}
body[data-style="coc"] button{background:repeating-linear-gradient(0deg,rgba(90,60,20,.09) 0 1.5px,transparent 1.5px 4px),linear-gradient(rgba(222,196,140,.95),rgba(196,164,108,.95)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,auto,cover;border:1px solid #6a4a28;border-radius:3px;color:#3a2a12;font-family:SpecialElite,Courier,monospace;font-weight:700;box-shadow:inset 0 0 0 2px rgba(255,240,210,.35),inset 0 0 10px rgba(90,60,20,.3),0 3px 7px rgba(0,0,0,.4)}
body[data-style="coc"] button:hover{filter:brightness(1.06)}
body[data-style="coc"] button.primary{background:repeating-linear-gradient(0deg,rgba(60,40,16,.12) 0 1.5px,transparent 1.5px 4px),linear-gradient(rgba(180,148,92,.95),rgba(150,118,66,.95)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,auto,cover;color:#241a0c;border-color:#4a3018;box-shadow:inset 0 0 0 2px rgba(255,230,190,.3),0 3px 7px rgba(0,0,0,.45)}
body[data-style="coc"] input,body[data-style="coc"] select,body[data-style="coc"] textarea{border:1px solid #8a7a52;border-radius:2px;background:linear-gradient(rgba(244,232,200,.97),rgba(244,232,200,.97)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;color:#2a2115;font-family:SpecialElite,Courier,monospace}
body[data-style="coc"] header{background:linear-gradient(180deg,#4a3c26,#382c18);border-bottom:3px solid #8a6a3a}
body[data-style="coc"] nav{background:#3a2e1a;border-top:1px solid #8a7a52}
body[data-style="coc"] nav button.active{color:#d8b878;border-top-color:#d8b878}
body[data-style="coc"] .charlist-item{background:linear-gradient(rgba(226,208,168,.93),rgba(226,208,168,.93)),url("assets/textures/Paper006_1K-JPG/Paper006_1K-JPG_Color.jpg");background-size:auto,cover;border:1px solid #8a6a3a;border-radius:3px;box-shadow:inset 0 0 14px rgba(90,60,20,.12)}
body[data-style="coc"] .badge{color:#6a4a28;border-color:#8a6a3a}
/* ---- 15. 液态玻璃极简主义（白底·暖点缀·液态）---- */
body[data-style="glass-min"]{color-scheme:light;--bg:#f6f4f1;--card:rgba(255,255,255,.55);--card2:rgba(255,255,255,.4);--line:rgba(180,150,130,.35);--fg:#2a2220;--dim:#8a7a70;--acc:#c96f4a}
body[data-style="glass-min"]{background:radial-gradient(ellipse at 12% 6%,rgba(220,160,120,.28),transparent 55%),radial-gradient(ellipse at 88% 90%,rgba(200,170,140,.2),transparent 50%),linear-gradient(0deg,transparent 24%,rgba(255,255,255,.5) 25%,rgba(255,255,255,.5) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.5) 75%,rgba(255,255,255,.5) 76%,transparent 77%),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.5) 25%,rgba(255,255,255,.5) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.5) 75%,rgba(255,255,255,.5) 76%,transparent 77%),linear-gradient(180deg,#faf8f5,#f0ede8);background-size:auto,auto,52px 52px,52px 52px,auto;background-color:#f6f4f1}
body[data-style="glass-min"] .card{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);border-radius:18px;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 2px -2px 2px -1px rgba(255,255,255,1),inset -2px 2px 2px -1px rgba(255,255,255,1),inset 6px -6px 2px -6px rgba(255,255,255,.7),inset -6px 6px 2px -6px rgba(255,255,255,.7),inset 0 0 3px rgba(120,90,70,.1),0 14px 40px rgba(140,110,90,.16);position:relative}
body[data-style="glass-min"] .card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(120,90,70,.12);border-radius:13px;filter:blur(5px);pointer-events:none}
body[data-style="glass-min"] .card::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(45deg,rgba(255,255,255,.9) 0%,transparent 24%,transparent 76%,rgba(255,255,255,.65) 100%);filter:blur(1.5px)}
body[data-style="glass-min"] .card h3{color:#3a2a24;font-weight:700;letter-spacing:1px;font-size:15px;position:relative;z-index:1}
body[data-style="glass-min"] button{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.95);border-radius:14px;color:#2a2220;font-weight:600;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);box-shadow:inset 2px -2px 2px -1px rgba(255,255,255,1),inset -2px 2px 2px -1px rgba(255,255,255,1),inset 0 0 2px rgba(120,90,70,.1),0 5px 14px rgba(140,110,90,.18);position:relative;overflow:hidden}
body[data-style="glass-min"] button::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(45deg,rgba(255,255,255,.85) 0%,transparent 34%)}
body[data-style="glass-min"] button:hover{background:rgba(255,255,255,.9)}
body[data-style="glass-min"] button.primary{background:linear-gradient(135deg,#e08a62,#c96f4a);border-color:rgba(255,255,255,.95);color:#fff;font-weight:700;box-shadow:inset 2px -2px 2px -1px rgba(255,255,255,.8),inset -2px 2px 2px -1px rgba(255,255,255,.8),0 7px 22px rgba(201,111,74,.35)}
body[data-style="glass-min"] input,body[data-style="glass-min"] select,body[data-style="glass-min"] textarea{border:1px solid rgba(255,255,255,.9);border-radius:12px;background:rgba(255,255,255,.5);color:#2a2220;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 3px rgba(120,90,70,.08)}
body[data-style="glass-min"] header{background:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
body[data-style="glass-min"] nav{background:rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-style="glass-min"] nav button.active{color:#b85a38;border-top-color:#c96f4a;font-weight:700}
body[data-style="glass-min"] .charlist-item{border:1px solid rgba(255,255,255,.85);border-radius:16px;background:rgba(255,255,255,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 2px -2px 2px -1px rgba(255,255,255,.9),inset -2px 2px 2px -1px rgba(255,255,255,.9)}
body[data-style="glass-min"] .badge{border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.55);color:#b85a38}
/* ---- 16. 水墨屏（宣纸·墨韵·印章）---- */
body[data-style="ink"]{font-family:"KaiTi","STKaiti","楷体","SimSun","宋体",serif;--bg:#f7f4ec;--card:#faf8f1;--card2:#f2eee3;--line:#2f2f2f;--fg:#1c1c1c;--dim:#6a6a6a;--acc:#2f2f2f}
body[data-style="ink"]{background:radial-gradient(ellipse at 18% 12%,rgba(60,60,60,.05),transparent 45%),#f7f4ec}
body[data-style="ink"] .card{border:1px solid rgba(40,40,40,.55);border-radius:0;background:#faf8f1;box-shadow:0 0 30px rgba(60,60,60,.06)}
body[data-style="ink"] .card h3{font-family:"KaiTi","STKaiti","楷体",Georgia,serif;color:#1c1c1c;letter-spacing:6px;font-weight:400;font-size:17px;border-bottom:2px solid #1c1c1c;padding-bottom:4px}
body[data-style="ink"] .card h3::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid #b03a2e;border-radius:50%;margin-right:6px;vertical-align:middle}
body[data-style="ink"] button{border:1px solid #2f2f2f;border-radius:0;background:transparent;color:#1c1c1c;font-family:"KaiTi","STKaiti","楷体",Georgia,serif;letter-spacing:3px}
body[data-style="ink"] button:hover{background:#2f2f2f;color:#f7f4ec}
body[data-style="ink"] button.primary{background:#1c1c1c;color:#f7f4ec;border:none;font-weight:400}
body[data-style="ink"] button.primary:hover{background:#3a3a3a}
body[data-style="ink"] input,body[data-style="ink"] select,body[data-style="ink"] textarea{border:1px solid rgba(40,40,40,.5);border-radius:0;background:#fdfcf7;color:#1c1c1c;font-family:"KaiTi","STKaiti","楷体","SimSun","宋体",serif}
body[data-style="ink"] header{background:linear-gradient(180deg,#faf8f1,#f2eee3);border-bottom:2px solid #1c1c1c}
body[data-style="ink"] nav{background:#f7f4ec;border-top:1px solid #2f2f2f}
body[data-style="ink"] nav button.active{color:#1c1c1c;border-top:3px solid #1c1c1c;font-weight:700;letter-spacing:4px}
body[data-style="ink"] .charlist-item{border:1px solid rgba(40,40,40,.45);border-radius:0;background:#faf8f1}
body[data-style="ink"] .badge{border:1px solid #2f2f2f;border-radius:0;color:#b03a2e}
body[data-style="ink"] .fold-sec h3 .tri{border-radius:0}

/* ---- 17. 莱茵生命（绿色极简标题·实验室白）---- */
body[data-style="rhine"]{--bg:#f2f5f7;--card:#fff;--card2:#f4f7f9;--line:#d8dde3;--fg:#14161a;--dim:#7a828c;--acc:#00e676}
body[data-style="rhine"]{background:#f2f5f7}
body[data-style="rhine"] .card{border:1px solid #d8dde3;border-radius:4px;background:#fff;border-top:3px solid #00e676;box-shadow:0 2px 10px rgba(0,0,0,.05)}
body[data-style="rhine"] .card h3{color:#00b862;font-weight:800;letter-spacing:2px;font-size:15px;text-transform:uppercase}
body[data-style="rhine"] button{border:1px solid #14161a;border-radius:3px;background:#fff;color:#14161a;font-weight:700;letter-spacing:1px}
body[data-style="rhine"] button:hover{background:#00e676;border-color:#00e676;color:#fff}
body[data-style="rhine"] button.primary{background:#00e676;color:#04140c;border:none;font-weight:800;box-shadow:0 2px 8px rgba(0,230,118,.35)}
body[data-style="rhine"] input,body[data-style="rhine"] select,body[data-style="rhine"] textarea{border:1px solid #d8dde3;border-radius:3px;background:#fff;color:#14161a}
body[data-style="rhine"] input:focus,body[data-style="rhine"] select:focus,body[data-style="rhine"] textarea:focus{border-color:#00e676;box-shadow:0 0 0 2px rgba(0,230,118,.15)}
body[data-style="rhine"] header{border-bottom:2px solid #00e676;background:#fff}
body[data-style="rhine"] header::after{content:"";display:block;height:4px;background:linear-gradient(90deg,#00e676 0 30%,#14161a 30% 55%,#00e676 55% 100%)}
body[data-style="rhine"] nav{background:#fff;border-top:1px solid #d8dde3}
body[data-style="rhine"] nav button.active{color:#00b862;border-top-color:#00e676;font-weight:800}
body[data-style="rhine"] .charlist-item{border:1px solid #d8dde3;border-radius:4px;background:#fff;border-left:3px solid #00e676}
body[data-style="rhine"] .badge{border-color:#00e676;color:#00b862;border-radius:2px}
/* ---- 18. 死亡搁浅悬浮（辅助色联动）---- */
body[data-style="ds-floating"]{color-scheme:dark;--bg:#0e0f13;--card:rgba(22,24,30,.6);--card2:rgba(22,24,30,.45);--line:rgba(255,255,255,.12);--fg:#e8eaee;--dim:#8a90a0;--acc:var(--th-acc,#7fd4c1)}
body[data-style="ds-floating"]{background:radial-gradient(ellipse at 50% 100%,#1a1d24 0%,#0c0d10 70%)}
body[data-style="ds-floating"] .card{background:rgba(22,24,30,.6);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(127,212,193,.18),0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body[data-style="ds-floating"] .card h3{font-weight:300;letter-spacing:3px;color:var(--acc);text-transform:uppercase;font-size:15px;text-shadow:0 0 14px color-mix(in srgb,var(--acc) 40%,transparent)}
body[data-style="ds-floating"] button{border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06);color:#e8eaee;font-weight:300;letter-spacing:1px}
body[data-style="ds-floating"] button:hover{border-color:var(--acc);color:var(--acc);box-shadow:0 0 16px color-mix(in srgb,var(--acc) 35%,transparent)}
body[data-style="ds-floating"] button.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 65%,#1a1d24),color-mix(in srgb,var(--acc) 30%,#1a1d24));color:#fff;border:none}
body[data-style="ds-floating"] input,body[data-style="ds-floating"] select,body[data-style="ds-floating"] textarea{border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.05);color:#e8eaee}
body[data-style="ds-floating"] header{background:rgba(14,15,19,.5);border-bottom:1px solid color-mix(in srgb,var(--acc) 20%,transparent)}
body[data-style="ds-floating"] nav{background:rgba(14,15,19,.6);border-top:1px solid rgba(255,255,255,.08)}
body[data-style="ds-floating"] nav button.active{color:var(--acc);border-top-color:var(--acc)}
body[data-style="ds-floating"] .charlist-item{border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 18%,transparent)}

/* ---- 19. 神圣巴洛克（厚金边·顶部卷草）---- */
body[data-style="baroque"]{--bg:#1a0f14;--card:#241419;--card2:#2c181e;--line:#8a5a3a;--fg:#f0dcc8;--dim:#b08a72;--acc:#e0a84e}
body[data-style="baroque"]{background:radial-gradient(ellipse at 50% 0%,#331a24 0%,#1a0f14 65%)}
body[data-style="baroque"] .card{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%2726%27%20viewBox%3D%270%200%20140%2026%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e8c060%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%2013%20C26%203%2056%203%2070%2013%20C84%2023%20114%2023%20140%2013%27%2F%3E%3Cpath%20d%3D%27M33%2011%20a4%204%200%200%201%204%20-4%20a5.5%205.5%200%200%201%205.5%205.5%20a7%207%200%200%201%20-7%207%20a8.5%208.5%200%200%201%20-8.5%20-8.5%27%2F%3E%3Cpath%20d%3D%27M107%2015%20a4%204%200%200%201%20-4%204%20a5.5%205.5%200%200%201%20-5.5%20-5.5%20a7%207%200%200%201%207%20-7%20a8.5%208.5%200%200%201%208.5%208.5%27%2F%3E%3Cpath%20d%3D%27M70%2013%20a3%203%200%200%201%203%20-3%20a4%204%200%200%201%204%204%20a5%205%200%200%201%20-5%205%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23e8c060%27%3E%3Cpath%20d%3D%27M10%2013%20C10%207%2016%205%2018%2011%20C17%2015%2011%2016%2010%2013%20Z%27%2F%3E%3Cpath%20d%3D%27M130%2013%20C130%207%20124%205%20122%2011%20C123%2015%20129%2016%20130%2013%20Z%27%2F%3E%3Cpath%20d%3D%27M50%2019%20C52%2015%2056%2015%2058%2018%20C57%2022%2051%2022%2050%2019%20Z%27%2F%3E%3Cpath%20d%3D%27M90%2019%20C88%2015%2084%2015%2082%2018%20C83%2022%2089%2022%2090%2019%20Z%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2713%27%20r%3D%271.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x top,linear-gradient(180deg,#2a171d,#201216);background-size:auto 20px,auto;border:3px solid #c8904a;border-radius:10px;box-shadow:0 0 0 1px #8a5a3a,0 10px 34px rgba(0,0,0,.65);padding-top:26px}
body[data-style="baroque"] .card h3{font-family:Cinzel,Georgia,serif;color:#e8c060;letter-spacing:4px;font-size:16px;text-align:center;text-shadow:0 0 12px rgba(224,168,78,.35);padding-bottom:8px;border-bottom:1px solid rgba(200,144,74,.4)}
body[data-style="baroque"] button{border:2px solid #c8904a;border-radius:8px;background:linear-gradient(180deg,#8a5a3a,#3a2228);color:#f0dcc8;font-weight:600;padding:8px 16px;box-shadow:inset 0 0 0 1px #8a5a3a,0 2px 8px rgba(0,0,0,.5)}
body[data-style="baroque"] button:hover{filter:brightness(1.15)}
body[data-style="baroque"] button.primary{background:linear-gradient(180deg,#f0c060,#b8803a);color:#24120a;border-color:#e8c890;font-weight:700;text-shadow:0 1px 0 rgba(255,240,200,.5)}
body[data-style="baroque"] input,body[data-style="baroque"] select,body[data-style="baroque"] textarea{border:2px solid #c8904a;border-radius:6px;background:#1c1014;color:#f0dcc8;box-shadow:inset 0 0 0 1px #8a5a3a}
body[data-style="baroque"] header{background:linear-gradient(180deg,#2e1a22,#201216);border-bottom:3px solid #c8904a;box-shadow:0 1px 12px rgba(224,168,78,.15)}
body[data-style="baroque"] nav{background:#1f1216;border-top:3px solid #c8904a}
body[data-style="baroque"] nav button.active{color:#e8c060;border-top:2px solid #e8c060}
body[data-style="baroque"] .charlist-item{border:2px solid #c8904a;border-radius:8px;background:linear-gradient(180deg,#2a181e,#221418);box-shadow:0 0 0 1px #8a5a3a}
body[data-style="baroque"] .badge{border:2px solid #c8904a;color:#e8c060;border-radius:6px}
/* ---- 20. Dark Aero（生化培养罐）---- */
body[data-style="dark-aero"]{color-scheme:dark;--bg:#0a1410;--card:rgba(14,26,20,.72);--card2:rgba(14,26,20,.6);--line:rgba(80,220,150,.3);--fg:#d8f0e4;--dim:#6a9a84;--acc:#3dffc0}
body[data-style="dark-aero"]{background:radial-gradient(circle at 12% 15%,rgba(61,255,192,.08),transparent 40%),radial-gradient(circle at 88% 30%,rgba(61,255,192,.05),transparent 45%),radial-gradient(rgba(61,255,192,.18) 1.2px,transparent 2.4px) 0 0/44px 44px,linear-gradient(180deg,#0d1a14,#07100b)}
body[data-style="dark-aero"] .card{background:linear-gradient(180deg,rgba(20,38,30,.75),rgba(12,22,17,.7));border:1px solid rgba(80,220,150,.3);border-radius:16px;box-shadow:inset 0 1px 0 rgba(140,255,200,.22),inset 0 -18px 40px rgba(61,255,192,.06),0 0 28px rgba(61,255,192,.08),0 10px 36px rgba(0,0,0,.55)}
body[data-style="dark-aero"] .card h3{color:#7dffd0;text-shadow:0 0 12px rgba(61,255,192,.5);letter-spacing:3px;font-weight:500}
body[data-style="dark-aero"] .card h3::before{content:"◉ "}
body[data-style="dark-aero"] button{background:linear-gradient(180deg,#122a20 0%,#0a1a12 55%,#08140e 100%);border:1px solid rgba(80,220,150,.45);border-radius:10px;color:#bfffe4;box-shadow:inset 0 1px 0 rgba(140,255,200,.25),0 0 12px rgba(61,255,192,.15)}
body[data-style="dark-aero"] button:hover{border-color:#3dffc0;color:#3dffc0;box-shadow:0 0 16px rgba(61,255,192,.4)}
body[data-style="dark-aero"] button.primary{background:linear-gradient(180deg,#2affa0,#0f9d5c);color:#02120a;border:none;font-weight:700;box-shadow:0 0 20px rgba(61,255,192,.45)}
body[data-style="dark-aero"] input,body[data-style="dark-aero"] select,body[data-style="dark-aero"] textarea{border:1px solid rgba(80,220,150,.25);border-radius:8px;background:rgba(8,16,12,.75);color:#d8f0e4}
body[data-style="dark-aero"] header{background:linear-gradient(180deg,#0f2018,#0a1410);border-bottom:2px solid rgba(61,255,192,.5);box-shadow:0 1px 14px rgba(61,255,192,.2)}
body[data-style="dark-aero"] nav{background:#09130e;border-top:1px solid rgba(80,220,150,.2)}
body[data-style="dark-aero"] nav button.active{color:#3dffc0;border-top-color:#3dffc0;text-shadow:0 0 10px rgba(61,255,192,.8)}
body[data-style="dark-aero"] .charlist-item{border-radius:14px;border:1px solid rgba(80,220,150,.25);background:linear-gradient(180deg,rgba(18,34,26,.6),rgba(12,20,16,.55))}

/* v_0.22 美化开关（瞄准/Enter/播放 三个键） */
.switch-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;margin-top:8px;background:rgba(255,255,255,.04);cursor:pointer}
.switch-row input{display:none}
.switch-row .sw{position:relative;width:40px;height:22px;flex:none;border-radius:999px;background:var(--dim);transition:background .2s}
.switch-row .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.switch-row input:checked+.sw{background:var(--acc)}
.switch-row input:checked+.sw::after{left:20px}
.switch-row .sw-lb{font-size:13px;font-weight:600}
.switch-row .sw-sub{font-size:11px;color:var(--dim);line-height:1.4}

/* 24区域战场棋子无默认黑描边（DND式保留）；选中/目标/防御高亮不受影响 */
#field.ring-mode .piece circle:not(.ghost){stroke:none}
#field.ring-mode .piece.sel circle:not(.ghost){stroke:var(--acc);stroke-width:3}
#field.ring-mode .piece.def circle:not(.ghost){stroke:var(--ok);stroke-width:1.5}
#field.ring-mode .piece.atk-target circle:not(.ghost){stroke:var(--bad);stroke-width:3.5}
#field.ring-mode .piece.ab-sel circle:not(.ghost){stroke:var(--acc);stroke-width:4}

/* ===== 悬停高亮（与实际点击命中同一元素，完全同步） ===== */
#field path.region.hover{fill:rgba(224,166,78,.16);stroke:var(--acc);stroke-width:2}
#field rect.gcell.hover{fill:rgba(224,166,78,.13)}
#field g.piece.hover:not(.sel) circle:not(.ghost){stroke:var(--acc);stroke-width:2.5}
#field.ring-mode g.piece.hover:not(.sel) circle:not(.ghost){stroke:var(--acc);stroke-width:2.5}
/* ===== 快速建卡（v_0.22 · c95） ===== */
.qb-dots{display:flex;gap:6px;margin:14px 0 2px}
.qb-dotcell{flex:1;text-align:center}
.qb-dot{width:46px;height:46px;margin:0 auto;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--dim);background:var(--card)}
.qb-dot.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(224,166,78,.18)}
.qb-dotp{width:15px;height:15px;border-radius:50%;background:var(--acc)}
.qb-cur{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.5}
.qb-body{margin:12px 0;min-height:56vh;overflow:auto;padding:2px}
.qb-nav{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;gap:12px}
.qb-navbtn{padding:12px 30px;font-size:16px;font-weight:600;border-radius:10px}
.qb-grow input{font-size:16px;padding:10px 10px}
.qb-bg{margin-top:10px}
.qb-bg textarea{width:100%;min-height:130px;font-size:15px;padding:10px}
.qb-attrrow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.qb-acell{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:5px}
.qa-l1{font-size:13px;color:var(--dim)}
.qa-l2{font-size:11px;color:var(--dim);margin-top:-3px}
.qb-arr{background:var(--card);border:1px solid var(--line);color:var(--acc);border-radius:8px;padding:4px 14px;font-size:15px;cursor:pointer;line-height:1.2}
.qb-arr:hover{border-color:var(--acc)}
.qb-arr.sm{padding:2px 10px;font-size:12px}
.qa-num{width:88px;font-size:44px;font-weight:800;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--fg);padding:4px 0}
.qa-l3{font-size:12px;color:var(--dim)}
.qa-l3 b{color:var(--fg)}
.qb-atrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.qb-atotal{font-size:17px;color:var(--fg)}
.qb-atotal b{font-size:30px;color:var(--acc)}
.qb-skhead{font-size:12px;color:var(--dim);text-align:right;margin-bottom:8px}
.qb-skhead b{color:var(--acc)}
.qb-sec{margin-bottom:8px}
.qb-secname{font-size:13px;font-weight:700;color:var(--acc);margin:6px 0 4px}
.qb-sklist{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.qb-sk{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px;gap:6px}
.qb-skname{font-size:13px;flex:1}
.qb-skctrl{display:flex;align-items:center;gap:4px}
.qb-sknum{width:44px;font-size:24px;font-weight:700;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.qb-sk-sp{opacity:.45}
.qb-wrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.qb-wrow > div{flex:1;min-width:150px}
.qb-wrow label{font-size:12px;color:var(--dim)}
.qb-wrow input,.qb-wrow select{width:100%;font-size:15px;padding:9px 8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.qb-wrow textarea{width:100%;font-size:14px;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.qb-wstat{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--dim)}
.qb-wstat b{color:var(--fg)}
.qb-subtitle{font-size:14px;font-weight:700;margin:12px 0 6px;color:var(--fg)}
.qb-chips{display:flex;flex-wrap:wrap;gap:6px}
.qb-chip{background:var(--card);border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.qb-chip i{color:var(--dim);font-style:normal;font-size:11px}
.qb-chip.on{background:rgba(224,166,78,.16);border-color:var(--acc);color:var(--acc)}
.qb-chip.on i{color:var(--acc)}
.qb-ceffs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qb-ceff{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13px}
.qb-modrow{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.qb-modrow select{padding:6px 8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.qb-wsum{margin-top:10px;font-size:13px;color:var(--dim);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.qb-wsum .hl{color:var(--acc)}
.qb-abhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.qb-abtitle{font-size:26px;font-weight:800;color:var(--fg);line-height:1.3}
.qb-abtip{font-size:12px;font-weight:400;color:var(--dim);display:block;margin-top:4px}
.qb-imagine{color:var(--acc);font-weight:800}
.qb-abstat{margin-left:auto;font-size:13px;color:var(--dim);white-space:nowrap}
.qb-abstat .hl{color:var(--acc)}
.qb-abis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qb-abi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.qb-abi:hover{border-color:var(--acc)}
.qb-abi.on{border-color:var(--acc);background:rgba(224,166,78,.08)}
.qb-abiname{font-size:14px;font-weight:700;color:var(--fg)}
.qb-abiname i{font-style:normal;font-size:11px;color:var(--acc)}
.qb-savewrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.qb-total{font-size:16px;color:var(--dim)}
.qb-total b{font-size:34px;font-weight:800}
.qb-total b.ok{color:var(--ok)}
.qb-total b.bad{color:var(--bad)}
.qb-total b.warn{color:#e6c04c}
.qb-st{font-size:13px;padding:5px 12px;border-radius:8px}
.qb-st.ok{color:var(--ok);background:rgba(87,178,106,.12)}
.qb-st.bad{color:var(--bad);background:rgba(217,95,95,.12)}
.qb-st.warn{color:#e6c04c;background:rgba(230,192,76,.12)}
.qb-savebtn{font-size:17px;padding:14px 36px}
.qb-savebtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.qb-attrrow{grid-template-columns:repeat(2,1fr)}.qb-sklist{grid-template-columns:1fr 1fr}.qb-abis{grid-template-columns:1fr}}

/* ===== 快速建卡·服装与确认界面（v_0.22 · c98） ===== */
.qb-outhead{font-size:15px;font-weight:700;margin:14px 0 6px;color:var(--fg)}
.qb-outhint{font-size:12px;font-weight:400;color:var(--dim);margin-left:8px}
.qb-outfits{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.qb-outfit{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:border-color .15s}
.qb-outfit:hover{border-color:var(--acc)}
.qb-outfit.on{border-color:var(--acc);background:rgba(224,166,78,.08);box-shadow:0 0 0 2px rgba(224,166,78,.15)}
.qb-outname{font-size:16px;font-weight:800;color:var(--fg);margin-bottom:4px}
.qb-outfit.on .qb-outname{color:var(--acc)}
.qb-outdesc{font-size:11px;color:var(--dim);line-height:1.5}
.qb-outeff{font-size:11px;color:var(--dim);line-height:1.5;margin-top:3px;opacity:.85}
.qb-confirm{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:10px}
.qb-consec{margin-bottom:10px}
.qb-consec:last-child{margin-bottom:0}
.qb-conhead{font-size:13px;font-weight:700;color:var(--acc);margin-bottom:3px;border-bottom:1px dashed var(--line);padding-bottom:3px}
.qb-conbody{font-size:12px;color:var(--fg);line-height:1.7;padding:2px 0 0}
.qb-conrow{font-size:12px;color:var(--dim);line-height:1.7}
.qb-conrow b{color:var(--fg)}
@media(max-width:760px){.qb-outfits{grid-template-columns:repeat(2,1fr)}}

/* ===== v_0.22 主题增强层（呈现方式差异化，20 主题 · 经典 default 不动） ===== */
/* ---- mono：终端风（等宽 + 提示符 + 光标闪烁 + 扫描线） ---- */
body[data-style="mono"],body[data-style="mono"] input,body[data-style="mono"] select,body[data-style="mono"] textarea{font-family:"Cascadia Mono","Consolas","Courier New",monospace !important}
body[data-style="mono"] .card h3::before{content:"> ";color:var(--acc)}
body[data-style="mono"] .card h3::after{content:"_";animation:sbsBlink 1s steps(1) infinite;color:var(--acc)}
body[data-style="mono"] .card{box-shadow:none;border-radius:0}
body[data-style="mono"]::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);z-index:9999}
body[data-style="mono"] button{font-family:"Cascadia Mono","Consolas",monospace}
/* ---- coc：打字机风（正文打字机字体 + 标题光标 + 纸张续纹） ---- */
body[data-style="coc"],body[data-style="coc"] input,body[data-style="coc"] select,body[data-style="coc"] textarea{font-family:"Special Elite","Courier New",Courier,monospace !important}
body[data-style="coc"] .card h3::after{content:"_";animation:sbsBlink 1.1s steps(1) infinite;color:#8a1c10}
body[data-style="coc"] .card{box-shadow:inset 0 0 24px rgba(80,60,30,.35)}
body[data-style="coc"] .card p,body[data-style="coc"] .card li{font-size:12.5px;letter-spacing:.3px}
/* ---- ink：水墨强化（竖排标题点缀 + 细线 + 印章） ---- */
body[data-style="ink"] .card h3{writing-mode:vertical-rl;margin:0 auto;padding:6px 2px;border-left:1px solid #2f2f2f;height:52px;line-height:1.5;font-weight:700}
body[data-style="ink"] .card{border-width:1.5px}
body[data-style="ink"] button.primary::after{content:"印";font-size:10px;margin-left:6px;opacity:.75}
body[data-style="ink"] nav button.active{border-top-width:4px}
/* ---- win98：硬面板强化（输入框 3D 凹槽 + 滚动条） ---- */
body[data-style="win98"] input,body[data-style="win98"] select,body[data-style="win98"] textarea{border:2px solid;border-color:#404040 #fff #fff #404040;background:#fff;box-shadow:none}
body[data-style="win98"] .card{padding:4px}
body[data-style="win98"] .badge{font-family:"MS Sans Serif",Tahoma,sans-serif;font-size:11px}
/* ---- glass-blue：毛玻璃强化 ---- */
body[data-style="glass-blue"] .card,body[data-style="glass-blue"] header,body[data-style="glass-blue"] nav,body[data-style="glass-blue"] .charlist-item,body[data-style="glass-blue"] .modal .mbox{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body[data-style="glass-blue"] .card{box-shadow:0 8px 32px rgba(20,20,80,.35),inset 0 1px 0 rgba(255,255,255,.25)}
body[data-style="glass-blue"] .card h3{background:linear-gradient(90deg,#a78bfa,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- glass-min：液态玻璃（毛玻璃 + 大圆角 + 高光） ---- */
body[data-style="glass-min"] .card,body[data-style="glass-min"] .charlist-item,body[data-style="glass-min"] .modal .mbox{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-style="glass-min"] .card{border-radius:22px;box-shadow:0 12px 40px rgba(120,90,70,.18)}
body[data-style="glass-min"] .charlist-item{border-radius:18px}
/* ---- neumorph：拟物强化（双阴影加深） ---- */
body[data-style="neumorph"] .card{box-shadow:8px 8px 16px #b8c2d0,-8px -8px 16px #fff}
body[data-style="neumorph"] input,body[data-style="neumorph"] select,body[data-style="neumorph"] textarea{box-shadow:inset 4px 4px 8px #c0cad8,inset -4px -4px 8px #fff;border:none;border-radius:12px;background:#e0e5ec}
/* ---- chrome80s：金属强化（铬面高光 + 拉丝） ---- */
body[data-style="chrome80s"] .card{background:linear-gradient(180deg,#3a4250 0%,#262b34 18%,#20252c 82%,#2a303a 100%)}
body[data-style="chrome80s"] .card h3{background:linear-gradient(180deg,#f4f7ff,#9fb4d8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
body[data-style="chrome80s"] button{background:linear-gradient(180deg,#e8edf5 0%,#c4ccd8 45%,#8a94a6 55%,#b8c2d0 100%)}
body[data-style="chrome80s"] button.primary{background:linear-gradient(180deg,#9fb4d8 0%,#6a7a96 50%,#8a9ab8 100%)}
body[data-style="chrome80s"] .card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 5px);pointer-events:none}
/* ---- rhine：绿色极简修正（荧光绿降饱和 + 柔和） ---- */
body[data-style="rhine"]{--acc:#00b86a}
body[data-style="rhine"] button.primary{background:#00b86a}
body[data-style="rhine"] button:hover{background:#00b86a;border-color:#00b86a;color:#fff}
body[data-style="rhine"] nav button.active{border-top-color:#00b86a;color:#009c5c}
body[data-style="rhine"] header{border-bottom-color:#00b86a}
body[data-style="rhine"] .badge{border-color:#00b86a;color:#009c5c}
/* ---- apple-hig：微交互（hover 柔化 + 过渡） ---- */
body[data-style="apple-hig"] .card,body[data-style="apple-hig"] .charlist-item,body[data-style="apple-hig"] button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
body[data-style="apple-hig"] .charlist-item:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
body[data-style="apple-hig"] .card h3{letter-spacing:-.02em}
@keyframes sbsBlink{50%{opacity:0}}

/* ---- frutiger-aero：Aero 水润强化（玻璃气泡 + 透亮高光） ---- */
body[data-style="frutiger-aero"] .card{box-shadow:0 4px 24px rgba(30,90,140,.25),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -6px 16px rgba(120,200,255,.35)}
body[data-style="frutiger-aero"] .card::after{content:"";position:absolute;top:4px;left:12px;right:40%;height:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
body[data-style="frutiger-aero"] .card h3{text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 12px rgba(180,230,255,.8)}
/* ---- dark-aero：暗色玻璃强化 ---- */
body[data-style="dark-aero"] .card,body[data-style="dark-aero"] header,body[data-style="dark-aero"] nav,body[data-style="dark-aero"] .modal .mbox{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-style="dark-aero"] .card{box-shadow:inset 0 1px 0 rgba(80,220,150,.25),0 10px 30px rgba(0,0,0,.4)}
body[data-style="dark-aero"] .card h3::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3dffc0;box-shadow:0 0 8px #3dffc0;margin-left:8px;animation:sbsPulse 2s ease-in-out infinite}
/* ---- dnd：羊皮纸烫金强化 ---- */
body[data-style="dnd"] .card{border:2px solid rgba(180,130,60,.75);box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 0 0 1px rgba(120,80,20,.35)}
body[data-style="dnd"] .card h3{text-shadow:0 1px 0 rgba(255,230,180,.5)}
body[data-style="dnd"] .card::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,rgba(180,130,60,.8),transparent)}
body[data-style="dnd"] .charlist-item{border:1.5px solid rgba(180,130,60,.6)}
/* ---- baroque：金线装饰强化 ---- */
body[data-style="baroque"] .card{border:2px solid #c8904a;box-shadow:0 6px 24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,192,96,.25)}
body[data-style="baroque"] .card h3{text-shadow:0 0 10px rgba(232,192,96,.45)}
body[data-style="baroque"] .card::before{content:"";position:absolute;top:5px;left:5px;right:5px;border-top:1px solid rgba(232,192,96,.4);pointer-events:none}
body[data-style="baroque"] .card::after{content:"❦";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#241419;color:#e8c060;padding:0 8px;font-size:14px}
/* ---- neon-cyber：霓虹强化（斜切角 + 发光 + 扫描线） ---- */
body[data-style="neon-cyber"] .card{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 0 18px rgba(255,46,196,.18),inset 0 0 18px rgba(57,255,20,.05)}
body[data-style="neon-cyber"] button{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
body[data-style="neon-cyber"] .charlist-item{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
body[data-style="neon-cyber"]::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(138,151,255,.04) 0 1px,transparent 1px 4px);z-index:9999}
/* ---- y2k：高光渐变强化（保持基调） ---- */
body[data-style="y2k"] .card{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 24px rgba(20,0,40,.35),0 0 24px rgba(255,138,208,.12)}
body[data-style="y2k"] .card h3{background:linear-gradient(90deg,#ff8ad0,#ffd6f2,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- candy：圆润强化（保持基调） ---- */
body[data-style="candy"] .card{border-radius:26px;box-shadow:0 10px 30px rgba(255,80,160,.18)}
body[data-style="candy"] .charlist-item{border-radius:22px}
/* ---- brutalist：硬分区强化 ---- */
body[data-style="brutalist"] .card h3{font-size:17px;border-bottom:3px solid #000;padding-bottom:6px}
body[data-style="brutalist"] .card{box-shadow:6px 6px 0 #000}
body[data-style="brutalist"] .charlist-item{box-shadow:4px 4px 0 #000}
body[data-style="brutalist"] .badge{box-shadow:2px 2px 0 #000}
/* ---- ds-floating：HUD 角标 + 冷淡强化 ---- */
body[data-style="ds-floating"] .card::before,body[data-style="ds-floating"] .card::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--acc,#7fd4c1);opacity:.7;pointer-events:none}
body[data-style="ds-floating"] .card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
body[data-style="ds-floating"] .card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
body[data-style="ds-floating"] .card h3::before{content:"◈ ";font-weight:400;opacity:.8}
body[data-style="ds-floating"] .charlist-item{box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* ---- dark-lux：金线分隔 + 数据卡强化 ---- */
body[data-style="dark-lux"] .card h3{border-bottom:1px solid rgba(212,175,55,.35);padding-bottom:6px}
body[data-style="dark-lux"] .card{box-shadow:0 10px 30px rgba(0,0,0,.6)}
body[data-style="dark-lux"] .charlist-item{box-shadow:0 6px 18px rgba(0,0,0,.45)}
body[data-style="dark-lux"] .badge{background:linear-gradient(180deg,#1a1408,#0d0a08)}
@keyframes sbsPulse{50%{opacity:.35}}

/* 房间推荐网格 3列2行 */
.rmrec-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--card2);min-height:150px;justify-content:space-between}
.rmrec-card .nm{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmrec-card .st{font-size:12px;color:var(--dim)}

/* 组团推荐 一行4 */
.fgreco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
@media(max-width:900px){.fgreco-grid{grid-template-columns:repeat(2,1fr)}}
.fgreco-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--card2);cursor:pointer;min-height:86px}
.fgreco-card:hover{border-color:var(--acc)}
.fgreco-card .t{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgreco-card .st{font-size:11px;color:var(--dim)}
.fgreco-card .code{font-size:10px;color:var(--acc);opacity:.85;margin-top:auto;text-align:right;font-family:monospace}
.fgreco-card .fgreco-sum{font-size:11px;color:var(--dim);line-height:1.55;border-top:1px dashed var(--line);padding-top:5px;margin-top:3px;max-height:calc(3.1em + 6px);overflow:hidden;word-break:break-word}
.fgreco-card .fgreco-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:3px}
.fgreco-card .fgreco-foot .code{margin-top:0;margin-left:auto}

/* ==================================================================
 * 极简界面模式（原 js/ui-mode.js 内联注入，前移到此处）
 * 目的：样式随 style.css 首屏即生效，由 sbs-loader.js 在渲染前同步设置
 *       html[data-mn="1"]，彻底消除「先画经典界面再隐藏」的刷新闪动。
 * ================================================================== */
/* ===== v0.23 界面模式: 极简 sbs-min ===== */
#modeSwitch{position:fixed;left:8px;top:112px;width:46px;height:46px;border-radius:50%;z-index:60;cursor:pointer;border:2px solid var(--acc);background:#0a0d16;color:#cfd6ea;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 10px #0008}
#modeSwitch span{pointer-events:none}
html[data-mn="1"] #modeSwitch{border-color:#5fb8ff}
/* 单展开键: 头像(58)+切换(112)之下, 左上第三位, 纵向不重叠 */
#mnExpAll{position:fixed;left:8px;top:170px;width:30px;height:20px;z-index:55;font-size:11px;line-height:1;padding:0;background:rgba(28,32,48,.94);color:#9fb0d8;border:1px solid #3a455f;border-radius:6px;cursor:pointer;text-align:center;box-shadow:0 1px 6px #0007;display:none}
html[data-mn="1"] #mnExpAll{display:none}
html[data-mn="1"] body.has-fold #mnExpAll{display:block}
/* 收纳: 默认折叠, mn-open 展开 */
html[data-mn="1"] .mn-fold{display:none!important}
html[data-mn="1"] .mn-fold.mn-open{display:block!important}
/* 跑团极简: 说明文字隐藏 + 标题按钮缩小 + 聊天最大化 */
html[data-mn="1"] #view-battle .dim10{display:none!important}\nhtml[data-mn="1"] #view-run .note,html[data-mn="1"] #view-run .sub,html[data-mn="1"] #view-run .dim10,html[data-mn="1"] #view-run .map-hint,html[data-mn="1"] #view-run .chat-acts{display:none!important}
html[data-mn="1"] #view-run h3,html[data-mn="1"] #view-run h4{font-size:12px!important;margin:2px 0!important}
html[data-mn="1"] #view-run button,html[data-mn="1"] #view-run .sm-btn{padding:1px 6px!important;font-size:10.5px!important}
html[data-mn="1"] .chat-body{font-size:13px}
html[data-mn="1"] .run-chat-card h3{font-size:12px!important;margin:1px 0!important}
html[data-mn="1"] .chat-inline{min-height:28px!important;max-height:60px!important;font-size:13px!important}
html[data-mn="1"] .run-bottom{padding:5px 7px!important;margin-top:6px!important}
html[data-mn="1"] .run-bar{grid-template-columns:repeat(4,1fr);gap:4px!important;margin-top:5px!important}
html[data-mn="1"] .run-bar button[data-onclick*="toggleGame"]{display:none!important}
html[data-mn="1"] .run-bar button[data-onclick*="bulletinPanel"]{display:none!important}
html[data-mn="1"] .run-bar button[data-onclick*="eventPanel"]{display:none!important}
html[data-mn="1"] .run-bar button[data-onclick*="exportRun"]{display:none!important}
html[data-mn="1"] .run-bar button[data-onclick*="bagPanel"]{font-size:0!important}
html[data-mn="1"] .run-bar button[data-onclick*="bagPanel"]::after{content:"背包";font-size:11px}
html[data-mn="1"] #view-run button[data-onclick*="chatModeMenu"],html[data-mn="1"] #view-run .fp-tbtn,html[data-mn="1"] #view-run button[data-onclick*="chatExpand"]{display:none!important}
/* 展开键三角：收起=正三角▲(0deg)，展开=倒三角▼(180deg)，带旋转过渡 */
#mnExpAll .tri{display:inline-block;line-height:1;transition:transform .22s cubic-bezier(.4,0,.2,1)}
#mnExpAll.open .tri{transform:rotate(180deg)}

/* 移动端：切换键与头像同尺寸并排（头像 right:8 bottom:64 40×40），展开键紧随其左 */
@media(max-width:760px){
  #modeSwitch{left:auto;right:56px;top:auto;bottom:64px;width:40px;height:40px;padding:0;min-height:0}
  #modeSwitch span:first-child{display:none}
  #modeSwitch span:last-child{font-size:14px}
  #mnExpAll{left:auto;right:104px;top:auto;bottom:64px;width:40px;height:40px;font-size:13px;padding:0;min-height:0}
}

/* ===== 推荐制：整宽顶满的房间卡片 + 公告行 ===== */
.rmrec-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;width:100%;height:100%;min-height:0}
.room-grid.rm-rec{grid-auto-rows:1fr;overflow-y:hidden}
.room-item.rm-wide{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;height:100%;min-height:0;margin-bottom:0;padding:9px 11px;overflow:hidden}
.room-item.rm-wide>.row{margin-left:0!important;width:100%;flex-wrap:wrap;gap:4px}
.room-item.rm-wide .nm{font-size:14px}
.room-item.rm-wide .st{font-size:11px}
.room-item.rm-wide .rm-notice{flex-basis:auto;width:100%;margin-top:auto;font-size:11.5px;line-height:1.55;color:var(--dim);background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:8px;padding:5px 8px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 推荐制响应式：窄屏改为 2 列×3 行 / 1 列×6 行，此时允许滚动（小块屏幕放不下） */
@media(max-width:900px){
  .rmrec-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .room-grid.rm-rec{grid-auto-rows:auto;overflow-y:scroll}
  .room-item.rm-wide{height:auto;min-height:120px}
}
@media(max-width:560px){.rmrec-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,minmax(0,1fr))}}
/* 宽版卡展开时：隐藏公告行给成员列表腾地方，成员区在卡内滚动，不撑破卡片 */
.room-item.rm-wide.rm-open .rm-notice{display:none}
.room-item.rm-wide .room-mems{flex-basis:auto;max-height:74px;margin-top:4px;padding:2px 4px}