/* IE11 兼容：不用 CSS 变量、不用 flex、不用 grid。深色底 + 高对比文字。 */
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #14161c; color: #d8dbe2;
  font: 12px/1.5 "Microsoft YaHei", "SimSun", Tahoma, sans-serif;
  overflow: hidden;
}
/* 顶部一行：左边页面切换，右边连接状态（绿点 + 文字） */
#topbar {
  height: 32px; padding-left: 4px;
  background: #191c24; border-bottom: 1px solid #2b3040;
  overflow: hidden;
}
#tabs { float: left; }
#hd-s {
  float: right; height: 31px; line-height: 31px;
  padding: 0 12px; color: #8d94a6;
  border-left: 1px solid #262b36;
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; margin-right: 6px; }
.dot.on { background: #4ec46a; }
.dot.off { background: #b04a4a; }

.tab {
  display: block; float: left; padding: 0 14px;
  height: 29px; line-height: 29px;
  color: #98a0b3;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.tab:hover { color: #d8dbe2; }
.tab.on { color: #e8c979; border-bottom-color: #e8c979; background: #20242e; }

#body { position: absolute; top: 33px; bottom: 71px; left: 0; right: 0; overflow: auto; }
.pane { display: none; padding: 10px; }
.pane.on { display: block; }

table.kv { width: 100%; border-collapse: collapse; }
table.kv th {
  text-align: left; width: 84px; color: #8d94a6; font-weight: normal;
  padding: 4px 0; border-bottom: 1px solid #232734;
}
table.kv td { padding: 4px 0; border-bottom: 1px solid #232734; color: #dfe3ea; }

.sec {
  margin: 12px 0 6px; color: #e8c979; font-size: 11px;
  border-left: 3px solid #e8c979; padding-left: 6px; letter-spacing: 1px;
}
.cur {
  padding: 8px; background: #1c2029; border: 1px solid #2b3040;
  color: #9fd8a8;
}
.row { margin: 6px 0; }
.inp {
  background: #0f1116; border: 1px solid #2f3547; color: #dfe3ea;
  padding: 4px 6px; font: 12px "Microsoft YaHei", Tahoma, sans-serif;
  width: 240px; outline: none;
  /* 内嵌 IE 控件里输入法默认是关的，这里强制激活，否则只能打英文 */
  ime-mode: active;
}
.inp:focus { border-color: #e8c979; ime-mode: active; }
input[type="text"], textarea { ime-mode: active; }
/* 搜索框用 textarea：MSHTML 里它的 IME 走编辑引擎，比 input 更容易触发候选框。
   单行用法，所以要自己压高度、禁掉拉伸和平滚动条。 */
.inp.ta {
  height: 26px; line-height: 18px; resize: none; overflow: hidden;
  padding: 3px 6px; vertical-align: middle;
}
.inp.sm { width: 110px; }
.inp.xs { width: 60px; }
.inp.xs2 { width: 84px; }
select.inp { padding: 3px 2px; }
.inp[disabled] { opacity: .4; }
.lb { display: inline-block; width: 56px; color: #8d94a6; }
.btn {
  background: #262c3a; border: 1px solid #39415a; color: #d8dbe2;
  padding: 5px 12px; cursor: pointer; font: 12px "Microsoft YaHei", Tahoma, sans-serif;
  margin-right: 6px;
}
.btn:hover { background: #303849; border-color: #4d5877; }
.btn.pri { background: #6b4f18; border-color: #a3781f; color: #ffe6ae; }
.btn.pri:hover { background: #7d5d1e; }
.btn[disabled] { opacity: .45; cursor: default; }

.list {
  margin-top: 8px; max-height: 190px; overflow: auto;
  border: 1px solid #2b3040; background: #101319;
}
/* 物品列表固定 6 行高度：行数再多也只占这一块，靠滚动 + 翻页看更多 */
.list.fixed { height: 156px; max-height: 156px; }
.li {
  padding: 3px 8px; line-height: 20px; border-bottom: 1px solid #1c212b; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.li:hover { background: #1b2130; }
.li.on { background: #2a3550; color: #ffe6ae; }
.li .nm { color: #dfe3ea; }
.li .meta { color: #7c8496; font-size: 11px; margin-left: 6px; }
.empty { padding: 12px; color: #666e80; text-align: center; }
.dim { color: #7c8496; }
.pager { margin: 6px 0 2px; }
.btn.sm { padding: 3px 10px; font-size: 11px; }
.pg { color: #8d94a6; font-size: 11px; margin: 0 8px; }

#log {
  position: absolute; bottom: 0; left: 0; right: 0; height: 62px;
  background: #0d0f14; border-top: 1px solid #2b3040;
  padding: 4px 8px; overflow: auto; font: 11px/1.45 Consolas, monospace;
  color: #8d94a6;
}
#log .ok { color: #6fcf87; }
#log .err { color: #e07070; }
#log .tip { color: #e8c979; }
.hint { color: #666e80; font-size: 11px; margin-top: 6px; }

/* 一键换装：IE11 兼容，float 两栏 */
.lo-wrap { margin-top: 4px; overflow: hidden; }
.lo-col { float: left; box-sizing: border-box; }
.lo-left { width: 42%; padding-right: 10px; }
.lo-right { width: 58%; border-left: 1px solid #2b3040; padding-left: 10px; min-height: 260px; }
.lo-slots { margin-top: 6px; border: 1px solid #2b3040; background: #101319; max-height: 166px; overflow: auto; }
.lo-slot { padding: 3px 8px; border-bottom: 1px solid #1c212b; font-size: 11px; color: #9aa2b4; }
.lo-slot b { color: #dfe3ea; font-weight: normal; }
.lo-slot .id { color: #e8c979; margin-left: 8px; }
.lo-scheme-meta { color: #7c8496; font-size: 11px; margin-left: 6px; }
.lo-empty { padding: 10px; color: #666e80; text-align: center; }
#lo-cooldown { margin-left: 8px; }

/* 背包页：刚发进去那一行的「新」标记 */
.li .new {
  font-style: normal; font-size: 11px; padding: 0 4px; margin-left: 4px;
  background: #e8c979; color: #1a1e27; border-radius: 2px;
}

/* 关于页：整体是一列居中内容（介绍卡片 + 组合面板），宽度固定 692 */
/* 关于页整块在可视区里垂直居中：绝对定位 + translateY（IE11 支持 transform） */
#pane-about.on { display: block; position: relative; height: 100%; box-sizing: border-box; }
#pane-about .about-inner {
  position: absolute; top: 50%; left: 10px; right: 10px;
  -ms-transform: translateY(-50%); transform: translateY(-50%);
}
.about-card {
  width: 712px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box;
  background: #1a1e27; border: 1px solid #2b3040;
}
.about-name { color: #e8c979; font-size: 14px; letter-spacing: 1px; }
.about-line { color: #8d94a6; margin-top: 4px; }

.box { margin-top: 12px; border: 1px solid #2b3040; background: #171b23; }
/* 三个分组框合成一个整体面板：外框统一，中间竖线分隔 */
.cols {
  width: 712px; margin: 12px auto 0;
  border: 1px solid #2b3040; background: #171b23; overflow: hidden;
}
.cols .box { margin-top: 0; min-height: 264px; float: left; border: 0; background: transparent; box-sizing: border-box; }
.cols .box-l { width: 353px; }
.cols .box-m { width: 178px; border-left: 1px solid #3f4759; background: #14171d; }
.cols .box-r { width: 179px; border-left: 1px solid #3f4759; background: #14171d; }
.box-hd {
  height: 26px; line-height: 26px; padding: 0 10px;
  background: #1d2230; border-bottom: 1px solid #2b3040;
  color: #e8c979; letter-spacing: 1px;
}
.box-bd { padding: 10px; overflow: hidden; }
.box-note { clear: both; color: #666e80; font-size: 11px; padding-top: 8px; }

.qr-card {
  float: left; width: 158px; margin: 0 8px 0 0; box-sizing: border-box;
  background: #1a1e27; border: 1px solid #2b3040; padding: 8px;
}
.qr-title { color: #e8c979; letter-spacing: 1px; margin-bottom: 8px; }
.qr-box {
  width: 140px; height: 140px; position: relative; overflow: hidden; box-sizing: border-box;
  background: #0f1116; border: 1px dashed #3a4154; padding: 3px; text-align: center;
}
.qr-box img { display: block; width: 132px; height: 132px; background: #fff; }
.qr-miss { display: none; padding-top: 44px; color: #666e80; line-height: 1.8; }
.qr-box.miss .qr-miss { display: block; }
.qr-path { color: #4c5365; font-size: 11px; margin-top: 2px; }