html.room-page, html.room-page body{
  width:100%;height:100%;
  overflow-x:hidden;overflow-y:auto;
}
html.room-page .page{
  width:1920px;height:100vh;min-height:100vh;
  box-sizing:border-box;
  overflow:hidden;transform:none;
  padding-top:52px;
}
html.room-page .nav{
  position:fixed;top:0;z-index:10;
  width:1920px;
}
.page .row{height:calc(100vh - 52px);align-items:flex-start}
.page .charle{
  position:fixed !important;
  top:52px;left:1540px;
  width:380px;height:calc(100vh - 52px);
  padding:24px 26px 18px 26px;
  z-index:9;
  display:flex;flex-direction:column;
}
.page .charle .log{flex:1;min-height:0;overflow:auto}
.page .charle .ask{flex:none}

.left-col{
  width:1540px;height:calc(100vh - 52px);flex:none;
  display:flex;flex-direction:row;
  background:#141518;
}
.charle .back{
  display:inline-block;align-self:flex-start;
  margin:0 0 14px 2px;padding:0;border:0;background:none;
  color:#c4a876;text-decoration:none;letter-spacing:.16em;font-size:13px;
}
.charle .back:hover{color:#e2c89a}
.charle h1{margin:0 0 14px}

.cat-rail{
  width:220px;flex:none;
  box-sizing:border-box;
  padding:18px 14px 24px;
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,#24262a 0%,#18191c 100%);
  border-right:1px solid rgba(196,168,118,.28);
}
.cat-h{
  margin:0 0 8px 8px;padding:0 0 0 12px;
  border-left:2px solid #c4a876;color:#f3efe6;
  font:600 15px/1.3 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.16em;
}
.cat-rail button{
  height:42px;width:100%;
  border:1px solid rgba(196,168,118,.38);
  background:transparent;
  color:#d8d4cc;
  font:600 14px/1.2 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.1em;border-radius:2px;cursor:pointer;
  text-align:left;padding:0 14px;
}
.cat-rail button:hover{border-color:rgba(220,192,140,.85);color:#f3efe6}
.cat-rail button.on{
  border-color:rgba(220,192,140,.9);
  background:rgba(196,168,118,.14);
  color:#f3efe6;
  box-shadow:inset 3px 0 0 #c4a876;
}

.list-pane{
  flex:1;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  background:
    linear-gradient(90deg,rgba(196,168,118,.04) 0,transparent 48px),
    linear-gradient(180deg,#1c1e22,#141518);
}
.list-h{
  flex:none;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 22px 4px;
}
.list-title{
  padding:0 0 0 12px;border-left:2px solid #c4a876;
  color:#f3efe6;letter-spacing:.14em;
  font:600 16px/1.3 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
.list-count{color:#c4a876;letter-spacing:.12em;font-size:13px}
.list-blurb{
  flex:none;
  margin:0 22px 8px;
  padding:8px 12px;
  border:1px solid rgba(196,168,118,.16);
  border-left:3px solid rgba(196,168,118,.45);
  background:rgba(28,26,22,.55);
  color:#b8b0a4;
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.65;
}
.list-head,.list-row{
  display:grid;
  grid-template-columns: 1.4fr 140px 150px 180px 110px 120px 150px;
  gap:10px;align-items:center;
}
.list-head{
  flex:none;padding:8px 22px 10px;
  color:#c4a876;font-size:12px;letter-spacing:.14em;
  border-bottom:1px solid rgba(196,168,118,.22);
  background:#18191c;
}
.list-body{flex:1;min-height:0;overflow:auto;padding:8px 16px 28px}
.list-row{
  min-height:48px;margin:0 0 5px;padding:8px 10px 8px 12px;
  border:1px solid rgba(196,168,118,.2);border-radius:2px;
  border-left:3px solid rgba(196,168,118,.38);
  background:rgba(26,28,32,.94);color:#d8d2c6;font-size:13px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.list-row:nth-child(even){background:rgba(30,32,36,.92)}
.list-row:hover{
  border-color:rgba(220,192,140,.5);
  border-left-color:rgba(220,192,140,.85);
  background:rgba(36,34,28,.95);
}
.list-row > span:not(.list-acts){color:#c8c2b6}
.list-name{color:#f3efe6;font-weight:600;line-height:1.35}
.list-en{display:block;margin-top:2px;color:#8f8a80;font-size:11px;font-weight:400}
.list-acts{display:flex;gap:8px;justify-content:flex-end}
.list-acts button{
  height:30px;padding:0 10px;cursor:pointer;border-radius:2px;letter-spacing:.1em;
  font:600 12px/1 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
.list-acts .buy{
  border:1px solid rgba(196,168,118,.7);
  background:linear-gradient(180deg,rgba(58,50,36,.95),rgba(28,24,18,.98));
  color:#f3efe6;
}
.list-acts .fav{border:1px solid rgba(196,168,118,.35);background:transparent;color:#c4a876}
.list-acts .fav.on{background:rgba(196,168,118,.16);border-color:#c4a876}
.list-empty{
  margin:18px 6px;
  padding:16px 18px;
  border:1px dashed rgba(196,168,118,.32);
  border-left:3px solid rgba(196,168,118,.5);
  background:rgba(28,26,22,.45);
  color:#c4c0b6;font-size:14px;line-height:1.8;
  letter-spacing:.04em;
}

.beian{margin:16px 24px 20px;font-size:12px}
.beian a{color:#9a958c;text-decoration:none;letter-spacing:.06em}
.beian a:hover{color:#c4a876}