/* ══════════════════════════════════════════════════════════════════════════════
   TOKEN CARDS (Tracker tab)
   ══════════════════════════════════════════════════════════════════════════════ */

.token-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: fadein 0.22s ease;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.token-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-default);
}

/* Category border accents */
.token-card.STRONG_BUY { border-color: rgba(0, 230, 118, 0.45); animation: fadein 0.22s ease, pulse-glow 2.5s ease-in-out infinite; }
.token-card.BUY        { border-color: rgba(105, 240, 174, 0.3); }
.token-card.WATCH      { border-color: rgba(255, 193, 7, 0.28); }
.token-card.NEUTRAL    { border-color: var(--border-subtle); }
.token-card.EXHAUSTED  { border-color: rgba(255, 171, 64, 0.35); opacity: 0.75; }
.token-card.AVOID      { border-color: rgba(255, 77, 77, 0.25); opacity: 0.65; }
.token-card.watchlist  { border-color: rgba(153, 69, 255, 0.45); }

/* ── Card top row: icon + names | buttons + score ────────────────────────────── */
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.card-top-left  { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; overflow: hidden; }
.card-top-right { display: flex; align-items: flex-start; gap: var(--space-1); flex-shrink: 0; margin-left: var(--space-2); }

.token-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--border-default);
  object-fit: cover;
  flex-shrink: 0;
}
.token-icon-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3d2e 0%, #0a2618 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.token-names    { min-width: 0; }
.token-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.token-name     { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-sub-row { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.token-symbol { font-size: var(--text-xs); color: var(--text-secondary); }
.token-rank   { font-size: var(--text-xs); }

/* Score block (top-right) — constrained to prevent overflow */
.score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  max-width: 120px;
}
.score-val {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}
.score-sub {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Category badge in score block for WATCH+ */
.score-cat-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.score-cat-badge.badge-WATCH      { background: rgba(255,193,7,0.12);  color: var(--yellow); }
.score-cat-badge.badge-BUY        { background: rgba(0,230,118,0.10);  color: rgba(105,240,174,0.8); }
.score-cat-badge.badge-EXHAUSTED  { background: rgba(255,171,64,0.12); color: var(--color-exhausted); }
.score-cat-badge.badge-STRONG_BUY { background: rgba(0,230,118,0.16);  color: var(--green); }
.score-cat {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Category badges (shared across cards + score-cat) */
.badge-STRONG_BUY { background: rgba(0,230,118,0.12); color: var(--color-strong-buy); border: 1px solid rgba(0,230,118,0.28); }
.badge-BUY        { background: rgba(105,240,174,0.1); color: var(--color-buy); border: 1px solid rgba(105,240,174,0.22); }
.badge-WATCH      { background: rgba(255,193,7,0.1); color: var(--color-watch); border: 1px solid rgba(255,193,7,0.22); }
.badge-NEUTRAL    { background: rgba(112,112,144,0.1); color: var(--color-neutral); border: 1px solid rgba(112,112,144,0.2); }
.badge-EXHAUSTED  { background: rgba(255,171,64,0.1); color: var(--color-exhausted); border: 1px solid rgba(255,171,64,0.22); }
.badge-AVOID      { background: rgba(255,77,77,0.1); color: var(--color-avoid); border: 1px solid rgba(255,77,77,0.2); }
.badge-WATCHLIST  { background: rgba(153,69,255,0.12); color: var(--purple); border: 1px solid rgba(153,69,255,0.3); }
.badge-position   { background: rgba(0,119,255,0.1); color: var(--blue); border: 1px solid rgba(0,119,255,0.28); border-radius: 3px; font-size: 9px; font-weight: 700; padding: 1px 5px; letter-spacing: 0.04em; }

/* Edge confidence badge (Ruthie's proprietary layer — lives in score-block) */
.badge-edge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px 1px 2px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  max-width: 120px;
}
.edge-avatar {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-edge-watching {
  background: rgba(0, 230, 118, 0.08);
  color: rgba(105, 240, 174, 0.6);
  border: 1px solid rgba(0, 230, 118, 0.12);
}
.badge-edge-edge {
  background: rgba(0, 230, 118, 0.14);
  color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.25);
}
.badge-edge-look {
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.25);
  animation: edge-pulse 2s ease-in-out infinite;
}
@keyframes edge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Trend direction badge */
.trend-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.04em; white-space: nowrap; }
.trend-badge.trend-up   { background: rgba(0,230,118,0.1); color: var(--green); border-left: 2px solid var(--green); }
.trend-badge.trend-down { background: rgba(255,77,77,0.1);  color: var(--red);   border-left: 2px solid var(--red); }
.trend-badge.trend-side { background: rgba(255,193,7,0.1);  color: var(--yellow); border-left: 2px solid var(--yellow); }

/* Action buttons (top-right of card) */
.btn-pin {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
  opacity: 0.5;
}
.btn-pin:hover  { border-color: rgba(153, 69, 255, 0.35); color: #c084fc; opacity: 1; }
.btn-pin.active { border-color: rgba(153, 69, 255, 0.45); color: var(--purple); background: rgba(153, 69, 255, 0.1); opacity: 1; }

.btn-buy {
  background: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.25);
  color: var(--green);
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-buy:hover:not(:disabled) { background: rgba(0, 230, 118, 0.15); border-color: rgba(0, 230, 118, 0.5); }
.btn-buy:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Price row ───────────────────────────────────────────────────────────────── */
.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.token-price  { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.price-change { font-size: var(--text-sm); font-weight: 600; }
.price-change.up   { color: var(--green); }
.price-change.down { color: var(--red); }

/* ── Multi-timeframe change chips ────────────────────────────────────────────── */
.card-mf-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.card-mf-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.card-mf-chip.up   { color: var(--green); background: rgba(0,230,118,0.08); }
.card-mf-chip.down { color: var(--red);   background: rgba(255,77,77,0.08); }

/* ── Card stat strip (MC / age / holders / category / trend) ────────────────── */
.card-stat-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.stat-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 1px 5px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  white-space: nowrap;
}

/* ── Mini sparkline (24×24 in card-top-right) ─────────────────────────────── */
.mini-spark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Card footer (CA only) ────────────────────────────────────────────────── */
.card-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: 2px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Signal chips ────────────────────────────────────────────────────────────── */
.signals-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 20px;
}
.signal-chip {
  font-size: var(--text-xs);
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-left: 3px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}
.signal-chip.positive { border-left-color: var(--color-buy); color: var(--color-buy); }
.signal-chip.negative { border-left-color: var(--red);  color: #ff8a80; }
.signal-chip.neutral  { border-left-color: var(--color-watch); color: var(--color-watch); }

/* ── Rugcheck badge ─────────────────────────────────────────────────────────── */
.rc-badge         { font-size: var(--text-xs); padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.rc-badge.rc-safe { border: 1px solid rgba(0,230,118,0.22); color: var(--color-buy); }
.rc-badge.rc-warn { border: 1px solid rgba(255,193,7,0.22); color: var(--color-watch); }
.rc-badge.rc-risk { border: 1px solid rgba(255,77,77,0.18); color: #ff8a80; }

/* ── Card meta row (bottom) ──────────────────────────────────────────────────── */
.card-meta-row {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.token-ca {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border-subtle);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.token-ca:hover { color: var(--green); border-color: rgba(0, 230, 118, 0.4); }
.token-ca.copied { color: var(--green); border-color: rgba(0, 230, 118, 0.4); }

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
  pointer-events: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  min-width: 240px;
  max-width: 320px;
  animation: toast-in 0.3s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.toast.BUY, .toast.STRONG_BUY { border-color: rgba(0,230,118,0.35); }
.toast-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.toast-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.toast-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.toast-body  { font-size: var(--text-xs); color: var(--text-secondary); }
.toast.removing { animation: toast-out 0.3s ease forwards; }

/* ── Tab bar (desktop) ───────────────────────────────────────────────────────── */
#tab-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-4);
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover  { color: var(--text-primary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ── Mode switcher (desktop pill) ──────────────────────────────────────────── */
.mode-switcher {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 2px;
  gap: 0;
  margin-right: var(--space-2);
}
.mode-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 3px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.mode-btn:hover:not(.active) { color: var(--text-secondary); }
.mode-btn.active {
  background: var(--accent);
  color: var(--bg-base);
}

/* ── Mode strip (mobile — above bottom nav) ────────────────────────────────── */
.mode-strip {
  display: flex;
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  z-index: 100;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--space-3);
}
@media (min-width: 768px) { .mode-strip { display: none; } }

.mode-strip-btn {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mode-strip-btn:hover:not(.active) { color: var(--text-secondary); }
.mode-strip-btn.active {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRADES PANEL
   ══════════════════════════════════════════════════════════════════════════════ */

#trades-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* ── Stat rail ───────────────────────────────────────────────────────────────── */
#trades-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  #trades-summary { grid-template-columns: repeat(6, 1fr); }
}

.rail-stat {
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rail-stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.rail-stat-value { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.rail-stat-value.positive { color: var(--green); }
.rail-stat-value.negative { color: var(--red); }
.rail-stat-usd { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }
.rail-stat-usd.positive { color: var(--green); opacity: 0.7; }
.rail-stat-usd.negative { color: var(--red); opacity: 0.7; }

/* Legacy alias — used by live-update className assignments */
.summary-stat-value         { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; font-family: 'JetBrains Mono', monospace; }
.summary-stat-value.positive { color: var(--green); }
.summary-stat-value.negative { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════════
   EQUITY CHART
   ══════════════════════════════════════════════════════════════════════════════ */

.equity-chart-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.equity-chart-wrapper canvas {
  width: 100%;
  height: 120px;
  display: block;
}

/* ── Section headings ────────────────────────────────────────────────────────── */
.trades-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.trades-section-manual { color: #ff8c00; margin-top: var(--space-4); }
.manual-ledger-note {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,140,0,0.55);
  margin-left: 6px;
}

/* ── Open positions grid ─────────────────────────────────────────────────────── */
#open-positions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  flex-shrink: 0;
}

@media (min-width: 560px) {
  #open-positions { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ── Position card ───────────────────────────────────────────────────────────── */
.position-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  animation: fadein 0.22s ease;
}
.position-card:hover   { background: var(--bg-elevated); border-color: var(--border-default); }
.position-card.pos-winning { border-color: rgba(105, 240, 174, 0.3); }
.position-card.pos-losing  { border-color: rgba(255, 77, 77, 0.25); }
.position-card.selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

/* Position header row */
.pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.pos-header-left { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.pos-names { min-width: 0; }
.pos-symbol-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pos-sym { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); }

/* P&L percentage */
.pos-pct { font-size: var(--text-lg); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pos-pct.positive { color: var(--green); }
.pos-pct.negative { color: var(--red); }

/* Price arrow row */
.pos-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pos-entry-price  { font-size: var(--text-xs); color: var(--text-muted); }
.pos-arrow        { font-size: var(--text-xs); color: var(--text-muted); }
.pos-current-price { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }

/* SL / Entry / TP inline row */
.pos-levels-inline {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  gap: var(--space-2);
}
.pos-level-sl    { color: var(--red); opacity: 0.8; }
.pos-level-sl.sl-safe { color: var(--green); }
.pos-level-entry { color: var(--text-muted); }
.pos-level-tp    { color: var(--green); opacity: 0.8; }

/* Progress bar */
.pos-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: visible;
  position: relative;
}
.pos-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pos-entry-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.3);
  border-radius: 1px;
  transform: translateX(-50%);
}

/* Manual note */
.pos-manual-note {
  font-size: var(--text-xs);
  color: var(--yellow);
  font-style: italic;
  padding: 2px 0;
  opacity: 0.8;
}

/* Footer: deployed · hold time · P&L */
.pos-footer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px;
  border-top: 1px solid var(--border-subtle);
}
.pos-footer-row .dot-sep { color: var(--border-strong); }
.pos-pnl-sol { font-size: var(--text-sm); font-weight: 700; }
.pos-pnl-sol.positive { color: var(--green); }
.pos-pnl-sol.negative { color: var(--red); }
.pos-current-value { font-size: var(--text-xs); color: var(--text-muted); }
.pos-realized { font-size: 10px; color: var(--green); opacity: 0.8; }

/* ── Shared badge styles ─────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge-dry-run   { background: rgba(255,160,0,0.12); color: #ffa000; border: 1px solid rgba(255,160,0,0.28); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-open      { background: rgba(0,230,118,0.1); color: var(--green); border: 1px solid rgba(0,230,118,0.22); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-dca,
.badge-partial   { background: rgba(0,212,255,0.1); color: var(--cyan); border: 1px solid rgba(0,212,255,0.22); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-trail-sl  { background: rgba(255,183,0,0.1); color: #ffb300; border: 1px solid rgba(255,183,0,0.22); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-tp-hit    { background: rgba(0,230,118,0.12); color: var(--green); border: 1px solid rgba(0,230,118,0.25); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-tp-god    { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-manual    { background: rgba(255,100,100,0.1); color: #ff6464; border: 1px solid rgba(255,100,100,0.22); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.badge-man-dca   { background: rgba(255,140,0,0.1); color: #ff8c00; border: 1px solid rgba(255,140,0,0.22); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; }

/* ── Inner sub-tabs (All / Closed) ──────────────────────────────────────────── */
#trades-inner-tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}
.trades-inner-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.03em;
}
.trades-inner-tab:hover  { color: var(--text-primary); }
.trades-inner-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ── History tables ──────────────────────────────────────────────────────────── */
#trade-history-content { flex-shrink: 0; }
#closed-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.history-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
  overflow-x: auto; /* horizontal scroll on mobile */
}

/* 7-col table (history) */
.history-header, .history-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1fr 0.8fr 1fr 1fr 1.4fr;
  padding: 9px var(--space-4);
  font-size: var(--text-xs);
  align-items: start;
  background: var(--bg-surface);
  min-width: 580px; /* prevent squish on narrow screens */
}

/* 7-col table (closed trades — extra share column) */
#closed-history .history-header,
#closed-history .history-row {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr 1.4fr 36px;
  min-width: 520px;
}
.history-header {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.history-row:hover { background: var(--bg-elevated); }
.history-token-cell  { display: flex; align-items: center; gap: 7px; min-width: 0; }
.history-token-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.history-icon-placeholder {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3d2e 0%, #0a2618 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.history-pnl.positive { color: var(--green); }
.history-pnl.negative { color: var(--red); }
.history-price-cell { display: flex; flex-direction: column; gap: 2px; }
.history-price      { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs); }
.history-amount     { font-size: 10px; color: var(--text-muted); }
.history-time-cell  { display: flex; flex-direction: column; gap: 2px; }
.history-time-in    { font-size: var(--text-xs); color: var(--text-secondary); }
.history-time-out   { font-size: var(--text-xs); color: var(--text-muted); }
.history-token-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.history-pnl-pct    { font-size: 10px; color: inherit; opacity: 0.72; margin-left: 4px; }
.history-reason     { font-size: var(--text-xs); font-weight: 600; }
.dim                { opacity: 0.55; }
.txn-type-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.txn-type-buy  { background: rgba(105,240,174,0.1); color: var(--green); border: 1px solid rgba(105,240,174,0.22); }
.txn-type-sell { background: rgba(255,77,77,0.1);   color: var(--red);   border: 1px solid rgba(255,77,77,0.22); }
.txn-buy-reason { font-size: 10px; font-weight: 400; opacity: 0.65; }
.history-manual-note {
  display: block;
  font-size: 10px;
  font-style: italic;
  color: var(--yellow);
  opacity: 0.82;
  margin-top: 2px;
}

/* ── Closed trade reason badges ──────────────────────────────────────────────── */
.reason-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.reason-badge-sl      { background: rgba(255,77,77,0.10);   color: var(--red);   border: 1px solid rgba(255,77,77,0.22); }
.reason-badge-tp      { background: rgba(105,240,174,0.10); color: var(--green); border: 1px solid rgba(105,240,174,0.22); }
.reason-badge-rot     { background: rgba(100,150,255,0.10); color: #6496ff;      border: 1px solid rgba(100,150,255,0.22); }
.reason-badge-timeout { background: rgba(255,170,0,0.10);   color: #ffaa00;      border: 1px solid rgba(255,170,0,0.22); }
.reason-badge-manual  { background: rgba(255,193,7,0.10);   color: #ffb300;      border: 1px solid rgba(255,193,7,0.22); }
.reason-badge-other   { background: var(--bg-elevated);     color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.closed-partial-note  { display: block; font-size: 9px; color: var(--green); opacity: 0.70; margin-top: 1px; }

/* ── Pagination ───────────────────────────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-4);
  margin-top: 6px;
}
.pagination-info {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.pagination-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: 4px;
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: inherit;
}
.pagination-btn:hover:not(:disabled) { background: var(--bg-surface); color: var(--text-primary); }
.pagination-btn:disabled { opacity: 0.30; cursor: not-allowed; }

/* ── Inline trade chart zone ─────────────────────────────────────────────────── */
#trade-chart-zone {
  background: var(--bg-surface);
  border: 1px solid rgba(0,230,118,0.22);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#trade-chart-zone[hidden] { display: none; }

.trade-chart-hold { font-size: 10px; color: var(--text-muted); }
.trade-chart-current { font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); }
.trade-chart-pct, .trade-chart-pnl { font-weight: 600; font-size: var(--text-sm); }
.trade-chart-pct.positive, .trade-chart-pnl.positive { color: var(--green); }
.trade-chart-pct.negative, .trade-chart-pnl.negative { color: var(--red); }

/* Price level grid (SL / Entry / TP) */
.trade-chart-levels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.trade-level { background: var(--bg-surface); padding: 7px var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.trade-level-entry { text-align: center; }
.trade-level-tp    { text-align: right; }
.trade-level-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.trade-level-price { font-size: var(--text-sm); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.trade-level-pct   { font-size: var(--text-xs); }
.trade-level-sl .trade-level-price,
.trade-level-sl .trade-level-pct   { color: var(--red); }
.trade-level-sl.sl-safe .trade-level-price,
.trade-level-sl.sl-safe .trade-level-pct { color: var(--green); }
.trade-level-entry .trade-level-price { color: var(--text-primary); }
.trade-level-entry .trade-level-pct   { color: var(--text-secondary); }
.trade-level-tp .trade-level-price,
.trade-level-tp .trade-level-pct   { color: var(--green); }

/* Range bar with entry marker */
.trade-chart-track-wrap { display: flex; align-items: center; gap: var(--space-2); }
.trade-chart-track-label-sl { font-size: 10px; color: var(--red); flex-shrink: 0; }
.trade-chart-track-label-tp { font-size: 10px; color: var(--green); flex-shrink: 0; }
.trade-chart-progress-track {
  flex: 1;
  position: relative;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: visible;
}
.trade-chart-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.trade-chart-entry-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 13px;
  background: var(--text-secondary);
  border-radius: 1px;
  transform: translateX(-50%);
}
.trade-chart-entry-marker::after {
  content: 'E';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 700;
}
.trade-chart-iframe { width: 100%; height: 420px; border: none; display: block; }

/* ── Inline tracker analysis panel ──────────────────────────────────────────── */
#tracker-chart-zone,
#perps-chart-zone {
  background: var(--bg-surface);
  border: 1px solid rgba(0,230,118,0.18);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
#tracker-chart-zone[hidden],
#perps-chart-zone[hidden] { display: none; }

/* Two-panel layout */
.analysis-panel {
  display: flex;
  min-height: 480px;
  max-height: 600px;
}

/* Left: chart column */
.analysis-chart-col {
  flex: 65;
  min-width: 0;
  border-right: 1px solid var(--border-subtle);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Chart container (DexScreener embed) ─────────────────────────────────── */
.analysis-chart-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
}
.analysis-chart-container iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Right: intel sidebar */
.analysis-intel-col {
  flex: 35;
  min-width: 240px;
  max-width: 380px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-base);
}

/* Intel header: icon + name + close */
.intel-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.intel-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.intel-icon-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3d2e 0%, #0a2618 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.intel-identity {
  flex: 1;
  min-width: 0;
}
.intel-name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intel-symbol {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.intel-ca {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border-subtle);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  margin-top: 2px;
  display: inline-block;
}
.intel-ca:hover, .intel-ca.copied { color: var(--green); }

/* Close button reused from tracker-chart-close-btn */
.tracker-chart-close-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px 9px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.tracker-chart-close-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.25);
}

/* Score row */
.intel-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.intel-score {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
}

/* Price row */
.intel-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Change chips */
.intel-changes {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.intel-change-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.intel-change-chip.up   { background: rgba(0,230,118,0.08); color: var(--green); border: 1px solid rgba(0,230,118,0.18); }
.intel-change-chip.down { background: rgba(255,77,77,0.08); color: var(--red); border: 1px solid rgba(255,77,77,0.18); }

/* Sections */
.intel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intel-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-subtle);
}
.intel-toggle {
  cursor: pointer;
  user-select: none;
}
.intel-toggle:hover { color: var(--text-secondary); }
.intel-caret {
  font-size: 8px;
  display: inline-block;
  transition: transform 0.15s ease;
}
.intel-toggle.open .intel-caret { transform: rotate(90deg); }

/* Market data grid */
.intel-market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.intel-market-cell {
  background: var(--bg-surface);
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.intel-market-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.intel-market-value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

/* Signals area */
.intel-signals {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* Rugcheck risks */
.intel-risk-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--border-subtle);
  margin-bottom: 2px;
}
.intel-risk-danger { border-left-color: var(--red); background: rgba(255,77,77,0.05); }
.intel-risk-warn   { border-left-color: var(--yellow); background: rgba(255,193,7,0.05); }
.intel-risk-info   { border-left-color: var(--text-muted); background: rgba(255,255,255,0.02); }
.intel-risk-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
}
.intel-risk-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Signal breakdown */
.intel-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intel-breakdown-row {
  display: grid;
  grid-template-columns: 70px 1fr 28px;
  gap: 6px;
  align-items: center;
  font-size: 10px;
}
.intel-bd-name {
  color: var(--text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intel-bd-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.intel-bd-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.intel-bd-score {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
.intel-bd-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
}
.intel-bd-group-label:first-child { padding-top: 0; }

/* Action buttons (2x2 grid) */
.intel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
}
.intel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.intel-btn:hover { background: var(--bg-elevated); border-color: var(--border-default); }

.intel-btn-pin        { color: var(--purple); border-color: rgba(153,69,255,0.25); }
.intel-btn-pin:hover  { background: rgba(153,69,255,0.08); border-color: rgba(153,69,255,0.4); }
.intel-btn-pin.active { background: rgba(153,69,255,0.12); border-color: rgba(153,69,255,0.45); color: var(--purple); }

.intel-btn-buy        { color: var(--green); border-color: rgba(0,230,118,0.25); }
.intel-btn-buy:hover  { background: rgba(0,230,118,0.08); border-color: rgba(0,230,118,0.4); }
.intel-btn-buy:disabled { opacity: 0.4; cursor: not-allowed; }

.intel-btn-link       { color: var(--cyan); border-color: rgba(0,212,255,0.2); }
.intel-btn-link:hover { background: rgba(0,212,255,0.06); border-color: rgba(0,212,255,0.35); }

.intel-btn-danger        { color: var(--color-avoid); border-color: rgba(255,82,82,0.25); }
.intel-btn-danger:hover  { background: rgba(255,82,82,0.10); border-color: rgba(255,82,82,0.45); }


/* ── Mobile: stack vertically ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .analysis-panel {
    flex-direction: column;
    max-height: none;
  }
  .analysis-chart-col {
    flex: none;
    height: 320px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .analysis-intel-col {
    flex: none;
    max-width: none;
    min-width: 0;
    max-height: 400px;
  }
}

/* Selected card highlight */
.token-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

/* ── Trades empty states ─────────────────────────────────────────────────────── */
.trades-empty {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
}

/* ── Ruthie's Take — intel panel quip ───────────────────────────────────────── */
.intel-ruthie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(0, 230, 118, 0.03);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PERPS COMPONENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Perps panels ──────────────────────────────────────────────────────────── */
#perps-tracker-panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}
#perps-tracker-panel[hidden],
#perps-trades-panel[hidden] { display: none; }

#perps-trades-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* ── Perps market grid ─────────────────────────────────────────────────────── */
.perps-market-grid, #perps-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  align-content: start;
}

/* ── Perps market card ─────────────────────────────────────────────────────── */
.perps-market-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}
.perps-market-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-default);
}
.perps-market-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.perps-market-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.perps-market-symbol {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.perps-market-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

.perps-market-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}
.perps-market-label { color: var(--text-muted); }
.perps-market-val { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }

/* ── Direction badge ───────────────────────────────────────────────────────── */
.perps-direction {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.perps-long {
  background: rgba(0, 230, 118, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.3);
}
.perps-short {
  background: rgba(255, 77, 77, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 77, 77, 0.3);
}
.perps-dead-zone {
  background: rgba(100, 100, 100, 0.12);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

/* ── Leverage badge ────────────────────────────────────────────────────────── */
.perps-leverage-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(153, 69, 255, 0.12);
  color: var(--purple);
  border: 1px solid rgba(153, 69, 255, 0.25);
  font-family: 'JetBrains Mono', monospace;
}

/* ── Funding rate ──────────────────────────────────────────────────────────── */
.perps-funding { font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs); }
.perps-funding.positive { color: var(--green); }
.perps-funding.negative { color: var(--red); }

/* ── Liquidation price ─────────────────────────────────────────────────────── */
.perps-liq-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  color: var(--red);
  opacity: 0.8;
}
.perps-liq-warning { color: var(--red); font-weight: 700; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

/* ── Perps position card ───────────────────────────────────────────────────── */
.perps-position-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.perps-position-card:hover { background: var(--bg-elevated); border-color: var(--border-default); }
.perps-position-card.selected { border-color: var(--accent); }
.perps-position-card.perps-winning { border-left: 3px solid var(--green); }
.perps-position-card.perps-losing  { border-left: 3px solid var(--red); }

.perps-pos-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.perps-pos-header .perps-market-symbol { font-size: 14px; }

/* P&L percentage — hero number in header */
.perps-pos-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-sm);
  font-weight: 700;
}
.perps-pos-pct.up   { color: var(--green); }
.perps-pos-pct.down { color: var(--red); }

/* Price arrow row: entry → current */
.perps-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
}
.perps-entry-price   { color: var(--text-muted); }
.perps-arrow         { color: var(--text-muted); font-size: 11px; }
.perps-current-price { color: var(--text-primary); font-weight: 600; }

/* SL / Entry / TP inline levels */
.perps-levels-inline {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  padding: 0 2px;
}
.perps-level-sl    { color: var(--red); }
.perps-level-entry { color: var(--text-muted); }
.perps-level-tp    { color: var(--green); }

/* Progress bar: SL → TP */
.perps-progress-track {
  position: relative;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: visible;
}
.perps-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.perps-entry-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 1px;
  transform: translateX(-1px);
}

/* Footer row */
.perps-pos-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: var(--text-xs);
  padding-top: var(--space-1);
}
.perps-foot-item    { color: var(--text-muted); }
.perps-foot-sep     { color: var(--text-muted); opacity: 0.4; }
.perps-foot-pnl     { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.perps-foot-pnl.up   { color: var(--green); }
.perps-foot-pnl.down { color: var(--red); }
.perps-foot-funding  { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* Legacy stat grid (used in intel panel) */
.perps-pos-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.perps-pos-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.perps-pos-stat-label { color: var(--text-muted); font-size: 10px; }
.perps-pos-stat-val { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }

/* ── Perps summary rail ────────────────────────────────────────────────────── */
.perps-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.perps-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.perps-summary-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.perps-summary-val { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }

/* ── Score badge (reused for perps) ────────────────────────────────────────── */
.perps-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  flex-shrink: 0;
  padding: 0 4px;
}

/* ── Perps history table ───────────────────────────────────────────────────── */
.perps-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.perps-history-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.perps-history-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.perps-history-table tr:hover td { background: var(--bg-elevated); }

/* ── Perps action buttons ──────────────────────────────────────────────────── */
.perps-action-btn {
  flex: 1;
  padding: 4px 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0.3px;
}
.perps-action-btn:hover { opacity: 0.85; }
.perps-action-btn:disabled { opacity: 0.4; cursor: default; }
.perps-action-btn.perps-long {
  background: rgba(0, 230, 118, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.3);
}
.perps-action-btn.perps-short {
  background: rgba(255, 77, 77, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 77, 77, 0.3);
}

.perps-close-btn {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: rgba(255, 77, 77, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 77, 77, 0.25);
  transition: opacity 0.15s;
}
.perps-close-btn:hover { opacity: 0.85; }
.perps-close-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Discovered markets ──────────────────────────────────────────────────── */
#perps-discovered-grid {
  margin-top: var(--space-4);
}
.perps-discovered-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.perps-discovered-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.perps-discovered-count {
  font-size: 10px;
  color: var(--yellow);
  background: rgba(255, 214, 0, 0.08);
  border: 1px solid rgba(255, 214, 0, 0.18);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}
.perps-discovered-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
@media (min-width: 1200px) {
  .perps-discovered-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
.perps-discovered-card {
  border-color: rgba(255, 214, 0, 0.15);
}
.perps-discovered-card:hover {
  border-color: rgba(255, 214, 0, 0.35);
}
.perps-discovered-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(255, 214, 0, 0.08);
  border: 1px solid rgba(255, 214, 0, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.5px;
}

/* ── Loading skeleton cards ─────────────────────────────────────────────────── */
.card-skeleton {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  height: 180px;
  position: relative;
  overflow: hidden;
}
.card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.intel-ruthie-text {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BIRDEYE HEALTH BADGE (header)
   ══════════════════════════════════════════════════════════════════════════════ */

.birdeye-health {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: fadein 0.22s ease;
}
.birdeye-health[hidden] { display: none; }

.birdeye-health.birdeye-reduced {
  background: rgba(255, 193, 7, 0.12);
  color: var(--yellow);
  border: 1px solid rgba(255, 193, 7, 0.28);
}
.birdeye-health.birdeye-exhausted {
  background: rgba(255, 77, 77, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 77, 77, 0.28);
}
.birdeye-health.birdeye-backoff {
  background: rgba(255, 77, 77, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 77, 77, 0.28);
}

.birdeye-reset {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.birdeye-reset[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCORECARD — Share PNL buttons
   ══════════════════════════════════════════════════════════════════════════════ */

.scorecard-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.05);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.scorecard-btn:hover {
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.4);
}
.scorecard-btn svg {
  flex-shrink: 0;
}

/* Compact variant for closed history rows (icon only) */
.scorecard-btn--closed {
  padding: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
}
.scorecard-btn--closed:hover {
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
}