/* /coin/<symbol> live-structure pages. Rides on backtest.css (tiles, cards). */

.coin-live { position: relative; }
.coin-loading { color: var(--txt-3); font-size: 13px; }
.coin-none { color: var(--txt-2); font-size: 14px; line-height: 1.7; }
.coin-none b { color: var(--txt); }

.coin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.coin-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-mid); color: var(--txt-2); }
.coin-chip.long { color: var(--long); border-color: rgba(0, 229, 160, 0.4); background: var(--long-dim); }
.coin-chip.short { color: var(--short); border-color: rgba(255, 77, 109, 0.4); background: var(--short-dim); }
.coin-chip.score { color: var(--txt); }
.coin-chip.live { color: var(--gold); border-color: rgba(255, 194, 75, 0.45); background: rgba(255, 194, 75, 0.1); }
.coin-chip.wait { color: var(--txt-3); }
.coin-chip.extra { color: var(--accent); border-color: rgba(0, 229, 160, 0.35); }

.coin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; }
.coin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.coin-row .k { font-size: 12px; color: var(--txt-3); }
.coin-row .v { font-size: 13.5px; color: var(--txt); }
.coin-row .v.gold { color: var(--gold); }
.coin-row .v.up { color: var(--long); }
.coin-row .v.down { color: var(--short); }

.coin-tiles { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }

.coin-others { margin-top: 26px; font-size: 13px; color: var(--txt-3); line-height: 2; }
.coin-others .mono { font-size: 10px; letter-spacing: 0.1em; color: var(--txt-4); margin-inline-end: 8px; }
.coin-others a { color: var(--txt-2); }
.coin-others a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .coin-grid { grid-template-columns: 1fr; gap: 0; }
  .coin-tiles { grid-template-columns: repeat(2, 1fr); }
}