/* ===================================================
   Galaxy — 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; }

/* ── 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; }
}

/* ── Galaxy 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;
}