/* ── Demo banner ──────────────────────────────────────── */
/* Sits above the entire dashboard when DEMO_MODE=true. Hidden by default
   (style="display:none" on the element) — demoGate.js flips to flex on load
   only if /api/plan returns demo:true. */
#demo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99997;
  background: linear-gradient(90deg, #1d3a52 0%, #244563 100%);
  color: #eaecef;
  text-align: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #3a6da0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#demo-banner .demo-banner-emoji { font-size: 16px; }
#demo-banner .demo-banner-text { color: #eaecef; }
#demo-banner a {
  color: #7fc0ff;
  text-decoration: none;
  font-weight: 700;
  margin-left: 4px;
}
#demo-banner a:hover { text-decoration: underline; }
/* Push the rest of the page down when the banner is showing so it doesn't
   overlap the header. The banner is ~36px tall; we target the body via a
   class set in JS only when demo mode is active to avoid affecting normal users. */
body.demo-banner-shown { padding-top: 36px; }

/* ── Live cycle block modal ──────────────────────────── */
#live-block-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#live-block-modal-box {
  background: #1e2026;
  border: 2px solid #f5465c;
  border-radius: 14px;
  width: 460px;
  max-width: 94vw;
  box-shadow: 0 0 60px rgba(245,70,92,0.4), 0 8px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  animation: blockPulse 0.4s ease-out;
}
@keyframes blockPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
#live-block-modal-header {
  background: #3a0a0f;
  border-bottom: 1px solid #f5465c88;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #f5465c;
  letter-spacing: 0.5px;
}
#live-block-modal-body {
  padding: 22px 22px 16px;
  color: #eaecef;
  font-size: 14px;
  line-height: 1.6;
}
#live-block-modal-body p { margin: 0 0 10px; }
#live-block-modal-actions {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: center;
}
.live-block-btn {
  background: #f5465c;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 48px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.live-block-btn:hover { background: #d63850; }

/* ── Live mode switch confirmation modal ───────────────── */
/* Mirrors live-block-modal style so users see a consistent
   warning treatment whenever they're about to touch LIVE. */
#live-switch-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#live-switch-modal-box {
  background: #1e2026;
  border: 2px solid #f5465c;
  border-radius: 14px;
  width: 460px;
  max-width: 94vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
  overflow: hidden;
}
#live-switch-modal-header {
  background: #3a0a0f;
  border-bottom: 1px solid #f5465c88;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f5465c;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}
#live-switch-modal-body {
  padding: 22px 22px 16px;
  color: #eaecef;
  font-size: 14px;
  line-height: 1.6;
}
#live-switch-modal-body p { margin: 0 0 10px; }
#live-switch-modal-actions {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.live-switch-btn-cancel {
  background: #2b2f3a;
  color: #eaecef;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.live-switch-btn-cancel:hover { background: #353a47; }
.live-switch-btn-confirm {
  background: #f5465c;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.live-switch-btn-confirm:hover { background: #d63850; }

/* ── Action confirm modal (cycle start / stop / force) ───── */
#action-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#action-confirm-box {
  background: #1e2026;
  border: 2px solid #2b2f3a;
  border-radius: 14px;
  width: 460px;
  max-width: 94vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
  overflow: hidden;
  animation: blockPulse 0.28s ease-out;
}
#action-confirm-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.4px;
  border-bottom: 1px solid #2b2f3a;
}
#action-confirm-icon { font-size: 22px; line-height: 1; }
#action-confirm-body {
  padding: 20px 22px 16px;
  color: #eaecef;
  font-size: 13.5px;
  line-height: 1.6;
}
#action-confirm-body p { margin: 0 0 10px; }
#action-confirm-body p:last-child { margin-bottom: 0; }
#action-confirm-body .action-confirm-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}
#action-confirm-note-wrap {
  padding: 0 22px 4px;
}
#action-confirm-note-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #848e9c;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#action-confirm-note {
  width: 100%;
  box-sizing: border-box;
  background: #0f1117;
  border: 1px solid #2b2f3a;
  border-radius: 6px;
  color: #eaecef;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  padding: 8px 10px;
  resize: vertical;
  min-height: 44px;
  outline: none;
}
#action-confirm-note:focus { border-color: #848e9c; }
#action-confirm-note-count {
  font-size: 11px;
  color: #4a5060;
  text-align: right;
  margin-top: 3px;
}
#action-confirm-actions {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.action-confirm-btn-cancel {
  background: #2b2f3a;
  color: #eaecef;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.action-confirm-btn-cancel:hover { background: #353a47; }
.action-confirm-btn-ok {
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}

/* Theme: buy (green) */
#action-confirm-modal.theme-buy #action-confirm-box    { border-color: #0ecb81; box-shadow: 0 0 40px rgba(14,203,129,0.25), 0 8px 40px rgba(0,0,0,0.8); }
#action-confirm-modal.theme-buy #action-confirm-header { background: #0a2b1c; color: #0ecb81; border-bottom-color: #0ecb8166; }
#action-confirm-modal.theme-buy .action-confirm-btn-ok { background: #0ecb81; color: #0a1a12; }
#action-confirm-modal.theme-buy .action-confirm-btn-ok:hover { background: #0bb673; }
#action-confirm-modal.theme-buy .action-confirm-chip   { background: #0a2b1c; color: #0ecb81; border: 1px solid #0ecb8144; }

/* Theme: sell (red) */
#action-confirm-modal.theme-sell #action-confirm-box    { border-color: #f6465d; box-shadow: 0 0 40px rgba(246,70,93,0.25), 0 8px 40px rgba(0,0,0,0.8); }
#action-confirm-modal.theme-sell #action-confirm-header { background: #3a0a0f; color: #f6465d; border-bottom-color: #f6465d66; }
#action-confirm-modal.theme-sell .action-confirm-btn-ok { background: #f6465d; }
#action-confirm-modal.theme-sell .action-confirm-btn-ok:hover { background: #d63850; }
#action-confirm-modal.theme-sell .action-confirm-chip   { background: #3a0a0f; color: #f6465d; border: 1px solid #f6465d44; }

/* Theme: warn (amber — force / stop) */
#action-confirm-modal.theme-warn #action-confirm-box    { border-color: #f0b90b; box-shadow: 0 0 40px rgba(240,185,11,0.25), 0 8px 40px rgba(0,0,0,0.8); }
#action-confirm-modal.theme-warn #action-confirm-header { background: #2b2200; color: #f0b90b; border-bottom-color: #f0b90b66; }
#action-confirm-modal.theme-warn .action-confirm-btn-ok { background: #f0b90b; color: #1e2026; }
#action-confirm-modal.theme-warn .action-confirm-btn-ok:hover { background: #d6a509; }
#action-confirm-modal.theme-warn .action-confirm-chip   { background: #2b2200; color: #f0b90b; border: 1px solid #f0b90b44; }

/* Theme: cycle-buy (blue — matches .cycle-buy button) */
#action-confirm-modal.theme-cycle-buy #action-confirm-box    { border-color: #3b82f6; box-shadow: 0 0 40px rgba(59,130,246,0.25), 0 8px 40px rgba(0,0,0,0.8); }
#action-confirm-modal.theme-cycle-buy #action-confirm-header { background: #0e1b3a; color: #3b82f6; border-bottom-color: #3b82f666; }
#action-confirm-modal.theme-cycle-buy .action-confirm-btn-ok { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); color: #fff; }
#action-confirm-modal.theme-cycle-buy .action-confirm-btn-ok:hover { filter: brightness(1.15); }
#action-confirm-modal.theme-cycle-buy .action-confirm-chip   { background: #0e1b3a; color: #3b82f6; border: 1px solid #3b82f644; }

/* Theme: cycle-sell (orange — matches .cycle-sell button) */
#action-confirm-modal.theme-cycle-sell #action-confirm-box    { border-color: #f59e0b; box-shadow: 0 0 40px rgba(245,158,11,0.25), 0 8px 40px rgba(0,0,0,0.8); }
#action-confirm-modal.theme-cycle-sell #action-confirm-header { background: #2b1a00; color: #f59e0b; border-bottom-color: #f59e0b66; }
#action-confirm-modal.theme-cycle-sell .action-confirm-btn-ok { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); color: #fff; }
#action-confirm-modal.theme-cycle-sell .action-confirm-btn-ok:hover { filter: brightness(1.15); }
#action-confirm-modal.theme-cycle-sell .action-confirm-chip   { background: #2b1a00; color: #f59e0b; border: 1px solid #f59e0b44; }

/* ── Startup warning modal ───────────────────────────── */
#startup-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#startup-modal-box {
  background: #1e2026;
  border: 1px solid #f0b90b66;
  border-radius: 12px;
  width: 420px;
  max-width: 94vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  overflow: hidden;
}
#startup-modal-header {
  background: #2a1f00;
  border-bottom: 1px solid #f0b90b44;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #f0b90b;
}
#startup-modal-icon { font-size: 20px; }
#startup-modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#startup-offline-msg {
  color: #f0b90b;
  font-size: 13px;
  font-weight: 600;
}
#startup-cycle-info {
  background: #13151a;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.startup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2b2f3a;
  padding-bottom: 5px;
}
.startup-row:last-child { border-bottom: none; padding-bottom: 0; }
.startup-row-label { color: #848e9c; }
.startup-row-value { font-weight: 600; }
#startup-profit-info {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
}
.startup-profit-good  { background:#0a2a1a; border:1px solid #0ecb8144; color:#0ecb81; }
.startup-profit-bad   { background:#2a0a0a; border:1px solid #f6465d44; color:#f6465d; }
.startup-profit-warn  { background:#2a2000; border:1px solid #f0b90b44; color:#f0b90b; }
#startup-modal-actions {
  display: flex;
  padding: 0 18px 18px;
}
.startup-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
}
.startup-btn-reset { background:#0a2a1a; color:#0ecb81; border-color:#0ecb8166; }
.startup-btn-reset:hover { background:#0d3a22; }

/* ── Outage catch-up warning modal ──────────────── */
#outage-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.80);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
}
#outage-modal-box {
  background: #1e2026;
  border: 2px solid #e6a817;
  border-radius: 14px;
  width: 460px;
  max-width: 94vw;
  box-shadow: 0 0 50px rgba(230,168,23,0.3), 0 8px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  animation: blockPulse 0.4s ease-out;
}
#outage-modal-header {
  background: #2a1f00;
  border-bottom: 1px solid #e6a81766;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 800;
  color: #f0b90b;
  letter-spacing: 0.3px;
}
#outage-modal-body {
  padding: 20px 22px 16px;
  color: #eaecef;
  font-size: 13px;
  line-height: 1.6;
}
#outage-msg {
  color: #f0b90b;
  font-weight: 600;
  margin-bottom: 12px;
}
#outage-details {
  background: #13151a;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
}
#outage-details:empty { display: none; }
#outage-modal-actions {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: center;
}

/* ── Sleep / outage warning modal (RED — danger) ───── */
#sleep-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sleep-modal-box {
  background: #1e2026;
  border: 3px solid #f5465c;
  border-radius: 14px;
  width: 520px;
  max-width: 94vw;
  box-shadow: 0 0 60px rgba(245,70,92,0.4), 0 8px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  animation: blockPulse 0.4s ease-out;
}
#sleep-modal-header {
  background: #3a0a0f;
  border-bottom: 2px solid #f5465c88;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: #f5465c;
  letter-spacing: 0.5px;
}
#sleep-modal-body {
  padding: 20px 22px 16px;
  color: #eaecef;
  font-size: 13px;
  line-height: 1.6;
}
#sleep-modal-body p { margin: 0 0 10px; }
#sleep-details {
  background: #2a0a0a;
  border: 1px solid #f5465c44;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 14px;
}
#sleep-live-warning {
  background: #3a0a0f;
  border: 2px solid #f5465c;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 8px;
}
#sleep-live-warning p { color: #eaecef; }
#sleep-modal-actions {
  padding: 14px 22px 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.sleep-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.sleep-btn-stop {
  background: #f5465c;
  color: #fff;
}
.sleep-btn-stop:hover { background: #d63850; }
.sleep-btn-ok {
  background: #2a2a2e;
  color: #eaecef;
  border: 1px solid #555;
}
.sleep-btn-ok:hover { background: #3a3a3e; }

/* ── Reset & base ─────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:#14151a;
  color:#eaecef;
  font-size:14px;
}

/* ── App shell ─────────────────────────────────────── */
#app{
  display:flex;
  gap:10px;
  padding:10px;
  height:100vh;
}

/* ── Chart area ────────────────────────────────────── */
#chart-area{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#chart-wrap{
  flex:1;
  display:flex;
  flex-direction:row;
  min-height:0;
  gap:0;
  position:relative;
  border-top: 5px solid transparent;
  transition: border-color 0.3s;
}
#chart-wrap.mode-sim    { border-top-color: #f0b90b; }
#chart-wrap.mode-practice { border-top-color: #a78bfa; }
#chart-wrap.mode-live   { border-top-color: transparent; }

/* Mode watermark overlay */
#mode-watermark {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 140px;
  font-weight: 900;
  letter-spacing: 12px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-user-select: none;
  user-select: none;
}
#chart-wrap.mode-sim #mode-watermark {
  opacity: 0.06;
  color: #f0b90b;
}
#chart-wrap.mode-practice #mode-watermark {
  opacity: 0.06;
  color: #a78bfa;
}
#chart-toolbar{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 4px;
  background:#14151a;
  border-radius:10px 0 0 10px;
  border-right:1px solid #2b2f3a;
  z-index:5;
}
.chart-tool-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:7px;
  color:#848e9c;
  cursor:pointer;
  padding:0;
  transition:color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.chart-tool-btn svg{
  width:20px;
  height:20px;
}
.chart-tool-btn:hover{
  color:#d0d4dd;
  background:#2b2f3a;
  border-color:#3a4055;
}
.chart-tool-btn.active{
  color:#f0b90b;
  background:#1a1608;
  border-color:#f0b90b88;
  box-shadow:0 0 8px rgba(240,185,11,0.2);
}
#chart{
  flex:1;
  min-height:0;
  position:relative;                     /* anchor for the cycle-editor SVG overlay */
  border-radius:0 10px 10px 0;
  overflow:hidden;
  background:#1e2026;
  box-shadow:0 2px 16px rgba(0,0,0,0.5);
}

/* ── Controls bar ──────────────────────────────────── */
#controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 7px;              /* row-gap column-gap — tighter when wrapping */
  background:#1e2026;
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 1px 6px rgba(0,0,0,0.4);
  min-width:0;
}
#controls label{
  display:flex;
  align-items:center;
  gap:4px;
  color:#848e9c;
  font-size:11px;
}
/* Compact Symbol/Interval inputs — override chunky global input/select defaults */
#controls #symbol,
#controls #interval{
  padding:3px 8px;
  font-size:11px;
  font-weight:600;
  border-radius:6px;
  background:#1a1c22;
  border:1px solid #2b2f3a;
  color:#c0c6d4;
  line-height:1.25;
}
#controls #symbol{ width:78px; }
#controls #interval{ padding-right:20px; }

/* Symbol history dropdown — recent pairs shown on focus/click */
#header-symbol-label{ position:relative; }
.symbol-history-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:100%;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:6px;
  padding:6px;
  box-shadow:0 4px 16px rgba(0,0,0,0.6);
  z-index:50;
  max-height:340px;
  overflow-y:auto;
}
.symbol-history-dropdown[hidden]{ display:none; }
.symbol-history-row{
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  color:#c0c6d4;
  border-radius:4px;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
}
.symbol-history-row:hover{
  background:#221e16;
  color:#eaecef;
}

/* Watchlist dropdown rows — extends symbol-history-row with a multi-column layout */
.symbol-history-dropdown{ min-width:380px; }
/* Header strip above the pair list: title + info icon. Border-bottom keeps
   the icon visually separate from the first pair row so it doesn't read as
   "part of" that pair. */
.wl-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px 8px;
  margin-bottom:4px;
  border-bottom:1px solid #2b2f3a;
}
.wl-header-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#848e9c;
}
.wl-header-info{
  width:22px;
  height:22px;
  font-size:13px;
}
.watchlist-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.watchlist-row.active{ background:#1c2433; color:#eaecef; }
.wl-dot{
  width:8px; height:8px; border-radius:50%;
  background:#444a57; flex-shrink:0;
}
.wl-dot.active{ background:#0ecb81; box-shadow:0 0 6px #0ecb81aa; }
.wl-name{ font-weight:700; color:#eaecef; flex-shrink:0; font-size:13px; }
.wl-summary{
  font-size:12px;
  font-weight:500;
  color:#9aa1ad;
  margin-left:auto;
  flex-shrink:0;
}
.wl-summary .move-up{ color:#0ecb81; }
.wl-summary .move-down{ color:#f6465d; }
.wl-summary.wl-empty{ font-style:italic; color:#5d6573; }
.wl-pin{ font-size:13px; opacity:0.8; flex-shrink:0; }
.wl-pin-hidden{ visibility:hidden; }
/* Segmented 3-state alert-mode toggle. All three options always visible so
   users can see at a glance which mode is set per pair without learning a
   single-icon cycle. */
.wl-bell-group{
  display:inline-flex;
  flex-shrink:0;
  background:#14171c;
  border-radius:4px;
  padding:1px;
  gap:1px;
}
.wl-bell-opt{
  font-size:13px;
  line-height:1;
  padding:4px 6px;
  border-radius:3px;
  cursor:pointer;
  opacity:0.35;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  filter:grayscale(0.6);
}
.wl-bell-opt:hover{
  opacity:0.7;
  background:#2b2f3a;
  filter:grayscale(0.2);
}
.wl-bell-opt-selected{
  opacity:1.0;
  background:#2b3340;
  box-shadow:0 0 0 1px #3b4555;
  filter:none;
}
.wl-bell-opt-selected:hover{
  background:#2b3340;        /* don't change on hover when already selected */
  opacity:1.0;
}
.wl-bell-group-locked .wl-bell-opt{
  cursor:default;
  pointer-events:none;        /* defense in depth — listener isn't attached
                                 for active pair, but this prevents any
                                 stray click from reaching the row handler */
}
.wl-bell-group-locked .wl-bell-opt:hover{
  background:transparent;     /* no hover feedback when locked */
  opacity:0.35;
  filter:grayscale(0.6);
}
.wl-bell-group-locked .wl-bell-opt-selected,
.wl-bell-group-locked .wl-bell-opt-selected:hover{
  opacity:0.85;
  background:#2b3340;
  filter:none;
}
.wl-remove{
  font-size:18px;
  font-weight:700;
  color:#5d6573;
  padding:2px 6px;
  border-radius:3px;
  flex-shrink:0;
  line-height:1;
  cursor:pointer;
}
.wl-remove:hover{ color:#f6465d; background:#2a1a1d; }
.wl-remove-hidden{ visibility:hidden; pointer-events:none; }
.wl-empty-row{ color:#5d6573; font-style:italic; }
.wl-hint{
  padding:6px 8px 2px;
  font-size:10px;
  color:#5d6573;
  font-weight:500;
  border-top:1px solid #2b2f3a;
  margin-top:4px;
}

/* Vertical divider between API key and SIM/LIVE */
#header-divider {
  width: 1px;
  height: 28px;
  background: #2b2f3a;
  margin: 0 2px 0 auto;   /* auto-left pushes this + every item after it to the right edge */
  flex-shrink: 0;
}

/* Binance conn-status in header */
#controls #conn-status {
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Dashboard sidebar ─────────────────────────────── */
aside#dashboard{
  width:300px;
  max-width:30vw;
  background:#1e2026;
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 2px 16px rgba(0,0,0,0.5);
  overflow-y:auto;
  flex-shrink:0;
}
aside#dashboard h3{
  font-size:15px;
  font-weight:600;
  color:#eaecef;
  border-bottom:1px solid #3a4055;
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
  padding-bottom:4px;
}

/* ── Dashboard 2 (collapsible right panel, all modes) ── */
aside#dashboard2{
  width:300px;
  max-width:30vw;
  background:#1e2026;
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 2px 16px rgba(0,0,0,0.5);
  overflow:hidden;
  position:relative;
  transition:width 0.3s ease, padding 0.3s ease;
  flex-shrink:0;
}
aside#dashboard2.collapsed{
  width:28px;
  padding:8px 2px;
}
aside#dashboard2.collapsed #dash2-content{
  display:none;
}
#dash2-toggle{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#14151a;
  border:1px solid #2b2f3a;
  border-radius:5px;
  color:#848e9c;
  cursor:pointer;
  padding:0;
  z-index:2;
  transition:color .15s, background .15s, border-color .15s;
}
#dash2-toggle:hover{
  color:#d0d4dd;
  background:#2b2f3a;
  border-color:#3a4055;
}
aside#dashboard2:not(.collapsed) #dash2-toggle{
  left:auto;
  right:6px;
  transform:none;
}
.dash2-chevron{
  transition:transform 0.3s ease;
}
aside#dashboard2:not(.collapsed) .dash2-chevron{
  transform:rotate(180deg); /* points right → click to collapse */
}
#dash2-content{
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
#dash2-content h3{
  font-size:15px;
  font-weight:600;
  color:#eaecef;
  border-bottom:1px solid #2b2f3a;
  margin:0 0 4px 0;
  padding-bottom:6px;
}

.row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.row-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:3px 0;
  border-bottom:1px solid #2b2f3a;
}
.row-inline strong{
  font-size:12px;
  color:#848e9c;
  text-transform:uppercase;
  letter-spacing:.05em;
}
/* Connection status dot */
/* Connection status badge */
.conn-ok{
  display:inline-flex; align-items:center; gap:5px;
  background:#0a2b1c; color:#0ecb81;
  border:1px solid #0ecb8144;
  border-radius:20px; padding:2px 9px;
  font-size:11px; font-weight:600;
}
.conn-sim{
  display:inline-flex; align-items:center; gap:5px;
  background:#2b2200; color:#f0b90b;
  border:1px solid #f0b90b44;
  border-radius:20px; padding:2px 9px;
  font-size:11px; font-weight:600;
}
.conn-practice{
  display:inline-flex; align-items:center; gap:5px;
  background:#1a1530; color:#a78bfa;
  border:1px solid #a78bfa44;
  border-radius:20px; padding:2px 9px;
  font-size:11px; font-weight:600;
}
.conn-fail{
  display:inline-flex; align-items:center; gap:5px;
  background:#2a0d10; color:#f6465d;
  border:1px solid #f6465d44;
  border-radius:20px; padding:2px 9px;
  font-size:11px; font-weight:600;
}
.conn-unknown{ color:#4a5060; font-size:11px; }

/* ── Inputs, selects, buttons ──────────────────────── */
input,select{
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #2b2f3a;
  background:#2b2f3a;
  color:#eaecef;
  font-size:13px;
  outline:none;
  transition:border .15s;
}
input:focus,select:focus{border-color:#f0b90b;}
input[type="datetime-local"],
input[type="date"]{color-scheme:dark;}
button{
  padding:8px 14px;
  border-radius:6px;
  border:none;
  background:#f0b90b;
  color:#14151a;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:background .15s;
}
button:not(.cycle-btn):not(.direct-buy):not(.direct-sell):not(.cycle-force):not(.cycle-force-buy):not(.cycle-stop):not(.topup-btn):not(.topup-info-btn):hover{background:#d4a200;}

/* ── Price display ─────────────────────────────────── */
#price-label{
  color:#848e9c;
  font-size:11px;
}
#price{
  font-size:15px;
  font-weight:700;
  color:#f0b90b;
  white-space:nowrap;
  background:#13151a;
  padding:2px 8px;
  border-radius:4px;
}
#price-divider{
  width:1px;
  height:20px;
  background:#2b2f3a;
  margin:0 2px;
}
/* conn status in header — smaller */
#controls #conn-status {
  font-size: 11px;
  white-space: nowrap;
}

/* ── Notes ─────────────────────────────────────────── */
.note{font-size:11px;color:#5e6673;line-height:1.5;}

/* ── Settings dropdown (API + Telegram + Sound Alerts) ─────────────── */
#settings-wrap{
  position:relative;
  flex-shrink:0;
}
#settings-btn{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  background:#1a1c22;
  color:#848e9c;
  border:1px solid #2b2f3a;
  border-radius:6px;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  transition:background .15s, border-color .15s, color .15s;
}
#settings-btn:hover{ background:#221e16; border-color:#3a3328; color:#c0c6d4; }
#settings-btn .settings-icon{ font-size:15px; line-height:1; }
#settings-menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.6);
  z-index:50;
}
#settings-menu[hidden]{ display:none; }
.settings-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:transparent;
  color:#cfd3dc;
  border:1px solid transparent;
  border-radius:5px;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  text-align:left;
  width:100%;
}
.settings-option:hover{ background:#2b2f3a; border-color:#3a4055; color:#eaecef; }
.settings-opt-label{ flex:1; }
.settings-opt-chev{ color:#848e9c; font-size:16px; line-height:1; }
.settings-opt-state{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  padding:2px 8px;
  border-radius:10px;
  background:#0a2b1c;
  color:#0ecb81;
  border:1px solid #0ecb8144;
}
.settings-option.muted .settings-opt-state{
  background:#2b1212;
  color:#f6465d;
  border-color:#f6465d44;
}
.settings-section-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#5e6673;
  padding:8px 10px 4px;
  margin-top:4px;
  border-top:1px solid #2b2f3a;
}
.settings-opt-toggle{
  color:#848e9c;
  font-size:11px;
  line-height:1;
  transition:transform .2s, color .15s;
}
.settings-option.expanded{
  background:#2b2512;
  border-color:#f0b90b44;
  color:#f0b90b;
}
.settings-option.expanded .settings-opt-toggle{
  transform:rotate(180deg);
  color:#f0b90b;
}

/* Hide the old standalone triggers — their panels/logic still work, just routed via Settings menu */
#api-key-btn, #tg-btn{ display:none; }
#api-key-wrap, #tg-wrap{ display:none; }

/* When the panels are reparented into #settings-wrap by settings.js, override
   their original bottom-right anchoring so they flyout to the right of the
   settings dropdown menu at the same vertical level — classic cascading menu.
   The settings-menu sits at right:0 of #settings-wrap, so its right edge ==
   wrap's right edge; positioning the panel at left:100% places it immediately
   to the right of the menu, with a 6px gap. */
#settings-wrap > #api-key-panel,
#settings-wrap > #tg-panel{
  top: calc(100% + 4px);
  left: calc(100% + 6px);
  right: auto;
}

/* ── Mode selector (dropdown) ─────────────── */
#mode-selector{
  position:relative;
  flex-shrink:0;
}
.mode-trigger{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:6px;
  cursor:pointer;
  color:#848e9c;
  border:1px solid #2b2f3a;
  background:#1a1c22;
  transition:background .2s, color .2s, border-color .2s;
  user-select:none;
  font-size:11px;
  font-family:inherit;
}
.mode-trigger:hover{ background:#221e16; border-color:#3a3328; color:#c0c6d4; }
.mode-trigger-icon{ font-size:11px; line-height:1; }
.mode-trigger-label{ font-size:13px; font-weight:700; letter-spacing:.06em; line-height:1; }
.mode-trigger-chev{
  font-size:18px;
  line-height:1;
  margin-left:4px;
  opacity:.85;
  transition:transform .2s;
}
.mode-trigger[aria-expanded="true"] .mode-trigger-chev{ transform:rotate(180deg); }
.mode-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.6);
  z-index:50;
}
.mode-menu[hidden]{ display:none; }
.mode-pill{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:6px;
  cursor:pointer;
  color:#c0c6d4;
  border:1px solid #2b2f3a;
  background:#1a1c22;
  transition:background .2s, color .2s, border-color .2s;
  user-select:none;
  font-size:11px;
}
.mode-pill:hover{ color:#eaecef; border-color:#3a4055; }
.pill-icon{ font-size:11px; line-height:1; opacity:.35; transition:opacity .2s; }
.pill-body{ display:flex; flex-direction:row; align-items:center; gap:4px; }
.pill-label{ font-size:13px; font-weight:700; letter-spacing:.06em; line-height:1; }
.pill-sub{ font-size:10px; color:#848e9c; margin-left:6px; letter-spacing:.02em; }
/* Live pulse dot */
.pill-dot-live{
  width:7px; height:7px; border-radius:50%;
  background:#3a4055; flex-shrink:0;
  transition:background .2s;
}
/* SIM active — amber, safe/paper feel */
.mode-pill.active-sim,
.mode-trigger.active-sim{
  background:linear-gradient(135deg,#252010,#2e2812);
  color:#f0b90b;
  box-shadow:0 0 0 1px #f0b90b44, 0 2px 10px #f0b90b14;
}
.mode-pill.active-sim .pill-icon{ opacity:1; }
/* LIVE active — green, real-money urgency */
.mode-pill.active-live,
.mode-trigger.active-live{
  background:linear-gradient(135deg,#081f16,#0c2e1e);
  color:#0ecb81;
  box-shadow:0 0 0 1px #0ecb8166, 0 2px 10px #0ecb8122;
}
.mode-pill.active-live .pill-dot-live,
.mode-trigger.active-live .mode-trigger-icon.pill-dot-live{
  background:#0ecb81;
  animation:live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%  { box-shadow:0 0 0 0   #0ecb8199; }
  70% { box-shadow:0 0 0 5px #0ecb8100; }
  100%{ box-shadow:0 0 0 0   #0ecb8100; }
}

/* ── Form layout ────────────────────────────────────── */
form{display:flex;flex-direction:column;gap:6px;}
form input{width:100%;}

/* ── Exchange indicator ─────────────────────────────── */
#exchange-wrap{
  flex-shrink:0;
  position:relative;
}
#exchange-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  line-height:1.25;
  font-size:11px;
  font-weight:700;
  background:#1a1c22;
  color:#f0b90b;
  border:1px solid #2b2f3a;
  border-radius:6px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
#exchange-btn:hover{background:#221e16; border-color:#3a3328;}
.exchange-caret{font-size:9px;opacity:.6;}

/* ── API Key panel (opened via ⚙ Settings > API Keys) ───────────────── */
#api-key-panel{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:10px;
  padding:14px;
  box-shadow:0 6px 24px rgba(0,0,0,0.6);
  z-index:999;
}
#api-key-panel.open{display:block;}

/* ── Telegram panel (opened via ⚙ Settings > Telegram) ──────────────── */
#tg-panel{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:10px;
  padding:14px;
  box-shadow:0 6px 24px rgba(0,0,0,0.6);
  z-index:999;
}
#tg-panel.open{display:block;}
#tg-panel-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#eaecef;
  font-size:13px;
}
#tg-status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#4e5a6a;
  flex-shrink:0;
  transition:background .3s;
}
#tg-status-dot.ok{background:#0ecb81;}
#tg-status-dot.err{background:#f6465d;}
.tg-row{margin-bottom:8px;}
.tg-field-label{
  display:block;
  font-size:11px;
  color:#848e9c;
  margin-bottom:2px;
  margin-top:6px;
}
.tg-field-label span{font-size:10px;}
.tg-row input[type="text"]{
  width:100%;
  padding:6px 8px;
  font-size:12px;
  background:#181a20;
  color:#eaecef;
  border:1px solid #2a2e39;
  border-radius:4px;
  margin-bottom:4px;
  box-sizing:border-box;
}
.tg-row input[type="text"]::placeholder{color:#4e5a6a;}
.tg-toggle-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#eaecef;
  cursor:pointer;
}
.tg-toggle-label input[type="checkbox"]{
  accent-color:#29B6F6;
  width:16px;height:16px;
}
.tg-checks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 8px;
}
.tg-checks label{
  font-size:11px;
  color:#b0b8c1;
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.tg-checks input[type="checkbox"]{
  accent-color:#29B6F6;
  width:13px;height:13px;
}
#tg-save-btn{
  padding:6px 0;
  font-size:12px;font-weight:700;
  background:#29B6F6;color:#fff;
  border:none;border-radius:4px;
  cursor:pointer;
  transition:background .15s;
}
#tg-save-btn:hover{background:#0397d6;}
.tg-test-btn{
  padding:6px 0;
  font-size:12px;font-weight:700;
  background:#2b2f3a;color:#29B6F6;
  border:1px solid #29B6F644;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s;
}
.tg-test-btn:hover{background:#383d4a;}
.tg-test-btn:disabled{opacity:.4;cursor:not-allowed;}
#tg-test-result{
  font-size:11px;
  padding:6px 8px;
  border-radius:4px;
  margin-top:6px;
}
#tg-test-result.ok{background:#0ecb8122;color:#0ecb81;}
#tg-test-result.err{background:#f6465d22;color:#f6465d;}
#tg-setup-guide{
  margin-top:10px;
  border-top:1px solid #2a2e39;
  padding-top:8px;
}
#tg-setup-guide summary{
  font-size:11px;
  color:#848e9c;
  cursor:pointer;
  user-select:none;
}
#tg-setup-guide summary:hover{color:#eaecef;}
.tg-guide-body{
  font-size:11px;
  color:#b0b8c1;
  line-height:1.5;
  margin-top:8px;
}
.tg-guide-body ol{
  padding-left:18px;
  margin:6px 0;
}
.tg-guide-body li{margin-bottom:6px;}
.tg-guide-body code{
  background:#181a20;
  padding:2px 6px;
  border-radius:3px;
  color:#eaecef;
  font-size:11px;
}
.tg-guide-step-header{
  font-size:11px;
  font-weight:700;
  color:#29B6F6;
  margin:10px 0 4px;
}
.tg-guide-cost{
  margin-top:8px;
  padding:8px;
  background:#181a20;
  border-radius:6px;
  font-size:11px;
  color:#b0b8c1;
  line-height:1.5;
}

/* ── Section title divider ─────────────────────────────────── */
.section-title{
  position:relative;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5e6673;
  padding:5px 0 0;
  margin-top:3px;
  border-top:1px solid #3a4055;
}
.section-title::before{
  content:'';
  position:absolute;
  top:1px;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,0.08);
  pointer-events:none;
}

/* ── Dashboard section panel (frames MOVE ALERT, LAST TRADE, etc.) ── */
.dash-panel{
  background:#14151a;
  border:1px solid #2b2f3a;
  border-radius:6px;
  padding:6px 10px;
}
/* #bot-controls-section wraps two dash-panels (Bot Controls + Cycle Settings).
   Give them the same column gap the aside uses for its own panels, so they
   don't stack flush against each other. */
#bot-controls-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dash-panel > .section-title{
  border-top:none;
  margin-top:0;
  padding:0 0 4px;
  margin-bottom:4px;
  border-bottom:1px solid #1e2026;
  color:#848e9c;
}
.dash-panel > .section-title::before{ display:none; }
.dash-panel > #move-indicator-wrap{
  background:transparent;
  padding:0;
  border-radius:0;
}
.dash-panel > #gauge-container{
  border-bottom:none;
  box-shadow:none;
}
.dash-panel > .trade-pill{
  background:transparent;
  border-radius:0;
  margin-bottom:0;
  padding:0 0 0 10px;
}

/* ── Last trade card ───────────────────────────────────────── */
.trade-card{
  background:#14151a;
  border-radius:8px;
  padding:6px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-left:3px solid #2b2f3a;
  transition:border-color .2s;
}
.trade-buy  { border-left-color:#0ecb81; }
.trade-sell { border-left-color:#f6465d; }
.trade-none { border-left-color:#2b2f3a; }
.trade-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
}
.lt-side{
  font-weight:700;
  font-size:14px;
  letter-spacing:.06em;
}
.lt-buy  { color:#0ecb81; }
.lt-sell { color:#f6465d; }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  #app{flex-direction:column;}
  aside#dashboard{width:100%;max-width:100%;}
  aside#dashboard2{width:100%;max-width:100%;}
  aside#dashboard2.collapsed{width:100%;max-width:100%;height:32px;padding:4px;}
  #chart{min-height:55vh;}
}

/* ── Cycle buttons ─────────────────────────────────────────────────── */
/* ── Mode toggle switch ──────────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:36px; height:18px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; cursor:pointer; inset:0;
  background:#2a2e39; border-radius:18px;
  transition:.3s;
}
.toggle-slider::before {
  content:""; position:absolute; height:14px; width:14px;
  left:2px; bottom:2px; background:#848e9c;
  border-radius:50%; transition:.3s;
}
.toggle-switch input:checked + .toggle-slider { background:#1a3a5c; }
.toggle-switch input:checked + .toggle-slider::before {
  transform:translateX(18px); background:#3b82f6;
}
.mode-label { font-size:10px; color:#4e5a6a; transition:color .2s; }
.mode-label.active { color:#eaecef; }

/* ── Direct mode buttons (traditional green/red) ───────── */
.direct-buy {
  background:linear-gradient(180deg, #0ecb81 0%, #0aa368 100%);
  border-color:rgba(14,203,129,0.35);
  color:#fff;
  box-shadow: 0 4px 14px rgba(14,203,129,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.direct-buy:hover {
  box-shadow: 0 6px 20px rgba(14,203,129,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: none;
}
.direct-sell {
  background:linear-gradient(180deg, #f6465d 0%, #d63850 100%);
  border-color:rgba(246,70,93,0.35);
  color:#fff;
  box-shadow: 0 4px 14px rgba(246,70,93,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.direct-sell:hover {
  box-shadow: 0 6px 20px rgba(246,70,93,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: none;
}

.cycle-action-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.cycle-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease, background .2s ease;
}
.cycle-btn:hover  { transform: translateY(-1px); filter: brightness(1.12); }
.cycle-btn:active { transform: translateY(0);    filter: brightness(0.95); }
.cycle-buy {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: rgba(59,130,246,0.4);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59,130,246,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.cycle-buy:hover {
  box-shadow: 0 6px 20px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: none;
}
.cycle-buy.active {
  box-shadow: 0 0 0 2px #3b82f6, 0 0 14px #3b82f666, inset 0 1px 0 rgba(255,255,255,0.22);
}
.cycle-sell {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: rgba(245,158,11,0.4);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245,158,11,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.cycle-sell:hover {
  box-shadow: 0 6px 20px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: none;
}
.cycle-sell.active {
  box-shadow: 0 0 0 2px #f59e0b, 0 0 14px #f59e0b66, inset 0 1px 0 rgba(255,255,255,0.22);
}
.cycle-force {
  background: linear-gradient(180deg, #ff8a1f 0%, #e05a00 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  border-color: rgba(255,138,31,0.35);
  box-shadow: 0 4px 14px rgba(255,106,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: force-glow 2.2s ease-in-out infinite;
}
.cycle-force:hover {
  box-shadow: 0 6px 20px rgba(255,106,0,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  animation-play-state: paused;
}
.cycle-force-buy {
  background: linear-gradient(180deg, #14d481 0%, #0a9f5d 100%);
  border-color: rgba(20,212,129,0.35);
  box-shadow: 0 4px 14px rgba(14,203,129,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: force-glow-buy 2.2s ease-in-out infinite;
}
.cycle-force-buy:hover {
  box-shadow: 0 6px 20px rgba(14,203,129,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}
.cycle-stop {
  background: linear-gradient(180deg, rgba(246,70,93,0.14) 0%, rgba(246,70,93,0.06) 100%);
  color: #ff5872;
  border: 1px solid rgba(246,70,93,0.38);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.cycle-stop:hover {
  background: linear-gradient(180deg, rgba(246,70,93,0.22) 0%, rgba(246,70,93,0.1) 100%);
  border-color: rgba(246,70,93,0.6);
  box-shadow: 0 4px 14px rgba(246,70,93,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  filter: none;
}

/* ── Top-up button ──────────────────────────────────────────────────── */
.topup-btn {
  background: #2a1f0a;
  color: #f0b90b;
  border: 1px solid #f0b90b44;
  font-size: 11px;
  padding: 5px 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.topup-btn:hover { background: #3a2a0e; border-color: #f0b90b88; }
.topup-btn:disabled {
  background: #1e2028;
  color: #4a4f5c;
  border-color: #2b2f3a;
  cursor: not-allowed;
}
.topup-btn:disabled:hover {
  background: #1e2028;
  border-color: #2b2f3a;
}
.topup-info-btn {
  background: none;
  border: 1px solid #66bb6a44;
  color: #66bb6a;
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .15s;
}
.topup-info-btn:hover { border-color: #66bb6a; color: #81c784; }
.topup-info-btn.open  { color: #f0b90b; border-color: #f0b90b66; }

/* ── Top-up info modal ──────────────────────────────────────────────── */
#topup-info-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
#topup-info-modal-box {
  background: #181c25;
  border: 1px solid #2a2e39;
  border-radius: 12px;
  width: 760px;
  max-width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
#topup-info-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2e39;
  font-weight: 700;
  color: #f0b90b;
  font-size: 14px;
  position: sticky; top: 0;
  background: #181c25;
  border-radius: 12px 12px 0 0;
  z-index: 1;
}
#topup-info-modal-header button {
  background: none; border: none; color: #848e9c; font-size: 18px; cursor: pointer;
}
#topup-info-modal-header button:hover { color: #eaecef; }
#topup-info-modal-body {
  padding: 14px 18px 18px;
  font-size: 13px;
  color: #d1d4dc;
  line-height: 1.6;
}
#topup-info-modal-body p { margin: 0 0 8px; }

/* ── Practice Settings Exit Modal ── */
#practice-settings-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
#practice-settings-modal-box {
  background: #181c25;
  border: 1px solid #2a2e39;
  border-radius: 12px;
  width: min(420px, 90vw);
  overflow: hidden;
}
#practice-settings-modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid #2a2e39;
  font-weight: 700;
  font-size: 14px;
  color: #eaecef;
}
#practice-settings-modal-body {
  padding: 14px 18px 18px;
}
#practice-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#practice-settings-table th {
  text-align: left;
  color: #848e9c;
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid #2a2e39;
}
#practice-settings-table td {
  padding: 6px 8px;
  color: #d1d4dc;
  border-bottom: 1px solid #1a1e27;
}
#practice-settings-table td:first-child,
#practice-settings-table th:first-child {
  width: 28px;
  text-align: center;
  padding-right: 0;
}
#practice-settings-table .ps-check {
  width: 15px;
  height: 15px;
  accent-color: #f0b90b;
  cursor: pointer;
}
#practice-settings-table td:nth-child(3) {
  color: #848e9c;
}
#practice-settings-table td:nth-child(4) {
  color: #f0b90b;
  font-weight: 600;
}
#practice-settings-modal .btn-secondary {
  background: #2a2e39;
  color: #d1d4dc;
  border: 1px solid #3a3e49;
  border-radius: 6px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
#practice-settings-modal .btn-secondary:hover {
  background: #3a3e49;
}
#practice-settings-modal .btn-primary {
  background: #f0b90b;
  color: #181c25;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
#practice-settings-modal .btn-primary:hover {
  background: #d4a20a;
}

/* Greyed-out unavailable button */
.cycle-btn--dimmed {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}
@keyframes force-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,106,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 6px 22px rgba(255,106,0,0.5),  inset 0 1px 0 rgba(255,255,255,0.22); }
}
@keyframes force-glow-buy {
  0%, 100% { box-shadow: 0 4px 14px rgba(14,203,129,0.22), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 6px 22px rgba(14,203,129,0.5),  inset 0 1px 0 rgba(255,255,255,0.22); }
}

/* ── Slider rows ───────────────────────────────────────────────── */
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
  border-bottom: 1px solid #2b2f3a;
}
.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-label {
  font-size: 12px;
  color: #c8cbd4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.slider-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #f0b90b;
  cursor: pointer;
  padding: 0;
  border: none;
}
.slider-with-check {
  display: flex;
  align-items: center;
  gap: 7px;
}
.slider-with-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: #f0b90b;
  cursor: pointer;
}
.slider-with-check .slider {
  flex: 1;
  min-width: 0;
}
.slider-value {
  font-size: 13px;
  font-weight: 700;
  color: #f0b90b;
  min-width: 36px;
  text-align: right;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #3a4055;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f0b90b;
  cursor: pointer;
  box-shadow: 0 0 4px #f0b90b88;
}
.slider--reentry::-webkit-slider-thumb {
  background: #e040fb;
  box-shadow: 0 0 4px #e040fb88;
}
.slider-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #848e9c;
}

/* ── Dimmed slider row ─────────────────────────────────────────────── */
.slider-row--dimmed .slider,
.slider-row--dimmed .slider-minmax {
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}
.slider-row--dimmed .slider-value {
  opacity: 0.28;
  color: #848e9c;
}

/* ── Cycle status card ──────────────────────────────────────────────── */
/* Override row-inline to make this a stacked card, not a squeezed row. */
#cycle-status-row {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 3px 0 3px 9px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-left: 3px solid #3a4055;
  background: transparent;
  transition: border-left-color .2s ease;
}
/* Label sits at the same left inset as the badge's text (9px) so the two
   read as left-aligned inside the card. */
#cycle-status-row .cycle-status-label {
  font-size: 9px;
  padding: 0;
  color: #848e9c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
#cycle-status-row.cycle-buy  { border-left-color: #0ecb81; }
#cycle-status-row.cycle-sell { border-left-color: #f6465d; }

#cycle-status-badge {
  display: block;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  max-width: none;
  text-align: left;
  line-height: 1.35;
}
/* Buy cycle — all states green */
.badge-buy-waiting  { background: rgba(14,203,129,0.1);  color: #0ecb81; border: 1px solid rgba(14,203,129,0.28); }
.badge-buy-trailing { background: rgba(14,203,129,0.16); color: #0ecb81; border: 1px solid rgba(14,203,129,0.42); }
/* Sell cycle — all states red */
.badge-sell-waiting  { background: rgba(246,70,93,0.1);  color: #f6465d; border: 1px solid rgba(246,70,93,0.28); }
.badge-sell-trailing { background: rgba(246,70,93,0.16); color: #f6465d; border: 1px solid rgba(246,70,93,0.42); }
/* Profit Target waiting — matches chart PT line colour */
.badge-profit-waiting { background: rgba(240,185,11,0.1); color: #f0b90b; border: 1px solid rgba(240,185,11,0.3); }
/* Re-entry Target — magenta to match negative slider/chart line */
.badge-reentry-waiting { background: rgba(224,64,251,0.1); color: #e040fb; border: 1px solid rgba(224,64,251,0.3); }
/* Triggered — bright regardless */
.badge-triggered { background: rgba(226,183,20,0.14); color: #ffd54f; border: 1px solid rgba(226,183,20,0.45); }

/* ── Bot log ───────────────────────────────────────────────────────── */
#bot-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.log-entry {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #1e2026;
  line-height: 1.4;
}
.log-time { color: #848e9c; flex-shrink: 0; }
.log-msg  { color: #848e9c; }
.log-msg.ok   { color: #0ecb81; }
.log-msg.warn { color: #f0b90b; }
.log-msg.err  { color: #f6465d; }
.log-note {
  display: block;
  margin-top: 3px;
  padding-left: 8px;
  border-left: 2px solid #2b2f3a;
  color: #848e9c;
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Bot Log Drawer ──────────────────────────────────────────────── */
#botlog-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: #1a1c22; border: 1px solid #2b2f3a; color: #848e9c;
  cursor: pointer; flex-shrink: 0;
}
#botlog-btn:hover { background: #221e16; color: #c0c6d4; border-color: #3a3328; }

#botlog-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 999; display: none;
}
#botlog-overlay.open { display: block; }

#botlog-drawer {
  position: fixed; top: 0; right: -460px; width: 440px; height: 100vh;
  background: #1a1c22; border-left: 1px solid #2b2f3a;
  z-index: 1000; display: flex; flex-direction: column;
  transition: right 0.25s ease; box-shadow: -6px 0 28px rgba(0,0,0,0.55);
}
#botlog-drawer.open { right: 0; }

#botlog-drawer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #2b2f3a; flex-shrink: 0;
}
#botlog-drawer-title { font-size: 14px; font-weight: 700; color: #d0d4dd; flex: 1; }
#botlog-close-btn {
  background: none; border: none; color: #5e6673;
  font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
#botlog-close-btn:hover { color: #f6465d; }

#botlog-drawer-body {
  flex: 1; overflow-y: auto; padding: 8px 16px;
}

/* ── Trade History Drawer ─────────────────────────── */
#history-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: #1a1c22; border: 1px solid #2b2f3a; color: #848e9c;
  cursor: pointer; flex-shrink: 0;
}
#history-btn:hover { background: #221e16; color: #c0c6d4; border-color: #3a3328; }


#clear-cycle-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: #1a1c22; border: 1px solid #f0b90b44; color: #f0b90b;
  cursor: pointer; flex-shrink: 0; align-items: center; gap: 5px;
  transition: background .15s, border-color .15s;
}
#clear-cycle-btn:hover { background: #22201a; border-color: #f0b90b99; }
#clear-cycle-btn.restore-mode { color: #848e9c; border-color: #3a405544; }
#clear-cycle-btn.restore-mode:hover { color: #c0c6d4; border-color: #5e667366; background: #1e2028; }

#history-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 999; display: none;
}
#history-overlay.open { display: block; }

#history-drawer {
  position: fixed; top: 0; right: -1000px; width: 980px; height: 100vh;
  background: #1a1c22; border-left: 1px solid #2b2f3a;
  z-index: 1000; display: flex; flex-direction: column;
  transition: right 0.25s ease; box-shadow: -6px 0 28px rgba(0,0,0,0.55);
}
#history-drawer.open { right: 0; }
@media (max-width: 920px) {
  #history-drawer { width: 100vw; right: -100vw; }
}

#history-drawer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #2b2f3a; flex-shrink: 0;
}
#history-drawer-title { font-size: 14px; font-weight: 700; color: #d0d4dd; flex: 1; }
#history-filter-pills { display: flex; gap: 5px; }
.hist-filter {
  padding: 4px 10px; border-radius: 6px; border: 1px solid #2b2f3a;
  background: #1e2026; color: #5e6673; font-size: 11px; font-weight: 700; cursor: pointer;
}
.hist-filter.active { background: #2b2f3a; color: #d0d4dd; border-color: #3a4055; }
.hist-filter:hover   { color: #848e9c; }
#history-close-btn {
  background: none; border: none; color: #5e6673;
  font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
#history-close-btn:hover { color: #f6465d; }

#history-summary {
  display: flex; border-bottom: 1px solid #2b2f3a; flex-shrink: 0;
}
.hist-summary-box {
  flex: 1; padding: 10px 4px; text-align: center;
  border-right: 1px solid #1e2026;
}
.hist-summary-box:last-child { border-right: none; }
.hist-summary-label { font-size: 10px; color: #8a92a0; display: block; margin-bottom: 3px; }
.hist-summary-val   { font-size: 14px; font-weight: 800; }

#history-drawer-body { flex: 1; overflow-y: auto; }
#history-empty {
  color: #5e6673; font-size: 12px; text-align: center; padding: 40px 20px;
}
#history-table { width: 100%; border-collapse: collapse; font-size: 11px; }
#history-table th {
  position: sticky; top: 0; background: #1a1c22;
  color: #5e6673; font-weight: 600; padding: 8px 10px;
  text-align: left; border-bottom: 1px solid #2b2f3a; white-space: nowrap;
}
#history-table td {
  padding: 7px 10px; border-bottom: 1px solid #1e2026;
  color: #848e9c; white-space: nowrap;
}
#history-table tr:hover td { background: #1e2026; }
/* "Ask Coach about this trade" button — hover-revealed brain icon at the end of each row */
.hist-ask-coach{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:2px 6px;
  font-size:14px;
  line-height:1;
  opacity:0.25;
  transition:opacity .15s,background .15s;
  border-radius:4px;
  font-family:inherit;
}
#history-table tr:hover .hist-ask-coach{opacity:0.85;}
.hist-ask-coach:hover{opacity:1!important;background:#23323e;}
.hist-mode-live     { color: #f0b90b; font-weight: 700; font-size: 10px; }
.hist-mode-sim      { color: #5e6673; font-weight: 700; font-size: 10px; }
.hist-mode-practice { color: #a78bfa; font-weight: 700; font-size: 10px; }
.hist-type-label    { color: #a78bfa; font-weight: 600; font-size: 10px; white-space: nowrap; }
.hist-note-wrap     { display: inline-block; margin-left: 4px; }
.hist-note-icon     { cursor: pointer; font-size: 12px; opacity: 0.8; vertical-align: middle; }
.hist-note-icon:hover { opacity: 1; filter: brightness(1.2); }
.hist-note-detail   {
  display: none;
  margin-top: 4px;
  padding: 5px 8px;
  background: #14161d;
  border-left: 2px solid #3b82f6;
  border-radius: 3px;
  color: #c7cad1;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  max-width: 280px;
}
.hist-note-wrap.expanded .hist-note-detail { display: block; }
.hist-note-line { display: block; font-style: italic; white-space: pre-wrap; }
.hist-note-line + .hist-note-line { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #2b2f3a; }
.hist-note-kind {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  background: #2b2f3a;
  border-radius: 3px;
  color: #848e9c;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.hist-note-action .hist-note-kind { background: #2b1a00; color: #f0b90b; }
.hist-side-buy  { color: #0ecb81; font-weight: 700; }
.hist-side-sell { color: #f6465d; font-weight: 700; }
.hist-pnl-pos   { color: #0ecb81; font-weight: 700; }
.hist-pnl-neg   { color: #f6465d; font-weight: 700; }
.hist-pnl-null  { color: #3a4055; }

/* ── Position Ledger (History Drawer) ────────────── */
.pos-open        { background: rgba(240, 185, 11, 0.08); border-left: 3px solid #f0b90b; }
.pos-closed-win  { background: rgba(14, 203, 129, 0.06); border-left: 3px solid #0ecb81; }
.pos-closed-loss { background: rgba(246, 70, 93, 0.06);  border-left: 3px solid #f6465d; }
.pos-status-open   { color: #f0b90b; font-weight: 700; font-size: 10px; }
.pos-status-closed { color: #848e9c; font-size: 10px; }
.pos-mode-pill.active { background: #f0b90b; color: #14151a; border-color: #f0b90b; }
.pos-info-btn {
  background: none; border: 1px solid #66bb6a44; color: #66bb6a; border-radius: 50%;
  width: 22px; height: 22px; font-size: 14px; line-height: 20px; text-align: center;
  cursor: pointer; padding: 0; margin-left: 4px;
}
.pos-info-btn:hover { color: #81c784; border-color: #66bb6a; }
#pos-info-modal,
#pos-mark-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.pos-info-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.pos-action-btn {
  background: #2b2f3a; border: 1px solid #3a4055; color: #d0d4dd;
  font-size: 9px; padding: 2px 6px; border-radius: 3px; cursor: pointer; font-weight: 600;
}
.pos-action-btn:hover { background: #3a4055; color: #f0b90b; }
.pos-mark-close { border-color: #0ecb8155; color: #0ecb81; }
.pos-mark-close:hover { background: #0ecb8122; }
.pos-discard { border-color: #f6465d55; color: #f6465d; }
.pos-discard:hover { background: #f6465d22; }
.pos-info-box {
  position: relative; background: #1e2026; border: 1px solid #2b2f3a; border-radius: 12px;
  padding: 24px; max-width: 440px; width: 90%; color: #c0c6d4; font-size: 13px; line-height: 1.6;
}
.pos-info-title { font-size: 16px; font-weight: 700; color: #f0b90b; margin-bottom: 12px; }
.pos-info-body p { margin: 8px 0; }
.pos-info-body ul { margin: 6px 0 6px 18px; padding: 0; }
.pos-info-body li { margin: 4px 0; }
.pos-info-close {
  margin-top: 16px; width: 100%; padding: 10px; border: none; border-radius: 8px;
  background: #f0b90b; color: #14151a; font-weight: 700; font-size: 13px; cursor: pointer;
}
.pos-info-close:hover { filter: brightness(1.15); }

/* ── Practice Sessions (History Drawer) ───────────── */
#practice-sessions-view {
  padding: 0 12px 12px;
  overflow-y: auto;
}
.prac-session-card {
  background: #181a20;
  border: 1px solid #2b2f3a;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.prac-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  gap: 10px;
  transition: background .15s;
}
.prac-session-header:hover { background: #1e222d; }
.prac-session-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prac-session-date {
  font-size: 12px;
  color: #d0d4dd;
  font-weight: 600;
}
.prac-session-symbol {
  font-size: 10px;
  color: #a78bfa;
  font-weight: 700;
  text-transform: uppercase;
}
.prac-session-replay {
  font-size: 9px;
  color: #4a5060;
}
.prac-session-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.prac-session-chevron {
  color: #4a5060;
  font-size: 10px;
  flex-shrink: 0;
  transition: transform .2s;
}
.prac-session-body {
  border-top: 1px solid #2b2f3a;
  padding: 8px 12px;
  background: #13151b;
}
.prac-trade-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px 4px 5px 8px;
  border-bottom: 1px solid #1e2026;
  border-left: 3px solid transparent;
  font-size: 11px;
}
.prac-trade-row.trade-win  { border-left-color: #0ecb81; }
.prac-trade-row.trade-loss { border-left-color: #f6465d; }
.prac-trade-meta {
  flex-basis: 100%;
  display: flex;
  gap: 14px;
  color: #636b7a;
  font-size: 10px;
  padding-left: 8px;
  padding-bottom: 2px;
}
.prac-trade-row:last-of-type { border-bottom: none; }
.prac-trade-num {
  color: #4a5060;
  font-size: 10px;
  width: 22px;
  flex-shrink: 0;
}
.prac-trade-dir {
  color: #c8cbd4;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prac-trade-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.prac-badge-hunter     { background: #0ecb8122; color: #0ecb81; border: 1px solid #0ecb8155; }
.prac-badge-lock       { background: #a78bfa22; color: #a78bfa; border: 1px solid #a78bfa55; }
.prac-badge-buy-cycle  { background: #38bdf822; color: #38bdf8; border: 1px solid #38bdf855; }
.prac-trade-pnl {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.prac-trade-run {
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  opacity: 0.7;
}
.prac-trade-age {
  color: #4a5060;
  font-size: 10px;
  flex-shrink: 0;
}
.prac-trade-incomplete {
  opacity: 0.75;
  border-left: 3px solid #a78bfa !important;
  padding-left: 8px;
}
.prac-session-delete {
  display: block;
  margin: 8px auto 0;
  padding: 4px 14px;
  font-size: 11px;
  background: transparent;
  border: 1px solid #f6465d44;
  color: #f6465d;
  border-radius: 4px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s;
}
.prac-session-delete:hover { opacity: 1; }

/* ── Enhanced Trade Details (expanded session) ───── */
.prac-trade-detail {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0 8px;
  padding: 8px 4px 8px 4px;
  border-bottom: 1px solid #1e2026;
  border-left: 3px solid transparent;
  font-size: 11px;
}
.prac-trade-detail.trade-win      { border-left-color: #0ecb81; }
.prac-trade-detail.trade-loss     { border-left-color: #f6465d; }
.prac-trade-detail.trade-win-buy  { border-left-color: #38bdf8; }
.prac-trade-detail.trade-loss-buy { border-left-color: #f6465d; border-left-style: dashed; }
.prac-trade-detail.prac-trade-incomplete     { border-left-color: #a78bfa; opacity: 0.75; }
.prac-trade-detail.prac-trade-incomplete-buy { border-left-color: #38bdf8; opacity: 0.75; }
.prac-trade-detail:last-of-type { border-bottom: none; }

.prac-trade-detail .prac-trade-num {
  grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center;
  color: #4a5060; font-size: 10px;
}
.prac-trade-detail-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prac-trade-detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #636b7a;
  font-size: 10px;
  padding-top: 3px;
}
.prac-trade-detail-sub span { white-space: nowrap; }
.prac-detail-label { color: #4a5060; }

/* Sell breakdown rows inside a trade */
.prac-sell-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 3px 0 2px 0;
  color: #848e9c;
  font-size: 10px;
}
.prac-sell-chip {
  background: #f0b90b11;
  border: 1px solid #f0b90b33;
  border-radius: 3px;
  padding: 1px 5px;
  color: #f0b90b;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.prac-topup-badge {
  background: #f0b90b18;
  border: 1px solid #f0b90b44;
  border-radius: 3px;
  padding: 1px 6px;
  color: #f0b90b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.prac-trade-amount {
  color: #636b7a;
  font-size: 10px;
  flex-shrink: 0;
}

/* Session stats footer (inside expanded body) */
.prac-session-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  background: #181a20;
  border-radius: 6px;
  border: 1px solid #2b2f3a;
}
.prac-stat-cell {
  text-align: center;
  padding: 4px 2px;
}
.prac-stat-cell-label {
  font-size: 9px;
  color: #8a92a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
.prac-stat-cell-val {
  font-size: 13px;
  font-weight: 700;
}

/* Summary bar — two rows when practice */
#history-summary { flex-wrap: wrap; }
.hist-summary-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #2b2f3a;
}
.hist-summary-row:last-child { border-bottom: none; }
.hist-summary-row .hist-summary-box { border-bottom: none; }

/* Session header top-up indicator */
.prac-session-topup-indicator {
  font-size: 9px;
  color: #f0b90b;
  font-weight: 600;
}

/* ── Toggle switch ───────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: #2b2f3a;
  border-radius: 20px;
  transition: background .2s;
}
.toggle-switch input:checked + .toggle-track { background: #f0b90b; }
.toggle-track::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-track::after { transform: translateX(16px); }

/* ── Move indicator bar ──────────────────────────── */
#move-indicator-wrap {
  background: #14151a;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.move-indicator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.move-dir-none { font-size: 12px; color: #848e9c; }
.move-dir-up   { font-size: 12px; font-weight: 700; color: #ffd700; }
.move-dir-down { font-size: 12px; font-weight: 700; color: #f6465d; }
.move-pct-val  {
  font-size: 13px;
  font-weight: 700;
  color: #eaecef;
  font-variant-numeric: tabular-nums;
}
.move-dir-up   ~ .move-pct-val { color: #ffd700; }
.move-dir-down ~ .move-pct-val { color: #f6465d; }
.move-dir-none ~ .move-pct-val { color: #848e9c; }
.move-bar-track {
  height: 6px;
  background: #2b2f3a;
  border-radius: 3px;
  overflow: hidden;
}
.move-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: #4a5060;
  transition: width .5s ease, background .3s;
}
.move-bar-fill.up   { background: #0ecb81; }
.move-bar-fill.down { background: #f6465d; }
.move-bar-fill.alert { animation: bar-pulse 1s ease-in-out infinite; }
@keyframes bar-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.move-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #848e9c;
}
.move-start-time { font-size: 10px; color: #848e9c; flex: 1; }

.move-start-row {
  display: flex; align-items: center; gap: 6px;
}
.move-settings-btn {
  background: none; border: 1px solid #2b2f3a; color: #5e6673;
  font-size: 14px; width: 26px; height: 26px; border-radius: 6px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; transition: color .15s, border-color .15s;
}
.move-settings-btn:hover { color: #d0d4dd; border-color: #3a4055; }
.move-settings-btn.open  { color: #f0b90b; border-color: #f0b90b66; }

.move-settings-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, overflow 0s 0.3s;
}
.move-settings-panel.open {
  max-height: 400px;
  overflow: visible;
  transition: max-height 0.3s ease, overflow 0s 0s;
}

/* ── Macro context panel (long-term display, not in gauge) ───────── */
.macro-panel {
  background: #14151a;
  border: 1px solid #2b2f3a;
  border-radius: 6px;
  padding: 6px 10px;
}
.macro-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #848e9c;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #1e2026;
}
/* The title text always claims the leftover width so every action icon and
   the collapse chevron line up at the right edge — regardless of whether a
   panel has 0, 1, or 2 action buttons next to its chevron. */
.macro-panel-title > :first-child {
  flex: 1;
  min-width: 0;
}
#macro-info-btn,
#nearterm-info-btn { padding: 0 4px; line-height: 1; }
.macro-panel-sub { font-weight: 400; text-transform: none; opacity: .55; font-size: 9px; }
.macro-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 3px 8px;
  margin: 2px 0;
  font-size: 11px;
  border-left: 2px solid transparent;
  transition: border-color .2s ease;
}
.macro-label { color: #848e9c; }
.macro-value { font-weight: 600; color: #eaecef; }
/* Macro / Near-Term panel state colours.
   Aligned with the gauge dial vocabulary (chart.js:772-775, gauge.js:32):
   ORANGE family = sell-side / exit territory / "Sell & Re-buy cycle moment"
   BLUE family   = buy-side / entry territory / "back into crypto moment"
   GREY          = neutral / informational
   These match the chart threshold dots so the dashboard speaks one colour language.
   Applied to BOTH the .macro-value span AND its parent .macro-row so every row
   shows a coloured left-border marker plus coloured value text. */
.macro-value.entry-strong { color: #1d4ed8; }  /* dark blue   — strong entry / very oversold  */
.macro-value.entry        { color: #3b82f6; }  /* blue        — entry territory / cheap       */
.macro-value.neutral      { color: #4e5a6a; }  /* muted grey  — no strong reading             */
.macro-value.caution      { color: #8b5cf6; }  /* purple      — caution / fragile / look closer */
.macro-value.exit         { color: #f59e0b; }  /* amber       — exit territory / sell side    */
.macro-value.exit-strong  { color: #d97706; }  /* dark orange — strong exit / very expensive  */
.macro-row.entry-strong   { border-left-color: #1d4ed8; }
.macro-row.entry          { border-left-color: #3b82f6; }
.macro-row.neutral        { border-left-color: #4e5a6a; }
.macro-row.caution        { border-left-color: #8b5cf6; }
.macro-row.exit           { border-left-color: #f59e0b; }
.macro-row.exit-strong    { border-left-color: #d97706; }

/* ── Dash2 per-section collapse ────────────────────────────── */
.macro-panel[data-collapsible] .macro-panel-title { cursor: pointer; -webkit-user-select: none; user-select: none; }
.dash2-section-toggle {
  background: none;
  border: none;
  color: #eaecef;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.dash2-section-toggle:hover { color: #ffffff; }
.macro-panel.section-collapsed .dash2-section-body { display: none; }
.dash2-section-empty {
  color: #5e6673;
  font-size: 10px;
  padding: 6px 0;
  text-align: center;
  font-style: italic;
}
.dash2-section-list { display: flex; flex-direction: column; gap: 2px; }

/* ── Move Alert History rows ────────────────────────── */
.move-history-summary {
  font-size: 10px;
  color: #848e9c;
  padding: 4px 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #1e2026;
  letter-spacing: 0.02em;
}
.move-history-summary .move-up   { color: #3b82f6; font-weight: 700; }
.move-history-summary .move-down { color: #f59e0b; font-weight: 700; }
.move-history-summary-sep { color: #3a4055; margin: 0 2px; }

.move-history-row {
  display: grid;
  grid-template-columns: 14px 44px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
}
.move-history-row:hover { background: #1a1c22; }
.move-history-dir { text-align: center; font-size: 11px; font-weight: 700; }
.move-history-dir.move-up   { color: #3b82f6; }
.move-history-dir.move-down { color: #f59e0b; }
.move-history-pct   { color: #eaecef; font-weight: 600; }
.move-history-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  color: #848e9c;
  background: #22252d;
  border: 1px solid #2b2f3a;
  border-radius: 8px;
  vertical-align: middle;
}
.move-history-price { color: #848e9c; }
.move-history-time  { color: #5e6673; font-size: 10px; white-space: nowrap; }

/* ── Cycle History + Top-Up Log shared row layout ─────────── */
.cycle-history-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 3px;
}
.cycle-history-row:hover { background: #1a1c22; }
.cycle-history-dir {
  grid-row: 1 / span 2;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.cycle-history-dir.cycle-buy  { color: #0ecb81; }
.cycle-history-dir.cycle-sell { color: #f6465d; }
.cycle-history-prices {
  color: #eaecef;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cycle-history-pct {
  color: #eaecef;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.cycle-history-pct.cycle-win  { color: #0ecb81; }
.cycle-history-pct.cycle-loss { color: #f6465d; }
.cycle-history-meta {
  grid-column: 2 / span 2;
  color: #5e6673;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Win/loss colors used in the Cycle History summary header */
.move-history-summary .cycle-win  { color: #0ecb81; font-weight: 700; }
.move-history-summary .cycle-loss { color: #f6465d; font-weight: 700; }

/* ── Session Stats panel ─────────────────────────────────── */
/* Shared sign coloring for value spans (uses the same palette as
   the trade pills and the cycle rows so the dashboard reads as one piece) */
.session-pos { color: #0ecb81; font-weight: 600; }
.session-neg { color: #f6465d; font-weight: 600; }

/* Multi-button cluster in a macro-panel header (info + reset, etc.) */
.macro-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Market Sentiment staleness ────────────────────── */
.sentiment-stale { opacity: 0.55; font-style: italic; }

/* ── Move alert banner ───────────────────────────── */
/* ── Compact last-trade pills ────────────────────────────── */
.trade-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border-left: 3px solid #2b2f3a;
  background: #14151a;
  margin-bottom: 2px;
  font-size: 12px;
}
.trade-pill.trade-buy  { border-left-color: #0ecb81; }
.trade-pill.trade-sell { border-left-color: #f6465d; }
.trade-pill.trade-none { border-left-color: #2b2f3a; opacity: 0.6; }
.trade-pill-price {
  flex: 1;
  color: #eaecef;
  font-variant-numeric: tabular-nums;
}
.trade-pill-profit {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.trade-pill-age {
  font-size: 10px;
  color: #848e9c;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── PRACTICE mode pill ──────────────────────────── */
.pill-icon-practice {
  font-size: 11px; line-height: 1; opacity: .35;
  transition: opacity .2s; color: #a78bfa;
}
.mode-pill.active-practice,
.mode-trigger.active-practice {
  background: linear-gradient(135deg, #1a1530, #241d40);
  color: #a78bfa;
  box-shadow: 0 0 0 1px #a78bfa66, 0 2px 10px #a78bfa14;
}
.mode-pill.active-practice .pill-icon-practice { opacity: 1; }

/* ── Replay control panel ────────────────────────── */
#replay-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.replay-btn {
  padding: 6px 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  letter-spacing: .04em;
  transition: opacity .15s;
}
.replay-btn:hover { opacity: .85; }
.replay-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.replay-btn-load {
  background: #a78bfa;
  color: #14151a;
}
.replay-load-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.replay-load-row .replay-btn-load { flex: 1; }
.replay-load-spinner {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #a78bfa;
  white-space: nowrap;
}
.replay-load-spinner.active { display: inline-flex; }
.replay-load-spinner::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #a78bfa44;
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: replay-spin .7s linear infinite;
}
@keyframes replay-spin {
  to { transform: rotate(360deg); }
}
.replay-btn-play {
  background: #a78bfa;
  color: #14151a;
}
.replay-btn-step {
  background: #2b2f3a;
  color: #a78bfa;
  border: 1px solid #a78bfa44;
  padding: 6px 10px;
  flex-shrink: 0;
}
.replay-btn-step:hover { background: #383d4a; }
.replay-btn-reset {
  background: #2b2f3a;
  color: #f6465d;
  border: 1px solid #f6465d44;
  padding: 6px 10px;
  flex-shrink: 0;
}
.replay-btn-reset:hover { background: #3a1520; }

/* Speed bar */
#replay-speed-bar {
  display: flex;
  gap: 4px;
}
.speed-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  border: 1px solid #2b2f3a;
  background: #1a1c22;
  color: #5e6673;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.speed-btn:hover { color: #848e9c; border-color: #3a4055; }
.speed-btn.active {
  background: #a78bfa22;
  color: #a78bfa;
  border-color: #a78bfa66;
}

/* Replay progress */
.replay-progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
#replay-progress-text {
  font-size: 10px;
  color: #848e9c;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.replay-progress-track {
  height: 4px;
  background: #2b2f3a;
  border-radius: 2px;
  overflow: hidden;
}
.replay-progress-fill {
  height: 100%;
  width: 0%;
  background: #a78bfa;
  border-radius: 2px;
  transition: width .2s ease;
}

/* ── Practice trade buttons ──────────────────────── */
.practice-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  border: 2px dashed;
  cursor: pointer;
  letter-spacing: .04em;
  transition: opacity .15s, background .15s;
}
.practice-btn:hover { opacity: .85; }
.practice-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.practice-btn-buy {
  background: #0a2b1c;
  color: #0ecb81;
  border-color: #0ecb8166;
}
.practice-btn-buy:hover:not(:disabled) { background: #0d3a22; }
.practice-btn-sell {
  background: #2a0d10;
  color: #f6465d;
  border-color: #f6465d66;
}
.practice-btn-sell:hover:not(:disabled) { background: #3a1520; }

/* Open position indicator */
.practice-open-pos {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0a2b1c;
  border: 1px solid #0ecb8144;
  color: #0ecb81;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Practice session results ────────────────────── */
.practice-session-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.practice-session-total.positive {
  background: #0a2b1c;
  border: 1px solid #0ecb8144;
}
.practice-session-total.negative {
  background: #2a0d10;
  border: 1px solid #f6465d44;
}
.practice-total-label {
  font-size: 10px;
  color: #848e9c;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.practice-total-value {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.practice-session-total.positive .practice-total-value { color: #0ecb81; }
.practice-session-total.negative .practice-total-value { color: #f6465d; }
.practice-total-winrate {
  font-size: 10px;
  color: #848e9c;
  margin-top: 2px;
}

.practice-result-card {
  background: #14151a;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-left: 3px solid #2b2f3a;
}
.practice-result-card.win  { border-left-color: #0ecb81; }
.practice-result-card.loss { border-left-color: #f6465d; }

.practice-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 1px 0;
  color: #c8cbd4;
}

/* ── Sell-Signal Gauge ── */
#gauge-container {
  padding: 2px 6px 0;
  border-bottom: 1px solid #3a4055;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom: 0;
}
#gauge-breakdown {
  max-height: 160px;
  overflow-y: auto;
  padding: 2px 4px;
}
#gauge-breakdown > div:hover {
  background: #1e222d;
  border-radius: 3px;
}

/* ── Sell-Signal Alert Banner ── */
.sell-signal-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 9999;
  min-width: 320px;
  max-width: 440px;
  background: linear-gradient(135deg, #1e222d 60%, #2b2f3a 100%);
  border: 2px solid #ffa726;
  border-radius: 10px;
  padding: 14px 20px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(255, 167, 38, .25);
  animation: ss-slide-in .45s ease forwards;
}
.sell-signal-banner.ss-hide {
  animation: ss-slide-out .35s ease forwards;
}
@keyframes ss-slide-in  { to { transform: translateX(-50%) translateY(0); } }
@keyframes ss-slide-out { to { transform: translateX(-50%) translateY(-140%); } }
.ss-icon  { font-size: 28px; flex-shrink: 0; }
.ss-body  { flex: 1; }
.ss-title { font-weight: 700; font-size: 14px; color: #ffa726; }
.ss-msg   { font-size: 12px; color: #c8cbd4; margin-top: 2px; }
.ss-dismiss {
  position: absolute;
  top: 6px; right: 10px;
  background: none;
  border: none;
  color: #848e9c;
  font-size: 16px;
  cursor: pointer;
}
.practice-result-label {
  color: #848e9c;
  font-weight: 600;
}
.practice-pnl-win  { color: #0ecb81; font-weight: 700; }
.practice-pnl-loss { color: #f6465d; font-weight: 700; }

.practice-result-empty {
  font-size: 11px;
  color: #5e6673;
  text-align: center;
  padding: 14px 8px;
}

/* ── Practice mode: hide live-bot UI so Practice is fully isolated ────── */
/* Practice is a client-side view. The LIVE cycle keeps running on the      */
/* server — but its UI is hidden here so Practice is a distraction-free     */
/* sandbox. Users can still see live events via Telegram alerts.            */
body.practice-mode #last-trades-title { display: none; }
body.practice-mode #last-trade-card  { display: none; }
body.practice-mode #last-sell-card   { display: none; }
body.practice-mode #header-interval-label { display: none; }
body.practice-mode #cycle-buttons    { display: none !important; }
body.practice-mode #cycle-mode-row   { display: none !important; }
body.practice-mode #clear-cycle-btn  { display: none !important; }
body.practice-mode #cycle-status-row { display: none !important; }
body.practice-mode #cycle-action-row { display: none !important; }
body.practice-mode #live-topup-row   { display: none !important; }
body.practice-mode #live-topup-status { display: none !important; }
/* Keep bot-log visible — live bot log drawer is still accessible if user opens it */

/* Practice cycle badge shares styling with real cycle badge */
#practice-cycle-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Practice stop button */
.practice-btn-stop {
  width: 100%;
  background: #2b2f3a;
  color: #f6465d;
  border: 1px dashed #f6465d66;
  font-weight: 700;
}

.info-phase {
  background: #13151a;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.info-phase-label {
  font-size: 11px;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* ── Move Alert Info Modal ────────────────────────── */
#move-info-modal,
#gauge-info-modal,
#macro-info-modal,
#nearterm-info-modal,
#movehistory-info-modal,
#sentiment-info-modal,
#health-info-modal,
#session-info-modal,
#cyclehistory-info-modal,
#topuplog-info-modal,
#watchlist-info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#move-info-modal-box,
.info-modal-box {
  background: #1e2026;
  border: 1px solid #f0b90b55;
  border-radius: 12px;
  width: 760px;
  max-width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
#move-info-modal-header,
.info-modal-header {
  background: #1a1508;
  border-bottom: 1px solid #f0b90b44;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #f0b90b;
  position: sticky;
  top: 0;
}
#move-info-modal-close,
#gauge-info-modal-close,
#macro-info-modal-close,
#nearterm-info-modal-close,
#movehistory-info-modal-close,
#sentiment-info-modal-close,
#health-info-modal-close,
#session-info-modal-close,
#cyclehistory-info-modal-close,
#topuplog-info-modal-close,
#watchlist-info-modal-close {
  background: none;
  border: none;
  color: #848e9c;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
#move-info-modal-close:hover,
#gauge-info-modal-close:hover,
#macro-info-modal-close:hover,
#nearterm-info-modal-close:hover,
#movehistory-info-modal-close:hover,
#sentiment-info-modal-close:hover,
#health-info-modal-close:hover,
#session-info-modal-close:hover,
#cyclehistory-info-modal-close:hover,
#topuplog-info-modal-close:hover,
#watchlist-info-modal-close:hover { color: #eaecef; }
#move-info-modal-body,
.info-modal-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12px;
  color: #c8cbd4;
  line-height: 1.6;
}
#move-info-modal-body p,
.info-modal-body p { margin: 0; }
#move-info-modal-body strong,
.info-modal-body strong { color: #eaecef; }
.move-scenario {
  background: #0d1117;
  border: 1px solid #2b2f3a;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.move-scenario-title {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.move-scenario-win   { background: #0a1f14; color: #0ecb81; border-bottom: 1px solid #0ecb8133; }
.move-scenario-neutral { background: #1a1508; color: #f0b90b; border-bottom: 1px solid #f0b90b33; }
.move-scenario-safe  { background: #13151a; color: #848e9c; border-bottom: 1px solid #2b2f3a; }
.move-scenario-anchor { background: #1a0d18; color: #ff69b4; border-bottom: 1px solid #ff69b433; }
.move-scenario-threshold { background: #1a1508; color: #f0b90b; border-bottom: 1px solid #f0b90b33; }
.move-scenario-reset { background: #1a0d0d; color: #f6465d; border-bottom: 1px solid #f6465d33; }
.move-section-label {
  color: #f0b90b;
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0 2px;
}
.move-key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 4px 0;
}
.move-key-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #c8cbd4;
}
.move-key-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.move-bar-demo {
  background: #2b2f3a;
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
  position: relative;
}
.move-bar-demo-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.move-bar-demo-label {
  position: absolute;
  right: 6px;
  top: 0;
  line-height: 14px;
  font-size: 9px;
  color: #eaecef;
  font-weight: 600;
}
.move-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #0d1117;
}
.move-scenario-desc {
  padding: 10px 14px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  border-top: 1px solid #2b2f3a;
}

/* ── Cycle Settings info modal ── */
#cycle-info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ZigZag info modal ── */
#zz-info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#zz-info-modal-box {
  background: #1e2026;
  border: 1px solid #0ecb8155;
  border-radius: 12px;
  width: 760px;
  max-width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
#zz-info-modal-header {
  background: #0a1f14;
  border-bottom: 1px solid #0ecb8144;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #0ecb81;
  position: sticky;
  top: 0;
  z-index: 1;
}
#zz-info-modal-close {
  background: none;
  border: none;
  color: #848e9c;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
#zz-info-modal-close:hover { color: #eaecef; }
#zz-info-modal-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12px;
  color: #c8cbd4;
  line-height: 1.6;
}
#zz-info-modal-body p { margin: 0; }
#zz-info-modal-body strong { color: #eaecef; }

/* Practice result card header (buy type + duration) */
.practice-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 6px;
}
.practice-buy-type {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.3px;
}
.buy-type-hunter { color: #0ecb81; background: #0a2b1c; border: 1px solid #0ecb8144; }
.buy-type-cap    { color: #f6465d; background: #2a0d10; border: 1px solid #f6465d44; }
.buy-type-lock   { color: #a78bfa; background: #1a1540; border: 1px solid #a78bfa44; }
.practice-duration { font-size: 10px; color: #848e9c; white-space: nowrap; }

/* ── Exchange dropdown ──────────────────────────────── */
#exchange-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:170px;
  background:#1e2026;
  border:1px solid #2b2f3a;
  border-radius:10px;
  padding:6px 0;
  box-shadow:0 6px 24px rgba(0,0,0,0.6);
  z-index:999;
}
#exchange-dropdown.open{display:block;}
.exchange-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  cursor:pointer;
  font-size:13px;
  color:#eaecef;
  transition:background .12s;
}
.exchange-option:hover{background:#2b2f3a;}
.exchange-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:transparent;
  flex-shrink:0;
}
.exchange-option.active .exchange-dot{background:#0ecb81;}
.exchange-check{
  margin-left:auto;
  color:#0ecb81;
  font-size:14px;
  display:none;
}
.exchange-option.active .exchange-check{display:inline;}

/* ── API key tabs ───────────────────────────────────── */
#api-key-tabs{
  display:flex;
  gap:4px;
  margin-bottom:10px;
  border-bottom:1px solid #2b2f3a;
  padding-bottom:8px;
}
.api-key-tab{
  flex:1;
  padding:5px 0;
  font-size:11px;
  font-weight:600;
  text-align:center;
  background:transparent;
  color:#848e9c;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  transition:all .15s;
}
.api-key-tab:hover{color:#eaecef;background:#2b2f3a;}
.api-key-tab.active{
  color:#f0b90b;
  background:#2b2f3a;
  border-color:#f0b90b44;
}

/* ── Exchange switch warning modal ──────────────────── */
#exchange-switch-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.80);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}
#exchange-switch-modal-box{
  background:#1e2026;
  border:1px solid #f0b90b66;
  border-radius:12px;
  width:400px;
  max-width:94vw;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);
  overflow:hidden;
}
#exchange-switch-modal-header{
  background:#2a1f00;
  border-bottom:1px solid #f0b90b44;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  color:#f0b90b;
}
#exchange-switch-modal-body{
  padding:18px;
  color:#eaecef;
  font-size:14px;
  line-height:1.5;
}
#exchange-switch-modal-body p{margin:0;}
#exchange-switch-modal-actions{
  padding:12px 18px 18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.exchange-switch-btn{
  padding:8px 22px;
  font-size:13px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  border:1px solid #2b2f3a;
  background:#2b2f3a;
  color:#eaecef;
  transition:background .15s;
}
.exchange-switch-btn:hover{background:#383d4a;}
.exchange-switch-btn--go{
  background:#f0b90b;
  color:#181a20;
  border-color:#f0b90b;
}
.exchange-switch-btn--go:hover{background:#d4a30a;}

/* ── Immediate action warning modal (mid-drag slider commit guard) ── */
#immediate-action-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.80);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}
#immediate-action-modal-box{
  background:#1e2026;
  border:1px solid #f0b90b66;
  border-radius:12px;
  width:440px;
  max-width:94vw;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);
  overflow:hidden;
}
#immediate-action-modal-header{
  background:#2a1f00;
  border-bottom:1px solid #f0b90b44;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  color:#f0b90b;
}
#immediate-action-modal-body{
  padding:18px;
  color:#eaecef;
  font-size:14px;
  line-height:1.5;
}
#immediate-action-modal-body p{margin:0;}
#immediate-action-modal-actions{
  padding:12px 18px 18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ── Per-Cycle Live Editor (Practice mode) ────────────────────────────── */
.cycle-badge{
  cursor:pointer;
  transform-box:fill-box;                /* scale around badge centre, not 0,0 */
  transform-origin:center;
  transition:transform 0.12s ease, filter 0.12s ease;
}
.cycle-badge:hover{
  transform:scale(1.18);
  filter:drop-shadow(0 0 4px #38bdf8);
}
.cycle-preview-label{
  position:absolute;
  pointer-events:none;
  padding:1px 5px;
  border-radius:3px;
  background:rgba(236,72,153,0.85);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  font:600 10px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:0.2px;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
  z-index:26;
  transform:translateY(-50%);            /* vertical-centre on the y, horizontal anchor set per pill */
}
.cycle-preview-label.left{
  transform:translate(-100%, -50%);       /* pill ends just before the entry dot */
  margin-left:-9px;
}
.cycle-preview-label.right{
  margin-left:9px;                        /* pill starts just after the exit dot */
}
.cycle-nudge-hint{
  font:10px ui-monospace, Menlo, Consolas, monospace;
  color:#848e9c;
  padding:3px 2px 0;
  min-height:1em;                        /* hold space when blank so panel doesn't jump */
}
.cycle-pnl-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 2px;
  font-size:12px;
}
.cycle-pnl-lbl{
  color:#848e9c;
  flex:0 0 auto;
  min-width:56px;
}
.cycle-pnl-val{
  flex:1 1 auto;
  text-align:right;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cycle-pnl-val.positive{ color:#0ecb81; }
.cycle-pnl-val.negative{ color:#ef5350; }
.cycle-pnl-dur{
  flex:0 0 62px;
  text-align:right;
  color:#848e9c;
  font:400 11px ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
}
.cycle-pnl-hdr{
  padding-top:0;
  padding-bottom:2px;
}
.cycle-pnl-dur-hdr{
  color:#d8dde6;
  /* Match the duration VALUES: same weight (normal), same size, same
     monospace, same tabular-nums. Nothing special about this header —
     it's just a column label that needs to line up with the data. */
  font:400 11px ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
}

/* ── AI Coach (StackBot Coach) — header button + slide-out panel ─────────── */
#ai-coach-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  background:#1a1c22;color:#d8dde6;
  border:1px solid #2b2f3a;border-radius:6px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
#ai-coach-btn:hover{background:#23252e;border-color:#3a3f4d;color:#eaecef;}
#ai-coach-btn.open{background:#1f2730;border-color:#3a4a5d;color:#7ec3ff;}
.ai-coach-btn-emoji{font-size:14px;line-height:1;}
.ai-coach-btn-label{line-height:1.25;}

#ai-coach-panel{
  position:fixed;top:0;right:0;height:100vh;width:380px;
  background:#1e2026;
  border-left:1px solid #2b2f3a;
  box-shadow:-8px 0 24px rgba(0,0,0,0.4);
  z-index:9000;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s ease-out;
  font-family:inherit;
}
#ai-coach-panel.open{transform:translateX(0);}

#ai-coach-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid #2b2f3a;
  background:#16181d;
}
#ai-coach-titlewrap{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
#ai-coach-title{
  color:#eaecef;font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
}
#ai-coach-title .ai-coach-emoji{font-size:18px;}
#ai-coach-subtitle{color:#848e9c;font-size:11px;}
#ai-coach-quota{
  display:block;
  font-size:10px;
  color:#5a6573;
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}
#ai-coach-quota.limit-low{color:#f0b90b;}
#ai-coach-quota.limit-zero{color:#f5465c;font-weight:600;}
#ai-coach-close{
  background:transparent;border:0;color:#848e9c;
  font-size:22px;line-height:1;cursor:pointer;padding:0 4px;
  transition:color .15s;
}
#ai-coach-close:hover{color:#eaecef;}

/* Setup panel (no API key yet) */
#ai-coach-setup{
  padding:16px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  color:#d8dde6;font-size:13px;line-height:1.5;
}
.ai-coach-setup-intro{margin:0 0 4px 0;}
#ai-coach-getkey-link{
  color:#7ec3ff;text-decoration:none;font-size:12px;
  margin-bottom:6px;
}
#ai-coach-getkey-link:hover{text-decoration:underline;}
.ai-coach-field-label{
  display:block;font-size:11px;color:#848e9c;
  margin-top:6px;margin-bottom:2px;
}
#ai-coach-keyinput,
#ai-coach-model{
  width:100%;padding:7px 9px;font-size:12px;
  background:#181a20;color:#eaecef;
  border:1px solid #2a2e39;border-radius:4px;
  font-family:inherit;
}
#ai-coach-keyinput:focus,
#ai-coach-model:focus{outline:none;border-color:#3a4a5d;}
#ai-coach-save-key{
  margin-top:10px;padding:8px 12px;
  background:#0ecb81;color:#0a1f17;border:0;border-radius:4px;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s;
}
#ai-coach-save-key:hover{background:#13e08f;}
#ai-coach-clear-key{
  margin-top:6px;padding:6px 10px;
  background:transparent;color:#848e9c;
  border:1px solid #2a2e39;border-radius:4px;
  font-size:11px;cursor:pointer;
}
#ai-coach-clear-key:hover{color:#f5465c;border-color:#f5465c;}
#ai-coach-save-status{
  font-size:11px;margin:6px 0 0 0;
}
#ai-coach-save-status.ok{color:#0ecb81;}
#ai-coach-save-status.err{color:#f5465c;}

/* Chat view */
#ai-coach-chat{
  flex:1;display:flex;flex-direction:column;min-height:0;
}
#ai-coach-messages{
  flex:1;overflow-y:auto;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}

/* Empty state + suggestion chips */
#ai-coach-empty{display:flex;flex-direction:column;gap:10px;color:#d8dde6;}
.ai-coach-empty-title{margin:0;font-size:14px;color:#eaecef;font-weight:600;}
.ai-coach-empty-sub{margin:0;font-size:12px;color:#848e9c;line-height:1.5;}
#ai-coach-chips{
  display:flex;flex-direction:column;gap:6px;margin-top:6px;
}
.ai-coach-chip{
  text-align:left;
  padding:8px 12px;font-size:12px;
  background:#181a20;color:#d8dde6;
  border:1px solid #2a2e39;border-radius:6px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  font-family:inherit;
}
.ai-coach-chip:hover{background:#23252e;border-color:#3a4a5d;color:#7ec3ff;}

/* Message bubbles */
.ai-coach-msg{
  display:flex;flex-direction:column;gap:2px;max-width:100%;
}
.ai-coach-msg-role{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;color:#848e9c;letter-spacing:.04em;text-transform:uppercase;
}
.ai-coach-msg-copy{
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:11px;
  padding:1px 4px;
  color:#5a6573;
  opacity:0.55;
  transition:opacity .15s,color .15s;
  line-height:1;
  border-radius:3px;
  font-family:inherit;
}
.ai-coach-msg-copy:hover{opacity:1;color:#eaecef;}
.ai-coach-msg-copy.copied{opacity:1;color:#0ecb81;}
.ai-coach-msg-retry{
  display:inline-block;
  margin-left:4px;
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  background:#1f2932;
  color:#7ec3ff;
  border:1px solid #2a3845;
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,border-color .15s,color .15s;
}
.ai-coach-msg-retry:hover{background:#23323e;border-color:#3a4a5d;color:#a8d6ff;}
.ai-coach-msg-body{
  padding:10px 12px;border-radius:8px;
  font-size:13px;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;
}
.ai-coach-msg.user{align-items:flex-end;}
.ai-coach-msg.user .ai-coach-msg-body{
  background:#1f2932;color:#eaecef;
  border:1px solid #2a3845;
  max-width:92%;
}
.ai-coach-msg.assistant .ai-coach-msg-body{
  background:#181a20;color:#d8dde6;
  border:1px solid #2a2e39;
}
.ai-coach-msg.error .ai-coach-msg-body{
  background:#2a1416;color:#f5465c;
  border:1px solid #5a2a30;
}
/* Markdown elements rendered inside assistant bubbles */
.ai-coach-msg-body strong{font-weight:700;color:#eaecef;}
.ai-coach-msg-body em{font-style:italic;}
.ai-coach-msg-body code{
  background:#2a2e39;color:#eaecef;
  padding:1px 5px;border-radius:3px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:0.92em;
}
.ai-coach-msg-body p{margin:0 0 8px 0;}
.ai-coach-msg-body p:last-child{margin-bottom:0;}
.ai-coach-msg-body h3,
.ai-coach-msg-body h4,
.ai-coach-msg-body h5,
.ai-coach-msg-body h6{
  margin:10px 0 4px 0;
  font-weight:700;
  color:#eaecef;
  line-height:1.3;
}
.ai-coach-msg-body h3{font-size:14px;}
.ai-coach-msg-body h4{font-size:13px;}
.ai-coach-msg-body h5,
.ai-coach-msg-body h6{font-size:12px;color:#d8dde6;}
.ai-coach-msg-body h3:first-child,
.ai-coach-msg-body h4:first-child,
.ai-coach-msg-body h5:first-child,
.ai-coach-msg-body h6:first-child{margin-top:0;}
.ai-coach-msg-body hr{
  border:0;
  border-top:1px solid #2b2f3a;
  margin:10px 0;
}
.ai-coach-msg-body ul,
.ai-coach-msg-body ol{
  margin:6px 0;
  padding-left:20px;
}
.ai-coach-msg-body li{margin:3px 0;}
.ai-coach-msg-body li::marker{color:#848e9c;}
.ai-coach-msg-cursor{
  display:inline-block;width:6px;height:14px;
  background:#7ec3ff;margin-left:2px;
  animation:ai-coach-blink 1s step-end infinite;
  vertical-align:text-bottom;
}
.ai-coach-capturing{
  color:#848e9c;
  font-size:12px;
  font-style:italic;
  margin-right:4px;
}
.ai-coach-chart-badge{
  display:inline-block;
  margin-left:8px;
  padding:1px 6px;
  font-size:10px;
  background:#1f2932;
  color:#7ec3ff;
  border:1px solid #2a3845;
  border-radius:4px;
  vertical-align:middle;
  cursor:default;
}
@keyframes ai-coach-blink{50%{opacity:0;}}

/* Footer / input */
#ai-coach-footer{
  border-top:1px solid #2b2f3a;background:#16181d;
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;
}
#ai-coach-input{
  width:100%;padding:8px 10px;
  background:#181a20;color:#eaecef;
  border:1px solid #2a2e39;border-radius:6px;
  font-size:13px;line-height:1.5;font-family:inherit;
  resize:vertical;min-height:38px;max-height:140px;
}
#ai-coach-input:focus{outline:none;border-color:#3a4a5d;}
#ai-coach-input:disabled{opacity:0.6;cursor:not-allowed;}
#ai-coach-actions{
  display:flex;gap:6px;align-items:center;
}
#ai-coach-newchat,
#ai-coach-settings{
  background:transparent;color:#848e9c;
  border:1px solid #2a2e39;border-radius:4px;
  padding:6px 10px;font-size:11px;cursor:pointer;
  font-family:inherit;
  transition:color .15s,border-color .15s;
}
#ai-coach-newchat:hover,
#ai-coach-settings:hover{color:#eaecef;border-color:#3a4a5d;}
#ai-coach-settings{padding:6px 8px;font-size:13px;}
#ai-coach-send{
  margin-left:auto;
  padding:7px 14px;font-size:12px;font-weight:700;
  background:#0ecb81;color:#0a1f17;
  border:0;border-radius:4px;cursor:pointer;
  font-family:inherit;
  transition:background .15s;
}
#ai-coach-send:hover{background:#13e08f;}
#ai-coach-send:disabled{
  background:#2a3a32;color:#5a8470;cursor:not-allowed;
}
#ai-coach-subtitle.low{color:#f0b90b;}
#ai-coach-subtitle.critical{color:#f6465d;}