/* BTC 四层指标监控面板 —— 深色交易终端风格（非 indigo/purple） */
:root {
  --bg: #0b0e11;
  --card: #151a21;
  --card-border: #232a33;
  --text: #eaecef;
  --muted: #848e9c;
  --up: #0ecb81;
  --down: #f6465d;
  --amber: #f0b90b;
  --neutral: #5b6672;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.muted { color: var(--muted); font-size: 12px; }

header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
h1 { font-size: 18px; font-weight: 700; }
.symbol { color: var(--muted); font-size: 13px; border: 1px solid var(--card-border); padding: 2px 8px; border-radius: 6px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.conn-dot.ok { background: var(--up); box-shadow: 0 0 6px var(--up); }
.conn-dot.off { background: var(--down); }

.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; }

.ticker-bar { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tick-main { display: flex; align-items: baseline; gap: 10px; }
.tick-label { color: var(--muted); font-size: 12px; }
.tick-price { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tick-change { font-size: 15px; font-weight: 600; }
.up { color: var(--up); }
.down { color: var(--down); }
.tick-grid { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 22px; flex: 1; min-width: 480px; }
.tick-grid div { display: flex; flex-direction: column; }
.tick-grid b { font-size: 14px; font-variant-numeric: tabular-nums; }

.banner { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid; }
.banner.bull { background: rgba(14, 203, 129, 0.10); border-color: var(--up); }
.banner.bear { background: rgba(246, 93, 109, 0.10); border-color: var(--down); }
.banner.neutral { background: rgba(91, 102, 114, 0.10); border-color: var(--neutral); }
.banner-label { color: var(--muted); font-size: 12px; }
.banner-text { font-size: 20px; font-weight: 700; }
.banner-score { margin-left: auto; color: var(--muted); font-size: 13px; }

.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab { background: var(--card); color: var(--muted); border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 18px; font-size: 14px; cursor: pointer; }
.tab.active { color: var(--text); border-color: var(--amber); background: rgba(240, 185, 11, 0.08); }

.layer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.layer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.layer h2 { font-size: 15px; }
.badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.bull { background: rgba(14, 203, 129, 0.15); color: var(--up); }
.badge.bear { background: rgba(246, 93, 109, 0.15); color: var(--down); }
.badge.neutral { background: rgba(91, 102, 114, 0.15); color: var(--muted); }
.layer-note { color: var(--muted); font-size: 12px; margin-bottom: 8px; min-height: 34px; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; border-top: 1px dashed rgba(35, 42, 51, 0.6); }
.kv span { color: var(--muted); }
.kv b { font-variant-numeric: tabular-nums; }

.aux-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
@media (max-width: 900px) { .aux-grid { grid-template-columns: 1fr; } }
.aux h2 { font-size: 14px; margin-bottom: 8px; font-weight: 600; }
.chart-box { height: 240px; position: relative; }

footer { margin-top: 16px; font-size: 12px; text-align: center; }