/* ===================================================
   TradFi — Vibrant Dark Theme v3
   Premium trading platform — Blue palette
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core palette */
  --bg-primary: #080a12;
  --bg-secondary: #0c0f1a;
  --bg-card: #0f1220;
  --bg-card-hover: #141830;
  --bg-card-glass: rgba(15, 18, 32, 0.85);
  --border-color: rgba(83, 109, 254, 0.12);
  --border-glow: rgba(83, 109, 254, 0.25);

  /* Text */
  --text-primary: #e8eaf6;
  --text-muted: #7c83a1;
  --text-dim: #505678;

  /* Accents — vibrant neon */
  --accent-green: #00e676;
  --accent-green-dim: rgba(0, 230, 118, 0.15);
  --accent-red: #ff5252;
  --accent-red-dim: rgba(255, 82, 82, 0.15);
  --accent-blue: #536dfe;
  --accent-blue-bright: #7c4dff;
  --accent-cyan: #18ffff;
  --accent-yellow: #ffab00;
  --accent-orange: #ff6d00;
  --accent-pink: #f50057;
  --accent-purple: #7c4dff;

  /* Gradients */
  --grad-main: linear-gradient(135deg, #536dfe, #7c4dff, #f50057);
  --grad-green: linear-gradient(135deg, #00e676, #00bfa5);
  --grad-red: linear-gradient(135deg, #ff5252, #ff1744);
  --grad-blue: linear-gradient(135deg, #536dfe, #304ffe);
  --grad-purple: linear-gradient(135deg, #7c4dff, #651fff);
  --grad-orange: linear-gradient(135deg, #ff6d00, #ffab00);
  --grad-cyan: linear-gradient(135deg, #18ffff, #00e5ff);
  --grad-glass: linear-gradient(135deg, rgba(83,109,254,0.08), rgba(83,109,254,0.05));

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow-blue: 0 0 20px rgba(83,109,254,0.2);
  --shadow-glow-green: 0 0 15px rgba(0,230,118,0.15);
  --shadow-glow-red: 0 0 15px rgba(255,82,82,0.15);

  /* Legacy compat (used in templates) */
  --color-green: #00e676;
  --color-red: #ff5252;
  --color-yellow: #ffab00;
  --color-border: rgba(83, 109, 254, 0.12);
  --color-galaxy: #536dfe;
  --color-galaxy-dim: #304ffe;
}

/* ── Base ──────────────────────────────────────────── */
body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(83,109,254,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(83,109,254,0.04) 0%, transparent 60%);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  padding-bottom: 40px;
}

::selection {
  background: rgba(83,109,254,0.3);
  color: #fff;
}

/* Icons */
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon-xs { width: 12px; height: 12px; vertical-align: -1px; }

/* ── Cards — glassmorphism ─────────────────────────── */
.card {
  background: var(--bg-card-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color) !important;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.card:hover {
  border-color: var(--border-glow) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow-blue);
  transform: translateY(-1px);
}

.card-header {
  background: transparent;
  border-color: var(--border-color) !important;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Stat cards — gradient accent ──────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}

.stat-card-blue::before { background: var(--grad-blue); }
.stat-card-green::before  { background: var(--grad-green); }
.stat-card-red::before    { background: var(--grad-red); }
.stat-card-blue::before   { background: var(--grad-blue); }
.stat-card-orange::before { background: var(--grad-orange); }
.stat-card-cyan::before   { background: var(--grad-cyan); }

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stat-icon-blue { background: rgba(83,109,254,0.15); color: var(--accent-blue); }
.stat-icon-green  { background: rgba(0,230,118,0.15); color: var(--accent-green); }
.stat-icon-red    { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.stat-icon-blue   { background: rgba(83,109,254,0.15); color: var(--accent-blue); }
.stat-icon-orange { background: rgba(255,109,0,0.15); color: var(--accent-orange); }
.stat-icon-cyan   { background: rgba(24,255,255,0.15); color: var(--accent-cyan); }

/* ── Tables ────────────────────────────────────────── */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(83,109,254,0.04);
  --bs-table-striped-bg: rgba(255,255,255,0.015);
  --bs-table-border-color: rgba(83,109,254,0.08);
}

.table td, .table th {
  border-color: rgba(83,109,254,0.08) !important;
  vertical-align: middle;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
}

.table-secondary th,
.table-dark th,
.table thead th {
  background: rgba(83,109,254,0.06) !important;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table tbody tr {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}

.table tbody tr:hover {
  --bs-table-bg: rgba(83,109,254,0.04);
}

/* ── Navbar status pills ───────────────────────────── */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(100,116,139,0.12);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,0.18);
}

/* ── Market status states ── */
.state-open {
  background: rgba(0,230,118,0.1);
  color: var(--accent-green);
  border-color: rgba(0,230,118,0.35);
  animation: glow-green 1.6s ease-in-out infinite;
}
.state-closed {
  background: rgba(255,82,82,0.1);
  color: #f87171;
  border-color: rgba(255,82,82,0.4);
  animation: glow-red 1.6s ease-in-out infinite;
}
.state-paper {
  background: rgba(255,171,0,0.1);
  color: var(--accent-yellow);
  border-color: rgba(255,171,0,0.4);
  animation: glow-yellow 1.6s ease-in-out infinite;
}
.state-connecting {
  background: rgba(83,109,254,0.09);
  color: var(--accent-blue);
  border-color: rgba(83,109,254,0.25);
  animation: glow-blue 1.2s ease-in-out infinite;
}

/* ── Dot ── */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Glow-pulse animations — animate box-shadow + border, not opacity/background */
@keyframes glow-green {
  0%,100% { box-shadow: 0 0 0   0   rgba(0,230,118,0);    border-color: rgba(0,230,118,0.35); }
  50%     { box-shadow: 0 0 8px 2px rgba(0,230,118,0.5);  border-color: rgba(0,230,118,0.8); }
}
@keyframes glow-red {
  0%,100% { background: rgba(255,82,82,0.08); box-shadow: 0 0 0    0   rgba(255,82,82,0);   border-color: rgba(255,82,82,0.35); }
  50%     { background: rgba(255,82,82,0.30); box-shadow: 0 0 10px 3px rgba(255,82,82,0.5); border-color: rgba(255,82,82,0.9); }
}
@keyframes glow-yellow {
  0%,100% { box-shadow: 0 0 0   0   rgba(255,171,0,0);    border-color: rgba(255,171,0,0.4); }
  50%     { box-shadow: 0 0 8px 2px rgba(255,171,0,0.5);  border-color: rgba(255,171,0,0.85); }
}
@keyframes glow-blue {
  0%,100% { box-shadow: 0 0 0   0   rgba(83,109,254,0);   border-color: rgba(83,109,254,0.25); }
  50%     { box-shadow: 0 0 6px 1px rgba(83,109,254,0.45); border-color: rgba(83,109,254,0.7); }
}

/* ── Market pill states ── */
.mkt-open   { background: rgba(0,200,83,0.08);  color: #4ade80; border-color: rgba(0,200,83,0.28); }
.mkt-closed { background: rgba(255,82,82,0.09); color: #f87171; border-color: rgba(255,82,82,0.32); }

/* ── Mode pill states ── */
.mode-paper { background: rgba(251,191,36,0.09); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.mode-live  { background: rgba(0,150,60,0.12);   color: #34d399; border-color: rgba(0,150,60,0.35); }

/* ── Feed pill states ── */
.nav-pill-feed.feed-live  { background: rgba(0,230,118,0.08); color: var(--accent-green);  border-color: rgba(0,230,118,0.25); }
.nav-pill-feed.feed-stale { background: rgba(255,171,0,0.09); color: var(--accent-yellow); border-color: rgba(255,171,0,0.25); }
.nav-pill-feed.feed-off   { background: rgba(100,116,139,0.1); color: #64748b;             border-color: rgba(100,116,139,0.15); }

/* ── History pill states ── */
.nav-pill-history.hist-fresh  { background: rgba(83,109,254,0.08); color: #818cf8;             border-color: rgba(83,109,254,0.22); }
.nav-pill-history.hist-stale  { background: rgba(255,171,0,0.09);  color: var(--accent-yellow); border-color: rgba(255,171,0,0.25); }
.nav-pill-history.hist-old    { background: rgba(255,82,82,0.08);  color: #f87171;             border-color: rgba(255,82,82,0.22);
                                 animation: glow-red 2.2s ease-in-out infinite; }

/* ── Token pill states ── */
.nav-pill-token.token-ok       { background: rgba(83,109,254,0.08); color: #818cf8;             border-color: rgba(83,109,254,0.22); }
.nav-pill-token.token-warn     { background: rgba(255,171,0,0.09);  color: var(--accent-yellow); border-color: rgba(255,171,0,0.25); }
.nav-pill-token.token-expiring { background: rgba(255,82,82,0.08);  color: #f87171;             border-color: rgba(255,82,82,0.22);
                                  animation: glow-red 1.4s ease-in-out infinite; }

/* ── Error pill ── */
.nav-pill-error { background: rgba(255,82,82,0.1) !important; color: #f87171 !important; border-color: rgba(255,82,82,0.25) !important; }

/* ── Navbar — frosted glass ────────────────────────── */
.navbar {
  background: rgba(8,10,18,0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,0.3);
  min-height: 52px;
  z-index: 1050;  /* above sticky thead (z-index:11) and Bootstrap dropdowns (1000) */
  position: relative;
}

/* Navbar dropdowns must clear sticky table headers */
.navbar .dropdown-menu {
  z-index: 1055;
}

.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.nav-link {
  color: var(--text-muted) !important;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--text-primary) !important;
  background: rgba(83,109,254,0.08);
}

.nav-link.active {
  color: #fff !important;
  background: rgba(83,109,254,0.18);
  box-shadow: inset 0 0 0 1px rgba(83,109,254,0.25);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-blue);
}

/* ── Buttons ───────────────────────────────────────── */
.btn-xs {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 6px;
}

.btn-primary {
  background: var(--grad-blue);
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(83,109,254,0.3);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(83,109,254,0.5);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--grad-blue);
  border: none;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(83,109,254,0.3);
}
.btn-success:hover {
  box-shadow: 0 4px 20px rgba(83,109,254,0.5);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--grad-red);
  border: none;
}

.btn-outline-primary {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-outline-primary:hover {
  background: rgba(83,109,254,0.15);
  border-color: var(--accent-blue);
  color: #fff;
}

.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-muted);
}

.btn-outline-secondary:hover {
  background: rgba(83,109,254,0.1);
  border-color: var(--border-glow);
  color: var(--text-primary);
}

/* ── Badges — vibrant ──────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

.badge-glow-green { background: var(--accent-green-dim); color: var(--accent-green); border: 1px solid rgba(0,230,118,0.2); }
.badge-glow-red   { background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid rgba(255,82,82,0.2); }
.badge-glow-blue { background: rgba(83,109,254,0.15); color: var(--accent-blue); border: 1px solid rgba(83,109,254,0.2); }

.bg-success { background: #198754 !important; color: #fff !important; }
.bg-danger  { background: var(--accent-red) !important; }
.bg-info    { background: var(--accent-blue) !important; }
.bg-warning { background: var(--accent-yellow) !important; }

/* ── Forms ─────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(15,18,32,0.8) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(83,109,254,0.12) !important;
}

.form-control::placeholder {
  color: var(--text-dim);
  opacity: 0.8;
}

.form-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ── Modals ────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(83,109,254,0.1);
}

.modal-header, .modal-footer {
  border-color: var(--border-color) !important;
}

.modal-backdrop.show { opacity: 0.7; }

/* ── Monospace ─────────────────────────────────────── */
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82em;
}

/* ── Profit / Loss ─────────────────────────────────── */
.text-profit, .text-success { color: var(--accent-green) !important; }
.text-loss, .text-danger    { color: var(--accent-red) !important; }

/* ── P&L calendar heatmap ──────────────────────────── */
.pnl-calendar { overflow-x: auto; padding-bottom: 4px; }
.pnl-cal-months {
  display: flex;
  gap: 3px;
  margin-left: 2px;
  margin-bottom: 4px;
}
.pnl-cal-months span {
  width: 11px;
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: visible;
}
.pnl-cal-grid { display: flex; gap: 3px; width: max-content; }
.pnl-cal-col { display: flex; flex-direction: column; gap: 3px; }
.pnl-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}
.pnl-cell-empty { background: transparent; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(83,109,254,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(83,109,254,0.35); }

/* ── Alerts ────────────────────────────────────────── */
.alert {
  font-size: 0.85rem;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.alert-info {
  background: rgba(83,109,254,0.1);
  border-color: rgba(83,109,254,0.2);
  color: #b0bec5;
}

.alert-secondary {
  background: rgba(83,109,254,0.06);
  border-color: var(--border-color);
  color: var(--text-muted);
}

#alert-bar { font-size: 0.85rem; }

/* ── Chart container ───────────────────────────────── */
.chart-container {
  position: relative;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(15,18,32,0.5);
}

/* ── Gradient text ─────────────────────────────────── */
.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Footer ────────────────────────────────────────── */
footer {
  background: rgba(8,10,18,0.85) !important;
  backdrop-filter: blur(10px);
  border-color: var(--border-color) !important;
}

footer.fixed-bottom {
  z-index: 999;
  font-size: 0.78rem;
}

main.container-fluid {
  padding-bottom: 3rem !important;
}

/* ── Animations ────────────────────────────────────── */
@keyframes pulse-green {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--accent-green); }
  50% { opacity: 0.5; box-shadow: 0 0 12px var(--accent-green); }
}
.pulse-green { animation: pulse-green 2s infinite; }

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse-red { animation: pulse-red 1.5s infinite; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease-out; }

@keyframes glow-ring {
  0%, 100% { box-shadow: 0 0 5px rgba(83,109,254,0.3); }
  50% { box-shadow: 0 0 20px rgba(83,109,254,0.4); }
}

/* LTP flash animation */
@keyframes flash-green {
  0%   { background-color: rgba(0,230,118,0.3); }
  100% { background-color: transparent; }
}
@keyframes flash-red {
  0%   { background-color: rgba(255,82,82,0.3); }
  100% { background-color: transparent; }
}
.flash-up   { animation: flash-green 0.6s ease-out; }
.flash-down { animation: flash-red   0.6s ease-out; }

/* ── Nav tabs dark ─────────────────────────────────── */
.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 0.85rem;
}
.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--accent-blue);
}
.nav-tabs { border-color: var(--border-color) !important; }

/* ── Status badges ─────────────────────────────────── */
.status-active  { background: var(--accent-green-dim); color: var(--accent-green); border: 1px solid rgba(0,230,118,0.25); animation: glow-ring 3s infinite; }
.status-paused  { background: rgba(255,171,0,0.12); color: var(--accent-yellow); border: 1px solid rgba(255,171,0,0.2); }
.status-stopped { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.status-error   { background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid rgba(255,82,82,0.25); animation: pulse-red 1.5s infinite; }

/* ── Scanner table rows ───────────────────────────── */
.scanner-row:hover { background: rgba(83,109,254,0.04); cursor: default; }
.scanner-row td { font-size: 0.82rem; vertical-align: middle; }

/* ── Column group design (scanner + watchlist) ─────── */
.col-grp-price     { background-color: rgba(83,109,254,0.05) !important; }
.col-grp-momentum  { background-color: rgba(0,230,118,0.04) !important; }
.col-grp-vol       { background-color: rgba(255,171,0,0.04)  !important; }

.col-grp-price.grp-start    { border-left:  2.5px solid rgba(83,109,254,0.35) !important; padding-left: 10px !important; }
.col-grp-momentum.grp-start { border-left:  2.5px solid rgba(0,230,118,0.4)   !important; padding-left: 10px !important; }
.col-grp-vol.grp-start      { border-left:  2.5px solid rgba(255,171,0,0.4)   !important; padding-left: 10px !important; }

.col-grp-price.grp-end      { border-right: 2.5px solid rgba(83,109,254,0.35) !important; padding-right: 10px !important; }
.col-grp-momentum.grp-end   { border-right: 2.5px solid rgba(0,230,118,0.4)   !important; padding-right: 10px !important; }
.col-grp-vol.grp-end        { border-right: 2.5px solid rgba(255,171,0,0.4)   !important; padding-right: 10px !important; }

/* Column header row (row 2) — top border matches the group header box */
thead tr:nth-child(2) .col-grp-price    { border-top: 2px solid rgba(83,109,254,0.3) !important; }
thead tr:nth-child(2) .col-grp-momentum { border-top: 2px solid rgba(0,230,118,0.3) !important; }
thead tr:nth-child(2) .col-grp-vol      { border-top: 2px solid rgba(255,171,0,0.3) !important; }

/* Hover row highlights per group */
.scanner-row:hover .col-grp-price    { background: rgba(83,109,254,0.10) !important; }
.scanner-row:hover .col-grp-momentum { background: rgba(0,230,118,0.08) !important; }
.scanner-row:hover .col-grp-vol      { background: rgba(255,171,0,0.08) !important; }

/* Bottom border on last row */
tbody tr:last-child .col-grp-price    { border-bottom: 2px solid rgba(83,109,254,0.2) !important; }
tbody tr:last-child .col-grp-momentum { border-bottom: 2px solid rgba(0,230,118,0.2) !important; }
tbody tr:last-child .col-grp-vol      { border-bottom: 2px solid rgba(255,171,0,0.2) !important; }

/* Group header row */
.grp-header {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem !important;
  text-align: center !important;
  border-bottom: none !important;
}

.grp-header-price {
  color: var(--accent-blue) !important;
  border-left: 2.5px solid rgba(83,109,254,0.35);
  border-right: 2.5px solid rgba(83,109,254,0.35);
  border-top: 2.5px solid rgba(83,109,254,0.35);
}

.grp-header-mom {
  color: var(--accent-green) !important;
  border-left: 2.5px solid rgba(0,230,118,0.4);
  border-right: 2.5px solid rgba(0,230,118,0.4);
  border-top: 2.5px solid rgba(0,230,118,0.4);
}

.grp-header-vol {
  color: var(--accent-yellow) !important;
  border-left: 2.5px solid rgba(255,171,0,0.4);
  border-right: 2.5px solid rgba(255,171,0,0.4);
  border-top: 2.5px solid rgba(255,171,0,0.4);
}

.grp-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.grp-dot-blue   { background: var(--accent-blue); box-shadow: 0 0 6px var(--accent-blue); }
.grp-dot-green  { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.grp-dot-yellow { background: var(--accent-yellow); box-shadow: 0 0 6px var(--accent-yellow); }

/* Sort + tooltip cursor */
.sort-col, .wl-sort-col { cursor: pointer; white-space: nowrap; transition: color 0.15s ease; }
.sort-col:hover, .wl-sort-col:hover { color: var(--accent-blue) !important; }
th[title] { cursor: help; }

/* ── Sticky table headers ──────────────────────────── */
.scanner-scroll,
.wl-scroll {
  overflow-y: auto !important;
  overflow-x: auto;
}

.scanner-scroll table,
.wl-scroll table {
  border-collapse: separate !important;
  border-spacing: 0;
}

.scanner-scroll thead th,
.wl-scroll thead th {
  position: sticky;
  z-index: 3;
  background-color: #0f1220 !important;
  box-shadow: 0 -4px 0 0 #0f1220, 0 -8px 0 0 #0f1220;
}

/* Row 1: group header labels */
.scanner-scroll thead tr:first-child th,
.wl-scroll thead tr:first-child th {
  top: 0;
  z-index: 4;
}

/* Row 2: column names — sits below group headers */
.scanner-scroll thead tr:nth-child(2) th,
.wl-scroll thead tr:nth-child(2) th {
  top: 28px;
  z-index: 3;
  box-shadow: 0 1px 0 rgba(83,109,254,0.1);
}

/* Opaque tinted backgrounds for group header cells */
.scanner-scroll thead tr:first-child th.grp-header-price,
.wl-scroll thead tr:first-child th.grp-header-price { background: #101630 !important; }
.scanner-scroll thead tr:first-child th.grp-header-mom,
.wl-scroll thead tr:first-child th.grp-header-mom   { background: #0e1816 !important; }
.scanner-scroll thead tr:first-child th.grp-header-vol,
.wl-scroll thead tr:first-child th.grp-header-vol   { background: #191510 !important; }

/* Opaque tinted backgrounds for column cells in header */
.scanner-scroll thead tr:nth-child(2) th.col-grp-price,
.wl-scroll thead tr:nth-child(2) th.col-grp-price { background: #0e1328 !important; }
.scanner-scroll thead tr:nth-child(2) th.col-grp-momentum,
.wl-scroll thead tr:nth-child(2) th.col-grp-momentum { background: #0e1614 !important; }
.scanner-scroll thead tr:nth-child(2) th.col-grp-vol,
.wl-scroll thead tr:nth-child(2) th.col-grp-vol { background: #17140e !important; }

/* ── Toast ─────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zt-toast {
  min-width: 240px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  animation: slideIn 0.2s ease-out;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.zt-toast.success { background: rgba(0,230,118,0.12); border: 1px solid rgba(0,230,118,0.3); color: var(--accent-green); }
.zt-toast.error   { background: rgba(255,82,82,0.12); border: 1px solid rgba(255,82,82,0.3); color: var(--accent-red); }
.zt-toast.info    { background: rgba(83,109,254,0.12); border: 1px solid rgba(83,109,254,0.3); color: var(--accent-blue); }
.zt-toast.warning { background: rgba(255,171,0,0.12); border: 1px solid rgba(255,171,0,0.3); color: var(--accent-yellow); }

@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── TradFi brand icon ─────────────────────────────── */
.galaxy-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  animation: galaxy-spin 12s linear infinite;
  transform-origin: center center;
}
@keyframes galaxy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Ladder levels table ───────────────────────────── */
.levels-table td { font-size: 0.8rem; }

/* ── List group ────────────────────────────────────── */
.list-group-item-dark,
.list-group-item.list-group-item-dark {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

/* ── Misc ──────────────────────────────────────────── */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
  border: none;
}

.hover-lift { transition: transform 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .card-header { font-size: 0.8rem; }
  .table-sm td, .table-sm th { padding: 0.3rem 0.4rem; }
}

/* ── Login page ────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card-glass);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.login-card h1 {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.login-card label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.login-card input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.login-card input:focus {
  border-color: var(--border-glow);
}

.login-card button {
  margin-top: 1.25rem;
  padding: 0.65rem;
  border: none;
  border-radius: 8px;
  background: var(--grad-blue);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.login-card button:hover {
  opacity: 0.9;
}

.login-card .alert-danger {
  background: var(--accent-red-dim);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Scroll-shadow hint on horizontally-scrollable tables — a wide table
   inside a narrow mobile card gives no visual sign there's more to the
   right until you swipe it. CSS-only: two gradients pinned to the
   scroll content fade the edges when there's overflow in that
   direction, two pinned to the viewport paint over them once you've
   scrolled past, so the shadow disappears exactly at each edge. */
.table-responsive {
  background:
    linear-gradient(to right, var(--bg-card) 30%, rgba(15, 18, 32, 0)),
    linear-gradient(to left, var(--bg-card) 30%, rgba(15, 18, 32, 0)) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) 0 0 / 24px 100%,
    linear-gradient(to left, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) 100% 0 / 24px 100%;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 24px 100%, 24px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Nav group dropdowns open on hover for mouse users (desktop); touch
   devices have no hover state, so Bootstrap's click-to-toggle JS still
   handles them unchanged. */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}