* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0b0e13; color: #cfd6df; font: 14px/1.5 "Microsoft YaHei", system-ui, sans-serif; }
.warnbar { background: #3a1212; color: #ffb3b3; text-align: center; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #5a1d1d; }

header { display: flex; align-items: center; gap: 24px; padding: 12px 20px; background: #11151c; border-bottom: 1px solid #1d2530; }
.brand { font-size: 20px; font-weight: 700; color: #2ebd6b; }
.brand .en { color: #8b97a6; font-size: 13px; font-weight: 400; }
.giwrap { display: flex; align-items: baseline; gap: 12px; }
.gival { font-size: 30px; font-weight: 700; color: #e6e6e6; font-variant-numeric: tabular-nums; }
.gimeta { display: flex; flex-direction: column; }
.chg { font-size: 13px; font-variant-numeric: tabular-nums; }
.rname { font-size: 12px; color: #8b97a6; }
.links { margin-left: auto; display: flex; gap: 16px; }
.links a { color: #8b97a6; cursor: pointer; font-size: 13px; }
.links a:hover { color: #2ebd6b; }

.advice { background: #0f1620; color: #9fe0b5; padding: 8px 20px; font-size: 13px; border-bottom: 1px solid #1d2530; }

main { display: flex; height: calc(100vh - 140px); }
aside { width: 290px; overflow-y: auto; background: #0d1118; border-right: 1px solid #1d2530; }
aside .hd { padding: 10px 14px; color: #8b97a6; font-size: 12px; position: sticky; top: 0; background: #0d1118; }
.chan { padding: 9px 14px; border-bottom: 1px solid #161c25; cursor: pointer; }
.chan:hover { background: #131a24; }
.chan.sel { background: #16241b; border-left: 3px solid #2ebd6b; }
.chan .cn { font-size: 13px; color: #dfe6ee; }
.chan .cd { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chan .cd small { font-size: 11px; font-weight: 400; }
.chan .ct { font-size: 11px; color: #6f7b8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo { font-size: 10px; color: #c79a3a; border: 1px solid #5a4a1d; border-radius: 3px; padding: 0 3px; }
.live { font-size: 10px; color: #2ebd6b; border: 1px solid #1d5a35; border-radius: 3px; padding: 0 3px; }
.down { font-size: 10px; color: #e54a4a; border: 1px solid #5a1d1d; border-radius: 3px; padding: 0 3px; }
.cgroup { padding: 6px 14px 3px; color: #5fa0d6; font-size: 12px; font-weight: 700; background: #0a0f16; border-top: 1px solid #161c25; }
.ctygroup { padding: 3px 14px 2px 20px; color: #7b8694; font-size: 11px; }
.downhd { color: #e07a7a; }
.pend { font-size: 10px; color: #6f7b8a; }
.idx { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-bottom: 1px solid #141a23; cursor: pointer; }
.idx:hover { background: #131a24; }
.idx.sel { background: #16241b; border-left: 3px solid #2ebd6b; }
.idx .in { flex: 1; font-size: 12px; color: #dfe6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx .iv { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.idx .iv small { font-size: 11px; font-weight: 400; }
.idx .ic { font-size: 10px; color: #6f7b8a; width: 34px; text-align: right; }
.idx.g { background: #11241a; } .idx.g .in { color: #2ebd6b; font-weight: 700; }
.idx.t .in { color: #9bc7ef; }

.chartwrap { flex: 1; display: flex; flex-direction: column; }
.chartbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px; background: #11151c; border-bottom: 1px solid #1d2530; }
.tfs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#curTitle { font-weight: 700; color: #e6e6e6; }
.tfs button { background: #1a212b; color: #8b97a6; border: none; padding: 4px 10px; margin-right: 4px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.tfs button.on { background: #1d3a28; color: #2ebd6b; }
.curmeta { margin-left: auto; font-size: 13px; color: #cfd6df; }
#chart { flex: 1; min-height: 380px; }
.curtip { padding: 8px 16px; font-size: 13px; color: #9fe0b5; background: #0f1620; border-top: 1px solid #1d2530; }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); align-items: center; justify-content: center; z-index: 99; }
.modal .box { background: #11161e; border: 1px solid #2a3340; border-radius: 8px; max-width: 720px; max-height: 80vh; overflow-y: auto; padding: 24px 28px; position: relative; }
.modal .x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #8b97a6; font-size: 18px; cursor: pointer; }
.modal h2 { color: #2ebd6b; margin-bottom: 12px; font-size: 18px; }
.modal p { margin-bottom: 10px; font-size: 13px; color: #b9c2cd; }
.modal b { color: #dfe6ee; }
.wlink { color: #6bd0ff !important; font-weight: 700; }
.wsig-on { background: #16302a; color: #2ebd6b; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.wsig-off { background: #20262f; color: #9fb3c8; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.wadvice { color: #ffd479; font-size: 13px; }
.wacc { color: #9fb3c8; font-size: 12px; background: #0f1620; padding: 6px 10px; border-radius: 6px; }
.wtabwrap { max-height: 46vh; overflow: auto; margin: 8px 0; }
.wtab { border-collapse: collapse; width: 100%; font-size: 11px; }
.wtab th { position: sticky; top: 0; background: #11161e; color: #8b97a6; padding: 4px 6px; font-weight: 400; }
.wtab td { text-align: center; padding: 4px 6px; color: #fff; white-space: nowrap; }
.wtab td.wreg { text-align: left; color: #dfe6ee; background: #131a24; position: sticky; left: 0; }
.wnote { color: #6f7b8a; font-size: 11px; margin-top: 8px; }
.slink { color: #c79af0 !important; font-weight: 700; }
.satimgwrap { margin: 8px 0; text-align: center; }
.satimg { max-width: 100%; border: 1px solid #2a3340; border-radius: 6px; }
.satcap { color: #8b97a6; font-size: 11px; margin-top: 4px; }

/* ===== 响应式：手机 / 平板自适应（整站） ===== */
@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .brand { font-size: 17px; }
  .brand .en { font-size: 12px; }
  .gival { font-size: 22px; }
  .links { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; gap: 8px 12px; }
  .links a { font-size: 12px; }
  .advice { padding: 7px 12px; font-size: 12px; }
  main { flex-direction: column; height: auto; }
  aside { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid #1d2530; }
  .chartwrap { width: 100%; }
  #chart { flex: none; height: 52vh; min-height: 280px; }
  .chartbar { padding: 6px 10px; gap: 6px 10px; }
  .curmeta { margin-left: 0; width: 100%; }
  .tfs button { padding: 5px 9px; font-size: 12px; }
  .modal .box { max-width: 94vw; width: 94vw; padding: 16px; max-height: 90vh; }
  .modal h2 { font-size: 16px; }
  .modal .x { top: 8px; right: 10px; }
  .wtab { font-size: 10px; }
  .wtab th, .wtab td { padding: 3px 4px; }
  #realmIntro, #tokenPanel { font-size: 12px; }
}
@media (max-width: 460px) {
  .brand { font-size: 15px; }
  .gival { font-size: 18px; }
  .links a { font-size: 11px; }
  aside { max-height: 34vh; }
  #chart { height: 48vh; }
  .tfs button { padding: 4px 7px; font-size: 11px; margin-right: 2px; }
}