:root { --tv-bg: #131722; --tv-panel: #1e222d; --tv-border: #2a2e39; --tv-text: #d1d4dc; --tv-muted: #787b86; --tv-blue: #2962ff; --tv-green: #089981; --tv-red: #f23645; --tv-cyan: #00e5ff; --dashboard-scale: 1; }
[data-theme="light"] { --tv-bg: #ffffff; --tv-panel: #f0f3fa; --tv-border: #e0e3eb; --tv-text: #131722; --tv-muted: #787b86; --tv-blue: #2962ff; }
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif; }
body { background: var(--tv-bg); color: var(--tv-text); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#tv-header { height: 40px; background: var(--tv-panel); border-bottom: 1px solid var(--tv-border); display: flex; align-items: center; padding: 0 8px; gap: 4px; z-index: 50; }
.brand-logo { font-weight: 800; font-size: 15px; color: var(--tv-blue); margin-right: 6px; }
.tv-btn { height: 28px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--tv-text); display: flex; align-items: center; gap: 4px; border: 1px solid transparent; }
.tv-btn:hover { background: rgba(255,255,255,0.06); }
.tv-btn.active { color: var(--tv-blue); font-weight: 700; }
.dashboard-size-control { height: 28px; display: flex; align-items: center; gap: 4px; color: var(--tv-muted); font-size: 11px; cursor: pointer; }
.dashboard-size-control select { height: 24px; padding: 0 3px; background: var(--tv-bg); color: var(--tv-text); border: 1px solid var(--tv-border); border-radius: 4px; font-size: 10px; }
.tv-divider { width: 1px; height: 18px; background: var(--tv-border); margin: 0 4px; }
#search-box { background: var(--tv-bg); border: 1px solid var(--tv-border); color: var(--tv-text); padding: 4px 8px; border-radius: 4px; font-size: 13px; font-weight: 600; width: 160px; outline: none; text-transform: uppercase; }
#search-dropdown { position: absolute; top: 38px; left: 8px; width: 320px; background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 4px; max-height: 250px; overflow-y: auto; display: none; z-index: 1000; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.search-row { padding: 8px 12px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--tv-border); display: flex; justify-content: space-between; }
.search-row:hover { background: var(--tv-blue); color: #fff; }
.conn-state { font-size: 10px; color: var(--tv-red); margin-right: 8px; font-family: monospace; }
.conn-state.on { color: var(--tv-green); }
.btn-replay-launch { background: rgba(41,98,255,0.12) !important; color: var(--tv-blue) !important; font-weight: 600 !important; border: 1px solid var(--tv-blue) !important; }
#tv-floating-replay { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 6px; padding: 4px 10px; display: none; align-items: center; gap: 6px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.replay-title { font-size: 11px; font-weight: 700; color: var(--tv-blue); }
.replay-action-btn { background: transparent; border: 1px solid var(--tv-border); color: var(--tv-text); border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.replay-action-btn:hover { background: rgba(255,255,255,0.08); }
.replay-action-btn.active { background: var(--tv-blue); color: #fff; }
.counter-text { font-size: 10px; color: var(--tv-muted); }
.close-x { color: var(--tv-red); }
#tv-workspace { flex: 1; display: flex; position: relative; overflow: hidden; }
#tv-left-bar { width: 44px; background: var(--tv-panel); border-right: 1px solid var(--tv-border); display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 4px; }
.draw-tool { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; color: var(--tv-muted); font-size: 14px; }
.draw-tool:hover, .draw-tool.active { background: rgba(41,98,255,0.15); color: var(--tv-blue); }
#stage-center { flex: 1; display: flex; flex-direction: column; height: 100%; position: relative; }
#chart-container { flex: 1; width: 100%; position: relative; background: #131722; }
body[data-theme="light"] #chart-container { background: #ffffff; }
#chart-container > .tv-lightweight-charts { position: relative; z-index: 2; }   /* f56: z-index is INERT on a static box — LWC's root is static, so the zones canvas painted OVER candles+EMAs (browser-proven). position:relative activates it */   /* f47: raise ONLY the chart root above the zones canvas — a bare "> div" rule also strips position:absolute from the HUD/legend overlays and pushes the chart out of its container (caught by f16check) */
#tv-ohlc-legend { position: absolute; top: 8px; left: 12px; font-size: 12px; font-family: monospace; z-index: 10; pointer-events: none; display: flex; gap: 8px; }
.legend-tag { font-weight: 700; color: var(--tv-text); }
.legend-metric { color: var(--tv-muted); }
/* TradingView-style floating market actions: the pair sits beneath the
   symbol/status line and uses the same confirmed quickTrade() path as the
   ticket buttons. */
#chart-quick-actions { position: absolute; top: 31px; left: 12px; z-index: 13; display: inline-flex;
  align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--tv-border);
  border-radius: 4px; background: rgba(19,23,34,.88); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.chart-quick-btn { min-width: 42px; height: 22px; padding: 0 8px; border: 0; border-radius: 3px;
  color: #fff; font: 600 11px/22px -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; }
.chart-quick-btn.buy { background: #2962ff; }
.chart-quick-btn.sell { background: #f23645; }
.chart-quick-btn:hover { filter: brightness(1.12); }
#chart-quick-qty { min-width: 36px; padding: 0 4px; color: var(--tv-text); font: 10px/22px monospace; text-align: center; }
[data-theme="light"] #chart-quick-actions { background: rgba(255,255,255,.94); }
body.scale-left #chart-quick-actions { left: 64px; }
/* The LTP is a separate, stable readout: the OHLC legend describes the last
   candle, while this value is updated by every accepted forming/fallback tick. */
/* Current price + countdown are anchored to the active price scale, not the
   chart's top-left legend. app.js moves this chip to the y-coordinate returned
   by Lightweight Charts for the current price. */
#current-price-readout { position: absolute; top: 50%; right: 0; z-index: 11; pointer-events: none;
  font-family: monospace; line-height: 1.15; text-align: right; padding: 3px 6px 4px 8px;
  min-width: 78px; background: transparent; border: 0; box-shadow: none;
  border-radius: 0; transform: translateY(-50%); }
#current-price-value { font-size: 12px; font-weight: 500; color: var(--tv-text); letter-spacing: .01em; }
#bar-countdown { margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--tv-muted); white-space: nowrap; }
body.scale-left #current-price-readout { right: auto; left: 0; padding-left: 6px; padding-right: 8px; text-align: left; }
body.scale-left #current-price-readout { transform: translateY(-50%); }
/* TradingView-style bar-close text: white in dark mode, black in light mode.
   Stale state remains visible through opacity/title without changing the theme
   color. */
#bar-countdown, #bar-countdown.live, #bar-countdown.stale { color: #ffffff; }
body[data-theme="light"] #bar-countdown,
body[data-theme="light"] #bar-countdown.live,
body[data-theme="light"] #bar-countdown.stale { color: #131722; }
#bar-countdown.stale { opacity: .68; }
.bull { color: var(--tv-green) !important; }
.bear { color: var(--tv-red) !important; }
.acc { color: var(--tv-cyan) !important; }
.no-history-note { position: absolute; top: 72px; left: 12px; z-index: 10; font-size: 11px; color: #eccd76; background: #221f14; border: 1px solid #826f32; border-radius: 4px; padding: 6px 10px; }
#tv-hud-overlay { position: absolute; top: 8px; right: 8px; background: rgba(19, 23, 34, 0.92); border: 1px solid var(--tv-border); border-radius: 4px; padding: 6px 8px; font-family: monospace; font-size: 10px; z-index: 10; pointer-events: auto;   /* f15: was none — TF cells were unclickable by real mouse */
  background: transparent !important; border: none; box-shadow: none; }  /* f16: dashboard fully transparent */
#tv-hud-overlay table { border-collapse: collapse; min-width: 350px; }
#tv-hud-overlay td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.hud-lbl { color: var(--tv-muted); font-weight: 600; width: 75px; }
#tv-right-sidebar { width: 300px; background: var(--tv-panel); border-left: 1px solid var(--tv-border); display: flex; flex-direction: column; }
.panel-heading { font-size: 11px; font-weight: 700; color: var(--tv-muted); margin-bottom: 6px; text-transform: uppercase; display: flex; justify-content: space-between; }
.dom-view { flex: 1; padding: 10px; overflow-y: auto; }
.depth-line { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 11px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: center; position: relative; }
.header-row { color: var(--tv-muted); font-size: 10px; }
.depth-fill-bid { position: absolute; top: 0; left: 0; height: 100%; background: rgba(8,153,129,0.12); z-index: 1; pointer-events: none; }
.depth-fill-ask { position: absolute; top: 0; right: 0; height: 100%; background: rgba(242,54,69,0.12); z-index: 1; pointer-events: none; }
.order-ticket { padding: 12px; background: var(--tv-bg); border-top: 1px solid var(--tv-border); }
.input-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; }
.input-line input, .input-line select { background: var(--tv-panel); border: 1px solid var(--tv-border); color: var(--tv-text); padding: 4px 8px; border-radius: 4px; width: 110px; text-align: right; outline: none; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.trade-action-btn { padding: 8px; font-weight: 700; border-radius: 4px; border: none; cursor: pointer; text-transform: uppercase; font-size: 11px; }
.trade-action-btn.buy { background: var(--tv-green); color: #fff; }
.trade-action-btn.sell { background: var(--tv-red); color: #fff; }
.quick-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.trade-action-btn.quick { padding: 9px 6px; border: 1px solid rgba(255,255,255,.18); letter-spacing: .02em; }
.trade-action-btn.quick:hover { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.trade-preview { margin-top: 7px; padding: 6px 7px; min-height: 30px; border: 1px solid var(--tv-border); border-radius: 4px; color: var(--tv-muted); font: 10px/1.35 monospace; white-space: normal; }
.trade-preview.live-warning { color: #f7c66a; border-color: #8a6a2b; }
.ticket-reset-btn { width: 100%; margin-top: 7px; padding: 5px 8px; border: 1px solid var(--tv-border); border-radius: 4px; background: transparent; color: var(--tv-muted); cursor: pointer; font-size: 10px; }
.ticket-reset-btn:hover { color: var(--tv-text); border-color: var(--tv-blue); }
#tv-bottom-dock { height: 180px; background: var(--tv-panel); border-top: 1px solid var(--tv-border); display: flex; flex-direction: column; z-index: 20; }
.dock-tabs { height: 30px; display: flex; align-items: center; border-bottom: 1px solid var(--tv-border); padding: 0 10px; gap: 14px; background: var(--tv-bg); }
.dock-tab { background: transparent; border: none; color: var(--tv-muted); font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 0; border-bottom: 2px solid transparent; }
.dock-tab.active { color: var(--tv-blue); border-bottom: 2px solid var(--tv-blue); font-weight: 700; }
#broker-select-dropdown { background: var(--tv-panel); border: 1px solid var(--tv-border); color: var(--tv-text); padding: 2px 6px; border-radius: 4px; font-size: 11px; outline: none; }
#broker-status-strip { height: 32px; background: var(--tv-panel); border-bottom: 1px solid var(--tv-border); display: flex; align-items: center; padding: 0 12px; gap: 18px; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tv-green); display: inline-block; margin-right: 4px; }
.metric-cell { display: flex; gap: 4px; align-items: center; }
.m-lbl { color: var(--tv-muted); }
.metric-val { font-weight: 700; font-family: monospace; }
.dock-body { flex: 1; overflow-y: auto; padding: 4px 10px; }
table.tv-data-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
table.tv-data-table th { color: var(--tv-muted); padding: 5px 6px; font-weight: 500; border-bottom: 1px solid var(--tv-border); }
table.tv-data-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.03); font-family: monospace; }
.btn-exit-trade { background: transparent; border: 1px solid var(--tv-border); color: var(--tv-muted); border-radius: 3px; padding: 2px 6px; cursor: pointer; font-size: 10px; }
.btn-exit-trade:hover { background: var(--tv-red); color: #fff; border-color: var(--tv-red); }
.modal-shade { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 2000; }
.modal-card { background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 6px; width: 360px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.modal-head { font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; }
.modal-foot { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.blue-bg { background: var(--tv-blue) !important; color: #fff; }
.toast { position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%); background: #1b293b; border: 1px solid #446082; color: #d9e7fb; padding: 10px 18px; border-radius: 6px; font-size: 12px; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
.toast.show { opacity: 1; }
.toast.err { background: #321720; border-color: #743846; color: #ff9aab; }
[data-theme="light"] .toast { background: #ffffff; border-color: #b9c6d8; color: #131722; }
[data-theme="light"] .toast.err { background: #fbe3e7; color: #a8324a; }

/* ===== 131.16-f3: appShell fullscreen (complete dashboard stays visible) ===== */
#appShell { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
#appShell:fullscreen { width: 100vw; height: 100vh; background: var(--tv-bg); }
#fs-btn { font-size: 15px; }
#fsExit2 { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5000; display: none;   /* f51: was bottom-right — sat ON the Sell button in fullscreen */
  background: var(--tv-panel); color: var(--tv-text); border: 1px solid var(--tv-border);
  border-radius: 4px; padding: 6px 10px; font-size: 11px; cursor: pointer; }
#appShell:fullscreen #fsExit2 { display: block; }
#appShell:fullscreen #tv-header { height: 40px; flex: 0 0 40px; }
#appShell:fullscreen #tv-workspace { flex: 1; }
[data-theme="light"] #fsExit2 { background: #ffffff; }

/* chart-type dropdown */
#chart-type-menu { position: absolute; top: 38px; display: none; flex-direction: column;
  background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 4px;
  min-width: 120px; z-index: 1200; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
#chart-type-menu.open { display: flex; }
.ct-option { padding: 7px 12px; font-size: 12px; cursor: pointer; }
.ct-option:hover { background: rgba(41,98,255,0.15); }
.ct-option.active { color: var(--tv-blue); font-weight: 700; }

/* indicator dialog rows */
#ind-rows .input-line input[type="number"] { width: 70px; }
#ind-rows .input-line input[type="color"] { width: 40px; padding: 0 2px; height: 26px; }
#ind-rows .input-line input[type="checkbox"] { width: 16px; height: 16px; }

/* TERMINAL_KEY gate modal — topmost, never auto-dismissed */
#gate-modal { z-index: 9000; }
#gate-input, #gate-modal input { background: var(--tv-panel) !important; border: 1px solid var(--tv-border) !important;
  color: var(--tv-text) !important; padding: 6px 8px; border-radius: 4px; text-align: left !important; }

/* Empty-state panel: the honest "why is the chart blank" card */
#empty-state { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 40; background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 8px;
  padding: 22px 26px; text-align: center; max-width: 460px; box-shadow: 0 10px 34px rgba(0,0,0,0.45); }
#empty-state .es-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
#empty-state .es-reason { font-size: 11px; color: var(--tv-red); margin-bottom: 12px; word-break: break-word; }
#empty-state .es-steps { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  color: var(--tv-muted); margin-bottom: 14px; text-align: left; }
#empty-state .es-error-actions { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
#empty-state .copy-error-btn, #gate-modal .copy-error-btn { border-color: var(--tv-border); color: var(--tv-text); background: transparent; }
#empty-state .copy-error-btn:hover, #gate-modal .copy-error-btn:hover { border-color: var(--tv-blue); color: var(--tv-blue); }
#copy-error-status { min-width: 44px; font-size: 10px; color: var(--tv-green); }
#global-copy-error-button { position: fixed; right: 12px; bottom: 10px; z-index: 1000;
  border: 1px solid var(--tv-red); border-radius: 4px; background: var(--tv-panel);
  color: var(--tv-red); padding: 6px 9px; font-size: 11px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
#global-copy-error-button:hover { color: var(--tv-text); border-color: var(--tv-blue); }

/* Single scrollable chart-TF dropdown (TV-style grouped list) */
#tf-menu, #hud-tf-menu { position: absolute; top: 32px; left: 0; display: none; flex-direction: column;
  background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 4px;
  min-width: 150px; max-height: 320px; overflow-y: auto; z-index: 1300;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
#tf-menu.open, #hud-tf-menu.open { display: flex; }
.tf-group { font-size: 10px; color: var(--tv-muted); padding: 6px 10px 2px; text-transform: uppercase; }
.tf-opt { padding: 6px 12px; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; }
.tf-opt:hover { background: rgba(41,98,255,0.15); }
.tf-opt.active { color: var(--tv-blue); font-weight: 700; }
.tf-opt.disabled { opacity: 0.45; cursor: not-allowed; }
.tf-opt .tf-note { font-size: 9px; color: var(--tv-muted); }

/* HUD TF header cells are clickable selectors */
#hud-tbody tr:nth-child(3) td { cursor: pointer; }
#hud-tbody tr:nth-child(3) td:hover { color: var(--tv-blue); }

/* Chart right-click context menu + plus-button menu (TV-style) */
#chart-ctx-menu, #plus-menu { position: fixed; display: none; flex-direction: column; z-index: 2500;
  background: var(--tv-panel); border: 1px solid var(--tv-border); border-radius: 6px; min-width: 190px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55); overflow: hidden; }
#chart-ctx-menu.open, #plus-menu.open { display: flex; }
.ctx-item { padding: 8px 14px; font-size: 12px; cursor: pointer; }
.ctx-item:hover { background: rgba(41,98,255,0.15); }
.ctx-item.plus-title { cursor: default; color: var(--tv-muted); font-size: 11px; border-bottom: 1px solid var(--tv-border); }
.ctx-item.ctx-muted { color: var(--tv-muted); }

/* working-order price lines legend chip */
#ol-chip { position: absolute; left: 12px; bottom: 10px; z-index: 12; font-size: 10px; color: var(--tv-muted);
  pointer-events: none; }

/* ---- f15: visible plus cursor on price scale, HUD TF carets, JS error badge ---- */
#plus-cursor { position: fixed; z-index: 40; display: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--tv-blue, #2962ff); color: #fff; font: 700 14px/20px -apple-system, sans-serif;
  text-align: center; pointer-events: none; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hud-tf-cell { cursor: pointer; text-decoration: underline dotted transparent; }
.hud-tf-cell::after { content: " \25BE"; font-size: 8px; opacity: .7; }
.hud-tf-cell:hover { text-decoration: underline dotted currentColor; }
#js-error-badge { position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 999;
  background: #f23645; color: #fff; font: 600 12px -apple-system, sans-serif; padding: 6px 14px;
  border-radius: 6px; max-width: 80vw; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
#build-chip { font-size: 10px; color: var(--tv-muted, #787b86); margin-left: 8px; }

body.scale-left #tv-ohlc-legend { left: 64px; }   /* keep legend clear of a left-pinned axis */
/* The price chip belongs on the left price scale when that side is pinned. */
body.scale-left #current-price-readout { left: 0; }

/* ================= f16: themes, drag handles, plus chip, dock ================= */
/* dark mode: dashboard levels WHITE, numbers keep red/green + triangles */
body[data-theme="dark"] #tv-hud-overlay, body[data-theme="dark"] #tv-hud-overlay td,
body[data-theme="dark"] #tv-hud-overlay .hud-lbl { color: #ffffff; }
body[data-theme="dark"] #tv-hud-overlay .hud-tf-cell { color: #ffffff; }
/* light mode: dashboard prints BLACK; numbers stay red/green via .bull/.bear */
body[data-theme="light"] #tv-hud-overlay, body[data-theme="light"] #tv-hud-overlay td,
body[data-theme="light"] #tv-hud-overlay .hud-lbl { color: #111111; }
body[data-theme="light"] #tv-ohlc-legend, body[data-theme="light"] #tv-ohlc-legend * { color: #111111; }
body[data-theme="light"] #dom-ladder-body, body[data-theme="light"] .dom-view,
body[data-theme="light"] .panel-heading, body[data-theme="light"] .depth-line.header-row { color: #111111; }
#tv-hud-overlay td { white-space: nowrap; }
.candle-violet { color: #8a2be2 !important; font-weight: 700; }
.candle-pink  { color: #ff69b4 !important; font-weight: 700; }
.candle-yellow{ color: #fcc015 !important; font-weight: 700; }

/* persistent TV-style plus chip riding the price scale */
#plus-chip { position: absolute; z-index: 25; display: none; width: 20px; height: 20px;
  border-radius: 50%; background: #2962ff; color: #fff; font: 700 15px/20px -apple-system, sans-serif;
  align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
#plus-chip:hover { transform: scale(1.15); }

/* RSI pane divider (drag up/down) */
#rsi-divider { position: absolute; left: 0; right: 0; height: 6px; margin-top: -3px; z-index: 24;
  cursor: ns-resize; border-top: 1px dashed rgba(120,123,134,.45); }
#rsi-divider:hover { background: rgba(41,98,255,.18); border-top-color: #2962ff; }

/* Trading Panel drag handle + right dock collapse/resize */
#dock-drag { height: 5px; cursor: ns-resize; background: transparent; }
#dock-drag:hover { background: rgba(41,98,255,.25); }
#dock-toggle { position: absolute; left: -13px; top: 14px; z-index: 30; width: 15px; height: 44px;
  border: 1px solid var(--tv-border); background: var(--tv-panel); color: var(--tv-muted);
  border-radius: 4px 0 0 4px; cursor: pointer; font-size: 11px; padding: 0; }
/* f73: collapse by WIDTH, never by display. The old `display:none` +
   `> *:not(#dock-toggle)` pair is what made the panel unable to come back: a
   single leftover inline `display` on a child (or a stale dragged width) left an
   invisible 18px rail after re-opening. Width + overflow keeps every child alive
   and laid out, so restoring is just putting the number back. */
#tv-right-sidebar { overflow: hidden; transition: width .16s ease; }
body.dock-closed #tv-right-sidebar { width: 0 !important; min-width: 0 !important;
  border-left: none; padding-left: 0; padding-right: 0; }
#dock-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 29; }
#dock-resize:hover { background: rgba(41,98,255,.25); }

#tv-right-sidebar { position: relative; }          /* f16: anchor for toggle + resize grip */
#dock-drag { position: relative; z-index: 21; }    /* f16: always grabbable */

/* (superseded by the width-based collapse above — kept out of the cascade on purpose) */

/* f16: dragged panel height must not be flex-squeezed by the chart's min-content */
#tv-bottom-dock { flex-shrink: 0; }
#chart-container { min-height: 0; }
#tv-right-sidebar { flex-shrink: 0; }   /* f16: dragged width must hold too */
#dhan-btn { margin: 0 10px 6px; padding: 3px 8px; font-size: 10px; border: 1px solid var(--tv-border);
  background: transparent; color: var(--tv-muted); border-radius: 4px; cursor: pointer; text-align: left; }
#dhan-btn:hover { border-color: var(--tv-blue); color: var(--tv-blue); }

/* f36: top alert strip — theme aware */
#live-alert-strip { background: #101014; color: #8b8b94; border-bottom: 1px solid #26262c; }
body[data-theme="light"] #live-alert-strip { background: #f7f9fc; color: #4a4e57; border-bottom: 1px solid #d8dee8; }

/* f56: TV-standard position chip (entry row) */
#pos-chip { position: absolute; z-index: 26; display: none; align-items: center; gap: 6px;
  background: var(--tv-panel, #1e222d); border: 1px solid var(--tv-border, #2a2e39); border-radius: 4px;
  font: 600 11px -apple-system, sans-serif; color: var(--tv-text, #d1d4dc); padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); white-space: nowrap; }
#pos-chip button { border: 1px solid var(--tv-border, #2a2e39); background: transparent; color: inherit;
  border-radius: 3px; font-size: 10px; padding: 1px 6px; cursor: pointer; }
#pos-chip #pc-rev { color: #2962ff; border-color: #2962ff; }
#pos-chip #pc-close { color: #f23645; border-color: #f23645; }
#fvg-btn.active { color: #00bcd4; }

/* f57: HUD palette = text colour (white dark / black light) + red/green ONLY. No cyan/blue/violet. */
#tv-hud-overlay .acc, #tv-hud-overlay .hud-tf-cell, #tv-hud-overlay span:not(.bull):not(.bear) { color: inherit !important; }
#tv-hud-overlay .candle-violet, #tv-hud-overlay .candle-pink, #tv-hud-overlay .candle-yellow { color: inherit !important; }
body.hud-strip-merged #live-alert-strip, body.hud-strip-merged .alert-strip { display: none !important; }
#hud-live-note { font-weight: 600; margin-left: 6px; }
#pos-chip .pc-add { font-size: 10px; }
.drag-hover, .drag-hover canvas { cursor: ns-resize !important; }
#ctx-trade .ctx-item b { font-weight: 700; }

/* ===== f58: TradingView-style bracket layer ===== */
#brk-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
/* Rows must be hit-testable on Safari as well as Chromium. The old
   pointer-events:none on .brk-row made the TP line/box appear visible but
   prevented pointerdown from reaching wireBracketRow in some browsers. */
.brk-row { position: absolute; left: 0; height: 11px; pointer-events: auto; touch-action: none; }
.brk-line { position: absolute; left: 0; top: 5px; height: 0; border-top: 1px dashed var(--c); pointer-events: none; cursor: ns-resize; touch-action: none; }
.brk-line::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; }
/* A full-width invisible hit area used to steal chart drags whenever the pointer
   crossed an order/position price. Keep the visible line passive; boxes, tags,
   SL/TP handles and close controls remain explicitly interactive. */
.brk-solid .brk-line { border-top-style: solid; cursor: default; }
.brk-box { position: absolute; top: -4px; display: flex; align-items: stretch; height: 18px; font: 600 11px/18px -apple-system, "Segoe UI", sans-serif;
           border: 1px solid var(--c); border-radius: 3px; background: var(--brk-bg, #131722); color: var(--c); pointer-events: auto; cursor: ns-resize; user-select: none; white-space: nowrap; }
body[data-theme="light"] .brk-box { --brk-bg: #ffffff; }
.brk-solid .brk-box { cursor: default; }
.brk-box > span { padding: 0 6px; }
.brk-q { border-right: 1px solid var(--c); }
.brk-x { border-left: 1px solid var(--c); cursor: pointer; }
.brk-x:hover, .brk-hb:hover { background: var(--c); color: #fff; }
.brk-h { display: flex; padding: 0 !important; }
.brk-hb { padding: 0 5px; border-left: 1px solid var(--c); cursor: grab; }
.brk-tag { position: absolute; top: -4px; height: 18px; padding: 0 5px; font: 600 11px/18px -apple-system, "Segoe UI", sans-serif; color: #fff; background: var(--c); border-radius: 2px; pointer-events: auto; cursor: ns-resize; user-select: none; }
.brk-dim { opacity: .45; }
.brk-shade { position: absolute; pointer-events: none; }
.brk-conn { position: absolute; width: 0; border-left: 1px solid #5b7cfa; pointer-events: none; }
.brk-conn i { position: absolute; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: #5b7cfa; }
.brk-conn i:first-child { top: -4px; } .brk-conn i:last-child { bottom: -4px; }
body.brk-dragging, body.brk-dragging * { cursor: ns-resize !important; }
#pos-chip { display: none !important; }

/* f61: bracket pinned to the chart edge when its price is off-screen (TV behaviour) */
.brk-pin .brk-box { border-style: dashed; }

/* f72: "GO TO LIVE" chip — appears only while the user is parked away from the
   live edge, because the chart no longer auto-scrolls in that state. */
#follow-live-chip { position: absolute; right: 78px; bottom: 14px; z-index: 40;
  align-items: center; gap: 5px; padding: 5px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--tv-blue); background: rgba(41,98,255,.14); color: var(--tv-blue); }
#follow-live-chip:hover { background: rgba(41,98,255,.28); }

/* f72: the right-dock toggle now lives OUTSIDE the sidebar (fixed on the window
   edge). It used to be a child of the panel it collapses, so after collapsing it
   sat in an 18px rail where a previously-dragged inline width or an overlay could
   swallow the second click — the panel could be closed but never reopened. */
#dock-toggle { position: fixed !important; top: 50%; transform: translateY(-50%);
  left: auto !important;   /* f72: the old `left:-13px` fought the JS-set `right`,
                              so the button was pushed to x = -13 and was
                              physically unclickable while the panel was open */
  z-index: 4000; width: 15px; height: 46px; padding: 0; font-size: 11px;
  border: 1px solid var(--tv-border); background: var(--tv-panel); color: var(--tv-muted);
  border-radius: 4px 0 0 4px; cursor: pointer; }
#dock-toggle:hover { color: var(--tv-blue); border-color: var(--tv-blue); }

/* P7 — sectioned HUD (collapsible group headers, table-safe) */
/* Dashboard controls are readable without an opaque rectangle and can be scaled
   without rebuilding the table. The old section rule painted panel-coloured
   headers over candles, so every row now inherits transparency. */
#tv-hud-overlay, #tv-hud-overlay *, #tv-right-sidebar, #tv-right-sidebar *,
#tv-bottom-dock, #tv-bottom-dock * {
  font-size: calc(11px * var(--dashboard-scale)) !important;
}
#tv-hud-overlay, #tv-hud-overlay table, #tv-hud-overlay tbody,
#tv-hud-overlay tr, #tv-hud-overlay td, tr.hud-sec td {
  background: transparent !important;
}
tr.hud-sec td { color: #787b86; letter-spacing: .12em; font-weight: 600; padding: 5px 8px 3px;
  cursor: pointer; user-select: none; border-top: 1px solid rgba(120,123,134,.35); }
tr.hud-sec:hover td { color: #d1d4dc; }
tr.hud-sec-collapsed td { color: #5d606b; }
tr.hud-sec .hud-sec-arrow { display: inline-block; width: 1em; }
.positions-empty { text-align: center; color: var(--tv-muted); padding: 14px; }

/* Patch 18 — chart quantity field, traditional panel slider, optional trailing stop */
#chart-quick-qty { width: 58px; height: 22px; box-sizing: border-box; border: 1px solid #2a2e39; border-radius: 3px; background: transparent; color: var(--tv-text); font: 11px monospace; text-align: center; padding: 0 4px; }
.trad-panel { margin: 0 0 6px; }
.trad-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 1px solid #2a2e39; border-radius: 4px; color: var(--tv-text); padding: 4px 8px; font: 11px system-ui, sans-serif; cursor: pointer; text-align: left; }
.trad-switch { position: relative; width: 26px; height: 14px; border-radius: 7px; background: #4a4f5c; transition: background .2s; flex: none; }
.trad-switch i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .2s; }
.trad-toggle[aria-expanded="true"] .trad-switch { background: #2962ff; }
.trad-toggle[aria-expanded="true"] .trad-switch i { transform: translateX(12px); }
.trad-state { margin-left: auto; color: var(--tv-muted, #787b86); }
.trad-drawer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.trad-drawer.open { max-height: 560px; }
.trad-inner { padding: 6px 2px 2px; }
.trad-side { display: flex; gap: 6px; margin: 4px 0 6px; }
.trad-side-btn { flex: 1; height: 26px; border: 1px solid #2a2e39; background: none; color: var(--tv-text); border-radius: 3px; cursor: pointer; font-weight: 600; }
.trad-side-btn.buy[aria-pressed="true"] { background: #2962ff; border-color: #2962ff; color: #fff; }
.trad-side-btn.sell[aria-pressed="true"] { background: #f23645; border-color: #f23645; color: #fff; }
.tsl-enable { display: flex; gap: 6px; align-items: center; font-size: 11px; margin: 4px 0; color: var(--tv-text); }
.trad-actions { display: flex; gap: 6px; margin-top: 6px; }
.trad-actions .trade-action-btn { flex: 1; }
.trad-note { font-size: 10px; color: var(--tv-muted, #787b86); margin-top: 6px; }

/* Patch 19: persistent chart Buy/Sell status line — a refusal or server reply
   stays visible under the buttons instead of vanishing with the 6 s toast. */
#chart-quick-status { position: absolute; top: 58px; left: 12px; z-index: 13; display: none; max-width: 340px;
  padding: 3px 7px; border-radius: 4px; background: rgba(19,23,34,.88); color: #d1d4dc;
  font: 600 11px/1.35 -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
#chart-quick-status.show { display: block; }
#chart-quick-status.err { color: #ffb4bb; }
#chart-quick-status.ok { color: #a8f0b4; }
body.scale-left #chart-quick-status { left: 64px; }
[data-theme="light"] #chart-quick-status { background: rgba(255,255,255,.94); color: #131722; }

/* ================= R13: round-13 dashboard fix pack =====================================
   (1) HUD compaction  — the f16-era table floor (min-width:350px) plus a fixed 75px
       label column and 2px/4px padding forced short rows to stretch across the chip;
       those were the "column gaps too wide" the user flagged.
   (2) DOM floor  — .dom-view is flex-squeezed between the trad panel and the order
       ticket; a 17em floor keeps the heading, the Dhan row and ALL 5 depth rows visible
       (rows 4–5 were being clipped). em tracks --dashboard-scale, so the floor scales.
   (3) Global copy-error chip  — used to sit at right:12/bottom:10, i.e. ON the ticket
       SELL button. Bottom-centre matches the existing js-error-badge placement.
   (4) LTP + bar countdown  — now a solid chip anchored INSIDE the plot (app.js pins it
       scale-width+6px off the axis edge). No more transparent text painted over the
       price scale: no axis-label collisions, and the countdown stays legible on any
       candle colour, in both themes.
   (5) Crosshair bridge  — the hairline app.js shows only while the pointer is over the
       bottom dashboard, continuing the crosshair's vertical guide through it (LWC's own
       lines stop at the canvas edge). z-index 35 > dock's 20, pointer-events:none.
*/
#tv-hud-overlay table { min-width: 0; }
#tv-hud-overlay td { padding: 1px 3px; }
#tv-hud-overlay .hud-lbl { width: auto; padding-right: 5px; }
.dom-view { min-height: 17em; }
#global-copy-error-button { right: auto; left: 50%; bottom: 12px; transform: translateX(-50%); }
/* ---- R15 (final TV arrangement): LWC's NATIVE last-value label owns the price
   tag inside the scale (it suppresses overlapping tick labels and colors itself
   — no HTML overlay can cover or "shade" anything any more). The pinned
   #current-price-readout chip keeps its f75 y-anchor but now carries ONLY the
   bar countdown, nudged just below the tag — TV's "countdown under the last
   price" layout. The countdown wears a chart-bg chip only so it never GLYPH-
   blends with a stray tick label. ---- */
#current-price-value { display: none; }
#current-price-readout { right: 0; transform: translateY(11px); }
body.scale-left #current-price-readout { right: auto; left: 0; transform: translateY(11px); }
#bar-countdown { background: #131722; padding: 0 3px; border-radius: 2px; }
body[data-theme="light"] #bar-countdown { background: #ffffff; }
/* ---- R14/R15 HUD: slightly larger type (12px base). R15 anti-flicker: spanning
   rows are NOWRAP again (the R14 wrap re-flowed the dashboard on every update)
   but CAPPED, so a long REGIME line can neither stretch the TF columns into wide
   gaps nor change the overlay's height — it clips in place instead. ---- */
#tv-hud-overlay, #tv-hud-overlay * { font-size: calc(12px * var(--dashboard-scale)) !important; }
#tv-hud-overlay td[colspan] { white-space: nowrap; max-width: 44ch; overflow: hidden; }
/* ---- R15 alpha tools: two α icons at the bottom of the left toolbar; the
   slider is a click-open popover that collapses back to the icon. ---- */
#alpha-pop { position: fixed; left: 50px; z-index: 2600; display: none; align-items: center;
  gap: 7px; padding: 6px 9px; background: var(--tv-panel); border: 1px solid var(--tv-border);
  border-radius: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.45); font: 10px 'SF Mono',Menlo,monospace;
  color: var(--tv-muted); }
#alpha-pop input[type="range"] { width: 130px; height: 13px; }
/* ---- R15 dock: a slightly wider, grabbable drawer tab (click = toggle, drag = slide). ---- */
#dock-toggle { width: 18px; }
/* ---- R16-P5 (the three-round dock bug, diagnosed live on the user's probe):
   the panel OPENED — 300px wide — but ENTIRELY OFF-SCREEN: flex min-width:auto
   let #stage-center's min-content (the wide Trading-Panel tables, nowrap) crowd
   the `flex-shrink:0` 300px sidebar past the right edge, and the workspace's
   overflow:hidden then clipped it. "Collapse works, expand does not" (R13) was
   never a click/handler problem — it was this layout. min-width:0 permits the
   flexbox to shrink the stage so the dock can never be exiled off-screen. ---- */
#stage-center { min-width: 0; }
#xhair-v { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(120,123,134,.8); z-index: 35; pointer-events: none; display: none; }
[data-theme="light"] #xhair-v { border-left-color: rgba(90,94,105,.85); }