/* ============================================================
   Trade Rankz — Complete UI Overhaul
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.cr-trade-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* ── Header ───────────────────────────────────────────────── */
.cr-trade-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.cr-trade-header-left h1 {
  margin: 0 0 6px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.3px;
}
.cr-trade-header-left p {
  margin: 0;
  font-size: .9rem;
  color: rgba(148,163,184,0.85);
}
.cr-trade-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Live dot ─────────────────────────────────────────────── */
.cr-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.08);
  font-size: .78rem;
  font-weight: 700;
  color: rgba(134,239,172,0.9);
  white-space: nowrap;
}
.cr-live-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: cr-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes cr-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(0.75); }
}

/* ── Webhook info box ─────────────────────────────────────── */
.cr-webhook-box {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: .82rem;
  color: rgba(148,163,184,0.85);
}
.cr-webhook-box summary {
  cursor: pointer;
  font-weight: 700;
  color: rgba(226,232,240,0.9);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-webhook-box summary::before {
  content: '▶';
  font-size: .7rem;
  transition: transform .2s;
}
.cr-webhook-box[open] summary::before { transform: rotate(90deg); }
.cr-webhook-box pre {
  margin: 12px 0 0;
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 10px;
  padding: 14px;
  font-size: .78rem;
  overflow-x: auto;
  line-height: 1.6;
  color: rgba(165,243,252,0.9);
}

/* ── Filter bar ───────────────────────────────────────────── */
.cr-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cr-filter-label {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(148,163,184,0.7);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-right: 2px;
}
.cr-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(226,232,240,0.75);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cr-filter-btn:hover {
  background: rgba(148,163,184,0.1);
  border-color: rgba(148,163,184,0.35);
  color: #e2e8f0;
}
.cr-filter-btn.is-active {
  color: #e2e8f0;
}
.cr-filter-btn.is-active[data-cr-tab="long"],
.cr-filter-btn.is-active[data-cr-rank="HIGH"] {
  background: rgba(34,211,238,0.15);
  border-color: rgba(34,211,238,0.5);
  color: #a5f3fc;
}
.cr-filter-btn.is-active[data-cr-tab="short"] {
  background: rgba(249,115,22,0.15);
  border-color: rgba(249,115,22,0.5);
  color: #fed7aa;
}
.cr-filter-btn.is-active[data-cr-tab="all"],
.cr-filter-btn.is-active[data-cr-rank="all"] {
  background: rgba(148,163,184,0.14);
  border-color: rgba(148,163,184,0.4);
  color: #e2e8f0;
}
.cr-filter-btn.is-active[data-cr-rank="MEDIUM"] {
  background: rgba(250,204,21,0.15);
  border-color: rgba(250,204,21,0.5);
  color: #fef08a;
}
.cr-filter-btn.is-active[data-cr-rank="LOW"] {
  background: rgba(167,139,250,0.15);
  border-color: rgba(167,139,250,0.5);
  color: #ddd6fe;
}
.cr-filter-divider {
  width: 1px;
  height: 20px;
  background: rgba(148,163,184,0.15);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Signal cards grid ────────────────────────────────────── */
.cr-signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
@media(max-width: 640px) {
  .cr-signals-grid { grid-template-columns: 1fr; }
}

/* ── Signal card ──────────────────────────────────────────── */
.cr-signal-card {
  position: relative;
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(148,163,184,0.12);
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
}
.cr-signal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: rgba(148,163,184,0.15);
}
.cr-signal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

/* Rank accent lines */
.cr-signal-card.rank-HIGH::before  { background: linear-gradient(90deg, #22d3ee, #0ea5e9); }
.cr-signal-card.rank-HIGH  { border-color: rgba(34,211,238,0.25); box-shadow: 0 0 0 1px rgba(34,211,238,0.08), 0 4px 20px rgba(34,211,238,0.06); }
.cr-signal-card.rank-MEDIUM::before{ background: linear-gradient(90deg, #facc15, #f59e0b); }
.cr-signal-card.rank-MEDIUM{ border-color: rgba(250,204,21,0.22); }
.cr-signal-card.rank-LOW::before   { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.cr-signal-card.rank-LOW   { border-color: rgba(167,139,250,0.2); }

/* Locked (pro-gated exits) */
.cr-signal-card.is-locked .cr-card-price,
.cr-signal-card.is-locked .cr-card-pair,
.cr-signal-card.is-locked .cr-card-when {
  filter: blur(5px);
  user-select: none;
}
.cr-lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(1px);
}
.cr-signal-card.is-locked .cr-lock-overlay { display: flex; }
.cr-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250,204,21,0.18);
  border: 1px solid rgba(250,204,21,0.4);
  font-size: .78rem;
  font-weight: 800;
  color: #fef08a;
  text-decoration: none;
}

/* ── Card internals ───────────────────────────────────────── */
.cr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cr-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-rank-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(148,163,184,0.08);
  color: rgba(226,232,240,0.8);
}
.cr-rank-pill.HIGH   { border-color: rgba(34,211,238,0.5);  background: rgba(34,211,238,0.12);  color: #a5f3fc; }
.cr-rank-pill.MEDIUM { border-color: rgba(250,204,21,0.5);  background: rgba(250,204,21,0.12);  color: #fef08a; }
.cr-rank-pill.LOW    { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.12); color: #ddd6fe; }

.cr-side-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cr-side-pill.LONG  { border: 1px solid rgba(34,197,94,0.5);  background: rgba(34,197,94,0.12);  color: #86efac; }
.cr-side-pill.SHORT { border: 1px solid rgba(239,68,68,0.5);  background: rgba(239,68,68,0.12);  color: #fca5a5; }
.cr-side-pill.EXIT  { border: 1px solid rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); color: rgba(148,163,184,0.9); }

.cr-card-type {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(148,163,184,0.6);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cr-card-pair {
  font-size: 1.25rem;
  font-weight: 800;
  color: #e2e8f0;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.cr-card-exchange {
  font-size: .78rem;
  color: rgba(148,163,184,0.6);
  margin-bottom: 10px;
}
.cr-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.cr-card-price-label {
  font-size: .75rem;
  color: rgba(148,163,184,0.6);
  font-weight: 600;
}
.cr-card-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.cr-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,0.08);
}
.cr-card-when {
  font-size: .75rem;
  color: rgba(148,163,184,0.55);
}
.cr-card-reason {
  font-size: .72rem;
  color: rgba(148,163,184,0.5);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Empty / loading state ────────────────────────────────── */
.cr-state-box {
  text-align: center;
  padding: 48px 20px;
  color: rgba(148,163,184,0.55);
  font-size: .9rem;
  grid-column: 1 / -1;
}
.cr-state-box svg {
  display: block;
  margin: 0 auto 14px;
  opacity: .35;
}

/* ── Upgrade banner ───────────────────────────────────────── */
.cr-upgrade-banner {
  display: none;
  margin-top: 20px;
  background: rgba(250,204,21,0.06);
  border: 1px solid rgba(250,204,21,0.22);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cr-upgrade-banner p { margin: 4px 0 0; font-size: .85rem; color: rgba(148,163,184,0.8); }
.cr-upgrade-banner strong { color: #fef08a; }
.cr-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(250,204,21,0.16);
  border: 1px solid rgba(250,204,21,0.45);
  font-weight: 800;
  font-size: .85rem;
  color: #fef08a;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.cr-upgrade-btn:hover { background: rgba(250,204,21,0.25); }

/* ── Section label ────────────────────────────────────────── */
.cr-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(148,163,184,0.5);
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cr-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(148,163,184,0.1);
}

/* ── Simulation banner ────────────────────────────────────── */
.cr-sim-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid rgba(250,204,21,0.3);
  background: rgba(250,204,21,0.06);
  margin-bottom: 20px;
  font-size: .85rem;
}
.cr-sim-banner-icon { font-size: 1.3rem; flex-shrink: 0; }
.cr-sim-banner div { display: flex; flex-direction: column; gap: 2px; }
.cr-sim-banner strong { color: #fef08a; font-weight: 700; }
.cr-sim-banner span { color: rgba(148,163,184,0.8); font-size: .8rem; }

/* ── SIM pill on cards ────────────────────────────────────── */
.cr-sim-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  border: 1px solid rgba(250,204,21,0.4);
  background: rgba(250,204,21,0.08);
  color: #fef08a;
}

/* ── Sim card subtle tint ─────────────────────────────────── */
.cr-signal-card.is-sim {
  border-color: rgba(250,204,21,0.12);
}
.cr-signal-card.is-sim:hover {
  border-color: rgba(250,204,21,0.25);
}