/* 虛擬幣監控中心（crypto.html）：沿用 style.css 的 HUD 樣式，這裡只放這一頁的版面與元件 */

/* 位置（1920×1080） */
#c-quotes  { left: 24px;   top: 104px; width: 440px; height: 300px; }
#c-ma      { left: 24px;   top: 416px; width: 440px; height: 300px; }
#c-regime  { left: 24px;   top: 728px; width: 440px; height: 328px; }
#c-wallet  { left: 500px;  top: 104px; width: 920px; height: 262px; }
#c-kline   { left: 500px;  top: 378px; width: 920px; height: 400px; }
#c-heat    { left: 500px;  top: 790px; width: 920px; height: 266px; }
#c-rank    { left: 1456px; top: 104px; width: 440px; height: 330px; }
#c-movers  { left: 1456px; top: 446px; width: 440px; height: 250px; }
#c-trader  { left: 1456px; top: 708px; width: 440px; height: 348px; }

/* 主流幣即時報價 */
.cq-list { padding: 6px 14px 0; }
.cq { display: grid; grid-template-columns: 22px minmax(0, 1fr) 110px 70px; gap: 8px; align-items: center; height: 31px;
  border-bottom: 1px dashed rgba(90, 170, 255, .15); cursor: pointer; font-size: 13px; }
.cq:hover .nm, .cq.on .nm { color: #fff; }
.cq.on { background: rgba(53, 208, 255, .08); }
.cq .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--num); font-size: 10px; color: #001a33;
  background: linear-gradient(135deg, var(--cyan), #1a6dff); }
.cq .nm { color: #cfe5fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq .nm b { font-family: var(--num); font-weight: 500; color: #fff; margin-right: 6px; }
.cq .px { text-align: right; font-family: var(--num); color: #fff; font-size: 15px; transition: color .6s; }
.cq .px.flash-up { color: var(--up); } .cq .px.flash-down { color: var(--down); }
.cq .ch { text-align: right; font-family: var(--num); }

/* 多空 */
.cx-note { padding: 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: -6px; }
.cx-note b { color: #fff; font-weight: 500; }

/* K 線 */
.kl-tf { display: flex; gap: 4px; top: 6px; }
.kl-tf a { height: 24px; line-height: 22px; padding: 0 10px; font-size: 12px; border: 1px solid rgba(90, 180, 255, .35); color: #9cc3e8; cursor: pointer; }
.kl-tf a.on { background: linear-gradient(180deg, rgba(40, 140, 255, .75), rgba(20, 70, 170, .45)); border-color: #5fc8ff; color: #fff; }
.kl-head { display: flex; align-items: baseline; gap: 16px; padding: 8px 16px 0; }
.kl-head .p { font-family: var(--num); font-size: 34px; color: #fff; line-height: 1; }
.kl-head .c { font-family: var(--num); font-size: 16px; }
.kl-head .o { font-size: 12px; color: var(--muted); }
.kl-head .o b { font-family: var(--num); font-weight: 500; color: #cfe5fb; margin: 0 10px 0 4px; }
.kl-chart { height: 302px; margin: 4px 8px 0; }

/* 強弱排行 */
.hot .sig { font-size: 11px; padding: 0 5px; border: 1px solid; white-space: nowrap; }
.hot .sig.strong, .hot .sig.buy { color: var(--up); border-color: rgba(255, 77, 106, .55); }
.hot .sig.weak, .hot .sig.sell { color: var(--down); border-color: rgba(46, 230, 166, .5); }
.hot .sig.hold, .hot .sig.illiquid { color: var(--muted); border-color: rgba(127, 162, 200, .4); }
#rank .hot { grid-template-columns: 26px 1fr 70px 30px 38px; }

/* 策略／自動買賣 */
.tr-body { padding: 8px 14px 0; font-size: 13px; }
.tr-pnl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tr-pnl span { font-size: 12px; color: var(--muted); }
.tr-pnl b { font-family: var(--num); font-weight: 500; font-size: 30px; color: #fff; line-height: 1.1; }
.tr-pnl b.up { color: var(--up); text-shadow: 0 0 12px rgba(255, 77, 106, .5); }
.tr-pnl b.down { color: var(--down); text-shadow: 0 0 12px rgba(46, 230, 166, .45); }
.tr-pnl em { font-style: normal; font-size: 12px; color: var(--muted); width: 100%; }
.tr-rule { color: var(--ice); line-height: 1.6; margin-bottom: 8px; }
.tr-rule b { color: #fff; font-weight: 500; }
.tr-mode { font-size: 11px; padding: 1px 8px; border: 1px solid; margin-left: 8px; font-weight: 400; }
.tr-mode.paper { color: var(--gold); border-color: rgba(255, 209, 102, .6); }
.tr-mode.testnet { color: var(--cyan); border-color: rgba(53, 208, 255, .6); }
.tr-mode.live { color: var(--up); border-color: rgba(255, 77, 106, .7); }
.tr-mode.paused { color: var(--muted); border-color: rgba(127, 162, 200, .5); }
.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.tr-stats div { padding: 5px 7px; background: rgba(40, 130, 255, .08); border: 1px solid rgba(70, 170, 255, .16); min-width: 0; }
.tr-stats span { display: block; font-size: 11px; color: var(--muted); }
.tr-stats b { font-family: var(--num); font-weight: 500; font-size: 15px; color: #fff; white-space: nowrap; }
.tr-stats b.up { color: var(--up); } .tr-stats b.down { color: var(--down); }
.tr-btns { display: flex; gap: 8px; align-items: center; }
.tr-log { list-style: none; font-size: 12px; margin-top: 8px; }
.tr-log li { padding: 3px 0; border-bottom: 1px dashed rgba(90, 170, 255, .12); color: #d6ebff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-log li span { color: var(--dim); margin-right: 6px; font-family: var(--num); }
.tr-bt { height: 118px; }
.tr-table { width: 100%; font-size: 12.5px; margin-top: 4px; }
.tr-table td { padding: 3px 4px; border-bottom: 1px dashed rgba(90, 170, 255, .12); }
.tr-table td.num { text-align: right; font-family: var(--num); }
.tr-table .win { color: var(--gold); }
.tr-warn { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.tr-warn b { color: var(--warn); font-weight: 500; }

/* 我的資產 */
.wl-tabs { display: flex; gap: 4px; top: 6px; }
.wl-tabs a { height: 24px; line-height: 22px; padding: 0 10px; font-size: 12px; border: 1px solid rgba(90, 180, 255, .35); color: #9cc3e8; cursor: pointer; }
.wl-tabs a.on { background: linear-gradient(180deg, rgba(40, 140, 255, .75), rgba(20, 70, 170, .45)); border-color: #5fc8ff; color: #fff; }
.wl-body { display: grid; grid-template-columns: 400px 1fr; gap: 14px; padding: 8px 16px 0; height: 214px; }
.wl-main { display: flex; flex-direction: column; min-width: 0; }
.wl-lb { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.wl-pnl { font-family: var(--num); font-weight: 500; font-size: 58px; line-height: 1.05; color: #fff; letter-spacing: .5px; white-space: nowrap; transition: text-shadow .4s; }
.wl-pnl small { font-size: 22px; margin-left: 6px; color: var(--muted); }
.wl-pnl.up { color: var(--up); text-shadow: 0 0 18px rgba(255, 77, 106, .55); }
.wl-pnl.down { color: var(--down); text-shadow: 0 0 18px rgba(46, 230, 166, .5); }
.wl-pnl.tick { text-shadow: 0 0 30px #fff; }
.wl-sub { font-family: var(--num); font-size: 15px; color: var(--muted); margin: 2px 0 8px; white-space: nowrap; }
.wl-sub b { font-weight: 500; margin-right: 12px; }
.wl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wl-stats div { padding: 5px 7px; background: rgba(40, 130, 255, .08); border: 1px solid rgba(70, 170, 255, .16); min-width: 0; }
.wl-stats span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.wl-stats b { font-family: var(--num); font-weight: 500; font-size: 16px; color: #fff; white-space: nowrap; }
.wl-stats b.up { color: var(--up); } .wl-stats b.down { color: var(--down); }
.wl-foot { font-size: 11.5px; color: var(--dim); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-chart { height: 206px; min-width: 0; }
.wl-lock { grid-column: 1 / -1; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.8; }
.wl-lock b { color: #fff; font-size: 18px; font-weight: 500; }
.wl-lock a { color: var(--cyan); }
.tr-cmp { width: 100%; font-size: 12.5px; margin: 6px 0 4px; border-collapse: collapse; }
.tr-cmp td { padding: 3px 4px; border-bottom: 1px dashed rgba(90, 170, 255, .12); white-space: nowrap; }
.tr-cmp td.num { text-align: right; font-family: var(--num); }
.tr-cmp small { font-size: 10.5px; }
.tr-cmp tr.me td { background: rgba(53, 208, 255, .1); color: #fff; }
.tr-cmp i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; background: var(--dim); vertical-align: middle; }
.tr-cmp i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.tr-orders { width: 100%; font-size: 12px; margin-top: 6px; }
.tr-orders td { padding: 3px 4px; border-bottom: 1px dashed rgba(90, 170, 255, .12); white-space: nowrap; }
.tr-orders td.num { text-align: right; font-family: var(--num); }

/* 手機：跟總覽一樣直式堆疊 */
@media (max-width: 900px) {
  .kl-chart { height: 300px; }
  .kl-head .p { font-size: 28px; }
  .wl-body { grid-template-columns: 1fr; height: auto; }
  .wl-pnl { font-size: 44px; }
  .wl-stats { grid-template-columns: repeat(2, 1fr); }
  #c-regime .split { flex-direction: row; justify-content: center; }
  #rank .hot { grid-template-columns: 26px 1fr 60px 30px 38px; }
}

/* 面板內容一律在框內，超出就框內捲動 */
#c-quotes, #c-rank, #c-movers, #c-trader { display: flex; flex-direction: column; }
#quotes, #rank, #c-movers .movers, #trader { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#rank { padding-top: 4px; padding-bottom: 4px; }
#rank .hot { height: 27px; }
#trader::-webkit-scrollbar, #rank::-webkit-scrollbar { width: 6px; }
#trader::-webkit-scrollbar-thumb, #rank::-webkit-scrollbar-thumb { background: rgba(90, 180, 255, .4); border-radius: 3px; }
@media (max-width: 900px) {
  #quotes, #rank, #c-movers .movers, #trader { overflow: visible; }
}