/* RBMD Charts — layout para o display 600×600 do Ray-Ban Meta Display.
   Preto não emite luz na lente: tudo que é fundo fica #000. */

* { box-sizing: border-box; }

html, body, #app {
  inline-size: 100%;
  block-size: 100%;
}

body {
  margin: 0;
  min-inline-size: 0;
  background: #000;
  color: #f2f2f2;
  font-family: "IBM Plex Sans Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

:root {
  --up: #34d399;
  --down: #f2545b;
  --muted: #a8a8a8;
  --line: #3a3a3a;
  --fg: #f2f2f2;
  --pad: clamp(12px, 4vmin, 24px);
  --mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
}

.app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.7vmin, 10px);
  inline-size: 100%;
  block-size: 100%;
  padding: var(--pad);
  overflow: hidden;
}

/* ---------- topo: ativos + status ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-inline-size: 0;
}

.seg { display: flex; gap: 8px; }

button {
  font: inherit;
  color: #c8c8c8;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #000;
}

button:focus { outline: none; }
button:focus-visible {
  outline: 3px solid #5b8def;
  outline-offset: 3px;
}

.seg button {
  min-block-size: 44px;
  min-inline-size: 72px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: clamp(15px, 3vmin, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status {
  font-size: clamp(12px, 2.3vmin, 14px);
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- cotação ---------- */
.quote {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-inline-size: 0;
}

.pair { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; }
.sym { font-size: clamp(24px, 5.7vmin, 34px); font-weight: 700; line-height: 1; }
.sub { font-size: clamp(14px, 3vmin, 18px); color: var(--muted); font-weight: 500; white-space: nowrap; }

.px { display: flex; align-items: baseline; gap: 10px; }
.price {
  font-family: var(--mono);
  font-size: clamp(26px, 6vmin, 36px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chg {
  font-family: var(--mono);
  font-size: clamp(14px, 3vmin, 18px);
  font-weight: 600;
  color: var(--muted);
}
.chg small { font-size: 0.7em; color: var(--muted); font-weight: 500; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

/* ---------- gráfico ---------- */
.chart {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
}

.chart .msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 24px;
  font-size: clamp(14px, 3vmin, 18px);
  color: var(--muted);
}

/* ---------- timeframes ---------- */
.tfs { display: flex; gap: 8px; }
.tfs button {
  flex: 1;
  min-block-size: 52px;
  border-radius: 12px;
  font-size: clamp(18px, 3.7vmin, 22px);
  font-weight: 700;
}