/* ═══════════════════════════════════════════════
   Tornado Trade — Dark Terminal Theme
   ═══════════════════════════════════════════════ */

:root {
  --bg:         #0d1117;
  --bg1:        #0d1117;
  --bg2:        #161b22;
  --bg3:        #21262d;
  --bg4:        #2d333b;
  --border:     #30363d;
  --text:       #e6edf3;
  --muted:      #8b949e;
  --text-muted: #8b949e;
  --green:      #3fb950;
  --red:        #f85149;
  --orange:     #d29922;
  --blue:       #58a6ff;
  --purple:     #bc8cff;
  --radius:     6px;
  --gap:        12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── TICKER BAR ────────────────────────────── */
#ticker-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: nowrap;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--blue);
  white-space: nowrap;
}
.brand-icon { font-size: 18px; }
.brand-logo { height: 28px; width: auto; display: block; }

#tickers {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}

.ticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  min-width: 80px;
  background: var(--bg3);
  border: 1px solid transparent;
}
.ticker:hover { border-color: var(--blue); }
.ticker.active { border-color: var(--blue); background: rgba(88,166,255,.1); }

.tick-sym  { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.05em; }
.tick-price { font-size: 13px; font-weight: 600; }
.tick-chg  { font-size: 10px; }

#header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Badges ────────────────────────────────── */
.badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge-on  { background: rgba(63,185,80,.2); color: var(--green); }
.badge-off { background: rgba(248,81,73,.2); color: var(--red); }

/* ── MAIN LAYOUT ───────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  grid-template-rows: 1fr;
  gap: var(--gap);
  padding: var(--gap);
  height: calc(100vh - 48px - 200px);
  min-height: 520px;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow-y: auto;
  min-width: 0;
}

/* ── Cards ─────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Portfolio ─────────────────────────────── */
.wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg3);
}
.wallet-row:last-child { border-bottom: none; }
.wallet-sym  { font-weight: 700; color: var(--blue); width: 45px; }
.wallet-bal  { flex: 1; text-align: right; }
.wallet-usd  { color: var(--muted); font-size: 11px; width: 60px; text-align: right; }
.wallet-note { margin-top: 10px; color: var(--muted); font-size: 11px; }

/* ── Signals ───────────────────────────────── */
.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg3);
}
.signal-row:last-child { border-bottom: none; }
.sig-badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.sig-BUY  { background: rgba(63,185,80,.2); color: var(--green); }
.sig-SELL { background: rgba(248,81,73,.2); color: var(--red); }
.sig-HOLD { background: rgba(139,148,158,.15); color: var(--muted); }

/* ── Stats grid ────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stats-grid > div {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-grid small { color: var(--muted); font-size: 10px; }
.stats-grid strong { font-size: 16px; }

/* ── Open Positions ────────────────────────── */
.pos-empty { color: var(--muted); font-size: 12px; padding: 6px 0; }
.pos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-left: 3px solid var(--border);
}
.pos-asset { min-width: 60px; }
.pos-asset strong { font-size: 13px; }
.pos-asset small  { color: var(--muted); font-size: 10px; }
.pos-prices { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.pos-entry  { color: var(--muted); }
.pos-current { color: var(--text); font-weight: 600; }
.badge-tp {
  background: rgba(63,185,80,.15);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
}
.badge-sl {
  background: rgba(248,81,73,.15);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
}
.pos-pnl { text-align: right; font-weight: 700; font-size: 13px; min-width: 70px; }
.pos-pnl small { font-size: 10px; font-weight: 400; }

/* ── TP/SL form grid ───────────────────────── */
.tp-sl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Chart ─────────────────────────────────── */
.chart-card { flex: 1; display: flex; flex-direction: column; }

.chart-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Row 1: asset tabs + chart type toggle */
.chart-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chart type toggle */
.chart-type-btns { display: flex; gap: 4px; }
.ct-btn {
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.ct-btn:hover  { color: var(--text); border-color: var(--orange); }
.ct-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Row 2: timeframe buttons */
.tf-bar { display: flex; gap: 3px; flex-wrap: wrap; }
.tf-btn {
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s;
}
.tf-btn:hover  { color: var(--text); border-color: var(--blue); }
.tf-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.asset-tabs { display: flex; gap: 4px; }
.tab {
  padding: 4px 12px;
  border-radius: var(--radius);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.tab:hover  { color: var(--text); border-color: var(--blue); }
.tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

#current-price-display { display: flex; align-items: baseline; gap: 10px; }
#chart-asset-name { color: var(--muted); font-size: 12px; }
.big-price { font-size: 22px; font-weight: 700; }
.price-chg { font-size: 13px; }

.chart-wrap { flex: 1; min-height: 340px; position: relative; }
#price-chart { width: 100%; height: 340px; }

/* Loading shimmer on chart area */
#price-chart.chart-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1s infinite;
  pointer-events: none;
  border-radius: 4px;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Indicators ────────────────────────────── */
.indicators-card {}
.indicators-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.indicator {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.indicator label { font-size: 11px; font-weight: 700; color: var(--muted); }

/* RSI gauge */
.gauge-wrap { display: flex; align-items: center; gap: 8px; }
.gauge-bar {
  flex: 1;
  height: 8px;
  background: var(--bg2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s, background 0.5s;
}
.gauge-val { font-weight: 700; font-size: 14px; min-width: 35px; text-align: right; }

.ind-values { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.ind-values b { color: var(--text); }

.ind-signal {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  background: rgba(139,148,158,.1);
  color: var(--muted);
}

.overall-box {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  padding: 6px;
  border-radius: var(--radius);
  letter-spacing: 0.05em;
}

/* ── Trade form ────────────────────────────── */
.form-group { margin-bottom: 10px; }
.form-group label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--blue); }

.btn-group { display: flex; gap: 6px; }

/* ── Buttons ───────────────────────────────── */
.btn {
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--blue); color: var(--blue); }

.btn-primary {
  width: 100%;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  padding: 9px;
  font-size: 13px;
  margin-top: 4px;
}
.btn-primary:hover { background: #4d94e6; border-color: #4d94e6; color: #fff; }

.btn-buy         { flex: 1; background: rgba(63,185,80,.15); color: var(--green); border-color: var(--green); }
.btn-buy.active  { background: var(--green); color: #fff; }
.btn-sell        { flex: 1; background: rgba(248,81,73,.15); color: var(--red); border-color: var(--red); }
.btn-sell.active { background: var(--red); color: #fff; }
.btn-sm          { padding: 4px 10px; font-size: 11px; }

.quick-amounts { display: flex; gap: 4px; margin-bottom: 8px; }
.quick-amounts .btn-sm { flex: 1; text-align: center; }

.trade-result {
  margin-top: 10px;
  padding: 8px;
  border-radius: var(--radius);
  font-size: 12px;
}
.trade-result.success { background: rgba(63,185,80,.1); color: var(--green); border: 1px solid var(--green); }
.trade-result.error   { background: rgba(248,81,73,.1);  color: var(--red);   border: 1px solid var(--red); }
.hidden { display: none; }

/* ── Bot toggle switch ─────────────────────── */
.bot-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: 0.3s;
  cursor: pointer;
}
.slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: var(--muted);
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .slider { background: rgba(63,185,80,.2); border-color: var(--green); }
input:checked + .slider::before { background: var(--green); transform: translateX(18px); }

.bot-info {
  margin-top: 10px;
  padding: 8px;
  background: rgba(210,153,34,.1);
  border: 1px solid rgba(210,153,34,.3);
  border-radius: var(--radius);
  color: var(--orange);
}

.info-text { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ── TRADE HISTORY ─────────────────────────── */
.trade-history {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: var(--gap);
  height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-header h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
thead th {
  padding: 4px 8px;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--bg2);
}
tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(48,54,61,.5);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--bg3); }

.type-BUY  { color: var(--green); font-weight: 700; }
.type-SELL { color: var(--red); font-weight: 700; }
.status-executed  { color: var(--green); }
.status-simulated { color: var(--orange); }
.status-failed    { color: var(--red); }

/* ── Color helpers ─────────────────────────── */
.green  { color: var(--green) !important; }
.red    { color: var(--red) !important; }
.orange { color: var(--orange) !important; }
.blue   { color: var(--blue) !important; }

/* ── Demo button ───────────────────────────── */
.btn-demo {
  background: rgba(188,140,255,.15);
  color: var(--purple);
  border-color: var(--purple);
}
.btn-demo:hover { background: rgba(188,140,255,.3); color: var(--purple); }

/* ── Modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 15px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--text); background: var(--bg3); }

.modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.modal-col { display: flex; flex-direction: column; }

@media (max-width: 620px) {
  .modal-cols { grid-template-columns: 1fr; }
}

/* ── Demo mode ─────────────────────────────── */
.demo-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.demo-portfolio {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}

.demo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(48,54,61,.5);
}
.demo-row:last-child { border-bottom: none; }
.demo-row span { color: var(--muted); }

#demo-positions { margin-top: 8px; }
.demo-position {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--blue);
  padding: 2px 0;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px 1fr; }
  #right-panel { display: none; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  #left-panel { display: none; }
  .config-page-layout { grid-template-columns: 1fr; padding: 8px; }
}

/* ── Mobile (≤ 640px) ───────────────────────── */
@media (max-width: 640px) {

  /* Ticker bar */
  #ticker-bar { gap: 8px; padding: 0 8px; }
  .brand span:not(.brand-icon) { display: none; }  /* cache le texte, garde l'icône */
  #tickers { gap: 2px; }
  .ticker { min-width: 58px; padding: 3px 5px; }
  .tick-price { font-size: 11px; }
  .tick-sym   { font-size: 9px; }
  .tick-chg   { font-size: 9px; }

  /* Page nav : scroll horizontal */
  .page-nav { overflow-x: auto; padding: 0 4px; gap: 0; }
  .page-nav::-webkit-scrollbar { display: none; }
  .page-tab { padding: 0 10px; font-size: 11px; height: 36px; white-space: nowrap; flex-shrink: 0; }

  /* Layout général */
  .layout { padding: 6px; gap: 6px; }
  .card   { padding: 10px; }

  /* Simulation */
  .sim-layout { padding: 8px; gap: 8px; }

  /* Config MEXC */
  .config-page-layout { grid-template-columns: 1fr; padding: 8px; gap: 8px; }

  /* Buttons : zone de touch plus grande */
  .btn    { padding: 9px 14px; }
  .btn-xs { padding: 5px 10px; font-size: 12px; }

  /* Inputs/selects : 16px pour éviter le zoom iOS */
  .form-group input,
  .form-group select,
  .analyse-filter-sel { font-size: 16px; }

  /* Charts analyse : moins hauts */
  .analyse-canvas { height: 170px !important; }
  .analyse-canvas-sm { width: 120px !important; height: 120px !important; }
  .analyse-kpis-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tableaux : forcer le scroll horizontal */
  .table-wrap { overflow-x: auto; }

  /* Modale : plein écran sur mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box { border-radius: 10px 10px 0 0; max-height: 92vh; }

  /* Btn-group : retour à la ligne */
  .btn-group { flex-wrap: wrap; }

  /* ── MEXC & Bot ── */

  /* Trade row : supprimer colonne heure, 3 colonnes restantes */
  .mexc-trade-row { grid-template-columns: 1fr 44px 64px; padding: 5px 8px; }
  .mexc-trade-time { display: none; }

  /* Webhook URL : passe en colonne au lieu d'une ligne */
  .mexc-setup-row { flex-wrap: wrap; gap: 4px; }
  .mexc-setup-label { flex: 0 0 100%; margin-bottom: 0; }
  .mexc-url { min-width: 0; flex: 1; }

  /* Balance row */
  .mexc-balance-row { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* Holdings : wrapping */
  .mexc-holdings { gap: 4px; }
  .mexc-holding  { font-size: 11px; padding: 3px 7px; }

  /* ── Simulation Bot ── */

  /* grille SL/TP : 1 colonne quand l'espace est vraiment serré (< 400px) */
  /* sur 400-640px on garde 2 colonnes pour la sim car c'est lisible */

  /* Status bar : retour à la ligne */
  .sim-status-bar { flex-wrap: wrap; gap: 4px; }
  .sim-status-bar small { margin-left: 0 !important; flex: 0 0 100%; }

  /* Boutons mode scalp/day : taille de texte réduite */
  #sim-mode-scalp, #sim-mode-day { font-size: .76rem !important; padding: 7px 4px; }

  /* Journal des décisions : moins de monospace */
  .sim-log { font-size: .78rem; }

  /* Positions ouvertes : badge overflow */
  .mexc-open-positions { gap: 4px; }
  .mexc-pos-tag { font-size: 11px; padding: 2px 6px; }

  /* ── Analyse Trades ── */

  /* Filtres du tableau : passe en colonne */
  #analyse-table-section > div:first-child { flex-direction: column; align-items: flex-start !important; }
  #analyse-table-section > div:first-child > div { flex-wrap: wrap; width: 100%; }
  .analyse-filter-sel { flex: 1; min-width: 120px; }

  /* Donut : passe en colonne */
  .analyse-donut-row { flex-direction: column; align-items: flex-start; }
  .analyse-canvas-sm { width: 100% !important; max-width: 200px !important; height: 140px !important; }

  /* Drop zone : compacter */
  .analyse-drop-zone { padding: 18px 12px; }
  .analyse-drop-icon { font-size: 1.5rem; }
}

/* ── Très petits écrans (≤ 400px) : iPhone SE etc. ──────────────────────── */
@media (max-width: 400px) {
  /* TP/SL grille : 1 colonne sur très petit écran */
  .tp-sl-grid { grid-template-columns: 1fr; }

  /* Page tabs encore plus compactes */
  .page-tab { padding: 0 7px; font-size: 10px; }

  /* Simulation : boutons lancer/arrêter en colonne */
  #sim-start-btn, #sim-stop-btn { flex: 0 0 100%; }

  /* KPIs analyse : 2 colonnes fixes */
  .analyse-kpis-grid { grid-template-columns: 1fr 1fr; }
}

/* ── MEXC × TradingView Card ──────────────────────────────────────────────── */
.mexc-card { display: flex; flex-direction: column; gap: 10px; }

.mexc-balance-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg3); border-radius: var(--radius); padding: 8px 12px;
}
.mexc-balance-label { font-size: 13px; color: var(--text-muted); }
.mexc-balance-val { font-size: 18px; font-weight: 700; color: #3fb950; }

.mexc-holdings { display: flex; flex-wrap: wrap; gap: 6px; }
.mexc-holding {
  background: var(--bg3); border-radius: 6px; padding: 4px 10px;
  font-size: 12px; display: flex; gap: 8px;
}
.mexc-holding span:first-child { color: var(--text-muted); }
.mexc-holding span:last-child  { font-weight: 600; }

.mexc-setup { display: flex; flex-direction: column; gap: 6px; }
.mexc-setup-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.mexc-setup-label { color: var(--text-muted); flex: 0 0 110px; }
.mexc-url {
  background: var(--bg3); border-radius: 4px; padding: 3px 7px;
  font-size: 11px; color: #58a6ff; cursor: pointer; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.mexc-url:hover { color: #79c0ff; }
.mexc-val  { font-weight: 600; }
.mexc-unit { color: var(--text-muted); font-size: 11px; }

.mexc-details { font-size: 12px; }
.mexc-details summary { cursor: pointer; color: var(--text-muted); padding: 4px 0; }
.mexc-code {
  background: var(--bg3); border-radius: 6px; padding: 10px 12px;
  font-size: 11px; line-height: 1.6; white-space: pre; overflow-x: auto;
  color: #e6edf3; margin: 6px 0;
}

.mexc-trades-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
}
.mexc-trades-list { display: flex; flex-direction: column; gap: 4px; }
.mexc-trade-empty { font-size: 12px; color: var(--text-muted); padding: 6px 0; }
.mexc-trade-row {
  display: grid; grid-template-columns: 80px 1fr 50px 70px;
  align-items: center; gap: 6px;
  background: var(--bg3); border-radius: 6px; padding: 5px 10px;
  font-size: 12px; border-left: 3px solid transparent;
}
.mexc-trade-buy  { border-left-color: #3fb950; }
.mexc-trade-sell { border-left-color: #f85149; }
.mexc-trade-time { color: var(--text-muted); }
.mexc-trade-sym  { font-weight: 600; }
.mexc-trade-action { font-size: 11px; font-weight: 700; }
.mexc-trade-buy  .mexc-trade-action { color: #3fb950; }
.mexc-trade-sell .mexc-trade-action { color: #f85149; }
.mexc-trade-amt  { text-align: right; }
.badge-err { background: #f85149; color: #fff; border-radius: 3px; padding: 1px 4px; font-size: 10px; }

.btn-xs {
  padding: 2px 8px; font-size: 11px; border-radius: 4px;
  background: var(--bg3); color: var(--text-muted);
  border: 1px solid var(--border); cursor: pointer;
}
.btn-xs:hover { background: var(--bg4); color: var(--text); }

/* ── Page navigation ─────────────────────────────────────────────────────────── */
.page-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  position: sticky;
  top: 48px;     /* below ticker bar */
  z-index: 90;
}
.page-tab {
  padding: 0 20px;
  height: 40px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.page-tab:hover  { color: var(--text); }
.page-tab.active { color: var(--text); border-bottom-color: var(--blue); }

.page        { display: block; }
.page.hidden { display: none !important; }

/* ── Config page (MEXC & Bot) ─────────────────────────────────────────────────── */
.config-page-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
  max-width: 1400px;
}
.config-page-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.config-page-col--wide { min-width: 0; }

.mexc-full-log-link { margin-top: 8px; }

/* ── Collapsible cards ──────────────────────────────────────────────────────────── */
.card-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-title .collapse-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.card-title .collapse-btn:hover {
  background: var(--bg4);
  color: var(--text);
}
.card.collapsed > .card-body { display: none; }
.card.collapsed { padding-bottom: var(--gap); }

/* ── MEXC additions ───────────────────────────────────────────────────────────── */
.mexc-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 10px 0 5px;
}
.mexc-open-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  min-height: 24px;
}
.mexc-pos-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
.mexc-pos-tag.mexc-pos-buy  { border-color: var(--green); color: var(--green); }
.mexc-pos-tag.mexc-pos-sell { border-color: var(--red);   color: var(--red); }
.mexc-pos-empty { font-size: 12px; color: var(--text-muted); }

/* Trade rows: main line + meta sub-line */
.mexc-trade-main {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mexc-trade-meta {
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 4px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mexc-trade-refused {
  opacity: .6;
  background: color-mix(in srgb, var(--bg3) 80%, transparent) !important;
}

/* Badges */
.badge-paper {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: #856404;
  color: #ffe08a;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
}
.badge-warn {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: #5c4a00;
  color: #ffc107;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* Alert template note */
.mexc-tpl-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.mexc-tpl-note code {
  background: var(--bg3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════
   SIMULATION PAGE
   ══════════════════════════════════════════════ */

.sim-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr; }
}

.sim-col { display: flex; flex-direction: column; gap: 0; }

/* Indicator settings collapsible */
.ind-settings {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.ind-settings summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg2);
  user-select: none;
  list-style: none;
}
.ind-settings summary::-webkit-details-marker { display: none; }
.ind-settings[open] summary { color: var(--text); border-bottom: 1px solid var(--border); }

.ind-settings-body {
  padding: 10px 12px 4px;
  background: var(--bg);
}

.ind-settings-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 8px 0 4px;
}
.ind-settings-label:first-child { margin-top: 0; }

/* Status bar */
.sim-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border-radius: 6px;
  font-size: .85rem;
}

.sim-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.sim-dot-running {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* Signals grid */
.sim-signals-grid { display: flex; flex-direction: column; gap: 6px; }

.sim-sig-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg2);
  border-radius: 6px;
  font-size: .88rem;
}

.sim-sig-name  { font-weight: 600; width: 38px; }
.sim-sig-badge { font-weight: 700; min-width: 44px; }
.sim-sig-conf  { color: var(--text-muted); font-size: .8rem; }
.sim-sig-trend { margin-left: auto; font-size: 1rem; }

/* Decision log */
.sim-log {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: .82rem;
  font-family: monospace;
}

.sim-log-line {
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--bg2);
  line-height: 1.4;
  word-break: break-word;
}

.sim-log-signal {
  padding: 5px 8px;
}

.sim-log-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  padding-left: 4px;
  border-left: 2px solid var(--border);
}

.sim-ind {
  font-size: .76rem;
  white-space: nowrap;
}

.sim-log-ts {
  color: var(--text-muted);
  margin-right: 8px;
  font-size: .78rem;
}

.sim-log-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Analyse Trades
   ══════════════════════════════════════════════════════════════════════════════ */

/* Layout grid */
.analyse-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding-bottom: 24px;
}

/* Import card */
.analyse-import-card {}

.analyse-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  transition: border-color .2s, background .2s;
  background: var(--bg2);
}
.analyse-drop-zone:hover,
.analyse-drop-zone.drag-over {
  border-color: var(--blue);
  background: rgba(88,166,255,.05);
  color: var(--text);
}
.analyse-drop-icon { font-size: 2rem; }

/* KPIs grid */
.analyse-kpis-card {}
.analyse-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.analyse-kpi {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analyse-kpi-label {
  font-size: .78rem;
  color: var(--text-muted);
}
.analyse-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
}
.analyse-kpi-val.green { color: var(--green); }
.analyse-kpi-val.red   { color: var(--red); }

/* Chart cards */
.analyse-chart-card {}
.analyse-canvas {
  width: 100% !important;
  height: 220px !important;
  display: block;
  margin-top: 10px;
}
.analyse-canvas-sm {
  width: 160px !important;
  height: 160px !important;
  flex-shrink: 0;
}
.analyse-donut-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Assets legend */
.analyse-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.analyse-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}
.analyse-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Filters */
.analyse-filter-sel {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
}
.analyse-filter-sel:focus { outline: none; border-color: var(--blue); }

/* Table card */
.analyse-table-card {}

/* Explanation */
.analyse-explain-card {}
.analyse-explain-body { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.explain-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.explain-block h4 { font-size: .92rem; margin-bottom: 4px; color: var(--text); }
.explain-block p  { font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.explain-block .green { color: var(--green); }
.explain-block .red   { color: var(--red); }

/* Coloured text helpers (for tables) */
td.green, th.green { color: var(--green); }
td.red,   th.red   { color: var(--red); }
span.green { color: var(--green); }
span.red   { color: var(--red); }