/* ── base ──────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ── sidebar ──────────────────────────────────────────── */
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; margin: 0 0.5rem;
  font-size: 0.875rem; color: #737373;
  border-radius: 0.5rem; text-decoration: none;
}
.sidebar-link:hover { color: #e5e5e5; }
.sidebar-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sidebar-link.active { background: rgba(38,38,38,0.8); color: #fff; }
.sidebar-label { display: none; }
@media (min-width: 1024px) { .sidebar-label { display: inline; } }

/* ── views ────────────────────────────────────────────── */
.view { animation: fadeIn 0.2s ease-in; }
.view.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── custom elements must be block to size correctly ──── */
eq-chart, candle-chart, mk-table { display: block; }
eq-chart, candle-chart { min-width: 0; }

/* ── cards / metrics ──────────────────────────────────── */
.card { background: #171717; border: 1px solid #262626; border-radius: 0.75rem; padding: 1.25rem; }
.section-title { font-size: 0.75rem; font-weight: 600; color: #737373; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }

.metric-card { background: #171717; border: 1px solid #262626; border-radius: 0.75rem; padding: 1rem; }
.metric-card .metric-label { font-size: 0.75rem; color: #737373; text-transform: uppercase; letter-spacing: 0.05em; }
.metric-card .metric-value { margin-top: 0.25rem; font-size: 1.125rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.metric-card .metric-sub   { font-size: 0.75rem; color: #737373; margin-top: 0.125rem; }

/* ── buttons ──────────────────────────────────────────── */
.btn {
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  background: #262626; border: 1px solid #404040;
  font-size: 0.875rem; color: #e5e5e5; cursor: pointer; user-select: none;
}
.btn:hover { background: #404040; }
.btn-emerald { background: #059669; border-color: #059669; color: #fff; }
.btn-emerald:hover { background: #10b981; }
.btn-danger  { background: rgba(153,27,27,0.6); border-color: #991b1b; color: #fecdd3; }
.btn-danger:hover  { background: rgba(153,27,27,0.6); }

/* ── tables ───────────────────────────────────────────── */
mk-table table { width: 100%; font-size: 0.875rem; }
mk-table thead th {
  text-align: left; font-size: 0.75rem; font-weight: 600; color: #737373;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.5rem; border-bottom: 1px solid #262626;
  position: sticky; top: 0; background: #171717;
}
mk-table tbody td { padding: 0.5rem; border-bottom: 1px solid rgba(38,38,38,0.6); }
mk-table tbody tr:hover { background: rgba(38,38,38,0.6); cursor: pointer; }

/* ── log pane ─────────────────────────────────────────── */
.log-pane {
  height: 70vh; overflow-y: auto;
  background: #000; border: 1px solid #262626;
  padding: 0.75rem; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem; line-height: 1.25rem;
}

/* ── chips (watchlist) ────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: #262626; border: 1px solid #404040;
  font-size: 0.875rem; color: #e5e5e5;
}
.chip button { color: #737373; cursor: pointer; font-size: 0.75rem; line-height: 1; }
.chip button:hover { color: #fb7185; }

/* ── legends ──────────────────────────────────────────── */
.legend-item { display: flex; align-items: center; gap: 0.25rem; }

/* ── scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 0.5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 9999px; }

/* ── tabular nums on prices ───────────────────────────── */
.price, .metric-value { font-variant-numeric: tabular-nums; }