/* Layout: a 16:9 wall board. Row 1 = prices (largest type), row 2 = leverage and sentiment,
   row 3 = flows and cycle. Everything is sized off --u so it scales with the screen. */
:root {
  --bg: #0a1017;
  --panel: #111a24;
  --line: #1d2935;
  --fg: #e9eef3;
  --dim: #7f8d9b;
  --accent: #f2b544;
  --up: #3ddc97;
  --down: #ff5f6d;
  --cool: #5aaeff;
  --mid: #6b7a88;
  --warm: #c9794f;
  --f-num: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-label: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --u: min(1vw, 1.78vh);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-label);
  padding: calc(var(--u) * 1.2) max(16px, calc(var(--u) * 1.2));
  overflow: hidden;
}
.board { height: 100%; display: grid; grid-template-rows: auto 1.35fr 1fr 1fr; gap: calc(var(--u) * 0.9); }
.row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 0.9); min-height: 0; }

header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-family: var(--f-num); font-weight: 600; font-size: calc(var(--u) * 1.5); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.brand b { color: var(--accent); font-weight: 700; }
.status { display: flex; align-items: baseline; gap: calc(var(--u) * 2); font-family: var(--f-mono); font-size: calc(var(--u) * 0.95); color: var(--dim); }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--mid); margin-right: .45em; }
.dot.live { background: var(--up); animation: pulse 2s ease-in-out infinite; }
.dot.stale { background: var(--down); }
#status.stale { color: var(--down); }
.clock { font-family: var(--f-num); font-weight: 600; font-size: calc(var(--u) * 2.4); color: var(--fg); letter-spacing: .02em; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  position: relative;
  overflow: hidden;
}
.tile.alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--down); }
.tile.stale > :not(.label) { opacity: .4; }
.tile.stale .label::after, .tile.off .label::after {
  font-family: var(--f-mono); font-size: calc(var(--u) * 0.75); letter-spacing: .08em;
  padding: .1em .45em; border-radius: 3px; margin-left: auto;
}
.tile.stale .label::after { content: "STALE"; color: var(--down); border: 1px solid var(--down); }
.tile.off .label::after { content: "NOT CONFIGURED"; color: var(--dim); border: 1px solid var(--line); }
.tile.off > :not(.label) { opacity: .25; }
.tile.err .label::after {
  content: "NO DATA"; color: var(--down); border: 1px solid var(--down);
  font-family: var(--f-mono); font-size: calc(var(--u) * 0.75); letter-spacing: .08em;
  padding: .1em .45em; border-radius: 3px; margin-left: auto;
}
.tile[data-error]::after {
  content: attr(data-error);
  position: absolute; right: calc(var(--u) * 1.3); top: calc(var(--u) * 3.2);
  font-family: var(--f-mono); font-size: calc(var(--u) * 0.75); color: var(--down);
  max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.label { font-size: calc(var(--u) * 1.0); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
.label .sub { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: calc(var(--u) * 0.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.num { font-family: var(--f-num); font-weight: 600; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--accent); } .muted { color: var(--dim); }
.right { text-align: right; }

/* Tickers */
.ticker .sym { font-family: var(--f-num); font-weight: 700; font-size: calc(var(--u) * 2.2); letter-spacing: .06em; color: var(--fg); }
.ticker .price { font-size: calc(var(--u) * 6.4); margin-top: calc(var(--u) * 0.4); white-space: nowrap; }
.ticker .price small { font-size: .5em; color: var(--dim); font-weight: 500; margin-right: .08em; vertical-align: .55em; }
.ticker .chg { font-family: var(--f-num); font-weight: 600; font-size: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 0.3); display: flex; gap: .6em; align-items: baseline; }
.ticker .chg .d7 { font-size: .6em; color: var(--dim); font-weight: 500; }
/* Daily RSI + Bollinger row */
.ind { display: flex; gap: calc(var(--u) * 1.6); align-items: center; margin-top: calc(var(--u) * 0.7); font-family: var(--f-mono); }
.ind-item { display: flex; align-items: center; gap: .5em; min-width: 0; }
.ind-item.bb { flex: 1; }
.ind-label { font-size: calc(var(--u) * 0.8); color: var(--dim); letter-spacing: .06em; white-space: nowrap; }
.ind-val { font-family: var(--f-num); font-weight: 600; font-size: calc(var(--u) * 1.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-val.bb-text { font-size: calc(var(--u) * 1.2); }
.ind-val.hot { color: var(--down); } .ind-val.cold { color: var(--cool); }
.chip { font-size: calc(var(--u) * 0.72); letter-spacing: .08em; text-transform: uppercase; padding: .1em .4em; border-radius: 3px; white-space: nowrap; }
.chip:empty { display: none; }
.chip.hot { color: var(--down); border: 1px solid var(--down); }
.chip.cold { color: var(--cool); border: 1px solid var(--cool); }
/* Band track: lower band at 1/6, upper at 5/6 of the width (%B -0.25..1.25) */
.bb-track { position: relative; flex: 1; min-width: calc(var(--u) * 4); height: calc(var(--u) * 0.5); border-radius: 3px;
  background: linear-gradient(90deg, transparent 16.67%, color-mix(in srgb, var(--fg) 14%, transparent) 16.67% 83.33%, transparent 83.33%);
  box-shadow: inset 0 0 0 1px var(--line); }
.bb-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--dim); }
.bb-marker { position: absolute; top: 50%; left: 50%; width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8); border-radius: 50%;
  background: var(--fg); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--panel); }
.bb-marker.hot { background: var(--down); } .bb-marker.cold { background: var(--cool); }

.spark { flex: 1; min-height: calc(var(--u) * 3); margin-top: calc(var(--u) * 0.6); width: 100%; display: block; }

.big { font-size: calc(var(--u) * 5); margin-top: auto; }
.chg-line { font-size: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 0.3); }
.chg-line small { color: var(--dim); font-size: .6em; }
.meta { font-family: var(--f-mono); font-size: calc(var(--u) * 0.95); color: var(--dim); margin-top: calc(var(--u) * 0.5); }
.meta b { color: var(--fg); font-weight: 500; }

.pill { font-family: var(--f-num); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--u) * 1.5); padding: .12em .55em; border-radius: 4px; align-self: flex-start; margin-top: calc(var(--u) * 0.6); border: 1px solid var(--line); color: var(--dim); }
.pill.hot, .pill.fear-x { color: var(--down); border-color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); }
.pill.warm, .pill.greed { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pill.negative { color: var(--cool); border-color: var(--cool); background: color-mix(in srgb, var(--cool) 14%, transparent); }
.pill.fear { color: var(--warm); border-color: var(--warm); background: color-mix(in srgb, var(--warm) 14%, transparent); }
.pill.greed-x { color: var(--up); border-color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }

/* Fear & Greed */
.fg-wrap { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.2); margin-top: auto; }
.gauge { width: 52%; max-width: 100%; height: auto; }
.fg-num { font-size: calc(var(--u) * 5.2); }

/* Funding scale */
.scale { margin-top: calc(var(--u) * 0.8); }
.scale .bar, .scale .ticks { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.6fr; }
.scale .bar { height: calc(var(--u) * 0.55); border-radius: 3px; overflow: hidden; gap: 2px; }
.scale .bar i:nth-child(1) { background: var(--cool); }
.scale .bar i:nth-child(2) { background: var(--mid); }
.scale .bar i:nth-child(3) { background: var(--accent); }
.scale .bar i:nth-child(4) { background: var(--down); }
.scale .ticks { font-family: var(--f-mono); font-size: calc(var(--u) * 0.75); color: var(--dim); margin-top: .35em; }
.track { position: relative; }
.marker { position: absolute; top: calc(var(--u) * -0.35); left: 0; width: 3px; height: calc(var(--u) * 1.25); background: var(--fg); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--panel); }

/* Liquidations */
.split { display: flex; height: calc(var(--u) * 1.4); border-radius: 3px; overflow: hidden; margin-top: calc(var(--u) * 0.8); gap: 2px; background: var(--line); }
.split .l { background: var(--down); } .split .s { background: var(--up); }
.split-legend { display: flex; justify-content: space-between; font-family: var(--f-num); font-weight: 600; font-size: calc(var(--u) * 1.7); margin-top: .3em; font-variant-numeric: tabular-nums; }
.split-legend small { display: block; font-family: var(--f-label); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }

/* ETF */
.etf-head { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.etf-head .meta { margin: 0; }
.etf-total { font-size: calc(var(--u) * 3.4); }
.etf { flex: 1; width: 100%; min-height: 0; margin-top: calc(var(--u) * 0.4); }

/* Cycle zones */
.zones { margin-top: calc(var(--u) * 0.8); }
.zones .bar { display: flex; height: calc(var(--u) * 0.55); border-radius: 3px; overflow: hidden; gap: 2px; }
.zones .bar i { opacity: .35; }
.zones .bar i.on { opacity: 1; }
.zones .names { display: flex; font-family: var(--f-mono); font-size: calc(var(--u) * 0.72); color: var(--dim); margin-top: .35em; }
.zones .names span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zones .names span.on { color: var(--fg); }

/* Narrow screens: stack and scroll */
@media (max-width: 900px) {
  :root { --u: 3.2vw; }
  html, body { height: auto; }
  body { overflow: auto; }
  .board { height: auto; grid-template-rows: none; }
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spark { height: 60px; flex: none; }
  .etf { height: 90px; flex: none; }
}
@media (max-width: 520px) {
  :root { --u: 4.4vw; }
  .row { grid-template-columns: minmax(0, 1fr); }
}