/* X5 default markup; original artwork with CSS layout instead of legacy scripts. */
:root { --touhou-width: 1000px; --touhou-content: 960px; }
body {
  min-width: var(--touhou-width);
  background: #ffb6cb url(assets/header.jpg) no-repeat center top;
  color: #444;
  font-family: Tahoma, Helvetica, SimSun, sans-serif;
}
.wp { width: var(--touhou-content); }
a { color: #333; }
.xi2, .xi2 a { color: #369; }
#toptb { height: 28px; border-bottom: 1px solid #eee; background: #f2f2f2; line-height: 28px; }
#toptb .wp { width: var(--touhou-width); }
#hd { border: 0; background: none; }
#hd > .wp {
  position: relative;
  width: var(--touhou-width);
  padding-top: 247px;
  background: url(assets/panel.jpg) center bottom / 1000px 45px no-repeat;
}
#hd .hdc { box-sizing: border-box; height: 93px; min-height: 0; display: flow-root; padding: 20px 20px 18px 0; }
#hd h2 { position: absolute; top: 34px; right: 16px; padding: 0; }
#hd h2 a { display: block; width: 270px; height: 210px; font-size: 0; }
#hd h2 img { opacity: 0; }
#um { padding: 0; }
#nv {
  width: 1000px;
  box-sizing: border-box;
  height: 51px;
  padding: 0 0 15px 65px;
  background: url(assets/navigation.jpg) no-repeat;
}
#nv ul { height: 36px; }
#nv li { height: 35px; padding-right: 1px; background: none; font-weight: 400; }
#nv li a { height: 36px; padding: 0 20px; color: #4b4b4b; line-height: 36px; }
#nv li span, #qmenu { display: none; }
#nv li.a, #nv li.hover, #nv li.a a, #nv li a:hover { background: none; color: #4b4b4b; }
#nv li a:hover, #nv li.hover { background: linear-gradient(#fff9, #ffffff20); }
#scbar { box-sizing: border-box; width: 984px; height: 45px; margin: 0 8px; border: solid #ddd; border-width: 0 1px 1px; background: #f9f9f9; line-height: 44px; }
#mu { background: #f2f2f2; }
#wp { display: flow-root; padding: 0 20px 25px; background: #f2f2f2 url(assets/panel.jpg) repeat-y center top; }
#pt, #chart { background: transparent; }
#chart { margin-bottom: 5px; }
#ct { background: none; }
.bm, .tl, .bml { border-color: #cdcdcd; }
.bm { border-radius: 0; background: #fff; }
#ct .fl { border: 0; background: none; }
#ct .fl .bm { margin-bottom: 10px; border: 0; }
/* The old 33px bevel is drawn in CSS; text remains native X5 heading markup. */
#ct .bm .bm_h, #online .bm_h {
  box-sizing: border-box;
  height: 33px;
  margin-bottom: 5px;
  padding: 0 0 0 10px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(#ededed 0, #eaeaea 46%, #d9d9d9 47%, #d9d9d9 100%);
  box-shadow: inset 0 0 0 1px #ccc, inset 0 2px #fff;
  line-height: 33px;
}
#ct .bm_h h1, #ct .bm_h h2, #ct .bm_h h3, #ct .bm_h a { color: #666; }
#ct .fl .bm .bm_c { padding: 0 10px; border: 1px solid #fff; }
.fl_icn { width: 170px; }
.fl_icn img { width: 170px !important; height: 70px; object-fit: fill; }
.fl_icn img[src*="/common/forum"] { width: 31px !important; height: 29px; }
.fl_row td { border-color: #cdcdcd; }
#online { padding: 10px; background: #fff; }
#online .bm_c { border: 1px solid #eee; }
#online .bm_h { margin-bottom: 5px; }
#ft { box-sizing: border-box; width: 1000px; height: 150px; margin: 0 auto; padding: 35px 20px 0; border: 0; background: url(assets/footer.jpg) no-repeat; color: #666; }
#flk { max-width: 510px; padding: 8px 10px; background: #ffffffbf; border-radius: 7px; }
#frt { padding-top: 8px; }

#touhou-overview { padding-top: 0; margin-bottom: 20px; }
#touhou-overview > h3 { height: 35px; padding-left: 6px; font-weight: 400; color: #888; line-height: 35px; }
.touhou-overview-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr) 170px; gap: 6px; padding: 0 1px; }
.touhou-tabs { display: flex; height: 28px; border-bottom: 1px solid #ddd; white-space: nowrap; }
.touhou-tabs button, .touhou-tabs > span { display: block; box-sizing: border-box; height: 29px; padding: 0 6px; border: 1px solid transparent; border-bottom: 0; background: none; color: #666; font: inherit; line-height: 28px; cursor: pointer; }
.touhou-tabs .current { border-color: #ddd; background: #fff; color: #0096c2; font-weight: bold; }
.touhou-overview-body { height: 194px; overflow: hidden; }
#touhou-overview .block { margin: 0; }
.touhou-topics li { display: flex; align-items: center; gap: 6px; height: 23px; border-bottom: 1px dashed #ddd; line-height: 23px; }
.touhou-topics li > a { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.touhou-topics li > span { max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; }
.touhou-topics li::before { content: ""; flex: 0 0 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 4px 3px, #fff, #ffd529 60%, #d5a000); }
.touhou-topics li:nth-child(3n)::before { filter: hue-rotate(70deg); }
.touhou-topics li:nth-child(4n)::before { filter: hue-rotate(280deg); }
.touhou-topics li:nth-child(5n)::before { filter: hue-rotate(170deg); }
.touhou-slides { position: relative; height: 190px; }
.touhou-slides > a { position: absolute; inset: 0; }
.touhou-slides img { display: block; width: 320px; height: 190px; object-fit: cover; }
.touhou-slides > a > span { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; padding: 0 5px; color: #fff; background: #0008; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.touhou-slide-controls { position: absolute; top: 4px; left: 4px; display: flex; gap: 2px; }
.touhou-slide-controls button { padding: 0 3px; border: 0; color: #fff; background: #6669; font: inherit; cursor: pointer; }
.touhou-slide-controls button.current { background: #f60; }
.touhou-members { border: 1px solid #ddd; border-top: 0; background: #e8f1f5; }
.touhou-star { padding: 10px 14px; }
.touhou-star img { display: block; width: 120px; height: 120px; margin-bottom: 8px; object-fit: contain; }
.touhou-star strong, .touhou-star > span { display: block; font-weight: 400; }
#touhou-active { padding: 0 6px; }
/* Shared board/thread surfaces and controls follow the old neutral palette. */
.pls { border-color: #fff; background: #f2f2f2; }
.ad .pls, .ad .plc { background: #fff; }
.pl { border-color: #cdcdcd; }
#threadlist .th { height: 33px; background: linear-gradient(#ededed 46%, #d9d9d9 47%); border-radius: 5px; }
#threadlist th, #threadlist td { border-bottom-color: #f2f2f2; }
.pnc, a.pnc, .npg, .npg:hover { border: 1px solid #999; color: #fff; background: linear-gradient(#999, #666); box-shadow: inset 0 1px #ddd; }
.pg a, .pg strong, .pgb a { border-color: #e4e4e4; }
.pg strong { background: #eee; }
.bm_h .o em.tg_yes, .bm_h .o em.tg_no { height: 10px; margin-top: 10px; background: none; font: 12px/10px Tahoma, sans-serif; color: #777; }
.bm_h .o em.tg_yes::before { content: "+"; }
.bm_h .o em.tg_no::before { content: "−"; }
.chart::before { vertical-align: top; }
.touhou-star:empty::after { content: "今日暂无发帖会员"; color: #999; }
.touhou-topics:empty::after { content: "暂无数据"; display: block; padding: 15px; color: #999; }

.pgs .pgsbtn, .pgs .pgsbtn:hover { padding: 5px 12px; border: 1px solid #999; border-radius: 3px; background: linear-gradient(#999, #666); font-size: 12px; line-height: 16px; letter-spacing: 0; box-shadow: inset 0 1px #ddd; }

#hd .fastlg { padding-top: 0; }
#hd .fastlg .pns { margin-bottom: 0; }
input, button, textarea, select { font-family: Tahoma, Helvetica, SimSun, sans-serif; }
#ct .bm_h h1, #ct .bm_h h2, #ct .bm_h h3 { padding-right: 10px; }
#ct .bm_h .o { padding-right: 10px; }
.scbar_icon_td { width: 21px; }
#scbar_txt { padding: 1px 2px; border-color: #fff; }
#scbar_type { height: 22px; line-height: 22px; border-color: #fff; background: #fff; }