:root {
  color-scheme: dark;

  /* Palette — near-black surfaces, colour only on borders + pills */
  --bg: #050507;
  --panel: #0d0d10;
  --panel-hover: #14141a;
  --ink: #e5e7eb;
  --ink-dim: #d1d5db;
  --muted: #6b7280;
  --suffix: #5a6068;     /* USDT.P after the base ticker */
  --line: #16161b;
  --line-strong: #1f1f26;

  /* Kind colours — used for borders, labels and ago pills, NEVER as card fills */
  --bull: #22c55e;
  --bear: #ef4444;
  --hidden-bull: #3b82f6;
  --hidden-bear: #f59e0b;
  --multi-bull: #06b6d4;
  --multi-bear: #a855f7;
  --badge: #facc15;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); margin: 0; }
body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: #0a0a0d;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--multi-bull); box-shadow: 0 0 8px var(--multi-bull);
}
.brand-name {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--multi-bull);
  font-size: 14px;
}
.brand-sub {
  color: var(--muted);
  font-size: 11px;
  margin-left: 2px;
}

.status { display: flex; gap: 14px; align-items: center; font-size: 12px; }
.conn {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11px;
}
.conn.connected { color: var(--bull); border-color: var(--bull); }
.conn.disconnected { color: var(--bear); border-color: var(--bear); }
.clock {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .04em;
}
.logout { color: var(--muted); text-decoration: none; font-size: 11px; }
.logout:hover { color: var(--ink); }

/* Manual refresh button — sits next to clock + sign-out. Unobtrusive
   border-only chip; spins while a fetch is in flight; flashes red on error. */
.refresh-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.refresh-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.refresh-btn:focus-visible { outline: 2px solid var(--ink-dim); outline-offset: 2px; }
.refresh-btn:disabled { cursor: progress; }
.refresh-btn.spinning {
  color: var(--ink-dim);
  border-color: var(--ink-dim);
  animation: refresh-spin 0.9s linear infinite;
}
.refresh-btn.error {
  color: #fff;
  background: var(--bear);
  border-color: var(--bear);
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Columns ---------- */
main { padding: 18px 22px 40px; }

.columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1280px) { .columns { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .columns { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.column {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  min-height: 200px;
}
.column-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 0 2px;
  color: var(--ink-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
}
.column-head .count {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .04em;
}
.column-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Card ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid;
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;          /* kill anchor underline */
  transition: transform .1s ease, background-color .1s ease;
}
.card:hover {
  transform: translateY(-1px);
  background: var(--panel-hover);
}

.card .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card .label::after {
  content: "↗";
  opacity: .7;
  font-size: 10px;
  font-weight: 400;
}

.card .sym {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--ink);
}
.card .sym .suffix {
  color: var(--suffix);
  font-weight: 600;
  letter-spacing: .02em;
}

.card .ago {
  display: block;
  text-align: center;
  padding: 6px 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #0a0a0d;
  letter-spacing: .06em;
}

.card .badge {
  position: absolute;
  top: 7px;
  right: 8px;
  background: var(--badge);
  color: #1f2937;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: .06em;
}

/* ---------- Per-kind colour map ---------- */
.kind-REGULAR_BULL  { border-color: var(--bull); }
.kind-REGULAR_BULL  .label { color: var(--bull); }
.kind-REGULAR_BULL  .ago   { background: var(--bull); }

.kind-REGULAR_BEAR  { border-color: var(--bear); }
.kind-REGULAR_BEAR  .label { color: var(--bear); }
.kind-REGULAR_BEAR  .ago   { background: var(--bear); color: #fff; }

.kind-HIDDEN_BULL   { border-color: var(--hidden-bull); }
.kind-HIDDEN_BULL   .label { color: var(--hidden-bull); }
.kind-HIDDEN_BULL   .ago   { background: var(--hidden-bull); color: #fff; }

.kind-HIDDEN_BEAR   { border-color: var(--hidden-bear); }
.kind-HIDDEN_BEAR   .label { color: var(--hidden-bear); }
.kind-HIDDEN_BEAR   .ago   { background: var(--hidden-bear); }

.kind-MULTIPLE_BULL { border-color: var(--multi-bull); }
.kind-MULTIPLE_BULL .label { color: var(--multi-bull); }
.kind-MULTIPLE_BULL .ago   { background: var(--multi-bull); }

.kind-MULTIPLE_BEAR { border-color: var(--multi-bear); }
.kind-MULTIPLE_BEAR .label { color: var(--multi-bear); }
.kind-MULTIPLE_BEAR .ago   { background: var(--multi-bear); color: #fff; }

/* ---------- Legend ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  background: var(--panel);
}
.chip.kind-REGULAR_BULL  { color: var(--bull);        border-color: var(--bull); }
.chip.kind-REGULAR_BEAR  { color: var(--bear);        border-color: var(--bear); }
.chip.kind-HIDDEN_BULL   { color: var(--hidden-bull); border-color: var(--hidden-bull); }
.chip.kind-HIDDEN_BEAR   { color: var(--hidden-bear); border-color: var(--hidden-bear); }
.chip.kind-MULTIPLE_BULL { color: var(--multi-bull);  border-color: var(--multi-bull); }
.chip.kind-MULTIPLE_BEAR { color: var(--multi-bear);  border-color: var(--multi-bear); }
.chip.badge-new          { background: var(--badge); color: #1f2937; border-color: var(--badge); }

/* ---------- Legend filter — interactive states ---------- */

/* Filter chips are clickable; NEW chip is decorative and skips this rule. */
.chip[data-kind] {
  cursor: pointer;
  user-select: none;
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.chip[data-kind]:hover { opacity: .85; }
.chip[data-kind]:focus-visible {
  outline: 2px solid var(--ink-dim);
  outline-offset: 2px;
}

/* When any filter is active, dim every non-active filter chip
   (kind chips and the "All" clear-filter chip alike). */
body.filter-active .chip[data-kind]:not(.active),
body.filter-active .chip.chip-all:not(.active) { opacity: .35; }

/* The active filter chip becomes a filled badge in its own colour. */
.chip[data-kind].active {
  color: #0a0a0d;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
}
.chip.kind-REGULAR_BULL.active  { background: var(--bull); }
.chip.kind-REGULAR_BEAR.active  { background: var(--bear);        color: #fff; }
.chip.kind-HIDDEN_BULL.active   { background: var(--hidden-bull); color: #fff; }
.chip.kind-HIDDEN_BEAR.active   { background: var(--hidden-bear); }
.chip.kind-MULTIPLE_BULL.active { background: var(--multi-bull); }
.chip.kind-MULTIPLE_BEAR.active { background: var(--multi-bear);  color: #fff; }

/* The "All" clear-filter chip. Neutral colour so it doesn't compete with the
   kind palette. Active when no kind filter is on; idle/dim otherwise. */
.chip.chip-all {
  cursor: pointer;
  user-select: none;
  color: var(--ink-dim);
  border-color: var(--line-strong);
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.chip.chip-all:hover { opacity: .85; }
.chip.chip-all:focus-visible {
  outline: 2px solid var(--ink-dim);
  outline-offset: 2px;
}
.chip.chip-all.active {
  background: var(--ink-dim);
  color: #0a0a0d;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
}

/* When body.filter-KIND_X is set, hide every card that isn't of that kind.
   Cards stay in the DOM (and in app.js's MAX_CARDS_PER_COLUMN bookkeeping);
   only display:none — so on filter clear, everything reappears instantly. */
body.filter-REGULAR_BULL  .card:not(.kind-REGULAR_BULL),
body.filter-REGULAR_BEAR  .card:not(.kind-REGULAR_BEAR),
body.filter-HIDDEN_BULL   .card:not(.kind-HIDDEN_BULL),
body.filter-HIDDEN_BEAR   .card:not(.kind-HIDDEN_BEAR),
body.filter-MULTIPLE_BULL .card:not(.kind-MULTIPLE_BULL),
body.filter-MULTIPLE_BEAR .card:not(.kind-MULTIPLE_BEAR) {
  display: none;
}

footer {
  margin-top: 24px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}