/* ============================================================================
   MM Bot Dashboard — Design tokens (Dark Mode / OLED, "Trust teal + blue")
   ============================================================================ */

:root {
  /* Color: superficies */
  --color-bg:           #0A0E0F;     /* base OLED-friendly */
  --color-surface:      #11181C;     /* cards */
  --color-surface-hi:   #182026;     /* hover / elevación */
  --color-border:       #1F2A2C;
  --color-border-hi:    #2A3A3D;

  /* Color: tipografía */
  --color-text:         #E6F3F1;     /* alto contraste cálido */
  --color-text-muted:   #9AA8AB;
  --color-text-dim:     #647073;

  /* Color: marca / accentos */
  --color-primary:      #2DD4BF;     /* teal claro (vivo sobre dark) */
  --color-primary-dim:  #14B8A6;
  --color-accent:       #38BDF8;     /* blue */

  /* Color: estados semánticos */
  --color-success:      #34D399;
  --color-warning:      #FBBF24;
  --color-danger:       #F87171;
  --color-info:         #38BDF8;

  /* Color: estados del executor */
  --state-IDLE:         #647073;
  --state-BIDDING:      #2DD4BF;
  --state-SUSPENDED:    #FBBF24;
  --state-NO_TRADE:     #F87171;

  /* Color: bandas YES / NO */
  --side-YES:           #2DD4BF;
  --side-NO:            #F472B6;     /* pink — contraste visual sobre el teal */

  /* Tipografía */
  --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;

  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Espaciado (4pt grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Bordes / radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Sombras (sutiles en dark, casi un glow del borde) */
  --shadow-card: 0 0 0 1px var(--color-border), 0 1px 0 rgba(255,255,255,0.02);
  --shadow-hover: 0 0 0 1px var(--color-border-hi);
  --shadow-focus: 0 0 0 2px rgba(45, 212, 191, 0.45);

  /* Geometría */
  --topbar-h: 56px;
  --logs-w: 360px;
  --transition: 150ms ease-out;

  color-scheme: dark;
}

/* ============================================================================
   Reset + base
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "cv11" 1;     /* tabular figures */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .num { font-family: var(--font-mono); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Topbar
   ============================================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  background: rgba(10, 14, 15, 0.85);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
}

.topbar-left { display: flex; align-items: center; gap: var(--sp-4); }
.topbar-stats {
  display: flex;
  gap: var(--sp-6);
  flex: 1 1 auto;
  justify-content: center;
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-name { font-weight: var(--fw-600); letter-spacing: 0.02em; }
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-text-dim);
  box-shadow: 0 0 0 0 currentColor;
  transition: background var(--transition);
}
.brand-dot[data-conn="ok"]   { background: var(--color-success); }
.brand-dot[data-conn="warn"] { background: var(--color-warning); }
.brand-dot[data-conn="err"]  { background: var(--color-danger); }

.state-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--state-IDLE) 18%, transparent);
  color: var(--state-IDLE);
  border: 1px solid color-mix(in srgb, var(--state-IDLE) 35%, transparent);
}
.state-badge[data-state="BIDDING"]   { background: color-mix(in srgb, var(--state-BIDDING) 18%, transparent); color: var(--state-BIDDING); border-color: color-mix(in srgb, var(--state-BIDDING) 40%, transparent); }
.state-badge[data-state="SUSPENDED"] { background: color-mix(in srgb, var(--state-SUSPENDED) 18%, transparent); color: var(--state-SUSPENDED); border-color: color-mix(in srgb, var(--state-SUSPENDED) 40%, transparent); }
.state-badge[data-state="NO_TRADE"]  { background: color-mix(in srgb, var(--state-NO_TRADE) 18%, transparent); color: var(--state-NO_TRADE); border-color: color-mix(in srgb, var(--state-NO_TRADE) 40%, transparent); }
.state-badge[data-state="RUNNING"]   { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.state-badge[data-state="DRY_RUN"]   { background: color-mix(in srgb, var(--color-info) 18%, transparent); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 40%, transparent); }
.state-badge[data-state="PAUSED"]    { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }

.stat { display: flex; flex-direction: column; align-items: flex-start; min-width: 90px; }
.stat-label { font-size: var(--fs-12); color: var(--color-text-muted); }
.stat-value { font-family: var(--font-mono); font-size: var(--fs-14); font-weight: var(--fw-500); }

.logout-form { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-3); }
.user-name { color: var(--color-text-muted); font-size: var(--fs-12); }

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--color-surface-hi); border-color: var(--color-border-hi); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-12); }

.btn-primary {
  background: var(--color-primary);
  color: #002420;
  border-color: transparent;
  font-weight: var(--fw-600);
}
.btn-primary:hover { background: color-mix(in srgb, var(--color-primary) 90%, #fff 10%); }

.btn-ghost { background: transparent; }

/* ============================================================================
   Layout
   ============================================================================ */

.layout {
  display: grid;
  grid-template-columns: 1fr var(--logs-w);
  gap: 0;
  min-height: calc(100vh - var(--topbar-h));
}
.layout.no-logs { grid-template-columns: 1fr 0; }
.layout.no-logs .logs-panel { display: none; }

/* ============================================================================
   Events grid
   ============================================================================ */

.events {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-content: start;
}

/* Barra de búsqueda sobre la lista de partidos. */
.events-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 520px;
}
.search-icon {
  position: absolute;
  left: var(--sp-3);
  font-size: var(--fs-14);
  opacity: 0.7;
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: 34px;
  padding: 0 var(--sp-6) 0 calc(var(--sp-3) + 22px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-14);
}
.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.search-clear {
  position: absolute;
  right: var(--sp-2);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  cursor: pointer;
  line-height: 1;
}
.search-clear:hover { color: var(--color-text); }
.search-count { font-size: var(--fs-12); color: var(--color-text-muted); }

/* Grupos de partido (contenedor vertical). */
.events-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ============================================================================
   Grupo de partido (desplegable que contiene sus sub-mercados)
   ============================================================================ */
.mgroup {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mgroup-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
}
.mgroup-header:hover { background: var(--color-surface-hi); }
.mgroup-titles { flex: 1; min-width: 0; }
.mgroup-title-row { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.mgroup-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgroup-status {
  font-family: var(--font-mono);
  font-size: var(--fs-11, 11px);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.mgroup-status:empty { display: none; }

/* Chip de estado del partido (card y grupo): EN VIVO/final en rojo, comienza
   en azul. Recuadro con fondo translúcido + borde del color. */
.card-status[data-mstatus],
.mgroup-status[data-mstatus] {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: var(--fw-600);
}
.card-status[data-mstatus=""],
.mgroup-status[data-mstatus=""] {
  padding: 0; border: 0; font-weight: inherit;
}
.card-status[data-mstatus="live"], .mgroup-status[data-mstatus="live"] {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
}
.card-status[data-mstatus="final"], .mgroup-status[data-mstatus="final"] {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 42%, transparent);
}
.card-status[data-mstatus="pre"], .mgroup-status[data-mstatus="pre"] {
  background: color-mix(in srgb, var(--color-info) 16%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 42%, transparent);
}
.mgroup-sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.mgroup-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.mgroup-badge[data-state="BIDDING"] {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
}
.mgroup-markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4);
  align-items: start;   /* las cards no se estiran a la altura de la más alta */
}

/* Triángulo de plegado (▸ colapsado / ▾ abierto). */
.disclosure {
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}
.disclosure::before { content: "▾"; }
.collapsed > .mgroup-header .disclosure,
.collapsed > .card-header .disclosure { transform: rotate(-90deg); }

/* Plegado: ocultar contenido del grupo / cuerpo de la card. */
.mgroup.collapsed .mgroup-markets { display: none; }
.mgroup.search-open .mgroup-markets { display: grid; }   /* la búsqueda fuerza abrir */
.card.collapsed .card-body { display: none; }

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--sp-6);
}

/* ============================================================================
   Event card
   ============================================================================ */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.card-header:hover { background: var(--color-surface-hi); }
.card-titles { flex: 1; min-width: 0; }
.card-title {
  display: inline-block;
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.card-title:hover { text-decoration: underline; }
.card-title.no-link {
  color: var(--color-text);
  cursor: default;
  pointer-events: none;
}
.card-sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
/* Chip por trader observado (modo WATCH) operando el mercado. El color lo fija
   el JS (por usuario, igual que los marcadores de la gráfica). */
.watcher-chip {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
/* Fila del título: nombre del mercado + estado del partido (EN VIVO/comienza). */
.card-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}
.card-status {
  font-family: var(--font-mono);
  font-size: var(--fs-11, 11px);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.card-status:empty { display: none; }

/* Resumen de posición (surebet + cuenta del partido) en la card — estructurado. */
.card-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--color-text);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.sum-empty { color: var(--color-text-muted); }

/* Posiciones por lado (YES/NO): badge · cantidad · coste a la derecha. */
.sum-sides { display: flex; flex-direction: column; gap: 3px; }
.sum-side {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
}
.sum-qty { color: var(--color-text-muted); }
.sum-cost { font-weight: var(--fw-600); text-align: right; }
.sum-compras { font-size: var(--fs-11, 11px); color: var(--color-text-dim); }

/* Banner de surebet / sin surebet. */
.sum-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-11, 11px);
}
.sum-banner.ok {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}
.sum-banner.warn {
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
  color: var(--color-warning);
}
.sum-banner-tag { font-weight: var(--fw-600); }
.sum-banner-amt { margin-left: auto; font-weight: var(--fw-600); }

/* Bloques de "descubierto" y "si resuelve". */
.sum-block { display: flex; flex-direction: column; gap: 1px; }
.sum-block-head { color: var(--color-text-muted); font-size: var(--fs-11, 11px); }
.sum-block-body { font-family: var(--font-mono); }
.sum-muted { color: var(--color-text-dim); }
.pnl-pos { color: var(--color-success); font-weight: var(--fw-600); }
.pnl-neg { color: var(--color-danger); font-weight: var(--fw-600); }
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-3);
}

.card-fair {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.metric { display: flex; flex-direction: column; align-items: flex-start; }
.metric-label { font-size: var(--fs-12); color: var(--color-text-muted); }
.metric-value { font-family: var(--font-mono); font-size: var(--fs-14); font-weight: var(--fw-500); }

/* La card ya no es clickable entera: la cabecera pliega, 📈 abre la gráfica. */
.card:hover { border-color: var(--color-border-hi); }
.card .btn { cursor: pointer; }

/* Card DESPLEGADA: fondo más claro para distinguirla de las plegadas. */
.card:not(.collapsed) {
  background: #1b2a33;                       /* claramente más claro que las plegadas */
  border-color: var(--color-primary-dim);   /* + borde teal para que destaque */
  box-shadow: 0 0 0 1px var(--color-primary-dim);
}
.card:not(.collapsed) .card-header:hover { background: rgba(255,255,255,0.04); }

/* Botón Ejecutar/Pausar por mercado (toggle de ejecución del evento). */
.btn-toggle-run {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
}
.btn-toggle-run.is-paused {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
}

/* Card de un evento en pausa: atenuado (los datos siguen actualizándose). */
.card-paused { opacity: 0.6; }
.card-paused:hover { opacity: 0.85; }

/* Línea de partido en el card: hora de comienzo o marcador en vivo. */
.card-match {
  font-size: var(--fs-12); font-family: var(--font-mono);
  color: var(--color-text-muted);
  margin: 2px 0 6px; padding: 3px 8px;
  background: #14181d; border-radius: 5px;
}
.card-match[hidden] { display: none; }
.card-match .match-clock { color: var(--color-info, #5ec8ff); }
.card-match .match-score { color: var(--color-text); }
.card-match.match-live { background: color-mix(in srgb, var(--color-success) 12%, #14181d); }
.card-match.match-live .match-meta { color: var(--color-success); }

.livefeed-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.livefeed-overlay[hidden] { display: none; }
.livefeed-modal {
  background: #0d1217;
  border: 1px solid #1f2933;
  border-radius: 10px;
  width: 97vw;
  height: 95vh;
  padding: 16px 20px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lf-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.lf-title { font-size: var(--fs-16); margin: 0 auto 0 0; font-weight: var(--fw-500); }
.lf-title-link { color: var(--color-accent); text-decoration: none; }
.lf-title-link:hover { text-decoration: underline; }
.lf-header { gap: 8px; }
#lf-fullmode { white-space: nowrap; }
/* Modo histórico completo activo: el botón se resalta para indicar el estado. */
.livefeed-modal.lf-full #lf-fullmode {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
#lf-close { font-size: 22px; padding: 0 10px; }

.lf-submeta {
  font-size: var(--fs-12); color: var(--color-text-dim);
  margin-bottom: 10px;
}
.lf-statbar {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-12); color: var(--color-text-muted);
  margin-bottom: 12px;
}
.lf-stat {
  background: #15171a; border: 1px solid #222; border-radius: 6px;
  padding: 5px 9px; font-family: var(--font-mono);
}
.lf-stat b { color: #5ec8ff; }
.lf-stat b.ok   { color: #6e6; }
.lf-stat b.warn { color: #f5a; }
.lf-stat b.dim  { color: #aaa; }
.lf-reason { color: #e0902a; font-family: var(--font-mono); }

/* Fila de cada gráfica: barra de scroll del eje Y (opcional) + plot. */
.lf-chart-row { display: flex; flex: 1; min-height: 0; gap: 6px; }
/* Barra de scroll vertical del eje Y (sólo en full mode). Los márgenes
   compensan los márgenes internos del plot (t≈8, b≈24) para alinear el riel
   con el área de datos. */
.lf-yscroll {
  position: relative; width: 13px; flex: 0 0 auto;
  margin: 8px 0 24px 0;
  background: #11161b; border: 1px solid #1a232c; border-radius: 7px;
}
.lf-yscroll[hidden] { display: none; }
.lf-yscroll-thumb {
  position: absolute; left: 2px; right: 2px; top: 0; height: 100%;
  min-height: 18px;
  background: color-mix(in srgb, var(--color-accent) 42%, #2a3340);
  border-radius: 6px; cursor: grab;
}
.lf-yscroll-thumb:hover { background: color-mix(in srgb, var(--color-accent) 60%, #2a3340); }
.lf-yscroll-thumb:active { cursor: grabbing; background: var(--color-accent); }

.lf-charts {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 0;
}
.lf-chart {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lf-chart figcaption {
  font-size: var(--fs-12); color: var(--color-text-muted);
  margin-bottom: 4px;
  display: flex; justify-content: space-between;
  flex: 0 0 auto;
}
.lf-stats { font-family: var(--font-mono); color: var(--color-text-dim); }
.lf-plot {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #0d1217;
  border: 1px solid #1a232c;
  border-radius: 6px;
}

.lf-legend {
  margin-top: 12px;
  font-size: var(--fs-12); color: var(--color-text-muted);
  line-height: 1.6;
  flex: 0 0 auto;
}
.lf-header, .lf-submeta, .lf-statbar { flex: 0 0 auto; }

/* Scoreboard del partido (marcador, período, reloj, última jugada) */
.lf-scoreboard {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background: #15171a; border: 1px solid #2a3340; border-radius: 6px;
  padding: 7px 12px; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.lf-scoreboard[hidden] { display: none; }   /* hidden gana a display:flex */
.lf-scoreboard .lf-team { color: var(--color-text); font-weight: var(--fw-500); }
.lf-scoreboard .lf-score { color: #5ec8ff; font-size: 1.15em; }
.lf-scoreboard .lf-match-meta { color: var(--color-text-muted); font-size: var(--fs-12); }

/* Historial de compras del evento (tabla bajo las gráficas) */
.lf-fills {
  flex: 0 0 auto;
  margin-top: 12px;
  border: 1px solid #1f2933; border-radius: 6px;
  background: #10151b;
}
.lf-fills-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  font-size: var(--fs-12); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid #1f2933;
  cursor: pointer; user-select: none;
}
.lf-fills-header:hover { color: var(--color-text); }
.lf-fills-caret {
  flex: 0 0 auto; align-self: center; font-size: 10px;
  color: var(--color-text-dim);
}
/* "Compras" plegado: oculta tabla y resumen; sólo queda la barra de título. */
.lf-fills.collapsed .lf-fills-scroll,
.lf-fills.collapsed .lf-fills-summary { display: none; }
.lf-fills.collapsed .lf-fills-header { border-bottom: none; }
.lf-fills-summary {
  font-family: var(--font-mono); text-transform: none; letter-spacing: 0;
  color: var(--color-text);
  text-align: right; line-height: 1.5;
}
.lf-fills-scroll { max-height: 150px; overflow-y: auto; }
.lf-fills-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: var(--fs-12);
}
.lf-fills-table th {
  text-align: left; padding: 4px 12px; color: var(--color-text-dim);
  font-weight: var(--fw-500); position: sticky; top: 0; background: #10151b;
}
.lf-fills-table td { padding: 3px 12px; border-top: 1px solid #161d26; }
.lf-fills-table td.num { text-align: right; }
.lf-fills-table th:nth-child(n+3) { text-align: right; }
.lf-fills-empty {
  padding: 10px 12px; color: var(--color-text-dim); font-size: var(--fs-12);
}

/* Bids list */
.card-bids { display: flex; flex-direction: column; gap: var(--sp-2); }
.bids-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bids-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Encabezado de grupo (YES / NO) dentro de la lista de bids */
.bids-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  margin-top: var(--sp-1);
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}
.bids-group-header:first-child { margin-top: 0; }
.bids-group-yes { color: #2dd4bf; border-left-color: #2dd4bf; }
.bids-group-no  { color: #ec4899; border-left-color: #ec4899; }
.bids-group-count { color: var(--color-text-dim); font-weight: var(--fw-400); }

/* Tinte sutil del borde izquierdo de cada bid según el grupo */
.bid-group-yes { border-left: 2px solid rgba(45, 212, 191, 0.35); padding-left: 6px; }
.bid-group-no  { border-left: 2px solid rgba(236, 72, 153, 0.35); padding-left: 6px; }
.bid {
  display: grid;
  grid-template-columns: 36px 1fr 80px 80px 70px;
  gap: var(--sp-2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.bid-side {
  font-weight: var(--fw-600);
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.bid-side[data-side="YES"] { color: var(--side-YES); background: color-mix(in srgb, var(--side-YES) 14%, transparent); }
.bid-side[data-side="NO"]  { color: var(--side-NO);  background: color-mix(in srgb, var(--side-NO)  14%, transparent); }
.bid-status { color: var(--color-text-dim); font-size: 10px; text-transform: uppercase; }
.bid-ev[data-pos="1"] { color: var(--color-success); }
.bid-ev[data-pos="0"] { color: var(--color-danger); }

.bids-empty {
  color: var(--color-text-dim);
  font-style: italic;
  font-size: var(--fs-12);
  padding: var(--sp-1) 0;
}

/* Card footer */
.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
}
.card-footer:empty { display: none; }
.footer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.footer-stats strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: var(--fw-500);
}

/* ============================================================================
   Logs panel
   ============================================================================ */

.logs-panel {
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
}
.logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.logs-header h2 {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.logs-filter { display: flex; gap: var(--sp-2); }
.logs-filter select {
  height: 26px;
  padding: 0 var(--sp-2);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
}

.logs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.log-row {
  display: grid;
  grid-template-columns: 68px 90px 1fr;
  column-gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-12);
}
.log-time { color: var(--color-text-dim); font-family: var(--font-mono); }
.log-event { color: var(--color-text-muted); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { color: var(--color-text); word-break: break-word; }
.log-row[data-kind="error"]   .log-msg { color: var(--color-danger); }
.log-row[data-kind="warning"] .log-msg { color: var(--color-warning); }
.log-row[data-kind="fatal"]   .log-msg { color: var(--color-danger); font-weight: var(--fw-600); }
.log-row[data-decision="state_transition"] .log-msg { color: var(--color-info); }
.log-row[data-decision="merge_confirmed"] .log-msg { color: var(--color-success); }

/* ============================================================================
   Login page
   ============================================================================ */

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.login-header { text-align: left; }
.login-header .brand { margin-bottom: var(--sp-1); }
.login-sub {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field span {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.field input {
  height: 36px;
  padding: 0 var(--sp-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-14);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.form-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--fs-12);
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .logs-panel { display: none; }
  .layout.show-logs { grid-template-columns: 1fr; }
  .layout.show-logs .logs-panel { display: flex; position: fixed; top: var(--topbar-h); right: 0; width: 320px; max-width: 90vw; height: calc(100vh - var(--topbar-h)); z-index: 5; }
}

@media (max-width: 640px) {
  .topbar-stats { display: none; }
  .events { grid-template-columns: 1fr; padding: var(--sp-3); }
  .card-fair { grid-template-columns: repeat(2, 1fr); }
}

/* -------- Buscador / alta de mercados (add-market modal) ----------------- */
.addm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
}
.addm-overlay[hidden] { display: none; }
.addm-modal {
  background: #0d1217;
  border: 1px solid var(--color-border-hi);
  border-radius: var(--radius-lg);
  width: 640px; max-width: 94vw; max-height: 92vh;
  padding: 16px 20px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.addm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.addm-header h2 { font-size: var(--fs-16); margin: 0; font-weight: var(--fw-500); }
#addm-close { font-size: 22px; padding: 0 10px; }

.addm-label { display: block; font-size: var(--fs-12); color: var(--color-text-muted); margin-bottom: 6px; }
.addm-url-row { display: flex; gap: var(--sp-2); }
.addm-input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono); font-size: var(--fs-12);
  padding: 7px 9px;
}
.addm-input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-border-hi); }
.addm-url-row .addm-input { flex: 1; }
.addm-url-row .btn { white-space: nowrap; }
.addm-hint { font-size: var(--fs-12); color: var(--color-text-dim); margin: 8px 0 0; }

.addm-msg { margin-top: 10px; font-size: var(--fs-12); padding: 7px 9px; border-radius: var(--radius-sm); }
.addm-msg[data-kind="info"]  { background: rgba(56,189,248,0.10); color: var(--color-info); }
.addm-msg[data-kind="error"] { background: rgba(248,113,113,0.12); color: var(--color-danger); }

.addm-question { font-size: var(--fs-14); font-weight: var(--fw-500); margin-bottom: 4px; }
.addm-teams { font-size: var(--fs-12); color: var(--color-text-muted); margin-bottom: 14px; }

.addm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.addm-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); color: var(--color-text-muted); }
.addm-field em { color: var(--color-text-dim); font-style: normal; }
.addm-field-wide { grid-column: 1 / -1; }
.addm-field-yes { grid-column: 1 / -1; }
.addm-field-yes > span { color: var(--color-warning); }

.addm-yesmap {
  margin-top: 14px; padding: 9px 11px;
  background: rgba(45,212,191,0.08);
  border: 1px solid rgba(45,212,191,0.25);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
}
.addm-yesmap .addm-yesname { color: var(--color-text-dim); font-family: var(--font-mono); font-size: var(--fs-12); }

.addm-warnings {
  margin-top: 10px; padding: 8px 11px;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12); color: var(--color-warning); line-height: 1.5;
}
.addm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 18px; }

.btn-remove { color: var(--color-text-dim); }
.btn-remove:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* ============ Panel de posiciones de traders (modo WATCH) ============ */
.watch-positions {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.wp-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.watch-positions.collapsed .wp-header { border-bottom: none; }
.wp-collapse {
  display: flex; align-items: center; gap: var(--sp-2);
  background: none; border: none; color: var(--color-text);
  cursor: pointer; padding: 0;
}
.wp-collapse h2 { font-size: var(--fs-16); font-weight: var(--fw-600); margin: 0; }
.watch-positions.collapsed .wp-collapse .disclosure { transform: rotate(-90deg); }
.wp-summary {
  margin-left: auto; color: var(--color-text-muted);
  font-size: var(--fs-12); font-family: var(--font-mono);
}
.watch-positions.collapsed .wp-users { display: none; }
.wp-users { display: flex; flex-direction: column; }

/* Jerarquía por ELEVACIÓN neutra, no por tintes de color que compiten (el azul del
   partido + teal del mercado se fundían en cian oscuro sobre el fondo OLED). Rampa
   (oscuro→claro): pozo de datos #0A0E0F < panel surface < cabecera PARTIDO #182026 <
   cabecera USUARIO #1d2832. Cada contenedor es más claro que su contenido. El COLOR
   se reserva para lo semántico: raíl izq. = trader, chip = estado, lado = YES/NO,
   PnL = verde/rojo. Así esos colores RESALTAN sobre superficies calmadas. */
.wp-user {
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;   /* color del trader vía JS */
}
.wp-user:last-child { border-bottom: none; }
.wp-user-head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  background: #1d2832; border: none; color: var(--color-text);  /* nivel más elevado de la rampa */
  cursor: pointer; padding: var(--sp-3) var(--sp-4); text-align: left;
}
.wp-user-head:hover { background: #23303b; }
.wp-user.collapsed .wp-user-head .disclosure { transform: rotate(-90deg); }
.wp-user-name { font-weight: var(--fw-600); font-size: var(--fs-14); }
.wp-user-stats {
  margin-left: auto; display: flex; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-13);
}
.wp-user.collapsed .wp-user-body { display: none; }
/* Cuerpo del usuario = POZO oscuro: los partidos se hunden bajo la banda del usuario
   (que es más clara), creando el efecto de "cabecera elevada sobre contenido". */
.wp-user-body { padding: 0 0 var(--sp-2); background: var(--color-bg); }

/* Nivel PARTIDO: un bloque plegable por enfrentamiento dentro de cada usuario. Sin
   tinte de color (antes azul): el bloque vive en el pozo y su CABECERA es una banda
   neutra elevada (#182026), un paso por debajo de la del usuario. La indentación +
   la elevación marcan el anidamiento; el chip EN VIVO aporta el color. */
.wp-match {
  border-top: 1px solid var(--color-border);
}
.wp-user-body > .wp-match:first-child { border-top: none; }
.wp-match-head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  background: var(--color-surface-hi);
  border: none; color: var(--color-text);
  cursor: pointer; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6);
  text-align: left;
}
.wp-match-head:hover { background: #1e2a31; }
.wp-match.collapsed .wp-match-head .disclosure { transform: rotate(-90deg); }
.wp-match-name { font-weight: var(--fw-600); font-size: var(--fs-13); }
.wp-match-stats {
  margin-left: auto; display: flex; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-12);
}
.wp-match.collapsed .wp-match-body { display: none; }
.wp-match-body { padding: 0 var(--sp-4) var(--sp-2) var(--sp-6); overflow-x: auto; }

.wp-chart-btn {
  margin-left: var(--sp-2); background: none; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0 4px; font-size: var(--fs-12); line-height: 1.4;
}
.wp-chart-btn:hover { border-color: var(--color-primary); background: var(--color-surface-hi); }

/* table-layout fijo + anchos por <colgroup>: cabecera y datos comparten columna
   exacta → todo alinea (numéricas a la derecha). La col "resultado" (auto) absorbe
   el espacio sobrante; las numéricas tienen ancho fijo y se agrupan a la derecha. */
.wp-pos-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-12);
  table-layout: fixed;
}
.wp-c-side { width: 54px; }
.wp-c-out  { width: auto; }
.wp-c-num  { width: 96px; }
.wp-c-pnl  { width: 168px; }
.wp-pos-table th {
  color: var(--color-text-dim); font-weight: var(--fw-500);
  padding: var(--sp-1) var(--sp-2);
  /* franja CLARA muy tenue + divisor marcado: sobre el pozo oscuro de datos una
     banda apenas iluminada se lee como "cabecera de tabla" mejor que una oscura. */
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-border-hi);
  white-space: nowrap; text-align: left;
}
/* Encabezados numéricos a la derecha: el selector lleva `th` para ganar en
   especificidad a `.wp-pos-table th` (si no, el texto-izquierda lo pisaba y la
   cabecera quedaba desalineada respecto a los datos — el bug que se veía). */
.wp-pos-table th.wp-th-num { text-align: right; }
.wp-pos-table td {
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid rgba(31, 42, 44, 0.5);
}
.wp-pos-table td.wp-num { text-align: right; }
.wp-pos-table td.wp-outcome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-market-row td {
  padding-top: var(--sp-2); padding-bottom: var(--sp-1);
  color: var(--color-text-muted); font-weight: var(--fw-600);
  border-bottom: 1px solid var(--color-border);
  /* sub-grupo MERCADO (hoja del árbol): franja clara muy tenue + RAÍL izq. teal que
     lo marca como sección. El raíl (no un tinte de fondo) es lo único con color, así
     no compite con el PnL ni el chip. Un paso por encima de la cabecera de columnas. */
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.wp-market-name { color: var(--color-text); }
.wp-market-val {
  margin-left: var(--sp-2); font-family: var(--font-mono);
  font-weight: var(--fw-400); color: var(--color-text-muted);
}
.wp-side { font-weight: var(--fw-700); font-family: var(--font-mono); }
.wp-side-yes { color: var(--side-YES); }
.wp-side-no { color: var(--side-NO); }
.wp-outcome { color: var(--color-text-muted); }
.wp-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.wp-pos { color: var(--color-success); }
.wp-neg { color: var(--color-danger); }

/* Chip de estado del partido junto al enfrentamiento (EN VIVO / Comienza / final). */
.wp-mstatus {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-600);
  padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid transparent;
  white-space: nowrap; letter-spacing: 0.3px;
}
.wp-mstatus[data-mstatus="live"] {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
}
.wp-mstatus[data-mstatus="pre"] {
  background: color-mix(in srgb, var(--color-info) 16%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 42%, transparent);
}
.wp-mstatus[data-mstatus="final"] {
  background: color-mix(in srgb, var(--color-text-dim) 14%, transparent);
  color: var(--color-text-muted);
  border-color: color-mix(in srgb, var(--color-text-dim) 36%, transparent);
}

/* Sección histórico: igual que el panel de posiciones pero atenuada (es contexto,
   no lo vivo). El header se diferencia con un tono más apagado. */
.watch-history .wp-header h2 { color: var(--color-text-muted); }
.watch-history { opacity: 0.92; }

/* Iluminar un mercado cuando entra una compra nueva: las filas (cabecera del
   mercado + sus posiciones) llevan .wp-flash y destellan en teal y se apagan. La
   animación se reproduce al crearse la fila (cada render recrea el árbol), así que
   sólo destella el mercado cuyo conteo de trades subió. */
@keyframes wpFlash {
  0%   { background-color: rgba(45, 212, 191, 0.45); }
  100% { background-color: transparent; }
}
.wp-pos-table tr.wp-flash > td { animation: wpFlash 1.4s ease-out; }
/* Compra nueva detectada con la pestaña PLEGADA: ilumina la cabecera visible (el
   título del partido, o el del usuario/panel si el partido está dentro de un nivel
   plegado). El flash sube por la jerarquía hasta el nivel más externo plegado. */
.wp-match-head.wp-flash, .wp-user-head.wp-flash, .wp-header.wp-flash {
  animation: wpFlash 1.4s ease-out;
}

/* -------- Feed de ACTIVIDAD (modo WATCH): operaciones recientes de todos los
   traders, cronológico (más reciente arriba). Lo nuevo destella en teal. -------- */
.watch-activity.collapsed .wa-feed { display: none; }
.wa-feed { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.wa-row {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-3);
  padding: 5px var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-12); font-family: var(--font-mono); white-space: nowrap;
}
.wa-row:last-child { border-bottom: none; }
.wa-time { color: var(--color-text-dim); }
.wa-user { font-weight: var(--fw-700); }       /* color del trader vía JS */
.wa-side { font-weight: var(--fw-700); font-size: 10px; letter-spacing: 0.3px; }
.wa-buy { color: var(--color-success); }
.wa-sell { color: var(--color-danger); }
.wa-yesno { font-weight: var(--fw-700); }
.wa-yes { color: var(--side-YES); }
.wa-no { color: var(--side-NO); }
.wa-title { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wa-link { cursor: pointer; }
.wa-link:hover { color: var(--color-accent); text-decoration: underline; }
.wa-shares { color: var(--color-text-muted); text-align: right; }
.wa-usd { color: var(--color-text); text-align: right; font-weight: var(--fw-600); }
.wa-row.wa-flash { animation: wpFlash 1.4s ease-out; }