/* =========================================================
   IT Guru – Breakout Retest Indicator | Modern UI
   ========================================================= */

/* ---- Design Tokens ---- */
:root {
  --bg-base: #06080f;
  --bg-surface: #0c1021;
  --bg-card: rgba(14, 19, 39, 0.72);
  --bg-card-hover: rgba(18, 25, 50, 0.85);
  --glass-border: rgba(99, 128, 255, 0.08);
  --glass-glow: rgba(59, 130, 246, 0.06);

  --text: #d4daf0;
  --text-soft: #8b95b5;
  --text-muted: #5c6484;
  --heading: #f0f2ff;

  --primary: #6366f1;
  --primary-soft: #818cf8;
  --primary-glow: rgba(99, 102, 241, 0.18);
  --danger: #f43f5e;
  --danger-soft: #fb7185;
  --success: #10b981;
  --success-soft: #34d399;
  --warning: #f59e0b;
  --warning-soft: #fbbf24;
  --cyan: #22d3ee;

  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--glass-border);
  --shadow-glow: 0 0 40px var(--glass-glow);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  padding: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle gradient overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.06), transparent),
    radial-gradient(ellipse 50% 50% at 80% 90%, rgba(16, 185, 129, 0.04), transparent);
  pointer-events: none;
  z-index: 0;
}

:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 2px;
}

/* ---- Container ---- */
.container {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

/* ---- Typography ---- */
h1 {
  text-align: center;
  color: var(--heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}
h1 .badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-soft));
  color: #fff;
  padding: 3px 12px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Sticky Status Bar ---- */
.status-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}
.status-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.status-bar-left .brand {
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--heading);
  letter-spacing: -0.01em;
}
.status-bar-center {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.status-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 128, 255, 0.1);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.chip-label {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chip-value {
  color: var(--heading);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.status-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
}
.bar-btn-connect {
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: #fff;
  border-color: transparent;
}
.bar-btn-connect:hover {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.bar-btn-disconnect {
  background: linear-gradient(135deg, var(--danger), #e11d48);
  color: #fff;
  border-color: transparent;
}
.bar-btn-disconnect:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--danger-soft), var(--danger));
  box-shadow: 0 2px 8px rgba(244,63,94,0.3);
}
.bar-btn-tool {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-soft);
}
.bar-btn-tool:hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--primary-soft);
  box-shadow: none;
}
.bar-btn-reset {
  background: linear-gradient(135deg, var(--warning), #d97706);
  color: #fff;
  border-color: transparent;
}
.bar-btn-reset:hover {
  background: linear-gradient(135deg, #fbbf24, var(--warning));
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}

/* Status bar live price styling */
.status-chip .price {
  font-size: var(--fs-sm);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--heading);
}

/* Status bar countdown */
.status-chip .countdown-badge {
  font-size: var(--fs-xs);
  min-width: 44px;
  padding: 2px 8px;
}

h3 {
  color: var(--heading);
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Navigation ---- */
.bot-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.bot-nav .brand {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--heading);
  letter-spacing: -0.01em;
}
.bot-links {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.bot-links a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all 0.2s;
}
.bot-links a:hover {
  background: var(--primary-glow);
  color: var(--primary-soft);
}

/* ---- User account info (nav bar) ---- */
.user-account-info {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-soft);
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}

.bot-nav .shortcut-hints {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* ---- Layout Grid ---- */
.layout-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-md);
  align-items: stretch;
}
@media (max-width: 920px) {
  .layout-grid { grid-template-columns: 1fr; }
}

/* ---- Panels ---- */
.left-panel, .right-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---- Sidebar scroll containment ---- */
/* Sticky sidebar that stretches full page height and scrolls independently */
.left-panel {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
}
.panel-content {
  /* 80px accounts for status bar (~52px) + minimal spacing */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* ---- Sidebar Tabs ---- */
.sidebar-tabs {
  display: flex;
  gap: 2px;
  background: rgba(6, 8, 15, 0.5);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: var(--space-sm);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
}
.sidebar-tab {
  flex: 1;
  padding: 7px 6px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
}
.sidebar-tab:hover {
  color: var(--text-soft);
  background: rgba(99, 102, 241, 0.06);
  transform: none;
}
.sidebar-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.sidebar-tab.active:hover {
  background: var(--primary-soft);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Tab panes */
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---- Glass Cards ---- */
.box, .info, .controls, .dashboard, .history, .chart-embed {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.box:hover, .dashboard:hover {
  border-color: rgba(99, 128, 255, 0.14);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.box label, .info label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 3px 0 0;
  line-height: 1.4;
}

/* ---- Inputs / Select ---- */
select, input[type="number"], input[type="text"], input[type="password"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(99, 128, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 15, 0.6);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
select:focus, input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%238b95b5'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ---- Risk:Reward Inputs ---- */
.rr-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.rr-inputs input[type="number"] { flex: 1; width: auto; }
.rr-separator {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* ---- Account Size Inputs ---- */
.account-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.account-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.account-input-row label {
  min-width: 110px;
  white-space: nowrap;
}
.account-input-row input[type="number"] {
  flex: 1;
  width: auto;
}

/* ---- Buttons ---- */
button {
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
button:hover {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}
button:active { transform: translateY(0); }
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.controls {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.controls button {
  flex: 1;
  padding: 10px;
  font-size: var(--fs-md);
}
.controls button:last-child {
  background: linear-gradient(135deg, var(--danger), #e11d48);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.2);
}
.controls button:last-child:hover {
  background: linear-gradient(135deg, var(--danger-soft), var(--danger));
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.3);
}

/* ---- Status Badges ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-badge.disabled {
  background: rgba(92, 100, 132, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(92, 100, 132, 0.2);
}
.status-badge.enabled {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-soft);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.status-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.status-badge.bull {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-soft);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.status-badge.bear {
  background: rgba(244, 63, 94, 0.12);
  color: var(--danger-soft);
  border: 1px solid rgba(244, 63, 94, 0.25);
}
.status-badge.caution {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.env-label {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* ---- Live Price ---- */
.live-price {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(16, 185, 129, 0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 185, 129, 0.1);
}
.live-price .label {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.price {
  font-size: var(--fs-lg);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--heading);
}

/* ---- Candle Countdown ---- */
.candle-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.candle-countdown .label {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.countdown-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  min-width: 56px;
  text-align: center;
}
.countdown-badge.countdown-urgent {
  background: linear-gradient(135deg, var(--danger), #e11d48);
  animation: countdown-pulse 0.8s ease-in-out infinite;
}
@keyframes countdown-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.04); }
}

/* ---- State Grid (compact 2-col cards) ---- */
.state-grid-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.state-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 128, 255, 0.08);
  transition: border-color 0.2s;
}
.state-card:hover {
  border-color: rgba(99, 128, 255, 0.16);
}
.state-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.state-card-value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--heading);
}
.state-card-danger { color: var(--danger-soft); }
.state-card-success { color: var(--success-soft); }

/* ---- Stats Grid (compact cards) ---- */
.stats-grid-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(99, 128, 255, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  border-color: rgba(99, 128, 255, 0.16);
  box-shadow: 0 0 16px var(--glass-glow);
}
.stat-card-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-family: var(--font-mono);
}
.stat-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.stat-card-neutral {
  background: rgba(99, 102, 241, 0.04);
}
.stat-card-neutral .stat-card-value { color: var(--text); }
.stat-card-success {
  background: rgba(16, 185, 129, 0.06);
}
.stat-card-success .stat-card-value { color: var(--success-soft); }
.stat-card-danger {
  background: rgba(244, 63, 94, 0.06);
}
.stat-card-danger .stat-card-value { color: var(--danger-soft); }
.stat-card-primary {
  background: rgba(99, 102, 241, 0.06);
}
.stat-card-primary .stat-card-value { color: var(--primary-soft); }

/* ---- Per-strategy win rate rows ---- */
.strat-wr-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 4px 8px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  font-size: 0.76rem;
  min-height: 24px;
}
.strat-wr-row:empty { display: none; }
.strat-wr-name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-wr-wins { color: var(--success-soft); font-weight: 700; text-align: right; }
.strat-wr-losses { color: var(--danger-soft); font-weight: 700; text-align: right; }
.strat-wr-rate { color: var(--primary-soft); font-weight: 700; text-align: right; min-width: 38px; }


.dashboard {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px var(--space-sm);
  font-size: var(--fs-sm);
  border-radius: var(--radius-xs);
  transition: background 0.15s;
}
.side-row:hover {
  background: rgba(99, 128, 255, 0.04);
}
.side-row span:first-child {
  color: var(--text-soft);
  font-weight: 600;
}

/* ---- Chart ---- */
.chart-embed {
  padding: var(--space-sm);
}
.chart-embed canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background: var(--bg-base);
}

/* ---- Legend ---- */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
}
.legend-group-label {
  width: 100%;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}
/* Candle colours */
.bull-candle-swatch { background: #22c55e; border: 1px solid #16a34a; }
.bear-candle-swatch { background: #ef4444; border: 1px solid #dc2626; }

.range-swatch          { background: rgba(99, 102, 241, 0.35); border: 1px solid var(--primary); }
.breakout-bull-swatch  { background: rgba(16, 185, 129, 0.35); border: 1px solid var(--success); }
.breakout-bear-swatch  { background: rgba(244, 63, 94, 0.35); border: 1px solid var(--danger); }
.retest-swatch         { background: rgba(245, 158, 11, 0.35); border: 1px solid var(--warning); }
.confirm-swatch        { background: rgba(168, 85, 247, 0.35); border: 1px solid #a855f7; }
.entry-swatch          { background: rgba(34, 211, 238, 0.35); border: 1px solid var(--cyan); }

/* Trade level swatches */
.sl-swatch          { background: rgba(239, 68, 68, 0.35); border: 1px solid #ef4444; }
.tp-swatch          { background: rgba(34, 197, 94, 0.35); border: 1px solid #22c55e; }
.partial-tp-swatch  { background: rgba(168, 85, 247, 0.25); border: 1px dashed #a855f7; }
.tesla-swatch       { background: rgba(251, 191, 36, 0.35); border: 1px solid #fbbf24; }

/* ---- EMA Legend Swatches ---- */
.ema-fast-swatch { background: rgba(245, 158, 11, 0.35); border: 1px solid #f59e0b; }
.ema-slow-swatch { background: rgba(139, 92, 246, 0.35); border: 1px solid #8b5cf6; }
.htf-ema-swatch  { background: rgba(34, 211, 238, 0.35); border: 1px solid var(--cyan); }
.trailing-sl-swatch { background: rgba(249, 115, 22, 0.35); border: 1px solid #f97316; }
.live-price-swatch  { background: linear-gradient(90deg, rgba(16,185,129,0.35), rgba(244,63,94,0.35)); border: 1px dashed var(--text-muted); }
.bollinger-swatch   { background: rgba(167, 139, 250, 0.2); border: 1px solid #a78bfa; }

/* Candle annotation inline symbol */
.legend-annotation {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1;
  flex-shrink: 0;
}

.ema-toggle-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
  font-weight: 500;
}
.ema-toggle-row input[type="checkbox"] { width: auto; }

/* ---- Signal Log / History ---- */
.history ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}
.history li {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(99, 128, 255, 0.05);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.history li:last-child { border-bottom: none; }

/* ---- Collapsible ---- */
.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.collapsible::after {
  content: "▸";
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.collapsible-body { display: none; }
.collapsible-body.open { display: block; }

/* ---- Tools Panel (now in status bar) ---- */
.tools-panel { padding: var(--space-md); }
.tools-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.tool-btn {
  flex: 1;
  min-width: 110px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.tool-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--primary-soft);
}
.shortcut-hints {
  padding: var(--space-xs) 0;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---- Toggle Switches (Modern) ---- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px 0;
  font-weight: 500;
}
.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  background: rgba(92, 100, 132, 0.3);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}
.toggle-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-row input[type="checkbox"]:checked {
  background: var(--primary);
}
.toggle-row input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}

/* ---- Parameter Divider / Group ---- */
.param-divider {
  border: none;
  border-top: 1px solid rgba(99, 128, 255, 0.08);
  margin: 12px 0 8px;
}
.param-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-soft);
  margin: 0 0 8px;
}

/* ---- Mobile Panel Toggle ---- */
.panel-toggle {
  display: none;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: #fff;
  padding: 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: var(--space-sm);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

@media (max-width: 920px) {
  .panel-toggle { display: block; }
  .panel-content { display: none; max-height: none; }
  .panel-content.panel-open { display: block; }
  .left-panel { position: static; max-height: none; }
  .controls button { min-height: 48px; font-size: var(--fs-lg); }
  select, input[type="number"] { min-height: 48px; font-size: var(--fs-lg); }
  h1 { font-size: var(--fs-xl); }
  .status-bar { border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); }
  .status-bar-center { order: 3; width: 100%; justify-content: flex-start; }
  .status-bar-left .brand { display: none; }
  .sidebar-tabs { position: static; }
}

/* ---- Login Overlay ---- */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 15, 0.94);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  z-index: 99999;
}

.login-card {
  width: min(860px, 96vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--glass-border);
}

.login-card h2 {
  margin: 0 0 10px;
  color: var(--heading);
  font-size: var(--fs-xl);
  font-weight: 800;
}

.login-card p {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: var(--fs-md);
}

.login-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(99, 128, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 15, 0.7);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.login-input::placeholder { color: var(--text-muted); }

.login-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.login-token-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(99, 128, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 15, 0.7);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-mono);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-token-input::placeholder { color: var(--text-muted); }
.login-token-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.login-action-btn {
  width: 100%;
  padding: 13px 14px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  color: #fff;
  background: linear-gradient(135deg, var(--success), #059669);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
  transition: all 0.2s;
}
.login-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.35);
}

.login-error {
  color: var(--danger-soft);
  margin-top: 12px;
  min-height: 18px;
  font-size: var(--fs-sm);
}

.login-switch {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.login-switch a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.login-switch a:hover {
  text-decoration: underline;
}

.remember-me-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* ── Login: two-panel layout ── */
.login-panel {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.login-logo-icon { font-size: 28px; line-height: 1; }

.login-logo-text {
  font-size: 19px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.login-panel h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 6px;
  text-align: left;
}

.login-panel > p,
.login-panel #loginFormSection > p {
  color: var(--text-soft);
  font-size: 13.5px;
  margin: 0 0 22px;
  text-align: left;
}

.login-field-wrap { margin-bottom: 14px; }

.login-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Plans panel ── */
.login-plans-panel {
  padding: 36px 28px;
  background: rgba(6, 8, 15, 0.4);
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

.login-plans-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-soft);
  margin: 0 0 6px;
}

.login-plans-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 4px;
}

.login-plans-subtitle {
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 0 0 20px;
}

.login-plans-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 14px;
}

.login-plan-card {
  background: rgba(14, 19, 39, 0.65);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.login-plan-card-featured {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.09);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.22);
}

.login-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.login-plan-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(100, 116, 139, 0.2);
  color: var(--text-soft);
  border: 1px solid rgba(100, 116, 139, 0.2);
  white-space: nowrap;
}

.login-plan-badge-featured {
  background: rgba(99, 102, 241, 0.18);
  color: var(--primary-soft);
  border-color: rgba(99, 102, 241, 0.35);
}

.login-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.login-plan-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--heading);
  font-family: var(--font-mono);
}

.login-plan-period {
  font-size: 11px;
  color: var(--text-muted);
}

.login-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.login-plan-features li {
  font-size: 12px;
  color: var(--text-soft);
  padding-left: 15px;
  position: relative;
}

.login-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
}

.login-plan-card-featured .login-plan-features li { color: var(--text); }

.login-plans-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .login-card {
    grid-template-columns: 1fr !important;
    width: min(440px, 96vw) !important;
  }
  .login-plans-panel {
    border-left: none;
    border-top: 1px solid var(--glass-border);
    padding: 24px 28px;
  }
  .login-panel { padding: 32px 28px 20px; }
  .login-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .login-plan-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 440px) {
  .login-overlay { padding: 16px 12px; }
  .login-plans-grid { grid-template-columns: 1fr; }
}

/* ---- API fields side-by-side ---- */
.api-fields-row {
  display: flex;
  gap: 10px;
}
.api-fields-row .api-field {
  flex: 1;
  min-width: 0;
}
.api-fields-row .api-field label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.api-fields-row .param-input {
  width: 100%;
  box-sizing: border-box;
}

.btn-logout {
  background: linear-gradient(135deg, var(--danger-soft), #dc2626);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all 0.2s;
}
.btn-logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 128, 255, 0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 128, 255, 0.3); }

/* ---- Section Headers with icons ---- */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
}
.section-header .icon {
  font-size: 16px;
  line-height: 1;
}
.section-header h3 {
  margin: 0;
}

/* ---- Lock Row (Timeframe / R:R lock checkboxes) ---- */
.lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lock-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lock-label input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- Utility classes ---- */
.status-meta {
  margin-top: 4px;
  font-size: var(--fs-sm);
}
.spaced-label {
  margin-top: 8px;
}

/* ---- Indicator State ---- */
.indicator-state .side-row {
  padding: 5px var(--space-sm);
}

/* ---- Symbol Nav (prev/next in State tab) ---- */
.symbol-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sym-nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.6;
}
.sym-nav-btn:hover {
  background: var(--primary-glow);
  color: var(--primary-soft);
  border-color: var(--primary);
}
.sym-nav-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---- Recommended Settings (two-badge rows) ---- */
.recommended-settings .side-row {
  padding: 4px var(--space-sm);
}
.rec-header-row {
  display: flex;
  align-items: center;
  padding: 2px var(--space-sm) 6px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 2px;
}
.rec-col-name {
  flex: 1;
}
.rec-col-label {
  width: 72px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rec-row {
  display: flex;
  align-items: center;
  padding: 4px var(--space-sm);
  font-size: var(--fs-sm);
  border-radius: var(--radius-xs);
  transition: background 0.15s;
}
.rec-row:hover {
  background: rgba(99, 128, 255, 0.04);
}
.rec-name {
  flex: 1;
  color: var(--text-soft);
  font-weight: 600;
}
.rec-badge-rec {
  width: 72px;
  text-align: center;
  justify-content: center;
  font-size: 10px;
  padding: 2px 5px;
}
.rec-badge-active {
  width: 72px;
  text-align: center;
  justify-content: center;
  font-size: 10px;
  padding: 2px 5px;
}
.rec-market-signals {
  border: 1px solid var(--glass-border);
}
.rec-market-signals ul {
  list-style: disc;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-soft);
}
.rec-market-signals ul li {
  margin-bottom: 2px;
}
.rec-market-signals strong {
  color: var(--heading);
}
/* Market type badge colors */
.chip-value.status-badge.bull { color: var(--success); font-weight: 700; }
.chip-value.status-badge.bear { color: var(--danger); font-weight: 700; }
.chip-value.status-badge.warning { color: var(--warning); font-weight: 700; }
.chip-value.status-badge.enabled { color: var(--primary-soft); font-weight: 700; }

/* =========================================================
   LIGHT THEME
   ========================================================= */

body.light-theme {
  --bg-base: #f0f2f5;
  --bg-surface: #f8f9fc;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(99, 102, 241, 0.1);
  --glass-glow: rgba(99, 102, 241, 0.06);
  --text: #1e293b;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --heading: #0f172a;
  --shadow-card: 0 1px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--glass-border);
  background: var(--bg-base);
  color: var(--text);
}

body.light-theme::before {
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.04), transparent),
    radial-gradient(ellipse 50% 50% at 80% 90%, rgba(16, 185, 129, 0.03), transparent);
}

body.light-theme .box,
body.light-theme .info,
body.light-theme .dashboard,
body.light-theme .history,
body.light-theme .chart-embed {
  background: var(--bg-card);
  border-color: var(--glass-border);
}

body.light-theme input,
body.light-theme select {
  background: rgba(241, 245, 249, 0.9);
  color: var(--text);
  border-color: rgba(99, 102, 241, 0.15);
}

body.light-theme button {
  /* keep gradient buttons */
}

body.light-theme .status-badge.disabled {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border-color: rgba(148, 163, 184, 0.2);
}

body.light-theme .tool-btn {
  border-color: rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.04);
  color: var(--text-soft);
}
body.light-theme .tool-btn:hover {
  background: rgba(99, 102, 241, 0.1);
}

body.light-theme .chart-embed canvas {
  background: #f8f9fc;
}

body.light-theme .toggle-row input[type="checkbox"] {
  background: rgba(148, 163, 184, 0.3);
}
body.light-theme .toggle-row input[type="checkbox"]:checked {
  background: var(--primary);
}

body.light-theme .param-divider {
  border-top-color: rgba(99, 102, 241, 0.1);
}

body.light-theme .live-price {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.1);
}

body.light-theme .side-row:hover {
  background: rgba(99, 102, 241, 0.03);
}

body.light-theme .status-bar {
  background: var(--bg-card);
  border-color: var(--glass-border);
}

body.light-theme .status-chip {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.1);
}

body.light-theme .sidebar-tabs {
  background: rgba(241, 245, 249, 0.8);
}

body.light-theme .sidebar-tab {
  color: var(--text-muted);
}
body.light-theme .sidebar-tab.active {
  background: var(--primary);
  color: #fff;
}

body.light-theme .state-card {
  background: rgba(99, 102, 241, 0.03);
  border-color: rgba(99, 102, 241, 0.1);
}

body.light-theme .stat-card-neutral { background: rgba(99, 102, 241, 0.03); }
body.light-theme .stat-card-success { background: rgba(16, 185, 129, 0.05); }
body.light-theme .stat-card-danger { background: rgba(244, 63, 94, 0.05); }
body.light-theme .stat-card-primary { background: rgba(99, 102, 241, 0.05); }

body.light-theme .bar-btn-tool {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.12);
}

/* ---- Multi-Symbol light theme ---- */
body.light-theme .multi-symbol-header,
body.light-theme .multi-symbol-grid {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .ms-card {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.06);
}
body.light-theme .ms-card:hover {
  border-color: var(--primary-soft);
}
body.light-theme .ms-card-header,
body.light-theme .ms-card-footer {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.06);
}

/* ---- Telegram Section ---- */
.telegram-send-btn,
.telegram-test-btn,
.telegram-send-scalp-btn,
.telegram-send-strategy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-sm);
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #fff;
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.telegram-send-btn {
  background: var(--primary);
}
.telegram-send-scalp-btn {
  background: #b8860b;
}
.telegram-send-strategy-btn {
  background: #2e7d52;
}
.telegram-test-btn {
  background: rgba(99, 128, 255, 0.25);
  border: 1px solid rgba(99, 128, 255, 0.35);
  color: var(--primary);
}
.telegram-send-btn:hover {
  background: var(--primary-soft);
  box-shadow: 0 0 12px var(--primary-glow);
}
.telegram-send-scalp-btn:hover {
  background: #d4a017;
  box-shadow: 0 0 12px rgba(184, 134, 11, 0.5);
}
.telegram-send-strategy-btn:hover {
  background: #3a9e67;
  box-shadow: 0 0 12px rgba(46, 125, 82, 0.5);
}
.telegram-test-btn:hover {
  background: rgba(99, 128, 255, 0.35);
  box-shadow: 0 0 8px var(--primary-glow);
}
.telegram-btn-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.telegram-status {
  min-height: 18px;
  margin-top: var(--space-xs);
  font-weight: 500;
  transition: color 0.2s;
}
.telegram-ok  { color: var(--success) !important; }
.telegram-err { color: var(--danger)  !important; }

/* Token input with show/hide toggle */
.input-with-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.input-with-toggle input {
  flex: 1;
  min-width: 0;
}
.token-toggle-btn {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: background 0.15s;
}
.token-toggle-btn:hover {
  background: rgba(99, 128, 255, 0.1);
}

/* Remember me row */
.remember-me-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
}
.remember-me-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.remember-hint {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* =========================================================
   Multi-Symbol Analysis
   ========================================================= */

/* ---- Picker (in settings sidebar) ---- */
.multi-symbol-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 8px;
}
.ms-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 3px 4px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-xs {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-xs:hover { background: var(--bg-card-hover); }
.btn-danger {
  background: linear-gradient(135deg, var(--danger), #e11d48);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.2);
  color: #fff;
}
.btn-danger:hover {
  background: linear-gradient(135deg, var(--danger-soft), var(--danger));
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.3);
}
.ms-group-label {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--glass-border);
  margin-top: 4px;
}
.ms-group-label:first-child { margin-top: 0; }
.ms-check:hover { background: var(--bg-card-hover); }
.ms-check input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--primary);
}

/* ---- Grid section (in right panel) ---- */
.multi-symbol-section {
  margin-bottom: var(--space-md);
}
.multi-symbol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  backdrop-filter: blur(16px);
}
.multi-symbol-header h3 {
  font-size: var(--fs-md);
  color: var(--heading);
  margin: 0;
}
.multi-symbol-actions {
  display: flex;
  gap: 6px;
}

.multi-symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  backdrop-filter: blur(16px);
}

/* ---- Individual mini-chart card ---- */
.ms-card {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.ms-card:hover {
  border-color: var(--primary-soft);
  box-shadow: 0 0 12px var(--primary-glow);
  transform: translateY(-1px);
}
.ms-card.ms-card-active {
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary-glow), 0 0 0 2px var(--primary-glow);
}

.ms-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--bg-card);
}
.ms-card-symbol-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-card-symbol {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--heading);
}
.ms-card-tf {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.3px;
  opacity: 0.85;
}
.ms-card-badges {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ms-card-phase {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ms-card-dir {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}
.ms-card-canvas {
  display: block;
  width: 100%;
  height: 140px;
}
.ms-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-card);
  font-size: 10px;
  color: var(--text-soft);
}
.ms-card-price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}
.ms-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-card-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.ms-card-dot.connected { background: var(--success); }
.ms-card-dot.disconnected { background: var(--danger); }

/* Action badge (recommended order type) */
.ms-card-action {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ms-action-buy {
  background: rgba(34,197,94,0.2);
  color: var(--success);
}
.ms-action-sell {
  background: rgba(239,68,68,0.2);
  color: var(--danger);
}

/* Phase badge colours (reusing existing palette) */
.ms-phase-waiting    { background: var(--bg-card-hover); color: var(--text-soft); }
.ms-phase-range      { background: rgba(245,158,11,0.2); color: var(--warning); }
.ms-phase-breakout   { background: rgba(34,197,94,0.2); color: var(--success); }
.ms-phase-retest     { background: rgba(245,158,11,0.2); color: var(--warning); }
.ms-phase-indecision { background: rgba(245,158,11,0.2); color: var(--warning); }
.ms-phase-confirm    { background: rgba(34,197,94,0.2); color: var(--success); }
.ms-phase-trade      { background: rgba(34,197,94,0.3); color: var(--success); }

/* Direction badge colours */
.ms-dir-bull { background: rgba(34,197,94,0.2); color: var(--success); }
.ms-dir-bear { background: rgba(239,68,68,0.2); color: var(--danger); }
.ms-dir-none { background: var(--bg-card-hover); color: var(--text-soft); }

/* Responsive: stack grid on small screens */
@media (max-width: 640px) {
  .multi-symbol-grid {
    grid-template-columns: 1fr;
  }
  .ms-card-canvas { height: 110px; }
}
@media (min-width: 1200px) {
  .multi-symbol-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Signal Strength Gauge ---- */
.gauge-bar {
  height: 8px;
  background: var(--glass-border, rgba(255,255,255,0.06));
  border-radius: 4px;
  overflow: hidden;
  margin: 2px 12px 8px 12px;
}
.gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease, background 0.4s ease;
  width: 0;
}
.gauge-bull     { background: var(--success, #22c55e); }
.gauge-warning  { background: var(--warning, #eab308); }
.gauge-bear     { background: var(--danger, #ef4444); }
.gauge-disabled { background: var(--text-muted, #475569); }

/* ================= LIVE SCALP SCANNER STYLES ================= */

/* Scalp legend swatch */
.scalp-swatch {
  background: linear-gradient(135deg, rgba(34,197,94,0.5), rgba(244,63,94,0.5));
  border: 1px solid rgba(250,204,21,0.6);
}

/* ---- Scalp Alert Banner (slides in above chart) ---- */
.scalp-banner {
  position: relative;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 0;
}
.scalp-banner-show {
  max-height: 52px;
  opacity: 1;
  padding: 10px var(--space-lg);
  margin-bottom: var(--space-sm);
  animation: scalpPulse 1.5s ease-in-out 3;
}
.scalp-banner-bull {
  background: linear-gradient(90deg, rgba(34,197,94,0.25), rgba(34,197,94,0.08));
  border: 1px solid rgba(34,197,94,0.4);
  box-shadow: 0 0 20px rgba(34,197,94,0.15);
}
.scalp-banner-bear {
  background: linear-gradient(90deg, rgba(239,68,68,0.25), rgba(239,68,68,0.08));
  border: 1px solid rgba(239,68,68,0.4);
  box-shadow: 0 0 20px rgba(239,68,68,0.15);
}
.scalp-banner-icon {
  font-size: 18px;
  animation: scalpBolt 0.6s ease-in-out infinite alternate;
}
.scalp-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes scalpPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
@keyframes scalpBolt {
  0%   { transform: scale(1) rotate(0); }
  100% { transform: scale(1.15) rotate(8deg); }
}

/* ---- Scalp Alerts Section ---- */
.scalp-alerts-section {
  border-left: 3px solid rgba(250,204,21,0.4);
}

.scalp-count-badge {
  display: inline-block;
  background: var(--warning, #f59e0b);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.scalp-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scalp-alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  transition: background 0.2s;
}
.scalp-alert-item:hover {
  background: var(--bg-card-hover);
}
.scalp-bull {
  background: rgba(34,197,94,0.08);
  border-left: 3px solid rgba(34,197,94,0.6);
}
.scalp-bear {
  background: rgba(239,68,68,0.08);
  border-left: 3px solid rgba(239,68,68,0.6);
}
.scalp-dir {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.scalp-bull .scalp-dir { color: var(--success); }
.scalp-bear .scalp-dir { color: var(--danger); }

.scalp-symbol {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  opacity: 0.85;
}

.scalp-price {
  font-weight: 600;
  color: var(--text);
}
.scalp-conf {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}
.scalp-bull .scalp-conf {
  background: rgba(34,197,94,0.2);
  color: var(--success);
}
.scalp-bear .scalp-conf {
  background: rgba(239,68,68,0.2);
  color: var(--danger);
}
.scalp-time {
  color: var(--text-muted);
  font-size: 10px;
}
.scalp-reasons {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scalp-levels {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 10px;
}

/* ================================================================
   LIVE SIGNAL TICKER BANNER
   ================================================================ */
.signal-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
  box-shadow: var(--shadow-card);
  min-height: 42px;
  overflow: hidden;
}
.signal-banner-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--primary-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: var(--space-sm);
  border-right: 1px solid var(--glass-border);
  white-space: nowrap;
}
.signal-banner-track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.25) transparent;
  padding: 2px 0;
}
.signal-banner-track::-webkit-scrollbar { height: 4px; }
.signal-banner-track::-webkit-scrollbar-track { background: transparent; }
.signal-banner-track::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 4px; }

/* ---- Individual signal card ---- */
.signal-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(99,128,255,0.1);
  background: rgba(99,102,241,0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.signal-card:hover {
  border-color: rgba(99,128,255,0.35);
  box-shadow: 0 0 12px var(--glass-glow);
  transform: translateY(-1px);
}
.signal-card:active {
  transform: scale(0.97);
}

/* Direction arrows */
.signal-card-dir {
  font-weight: 800;
  font-size: var(--fs-sm);
}
.signal-card-dir.bull { color: var(--success-soft); }
.signal-card-dir.bear { color: var(--danger-soft); }

/* Symbol chip */
.signal-card-symbol {
  color: var(--heading);
  font-weight: 700;
}

/* Price / level text */
.signal-card-price { color: var(--text-soft); }
.signal-card-levels { color: var(--text-muted); font-size: 10px; }
.signal-card-sep { color: var(--text-muted); font-size: 10px; opacity: 0.5; }
.signal-card-rr { color: var(--cyan); font-weight: 700; }
.signal-card-time { color: var(--text-muted); font-size: 10px; }
.signal-card-conf { color: var(--warning-soft); font-size: 10px; }
.scalp-card-sep { color: var(--text-muted); font-size: 10px; opacity: 0.5; }

/* Result badge */
.signal-card-result {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.signal-card-result.pending {
  background: rgba(245,158,11,0.15);
  color: var(--warning-soft);
  border: 1px solid rgba(245,158,11,0.3);
  animation: signalPendingPulse 2s ease-in-out infinite;
}
.signal-card-result.win {
  background: rgba(16,185,129,0.15);
  color: var(--success-soft);
  border: 1px solid rgba(16,185,129,0.3);
}
.signal-card-result.loss {
  background: rgba(244,63,94,0.15);
  color: var(--danger-soft);
  border: 1px solid rgba(244,63,94,0.3);
}
.signal-card-result.confirmed {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,0.3);
  animation: signalConfirmedPulse 2.5s ease-in-out infinite;
}

/* Card border tint by result */
.signal-card.signal-card-win  { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.04); }
.signal-card.signal-card-loss { border-color: rgba(244,63,94,0.25);  background: rgba(244,63,94,0.04); }
.signal-card.signal-card-confirmed { border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.04); }

/* Confirmation pattern label inside card */
.signal-card-pattern {
  color: #60a5fa;
  font-size: 10px;
  font-style: italic;
  white-space: nowrap;
}

/* Empty state */
.signal-banner-empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: italic;
  padding: 4px 0;
}

@keyframes signalPendingPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes signalConfirmedPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ================================================================
   LIVE SCALP TICKER BANNER
   ================================================================ */
.scalp-ticker-banner {
  border-color: rgba(250,204,21,0.18);
}
.scalp-ticker-label {
  color: var(--warning-soft, #facc15) !important;
  border-right-color: rgba(250,204,21,0.25) !important;
}

/* Individual scalp card in the ticker */
.scalp-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(250,204,21,0.12);
  background: rgba(250,204,21,0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.scalp-card:hover {
  border-color: rgba(250,204,21,0.3);
  box-shadow: 0 0 12px rgba(250,204,21,0.1);
  transform: translateY(-1px);
}
.scalp-card:active {
  transform: scale(0.97);
}
.scalp-card.scalp-card-bull {
  border-color: rgba(34,197,94,0.2);
  background: rgba(34,197,94,0.04);
}
.scalp-card.scalp-card-bear {
  border-color: rgba(244,63,94,0.2);
  background: rgba(244,63,94,0.04);
}

.scalp-card-dir {
  font-weight: 800;
  font-size: var(--fs-sm);
}
.scalp-card-dir.bull { color: var(--success-soft); }
.scalp-card-dir.bear { color: var(--danger-soft); }

.scalp-card-symbol {
  color: var(--heading);
  font-weight: 700;
}
.scalp-card-price { color: var(--text-soft); }
.scalp-card-levels { color: var(--text-muted); font-size: 10px; }
.scalp-card-rr { color: var(--cyan, #22d3ee); }
.scalp-card-time { color: var(--text-muted); font-size: 10px; }

.scalp-card-conf {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(250,204,21,0.12);
  color: var(--warning-soft, #facc15);
  border: 1px solid rgba(250,204,21,0.25);
}
.scalp-card-reasons {
  color: var(--text-muted);
  font-size: 10px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* New scalp entrance animation */
.scalp-card-new {
  animation: scalpCardFlash 1.5s ease-out;
}
@keyframes scalpCardFlash {
  0%   { box-shadow: 0 0 16px rgba(250,204,21,0.5); }
  100% { box-shadow: none; }
}

.scalp-ticker-empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: italic;
  padding: 4px 0;
}

/* Scalp card result badge */
.scalp-card-result {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scalp-card-result.pending {
  background: rgba(245,158,11,0.15);
  color: var(--warning-soft);
  border: 1px solid rgba(245,158,11,0.3);
  animation: signalPendingPulse 2s ease-in-out infinite;
}
.scalp-card-result.win {
  background: rgba(16,185,129,0.15);
  color: var(--success-soft);
  border: 1px solid rgba(16,185,129,0.3);
}
.scalp-card-result.loss {
  background: rgba(244,63,94,0.15);
  color: var(--danger-soft);
  border: 1px solid rgba(244,63,94,0.3);
}

/* Scalp card border tint by result */
.scalp-card.scalp-card-win  { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.04); }
.scalp-card.scalp-card-loss { border-color: rgba(244,63,94,0.25);  background: rgba(244,63,94,0.04); }

/* ================================================================
   LIVE STRATEGIES TICKER BANNER
   ================================================================ */
.strategy-ticker-banner {
  border-color: rgba(99,102,241,0.18);
}
.strategy-ticker-label {
  color: var(--cyan, #22d3ee) !important;
  border-right-color: rgba(99,102,241,0.25) !important;
}

/* Individual strategy card in the ticker */
.strategy-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(99,102,241,0.12);
  background: rgba(99,102,241,0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.strategy-card:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 0 12px rgba(99,102,241,0.1);
  transform: translateY(-1px);
}
.strategy-card:active {
  transform: scale(0.97);
}
.strategy-card.strategy-card-bull {
  border-color: rgba(34,197,94,0.2);
  background: rgba(34,197,94,0.04);
}
.strategy-card.strategy-card-bear {
  border-color: rgba(244,63,94,0.2);
  background: rgba(244,63,94,0.04);
}

.strategy-card-dir {
  font-weight: 800;
  font-size: var(--fs-sm);
}
.strategy-card-dir.bull { color: var(--success-soft); }
.strategy-card-dir.bear { color: var(--danger-soft); }

.strategy-card-symbol {
  color: var(--heading);
  font-weight: 700;
}
.strategy-card-price { color: var(--text-soft); }
.strategy-card-levels { color: var(--text-muted); font-size: 10px; }
.strategy-card-sep { color: var(--text-muted); font-size: 10px; opacity: 0.5; }
.strategy-card-rr { color: var(--cyan, #22d3ee); }
.strategy-card-confluence { color: #60a5fa; font-size: 10px; font-weight: 600; }
.strategy-card-time { color: var(--text-muted); font-size: 10px; }

.strategy-card-type {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(99,102,241,0.12);
  color: var(--primary-soft, #818cf8);
  border: 1px solid rgba(99,102,241,0.25);
}

/* Strategy card result badge */
.strategy-card-result {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.strategy-card-result.pending {
  background: rgba(245,158,11,0.15);
  color: var(--warning-soft);
  border: 1px solid rgba(245,158,11,0.3);
  animation: signalPendingPulse 2s ease-in-out infinite;
}
.strategy-card-result.win {
  background: rgba(16,185,129,0.15);
  color: var(--success-soft);
  border: 1px solid rgba(16,185,129,0.3);
}
.strategy-card-result.loss {
  background: rgba(244,63,94,0.15);
  color: var(--danger-soft);
  border: 1px solid rgba(244,63,94,0.3);
}

/* Strategy card border tint by result */
.strategy-card.strategy-card-win  { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.04); }
.strategy-card.strategy-card-loss { border-color: rgba(244,63,94,0.25);  background: rgba(244,63,94,0.04); }
.strategy-card.strategy-card-expired { border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.04); }

/* New strategy entrance animation */
.strategy-card-new {
  animation: strategyCardFlash 1.5s ease-out;
}
@keyframes strategyCardFlash {
  0%   { box-shadow: 0 0 16px rgba(99,102,241,0.5); }
  100% { box-shadow: none; }
}

.strategy-ticker-empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: italic;
  padding: 4px 0;
}

/* ===== Toast Notification System ===== */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
.toast {
  pointer-events: auto;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  backdrop-filter: blur(16px);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toast-in 0.35s ease-out;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.toast.toast-out {
  animation: toast-out 0.3s ease-in forwards;
}
.toast-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.toast-body {
  flex: 1;
}
.toast-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.toast-msg {
  opacity: 0.85;
  font-size: 12.5px;
}
.toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
.toast.toast-info    { border-left: 4px solid #3b82f6; }
.toast.toast-success { border-left: 4px solid #10b981; }
.toast.toast-warning { border-left: 4px solid #f59e0b; }
.toast.toast-trade   { border-left: 4px solid #a855f7; }
.light-theme .toast {
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(40px) scale(0.9); }
}

/* ---- Auto-Trade Balance Section ---- */
.auto-trade-balance-section {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.auto-trade-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.auto-trade-balance-row + .auto-trade-balance-row {
  border-top: 1px solid var(--glass-border);
}
.auto-trade-balance-label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-weight: 500;
}
.auto-trade-balance-value {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--heading);
}

/* ---- Opposite Mode Sub-Toggle ---- */
.toggle-row-sub {
  margin-left: 24px;
  font-size: var(--fs-sm);
  opacity: 0.85;
  background: var(--bg-base);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--glass-border);
}

/* ---- Auto-Trade History ---- */
.auto-trade-history-section {
  max-height: 220px;
  overflow-y: auto;
  margin-top: var(--space-xs);
}
.auto-trade-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.auto-trade-history-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--glass-border);
  gap: 6px;
}
.auto-trade-history-list li:last-child { border-bottom: none; }
.auto-trade-history-list .at-source { color: var(--text-soft); flex-shrink: 0; }
.auto-trade-history-list .at-type { font-weight: 600; flex-shrink: 0; }
.auto-trade-history-list .at-type.bull { color: var(--success); }
.auto-trade-history-list .at-type.bear { color: var(--danger); }
.auto-trade-history-list .at-profit { font-weight: 700; flex-shrink: 0; }
.auto-trade-history-list .at-profit.win { color: var(--success); }
.auto-trade-history-list .at-profit.loss { color: var(--danger); }
.auto-trade-history-list .at-profit.pending { color: var(--warning); }
.auto-trade-history-list .at-profit.error { color: var(--danger); opacity: 0.7; }
.auto-trade-history-list .at-profit.cancelled { color: var(--text-muted); }
.auto-trade-history-list .at-time { color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; }
.auto-trade-history-list .at-opposite { color: var(--warning); font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* Opposite Mode Effectiveness Summary */
.opposite-summary {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-alt, rgba(255,255,255,0.03));
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.opposite-summary-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: 0.35rem;
  color: var(--text);
}
.opposite-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-xs);
  padding: 0.15rem 0;
}
.opposite-row .opp-label { color: var(--text-soft); font-weight: 600; min-width: 6em; }
.opposite-row .opp-wr { font-weight: 700; color: var(--accent, #4fc3f7); }
.opposite-row .opp-profit { color: var(--success); font-weight: 600; }
.opposite-row .opp-loss { color: var(--danger); font-weight: 600; }

/* ---- Stream Mode ---- */
#streamModeBtn.stream-active {
  background: var(--warning);
  color: #000;
  border-color: var(--warning-soft);
}

body.stream-mode #appIdInput,
body.stream-mode #derivTokenInput,
body.stream-mode #telegramChatId,
body.stream-mode #telegramBotToken {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

body.stream-mode #autoTradeBalanceValue,
body.stream-mode #autoTradePLValue {
  filter: blur(6px);
  user-select: none;
}

/* ---- Strategy Enable/Disable Grid ---- */
.strat-enable-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.strat-enable-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.strat-enable-row:hover {
  border-color: rgba(99, 102, 241, 0.22);
  background: var(--bg-card-hover);
}
.strat-enable-row:has(input:checked) {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.04);
}
.strat-enable-row:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.strat-enable-row input[type="checkbox"] {
  order: 10;
  margin-left: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  background: rgba(92, 100, 132, 0.3);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}
.strat-enable-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.strat-enable-row input[type="checkbox"]:checked {
  background: var(--success);
}
.strat-enable-row input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}
.strat-enable-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.strat-enable-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.strat-enable-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strat-enable-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.strat-enable-badge.on {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success-soft);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.strat-enable-badge.off {
  background: rgba(92, 100, 132, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(92, 100, 132, 0.2);
}
.strat-enable-badge.locked {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.strat-enable-badge.mode-safe {
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
  border: 1px solid rgba(14, 165, 233, 0.3);
}
.strat-enable-badge.mode-strict {
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Light theme overrides */
body.light-theme .strat-enable-row {
  background: #f5f7fa;
  border-color: rgba(99, 102, 241, 0.1);
}
body.light-theme .strat-enable-row:hover {
  background: #eef0f8;
}
body.light-theme .strat-enable-row:has(input:checked) {
  background: rgba(16, 185, 129, 0.06);
}
body.light-theme .strat-enable-name {
  color: #1e2340;
}
body.light-theme .strat-enable-row input[type="checkbox"] {
  background: rgba(99, 102, 241, 0.18);
}
body.light-theme .strat-enable-row input[type="checkbox"]:checked {
  background: var(--success);
}

/* ──────────────────────────────────────────────────────────
   Telegram Group Section
   ────────────────────────────────────────────────────────── */
.tg-section {
  max-width: 780px;
  margin: 24px auto 40px;
  padding: 0 20px;
}

.tg-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(34, 158, 217, 0.08);
  border: 1px solid rgba(34, 158, 217, 0.25);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: 0 4px 24px rgba(34, 158, 217, 0.08);
}

.tg-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
}

.tg-body {
  flex: 1;
}

.tg-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 6px;
}

.tg-subtitle {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0 0 16px;
}

.tg-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.tg-link-steps {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(34, 158, 217, 0.08);
  border-left: 3px solid #229ED9;
  border-radius: 4px;
  line-height: 1.8;
}

.tg-linked-msg {
  font-size: 14px;
  color: var(--success-soft);
  margin: 0 0 8px;
  font-weight: 600;
}

.tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #229ED9, #1a7fb5);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.tg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34, 158, 217, 0.4);
}

.tg-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.tg-btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid rgba(34, 158, 217, 0.3);
}

.tg-btn-ghost:hover {
  background: rgba(34, 158, 217, 0.08);
  box-shadow: none;
}

.tg-error {
  color: var(--danger-soft);
  font-size: 12.5px;
  margin-top: 8px;
  min-height: 16px;
}

.tg-btn-invite {
  background: rgba(34, 158, 217, 0.15);
  color: var(--primary);
  border: 1px solid rgba(34, 158, 217, 0.4);
  margin-bottom: 8px;
}
.tg-btn-invite:hover {
  background: rgba(34, 158, 217, 0.25);
  box-shadow: none;
}

.tg-invite-msg {
  font-size: 12.5px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.tg-invite-msg-ok  { color: var(--success-soft, #4caf8a); }
.tg-invite-msg-err { color: var(--danger-soft); }

@media (max-width: 600px) {
  .tg-card { flex-direction: column; gap: 12px; padding: 20px 18px; }
}

/* ──────────────────────────────────────────────────────────
   Subscription Pricing Section
   ────────────────────────────────────────────────────────── */
.pricing-section {
  max-width: 900px;
  margin: 0 auto 64px;
  padding: 0 20px;
  text-align: center;
}

.pricing-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 8px;
}

.pricing-subtitle {
  color: var(--text-soft);
  font-size: 15px;
  margin-bottom: 36px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--glass-border);
}

.pricing-card-featured {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 4px 32px rgba(99, 102, 241, 0.18), 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(100, 116, 139, 0.2);
  color: var(--text-soft);
  border: 1px solid rgba(100, 116, 139, 0.2);
  width: fit-content;
  margin: 0 auto;
}

.pricing-badge-featured {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-soft);
  border-color: rgba(99, 102, 241, 0.35);
}

.pricing-plan-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  margin: 0;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.pricing-amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--heading);
  font-family: var(--font-mono);
}

.pricing-period {
  font-size: 14px;
  color: var(--text-soft);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.pricing-features li {
  font-size: 13.5px;
  color: var(--text);
}

.pricing-btn {
  display: block;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary-soft);
  border: 1px solid rgba(99, 102, 241, 0.3);
  transition: background 0.15s ease, color 0.15s ease;
}

.pricing-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #fff;
}

.pricing-btn-featured {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-strong);
}

.pricing-btn-featured:hover {
  background: var(--primary-strong);
}

.pricing-note {
  font-size: 13px;
  color: var(--text-muted);
}

.pricing-note a {
  color: var(--primary-soft);
  text-decoration: none;
}

.pricing-note a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .pricing-amount { font-size: 32px; }
  .pricing-card { padding: 24px 20px; }
}

/* ============================================================
   NEW FEATURE STYLES (Features 1–17)
   ============================================================ */

/* Feature 3: Equity Curve canvas */
.equity-curve-canvas {
  width: 100%;
  height: 100px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--bg-base);
  display: block;
}

/* Feature 4: Named Settings Profiles */
.profile-save-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.profile-name-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.8rem;
  min-width: 0;
}
.profiles-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
}
.profile-name {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}
.profile-btn:hover { opacity: 0.8; }
.profile-btn-load {
  background: var(--primary);
  color: #fff;
}
.profile-btn-del {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.profile-row-assigned {
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.06);
}
.profile-badge-admin {
  font-size: 0.75rem;
  margin-left: 4px;
  cursor: default;
}

/* Feature 1: Backtest controls */
.backtest-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.backtest-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}
.backtest-progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  margin-top: 8px;
  accent-color: var(--primary);
}
.backtest-progress-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

/* Feature 12: Signal notes */
.signal-note-row {
  width: 100%;
  margin-top: 4px;
}
.signal-note-input {
  width: 100%;
  padding: 3px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-style: italic;
  box-sizing: border-box;
}
.signal-note-input::placeholder {
  color: var(--text-muted);
}
.signal-note-input:focus {
  outline: none;
  border-color: var(--primary-soft);
  background: rgba(99,102,241,0.08);
}

/* Feature 13: Adaptive confluence weight table */
.conf-weight-table {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}
.conf-weight-row {
  display: grid;
  grid-template-columns: 1fr auto 80px;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
}
.conf-weight-name {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conf-weight-wr {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.conf-weight-bar-bg {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.conf-weight-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.4s ease;
}

/* Feature 16: P&L breakdown */
.pl-breakdown-container {
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.78rem;
}
.pl-breakdown-group {
  margin-bottom: 8px;
}
.pl-breakdown-heading {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
}
.pl-breakdown-header,
.pl-breakdown-row {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.pl-breakdown-header {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pl-breakdown-row {
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.pl-breakdown-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Feature 8: Scanner grid */
.scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.scanner-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
}
.scanner-symbol {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.scanner-phase {
  font-size: 0.7rem;
}

/* Ensure backtest buttons stay contained */
#backtestStartBtn:disabled,
#backtestStopBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========== Grid Scalper V2 Analysis ========== */

/* Analysis button */
.analysis-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06));
  color: var(--primary-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.analysis-btn:hover {
  border-color: var(--primary-soft);
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(59,130,246,0.12));
  box-shadow: 0 0 15px rgba(129,140,248,0.3);
}

.analysis-btn:active {
  transform: scale(0.98);
}

/* Modal overlay */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal content */
.modal-content {
  background: var(--bg-base);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 60px rgba(99,102,241,0.15);
  max-height: 90vh;
  overflow-y: auto;
  max-width: 900px;
  width: 95%;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(99,102,241,0.1), transparent);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
}

/* Analysis container */
.analysis-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.analysis-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Individual analysis step */
.analysis-step {
  padding: 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  transition: all 0.3s ease;
}

.analysis-step:hover {
  border-color: var(--primary-soft);
  background: var(--bg-card-hover);
  box-shadow: 0 0 20px rgba(99,102,241,0.1);
}

.analysis-step h3 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.analysis-step h3 .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  font-size: 11px;
  font-weight: 700;
}

.analysis-step-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: var(--fs-sm);
}

.analysis-step-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
}

.analysis-step-label {
  color: var(--text-soft);
  font-weight: 600;
}

.analysis-step-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
}

.step-final {
  grid-column: 1 / -1;
  border: 2px solid var(--success);
  background: rgba(16, 185, 129, 0.08);
}

.step-final h3 {
  color: var(--success-soft);
}

.signal-result {
  font-size: 16px;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  text-align: center;
}

.signal-result.fire {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-soft);
  border: 1px solid var(--success);
}

.signal-result.blocked {
  background: rgba(244, 63, 94, 0.15);
  color: var(--danger-soft);
  border: 1px solid var(--danger);
}

/* Blocking reasons list */
.blocking-reasons {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--danger);
}

.blocking-reasons h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--danger-soft);
  font-weight: 700;
}

.blocking-reasons ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.blocking-reasons li {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 4px;
}

/* Responsive modal */
@media (max-width: 768px) {
  .modal-content {
    max-width: 100%;
    border-radius: var(--radius-md);
  }
  
  .analysis-step-content {
    grid-template-columns: 1fr;
  }
}

/* ---- Grid Scalper MA: TP Probability Bars ---- */
.gs-prob-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.gs-prob-bar-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gs-prob-label {
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 0.78em;
  opacity: 0.9;
  flex-shrink: 0;
}
.gs-prob-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.gs-prob-fill-orig {
  height: 100%;
  border-radius: 3px;
  background: #22c55e;
  transition: width 0.35s ease;
}
.gs-prob-fill-opp {
  height: 100%;
  border-radius: 3px;
  background: #ef4444;
  transition: width 0.35s ease;
}
.gs-prob-pct {
  min-width: 30px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.78em;
  opacity: 0.9;
  flex-shrink: 0;
}
.gs-prob-recommend {
  font-size: 0.75em;
  margin-top: 1px;
}
.gs-prob-insufficient {
  font-size: 0.72em;
  opacity: 0.5;
  font-style: italic;
  margin-top: 3px;
}