/* ═══════════════════════════════════════════════════════════════════════════
   Chase Bot · Light-first Dashboard
   IBM Plex Sans (body) + IBM Plex Mono (numbers) · semantic green/red/amber palette
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #f5f5f9;
  --panel:     #ffffff;
  --panel-2:   #f8f8fc;
  --panel-3:   #f0f0f6;
  --row-div:   #f3f3f7;
  --hd-div:    #eeeeF4;

  --border:    #e8e8f0;
  --border-hi: #dddde8;

  --text:      #1a1a2e;
  --text-2:    #333344;
  --body:      #666677;
  --muted:     #9999aa;
  --dim:       #bbbbcc;

  --readable:    #1a1a2e;
  --readable-hi: #000011;

  --green:     #43B049;
  --green-bg:  #edfaee;
  --green-bd:  #b4e8b8;
  --red:       #C5281C;
  --red-2:     #C5281C;
  --red-3:     #a02116;
  --red-bg:    #fef2f2;
  --red-bd:    #fecaca;
  --amber:     #d97706;
  --amber-2:   #b45309;
  --amber-bg:  #fffbeb;
  --amber-bd:  #fde68a;
  --slate:     #475569;
  --indigo:    #7c3aed;
  --indigo-bg: #f5f3ff;
  --indigo-bd: #ddd6fe;
  --sky:       #2563eb;
  --sky-bg:    #eff6ff;
  --sky-bd:    #bfdbfe;

  --ok-bg:     #edfaee;
  --ok-bd:     #b4e8b8;
  --ok-text:   #43B049;

  --r-card:  10px;
  --r-chip:   6px;
  --r-tag:    4px;
  --r-input:  6px;
  --gap:    10px;
  --pad-card: 13px;
  --pad-row:   7px 13px;
  --pad-hd:   10px 13px;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:        #000000;
  --panel:     #000000;
  --panel-2:   #000000;
  --panel-3:   #0a0a0a;
  --row-div:   #111111;
  --hd-div:    #111111;
  --border:    #1a1a1a;
  --border-hi: #222222;
  --text:      #e2e2e6;
  --text-2:    #ccccdd;
  --body:      #888899;
  --muted:     #555566;
  --dim:       #666677;
  --readable:    #e2e2e6;
  --readable-hi: #ffffff;
  --green:     #CCFF00;
  --green-bg:  #1a1e00;
  --green-bd:  #2d3300;
  --red:       #F03C1E;
  --red-2:     #F03C1E;
  --red-3:     #f5614a;
  --red-bg:    #200a08;
  --red-bd:    #3d1510;
  --amber:     #f59e0b;
  --amber-2:   #fbbf24;
  --amber-bg:  #15120a;
  --amber-bd:  #2a1f00;
  --slate:     #94a3b8;
  --indigo:    #818cf8;
  --indigo-bg: #1a1a30;
  --indigo-bd: #2a2a50;
  --sky:       #7dd3fc;
  --sky-bg:    #0a1a28;
  --sky-bd:    #0f2a40;
  --ok-bg:     #141800;
  --ok-bd:     #252b00;
  --ok-text:   #CCFF00;
}

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

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 21px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono,
.ltp,
.pnl,
.stat-value,
.lvl-value,
.kv-val.mono,
.chip-value,
.log-ts,
.tooltip-value,
.pnl-hero,
.num-amber,
.num-green,
.num-red {
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67, 176, 73, 0.5); }
  60%       { box-shadow: 0 0 0 5px rgba(67, 176, 73, 0); }
}
html[data-theme="dark"] .live-dot:not(.dot-off) {
  animation: dot-glow-dark 2.4s ease-out infinite;
}
@keyframes dot-glow-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0.5); }
  60%       { box-shadow: 0 0 0 5px rgba(204, 255, 0, 0); }
}
@keyframes ltp-flash {
  0%   { color: var(--text-2); }
  30%  { color: var(--green); }
  100% { color: var(--text-2); }
}
@keyframes row-enter {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pnl-pop {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.04); }
}
@keyframes pnl-flip-blink {
  0%, 100% { opacity: 1; }
  20%, 60% { opacity: 0.18; }
  40%, 80% { opacity: 1; }
}
@keyframes end-dot-blink {
  0%, 100% { r: 5;   opacity: 1;   }
  50%       { r: 7;   opacity: 0.55; }
}
@keyframes end-dot-ring {
  0%   { r: 6;  opacity: 0.55; }
  100% { r: 15; opacity: 0;    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* NAVBAR (44 px)                                                          */
/* ═══════════════════════════════════════════════════════════════════════ */
.navbar {
  height: 44px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.nav-left  { display: flex; align-items: center; gap: 12px; }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-icon {
  color: var(--green);
  flex-shrink: 0;
}
.nav-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
}
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-bg); border: 1px solid var(--green-bd);
  border-radius: 5px; padding: 3px 8px;
  font-size: 14px; color: var(--green); font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.live-badge.live-badge-off {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: dot-glow 2.4s ease-out infinite;
}
.live-dot.dot-off {
  background: var(--muted);
  animation: none;
}
.nav-symbol {
  font-size: 16px;
  color: var(--muted);
}
.price-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-chip); padding: 3px 10px;
}
.chip-label { font-size: 14px; color: var(--muted); }
.chip-value { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--text); }
.ltp-flash { animation: ltp-flash 0.35s ease; }

.nav-btn {
  height: 28px; padding: 0 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-2);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.nav-btn:hover {
  border-color: var(--border-hi); color: var(--readable-hi);
  transform: translateY(-1px);
}
.nav-btn-icon {
  width: 28px;
  padding: 0;
  font-size: 18px;
  justify-content: center;
}
.nav-btn:disabled,
.nav-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
}
.nav-btn:disabled:hover,
.nav-btn[disabled]:hover {
  border-color: var(--border);
  color: var(--muted);
  transform: none;
}
#loginBtn:not(:disabled):not([hidden]) {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  font-weight: 700;
}
#loginBtn:not(:disabled):not([hidden]):hover {
  background: #369140;
  border-color: #369140;
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* STATUS BAR (≈32 px)                                                     */
/* ═══════════════════════════════════════════════════════════════════════ */
.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 18px;
  background: var(--ok-bg);
  border-bottom: 1px solid var(--ok-bd);
  color: var(--ok-text);
  font-size: 16px;
}
.status-bar.status-info  { background: var(--sky-bg); border-color: var(--sky-bd); color: var(--sky); }
.status-bar.status-error { background: var(--red-bg); border-color: var(--red-bd); color: var(--red-2); }
.status-bar.status-bar-warn { background: var(--amber-bg); border-color: var(--amber-bd, var(--border-hi)); color: var(--amber-2); animation: none; }
.status-icon { font-weight: 700; }
.status-bar.status-info  .status-icon::before { content: "•"; }
.status-bar.status-error .status-icon::before { content: "!"; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* ACTIVE TRADE ALERT                                                      */
/* ═══════════════════════════════════════════════════════════════════════ */
.active-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 16px 0;
  padding: 11px 16px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
}
html[data-theme="dark"] .active-alert {
  background: rgba(17,17,22,0.85);
}
.alert-icon {
  font-size: 23px;
  font-weight: 700;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.alert-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.alert-eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 600;
}
.alert-line {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}
.alert-chip {
  padding: 4px 9px;
  border-radius: var(--r-tag);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

/* ── Alert triggers (IDLE: next trigger levels) ──────────────────────── */
.alert-triggers {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.alert-trig-divider {
  width: 1px; height: 28px;
  background: var(--border); flex-shrink: 0;
}
.alert-trig-content {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.alert-trig-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.trig-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  padding: 3px 10px; border-radius: 20px; border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trig-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.trig-long  { background: var(--green-bg); color: var(--green);  border-color: var(--green-bd); }
.trig-short { background: var(--red-bg);   color: var(--red-2);  border-color: var(--red-bd); }

/* ── Alert execute buttons (right corner of active-alert bar) ────────────── */
.alert-exec-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.alert-exec-btn {
  height: 28px;
  padding: 0 10px;
  background: var(--panel-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-chip);
  color: var(--muted);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.38;
  white-space: nowrap;
}
.alert-exec-btn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}
/* Entry button — green for long, red for short */
.alert-exec-btn.exec-green {
  background: var(--green-bg);
  border-color: var(--green-bd);
  color: var(--green);
}
.alert-exec-btn.exec-green:hover:not(:disabled) {
  background: var(--green-bg);
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.alert-exec-btn.exec-red {
  background: var(--red-bg);
  border-color: var(--red-bd);
  color: var(--red-2);
}
.alert-exec-btn.exec-red:hover:not(:disabled) {
  background: var(--red-bg);
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* SL button — amber */
.alert-exec-btn.exec-amber {
  background: var(--amber-bg);
  border-color: var(--amber-bd);
  color: var(--amber-2);
}
.alert-exec-btn.exec-amber:hover:not(:disabled) {
  background: var(--amber-bg);
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.alert-idle    .alert-icon { color: var(--muted); }
.alert-idle    .alert-line { color: var(--muted); }
.alert-pending .alert-icon { color: var(--amber); }
.alert-pending .alert-line { color: var(--amber-2); }
.alert-pending .alert-chip { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.alert-long    .alert-icon { color: var(--green); }
.alert-long    .alert-line { color: var(--green); }
.alert-long    .alert-chip { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.alert-short   .alert-icon { color: var(--red-2); }
.alert-short   .alert-line { color: var(--red-3); }
.alert-short   .alert-chip { background: var(--red-bg); color: var(--red-2); border-color: var(--red-bd); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* GRID                                                                    */
/* ═══════════════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  gap: 14px;
}
.grid-top {
  grid-template-columns: 1fr 290px 1fr;
  padding: 14px 16px;
}
.grid-bottom {
  grid-template-columns: 1fr 290px 1fr;
  padding: 0 16px 16px;
}
.grid-bottom > .span2 { grid-column: 1 / 3; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* CARD                                                                    */
/* ═══════════════════════════════════════════════════════════════════════ */
.card {
  background: rgba(255,255,255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
html[data-theme="dark"] .card {
  background: rgba(17,17,22,0.88);
}
.card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-hd);
  border-bottom: 1px solid var(--hd-div);
}
.hd-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
}
.hd-meta {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.card-body { padding: 16px; }
.card-body-tight { padding: 0; }
.card-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hd-div);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* EQUITY CURVE                                                            */
/* ═══════════════════════════════════════════════════════════════════════ */
.eq-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hd-div);
}
.eq-stat { display: flex; flex-direction: column; gap: 5px; }
.vdiv {
  width: 1px;
  height: 32px;
  background: var(--border);
}
.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.stat-value.gain { color: var(--green); }
.stat-value.loss { color: var(--red-2); }
.stat-lg { font-size: 31px; font-weight: 700; letter-spacing: -0.02em; }
.stat-md { font-size: 23px; }
.stat-sm { font-size: 27px; font-weight: 600; }

.stat-value.gain,
.stat-value.pnl-positive { color: var(--green); }
.stat-value.loss,
.stat-value.pnl-negative { color: var(--red); }
.stat-value.pnl-flat     { color: var(--muted); }

.nav-chart-wrap {
  position: relative;
  width: 100%;
  height: 230px;
}
.nav-chart {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── NAV panel (top) ──── */
.nav-line {
  fill: none;
  stroke: #016FD0;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="dark"] .nav-line { stroke: #148DEA; }
.nav-fill { fill: url(#nav-grad); }
.nav-end-dot { fill: var(--green); }
.nav-end-dot.positive { fill: var(--green); }
.nav-end-dot.negative { fill: var(--red); }
.nav-end-dot.active-pulse { animation: end-dot-blink 1.4s ease-in-out infinite; }
.nav-end-dot-ring { fill: none; stroke: var(--green); stroke-width: 2; pointer-events: none; }
.nav-end-dot-ring.negative { stroke: var(--red); }
.nav-end-dot-ring.active-pulse { animation: end-dot-ring 1.4s ease-out infinite; }

/* ── Drawdown panel (bottom) ──── */
.dd-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dd-fill { fill: url(#dd-grad); }
.dd-zero {
  stroke: var(--border-hi);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.dd-zero-tick {
  stroke: var(--red);
  stroke-width: 1.5;
}
.dd-end-dot { fill: var(--red); }

/* Hover crosshair */
.nav-hover-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.nav-hover-dot {
  r: 4;
  stroke: var(--bg);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.nav-overlay { cursor: crosshair; }

.nav-empty {
  fill: var(--muted);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
}

.nav-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--panel-2);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translate(-50%, calc(-100% - 10px));
  z-index: 5;
  transition: opacity 0.12s ease, left 0.05s linear;
}
.nav-tooltip[hidden] { display: none; }
.nav-tooltip .tooltip-value { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.nav-tooltip .tooltip-label { font-size: 14px; color: var(--muted); margin-top: 2px; }
.nav-tooltip .tooltip-value.pnl-positive { color: var(--green); }
.nav-tooltip .tooltip-value.pnl-negative { color: var(--red); }

/* Legend */
.nav-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.legend-nav { background: #016FD0; }
html[data-theme="dark"] .legend-nav { background: #148DEA; }
.legend-dd  { background: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* EMA LEVELS                                                              */
/* ═══════════════════════════════════════════════════════════════════════ */
.lvl-list { display: flex; flex-direction: column; }

.lvl-row {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: 10px; align-items: center;
  padding: 7px 13px;
  border-bottom: 1px solid var(--row-div);
  border-left: 2px solid transparent;
  font-size: 14px; color: var(--muted);
  transition: background 0.2s ease;
}
.lvl-row.active {
  background: var(--amber-bg);
  border-left: 2px solid var(--amber);
  padding-left: 11px;
}
.lvl-row.active .lvl-name   { color: var(--amber); font-weight: 600; }
.lvl-row.active .lvl-value  { color: var(--amber); font-weight: 600; }
.lvl-row.active .lvl-bar-fill { background: var(--amber); }
.lvl-name {
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--text-2);
  font-weight: 500;
}
.lvl-delta {
  font-size: 13px;
  color: var(--dim);
  display: block;
}
.lvl-bar {
  height: 3px;
  background: var(--panel-3);
  border-radius: 2px;
  overflow: hidden;
}
.lvl-bar-fill {
  display: block;
  height: 100%;
  background: var(--text-2);
  opacity: 0.4;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.lvl-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  text-align: right;
  color: var(--text-2);
}

.lvl-foot {
  border-top: 1px solid var(--hd-div);
  padding: 4px 0;
}
.lvl-foot-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 13px;
  font-size: 14px;
}
.lvl-foot-row .kv-key { color: var(--muted); }
.lvl-foot-row .kv-val { font-family: 'IBM Plex Mono', monospace; color: var(--text-2); }
.lvl-foot-divider { height: 1px; background: var(--hd-div); margin: 2px 13px; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* POSITION CARD                                                           */
/* ═══════════════════════════════════════════════════════════════════════ */
.pos-hd {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
}
.pos-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.pos-badge.long  { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.pos-badge.short { background: var(--red-bg); color: var(--red-2); border-color: var(--red-bd); }
.pos-sl-text {
  text-align: right;
  font-size: 14px;
  color: var(--muted);
}
.pos-sl-text .mono { color: var(--red-2); font-weight: 600; }

.pnl-block {
  text-align: center;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--hd-div);
}
.pnl-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.pnl-hero {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-2);
  transition: color 0.3s ease;
}
.pnl-hero.pnl-positive { color: var(--green); animation: pnl-pop 0.3s ease; }
.pnl-hero.pnl-negative { color: var(--red);   animation: pnl-pop 0.3s ease; }
.pnl-hero.pnl-flat     { color: var(--muted); }
.pnl-hero.pnl-flip-blink { animation: pnl-flip-blink 0.7s ease; }

.pnl-sub {
  margin-top: 10px;
  font-size: 16px;
  color: var(--body);
}
.pnl-sub .mono,
#sig-points,
#pos-qty { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.pnl-sub .pnl-positive,
#sig-points.pnl-positive { color: var(--green); }
.pnl-sub .pnl-negative,
#sig-points.pnl-negative { color: var(--red); }
.dot-sep { color: var(--muted); margin: 0 7px; }

.kv-list { padding-top: 4px; }
.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--pad-row);
  border-bottom: 1px solid var(--row-div);
}
.kv-row:last-child { border-bottom: none; }
.kv-key { font-size: 14px; color: var(--muted); }
.kv-val { font-size: 16px; color: var(--text-2); }
.kv-val.red { color: var(--red-2); }
.kv-val.dim { font-size: 14px; color: var(--dim); }

/* legacy table.kv kept for setup page */
table.kv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.kv td {
  padding: 9px 0;
  border-bottom: 1px solid var(--row-div);
  font-size: 16px;
  vertical-align: baseline;
}
table.kv td:first-child { color: var(--muted); padding-right: 14px; }
table.kv td:last-child  { text-align: right; font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--text-2); }
table.kv tr:last-child td { border-bottom: none; }

.pnl-positive { color: var(--green); font-weight: 600; }
.pnl-negative { color: var(--red);   font-weight: 600; }
.pnl-flat     { color: var(--muted); }

.hint {
  color: var(--muted);
  font-size: 16px;
  margin-top: 14px;
  line-height: 1.55;
}
.muted { color: var(--muted); font-weight: 400; font-size: 16px; }

/* ── Next signal conditions (IDLE empty state) ──────────────────────── */
.next-signal-box {
  margin: 10px 13px;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.nsb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 16px;
}
.nsb-row + .nsb-row { border-top: 1px solid var(--row-div); }
.nsb-label { color: var(--muted); font-size: 14px; }
.nsb-val   { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600; color: var(--text-2); }
.nsb-long  { color: var(--green); }
.nsb-short { color: var(--red-2); }

/* ── Mode chip ──────────────────────────────────────────────────────── */
.mode-chip-wrap { padding: 6px 13px 12px; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px;
  font-size: 14px; color: var(--muted);
}
.mode-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ACTIVITY LOG                                                            */
/* ═══════════════════════════════════════════════════════════════════════ */
.log-scroll {
  max-height: 280px;
  overflow-y: auto;
}
.log-rows { display: flex; flex-direction: column; }
.log-row {
  display: grid;
  grid-template-columns: 54px 78px 1fr;
  align-items: start;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--row-div);
  font-size: 14px;
  line-height: 1.5;
  animation: row-enter 0.2s ease;
}
.log-row:last-child { border-bottom: none; }
.log-row:hover { background: var(--panel-2); }
.log-row-new   { animation: row-enter 0.25s ease; }

.log-ts {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 44px;
}
.log-ts-time { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text-2); }
.log-ts-date { font-size: 12px; color: var(--muted); }

.log-tag {
  padding: 2px 7px; border-radius: 20px;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; border: 1px solid transparent;
  white-space: nowrap; align-self: flex-start;
}
.tag-info   { background: var(--sky-bg);    color: var(--sky);    border-color: var(--sky-bd); }
.tag-signal { background: var(--indigo-bg); color: var(--indigo); border-color: var(--indigo-bd); }
.tag-close  { background: var(--red-bg);    color: var(--red-2);  border-color: var(--red-bd); }
.tag-entry  { background: var(--green-bg);  color: var(--green);  border-color: var(--green-bd); }
.tag-alert  { background: var(--amber-bg);  color: var(--amber);  border-color: var(--amber-bd); }
.tag-clock  { background: var(--panel-3);   color: var(--muted);  border-color: var(--border-hi); }

.log-msg { font-size: 14px; color: var(--body); line-height: 1.45; }
.num-green { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--green); }
.num-red   { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--red); }
.num-amber { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* TRADE STATISTICS                                                        */
/* ═══════════════════════════════════════════════════════════════════════ */
.winrate-block { margin-bottom: 16px; }
.winrate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.winrate-row .kv-key { font-size: 14px; color: var(--muted); }
.winrate-row .kv-val { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--green); }
.winrate-bar { height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.winrate-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-bg), var(--green));
  border-radius: 3px;
  transition: width 0.6s ease;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  padding: 12px 0;
}
.stats-grid > div { min-width: 0; }
.stats-grid .stat-label { font-size: 12px; }
.stats-grid .stat-value { margin-top: 3px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* MOTION & INTERACTIONS                                                   */
/* ═══════════════════════════════════════════════════════════════════════ */
.nav-btn, .alert-exec-btn, .btn-modal-cancel, .btn-modal-confirm, .btn-execute {
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.15s ease, color 0.15s ease,
              background 0.15s ease, box-shadow 0.15s ease;
}
.nav-btn:not(:disabled):hover,
.alert-exec-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.btn-modal-confirm:not(:disabled):hover,
.btn-modal-cancel:hover {
  transform: translateY(-1px);
}

/* NSB box appear */
.next-signal-box { transition: opacity 0.2s ease; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* SCROLLBAR                                                               */
/* ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* EXECUTE ORDER — button, modal, toast, SL note                           */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Execute button (inside Position card, below kv-list) ───────────────── */
.execute-btn-wrap {
  padding: 10px 16px 6px;
}
.btn-execute {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-chip);
  border: 1px solid transparent;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.btn-execute-buy  { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.btn-execute-sell { background: var(--red-bg);   color: var(--red-2); border-color: var(--red-bd);   }
.btn-execute-buy:hover  { border-color: var(--green); }
.btn-execute-sell:hover { border-color: var(--red);   }
.btn-execute:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── SL amber note (display-only, below Execute button) ─────────────────── */
.sl-note {
  margin: 2px 16px 12px;
  padding: 8px 12px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-bd);
  border-radius: var(--r-chip);
  font-size: 14px;
  color: var(--amber-2);
  line-height: 1.45;
}
.sl-note .mono { color: var(--amber); font-weight: 600; }

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: modal-enter 0.18s ease;
}
html[data-theme="dark"] .modal-box {
  background: rgba(21,21,28,0.92);
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--hd-div);
}
.modal-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: var(--r-tag);
  transition: color 0.12s ease;
}
.modal-close:hover { color: var(--text); }

/* ── IP whitelist notice ─────────────────────────────────────────────────── */
.ip-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 18px 0;
  padding: 10px 12px;
  background: var(--sky-bg);
  border: 1px solid var(--sky-bd);
  border-radius: var(--r-chip);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sky);
}
.ip-notice[hidden] { display: none; }
.ip-notice-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ip-notice-text { flex: 1; }
.ip-notice-link { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.ip-notice-link:hover { opacity: 0.8; }
.ip-notice-dismiss {
  background: none; border: none; color: var(--sky); opacity: 0.6;
  font-size: 14px; cursor: pointer; padding: 0 2px; flex-shrink: 0;
  line-height: 1; border-radius: 3px; transition: opacity 0.12s ease;
}
.ip-notice-dismiss:hover { opacity: 1; }

/* ── Modal body: order summary rows ─────────────────────────────────────── */
.modal-body { padding: 12px 18px 8px; }

.order-summary { display: flex; flex-direction: column; }
.order-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--row-div);
  font-size: 16px;
}
.order-sum-row:last-child { border-bottom: none; }
.order-sum-key { font-size: 14px; color: var(--muted); }
.order-sum-val { color: var(--text-2); font-weight: 500; }
.order-sum-val.red { color: var(--red-2); }
.order-sum-row-sl {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 11px;
  border-bottom: none;
}

/* ── Modal inline error ──────────────────────────────────────────────────── */
.modal-error {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--red-bg);
  border: 1px solid var(--red-bd);
  border-radius: var(--r-chip);
  font-size: 14px;
  color: var(--red-2);
  line-height: 1.45;
}
.modal-error[hidden] { display: none; }

/* ── Modal footer ────────────────────────────────────────────────────────── */
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--hd-div);
}
.btn-modal-cancel {
  flex: 1;
  height: 38px;
  background: var(--panel-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-chip);
  color: var(--readable);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn-modal-cancel:hover { border-color: var(--border-hi); color: var(--readable-hi); }

.btn-modal-confirm {
  flex: 2;
  height: 38px;
  border-radius: var(--r-chip);
  border: 1px solid transparent;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn-modal-confirm.confirm-buy  { background: var(--green); color: #ffffff; border-color: var(--green); }
.btn-modal-confirm.confirm-sell { background: var(--red);   color: #ffffff; border-color: var(--red);   }
.btn-modal-confirm.confirm-sl   { background: var(--amber); color: #ffffff; border-color: var(--amber); }
.btn-modal-confirm.confirm-buy:hover  { background: #369140; border-color: #369140; }
.btn-modal-confirm.confirm-sell:hover { background: #a02116; border-color: #a02116; }
.btn-modal-confirm.confirm-sl:hover   { background: #b45309; border-color: #b45309; }
.btn-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Order toast (green, prepended to Position card, 5 s) ───────────────── */
.order-toast {
  margin: 0 16px 10px;
  padding: 9px 14px;
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  border-radius: var(--r-chip);
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  animation: toast-in 0.25s ease, toast-out 0.4s ease 4.6s forwards;
}
@keyframes toast-in  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }

/* ═══ Hourly Price Chart ═══════════════════════════════════════════════ */
/* ─── NIFTY Hourly Chart redesign ─── */

/* Tokens (light) */
:root {
  --chart-line: #016FD0;
  --pc-bg: #fafaf7;
  --pc-panel: #ffffff;
  --pc-ink: #1a1a17;
  --pc-ink-2: #4a4a45;
  --pc-muted: #8a8a82;
  --pc-line: #e8e7e1;
  --pc-line-2: #f1f0ea;
  --pc-up: #2f9e6b;
  --pc-up-soft: #d5ecdf;
  --pc-down: #d04a3a;
  --pc-down-soft: #f3d6d1;
  --pc-stripe: #f6f5ee;
  --pc-trade-bg: #fbfaf4;
  --pc-neutral: #6e6e68;
  --pc-ema-1: #6b7cd9;  /* LT1   */
  --pc-ema-2: #8a6bd9;  /* LST   */
  --pc-ema-3: #d99a2b;  /* EMA36 */
  --pc-ema-4: #5ba39a;  /* SST   */
  --pc-ema-5: #c97a47;  /* ST1   */
}

/* Tokens (dark) — use the existing dark palette */
html[data-theme="dark"] {
  --chart-line: #148DEA;
  --pc-bg: var(--bg);
  --pc-panel: var(--panel);
  --pc-ink: var(--text);
  --pc-ink-2: var(--text-2);
  --pc-muted: var(--muted);
  --pc-line: var(--border);
  --pc-line-2: var(--row-div);
  --pc-up: var(--green);
  --pc-up-soft: rgba(204,255,0,0.12);
  --pc-down: var(--red);
  --pc-down-soft: rgba(240,60,30,0.18);
  --pc-stripe: rgba(255,255,255,0.025);
  --pc-trade-bg: var(--panel-2);
  --pc-neutral: #9a9a92;
  --pc-ema-1: #8b9bff;
  --pc-ema-2: #b08bff;
  --pc-ema-3: #f5b13a;
  --pc-ema-4: #6dc5b8;
  --pc-ema-5: #e29466;
}

.pc-panel {
  background: var(--pc-panel);
  border: 1px solid var(--pc-line);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--pc-ink);
  font-family: 'IBM Plex Sans','Inter',system-ui,sans-serif;
  font-feature-settings: "tnum" 1;
}

/* Header strip */
.pc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pc-line);
}
.pc-hd-left  { display: flex; align-items: baseline; gap: 14px; }
.pc-title {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--pc-ink);
}
.pc-sym  { color: var(--pc-muted); font-weight: 500; margin-left: 6px; }
.pc-sub  { font-size: 12px; color: var(--pc-muted); }
.pc-hd-right { display: flex; align-items: center; gap: 18px; }
.pc-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--pc-ink-2); align-items: center; }
.pc-sw { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }

/* Trade context bar */
.pc-trade-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--pc-line);
  background: var(--pc-trade-bg);
  font-size: 12px;
  flex-wrap: wrap;
}
.pc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pc-pill-short { background: var(--pc-down-soft); color: var(--pc-down); }
.pc-pill-long  { background: var(--pc-up-soft);   color: var(--pc-up); }
.pc-pill-live  { background: var(--pc-up-soft);   color: var(--pc-up); }
.pc-pill-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc-up); animation: pc-pulse 1.6s infinite;
}
@keyframes pc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.pc-kv { display: inline-flex; align-items: baseline; gap: 6px; color: var(--pc-muted); }
.pc-kv b { color: var(--pc-ink); font-weight: 600; font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono','Inter',monospace; }
.pc-kv b.pc-down, .pc-down { color: var(--pc-down) !important; }
.pc-kv b.pc-up,   .pc-up   { color: var(--pc-up)   !important; }
.pc-mute { color: var(--pc-muted); font-variant-numeric: tabular-nums; }
.pc-sep  { width: 1px; height: 14px; background: var(--pc-line); }
.pc-spacer { flex: 1; }

/* Chart head */
.pc-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 6px;
}
.pc-chart-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-ink-2); display: flex; gap: 8px; align-items: baseline; }
.pc-chart-title b { color: var(--pc-ink); }

.pc-range { display: flex; gap: 6px; align-items: center; }
.pc-range button {
  appearance: none; background: transparent; border: 1px solid var(--pc-line);
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 11px;
  color: var(--pc-ink-2); cursor: pointer;
}
.pc-range button.on { background: var(--pc-ink); color: var(--pc-panel); border-color: var(--pc-ink); }

/* Chart host */
.price-chart-wrap {
  position: relative;
  width: 100%;
  padding: 4px 8px 10px;
}
.price-chart-svg {
  display: block; width: 100%; height: 460px; user-select: none;
}

/* Footnote */
.pc-footnote {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 0 20px 16px;
  font-size: 11px; color: var(--pc-muted);
}
.pc-key { display: inline-flex; align-items: center; gap: 6px; }
.pc-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.pc-dot-entry { background: var(--pc-neutral); border: 1px dashed var(--pc-neutral); }
.pc-dot-sl    { background: var(--pc-down); }
.pc-dot-loss  { background: var(--pc-down); opacity: .25; }
.pc-dot-live  { background: var(--pc-ink); }

/* Tooltip */
.pc-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(20,20,18,.96);
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  min-width: 200px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transform: translate(-50%, -110%);
  z-index: 10;
}
.pc-tip .pc-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.pc-tip .pc-tip-row .k { color: #b9b9b3; }
.pc-tip .pc-tip-row .v { font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono', monospace; }
.pc-tip .pc-tip-hr { height: 1px; background: rgba(255,255,255,.1); margin: 6px 0; }
.pc-tip .pc-tip-head { font-size: 11px; color: #cfcfc7; letter-spacing: 0.04em; }
.pc-tip .v.up   { color: #6cd49a; }
.pc-tip .v.down { color: #ff8b7e; }

/* SVG element classes */
.pc-svg-gridline  { stroke: var(--pc-line-2); stroke-width: 1; }
.pc-svg-day-sep   { stroke: var(--pc-line); stroke-width: 1; stroke-dasharray: 2 4; }
.pc-svg-axis      { fill: var(--pc-muted); font-size: 11px; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-axis-day  { fill: var(--pc-ink-2); font-weight: 600; font-size: 11px; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-axis-tag  { fill: var(--pc-muted); font-size: 10.5px; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-stripe    { fill: var(--pc-stripe); }
.pc-svg-loss-band { fill: var(--pc-down); opacity: 0.07; }
.pc-svg-entry-line { stroke: var(--pc-neutral); stroke-width: 1; stroke-dasharray: 4 3; }
.pc-svg-sl-line    { stroke: var(--pc-down); stroke-width: 1.25; stroke-dasharray: 5 3; }
.pc-svg-live-line  { stroke: var(--pc-ink); stroke-width: 1; }
.pc-svg-crosshair  { stroke: var(--pc-ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; }
.pc-svg-hover-dot  { fill: var(--pc-panel); stroke: var(--pc-ink); stroke-width: 1.5; }
.pc-svg-ema        { fill: none; stroke-width: 1.25; }
.pc-svg-ema-thick  { stroke-width: 1.75; }
.pc-svg-candle-wick { stroke-width: 1.25; }
.pc-svg-up   { fill: var(--pc-up);   stroke: var(--pc-up); }
.pc-svg-down { fill: var(--pc-down); stroke: var(--pc-down); }
.pc-svg-price-tag-bg   { fill: var(--pc-ink); }
.pc-svg-price-tag-text { fill: var(--pc-panel); font-size: 11px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-level-bg-entry { fill: var(--pc-panel); stroke: var(--pc-neutral); }
.pc-svg-level-bg-sl    { fill: var(--pc-panel); stroke: var(--pc-down); }
.pc-svg-level-text     { font-size: 10.5px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-ema-tag        { font-size: 10px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.pc-svg-entry-marker   { fill: var(--pc-down); }

/* ─── Volatility & Regime panel ─── */
.vol-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 16px 16px;
}
.vol-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--row-div);
}
.vol-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.vol-hero-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.vol-hero-sub {
  font-size: 11px;
  color: var(--body);
}

.vol-bar-block { display: flex; flex-direction: column; gap: 6px; }
.vol-bar-row { display: flex; justify-content: space-between; align-items: baseline; }
.vol-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--panel-3);
  overflow: hidden;
  position: relative;
}
.vol-bar-fill {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.3s ease, background 0.2s ease;
}
.vol-bar-fill.vol-low    { background: var(--green); }
.vol-bar-fill.vol-normal { background: var(--amber); }
.vol-bar-fill.vol-high   { background: var(--red);   }
.vol-bar-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.regime-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
}
.regime-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.regime-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.regime-icon { font-size: 16px; line-height: 1; }
.regime-name { letter-spacing: 0.01em; }

.regime-block.regime-trending  { border-color: var(--green-bd); }
.regime-block.regime-trending  .regime-name { color: var(--green); }
.regime-block.regime-trending  .regime-icon { color: var(--green); }

.regime-block.regime-choppy    { border-color: var(--amber-bd); }
.regime-block.regime-choppy    .regime-name { color: var(--amber-2); }
.regime-block.regime-choppy    .regime-icon { color: var(--amber-2); }

.regime-block.regime-expansion { border-color: var(--red-bd); }
.regime-block.regime-expansion .regime-name { color: var(--red-2); }
.regime-block.regime-expansion .regime-icon { color: var(--red-2); }

.regime-desc {
  font-size: 11px;
  color: var(--body);
  line-height: 1.4;
}

.vol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding-top: 4px;
  border-top: 1px solid var(--row-div);
}
.vol-grid .stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 2px;
}
.vol-grid .stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}