/* ============================================================
 * 修仙小屋 v2 - 网页客户端主题
 * 基于 WPF 客户端截图还原：顶部标签 + 主内容 + 底部快捷 + 聊天
 * ============================================================ */
:root{
  --bg:#f5f0e6;
  --panel:#fcfaf4;
  --panel2:#f0ece0;
  --border:#b48c50;
  --line:#d7c3a0;
  --text:#3c3228;
  --text2:#786955;
  --red:#962828;
  --blue:#285a82;
  --purple:#7a2fd0;
  --green:#3c7c32;
  --hot:#fff6e0;
  --btn:#faf6ec;
  --btndis:#ebe6dc;
  --sel:#ffeec8;
  --bar:#d66a46;
  --barbg:#e4dccd;
  --gold:#d4a843;
  --gold2:#b48c50;
  --brown:#5a3a1a;
  --brown2:#3a2a1a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 "Microsoft YaHei","PingFang SC",sans-serif;
  overflow:hidden;
}

/* 主外壳：上下布局 */
#gameShell{
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100vw;
  min-width:0;
  min-height:0;
}

/* 顶部标题栏 */
#titleBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 14px;
  background:linear-gradient(180deg,#4a3520 0%,#3a2a1a 100%);
  color:var(--gold);
  border-bottom:2px solid var(--gold2);
  flex:0 0 auto;
}
#titleBar .brand{
  display:flex;align-items:center;gap:10px;
}
#titleBar .logo{
  width:28px;height:28px;border-radius:5px;
  background:radial-gradient(circle at 30% 30%,#ffe7a8,#b48c50 60%,#5a3a1a);
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;color:var(--brown);font-size:16px;
  box-shadow:inset 0 0 0 1px #fff8;
}
#titleBar .name{font-size:16px;font-weight:bold;letter-spacing:2px;color:#f5e6c8}
#titleBar .ver{font-size:12px;color:#c9b48a;margin-left:6px}
#titleBar .roleSummary{
  display:flex;align-items:center;gap:16px;
  font-size:13px;color:#f5e6c8;
}
#titleBar .roleSummary .conn{font-size:12px;color:#c9b48a}
#titleBar .roleSummary #sumConn.connected{color:#6fd46f}

/* 顶部主标签栏 */
#mainTabBar{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:0;
  padding:4px 10px 0;
  background:var(--panel2);
  border-bottom:2px solid var(--border);
  flex:0 0 auto;
}
#mainTabBar button{
  background:linear-gradient(180deg,#faf6ec 0%,#e8e0d0 100%);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:5px 5px 0 0;
  padding:6px 12px;
  margin-right:3px;
  color:var(--text);
  font:inherit;
  cursor:pointer;
  min-width:58px;
  white-space:nowrap;
}
#mainTabBar button:hover{background:var(--hot)}
#mainTabBar button.active{
  background:var(--panel);
  border-color:var(--border);
  border-bottom:2px solid var(--panel);
  margin-bottom:-2px;
  font-weight:bold;
  color:var(--brown);
  box-shadow:0 -2px 4px rgba(0,0,0,.06) inset;
}

/* 工作区 */
#workspace{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  padding:6px 8px 8px;
  background:var(--bg);
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100%;gap:6px;min-height:0}

/* 通用行与控件 */
.row{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
button{
  background:var(--btn);border:1px solid var(--border);color:var(--text);
  padding:5px 10px;border-radius:3px;cursor:pointer;font:inherit;white-space:nowrap
}
button:hover{background:var(--hot)}
button:disabled{background:var(--btndis);color:var(--text2);cursor:default}
button.on{background:var(--sel);border-color:var(--bar)}
input[type=text],input[type=password]{
  border:1px solid var(--border);border-radius:3px;
  padding:5px 8px;font:inherit;background:#fff;color:var(--text)
}
label.lb{color:var(--text2);font-size:13px}

/* 登录栏 */
#loginBar{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:6px 10px;flex:0 0 auto}

/* 页面区：60% */
#page{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  flex:6 1 0;min-height:0;overflow:auto;padding:10px;position:relative
}

/* 底部快捷栏 */
#quickBar{
  flex:0 0 auto;
  padding:4px 6px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:4px;
}
#quickBar .spacer{flex:1 1 auto}
#quickBar button{min-width:72px}

/* 聊天频道 */
#chanBar{flex-wrap:wrap;flex:0 0 auto;align-items:center}
#chanBar button{font-size:12px;padding:3px 8px}
#chanBar button.on{background:var(--sel);border-color:var(--bar)}
#chanBar .spacer{flex:1}
#chanBar .hideUpChk{font-size:12px;color:var(--txt2);display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
#chanBar .hideUpChk input{margin:0}

/* 聊天列表：40%，与 page 按 6:4 比例 */
#chatList{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  flex:4 1 0;min-height:0;max-height:none;overflow-y:auto;
  padding:6px 10px;font-size:13px
}
.cmsg{padding:1px 0;word-break:break-all}
.cmsg .ts{color:#b0a48e;font-size:11px;margin-right:6px}
.cmsg .tag{color:var(--blue);margin-right:4px}
.cmsg.t系统 .tag{color:var(--purple)}
.cmsg.t本地 .tag{color:#888}
.cmsg.tBOSS .tag,.cmsg.t挑战 .tag{color:var(--red)}

/* 输入行 */
#inputRow{gap:6px;flex:0 0 auto}
#chatInput{flex:1 1 auto}

/* 状态栏 */
#statusBar{color:var(--text2);font-size:12px;padding:0 4px;display:flex;gap:18px;flex:0 0 auto}

/* 通用面板 */
.panelBox{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:10px}
.h{color:var(--purple);font-weight:bold;margin-bottom:8px}
.kv{margin:3px 0}
.kv.red{color:var(--red)} .kv.blue{color:var(--blue)}
.pbar{height:13px;background:var(--barbg);border:1px solid var(--border);border-radius:3px;overflow:hidden;margin:3px 0 8px}
.pbar>i{display:block;height:100%;background:var(--bar)}
.pbar.energy>i{background:#5096c8}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;height:100%}
.grid2c{display:grid;grid-template-columns:210px 1fr;gap:10px;height:100%}

/* 背包 */
#gearCol{border:1px solid var(--line);border-radius:4px;padding:8px;overflow:auto}
.gslot{border:1px solid var(--line);border-radius:4px;padding:4px 6px;cursor:pointer;background:var(--btn);min-height:54px;display:flex;flex-direction:column;justify-content:center}
.gslot:hover{background:var(--hot)}
.gslot .sn{color:var(--text2);font-size:12px;margin-bottom:2px}
.gslot .gv{font-size:12px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gslot .mut{font-size:11px;color:var(--text2)}
#bagWrap{display:flex;flex-direction:column;min-height:0}
#bagGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);
  gap:6px;align-content:start;padding:2px}
.bcard{position:relative;border:1px solid;border-radius:4px;padding:5px 22px 5px 7px;cursor:pointer;background:#fffdf7;min-height:78px;display:flex;flex-direction:column;gap:1px;justify-content:center}
.bcard:hover{filter:brightness(0.96)}
.bcard.eq{background:var(--sel)}
.bcard .trade{position:absolute;top:3px;right:4px;font-size:10px;color:var(--teal,#28a745);background:rgba(255,255,255,0.75);padding:1px 3px;border-radius:3px;white-space:nowrap;line-height:1}
.bcard .nm{font-weight:bold;font-size:13px;white-space:normal;word-break:break-all;line-height:1.25}
.bcard .sub,.bcard .sc{font-size:11px;color:var(--text2);line-height:1.25}
.bcard .sc.eq{color:var(--red)}

/* 列表 */
.list{border:1px solid var(--line);border-radius:4px;overflow-y:auto;background:#fffdf7}
.list .li{padding:4px 10px;border-bottom:1px solid #efe8d8;cursor:pointer}
.list .li:hover{background:var(--hot)}
.list .li.sel{background:var(--sel)}
.list .li.mine{background:rgba(90,140,230,0.10)}
.list .li.mine:hover{background:rgba(90,140,230,0.18)}
/* 奇遇：待触发列表项 */
.list .li.qiyuItem{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#fff7e6,#fffdf7);border-left:3px solid var(--gold,#d4a017)}
.list .li.qiyuItem:hover{background:linear-gradient(90deg,#ffedc2,#fff7e6)}
.list .li.qiyuItem .qiyuGo{color:var(--gold,#d4a017);font-size:12px;font-weight:bold;white-space:nowrap;margin-left:8px}
/* 市井左侧分类 */
.mcats{display:flex;flex-direction:column;gap:2px}
.mcats .li{padding:4px 8px;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:13px;background:#fffdf7}
.mcats .li:hover{background:var(--hot)}
.mcats .li.sel{background:var(--sel)}
/* 签到：整月 30 格网格 */
.chkGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0}
.chkCell{position:relative;border:1px solid var(--line);border-radius:6px;padding:6px 4px;background:#fff;min-height:54px;text-align:center;font-size:12px}
.chkCell .cd{font-weight:bold;font-size:13px;color:#444}
.chkCell .cr{margin-top:3px;color:#777;line-height:1.25}
.chkCell.chkDone{background:rgba(80,170,110,0.12);border-color:rgba(80,170,110,0.5)}
.chkCell.chkDone .cd{color:#2e8b57}
.chkCell.chkToday{border-color:var(--gold,#d4a017);box-shadow:0 0 0 2px rgba(212,160,23,0.25);background:#fffbe9}
.chkCell.chkToday .cd{color:var(--gold,#d4a017)}
.chkCell.chkMilestone{border-color:#c0392b;background:linear-gradient(180deg,#fff0ee,#fff7f6)}
.chkCell.chkMilestone .cd{color:#c0392b}
.chkCell .ck{position:absolute;top:2px;right:4px;color:#2e8b57;font-weight:bold}
.mcats .li.ind{font-size:12px;color:var(--text2);padding-left:18px}
table.rk{width:100%;border-collapse:collapse}
table.rk td,table.rk th{padding:4px 10px;border-bottom:1px solid #efe8d8;text-align:left;font-size:13px}
table.rk th{color:var(--purple);position:sticky;top:0;background:var(--panel)}

/* 浮层 */
#mask{position:fixed;inset:0;background:rgba(60,50,40,.25);display:none;z-index:50}
#mask.show{display:block}
.ovl{position:absolute;background:var(--panel);border:2px solid var(--border);
  border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:14px;display:none;
  max-height:calc(100vh - 60px);overflow:auto}
.ovl.show{display:block}
#ovItem{top:110px;right:20px;width:330px}
#ovCheckin,#ovPk,#ovRb,#ovLucky,#ovTomb,#ovGomoku,#ovDengXian,#ovFuben,#ovProfile{top:50%;left:50%;transform:translate(-50%,-50%);width:460px}
#ovBr{top:50%;left:50%;transform:translate(-50%,-50%);width:760px;max-width:94vw;max-height:86vh;overflow:auto}
#ovFuben{width:540px}
#ovProfile{width:620px;max-width:94vw;max-height:86vh;overflow:auto}
#ovDraw{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999}
#ovAdmin{top:50%;left:50%;transform:translate(-50%,-50%);width:560px;max-height:80vh;overflow:auto}
#ovFeature{top:50%;left:50%;transform:translate(-50%,-50%);width:640px;max-width:92vw;
  max-height:84vh;overflow:auto}
.ovl .tt{color:var(--purple);font-weight:bold;font-size:16px;margin-bottom:10px}
/* ============ 管理员面板·物品发放 ============ */
.gmCat{font-weight:bold;color:var(--purple);margin:8px 0 4px;font-size:13px}
.gmItemList{max-height:300px;overflow:auto;border:1px solid var(--line);padding:6px;background:#fafafa;border-radius:4px}
.gmItem{display:block;width:100%;text-align:left;margin:2px 0;padding:5px 8px;border:1px solid var(--line);
  border-radius:4px;background:#fff;cursor:pointer;font-size:13px}
.gmItem:hover{background:#f0f4ff}
.gmItem.sel{background:var(--hot);border-color:var(--purple);font-weight:bold}
.ovl .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rfMsg{margin-top:10px;padding:8px 10px;border-radius:4px;font-size:13px;font-weight:bold}
.rfMsg.ok{background:#e7f4e8;color:#2e7d32;border:1px solid #b7dfba}
.rfMsg.fail{background:#fdecea;color:#c62828;border:1px solid #f3c0bc}
#ovModal{top:50%;left:50%;transform:translate(-50%,-50%);width:680px;max-width:92vw;max-height:86vh;overflow:auto}
.ovlBox{display:flex;flex-direction:column;gap:0}
.ovlHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ovlHead .tt{margin-bottom:0}
.ovClose{background:#f3ece0;border:1px solid var(--line);border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:14px;line-height:1}
.ovClose:hover{background:var(--hot)}
.ovlBody{overflow:auto}
.chk{display:block;margin:4px 0;cursor:pointer}
.mut{color:var(--text2);font-size:12px}
.rar1{color:#827d73;border-color:#827d73} .rar2{color:#3c9646;border-color:#3c9646}
.rar3{color:#326ec8;border-color:#326ec8} .rar4{color:#963cc8;border-color:#963cc8}
.rar5{color:#dc7814;border-color:#dc7814}
/* ============ 副本（5人组队三关） ============ */
.fbBoard{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:var(--brown2);padding:4px;border-radius:6px}
.fbCell{height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;user-select:none;background:#efe6d2;color:#5a4a3a;border:1px solid #d8cbb0}
.fbTrap{background:#7a2c1a;color:#f0c9bf;font-weight:bold}
.fbMe{outline:3px solid var(--gold);outline-offset:-3px;font-weight:bold;color:#3a2a1a;background:#fff3c4}
.fbP{outline:2px solid #4a7bd0;outline-offset:-2px;font-weight:bold;color:#22324d;background:#dbe6f7}
.fbMembers{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:4px;background:#fffdf7;max-height:200px;overflow:auto}
.fbMembers li{display:flex;justify-content:space-between;padding:4px 10px;border-bottom:1px solid #efe8d8;font-size:13px}
.fbMembers li:last-child{border-bottom:none}
.fbMembers .nm{font-weight:bold}
.fbMembers .hp{color:var(--text2)}
.fbMembers .me .nm{color:var(--purple)}
.fbMembers .down .nm{color:#a33}
.fbMembers .arr .nm{color:#2a8}
.fbBar{height:16px;background:#3a2a1a;border-radius:8px;overflow:hidden;margin:4px 0 8px;border:1px solid #5a4a3a}
.fbBarFill{height:100%;background:linear-gradient(90deg,#c0392b,#e67e22);transition:width .2s}
.fbSlot{display:flex;gap:10px;justify-content:center;margin:10px 0}
.fbSym{font-size:34px;line-height:1;background:#2a1c10;border:1px solid #5a4a3a;border-radius:6px;width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.fbBtns button.on,.kv button.on{background:var(--purple);color:#fff;border-color:var(--purple)}
.kv.ok{color:#2a8;font-weight:bold}
/* ============ 登仙梯（别踩白块） ============ */
.dxScore{font-size:20px;font-weight:bold;color:var(--purple);margin:4px 0 8px}
.dxBoard{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--brown2);padding:4px;border-radius:6px}
.dxRow{display:contents}
.dxCell{height:60px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;user-select:none;transition:background .08s}
.dxBlack{background:#3a2a1a;color:#5a4a3a}
.dxWhite{background:#f7f1e3;color:#3a2a1a;font-weight:bold}
.dxWhite:hover{background:#fffdf7}
.dxCurrent{outline:3px solid var(--gold);outline-offset:-3px}
.dxOver .dxCell{cursor:default}
.dxRank{list-style:none;margin:6px 0 0;padding:0;max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:4px;background:#fffdf7}
.dxRank li{display:flex;justify-content:space-between;padding:4px 10px;border-bottom:1px solid #efe8d8;font-size:13px}
.dxRank li:last-child{border-bottom:none}
.dxRank .rk{color:var(--text2);width:28px}
.dxRank .nm{flex:1;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxRank .sc{color:var(--purple);font-weight:bold}
.dxRank .me{background:var(--sel)}
.hide{display:none !important}

/* 幸运商店 3x3 网格 */
.luckyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.luckyCell{border:2px solid var(--line);border-radius:6px;background:var(--panel);padding:10px;cursor:pointer;user-select:none;text-align:center;transition:transform .1s}
.luckyCell:hover{transform:scale(1.02);background:var(--hot)}
.luckyCell:active{transform:scale(0.98)}
.luckyIdx{font-size:11px;color:var(--text2)}
.luckyDesc{font-size:14px;font-weight:bold;margin:6px 0;min-height:18px;word-break:break-all}
.luckyPrice{font-size:12px;color:#c0392b;font-weight:bold}
.luckyHint{font-size:10px;color:var(--text2);margin-top:4px;opacity:.7}
.luckyRefreshBtn{background:var(--hot);border:1px solid var(--line);border-radius:4px;padding:6px 16px;cursor:pointer;font-size:13px}
.luckyRefreshBtn:hover{background:var(--border)}

/* 大墓探秘 扫雷格子 */
.tombCell{width:40px;height:40px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:bold;cursor:pointer;margin:2px;background:var(--panel2);user-select:none}
.tombCell:hover{background:var(--hot)}
.tombMine{width:40px;height:40px;border:1px solid #c0392b;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:default;margin:2px;background:#ffd0d0}
.tombCellUn{width:40px;height:40px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;margin:2px;background:var(--panel2);color:#666}
.tombGray{opacity:.6}
.gomoCell{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;margin:1px;background:var(--panel2);user-select:none}
.gomoCell:hover{background:var(--hot)}
.brGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.brCell{width:46px;height:46px;border:1px solid var(--border);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;cursor:pointer;user-select:none;position:relative;transition:transform .1s}
.brCell:hover{transform:scale(1.15);z-index:2;border-color:var(--hot)}
.brDanger{border-color:#e74c3c;box-shadow:0 0 3px rgba(231,76,60,.5)}
.brMe{border:3px solid #f1c40f;box-shadow:0 0 8px rgba(241,196,15,.7);transform:scale(1.1);z-index:3}
.brIcon{font-size:18px;line-height:1}
.brHpBar{height:8px;background:var(--barbg);border-radius:4px;overflow:hidden}
.brHpBar>div{height:100%;background:#2ecc71;border-radius:4px;transition:width .3s}
.drawTool{background:var(--btn);border:1px solid var(--border);border-radius:3px;padding:4px 10px;cursor:pointer;font-size:13px}
.drawTool:hover{background:var(--hot)}
.drawCard{border:2px solid #e74c3c;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--panel);transition:box-shadow .15s;padding:8px;text-align:center;display:inline-block;width:auto}
.drawCard:hover{box-shadow:0 4px 16px rgba(231,76,60,.4);transform:scale(1.05)}
.drawCardImg{width:200px;height:200px;overflow:hidden;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center}
.drawCardImg img{max-width:100%;max-height:100%;object-fit:contain}
.drawCardAuthor{font-size:13px;font-weight:bold;margin:4px 0 2px}
.drawCardScore{font-size:11px;color:var(--text2)}

/* 称号富文本 */
.richGrad{background:linear-gradient(90deg,var(--c1,#fff),var(--c2,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:bold}
.richEmoji{background:none;-webkit-text-fill-color:initial;color:initial}
.emojiBtn.sel{border:2px solid #cc0000 !important;background:#fff7e6}
.tIcon{display:inline-block;height:1em;width:1em;vertical-align:middle;margin-right:2px}
.setGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;height:100%}
.setGrid .panelBox{display:flex;flex-direction:column;min-height:0}
.setGrid .list{flex:1;min-height:80px}
#advMaps{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
#advMaps button{min-width:150px;min-height:40px}

/* 页面内部标签（二级标签） */
.subTabBar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.subTabBar button{background:#f5f0e6;border:1px solid var(--line);border-radius:3px;padding:4px 10px;font-size:13px}
.subTabBar button.active{background:var(--sel);border-color:var(--border);font-weight:bold}

/* 人物页三列布局 */
.charGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.charPanel{border:1px solid var(--line);border-radius:4px;padding:10px;background:#fffdf7}
.charPanel h3{color:var(--blue);font-size:14px;text-align:center;margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.charPanel .kv{display:flex;justify-content:space-between;gap:8px}
.charPanel .kv .k{color:var(--text2);white-space:nowrap}
.charPanel .kv .v{font-weight:bold;white-space:nowrap}
.sectInfo .kv{display:flex;justify-content:space-between}

/* 五行图 */
.wuxingBox{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.wuxingRow{display:flex;justify-content:center;gap:40px}
.wuxingItem{text-align:center}
.wuxingItem .label{font-size:12px;color:var(--text2)}
.wuxingItem .val{font-size:16px;font-weight:bold}

/* 装备与背包分割 */
.bagLayout{display:grid;grid-template-columns:220px 1fr;gap:10px;height:100%}
.bagSide{border:1px solid var(--line);border-radius:4px;padding:8px;overflow:auto;background:#fffdf7;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.bagSide .h{grid-column:1/-1;font-size:13px;margin-bottom:4px}
.bagMain{display:flex;flex-direction:column;gap:6px;min-height:0}
.bagActions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bagCount{font-size:13px;color:var(--text2);margin-left:auto}
.bagExtRow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:6px;background:var(--panel)}
.bagExtLabel{font-size:13px;font-weight:bold;color:var(--brown)}
.extBtn{font-size:13px;padding:4px 12px;background:var(--hot);color:#7a4a00;border-color:var(--brown)}
.extBtn:hover{filter:brightness(1.05)}
.bagExtHint{font-size:12px;color:var(--text2)}
.bagExtHint b{color:var(--blue)}
.advGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px}
.advCard{border:2px solid var(--line);border-radius:6px;padding:10px;text-align:center;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.advCard.on{background:#fffef0;box-shadow:0 0 6px rgba(0,0,0,.1)}
.advCard .advName{font-size:20px;font-weight:bold}
.advCard .advSub{font-size:12px;color:var(--text2)}
.advCard button{font-size:12px;padding:3px 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 娱乐 12 宫格 */
.funGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;overflow:auto;padding:2px;align-content:start}
.funCard{border:2px solid var(--line);border-radius:6px;padding:12px 10px;background:var(--panel);cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:6px;min-height:86px;justify-content:center}
.funCard:hover{background:var(--hot);box-shadow:0 0 6px rgba(0,0,0,.12)}
.funCard .fn{font-size:17px;font-weight:bold;color:var(--brown)}
.funCard .fd{font-size:12px;color:var(--text2)}
.funCard .ft{font-size:12px;color:var(--blue)}
.sectBuildGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sectFarmGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sectTable{border-collapse:collapse;width:100%;font-size:13px}
.sectTable th,.sectTable td{border:1px solid var(--line);padding:4px 6px;text-align:left}
.sectTable th{background:var(--btn)}

/* 响应式 */
@media (max-width:960px){
  #mainTabBar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:0}
  #mainTabBar button{flex:0 0 auto}
  .charGrid{grid-template-columns:1fr}
  .bagLayout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .funGrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  #titleBar .roleSummary{display:none}
  #quickBar button{font-size:12px;padding:4px 7px;min-width:0}
  #inputRow button{font-size:12px;padding:4px 6px}
}
@media (max-width:560px){
  #loginBar .lb,#loginBar #connState{ display:none; }
  #chatInput{ min-width:0; }
  .funGrid{grid-template-columns:repeat(2,1fr)}
  .ovl{
    top:0!important;left:0!important;
    transform:none!important;
    width:100vw!important;height:100vh!important;
    max-width:none!important;max-height:none!important;
    border-radius:0!important;
  }
}
.cultState{border:1px solid #d8b25a;background:#fffaf0;color:#7a5b12;border-radius:6px;padding:6px 10px;margin:8px 0;font-size:13px;}
.cultState b{color:#b8860b;}

/* ---- 洞府炼丹房 ---- */
.alchCard h3{display:flex;justify-content:space-between;align-items:center;}
.alchRate{font-size:12px;font-weight:normal;color:#b8860b;}
.matOk{color:#28a745;}
.matLack{color:#dc3545;}
.alchCard button{margin-top:6px;}

/* ---- 真·世界BOSS 战斗状态提示 ---- */
.rbDead{border:1px solid #dc3545;background:#fff0f0;color:#c0392b;border-radius:6px;padding:6px 10px;margin:6px 0;font-size:13px;font-weight:bold;}
.rbDodge{border:1px solid #17a2b8;background:#e8f7fa;color:#0c7488;border-radius:6px;padding:6px 10px;margin:6px 0;font-size:13px;}
/* 洞府页：前三个功能紧凑置顶，炼丹房占据剩余空间并内部滚动，二者始终同屏 */
.dongfuRoot{display:flex;flex-direction:column;height:100%;overflow:hidden;gap:8px}
.dongfuTop{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;flex:0 0 auto}
.dongfuTop>.panelBox{padding:8px 10px}
.dongfuTop h3{font-size:14px;margin-bottom:2px}
.dongfuTop .kv{font-size:12px;margin:2px 0}
.dongfuTop button{font-size:12px;padding:4px 8px}
.dfTitle{margin:0}
.dfHint{margin:0}
.dongfuAlch{flex:1 1 auto;min-height:0;overflow:auto}
.dongfuAlch>.grid3{height:auto;gap:8px;grid-auto-rows:min-content}

/* ============ 个人主页 ============ */
.pfCard{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:4px}
.pfAvatar{width:72px;height:72px;min-width:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:bold;color:#fff;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.25);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pfAvName{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:normal;background:#fffdf7;border:1px solid var(--line);border-radius:8px;padding:0 6px;color:var(--text2);white-space:nowrap;text-shadow:none}
.pfHeadInfo{flex:1;min-width:0}
.pfName{font-size:19px;font-weight:bold;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pfTitleTag{font-size:12px;border:1px solid var(--line);border-radius:10px;padding:1px 8px;background:#fffef0}
.pfRealm{font-size:14px;color:var(--blue);font-weight:bold;margin-top:4px}
.pfMeta{font-size:12px;color:var(--text2);margin-top:4px}
.pfSec{font-size:13px;font-weight:bold;color:var(--brown);margin:10px 0 6px;border-left:3px solid var(--brown);padding-left:6px}
.pfStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pfStat{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:8px 4px;text-align:center}
.pfStat .v{font-size:15px;font-weight:bold;word-break:break-all}
.pfStat .k{font-size:11px;color:var(--text2);margin-top:2px}
.pfAttrs{display:flex;flex-direction:column;gap:4px}
.pfAttrRow{display:flex;align-items:center;gap:8px}
.pfAttrName{font-size:13px;font-weight:bold;width:16px;text-align:center}
.pfAttrBar{flex:1;height:10px;background:var(--barbg,#eee);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.pfAttrFill{height:100%;border-radius:5px;transition:width .3s}
.pfAttrVal{font-size:12px;font-weight:bold;width:44px;text-align:right}
.pfTitles{display:flex;flex-wrap:wrap;gap:6px}
.pfTitle{border:1px solid var(--line);border-radius:12px;padding:2px 10px;font-size:12px;background:var(--panel)}
.pfTitle.on{border-color:#b8860b;background:#fffae0;box-shadow:0 0 4px rgba(184,134,11,.35);font-weight:bold}
.pfPets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.pfPet{border:2px solid;border-radius:6px;padding:8px;background:var(--panel)}
.pfPetName{font-size:14px;font-weight:bold;display:flex;align-items:center;gap:6px}
.pfPetOn{font-size:10px;color:#fff;background:#28a745;border-radius:8px;padding:0 6px;font-weight:normal}
.pfPetInfo{font-size:11px;color:var(--text);margin-top:3px}
.pfPetInfo.mut{color:var(--text2)}
.pfKin{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.pfKinRow{display:flex;gap:10px;font-size:13px}
.pfKinRow .k{color:var(--text2);white-space:nowrap;min-width:76px}

/* ============ 自定义右键菜单 ============ */
.ctxMenu{position:fixed;z-index:9000;min-width:150px;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.22);padding:4px;user-select:none}
.ctxMenu.hide{display:none}
.ctxItem{padding:7px 14px;border-radius:4px;cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap}
.ctxItem:hover{background:var(--sel)}
.ctxSep{height:1px;background:var(--line);margin:4px 6px}